Sebastian Molenda
171 lines
7.0 KiB
HTML
171 lines
7.0 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>Testy Matematyczne</title>
|
||
<link rel="stylesheet" href="css/styles.css?v=20260524" />
|
||
<link rel="stylesheet" href="css/fonts/inter.css">
|
||
</head>
|
||
<body>
|
||
<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">
|
||
<div id="header-placeholder"></div>
|
||
|
||
<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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- ── PLAY SCREEN ── -->
|
||
<main class="play-screen-container hidden" id="play-screen">
|
||
<header class="play-header">
|
||
<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 id="progressbar-placeholder"></div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
</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>
|
||
|
||
<div id="footer-placeholder"></div>
|
||
<script src="js/version.js?v=20260521" defer></script>
|
||
<script src="js/nav.js?v=20260521"></script>
|
||
<script src="js/app.js?v=20260524"></script>
|
||
<script src="js/components.js"></script>
|
||
<script>
|
||
loadComponent('components/header.html', {
|
||
'{TITLE}': '📝 Testy Matematyczne',
|
||
'{SUBTITLE}': 'Skonfiguruj swój test i sprawdź wiedzę.'
|
||
}).then(html => {
|
||
document.getElementById('header-placeholder').outerHTML = html;
|
||
});
|
||
loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress_inner'}).then(html => {
|
||
document.getElementById('progressbar-placeholder').outerHTML = html;
|
||
});
|
||
loadComponent('components/footer.html').then(html => {
|
||
document.getElementById('footer-placeholder').outerHTML = html;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|