init

.gitignore

@@ -0,0 +1 @@
+.DS_Store

.htaccess

@@ -0,0 +1,44 @@
+# Disable directory listing
+Options -Indexes
+
+# Default directory index
+DirectoryIndex index.html
+
+# Serve index.html for SPA client-side routing (if file/dir doesn't exist)
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  # If the request is for an existing file or directory, serve it
+  RewriteCond %{REQUEST_FILENAME} -f [OR]
+  RewriteCond %{REQUEST_FILENAME} -d
+  RewriteRule ^ - [L]
+  # Otherwise rewrite to index.html
+  RewriteRule ^ index.html [L]
+</IfModule>
+
+# Optional: small caching hints for static assets
+<IfModule mod_expires.c>
+  ExpiresActive On
+  ExpiresByType text/css "access plus 1 week"
+  # Keep JS cache short during development to avoid stale scripts on mobile
+  ExpiresByType application/javascript "access plus 60 seconds"
+  ExpiresByType image/* "access plus 1 week"
+</IfModule>
+
+<IfModule mod_headers.c>
+  # Add Cache-Control headers for more precise control
+  <FilesMatch "\.js$">
+    Header set Cache-Control "max-age=60, public"
+  </FilesMatch>
+  <FilesMatch "\.css$">
+    Header set Cache-Control "max-age=604800, public"
+  </FilesMatch>
+  <FilesMatch "\.(png|jpg|jpeg|gif|svg)$">
+    Header set Cache-Control "max-age=604800, public"
+  </FilesMatch>
+</IfModule>
+
+# Prevent serving hidden files (like .env, .git)
+<FilesMatch "^\..+">
+  Require all denied
+</FilesMatch>

README.md

@@ -0,0 +1,15 @@
+Matma Trening - Prototyp
+
+Opis
+
+Prosty, mobilny prototyp aplikacji do trenowania działań matematycznych (na razie dodawanie i odejmowanie).
+
+Pliki
+
+- index.html - główny widok
+- styles.css - stylowanie mobilne
+- app.js - logika aplikacji (generacja zadań, tryby, klawiatura)
+
+Jak uruchomić
+
+Otwórz plik `index.html` w przeglądarce (najlepiej na urządzeniu mobilnym lub w trybie responsywnym).

app.js

@@ -0,0 +1,480 @@
+// Minimal app logic for math training (addition & subtraction)
+const state = {
+  ops: new Set(),
+  mode: null, // 'timed' or 'training'
+  score: 0,
+  currentProblem: null,
+  answerBuffer: '',
+  timerId: null,
+  timeLeft: 60,
+  settings: {
+    timedSeconds: 60,
+    maxResult: 40,
+    maxOperand: 20,
+  sessionProblems: 20,
+  allowNegative: false,
+  allowFraction: false,
+  }
+}
+
+// elements
+const menuScreen = document.getElementById('menu-screen')
+const playScreen = document.getElementById('play-screen')
+const opsContainer = document.getElementById('ops')
+const modeButtons = document.querySelectorAll('.mode-btn')
+const opButtons = document.querySelectorAll('.op-btn')
+const backBtn = document.getElementById('back-btn')
+const problemEl = document.getElementById('problem')
+const answerEl = document.getElementById('answer')
+const feedbackEl = document.getElementById('feedback')
+const timerEl = document.getElementById('timer')
+const scoreEl = document.getElementById('score')
+const keypad = document.querySelectorAll('.key')
+const submitBtn = document.getElementById('submit')
+const clearBtn = document.getElementById('clear')
+const backspaceBtn = document.getElementById('backspace')
+const historyBtn = document.getElementById('history-btn')
+const historyScreen = document.getElementById('history-screen')
+const historyBack = document.getElementById('history-back')
+const historyList = document.getElementById('history-list')
+const clearHistoryBtn = document.getElementById('clear-history')
+const historyPanel = document.getElementById('history-panel')
+const historyToggle = document.getElementById('history-toggle')
+const settingTimed = document.getElementById('setting-timed')
+const settingMaxResult = document.getElementById('setting-max-result')
+const settingMaxOperand = document.getElementById('setting-max-operand')
+const settingAllowNegative = document.getElementById('setting-allow-negative')
+const settingAllowFraction = document.getElementById('setting-allow-fraction')
+const saveSettingsBtn = document.getElementById('save-settings')
+const resetSettingsBtn = document.getElementById('reset-settings')
+const settingsToggle = document.getElementById('settings-toggle')
+const settingsPanel = document.getElementById('settings-panel')
+const progressInner = document.getElementById('progress-inner')
+const dotBtn = document.getElementById('dot')
+const negateBtn = document.getElementById('negate')
+const summaryPanel = document.getElementById('summary-panel')
+const summaryText = document.getElementById('summary-text')
+const summaryBack = document.getElementById('summary-back')
+
+// load settings from localStorage
+function loadSettings(){
+  try{
+    const raw = localStorage.getItem('matma:settings')
+    if (raw) {
+      const s = JSON.parse(raw)
+      state.settings = Object.assign(state.settings, s)
+    }
+  }catch(e){ console.warn('settings load failed', e) }
+  // reflect to inputs
+  settingTimed.value = state.settings.timedSeconds
+  settingMaxResult.value = state.settings.maxResult
+  settingMaxOperand.value = state.settings.maxOperand
+  const sess = state.settings.sessionProblems || 20
+  const settingSessionProblems = document.getElementById('setting-session-problems')
+  if (settingSessionProblems) settingSessionProblems.value = sess
+  if (settingAllowNegative) settingAllowNegative.checked = !!state.settings.allowNegative
+  if (settingAllowFraction) settingAllowFraction.checked = !!state.settings.allowFraction
+}
+
+function saveSettings(){
+  const timed = parseInt(settingTimed.value,10) || state.settings.timedSeconds
+  const maxResult = parseInt(settingMaxResult.value,10) || state.settings.maxResult
+  const maxOperand = parseInt(settingMaxOperand.value,10) || state.settings.maxOperand
+  state.settings.timedSeconds = Math.max(5, Math.min(600, timed))
+  state.settings.maxResult = Math.max(1, Math.min(999, maxResult))
+  state.settings.maxOperand = Math.max(1, Math.min(999, maxOperand))
+  const settingSessionProblems = document.getElementById('setting-session-problems')
+  if (settingSessionProblems) state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || state.settings.sessionProblems))
+  if (settingAllowNegative) state.settings.allowNegative = !!settingAllowNegative.checked
+  if (settingAllowFraction) state.settings.allowFraction = !!settingAllowFraction.checked
+  try{ localStorage.setItem('matma:settings', JSON.stringify(state.settings)) }catch(e){console.warn('save failed',e)}
+  // visual feedback
+  feedbackEl.textContent = 'Ustawienia zapisane'
+  setTimeout(()=>feedbackEl.textContent = '',1500)
+}
+
+function resetSettings(){
+  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20}
+  saveSettings()
+  loadSettings()
+}
+
+saveSettingsBtn.addEventListener('click', saveSettings)
+resetSettingsBtn.addEventListener('click', resetSettings)
+
+// settings toggle
+settingsToggle.addEventListener('click', ()=>{
+  const collapsed = settingsPanel.classList.toggle('collapsed')
+  settingsToggle.textContent = collapsed ? 'Pokaż' : 'Ukryj'
+})
+
+loadSettings()
+
+// initial wiring
+opButtons.forEach(b => {
+  if (b.classList.contains('disabled')) return
+  b.addEventListener('click', () => {
+    const op = b.dataset.op
+    if (state.ops.has(op)) { state.ops.delete(op); b.classList.remove('active') }
+    else { state.ops.add(op); b.classList.add('active') }
+  })
+})
+
+modeButtons.forEach(b => b.addEventListener('click', () => {
+  modeButtons.forEach(x=>x.classList.remove('active'))
+  b.classList.add('active')
+  state.mode = b.dataset.mode
+  // require at least one op selected to start
+  if (state.ops.size === 0) {
+    feedbackEl.textContent = 'Wybierz co najmniej jedno działanie.'
+    return
+  }
+  startPlay()
+}))
+
+backBtn.addEventListener('click', ()=>{
+  stopTimer()
+  playScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+  feedbackEl.textContent = ''
+})
+
+function startPlay(){
+  menuScreen.classList.add('hidden')
+  playScreen.classList.remove('hidden')
+  state.score = 0
+  scoreEl.textContent = state.score
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+  feedbackEl.textContent = ''
+  state.currentProblem = generateProblem()
+  renderProblem()
+  // make problem larger for mobile clarity
+  problemEl.classList.add('big')
+  // init progress
+  if (state.mode === 'timed'){
+    progressInner.style.width = '0%'
+    startTimer(state.settings.timedSeconds)
+  } else {
+    progressInner.style.width = '0%'
+    state.sessionSolved = 0
+    state.sessionTarget = Math.max(1, state.settings.sessionProblems || 20)
+    updateProgress()
+    hideTimer()
+  }
+}
+
+function generateProblem(){
+  // choose an operation from selected ops
+  const ops = Array.from(state.ops)
+  const op = ops[Math.floor(Math.random()*ops.length)]
+  // generate operands within maxOperand and ensure result within maxResult
+  const maxOp = Math.max(1, state.settings.maxOperand)
+  const maxRes = Math.max(1, state.settings.maxResult)
+  let a = 0, b = 0
+  // try a few times to satisfy constraints
+  for (let i=0;i<200;i++){
+    if (op === 'div'){
+      // divisor b should be non-zero
+      b = randInt(1, maxOp)
+      if (!state.settings.allowFraction){
+        // produce integer result q such that a = q * b and a <= maxOp and q <= maxRes
+        const maxQByOp = Math.floor(maxOp / b)
+        const maxQ = Math.min(maxRes, maxQByOp)
+        if (maxQ < 0) continue
+        const q = randInt(0, maxQ)
+        a = q * b
+        // optional negative results
+        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
+        return {a,b,op}
+      } else {
+        // allow fractional results: generate tenths (one decimal place)
+        const maxResultNByOp = Math.floor((10 * maxOp) / b)
+        const maxResultN = Math.min(maxRes * 10, maxResultNByOp)
+        if (maxResultN < 0) continue
+        const result_n = randInt(0, maxResultN)
+        // ensure dividend is integer: (result_n * b) % 10 === 0
+        if ((result_n * b) % 10 !== 0) continue
+        a = (result_n * b) / 10
+        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
+        return {a,b,op}
+      }
+    } else if (op === 'mul'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (a * b <= maxRes) return {a,b,op}
+    } else if (op === 'add'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (a + b <= maxRes) return {a,b,op}
+    } else if (op === 'sub'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (!state.settings.allowNegative){
+        if (a < b) [a,b] = [b,a]
+        if (a - b <= maxRes) return {a,b,op}
+      } else {
+        // negative allowed: result absolute should be <= maxRes
+        if (Math.abs(a - b) <= maxRes) return {a,b,op}
+      }
+    }
+  }
+  // fallback: return simple small numbers
+  a = Math.min(maxOp, Math.floor(maxRes/2))
+  b = Math.min(maxOp, 1)
+  return {a,b,op}
+}
+
+function randInt(min,max){
+  return Math.floor(Math.random()*(max-min+1))+min
+}
+
+function renderProblem(){
+  const p = state.currentProblem
+  const map = {add: '+', sub: '−', mul: '×', div: '÷'}
+  const symbol = map[p.op] || '?'
+  problemEl.textContent = `${p.a} ${symbol} ${p.b} = ?`
+}
+
+function submitAnswer(){
+  const buf = state.answerBuffer.trim()
+  if (buf.length === 0) return
+  const given = parseFloat(buf)
+  const p = state.currentProblem
+  let correct = null
+  if (p.op === 'add') correct = p.a + p.b
+  else if (p.op === 'sub') correct = p.a - p.b
+  else if (p.op === 'mul') correct = p.a * p.b
+  else if (p.op === 'div') correct = (p.b === 0) ? null : (p.a / p.b)
+  const eps = state.settings.allowFraction ? 1e-6 : 1e-9
+  const isCorrect = (correct !== null) && (Math.abs(given - correct) < eps)
+  if (isCorrect) {
+    state.score += 1
+    feedbackEl.textContent = '✔ dobrze'
+  } else {
+    feedbackEl.textContent = `✖ poprawne: ${Number.isFinite(correct) ? correct : '—'}`
+  }
+  scoreEl.textContent = state.score
+  // next problem
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+  // increment solved count and handle training limit
+  if (state.mode === 'training'){
+    state.sessionSolved = (state.sessionSolved || 0) + 1
+    updateProgress()
+    if (state.sessionSolved >= state.sessionTarget){
+      // reached limit -> show summary instead of next problem
+      saveSessionToHistory()
+      showSummary()
+      return
+    }
+  }
+  // otherwise generate next problem
+  state.currentProblem = generateProblem()
+  renderProblem()
+}
+
+submitBtn.addEventListener('click', submitAnswer)
+
+keypad.forEach(k => {
+  k.addEventListener('click', ()=>{
+    const v = k.textContent.trim()
+    if (!/^[0-9]$/.test(v)) return
+    if (state.answerBuffer.length >= 12) return
+    state.answerBuffer += v
+    answerEl.textContent = state.answerBuffer
+  })
+})
+
+if (dotBtn){
+  dotBtn.addEventListener('click', ()=>{
+    if (!state.settings.allowFraction) return
+    if (state.answerBuffer.includes('.')) return
+    if (state.answerBuffer.length === 0) state.answerBuffer = '0'
+    state.answerBuffer += '.'
+    answerEl.textContent = state.answerBuffer
+  })
+}
+
+if (negateBtn){
+  negateBtn.addEventListener('click', ()=>{
+    if (!state.settings.allowNegative) return
+    if (state.answerBuffer.startsWith('-')) state.answerBuffer = state.answerBuffer.slice(1)
+    else state.answerBuffer = '-' + state.answerBuffer
+    answerEl.textContent = state.answerBuffer
+  })
+}
+
+clearBtn.addEventListener('click', ()=>{
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+})
+
+backspaceBtn.addEventListener('click', ()=>{
+  state.answerBuffer = state.answerBuffer.slice(0,-1)
+  answerEl.textContent = state.answerBuffer
+})
+
+function startTimer(seconds){
+  state.timeLeft = seconds
+  timerEl.textContent = state.timeLeft
+  timerEl.classList.remove('hidden')
+  state.timerId = setInterval(()=>{
+    state.timeLeft -= 1
+    timerEl.textContent = state.timeLeft
+  // update progress bar for timed mode
+  const pct = Math.max(0, ((seconds - state.timeLeft) / seconds) * 100)
+  progressInner.style.width = pct + '%'
+    if (state.timeLeft <= 0) {
+      stopTimer()
+      endSession()
+    }
+  },1000)
+}
+
+function stopTimer(){
+  if (state.timerId) clearInterval(state.timerId)
+  state.timerId = null
+}
+
+function hideTimer(){
+  timerEl.classList.add('hidden')
+}
+
+function endSession(){
+  feedbackEl.textContent = `Koniec! Wynik: ${state.score}`
+  saveSessionToHistory()
+  // fill progress
+  progressInner.style.width = '100%'
+  // return to menu after short pause (timed mode)
+  setTimeout(()=>{
+    playScreen.classList.add('hidden')
+    menuScreen.classList.remove('hidden')
+  },2500)
+}
+
+function showSummary(){
+  // hide problem area and keypad, show summary panel
+  const summaryTextEl = summaryText
+  if (summaryTextEl) summaryTextEl.textContent = `Poprawne odpowiedzi: ${state.score}`
+  // hide play UI sections
+  const problemArea = document.querySelector('.problem-area')
+  const answerArea = document.querySelector('.answer-area')
+  if (problemArea) problemArea.classList.add('hidden')
+  if (answerArea) answerArea.classList.add('hidden')
+  if (summaryPanel) summaryPanel.classList.remove('hidden')
+}
+
+function hideSummary(){
+  const problemArea = document.querySelector('.problem-area')
+  const answerArea = document.querySelector('.answer-area')
+  if (problemArea) problemArea.classList.remove('hidden')
+  if (answerArea) answerArea.classList.remove('hidden')
+  if (summaryPanel) summaryPanel.classList.add('hidden')
+}
+
+if (summaryBack) summaryBack.addEventListener('click', ()=>{
+  // close summary and go back to menu
+  hideSummary()
+  playScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+})
+
+function updateProgress(){
+  if (state.mode === 'training'){
+    const solved = state.sessionSolved || 0
+    const target = state.sessionTarget || 1
+    const pct = Math.min(100, Math.round((solved/target)*100))
+    progressInner.style.width = pct + '%'
+    // show count in status
+    const status = document.getElementById('status')
+    if (status) status.textContent = `${solved}/${target}`
+  }
+}
+
+// history persistence
+function loadHistory(){
+  try{
+    const raw = localStorage.getItem('matma:history')
+    return raw ? JSON.parse(raw) : []
+  }catch(e){ return [] }
+}
+
+function saveSessionToHistory(){
+  const h = loadHistory()
+  h.unshift({ts: Date.now(), mode: state.mode, score: state.score, settings: {...state.settings}})
+  // keep only last 100
+  while(h.length>100) h.pop()
+  try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
+}
+
+function renderHistory(){
+  const h = loadHistory()
+  historyList.innerHTML = ''
+  if (h.length === 0) {
+    historyList.innerHTML = '<div class="history-item">Brak zapisanych sesji</div>'
+  if (historyList) historyList.innerHTML = historyList.innerHTML
+  return
+  }
+  h.forEach(item => {
+    const d = new Date(item.ts).toLocaleString()
+    const el = document.createElement('div')
+    el.className = 'history-item'
+    el.innerHTML = `<div><strong>${item.mode === 'timed' ? 'Na czas' : 'Trening'}</strong> — Wynik: ${item.score}</div><div class="history-meta">${d} • czas:${item.settings.timedSeconds}s maxRes:${item.settings.maxResult} maxOp:${item.settings.maxOperand}</div>`
+    historyList.appendChild(el)
+  })
+  if (historyList) historyList.innerHTML = historyList.innerHTML
+}
+
+// Toggle in-menu history panel (behaves like settings)
+function toggleHistory(){
+  if (!historyPanel) return
+  // toggle collapsed class (collapsed => hidden)
+  const nowCollapsed = historyPanel.classList.toggle('collapsed')
+  // nowCollapsed is true when panel is hidden
+  if (!nowCollapsed) renderHistory()
+  // keep main menu button label constant; header toggle shows state
+  historyBtn.textContent = 'Historia'
+  if (historyToggle) historyToggle.textContent = nowCollapsed ? 'Pokaż' : 'Ukryj'
+}
+
+
+// history toggle
+historyToggle.addEventListener('click', ()=>{
+  const collapsed = historyPanel.classList.toggle('collapsed')
+  historyToggle.textContent = collapsed ? 'Pokaż' : 'Ukryj'
+  if (!collapsed) renderHistory()
+  else historyList.innerHTML = ''
+})
+
+// historyBtn.addEventListener('click', toggleHistory)
+// if (historyToggle) historyToggle.addEventListener('click', toggleHistory)
+
+historyBack.addEventListener('click', ()=>{
+  historyScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+})
+
+clearHistoryBtn.addEventListener('click', ()=>{
+  try{ localStorage.removeItem('matma:history') }catch(e){}
+  renderHistory()
+})
+
+// keyboard support: allow Enter/Backspace/0-9
+window.addEventListener('keydown', (e)=>{
+  if (playScreen.classList.contains('hidden')) return
+  if (/^[0-9]$/.test(e.key)){
+    if (state.answerBuffer.length < 6) {
+      state.answerBuffer += e.key
+      answerEl.textContent = state.answerBuffer
+    }
+  } else if (e.key === 'Backspace'){
+    state.answerBuffer = state.answerBuffer.slice(0,-1)
+    answerEl.textContent = state.answerBuffer
+  } else if (e.key === 'Enter'){
+    submitAnswer()
+  }
+})
+
+// small helper to set initial focus - mobile browsers will not open keyboard for divs
+document.addEventListener('touchstart', ()=>{}, {passive:true})

index.html

@@ -0,0 +1,162 @@
+<!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>
+
+  <main class="screen hidden" id="history-screen">
+      <header class="play-header">
+        <div class="left">
+          <button id="history-back" class="small">← Menu</button>
+        </div>
+        <div class="center"><strong>Historia sesji</strong></div>
+        <div class="right">
+          <button id="clear-history" class="small">Wyczyść</button>
+        </div>
+      </header>
+      <section class="panel history-list" id="history-list">
+        <!-- wpisy historii -->
+      </section>
+  </main>
+  </div>
+
+  <script src="app.js"></script>
+  </body>
+</html>

styles.css

@@ -0,0 +1,74 @@
+:root{
+  --bg:#f7f7fb;
+  --card:#ffffff;
+  --accent:#2b6cb0;
+  --muted:#6b7280;
+}
+*{box-sizing:border-box}
+html,body{height:100%}
+.app-wrap{width:100%;max-width:420px}
+body{
+  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  background:var(--bg); color:#111; display:flex; align-items:center; justify-content:center; padding:16px;
+}
+.screen{width:100%;background:var(--card);border-radius:16px;box-shadow:0 6px 22px rgba(16,24,40,0.08);position:relative;overflow:auto;-webkit-overflow-scrolling:touch}
+.screen.hidden{display:none}
+.hidden{display:none}
+.app-title{margin:20px;text-align:center;font-size:20px}
+.panel{padding:12px 18px;border-top:1px solid #f0f0f3}
+.ops{display:flex;gap:8px;flex-wrap:wrap}
+.op-btn{flex:1 1 48%;padding:12px;border-radius:10px;border:1px solid #e6e9ef;background:white;font-size:16px}
+.op-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
+.op-btn.disabled{opacity:0.45}
+.modes{display:flex;gap:12px;padding-top:8px}
+.mode-btn{flex:1;padding:12px;border-radius:10px;border:1px solid #e6e9ef;background:white;font-size:16px}
+.mode-btn.active{background:#111;color:white}
+.hint{padding:12px 18px;color:var(--muted);font-size:14px}
+
+.settings{display:flex;flex-direction:column;gap:8px}
+.settings label{display:flex;justify-content:space-between;align-items:center;gap:12px}
+.settings input{width:120px;padding:8px;border-radius:8px;border:1px solid #e6e9ef}
+.settings-actions{display:flex;gap:8px;margin-top:6px}
+.settings.collapsed{display:none}
+.collapsed{display:none}
+.small{font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid #e6e9ef;background:white}
+
+.progress-outer{height:12px;background:#eef3fb;border-radius:8px;overflow:hidden;margin:8px 14px}
+.progress-inner{height:100%;background:var(--accent);width:0%}
+
+
+.play-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #f0f0f3}
+.play-header .small{background:transparent;border:0;color:var(--accent);font-weight:600}
+.problem-area{padding:18px;text-align:center}
+.problem{font-size:44px;font-weight:700;margin:6px 0}
+.problem.big{font-size:64px}
+.timer{font-size:18px;color:var(--muted);margin-bottom:8px}
+.answer-area{padding:8px 14px 20px}
+.answer{min-height:56px;font-size:30px;text-align:center;padding:8px;border-radius:8px;background:#f6f7fb;margin-bottom:10px}
+.feedback{height:22px;color:var(--muted)}
+.keypad{display:grid;gap:10px}
+.row{display:flex;gap:8px}
+.key{flex:1;padding:16px;border-radius:12px;border:1px solid #e6e9ef;background:white;font-size:22px}
+.key.large{padding:18px;font-size:24px}
+.key.special{background:#fff7ed}
+.submit-btn{flex:1;padding:16px;border-radius:12px;background:var(--accent);color:white;font-weight:700;font-size:18px;border:0}
+.score{font-weight:700}
+
+.history-list{display:flex;flex-direction:column;gap:8px}
+.history-item{padding:10px;border-radius:8px;background:#f6f7fb;border:1px solid #e9eef6}
+.history-meta{font-size:12px;color:var(--muted)}
+
+.summary{padding:18px;text-align:center}
+.summary h2{margin:6px 0}
+.summary p{font-size:18px}
+
+@media (orientation:portrait){
+  .screen{max-height:94vh}
+}
+
+/* Mobile-specific: ensure the app fills viewport and screens scroll vertically */
+@media (max-width:480px){
+  body{padding:0}
+  .app-wrap{max-width:100%;height:100vh}
+  .screen{height:100vh;max-height:none;border-radius:0;overflow:auto;-webkit-overflow-scrolling:touch}
+}