Files
geek-calc/index.html
snowprint 54f427ea21
Some checks failed
Deploy to GitHub Pages / build-and-deploy (push) Has been cancelled
init geek calc
2025-10-04 10:53:41 +08:00

96 lines
5.0 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>