matmoul
223bf56339
Update the sample calculator UI to use compact math symbols, uppercase action labels, and a revised top bar layout. Also uppercase the angle mode button text and remove the backspace-specific width override.
72 lines
2.7 KiB
HTML
72 lines
2.7 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="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="topbar">
|
|
<div class="topbar-group">
|
|
<div class="menu-cell" id="modeMenuWrap">
|
|
<button type="button" class="menu-trigger key-function" id="modeMenuButton" aria-haspopup="true" aria-expanded="false">mode</button>
|
|
<div class="popup-menu" id="modeMenu" hidden></div>
|
|
<select id="angleMode" class="hidden-select" aria-hidden="true" tabindex="-1">
|
|
<option value="deg">Degrees</option>
|
|
<option value="rad">Radians</option>
|
|
<option value="grad">Grads</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="menu-cell" id="constsMenuWrap">
|
|
<button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">π/e</button>
|
|
<div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
|
|
</div>
|
|
|
|
<div class="topbar-spacer" aria-hidden="true"></div>
|
|
|
|
<div class="action-cell" id="deleteButton"></div>
|
|
<div class="action-cell" id="backspaceButton"></div>
|
|
<div class="action-cell" id="escapeButton"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="keyboard-layout">
|
|
<section class="key-group key-group-functions" aria-label="Functions">
|
|
<div class="group-title">Functions</div>
|
|
<div class="key-grid functions-grid" id="functionsButtons"></div>
|
|
</section>
|
|
|
|
<section class="key-group key-group-numbers" aria-label="Numbers">
|
|
<div class="group-title">Numbers</div>
|
|
<div class="key-grid numbers-grid" id="numbersButtons"></div>
|
|
</section>
|
|
|
|
<section class="key-group key-group-operators" aria-label="Operators">
|
|
<div class="group-title">Operators</div>
|
|
<div class="key-grid operators-grid" id="operatorsButtons"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="error" class="error"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../src/rpn-calculator.js"></script>
|
|
<script src="./index.js"></script>
|
|
</body>
|
|
</html> |