feat: add responsive calc-02 HP48GX demo

2026-05-15 18:45:44 +02:00
parent 95eb1d265f
commit 48a262eb87
7 changed files with 775 additions and 4 deletions
@@ -0,0 +1,52 @@
+<!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-panel">
+				<div class="display-frame">
+					<div class="display-grid">
+						<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span></div>
+						<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span></div>
+						<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span></div>
+						<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span></div>
+					</div>
+				</div>
+			</div>
+
+			<div class="display-buttons-panel">
+				<button id="modeButton" class="display-button">Mode</button>
+				<button id="pasteButton" class="display-button">Paste</button>
+				<button id="upButton" class="display-button">Up</button>
+				<button id="constButton" class="display-button">Const</button>
+				<button id="rightButton" class="display-button display-button-offset">Right</button>
+				<button id="downButton" class="display-button">Down</button>
+				<button id="constRightButton" class="display-button">Right</button>
+			</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>