<!DOCTYPE html>
<html>
<head>
<title>Daisy Web</title>
<link rel="icon" href="resources/daisy-icon-light.svg" sizes="any" type="image/svg+xml">
<link rel="preload" href="resources/Fantasque.ttf" as="font" type="font/ttf" crossorigin>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script src="node_modules/xterm/lib/xterm.js"></script>
<style>
@font-face {
font-family: Fantasque;
src: url("resources/Fantasque.ttf") format("opentype");
}
html, body {
color: #FFFFFF;
background-color: #272A30;
font-size: 14pt;
font-family: Fantasque;
margin: 0;
padding: 0;
height: 100vh;
}
body {
max-width: 1000px;
margin: 0 auto !important;
float: none !important;
}
a {
font-size: 12pt;
}
a:link, a:visited {
color: #00B6B6;
text-decoration: none;
}
a:hover, a:active {
color: #04F1F1;
text-decoration: underline;
}
#terminal {
width: 90%;
height: auto;
margin: 0 auto !important;
padding: 20px;
background: #1D1F21;
box-sizing: box;
border: 0mm;
box-shadow: 0px 0px 10px 4px #3c4044;
}
#header {
padding-top: 20px;
padding-bottom: 20px;
width: 90%;
margin: 0 auto !important;
}
#footer {
padding-top: 20px;
padding-bottom: 20px;
width: 90%;
margin: 0 auto !important;
text-align: center;
}
#banner {
width: 40%;
}
</style>
</head>
<body>
<div id="header">
<img id="banner" src = "resources/daisy-light.svg" alt="Daisy Banner"/>
<p>A high-precision, general-purpose scientific calculator</p>
</div>
<div id="terminal"></div>
<div id="footer">
<a href="https://github.com/rm-dr/daisy" target="_blank" rel="noopener noreferrer">Source Code</a> |
<a href="https://github.com/rm-dr/daisy#-usage" target="_blank" rel="noopener noreferrer">Documentation</a> |
<a href="https://github.com/rm-dr/daisy/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">License</a>
<br>
<a href="https://crates.io/crates/daisycalc" target="_blank" rel="noopener noreferrer">crates.io</a> |
<a href="https://aur.archlinux.org/packages/daisy" target="_blank" rel="noopener noreferrer">AUR</a>
</div>
<script>
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) { alert("This site may not work on mobile."); }
</script>
<script type="module">
// See wasm-pack docs
// Build with `wasm-pack build --release --target web --out-dir pkg`
import init, { daisy_init, daisy_free, daisy_char, daisy_prompt } from './pkg/daisycalc.js';
await init();
const term = new Terminal({
"fontFamily": "Fantasque",
"rows": 32,
"fontSize": 16,
"tabStopWidth": 8,
"cursorBlink": true,
"theme": {
"background": "#1D1F21",
"foreground": "#F8F8F8",
"cursor": "#F8F8F2",
"black": "#282828",
"blue": "#0087AF",
"brightBlack": "#555555",
"brightBlue": "#87DFFF",
"brightCyan": "#28D1E7",
"brightGreen": "#A8FF60",
"brightMagenta": "#985EFF",
"brightRed": "#FFAA00",
"brightWhite": "#D0D0D0",
"brightYellow": "#F1FF52",
"cyan": "#87DFEB",
"green": "#B4EC85",
"magenta": "#BD99FF",
"red": "#FF6600",
"white": "#F8F8F8",
"yellow": "#FFFFB6"
}
});
term.open(document.getElementById("terminal"));
const state = daisy_init();
term.write(daisy_char(state, "h"));
term.write(daisy_char(state, "e"));
term.write(daisy_char(state, "l"));
term.write(daisy_char(state, "p"));
term.write(daisy_char(state, "\r"));
term.focus();
term.onData( data => { term.write(daisy_char(state, data)); });
</script>
</body>
</html>