matmoul
c09fdc7e0f
Remove layered shadows and pressed-state transforms from the calculator UI, and update the stack copy icon markup and active feedback to match the new flat design.
58 lines
4.5 KiB
HTML
58 lines
4.5 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="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></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="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></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="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></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="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></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> |