This commit is contained in:
Sebastian Molenda
+133
-124
@@ -4,151 +4,160 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Testy Matematyczne</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260521" />
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav-wrap">
|
||||
<a href="index.html" class="back-to-hub" id="back-to-hub">← Menu</a>
|
||||
</nav>
|
||||
<div class="app-wrap">
|
||||
<main class="screen" id="menu-screen">
|
||||
<h1 class="app-title">Matma Trening</h1>
|
||||
<div class="app-container">
|
||||
<!-- ── MENU SCREEN ── -->
|
||||
<main id="menu-screen">
|
||||
<nav class="subpage-nav">
|
||||
<a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
|
||||
</nav>
|
||||
<div class="screen-content">
|
||||
<header class="subpage-header">
|
||||
<h1 class="subpage-title">📝 Testy Matematyczne</h1>
|
||||
<p class="subpage-subtitle">Skonfiguruj swój test i sprawdź wiedzę.</p>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<div class="test-config-grid">
|
||||
<!-- Operations -->
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">1. Wybierz działania</h2>
|
||||
<div class="ops-grid" 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>
|
||||
<!-- Game Mode -->
|
||||
<section class="content-panel">
|
||||
<h2 class="panel-title">2. Wybierz tryb gry</h2>
|
||||
<div class="modes-grid">
|
||||
<button class="mode-btn" data-mode="timed" id="mode-timed">
|
||||
<span class="mode-icon">⧗</span>
|
||||
<span class="mode-label">Na czas</span>
|
||||
</button>
|
||||
<button class="mode-btn" data-mode="training" id="mode-training">
|
||||
<span class="mode-icon">∞</span>
|
||||
<span class="mode-label">Trening</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="hint-text">Wybierz co najmniej jedno działanie, a następnie tryb, aby rozpocząć.</p>
|
||||
</section>
|
||||
</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>
|
||||
<!-- Settings -->
|
||||
<section class="content-panel">
|
||||
<details class="settings-details">
|
||||
<summary class="settings-summary">
|
||||
<h2 class="panel-title">Ustawienia zaawansowane</h2>
|
||||
</summary>
|
||||
<div class="settings-content" id="settings-panel">
|
||||
<label class="settings-label-row"> Czas (sek) — tryb na czas
|
||||
<input id="setting-timed" type="number" min="5" max="600" class="settings-input-row" />
|
||||
</label>
|
||||
<label class="settings-label-row"> Maksymalny wynik
|
||||
<input id="setting-max-result" type="number" min="1" max="999" class="settings-input-row" />
|
||||
</label>
|
||||
<label class="settings-label-row"> Maksymalna składowa (operand)
|
||||
<input id="setting-max-operand" type="number" min="1" max="999" class="settings-input-row" />
|
||||
</label>
|
||||
<label class="settings-label-row"> Liczba zadań (tryb Trening)
|
||||
<input id="setting-session-problems" type="number" min="1" max="500" class="settings-input-row" />
|
||||
</label>
|
||||
<label class="settings-label-row checkbox"> Wynik może być ujemny
|
||||
<input id="setting-allow-negative" type="checkbox" />
|
||||
</label>
|
||||
<label class="settings-label-row checkbox"> Wynik może być ułamkiem
|
||||
<input id="setting-allow-fraction" type="checkbox" />
|
||||
</label>
|
||||
<div class="settings-actions">
|
||||
<button id="save-settings" class="action-btn">Zapisz</button>
|
||||
<button id="reset-settings" class="action-btn secondary">Resetuj</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</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>
|
||||
<!-- History -->
|
||||
<section class="content-panel">
|
||||
<details class="settings-details">
|
||||
<summary class="settings-summary">
|
||||
<h2 class="panel-title">Historia wyników</h2>
|
||||
</summary>
|
||||
<div class="history-list" id="history-panel">
|
||||
<!-- History items will be injected here -->
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main class="screen hidden" id="play-screen">
|
||||
<!-- ── PLAY SCREEN ── -->
|
||||
<main class="play-screen-container 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>
|
||||
<button id="back-btn" class="play-nav-btn">← Menu</button>
|
||||
<div id="status" class="play-status">Trening</div>
|
||||
<div id="score" class="play-score">0</div>
|
||||
</header>
|
||||
<div class="progress-outer"><div id="progress-inner" class="progress-inner"></div></div>
|
||||
<div class="play-progress-bar">
|
||||
<div id="progress_inner" class="play-progress-bar-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>
|
||||
<div class="play-body">
|
||||
<div class="problem-display">
|
||||
<div id="timer" class="timer-display hidden">60</div>
|
||||
<div id="problem" class="problem-text">—</div>
|
||||
<div id="feedback" class="feedback-text"></div>
|
||||
</div>
|
||||
|
||||
<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 class="keypad-container">
|
||||
<div id="answer" class="answer-display"></div>
|
||||
<div class="keypad">
|
||||
<div class="key-row">
|
||||
<button class="key">1</button><button class="key">2</button><button class="key">3</button>
|
||||
</div>
|
||||
<div class="key-row">
|
||||
<button class="key">4</button><button class="key">5</button><button class="key">6</button>
|
||||
</div>
|
||||
<div class="key-row">
|
||||
<button class="key">7</button><button class="key">8</button><button class="key">9</button>
|
||||
</div>
|
||||
<div class="key-row">
|
||||
<button class="key key-special" id="negate">±</button>
|
||||
<button class="key">0</button>
|
||||
<button class="key key-special" id="dot">.</button>
|
||||
</div>
|
||||
<div class="key-row">
|
||||
<button class="key key-special" id="clear">C</button>
|
||||
<button class="key key-special" id="backspace">⌫</button>
|
||||
<button class="submit-btn" id="submit">OK</button>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ── SUMMARY SCREEN ── -->
|
||||
<div id="summary-overlay" class="summary-overlay hidden">
|
||||
<div class="summary-modal">
|
||||
<div style="font-size: 48px;">🎉</div>
|
||||
<h2>Koniec gry!</h2>
|
||||
<p id="summary-text" class="summary-modal-text"></p>
|
||||
<button id="summary-back" class="action-btn">Wróć do menu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
|
||||
<script src="version.js?v=20260521" defer></script>
|
||||
<script src="nav.js?v=20260521"></script>
|
||||
<script src="app.js?v=20260521"></script>
|
||||
<script src="app.js?v=20260524"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user