118 lines
4.8 KiB
HTML
118 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Hogwarts Arithmancy v15</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="stats-modal" class="modal-overlay">
|
|
<div class="shop-panel">
|
|
<div class="shop-header">
|
|
<h2>Your Progress</h2>
|
|
</div>
|
|
<div id="stats-list" class="shop-scroll-area">
|
|
<!-- Stats will be rendered here by renderStats() -->
|
|
</div>
|
|
<button class="close-btn" onclick="closeStats()">Return to Class</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="shop-modal" class="modal-overlay">
|
|
<div class="shop-panel">
|
|
<div class="shop-header">
|
|
<h2>Student Trunk</h2>
|
|
<div class="currency-badge" style="justify-content: center; width: fit-content; margin: 5px auto;">
|
|
<span id="shop-gold">0</span> G
|
|
</div>
|
|
</div>
|
|
<div class="shop-scroll-area">
|
|
<div id="shop-list"></div>
|
|
</div>
|
|
<button class="close-btn" onclick="closeShop()">Return to Class</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="intro-modal" class="modal-overlay">
|
|
<div class="letter">
|
|
<div class="hogwarts-crest">
|
|
<h2>HOGWARTS SCHOOL</h2>
|
|
<div style="font-size: 0.8rem;">of WITCHCRAFT and WIZARDRY</div>
|
|
</div>
|
|
|
|
<p id="student-greeting"><strong>Dear Student,</strong></p>
|
|
<p>We are pleased to inform you that you have been accepted for remedial Arithmancy training.</p>
|
|
<p>Dark times are upon us. <strong>Dementors</strong> are gathering at the edges of our vision. They feed on hesitation. To drive them back, you must cast your spells (answer the equations) quickly and accurately.</p>
|
|
<p>Should you struggle, look to the stars for guidance. If you succeed, you will be rewarded with <strong>Galleons</strong> to spend on supplies in Diagon Alley.</p>
|
|
<div class="signature">Minerva McGonagall</div>
|
|
<div style="text-align:right; font-size:0.7rem;">Deputy Headmistress</div>
|
|
|
|
<button class="solemn-btn" onclick="closeIntro()">I Solemnly Swear I Am Ready</button>
|
|
|
|
<div class="checkbox-row">
|
|
<input type="checkbox" id="dont-show-again">
|
|
<label for="dont-show-again">Mischief Managed (Don't show again)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dementor-overlay"></div>
|
|
<div id="snitch-layer"></div>
|
|
|
|
<div class="card-container skin-default" id="main-card">
|
|
<div class="header-info">
|
|
<button class="shop-btn" onclick="openShop()" title="Student Trunk">🎒</button>
|
|
<div class="currency-badge">
|
|
<span id="gold-display">0</span> G
|
|
</div>
|
|
<button class="help-btn" onclick="openStats()" title="Report Card">📜</button>
|
|
<button class="help-btn" onclick="openIntro()" title="Letter">?</button>
|
|
</div>
|
|
|
|
<div class="header-info" style="justify-content: center; position: relative;">
|
|
<span id="level-name" style="font-size: 1rem; padding: 10px;">Year 1</span>
|
|
<div style="font-size: 0.8rem; text-align: right; color: #555; position: absolute; right: 0;">
|
|
<span id="xp-text">0 / 150 XP</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="buff-bar"></div>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress-fill" id="progress-bar"></div>
|
|
</div>
|
|
|
|
<div id="mastery-display"></div>
|
|
|
|
<div class="equation" id="equation-display"></div>
|
|
<div id="hint-grid"></div>
|
|
<div id="answer-display"></div>
|
|
|
|
<div class="keypad">
|
|
<button class="key-btn" onclick="pressKey(1)">1</button>
|
|
<button class="key-btn" onclick="pressKey(2)">2</button>
|
|
<button class="key-btn" onclick="pressKey(3)">3</button>
|
|
<button class="key-btn" onclick="pressKey(4)">4</button>
|
|
<button class="key-btn" onclick="pressKey(5)">5</button>
|
|
<button class="key-btn" onclick="pressKey(6)">6</button>
|
|
<button class="key-btn" onclick="pressKey(7)">7</button>
|
|
<button class="key-btn" onclick="pressKey(8)">8</button>
|
|
<button class="key-btn" onclick="pressKey(9)">9</button>
|
|
<button class="key-btn key-clear" onclick="pressKey('C')">C</button>
|
|
<button class="key-btn" onclick="pressKey(0)">0</button>
|
|
<button class="key-btn" onclick="pressKey('BS')">⌫</button>
|
|
<button class="key-btn key-cast" onclick="checkAnswer()">CAST SPELL</button>
|
|
</div>
|
|
|
|
<div class="feedback" id="feedback-msg"></div>
|
|
<div id="pet-perch"></div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|