m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

refactor: simplify hp48 sample UI

Browse Source
This commit is contained in:
MatMoul
2026-04-24 23:53:25 +02:00
parent 6dcf1d603c
commit 613e688608
1 changed files with 0 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/hp48/index.html
-60
View File
@@ -41,24 +41,6 @@
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
} }
.brand {
color: #fafafa;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
gap: 12px;
}
.brand h1 {
margin: 0;
font-size: 18px;
letter-spacing: 0.06em;
}
.brand small {
color: #c9c9c9;
}
.screen { .screen {
background: linear-gradient(180deg, #dbe8b8, var(--screen)); background: linear-gradient(180deg, #dbe8b8, var(--screen));
@@ -236,21 +218,6 @@
button:hover { filter: brightness(1.08); } button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); } button:active { transform: translateY(1px); }
.status {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
color: #ececec;
font-size: 13px;
}
.pill {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.05);
}
.constants-menu { .constants-menu {
position: absolute; position: absolute;
@@ -284,12 +251,6 @@
font-size: 13px; font-size: 13px;
} }
.hint {
color: #ddd;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 820px) { @media (max-width: 820px) {
.wrap { .wrap {
@@ -321,11 +282,6 @@
border-radius: 16px; border-radius: 16px;
} }
.brand {
flex-direction: column;
align-items: flex-start;
}
.keypad-labels, .keypad-labels,
.keypad-wrap { .keypad-wrap {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -346,11 +302,6 @@
<body> <body>
<div class="wrap"> <div class="wrap">
<div class="calc"> <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" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
<div class="screen-top"> <div class="screen-top">
<div>RPN stack</div> <div>RPN stack</div>
@@ -363,7 +314,6 @@
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1"> <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
<div class="input-row"> <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"> <select id="angleMode">
<option value="deg">Degrees</option> <option value="deg">Degrees</option>
<option value="rad">Radians</option> <option value="rad">Radians</option>
@@ -371,11 +321,6 @@
</select> </select>
</div> </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" id="keypadPanel"> <div class="panel" id="keypadPanel">
<div class="title">Calculator Keys</div> <div class="title">Calculator Keys</div>
<div class="keypad-labels" aria-hidden="true"> <div class="keypad-labels" aria-hidden="true">
@@ -395,7 +340,6 @@
</div> </div>
<div id="error" class="error"></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>
</div> </div>
@@ -408,8 +352,6 @@
const displayEl = document.getElementById('display'); const displayEl = document.getElementById('display');
const errorEl = document.getElementById('error'); const errorEl = document.getElementById('error');
const inputValueLabel = document.getElementById('inputValueLabel');
const editingLabel = document.getElementById('editingLabel');
const modeLabel = document.getElementById('modeLabel'); const modeLabel = document.getElementById('modeLabel');
const angleMode = document.getElementById('angleMode'); const angleMode = document.getElementById('angleMode');
const functionsKeypadEl = document.getElementById('functionsKeypad'); const functionsKeypadEl = document.getElementById('functionsKeypad');
@@ -783,8 +725,6 @@
} else { } else {
displayEl.textContent = 'READY'; displayEl.textContent = 'READY';
} }
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode; modeLabel.textContent = calc.angleMode;
angleMode.value = calc.angleMode; angleMode.value = calc.angleMode;
errorEl.textContent = ''; errorEl.textContent = '';