151 lines
5.2 KiB
HTML
151 lines
5.2 KiB
HTML
<!doctype html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||
<title>Trening Matematyczny - Dodawanie/Odejmowanie</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-wrap">
|
||
<main class="screen" id="menu-screen">
|
||
<h1 class="app-title">Matma Trening</h1>
|
||
|
||
<section class="panel">
|
||
<h2>Wybierz działania</h2>
|
||
<div class="ops" id="ops">
|
||
<button class="op-btn" data-op="add">+ Dodawanie</button>
|
||
<button class="op-btn" data-op="sub">− Odejmowanie</button>
|
||
<button class="op-btn" data-op="mul">× Mnożenie</button>
|
||
<button class="op-btn" data-op="div">÷ Dzielenie</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Tryb gry</h2>
|
||
<div class="modes">
|
||
<button class="mode-btn" data-mode="timed" id="mode-timed">
|
||
<span class="icon">⧗</span>
|
||
Na czas
|
||
</button>
|
||
<button class="mode-btn" data-mode="training" id="mode-training">
|
||
<span class="icon">∞</span>
|
||
Trening
|
||
</button>
|
||
</div>
|
||
<p class="hint">Wybierz co najmniej jedno działanie, a następnie tryb, aby rozpocząć.</p>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>Historia
|
||
<button id="history-toggle" class="small" style="float:right">Pokaż</button>
|
||
</h2>
|
||
<div class="history-list collapsed" id="history-panel">
|
||
<div id="history-list">
|
||
<!-- wpisy historii w menu -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<h2>
|
||
Ustawienia
|
||
<button id="settings-toggle" class="small" style="float:right">Pokaż</button>
|
||
</h2>
|
||
<div class="settings collapsed" id="settings-panel">
|
||
<label> Czas (sek) — tryb na czas
|
||
<input id="setting-timed" type="number" min="5" max="600" />
|
||
</label>
|
||
<label> Maksymalny wynik
|
||
<input id="setting-max-result" type="number" min="1" max="999" />
|
||
</label>
|
||
<label> Maksymalna składowa (operand)
|
||
<input id="setting-max-operand" type="number" min="1" max="999" />
|
||
</label>
|
||
<label> Liczba zadań (tryb Trening)
|
||
<input id="setting-session-problems" type="number" min="1" max="500" />
|
||
</label>
|
||
<label> Wynik może być ujemny
|
||
<input id="setting-allow-negative" type="checkbox" />
|
||
</label>
|
||
<label> Wynik może być ułamkiem
|
||
<input id="setting-allow-fraction" type="checkbox" />
|
||
</label>
|
||
<div class="settings-actions">
|
||
<button id="save-settings" class="mode-btn">Zapisz</button>
|
||
<button id="reset-settings" class="mode-btn">Reset</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<main class="screen hidden" id="play-screen">
|
||
<header class="play-header">
|
||
<div class="left">
|
||
<button id="back-btn" class="small">← Menu</button>
|
||
</div>
|
||
<div class="center">
|
||
<div id="status">Trening</div>
|
||
</div>
|
||
<div class="right">
|
||
<div id="score">0</div>
|
||
</div>
|
||
</header>
|
||
<div class="progress-outer"><div id="progress-inner" class="progress-inner"></div></div>
|
||
|
||
<section class="problem-area">
|
||
<div id="timer" class="timer hidden">60</div>
|
||
<div id="problem" class="problem">—</div>
|
||
<div id="feedback" class="feedback"></div>
|
||
</section>
|
||
|
||
<section class="answer-area">
|
||
<div id="answer" class="answer"> </div>
|
||
<div class="keypad">
|
||
<div class="row">
|
||
<button class="key">1</button>
|
||
<button class="key">2</button>
|
||
<button class="key">3</button>
|
||
</div>
|
||
<div class="row">
|
||
<button class="key">4</button>
|
||
<button class="key">5</button>
|
||
<button class="key">6</button>
|
||
</div>
|
||
<div class="row">
|
||
<button class="key">7</button>
|
||
<button class="key">8</button>
|
||
<button class="key">9</button>
|
||
</div>
|
||
<div class="row">
|
||
<button class="key special" id="negate">+/-</button>
|
||
<button class="key">0</button>
|
||
<button class="key" id="dot">.</button>
|
||
</div>
|
||
<div class="row">
|
||
<button class="key special" id="clear">C</button>
|
||
<button class="key special" id="backspace">←</button>
|
||
<button class="submit-btn" id="submit">Sprawdź</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel hidden" id="summary-panel">
|
||
<div class="summary">
|
||
<h2>Podsumowanie</h2>
|
||
<p id="summary-text">Poprawne odpowiedzi: 0</p>
|
||
<div style="display:flex;gap:8px;justify-content:center;margin-top:12px">
|
||
<button id="summary-back" class="mode-btn">Powrót</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||
|
||
<script src="version.js" defer></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|