index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Calque</title>

	<link rel="icon" type="image/x-icon" href="app/icons/icon.ico">
	<link rel="icon" type="image/png" href="app/icons/icon_32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="app/icons/icon_192.png" sizes="192x192">
	<link rel="shortcut icon" href="app/icons/icon_196.png" sizes="196x196">
	<link rel="apple-touch-icon" href="app/icons/icon_152.png" sizes="152x152">
	<link rel="apple-touch-icon" href="app/icons/icon_180.png" sizes="180x180">

	<link rel="stylesheet" href="app/themes/Dark.css?v=2">
	<link rel="stylesheet" href="app/style.css?v=2">
	<link href="https://fonts.googleapis.com/css?family=Oxygen+Mono&display=swap" rel="stylesheet">
	<meta name="theme-color" content="#2d2a2e">
	<meta property="og:url" content="https://unplugred.github.io/calque-desktop/">
	<meta name="twitter:url" content="https://unplugred.github.io/calque-desktop/">
	<meta property="og:type" content="article">
	<meta name="twitter:card" content="summary_large_image">
	<meta property="og:title" content="Calque Desktop">
	<meta name="twitter:title" content="Calque Desktop">
	<meta property="og:description" content="The desktop port of Calque, the reactive calculator ">
	<meta name="twitter:description" content="The desktop port of Calque, the reactive calculator ">
	<meta name="description" content="The desktop port of Calque, the reactive calculator ">
	<meta property="og:image" content="https://unplugred.github.io/calque-desktop/resources/og.png">
	<meta name="twitter:image" content="https://unplugred.github.io/calque-desktop/resources/og.png">
	<style>
		body {
			background: url("resources/melody-kodak-gold.jpg");
			background-size: cover;
			background-position: center;
			height: 100vh;
			width: 100vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		body,html {
			overflow: hidden;
		}

		#interface-wrap {
			margin: 1vh auto;
		}

		.interface {
			width: 70vw;
			height: 60vh;
			max-width: 500px;
			box-shadow: 0px 3px 15px 0px rgba(34,45,48,0.5);
			position: relative;
		}

		#download {
			padding: .5vh 1.5vh;
			display: block;
			font-size: 1.8vh;
			font-family: 'Oxygen Mono', monospace;
			text-align: center;
			background-color: #e9f0f7;
			color: #2d2a2e;
			font-weight: bold;
			border-radius: 6px;
			box-shadow: 0px 1px 5px 0px rgba(34,45,48,0.5);
			text-decoration: none;
			margin-left: auto;
			width: fit-content;
			margin-top: .5vh;
			z-index: 100;
			position: relative;
		}

		#logo {
			height: 95px;
			max-height: 10vh;
			margin: 0 auto;
			mix-blend-mode: multiply;
		}
	</style>
</head>
<body>
	<img id="logo" src="resources/logo.png" />
	<div id="interface-wrap">
		<div class="interface">
			<div class="output" id="output"></div>
			<textarea spellcheck="false" class="input" id="input"># Calque - reactive calculator

# Expressions
2 + 2 * 2
sqrt(3^2 + 4^2)
2 inch to cm
cos(45 deg)
time()

# Variables
a = 25
b = a * 2
postal_code = 1122

# Summing lists
animals:
  cats = 2
  dogs = 3
plants:
  trees = 20
  vegetables:
    potatoes = 10
    carrots = 10

# Functions
pow2(x) = x ^ 2
pow2(6)

# Last result
2 * 2
last + 1

# Plotting (uncomment)
#plot(sin(x * pi * 2) * 0.8)
#plot(pingpong(range(0, 3, 0.1)), 0, 1)

# Keys
# Duplicate line or selection: Ctrl+D
# Change selected number: Up/Down
# Change selected number 10x: Shift+Up/Down
# Change indent: Tab/Shift+Tab
# Zoom in: Ctrl+Shift+Plus
# Zoom out: Ctrl+Minus

# Themes can be changed via the right click menu.

# Calque Desktop on Github
# https://github.com/unplugred/calque-desktop

# Fork of Grimalschi's Calque:
# https://github.com/grimalschi/calque

# Using Math.js:
# https://github.com/grimalschi/mathjs</textarea>
			<canvas id="canvas"></canvas>
		</div>
		<a href="https://github.com/unplugred/calque-desktop/releases" id="download">Download</a>
	</div>

	<script>
		let linecolor = "white";
		window.onload = function () {
			var input = document.getElementById('input');
			if (localStorage.getItem("input"))
				input.value = localStorage.getItem("input");

			window.calque = new Calque(input, document.getElementById('output'));
			input.focus();
			linecolor = getComputedStyle(document.body).getPropertyValue('--foreground');
		}
	</script>
	<script defer src="app/math.js"></script>
	<script defer src="app/mathext.js"></script>
	<script defer src="app/calque.js"></script>
</body>
</html>