Sebastian Molenda
+102
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Nauka Dzielenia</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav-wrap">
|
||||
<button class="hamburger-btn" id="hamburger-btn">☰</button>
|
||||
<div class="hamburger-menu" id="hamburger-menu">
|
||||
<a href="index.html"><span class="nav-icon">🏠</span> Strona główna</a>
|
||||
<a href="mnozenie.html"><span class="nav-icon">×</span> Nauka mnożenia</a>
|
||||
<a href="dzielenie.html"><span class="nav-icon">÷</span> Nauka dzielenia</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="app-wrap">
|
||||
<!-- ── SELECT SCREEN ── -->
|
||||
<main class="screen" id="select-screen">
|
||||
<h1 class="learn-title">÷ Nauka Dzielenia</h1>
|
||||
<p class="learn-subtitle">Wybierz dzielnik do ćwiczenia</p>
|
||||
<section class="panel">
|
||||
<div class="table-grid" id="table-grid">
|
||||
<button class="table-btn" data-val="1">÷1</button>
|
||||
<button class="table-btn" data-val="2">÷2</button>
|
||||
<button class="table-btn" data-val="3">÷3</button>
|
||||
<button class="table-btn" data-val="4">÷4</button>
|
||||
<button class="table-btn" data-val="5">÷5</button>
|
||||
<button class="table-btn" data-val="6">÷6</button>
|
||||
<button class="table-btn" data-val="7">÷7</button>
|
||||
<button class="table-btn" data-val="8">÷8</button>
|
||||
<button class="table-btn" data-val="9">÷9</button>
|
||||
<button class="table-btn" data-val="10">÷10</button>
|
||||
<button class="table-btn all" data-val="0">Wszystkie (losowe)</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<label style="display:flex;justify-content:space-between;align-items:center;gap:12px">
|
||||
Liczba zadań
|
||||
<input id="total-input" type="number" min="5" max="100" value="20"
|
||||
style="width:80px;padding:8px;border-radius:8px;border:1px solid #e6e9ef">
|
||||
</label>
|
||||
</section>
|
||||
<button class="start-btn" id="start-btn">Zacznij ▶</button>
|
||||
</main>
|
||||
|
||||
<!-- ── PLAY SCREEN ── -->
|
||||
<main class="screen hidden" id="play-screen">
|
||||
<div class="learn-score-bar">
|
||||
<span id="progress-label">0/20</span>
|
||||
<strong id="score-label">✔ 0</strong>
|
||||
<button class="small" id="back-btn">← Wróć</button>
|
||||
</div>
|
||||
<div class="progress-outer"><div id="progress-inner" class="progress-inner"></div></div>
|
||||
|
||||
<section class="problem-area">
|
||||
<div id="problem" class="learn-problem">?</div>
|
||||
<div id="feedback" class="learn-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="clear">C</button>
|
||||
<button class="key">0</button>
|
||||
<button class="key special" id="backspace">←</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="submit-btn" id="submit">Sprawdź</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ── SUMMARY SCREEN ── -->
|
||||
<main class="screen hidden" id="summary-screen">
|
||||
<div class="summary" style="padding:40px 20px">
|
||||
<div style="font-size:60px">🎉</div>
|
||||
<h2>Koniec!</h2>
|
||||
<p id="summary-text" style="font-size:20px"></p>
|
||||
<button class="start-btn" id="again-btn">Jeszcze raz</button>
|
||||
<button class="start-btn" style="background:#6b7280" id="change-btn">Zmień dzielnik</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Commit: <span id="commit-sha">—</span></footer>
|
||||
<script src="nav.js"></script>
|
||||
<script src="dzielenie.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
// Nauka Dzielenia
|
||||
;(function () {
|
||||
const st = { divisor: null, total: 20, solved: 0, score: 0, current: null, buf: '' }
|
||||
|
||||
const selectScreen = document.getElementById('select-screen')
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const summaryScreen = document.getElementById('summary-screen')
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
const progressInner = document.getElementById('progress-inner')
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const scoreLabel = document.getElementById('score-label')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const totalInput = document.getElementById('total-input')
|
||||
|
||||
// divisor selection
|
||||
document.getElementById('table-grid').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.table-btn')
|
||||
if (!btn) return
|
||||
document.querySelectorAll('.table-btn').forEach(b => b.classList.remove('active'))
|
||||
btn.classList.add('active')
|
||||
st.divisor = parseInt(btn.dataset.val, 10) // 0 = all
|
||||
})
|
||||
|
||||
document.getElementById('start-btn').addEventListener('click', () => {
|
||||
st.total = Math.max(5, Math.min(100, parseInt(totalInput.value, 10) || 20))
|
||||
st.solved = 0
|
||||
st.score = 0
|
||||
show(playScreen)
|
||||
nextProblem()
|
||||
})
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => show(selectScreen))
|
||||
document.getElementById('again-btn').addEventListener('click', () => {
|
||||
st.solved = 0; st.score = 0; show(playScreen); nextProblem()
|
||||
})
|
||||
document.getElementById('change-btn').addEventListener('click', () => show(selectScreen))
|
||||
|
||||
// keypad
|
||||
document.querySelectorAll('.key').forEach(k => {
|
||||
k.addEventListener('click', () => {
|
||||
const v = k.textContent.trim()
|
||||
if (!/^[0-9]$/.test(v)) return
|
||||
if (st.buf.length >= 6) return
|
||||
st.buf += v; answerEl.textContent = st.buf
|
||||
})
|
||||
})
|
||||
document.getElementById('clear').addEventListener('click', () => { st.buf = ''; answerEl.textContent = '' })
|
||||
document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' })
|
||||
document.getElementById('submit').addEventListener('click', submit)
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
if (!playScreen.classList.contains('hidden')) {
|
||||
if (/^[0-9]$/.test(e.key) && st.buf.length < 6) { st.buf += e.key; answerEl.textContent = st.buf }
|
||||
else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' }
|
||||
else if (e.key === 'Enter') submit()
|
||||
}
|
||||
})
|
||||
|
||||
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }
|
||||
|
||||
function nextProblem() {
|
||||
const b = st.divisor || randInt(1, 10) // divisor
|
||||
const answer = randInt(1, 10) // quotient (always integer)
|
||||
const a = b * answer // dividend
|
||||
st.current = { a, b, answer }
|
||||
problemEl.textContent = `${a} ÷ ${b} = ?`
|
||||
feedbackEl.textContent = ''
|
||||
st.buf = ''; answerEl.textContent = ' '
|
||||
updateBar()
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!st.buf.trim()) return
|
||||
const given = parseInt(st.buf, 10)
|
||||
st.solved++
|
||||
if (given === st.current.answer) {
|
||||
st.score++
|
||||
feedbackEl.textContent = '✔ dobrze!'
|
||||
feedbackEl.style.color = '#16a34a'
|
||||
} else {
|
||||
feedbackEl.textContent = `✖ ${st.current.a} ÷ ${st.current.b} = ${st.current.answer}`
|
||||
feedbackEl.style.color = '#dc2626'
|
||||
}
|
||||
st.buf = ''; answerEl.textContent = ' '
|
||||
updateBar()
|
||||
if (st.solved >= st.total) {
|
||||
setTimeout(showSummary, 700)
|
||||
} else {
|
||||
setTimeout(nextProblem, 600)
|
||||
}
|
||||
}
|
||||
|
||||
function updateBar() {
|
||||
const pct = Math.round((st.solved / st.total) * 100)
|
||||
progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
scoreLabel.textContent = `✔ ${st.score}`
|
||||
}
|
||||
|
||||
function showSummary() {
|
||||
const pct = Math.round((st.score / st.total) * 100)
|
||||
summaryText.textContent = `${st.score} / ${st.total} poprawnie (${pct}%)`
|
||||
show(summaryScreen)
|
||||
}
|
||||
|
||||
function show(screen) {
|
||||
[selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
|
||||
screen.classList.remove('hidden')
|
||||
}
|
||||
|
||||
// commit SHA
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const el = document.getElementById('commit-sha')
|
||||
if (!el) return
|
||||
let sha = (window.COMMIT_SHA || '').toString().trim()
|
||||
if (!sha) {
|
||||
try {
|
||||
const res = await fetch('/version.sha', { cache: 'no-cache' })
|
||||
if (res.ok) {
|
||||
const txt = await res.text()
|
||||
const first = txt.split(/\r?\n/).find(l => l.trim().length > 0)
|
||||
if (first) sha = first.trim()
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
if (sha) el.textContent = sha.slice(0, 8)
|
||||
})
|
||||
})()
|
||||
@@ -7,6 +7,14 @@
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav-wrap">
|
||||
<button class="hamburger-btn" id="hamburger-btn">☰</button>
|
||||
<div class="hamburger-menu" id="hamburger-menu">
|
||||
<a href="index.html"><span class="nav-icon">🏠</span> Strona główna</a>
|
||||
<a href="mnozenie.html"><span class="nav-icon">×</span> Nauka mnożenia</a>
|
||||
<a href="dzielenie.html"><span class="nav-icon">÷</span> Nauka dzielenia</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="app-wrap">
|
||||
<main class="screen" id="menu-screen">
|
||||
<h1 class="app-title">Matma Trening</h1>
|
||||
@@ -145,6 +153,7 @@
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
|
||||
<script src="version.js" defer></script>
|
||||
<script src="nav.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Nauka Mnożenia</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav-wrap">
|
||||
<button class="hamburger-btn" id="hamburger-btn">☰</button>
|
||||
<div class="hamburger-menu" id="hamburger-menu">
|
||||
<a href="index.html"><span class="nav-icon">🏠</span> Strona główna</a>
|
||||
<a href="mnozenie.html"><span class="nav-icon">×</span> Nauka mnożenia</a>
|
||||
<a href="dzielenie.html"><span class="nav-icon">÷</span> Nauka dzielenia</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="app-wrap">
|
||||
<!-- ── SELECT SCREEN ── -->
|
||||
<main class="screen" id="select-screen">
|
||||
<h1 class="learn-title">× Nauka Mnożenia</h1>
|
||||
<p class="learn-subtitle">Wybierz tabliczkę do ćwiczenia</p>
|
||||
<section class="panel">
|
||||
<div class="table-grid" id="table-grid">
|
||||
<button class="table-btn" data-val="1">1×</button>
|
||||
<button class="table-btn" data-val="2">2×</button>
|
||||
<button class="table-btn" data-val="3">3×</button>
|
||||
<button class="table-btn" data-val="4">4×</button>
|
||||
<button class="table-btn" data-val="5">5×</button>
|
||||
<button class="table-btn" data-val="6">6×</button>
|
||||
<button class="table-btn" data-val="7">7×</button>
|
||||
<button class="table-btn" data-val="8">8×</button>
|
||||
<button class="table-btn" data-val="9">9×</button>
|
||||
<button class="table-btn" data-val="10">10×</button>
|
||||
<button class="table-btn all" data-val="0">Wszystkie (losowe)</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<label style="display:flex;justify-content:space-between;align-items:center;gap:12px">
|
||||
Liczba zadań
|
||||
<input id="total-input" type="number" min="5" max="100" value="20"
|
||||
style="width:80px;padding:8px;border-radius:8px;border:1px solid #e6e9ef">
|
||||
</label>
|
||||
</section>
|
||||
<button class="start-btn" id="start-btn">Zacznij ▶</button>
|
||||
</main>
|
||||
|
||||
<!-- ── PLAY SCREEN ── -->
|
||||
<main class="screen hidden" id="play-screen">
|
||||
<div class="learn-score-bar">
|
||||
<span id="progress-label">0/20</span>
|
||||
<strong id="score-label">✔ 0</strong>
|
||||
<button class="small" id="back-btn">← Wróć</button>
|
||||
</div>
|
||||
<div class="progress-outer"><div id="progress-inner" class="progress-inner"></div></div>
|
||||
|
||||
<section class="problem-area">
|
||||
<div id="problem" class="learn-problem">?</div>
|
||||
<div id="feedback" class="learn-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="clear">C</button>
|
||||
<button class="key">0</button>
|
||||
<button class="key special" id="backspace">←</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="submit-btn" id="submit">Sprawdź</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ── SUMMARY SCREEN ── -->
|
||||
<main class="screen hidden" id="summary-screen">
|
||||
<div class="summary" style="padding:40px 20px">
|
||||
<div style="font-size:60px">🎉</div>
|
||||
<h2>Koniec!</h2>
|
||||
<p id="summary-text" style="font-size:20px"></p>
|
||||
<button class="start-btn" id="again-btn">Jeszcze raz</button>
|
||||
<button class="start-btn" style="background:#6b7280" id="change-btn">Zmień tabliczkę</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Commit: <span id="commit-sha">—</span></footer>
|
||||
<script src="nav.js"></script>
|
||||
<script src="mnozenie.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
// Nauka Mnożenia
|
||||
;(function () {
|
||||
const st = { table: null, total: 20, solved: 0, score: 0, current: null, buf: '' }
|
||||
|
||||
const selectScreen = document.getElementById('select-screen')
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const summaryScreen = document.getElementById('summary-screen')
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
const progressInner = document.getElementById('progress-inner')
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const scoreLabel = document.getElementById('score-label')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const totalInput = document.getElementById('total-input')
|
||||
|
||||
// table selection
|
||||
document.getElementById('table-grid').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.table-btn')
|
||||
if (!btn) return
|
||||
document.querySelectorAll('.table-btn').forEach(b => b.classList.remove('active'))
|
||||
btn.classList.add('active')
|
||||
st.table = parseInt(btn.dataset.val, 10) // 0 = all
|
||||
})
|
||||
|
||||
document.getElementById('start-btn').addEventListener('click', () => {
|
||||
st.total = Math.max(5, Math.min(100, parseInt(totalInput.value, 10) || 20))
|
||||
st.solved = 0
|
||||
st.score = 0
|
||||
show(playScreen)
|
||||
nextProblem()
|
||||
})
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => show(selectScreen))
|
||||
document.getElementById('again-btn').addEventListener('click', () => {
|
||||
st.solved = 0; st.score = 0; show(playScreen); nextProblem()
|
||||
})
|
||||
document.getElementById('change-btn').addEventListener('click', () => show(selectScreen))
|
||||
|
||||
// keypad
|
||||
document.querySelectorAll('.key').forEach(k => {
|
||||
k.addEventListener('click', () => {
|
||||
const v = k.textContent.trim()
|
||||
if (!/^[0-9]$/.test(v)) return
|
||||
if (st.buf.length >= 6) return
|
||||
st.buf += v; answerEl.textContent = st.buf
|
||||
})
|
||||
})
|
||||
document.getElementById('clear').addEventListener('click', () => { st.buf = ''; answerEl.textContent = '' })
|
||||
document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' })
|
||||
document.getElementById('submit').addEventListener('click', submit)
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
if (!playScreen.classList.contains('hidden')) {
|
||||
if (/^[0-9]$/.test(e.key) && st.buf.length < 6) { st.buf += e.key; answerEl.textContent = st.buf }
|
||||
else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' }
|
||||
else if (e.key === 'Enter') submit()
|
||||
}
|
||||
})
|
||||
|
||||
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }
|
||||
|
||||
function nextProblem() {
|
||||
const a = st.table || randInt(1, 10)
|
||||
const b = randInt(1, 10)
|
||||
st.current = { a, b, answer: a * b }
|
||||
problemEl.textContent = `${a} × ${b} = ?`
|
||||
feedbackEl.textContent = ''
|
||||
st.buf = ''; answerEl.textContent = ' '
|
||||
updateBar()
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!st.buf.trim()) return
|
||||
const given = parseInt(st.buf, 10)
|
||||
st.solved++
|
||||
if (given === st.current.answer) {
|
||||
st.score++
|
||||
feedbackEl.textContent = '✔ dobrze!'
|
||||
feedbackEl.style.color = '#16a34a'
|
||||
} else {
|
||||
feedbackEl.textContent = `✖ ${st.current.a} × ${st.current.b} = ${st.current.answer}`
|
||||
feedbackEl.style.color = '#dc2626'
|
||||
}
|
||||
st.buf = ''; answerEl.textContent = ' '
|
||||
updateBar()
|
||||
if (st.solved >= st.total) {
|
||||
setTimeout(showSummary, 700)
|
||||
} else {
|
||||
setTimeout(nextProblem, 600)
|
||||
}
|
||||
}
|
||||
|
||||
function updateBar() {
|
||||
const pct = Math.round((st.solved / st.total) * 100)
|
||||
progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
scoreLabel.textContent = `✔ ${st.score}`
|
||||
}
|
||||
|
||||
function showSummary() {
|
||||
const pct = Math.round((st.score / st.total) * 100)
|
||||
summaryText.textContent = `${st.score} / ${st.total} poprawnie (${pct}%)`
|
||||
show(summaryScreen)
|
||||
}
|
||||
|
||||
function show(screen) {
|
||||
[selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
|
||||
screen.classList.remove('hidden')
|
||||
}
|
||||
|
||||
// commit SHA
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const el = document.getElementById('commit-sha')
|
||||
if (!el) return
|
||||
let sha = (window.COMMIT_SHA || '').toString().trim()
|
||||
if (!sha) {
|
||||
try {
|
||||
const res = await fetch('/version.sha', { cache: 'no-cache' })
|
||||
if (res.ok) {
|
||||
const txt = await res.text()
|
||||
const first = txt.split(/\r?\n/).find(l => l.trim().length > 0)
|
||||
if (first) sha = first.trim()
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
if (sha) el.textContent = sha.slice(0, 8)
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,18 @@
|
||||
// Shared hamburger menu toggle
|
||||
(function () {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const btn = document.getElementById('hamburger-btn')
|
||||
const menu = document.getElementById('hamburger-menu')
|
||||
if (!btn || !menu) return
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
menu.classList.toggle('open')
|
||||
})
|
||||
document.addEventListener('click', () => menu.classList.remove('open'))
|
||||
// mark active link
|
||||
const current = location.pathname.split('/').pop() || 'index.html'
|
||||
menu.querySelectorAll('a').forEach(a => {
|
||||
if (a.getAttribute('href') === current) a.classList.add('active')
|
||||
})
|
||||
})
|
||||
})()
|
||||
+23
@@ -65,6 +65,29 @@ body{
|
||||
|
||||
.app-footer{font-size:12px;color:var(--muted);text-align:center;padding:10px 0;width:100%;max-width:420px}
|
||||
|
||||
/* ── Hamburger nav ── */
|
||||
.nav-wrap{position:relative;width:100%;max-width:420px;display:flex;justify-content:flex-end;padding:6px 8px 0}
|
||||
.hamburger-btn{background:var(--card);border:1px solid #e6e9ef;border-radius:10px;padding:8px 12px;font-size:20px;cursor:pointer;line-height:1;box-shadow:0 2px 8px rgba(16,24,40,0.07)}
|
||||
.hamburger-menu{display:none;position:absolute;top:46px;right:8px;background:var(--card);border:1px solid #e6e9ef;border-radius:14px;box-shadow:0 8px 24px rgba(16,24,40,0.13);z-index:100;min-width:210px;overflow:hidden}
|
||||
.hamburger-menu.open{display:block}
|
||||
.hamburger-menu a{display:flex;align-items:center;gap:10px;padding:14px 18px;text-decoration:none;color:#111;font-size:16px;border-bottom:1px solid #f0f0f3}
|
||||
.hamburger-menu a:last-child{border-bottom:none}
|
||||
.hamburger-menu a:hover,.hamburger-menu a.active{background:#f0f4ff;color:var(--accent)}
|
||||
.hamburger-menu a .nav-icon{font-size:20px;width:24px;text-align:center}
|
||||
|
||||
/* ── Shared learn-page styles ── */
|
||||
.learn-title{margin:20px 16px 0;font-size:22px;font-weight:700;text-align:center}
|
||||
.learn-subtitle{text-align:center;color:var(--muted);font-size:14px;margin:4px 16px 12px}
|
||||
.table-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 4px}
|
||||
.table-btn{padding:14px 6px;border-radius:10px;border:1px solid #e6e9ef;background:white;font-size:18px;font-weight:600;cursor:pointer}
|
||||
.table-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
|
||||
.table-btn.all{grid-column:span 5;font-size:15px}
|
||||
.start-btn{display:block;width:calc(100% - 32px);margin:14px 16px;padding:16px;border-radius:12px;background:var(--accent);color:white;font-size:18px;font-weight:700;border:0;cursor:pointer}
|
||||
.learn-problem{font-size:60px;font-weight:700;text-align:center;margin:12px 0 4px}
|
||||
.learn-score-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;font-size:15px;color:var(--muted)}
|
||||
.learn-score-bar strong{font-size:18px;color:#111}
|
||||
.learn-feedback{height:24px;text-align:center;font-size:16px;color:var(--muted)}
|
||||
|
||||
@media (orientation:portrait){
|
||||
.screen{max-height:94vh}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user