Some checks failed
Deploy to GitHub Pages / build-and-deploy (push) Has been cancelled
96 lines
5.0 KiB
HTML
96 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Geek Calculator</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔢</text></svg>">
|
||
<meta name="description" content="A terminal-themed calculator with RPN mode and offline capability">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>Geek Calculator</h1>
|
||
<pre id="ascii-banner" aria-hidden="true">
|
||
___ ___ ___ ________ ________
|
||
|\ \|\ \|\ \|\ __ \|\ ___ \
|
||
\ \ \\\ \ \ \ \ \|\ \ \ \\ \ \
|
||
\ \ __ \ \ \ \ __ \ \ \\ \ \
|
||
\ \ \ \ \ \ \ \ \ \ \ \ \\ \ \
|
||
\ \__\ \__\ \__\ \__\ \__\ \__\\ \__\
|
||
\|__|\|__|\|__|\|__|\|__|\|__| \|__|
|
||
GEEK CALCULATOR
|
||
</pre>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="calculator" role="main" aria-label="Calculator interface">
|
||
<div class="display" role="application" aria-label="Calculator display">
|
||
<div id="expression" class="expression" aria-live="polite" aria-atomic="true"></div>
|
||
<div id="result" class="result" aria-live="polite" aria-atomic="true">0</div>
|
||
<div id="cursor" class="cursor" aria-hidden="true">|</div>
|
||
</div>
|
||
|
||
<div class="history" id="history" aria-label="Calculation history">
|
||
<!-- Calculation history will appear here -->
|
||
</div>
|
||
|
||
<div class="command-palette" id="command-palette" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="command-dialog-title">
|
||
<h2 id="command-dialog-title">Command Palette</h2>
|
||
<input type="text" id="command-input" placeholder="Enter command (@help for help)..." aria-label="Command input">
|
||
<ul id="command-suggestions" aria-label="Command suggestions"></ul>
|
||
</div>
|
||
|
||
<div class="keypad" role="group" aria-label="Calculator keypad">
|
||
<button class="btn func" data-value="C" aria-label="Clear">C</button>
|
||
<button class="btn func" data-value="CE" aria-label="Clear entry">CE</button>
|
||
<button class="btn func" data-value="⌫" aria-label="Backspace">⌫</button>
|
||
<button class="btn op" data-value="÷" aria-label="Divide">÷</button>
|
||
|
||
<button class="btn num" data-value="7" aria-label="Seven">7</button>
|
||
<button class="btn num" data-value="8" aria-label="Eight">8</button>
|
||
<button class="btn num" data-value="9" aria-label="Nine">9</button>
|
||
<button class="btn op" data-value="×" aria-label="Multiply">×</button>
|
||
|
||
<button class="btn num" data-value="4" aria-label="Four">4</button>
|
||
<button class="btn num" data-value="5" aria-label="Five">5</button>
|
||
<button class="btn num" data-value="6" aria-label="Six">6</button>
|
||
<button class="btn op" data-value="-" aria-label="Subtract">-</button>
|
||
|
||
<button class="btn num" data-value="1" aria-label="One">1</button>
|
||
<button class="btn num" data-value="2" aria-label="Two">2</button>
|
||
<button class="btn num" data-value="3" aria-label="Three">3</button>
|
||
<button class="btn op" data-value="+" aria-label="Add">+</button>
|
||
|
||
<button class="btn num" data-value="0" aria-label="Zero">0</button>
|
||
<button class="btn num" data-value="." aria-label="Decimal point">.</button>
|
||
<button class="btn func" data-value="±" aria-label="Toggle sign">±</button>
|
||
<button class="btn op" data-value="=" aria-label="Equals">=</button>
|
||
</div>
|
||
|
||
<div class="mode-toggle">
|
||
<button id="rpn-mode-btn" class="mode-btn" aria-pressed="false">RPN: OFF</button>
|
||
</div>
|
||
|
||
<div class="easter-eggs" aria-hidden="true">
|
||
<!-- Hidden easter eggs will be triggered here -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>Geek Calculator v1.0 | Press '?' for shortcuts</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Load calculator modules in dependency order -->
|
||
<script src="calculator.js"></script>
|
||
<script src="rpn-calculator.js"></script>
|
||
<script src="state.js"></script>
|
||
<script src="utils.js"></script>
|
||
<script src="ui.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html> |