mirror of https://github.com/rm-dr/daisy
Improved WASM webpage
parent
f9382616b2
commit
69ba2ab715
GPG Key ID:
AD62BB059C2AAEE4
148
index.html
148
index.html
|
|
@ -1,37 +1,149 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
|
||||||
|
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
|
||||||
|
<link rel="stylesheet" href="xterm.css">
|
||||||
|
<script src="node_modules/xterm/lib/xterm.js"></script>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: Fantasque;
|
||||||
|
src: url("FantasqueSansMono/Regular/complete/Fantasque Sans Mono Regular Nerd Font Complete.ttf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: #272A30;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-family: Fantasque;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
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 #4d5257;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
|
|
||||||
|
|
||||||
<div id="terminal">
|
<div id="header">
|
||||||
<div id="output"></div>
|
<img id="banner" src = "misc/daisy-light.svg" alt="Daisy Banner"/>
|
||||||
<div id="input">
|
<p>A high-precision, general-purpose scientific calculator</p>
|
||||||
<span id="prompt">$ </span>
|
</div>
|
||||||
<input type="text" id="cmd">
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Note the usage of `type=module` here as this is an ES6 module -->
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
// See wasm-pack docs
|
// See wasm-pack docs
|
||||||
// Build with `wasm-pack build --release --target web`
|
// Build with `wasm-pack build --release --target web`
|
||||||
// Works with wasm-pack 0.9.1. Some other versions give a segfault.
|
// Works with wasm-pack 0.9.1. Some other versions give a segfault.
|
||||||
import init, { dostr } from './pkg/daisycalc.js';
|
|
||||||
|
import init, { daisy_init, daisy_free, daisy_char, daisy_prompt } from './pkg/daisycalc.js';
|
||||||
await init();
|
await init();
|
||||||
|
|
||||||
$(document).ready(function() {
|
const term = new Terminal({
|
||||||
$("#cmd").focus();
|
"fontFamily": "Fantasque",
|
||||||
$("#cmd").keypress(function(e) {
|
"rows": 32,
|
||||||
if(e.which == 13) {
|
"fontSize": 16,
|
||||||
var cmd = $("#cmd").val();
|
"tabStopWidth": 8,
|
||||||
$("#output").append("<div>$ " + cmd + "</div>");
|
"cursorBlink": true,
|
||||||
$("#output").append("<div>$ " + dostr(cmd) + "</div>");
|
"theme": {
|
||||||
$("#cmd").val("");
|
"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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue