Трошин Антон Валерьевич
169 lines
6.5 KiB
HTML
169 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<title>NumNum</title>
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="icon" type="image/svg+xml" href="icon.svg">
|
|
<link rel="apple-touch-icon" href="icon-192.png">
|
|
<link rel="stylesheet" href="styles.css?v=17">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- MENU SCREEN -->
|
|
<div id="screen-menu" class="screen active">
|
|
<div class="menu-container">
|
|
<h1 class="logo">NumNum</h1>
|
|
<p class="subtitle" data-i18n="subtitle">Numeral systems trainer</p>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker" id="ticker"></div>
|
|
</div>
|
|
<button class="btn btn-primary btn-large" id="btn-start" data-i18n="startGame">Start Game</button>
|
|
<select id="lang-select" class="lang-select">
|
|
<option value="en">English</option>
|
|
<option value="ru">Русский</option>
|
|
</select>
|
|
<button class="btn btn-secondary btn-large hidden" id="btn-install" data-i18n="installApp">Install App</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETUP: SYSTEM SELECTION -->
|
|
<div id="screen-setup-system" class="screen">
|
|
<div class="setup-container">
|
|
<h2 data-i18n="chooseSystem">Choose numeral system</h2>
|
|
|
|
<div class="system-group">
|
|
<h3 data-i18n="nonPositional">Non-Positional</h3>
|
|
<div id="setup-systems-nonpos" class="option-grid"></div>
|
|
</div>
|
|
|
|
<div class="system-group">
|
|
<h3 data-i18n="positional">Positional</h3>
|
|
<div id="setup-systems-pos" class="option-grid"></div>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary" id="btn-system-back" data-i18n="back">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETUP: RANGE SELECTION -->
|
|
<div id="screen-setup-range" class="screen">
|
|
<div class="setup-container">
|
|
<h2 id="range-title" data-i18n="numberRange">Number Range</h2>
|
|
|
|
<div class="setup-section">
|
|
<div id="setup-ranges" class="option-grid"></div>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary" id="btn-range-back" data-i18n="back">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETUP: OPTIONS (mode, timing, rounds) -->
|
|
<div id="screen-setup-options" class="screen">
|
|
<div class="setup-container">
|
|
<h2 data-i18n="difficulty">Difficulty level</h2>
|
|
|
|
<div class="setup-section">
|
|
<h3 data-i18n="answerMode">Answer Mode</h3>
|
|
<div id="setup-modes" class="option-grid"></div>
|
|
</div>
|
|
|
|
<div class="setup-section">
|
|
<h3 data-i18n="timeLimit">Time Limit</h3>
|
|
<div id="setup-timing" class="option-grid"></div>
|
|
</div>
|
|
|
|
<div class="setup-section">
|
|
<h3 data-i18n="numberOfRounds">Number of Rounds</h3>
|
|
<div id="setup-rounds" class="option-grid"></div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-large" id="btn-play" data-i18n="play">Play!</button>
|
|
<button class="btn btn-secondary" id="btn-options-back" data-i18n="back">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GAME SCREEN -->
|
|
<div id="screen-game" class="screen">
|
|
<div class="game-header">
|
|
<div class="score-display">
|
|
<span id="score-round">0/0</span>
|
|
<span id="score-correct" class="score-correct">0</span>
|
|
<span id="score-incorrect" class="score-incorrect">0</span>
|
|
</div>
|
|
<div class="timer-area" id="timer-area">
|
|
<span class="timer-label" data-i18n="timeLeft">Time left</span>
|
|
<div class="timer-display" id="timer-display"></div>
|
|
</div>
|
|
<div class="header-right">
|
|
<button class="btn-stop" id="btn-stop">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="system-range-label" id="score-system-range"></div>
|
|
|
|
<div class="game-body">
|
|
<div class="number-display" id="number-display"></div>
|
|
<div class="answer-feedback" id="answer-feedback"></div>
|
|
|
|
<!-- Choice mode -->
|
|
<div id="choice-area" class="choice-area hidden">
|
|
<button class="choice-btn" id="choice-0"></button>
|
|
<button class="choice-btn" id="choice-1"></button>
|
|
<button class="choice-btn" id="choice-2"></button>
|
|
</div>
|
|
|
|
<!-- Manual entry mode -->
|
|
<div id="numpad-area" class="numpad-area hidden">
|
|
<div class="numpad-input" id="numpad-input"></div>
|
|
<div class="numpad">
|
|
<button class="numpad-key" data-key="1">1</button>
|
|
<button class="numpad-key" data-key="2">2</button>
|
|
<button class="numpad-key" data-key="3">3</button>
|
|
<button class="numpad-key" data-key="4">4</button>
|
|
<button class="numpad-key" data-key="5">5</button>
|
|
<button class="numpad-key" data-key="6">6</button>
|
|
<button class="numpad-key" data-key="7">7</button>
|
|
<button class="numpad-key" data-key="8">8</button>
|
|
<button class="numpad-key" data-key="9">9</button>
|
|
<button class="numpad-key numpad-action" data-key="clear">C</button>
|
|
<button class="numpad-key" data-key="0">0</button>
|
|
<button class="numpad-key numpad-action" data-key="backspace">⌫</button>
|
|
</div>
|
|
<button class="btn btn-primary hidden" id="btn-submit-answer" data-i18n="submit">Submit</button>
|
|
</div>
|
|
|
|
<button class="btn btn-primary hidden" id="btn-next" data-i18n="next">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RESULTS SCREEN -->
|
|
<div id="screen-results" class="screen">
|
|
<div class="results-container">
|
|
<h2 data-i18n="results">Results</h2>
|
|
<div class="results-summary" id="results-summary"></div>
|
|
<div class="results-congrats" id="results-congrats"></div>
|
|
<h3 class="results-mistakes-label" id="results-mistakes-label" data-i18n="mistakes">Mistakes</h3>
|
|
<div class="results-list" id="results-list"></div>
|
|
<button class="btn btn-primary btn-large" id="btn-play-again" data-i18n="playAgain">Play Again</button>
|
|
<button class="btn btn-secondary btn-large" id="btn-results-menu" data-i18n="menu">Menu</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="module" src="app.js?v=17"></script>
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/sw.js?v=17').catch(() => {});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|