mirror of
https://github.com/UpsilonNumworks/Upsilon.git
synced 2026-01-19 00:37:25 +01:00
301 lines
9.6 KiB
HTML
301 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>NumWorks graphing calculator</title>
|
|
<style>
|
|
body {
|
|
background: #E3E3E3 linear-gradient(0deg, #E3E3E3, #FFFFFF) no-repeat;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-fullscreen {
|
|
display: none;
|
|
width: 60%;
|
|
float: left;
|
|
}
|
|
|
|
.col-fullscreen canvas {
|
|
margin-top: 7%;
|
|
width: 100%;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
}
|
|
|
|
body.fullscreen .col-fullscreen {
|
|
display: block;
|
|
}
|
|
|
|
body.fullscreen .col-calculator {
|
|
width: 35%;
|
|
float: left;
|
|
}
|
|
|
|
a.action {
|
|
display: block;
|
|
width: 4%;
|
|
padding: 1.5% 3%;
|
|
border: 1px solid black;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
a.action:hover {
|
|
opacity: 1.0;
|
|
background-color: rgba(0,0,0,0.125);
|
|
}
|
|
|
|
a.action svg {
|
|
display: block;
|
|
}
|
|
|
|
.calculator {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: left; }
|
|
.calculator > img {
|
|
/* Rely on the img content to set the dimensions */
|
|
max-height: 100vh;
|
|
max-width: 100%;
|
|
display: block; }
|
|
.calculator .screen {
|
|
position: absolute;
|
|
top: 10.3%;
|
|
left: 24.25%;
|
|
width: 52.1%;
|
|
height: 23.2%;
|
|
border: 0 none; }
|
|
.calculator .actions {
|
|
position: absolute;
|
|
bottom: 2%;
|
|
text-align: center;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: 20px; /* Center the buttons - compensate the 10px margin below */
|
|
}
|
|
.calculator .actions a {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
.calculator .keyboard {
|
|
position: absolute;
|
|
top: 37%;
|
|
left: 19%;
|
|
width: 63%;
|
|
bottom: 14%; }
|
|
.calculator .keyboard span {
|
|
cursor: pointer;
|
|
border-radius: 40%;
|
|
display: block;
|
|
float: left; }
|
|
.calculator .keyboard span:hover {
|
|
background-color: rgba(0, 0, 0, 0.1); }
|
|
.calculator .keyboard span:active {
|
|
background-color: rgba(0, 0, 0, 0.2); }
|
|
.calculator .keyboard .nav {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 27%;
|
|
width: 100%; }
|
|
.calculator .keyboard .nav span {
|
|
position: absolute; }
|
|
.calculator .keyboard .nav .left {
|
|
top: 36%;
|
|
left: 3%;
|
|
width: 15%;
|
|
height: 28%; }
|
|
.calculator .keyboard .nav .right {
|
|
top: 36%;
|
|
left: 17%;
|
|
width: 15%;
|
|
height: 28%; }
|
|
.calculator .keyboard .nav .top {
|
|
top: 7%;
|
|
left: 12.5%;
|
|
width: 10%;
|
|
height: 40%; }
|
|
.calculator .keyboard .nav .bottom {
|
|
top: 53%;
|
|
left: 12.5%;
|
|
width: 10%;
|
|
height: 40%; }
|
|
.calculator .keyboard .nav .home {
|
|
top: 12%;
|
|
left: 42%;
|
|
width: 16%;
|
|
height: 33%; }
|
|
.calculator .keyboard .nav .power {
|
|
top: 54%;
|
|
left: 42%;
|
|
width: 16%;
|
|
height: 33%; }
|
|
.calculator .keyboard .nav .ok {
|
|
top: 30%;
|
|
left: 68%;
|
|
width: 13%;
|
|
height: 38%; }
|
|
.calculator .keyboard .nav .back {
|
|
top: 30%;
|
|
left: 84%;
|
|
width: 13%;
|
|
height: 38%; }
|
|
.calculator .keyboard .functions {
|
|
position: absolute;
|
|
top: 26.75%;
|
|
left: 1%;
|
|
width: 98%; }
|
|
.calculator .keyboard .functions span {
|
|
margin: 1.7% 1%;
|
|
width: 14.65%;
|
|
height: 0;
|
|
padding-top: 10%; }
|
|
.calculator .keyboard .digits {
|
|
position: absolute;
|
|
top: 57%;
|
|
left: 0.5%;
|
|
width: 98%; }
|
|
.calculator .keyboard .digits span {
|
|
margin: 1.8% 2%;
|
|
width: 16%;
|
|
height: 0;
|
|
padding-top: 11%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<div class="col-calculator">
|
|
<div class="calculator">
|
|
<img src="background.jpg" alt="NumWorks Calculator">
|
|
<canvas id="screen" class="screen" oncontextmenu="event.preventDefault()"></canvas>
|
|
<div class="keyboard">
|
|
<div class="nav">
|
|
<span class="left" data-key="0"></span>
|
|
<span class="top" data-key="1"></span>
|
|
<span class="bottom" data-key="2"></span>
|
|
<span class="right" data-key="3"></span>
|
|
<span class="ok" data-key="4"></span>
|
|
<span class="back" data-key="5"></span>
|
|
<span class="home" data-key="6"></span>
|
|
<span class="power" data-key="7"></span>
|
|
</div>
|
|
<div class="functions">
|
|
<span data-key="12"></span>
|
|
<span data-key="13"></span>
|
|
<span data-key="14"></span>
|
|
<span data-key="15"></span>
|
|
<span data-key="16"></span>
|
|
<span data-key="17"></span>
|
|
<span data-key="18"></span>
|
|
<span data-key="19"></span>
|
|
<span data-key="20"></span>
|
|
<span data-key="21"></span>
|
|
<span data-key="22"></span>
|
|
<span data-key="23"></span>
|
|
<span data-key="24"></span>
|
|
<span data-key="25"></span>
|
|
<span data-key="26"></span>
|
|
<span data-key="27"></span>
|
|
<span data-key="28"></span>
|
|
<span data-key="29"></span>
|
|
</div>
|
|
<div class="digits">
|
|
<span data-key="30"></span>
|
|
<span data-key="31"></span>
|
|
<span data-key="32"></span>
|
|
<span data-key="33"></span>
|
|
<span data-key="34"></span>
|
|
<span data-key="36"></span>
|
|
<span data-key="37"></span>
|
|
<span data-key="38"></span>
|
|
<span data-key="39"></span>
|
|
<span data-key="40"></span>
|
|
<span data-key="42"></span>
|
|
<span data-key="43"></span>
|
|
<span data-key="44"></span>
|
|
<span data-key="45"></span>
|
|
<span data-key="46"></span>
|
|
<span data-key="48"></span>
|
|
<span data-key="49"></span>
|
|
<span data-key="50"></span>
|
|
<span data-key="51"></span>
|
|
<span data-key="52"></span>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<a id="action-fullscreen" class="action">
|
|
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#434343"><path d="M5.075,6.95 L6.918,5.088 L3.938,2.062 L5.955,0.018 L0.052,0.018 L0.052,6.004 L2.098,3.928 L5.075,6.95 Z" class="si-glyph-fill"></path><path d="M16.0034788,9.916 L13.832,12.013 L10.799,8.96 L8.918,10.841 L11.957,13.897 L9.961,15.9813842 L16.0034788,15.9813842 L16.0034788,9.916 Z"></path></g></g></svg>
|
|
</a>
|
|
<a id="action-screenshot" class="action">
|
|
<svg viewBox="0 1.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>871</title><defs></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.995000, 2.980000)" fill="#434343"><circle cx="7.958" cy="6.958" r="2.958" class="si-glyph-fill"></circle><path d="M14.666,2.042 L10.953,2.042 L9.937,0.031 L6,0.031 L5,2.042 L1.333,2.042 C0.597,2.042 0,2.639 0,3.375 L0,10.625 C0,11.361 0.597,11.959 1.333,11.959 L14.666,11.959 C15.402,11.959 16,11.361 16,10.625 L16,3.375 C16,2.639 15.402,2.042 14.666,2.042 L14.666,2.042 Z M6.953,0.969 L9.047,0.969 L9.047,2.031 L6.953,2.031 L6.953,0.969 L6.953,0.969 Z M8.002,11.033 C5.764,11.033 3.947,9.221 3.947,6.985 C3.947,4.749 5.763,2.937 8.002,2.937 C10.242,2.937 12.057,4.749 12.057,6.985 C12.057,9.221 10.242,11.033 8.002,11.033 L8.002,11.033 Z M14,4.031 L11.953,4.031 L11.953,2.969 L14,2.969 L14,4.031 L14,4.031 Z" class="si-glyph-fill"></path></g></g></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-fullscreen">
|
|
<canvas class="screen-magnified" width="320" height="240"></canvas>
|
|
</div>
|
|
</div>
|
|
<script src="epsilon.js"></script>
|
|
<script>
|
|
var mainCanvas = document.querySelector(".calculator .screen");
|
|
var secondaryCanvasContext = document.querySelector(".screen-magnified").getContext("2d");
|
|
var Module = {
|
|
arguments: ["--language", window.navigator.language.split('-')[0]],
|
|
canvas: mainCanvas,
|
|
onDisplayRefresh: function() {
|
|
secondaryCanvasContext.drawImage(mainCanvas, 0, 0);
|
|
}
|
|
};
|
|
|
|
Epsilon(Module);
|
|
</script>
|
|
<script>
|
|
function screenshot() {
|
|
var canvas = document.querySelector('.screen');
|
|
var link = document.createElement('a');
|
|
link.download = 'screenshot.png';
|
|
link.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
|
|
link.click();
|
|
}
|
|
|
|
var spans = document.querySelectorAll(".calculator .keyboard span");
|
|
for (var i=0; i< spans.length; i++) {
|
|
var span = spans[i];
|
|
span.addEventListener("mousedown", function(e) {
|
|
Module._IonEventsEmscriptenKeyDown(this.getAttribute("data-key"));
|
|
});
|
|
span.addEventListener("mouseup", function(e) {
|
|
Module._IonEventsEmscriptenKeyUp(this.getAttribute("data-key"));
|
|
});
|
|
}
|
|
|
|
document.getElementById("action-fullscreen").addEventListener("click", function(e){
|
|
if (document.body.className == "fullscreen") {
|
|
document.body.className = "";
|
|
} else {
|
|
document.body.className = "fullscreen";
|
|
}
|
|
});
|
|
|
|
document.getElementById("action-screenshot").addEventListener("click", function(e) {
|
|
screenshot();
|
|
});
|
|
|
|
window.addEventListener("keydown", function(e) {
|
|
// space and arrow keys
|
|
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
|
|
e.preventDefault();
|
|
}
|
|
}, false);
|
|
</script>
|
|
<script async src="https://www.numworks.com/simulator/update.js"></script>
|
|
</body>
|
|
</html>
|