matmoul
2504716c64
Reorder the stack cell grid so the copy button sits beside the label and reduce spacing to better align the value column.
58 lines
4.1 KiB
HTML
58 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>HP48GX RPN Calculator</title>
|
|
<link rel="stylesheet" href="./index.css">
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
|
|
<div class="display-block">
|
|
<div class="display-panel">
|
|
<div class="status-bar" id="statusLine" aria-live="polite"></div>
|
|
<div class="display-frame">
|
|
<div class="display-grid">
|
|
<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
|
|
<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
|
|
<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
|
|
<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="display-buttons-panel">
|
|
<div class="display-buttons-grid">
|
|
<button id="modeButton" class="display-button">Mode</button>
|
|
<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
|
|
<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
|
|
<button id="constButton" class="display-button">π</button>
|
|
<div class="display-button-spacer"></div>
|
|
<button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
|
|
<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
|
|
<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="keypad-panel">
|
|
<div class="keypad-grid" id="keypadGrid"></div>
|
|
</div>
|
|
|
|
<div class="functions-panel">
|
|
<div class="functions-grid" id="functionsGrid"></div>
|
|
</div>
|
|
|
|
<div class="trigo-panel">
|
|
<div class="trigo-grid" id="trigoGrid"></div>
|
|
</div>
|
|
|
|
<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
|
|
</section>
|
|
</main>
|
|
|
|
<script src="../../src/rpn-calculator.js"></script>
|
|
<script src="./index.js"></script>
|
|
</body>
|
|
</html> |