70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>HP48-style RPN Calculator</title>
|
|
<link rel="stylesheet" href="./index.css">
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="calc">
|
|
<div class="brand">
|
|
<h1>HP48-style RPN</h1>
|
|
<small>powered by src/rpn-calculator.js</small>
|
|
</div>
|
|
|
|
<div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
|
|
<div class="screen-top">
|
|
<div>RPN stack</div>
|
|
<div id="modeLabel">deg</div>
|
|
</div>
|
|
<div id="stack" class="stack"></div>
|
|
<div id="display"></div>
|
|
</div>
|
|
|
|
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
|
|
|
|
<div class="input-row">
|
|
<div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t</div>
|
|
<select id="angleMode">
|
|
<option value="deg">Degrees</option>
|
|
<option value="rad">Radians</option>
|
|
<option value="grad">Grads</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<div class="pill">inputValue: <span id="inputValueLabel"></span></div>
|
|
<div class="pill">isEditing: <span id="editingLabel"></span></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="title">Stack</div>
|
|
<div class="buttons" id="stackButtons"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="title">Arithmetic</div>
|
|
<div class="buttons" id="arithButtons"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="title">Trigonometry</div>
|
|
<div class="buttons" id="trigButtons"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="title">Constants</div>
|
|
<div class="buttons" id="constButtons"></div>
|
|
</div>
|
|
|
|
<div id="error" class="error"></div>
|
|
<div class="hint">Use Enter to commit the current value. Buttons call <code>command(...)</code> directly, like a real RPN demo.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../src/rpn-calculator.js"></script>
|
|
<script src="./index.js"></script>
|
|
</body>
|
|
</html> |