Refactor z nowa templatka

.gitignore

@@ -1 +1,3 @@
 .DS_Store
+./QuizzyTemplate
+./QuizzyTemplate/*

QuizzyTemplate/Doc/app.css

@@ -0,0 +1,410 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary: #6366F1;
+    --primary-dark: #4F46E5;
+    --secondary: #8B5CF6;
+    --accent: #FFD166;
+    --text: #334155;
+    --text-light: #64748B;
+    --bg: #F8FAFC;
+    --bg-card: #FFFFFF;
+    --border: #E2E8F0;
+    --code-bg: #F1F5F9;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    padding: 0;
+    margin: 0;
+}
+
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+header {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    padding: 60px 0 80px;
+    position: relative;
+}
+
+header::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--accent);
+}
+
+.logo {
+    font-size: 24px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.logo-icon {
+    margin-right: 10px;
+    font-size: 28px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin-bottom: 20px;
+    color: var(--text);
+}
+
+h1 {
+    font-size: 2.5em;
+    margin-bottom: 15px;
+    color: white;
+}
+
+h2 {
+    font-size: 1.8em;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border);
+    margin-top: 50px;
+}
+
+h3 {
+    font-size: 1.4em;
+    margin-top: 30px;
+}
+
+h4 {
+    font-size: 1.2em;
+    margin-top: 20px;
+}
+
+p {
+    margin-bottom: 16px;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--primary-dark);
+    text-decoration: underline;
+}
+
+.header-subtitle {
+    font-size: 1.2em;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 700px;
+}
+
+.content {
+    padding: 60px 0;
+    position: relative;
+}
+
+.toc {
+    background-color: var(--bg-card);
+    border-radius: 10px;
+    padding: 25px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+    margin-bottom: 40px;
+}
+
+.toc-title {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+}
+
+.toc-title svg {
+    margin-right: 10px;
+}
+
+.toc-list {
+    list-style-type: none;
+    columns: 2;
+    column-gap: 30px;
+}
+
+.toc-list li {
+    margin-bottom: 10px;
+    break-inside: avoid;
+}
+
+.toc-list a {
+    color: var(--text-light);
+    transition: color 0.2s;
+    display: flex;
+    align-items: center;
+}
+
+.toc-list a:hover {
+    color: var(--primary);
+}
+
+.toc-list a::before {
+    content: "•";
+    margin-right: 8px;
+    color: var(--primary);
+    font-weight: bold;
+}
+
+.section {
+    margin-bottom: 60px;
+}
+
+ul, ol {
+    margin-left: 20px;
+    margin-bottom: 20px;
+}
+
+li {
+    margin-bottom: 8px;
+}
+
+code {
+    font-family: 'Monaco', 'Consolas', monospace;
+    background-color: var(--code-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+
+pre {
+    background-color: var(--code-bg);
+    padding: 15px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-bottom: 20px;
+    border-left: 4px solid var(--primary);
+}
+
+pre code {
+    background: none;
+    padding: 0;
+    font-size: 0.9em;
+}
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.feature-card {
+    background: var(--bg-card);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+    font-size: 24px;
+    margin-bottom: 12px;
+    color: var(--primary);
+}
+
+.note {
+    background-color: rgba(99, 102, 241, 0.1);
+    border-left: 4px solid var(--primary);
+    padding: 15px;
+    border-radius: 0 8px 8px 0;
+    margin-bottom: 20px;
+}
+
+.warning {
+    background-color: rgba(255, 209, 102, 0.2);
+    border-left: 4px solid var(--accent);
+    padding: 15px;
+    border-radius: 0 8px 8px 0;
+    margin-bottom: 20px;
+}
+
+.project-structure {
+    font-family: 'Monaco', 'Consolas', monospace;
+    background-color: var(--code-bg);
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    white-space: pre;
+    overflow-x: auto;
+    line-height: 1.4;
+    font-size: 0.85em;
+}
+
+.code-filename {
+    color: var(--primary);
+    font-weight: 600;
+    margin-bottom: 5px;
+    font-size: 0.9em;
+}
+
+.steps {
+    list-style-type: none;
+    counter-reset: step-counter;
+    margin-left: 0;
+}
+
+.steps li {
+    counter-increment: step-counter;
+    margin-bottom: 15px;
+    position: relative;
+    padding-left: 45px;
+}
+
+.steps li::before {
+    content: counter(step-counter);
+    background-color: var(--primary);
+    color: white;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: -1px;
+    font-weight: 600;
+    font-size: 0.9em;
+}
+
+.table-container {
+    overflow-x: auto;
+    margin-bottom: 20px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+
+th, td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+th {
+    background-color: var(--code-bg);
+    font-weight: 600;
+}
+
+tr:hover {
+    background-color: rgba(0, 0, 0, 0.01);
+}
+
+.badge {
+    display: inline-block;
+    background-color: var(--primary);
+    color: white;
+    border-radius: 20px;
+    padding: 3px 10px;
+    font-size: 0.75em;
+    font-weight: 600;
+    margin-right: 5px;
+}
+
+.badge.secondary {
+    background-color: var(--secondary);
+}
+
+.badge.accent {
+    background-color: var(--accent);
+    color: var(--text);
+}
+
+.screenshot {
+    max-width: 100%;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+footer {
+    background-color: var(--text);
+    color: white;
+    padding: 30px 0;
+    text-align: center;
+    margin-top: 100px;
+}
+
+.back-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background-color: var(--primary);
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.back-to-top:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-3px);
+}
+
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2em;
+    }
+    
+    h2 {
+        font-size: 1.5em;
+    }
+    
+    .toc-list {
+        columns: 1;
+    }
+    
+    .container {
+        padding: 0 15px;
+    }
+    
+    .feature-grid {
+        grid-template-columns: 1fr;
+    }
+}

QuizzyTemplate/Doc/index.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuizzyMind App Documentation</title>
+   <link rel="stylesheet" href="app.css">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div class="logo">
+                <span class="logo-icon">🎮</span>
+                Quizzy<span style="color: var(--accent);">Mind</span>
+            </div>
+            <h1>QuizzyMind App Documentation</h1>
+            <p class="header-subtitle">A comprehensive guide to installing, configuring, and customizing your React Native Expo quiz application.</p>
+        </div>
+    </header>
+    
+    <div class="container">
+        <div class="content">
+            <div class="toc" id="table-of-contents">
+                <h3 class="toc-title">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="3" y1="6" x2="21" y2="6"></line>
+                        <line x1="3" y1="12" x2="21" y2="12"></line>
+                        <line x1="3" y1="18" x2="21" y2="18"></line>
+                    </svg>
+                    Table of Contents
+                </h3>
+                <ul class="toc-list">
+                    <li><a href="#introduction">Introduction</a></li>
+                    <li><a href="#requirements">Requirements</a></li>
+                    <li><a href="#installation">Installation</a></li>
+                    <li><a href="#project-structure">Project Structure</a></li>
+                    <li><a href="#configuration">Configuration</a></li>
+                    <li><a href="#key-features">Key Features</a></li>
+                    <li><a href="#customization-guide">Customization Guide</a></li>
+                    <li><a href="#api-integration">API Integration</a></li>
+                    <li><a href="#deployment">Deployment</a></li>
+                    <li><a href="#troubleshooting">Troubleshooting</a></li>
+                    <li><a href="#support">Support</a></li>
+                </ul>
+            </div>
+            
+            <section class="section" id="introduction">
+                <h2>Introduction</h2>
+                
+                <p>QuizzyMind is a fully functional quiz application built with React Native and Expo Router. This documentation will guide you through setting up and customizing the application to meet your specific needs.</p>
+                
+                <h3>Key Features</h3>
+                
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <div class="feature-icon">🧠</div>
+                        <h4>Multiple Quiz Categories</h4>
+                        <p>Extensive question bank with various categories</p>
+                    </div>
+                    
+                    <div class="feature-card">
+                        <div class="feature-icon">🏆</div>
+                        <h4>Real-time Leaderboards</h4>
+                        <p>Compete with friends and track progress</p>
+                    </div>
+                    
+                    <div class="feature-card">
+                        <div class="feature-icon">🎨</div>
+                        <h4>Modern UI</h4>
+                        <p>Clean design with smooth animations</p>
+                    </div>
+                    
+                    <div class="feature-card">
+                        <div class="feature-icon">🧭</div>
+                        <h4>Expo Router</h4>
+                        <p>Optimized navigation experience</p>
+                    </div>
+                    
+                    <div class="feature-card">
+                        <div class="feature-icon">📱</div>
+                        <h4>Cross-platform</h4>
+                        <p>Works on both iOS and Android</p>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="section" id="requirements">
+                <h2>Requirements</h2>
+                
+                <p>Before you begin, ensure you have the following installed:</p>
+                
+                <ul>
+                    <li><strong>Node.js</strong> (v14.0.0 or newer)</li>
+                    <li><strong>npm</strong> (v6.0.0 or newer) or <strong>Yarn</strong> (v1.22.0 or newer)</li>
+                    <li><strong>Expo CLI</strong> (<code>npm install -g expo-cli</code>)</li>
+                    <li><strong>Android Studio</strong> (for Android development)</li>
+                    <li><strong>Xcode</strong> (for iOS development, macOS only)</li>
+                    <li><strong>Git</strong></li>
+                </ul>
+                
+                <div class="note">
+                    <p><strong>Note:</strong> You can verify your Node.js and npm versions by running <code>node -v</code> and <code>npm -v</code> in your terminal.</p>
+                </div>
+            </section>
+            
+            <section class="section" id="installation">
+                <h2>Installation</h2>
+                
+                <p>Follow these steps to get the app up and running:</p>
+                
+                <ol class="steps">
+                    <li>
+                        <strong>Clone or extract the project files</strong>
+                        <pre><code># If you downloaded as a zip, extract it
+cd QuizzyMind-app</code></pre>
+                    </li>
+                    
+                    <li>
+                        <strong>Install dependencies</strong>
+                        <pre><code>npm install
+# or with yarn
+yarn install</code></pre>
+                    </li>
+                    
+                    <li>
+                        <strong>Start the development server</strong>
+                        <pre><code>npx expo start or npm start</code></pre>
+                    </li>
+                    
+                    <li>
+                        <strong>Run on device/simulator</strong>
+                        <ul>
+                            <li>Press <code>i</code> to open in iOS simulator</li>
+                            <li>Press <code>a</code> to open in Android emulator</li>
+                            <li>Scan QR code with Expo Go app on physical device</li>
+                        </ul>
+                    </li>
+                </ol>
+                
+                <div class="note">
+                    <p><strong>Tip:</strong> If you encounter any issues during installation, refer to the <a href="#troubleshooting">Troubleshooting</a> section.</p>
+                </div>
+            </section>
+            
+            <section class="section" id="project-structure">
+                <h2>Project Structure</h2>
+                
+                <div class="project-structure">QuizzyMind-app/
+├── app/                      # Main application code using Expo Router
+│   ├── (pages)/              # All screens inside this folder
+│   ├────────── _layout.js    # Root layout component
+│   ├────────── CategoryScreen.jsx    # Category Screen
+│   ├────────── QuizScreen.jsx        # QuizScreen Screen
+│   ├────────── ResultScreen.jsx      # ResultScreen Screen
+│   ├── _layout.js            # Root layout component
+│   └── index.js              # Home screen
+├── assets/                   # Static assets like images, fonts
+├── components/               # Reusable UI components
+│   ├── common/               # Shared components
+│   ├── quiz/                 # Quiz-related components
+│   └── ui/                   # UI elements (buttons, cards, etc.)
+├── constants/                # App constants and theme settings
+├── contexts/                 # React contexts for state management
+├── hooks/                    # Custom React hooks
+├── services/                 # API services and external integrations
+├── utils/                    # Utility functions
+├── app.json                  # Expo configuration
+├── babel.config.js           # Babel configuration
+├── package.json              # Dependencies and scripts
+└── README.md                 # Basic readme</div>
+            </section>
+            
+            <section class="section" id="key-features">
+                <h2>Key Features</h2>
+                
+                <h3>Quiz Engine</h3>
+                
+                <p>The quiz system supports:</p>
+                <ul>
+                    <li>Multiple quiz categories</li>
+                    <li>Various question types (multiple choice, true/false)</li>
+                    <li>Timed quizzes</li>
+                    <li>Score tracking and history</li>
+                    <li>Difficulty levels</li>
+                </ul>
+                
+                <h3>User Interface</h3>
+                
+                <p>The UI is built with:</p>
+                <ul>
+                    <li>Custom components for consistent design</li>
+                    <li>Smooth animations and transitions</li>
+                    <li>Dark/light mode support</li>
+                    <li>Responsive layouts for different device sizes</li>
+                </ul>
+            </section>
+            
+            <section class="section" id="customization-guide">
+                <h2>Customization Guide</h2>
+                
+                <h3>Theme Customization</h3>
+                
+                <p>Edit the theme variables in <code>constants/Theme.js</code>:</p>
+                
+                <div class="code-filename">constants/Theme.js</div>
+                <pre><code>// Example theme customization
+export const COLORS = {
+  primary: '#6366F1',
+  secondary: '#8B5CF6',
+  accent: '#FFD166',
+  // Add your custom colors
+};
+
+export const FONTS = {
+  // Customize font families
+};
+
+export const SIZES = {
+  // Customize spacing and sizes
+};</code></pre>
+                
+                <h3>Content Customization</h3>
+                
+                <p>Quiz questions are stored in <code>data/quizData.js</code>. Modify this file to add your own questions:</p>
+                
+                <div class="code-filename">data/quizData.js</div>
+                <pre><code>export const QUIZ_CATEGORIES = [
+  {
+    id: 'general',
+    title: 'General Knowledge',
+    icon: 'brain',
+    questions: [
+      {
+        id: 'q1',
+        question: 'What is the capital of France?',
+        options: ['London', 'Berlin', 'Paris', 'Madrid'],
+        correctAnswer: 'Paris',
+        difficulty: 'easy'
+      },
+      // Add more questions here
+    ]
+  },
+  // Add more categories
+];</code></pre>
+                
+                <h3>Adding New Screens</h3>
+                
+                <p>To add a new screen with Expo Router:</p>
+                
+                <ol>
+                    <li>Create a new file in the <code>app</code> directory, e.g., <code>app/newScreen.js</code></li>
+                    <li>Define your screen component:</li>
+                </ol>
+                
+                <div class="code-filename">app/newScreen.js</div>
+                <pre><code>import { View, Text, StyleSheet } from 'react-native';
+import { useRouter } from 'expo-router';
+
+export default function NewScreen() {
+  const router = useRouter();
+  
+  return (
+    &lt;View style={styles.container}&gt;
+      &lt;Text&gt;New Screen Content&lt;/Text&gt;
+    &lt;/View&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});</code></pre>
+            </section>
+            
+    
+            <section class="section" id="deployment">
+                <h2>Deployment</h2>
+                
+                <h3>Publishing to Expo</h3>
+                
+                <ol>
+                    <li>Create an Expo account at <a href="https://expo.dev" target="_blank">expo.dev</a></li>
+                    <li>Configure your app in <code>app.json</code>:
+                        <ul>
+                            <li>Update <code>name</code>, <code>slug</code>, and <code>owner</code></li>
+                            <li>Set appropriate version numbers</li>
+                            <li>Configure splash screen and icons</li>
+                        </ul>
+                    </li>
+                    <li>Build and publish:
+                        <pre><code>expo build:android    # For Android APK/AAB
+expo build:ios        # For iOS IPA
+expo publish          # For Expo Go distribution</code></pre>
+                    </li>
+                </ol>
+                
+                <h3>Submitting to App Stores</h3>
+                
+                <h4>Android (Google Play)</h4>
+                
+                <ol>
+                    <li>Generate a signed AAB:
+                        <pre><code>eas build -p android --profile production</code></pre>
+                    </li>
+                    <li>Follow Google Play Console submission guidelines</li>
+                </ol>
+                
+                <h4>iOS (App Store)</h4>
+                
+                <ol>
+                    <li>Generate a signed IPA:
+                        <pre><code>eas build -p ios --profile production</code></pre>
+                    </li>
+                    <li>Submit through App Store Connect</li>
+                </ol>
+            </section>
+            
+            <section class="section" id="troubleshooting">
+                <h2>Troubleshooting</h2>
+                
+                <h3>Common Issues</h3>
+                
+                <h4>Metro Bundler Issues</h4>
+                <pre><code># Clear cache and restart
+expo start -c</code></pre>
+                
+                <h4>Dependency Problems</h4>
+                <pre><code># Reset node_modules
+rm -rf node_modules
+npm install</code></pre>
+                
+                <h4>Expo SDK Version Conflicts</h4>
+                <p>Ensure all packages are compatible with your Expo SDK version in <code>package.json</code>.</p>
+                
+                <div class="note">
+                    <p><strong>Tip:</strong> Most common issues can be resolved by clearing your cache and reinstalling dependencies.</p>
+                </div>
+            </section>
+            
+            <section class="section" id="support">
+                <h2>Support</h2>
+                
+                <p>For additional support, please contact us at <a href="mailto:support@email.com">support@email.com</a> or visit our support page on TemplateMonster.</p>
+            </section>
+        </div>
+    </div>
+    
+    <footer>
+        <div class="container">
+            <p>© 2025 QuizzyMind App | All Rights Reserved</p>
+        </div>
+    </footer>
+    
+    <a href="#" class="back-to-top" id="backToTop">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 15l-6-6-6 6"/>
+        </svg>
+    </a>
+    
+    <script>
+        // Back to top button functionality
+        const backToTopButton = document.getElementById('backToTop');
+        
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.add('visible');
+            } else {
+                backToTopButton.classList.remove('visible');
+            }
+        });
+        
+        backToTopButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                if (this.getAttribute('href') === '#') return;
+                
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    </script>
+</body>
+</html>

app.js

@@ -1,4 +1,4 @@
-// Minimal app logic for math training (addition & subtraction)
+// Minimal app logic for math training
 const state = {
   ops: new Set(),
   mode: null, // 'timed' or 'training'
@@ -7,6 +7,8 @@ const state = {
   answerBuffer: '',
   timerId: null,
   timeLeft: 60,
+  sessionSolved: 0,
+  sessionTarget: 20,
   settings: {
     timedSeconds: 60,
     maxResult: 40,
@@ -33,28 +35,22 @@ 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 settingSessionProblems = document.getElementById('setting-session-problems')
 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 progressInner = document.getElementById('progress_inner')
 const dotBtn = document.getElementById('dot')
 const negateBtn = document.getElementById('negate')
-const summaryPanel = document.getElementById('summary-panel')
+const summaryOverlay = document.getElementById('summary-overlay')
 const summaryText = document.getElementById('summary-text')
 const summaryBack = document.getElementById('summary-back')
+const statusEl = document.getElementById('status');
 
 // load settings from localStorage
 function loadSettings(){
@@ -69,50 +65,43 @@ function loadSettings(){
   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
+  settingSessionProblems.value = state.settings.sessionProblems
+  settingAllowNegative.checked = !!state.settings.allowNegative
+  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
+  state.settings.timedSeconds = Math.max(5, Math.min(600, parseInt(settingTimed.value,10) || 60))
+  state.settings.maxResult = Math.max(1, Math.min(999, parseInt(settingMaxResult.value,10) || 40))
+  state.settings.maxOperand = Math.max(1, Math.min(999, parseInt(settingMaxOperand.value,10) || 20))
+  state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || 20))
+  state.settings.allowNegative = !!settingAllowNegative.checked
+  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)
+  const parent = saveSettingsBtn.parentElement;
+  const feedback = document.createElement('span');
+  feedback.textContent = 'Zapisano!';
+  feedback.style.color = '#16a34a';
+  feedback.style.marginLeft = '12px';
+  parent.appendChild(feedback);
+  setTimeout(()=> parent.removeChild(feedback), 2000);
 }
 
 function resetSettings(){
-  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20}
-  saveSettings()
-  loadSettings()
+  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20, allowNegative: false, allowFraction: false};
+  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') }
@@ -121,14 +110,19 @@ opButtons.forEach(b => {
 })
 
 modeButtons.forEach(b => b.addEventListener('click', () => {
+  if (state.ops.size === 0) {
+    const hint = document.querySelector('.hint-text');
+    hint.style.color = '#dc2626';
+    hint.style.fontWeight = '600';
+    setTimeout(() => {
+        hint.style.color = '';
+        hint.style.fontWeight = '';
+    }, 2000);
+    return;
+  }
   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()
 }))
 
@@ -149,51 +143,43 @@ function startPlay(){
   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)
+    statusEl.textContent = 'Na czas';
+    timerEl.classList.remove('hidden');
   } else {
     progressInner.style.width = '0%'
     state.sessionSolved = 0
-    state.sessionTarget = Math.max(1, state.settings.sessionProblems || 20)
+    state.sessionTarget = Math.max(1, state.settings.sessionProblems)
     updateProgress()
-    hideTimer()
+    timerEl.classList.add('hidden');
   }
 }
 
 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
@@ -214,12 +200,10 @@ function generateProblem(){
         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}
@@ -233,7 +217,7 @@ function renderProblem(){
   const p = state.currentProblem
   const map = {add: '+', sub: '−', mul: '×', div: '÷'}
   const symbol = map[p.op] || '?'
-  problemEl.textContent = `${p.a} ${symbol} ${p.b} = ?`
+  problemEl.textContent = `${p.a} ${symbol} ${p.b}`
 }
 
 function submitAnswer(){
@@ -248,30 +232,40 @@ function submitAnswer(){
   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)
+
+  feedbackEl.style.opacity = 1;
   if (isCorrect) {
     state.score += 1
-    feedbackEl.textContent = '✔ dobrze'
+    feedbackEl.textContent = 'Dobrze!'
+    feedbackEl.classList.add('correct');
+    feedbackEl.classList.remove('incorrect');
   } else {
-    feedbackEl.textContent = `✖ poprawne: ${Number.isFinite(correct) ? correct : '—'}`
+    const correctAnswer = Number.isFinite(correct) ? parseFloat(correct.toFixed(2)) : '—';
+    feedbackEl.textContent = `Poprawna odpowiedź: ${correctAnswer}`
+    feedbackEl.classList.add('incorrect');
+    feedbackEl.classList.remove('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
+    state.sessionSolved++
     updateProgress()
     if (state.sessionSolved >= state.sessionTarget){
-      // reached limit -> show summary instead of next problem
       saveSessionToHistory()
-      showSummary()
+      setTimeout(showSummary, 1200);
       return
     }
   }
-  // otherwise generate next problem
+
+  setTimeout(() => {
+    feedbackEl.style.opacity = 0;
+    setTimeout(() => {
         state.currentProblem = generateProblem()
         renderProblem()
+    }, 200);
+  }, 1200);
 }
 
 submitBtn.addEventListener('click', submitAnswer)
@@ -318,12 +312,12 @@ backspaceBtn.addEventListener('click', ()=>{
 function startTimer(seconds){
   state.timeLeft = seconds
   timerEl.textContent = state.timeLeft
-  timerEl.classList.remove('hidden')
+
+  stopTimer();
   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)
+    const pct = Math.max(0, (state.timeLeft / seconds) * 100)
     progressInner.style.width = pct + '%'
     if (state.timeLeft <= 0) {
       stopTimer()
@@ -337,58 +331,35 @@ function stopTimer(){
   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)
+  showSummary();
 }
 
 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')
+  const total = state.mode === 'timed' ? state.score : state.sessionTarget;
+  const correct = state.score;
+  const pct = total > 0 ? Math.round((correct / total) * 100) : 0;
+
+  if (state.mode === 'timed') {
+      summaryText.textContent = `Koniec czasu! Zdobyłeś ${correct} punktów.`;
+  } else {
+      summaryText.textContent = `Twój wynik: ${correct} / ${total} poprawnie (${pct}%)`;
+  }
+  summaryOverlay.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')
-})
+summaryBack.addEventListener('click', ()=>{
+  summaryOverlay.classList.add('hidden');
+  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))
+    const pct = Math.min(100, Math.round((state.sessionSolved/state.sessionTarget)*100))
     progressInner.style.width = pct + '%'
-    // show count in status
-    const status = document.getElementById('status')
-    if (status) status.textContent = `${solved}/${target}`
+    statusEl.textContent = `${state.sessionSolved}/${state.sessionTarget}`
   }
 }
 
@@ -402,69 +373,61 @@ function loadHistory(){
 
 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()
+  const sessionData = {
+      ts: Date.now(),
+      mode: state.mode,
+      score: state.score,
+      ops: Array.from(state.ops),
+      duration: state.mode === 'timed' ? state.settings.timedSeconds : null,
+      problems: state.mode === 'training' ? state.sessionTarget : null
+  };
+  h.unshift(sessionData);
+  while(h.length>50) h.pop()
   try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
 }
 
 function renderHistory(){
   const h = loadHistory()
-  historyList.innerHTML = ''
+  historyPanel.innerHTML = ''
   if (h.length === 0) {
-    historyList.innerHTML = '<div class="history-item">Brak zapisanych sesji</div>'
-  if (historyList) historyList.innerHTML = historyList.innerHTML
+    historyPanel.innerHTML = '<p class="history-empty">Brak zapisanych sesji.</p>'
     return
   }
   h.forEach(item => {
-    const d = new Date(item.ts).toLocaleString()
+    const d = new Date(item.ts).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+    const modeText = item.mode === 'timed' ? `Na czas (${item.duration}s)` : `Trening (${item.problems} zadań)`;
+    const opsText = item.ops.join(', ').replace('add','+').replace('sub','-').replace('mul','×').replace('div','÷');
+
     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)
+    el.innerHTML = `
+        <div class="history-item-main">
+            <span class="history-score">Wynik: ${item.score}</span>
+            <span class="history-ops">${opsText}</span>
+        </div>
+        <div class="history-item-meta">
+            <span>${modeText}</span>
+            <span>${d}</span>
+        </div>`
+    historyPanel.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'
+// Toggle history panel
+const historyDetails = historyPanel.closest('details');
+if (historyDetails) {
+    historyDetails.addEventListener('toggle', () => {
+        if (historyDetails.open) {
+            renderHistory();
+        }
+    });
 }
 
-
-// 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
+// keyboard support
 window.addEventListener('keydown', (e)=>{
   if (playScreen.classList.contains('hidden')) return
   if (/^[0-9]$/.test(e.key)){
-    if (state.answerBuffer.length < 6) {
+    if (state.answerBuffer.length < 12) {
       state.answerBuffer += e.key
       answerEl.textContent = state.answerBuffer
     }
@@ -473,32 +436,18 @@ window.addEventListener('keydown', (e)=>{
     answerEl.textContent = state.answerBuffer
   } else if (e.key === 'Enter'){
     submitAnswer()
+  } else if (e.key === '.' || e.key === ',') {
+    dotBtn.click();
   }
 })
 
-// small helper to set initial focus - mobile browsers will not open keyboard for divs
-document.addEventListener('touchstart', ()=>{}, {passive:true})
-
-// Load commit SHA into footer (simple: prefer window.COMMIT_SHA/meta, else fetch /version.sha which contains only the hash)
-document.addEventListener('DOMContentLoaded', async () => {
-  const el = document.getElementById('commit-sha')
-  if (!el) return
-  let sha = (window.COMMIT_SHA || '').toString().trim()
-  if (!sha) {
-    const meta = document.querySelector('meta[name="commit-sha"]')
-    if (meta && meta.content) sha = meta.content.trim()
+// Set default active operations
+document.addEventListener('DOMContentLoaded', () => {
+    opButtons.forEach(btn => {
+        const op = btn.dataset.op;
+        if (['add', 'sub'].includes(op)) {
+            btn.classList.add('active');
+            state.ops.add(op);
         }
-  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) {
-      // ignore
-    }
-  }
-  if (sha) el.textContent = sha.slice(0,8)
-})
+    });
+});

czytanie.html

@@ -4,50 +4,59 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
     <title>Czytanie</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&display=swap" rel="stylesheet">
   </head>
   <body>
 
     <!-- ── LIST SCREEN ── -->
-    <div id="list-wrap">
-      <nav class="nav-wrap">
-        <a href="index.html" class="back-to-hub" id="back-to-hub">← Menu</a>
+    <div id="list-wrap" class="app-container">
+      <nav class="subpage-nav">
+        <a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
       </nav>
-      <div class="app-wrap">
-        <main class="screen" id="list-screen">
-          <h1 class="app-title">📖 Czytanie</h1>
+      <main class="screen-content">
+        <header class="subpage-header">
+          <h1 class="subpage-title">📖 Czytanie</h1>
+          <p class="subpage-subtitle">Wybierz tekst do przeczytania lub wklej własny.</p>
+        </header>
 
-          <section class="panel">
-            <h2>Wybierz tekst</h2>
+        <section class="content-panel">
+          <h2 class="panel-title">Gotowe teksty</h2>
           <div id="text-list" class="reading-list"></div>
         </section>
 
-          <section class="panel">
-            <h2>Własny tekst</h2>
-            <textarea id="custom-input" class="custom-input"
-              placeholder="Wklej lub wpisz tekst…"></textarea>
-            <button id="custom-start-btn" class="mode-btn">Czytaj →</button>
+        <section class="content-panel">
+          <h2 class="panel-title">Własny tekst</h2>
+          <textarea id="custom-input" class="custom-textarea"
+            placeholder="Wklej lub wpisz tutaj swój tekst..."></textarea>
+          <button id="custom-start-btn" class="action-btn">Czytaj ten tekst →</button>
         </section>
       </main>
     </div>
-    </div>
 
     <!-- ── READING SCREEN ── -->
-    <div id="read-wrap" class="read-wrap hidden">
+    <div id="read-wrap" class="read-screen-container hidden">
       <header class="read-header">
-        <button id="read-back-btn" class="read-nav-btn">← Lista</button>
+        <button id="read-back-btn" class="read-nav-btn">← Zakończ</button>
         <span id="read-title" class="read-title-text"></span>
-        <button id="speed-btn" class="read-nav-btn read-speed-btn">⏸</button>
+        <button id="speed-btn" class="read-nav-btn speed-toggle-btn">Pauza</button>
       </header>
+      <div class="read-progress-bar">
+        <div id="read-progress-bar-inner" class="read-progress-bar-inner"></div>
+      </div>
 
       <div class="read-viewport" id="read-viewport">
         <div class="read-text" id="read-text"></div>
       </div>
 
-      <button id="next-line-btn" class="next-line-btn" aria-label="Następna linia">▼</button>
+      <button id="next-line-btn" class="next-line-btn" aria-label="Następna linia">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+      </button>
     </div>
 
     <script src="nav.js?v=20260521"></script>
-    <script src="czytanie.js?v=20260521"></script>
+    <script src="czytanie.js?v=20260524"></script>
   </body>
 </html>

czytanie.js

@@ -2,7 +2,7 @@
 ;(function () {
   // ms between line advances for each speed level (0 = manual)
   const SPEEDS_MS    = [0, 3500, 2000, 1000]
-  const SPEED_LABELS = ['⏸', '▶', '▶▶', '▶▶▶']
+  const SPEED_LABELS = ['Pauza', 'Wolno', 'Średnio', 'Szybko']
 
   let yOffset   = 0
   let lineH     = 80   // recalculated after render
@@ -21,6 +21,7 @@
   const readViewport  = document.getElementById('read-viewport')
   const readTextEl    = document.getElementById('read-text')
   const nextLineBtn   = document.getElementById('next-line-btn')
+  const progressBar   = document.getElementById('read-progress-bar-inner')
 
   // ── Load text list from dyktanda.json ────────────────────────────────────
   fetch('dyktanda.json')
@@ -28,7 +29,7 @@
     .then(data => {
       data.forEach(item => {
         const btn = document.createElement('button')
-        btn.className = 'reading-item'
+        btn.className = 'list-item-btn'
         btn.textContent = item.name
         btn.addEventListener('click', () => startReading(item.name, item.text))
         textList.appendChild(btn)
@@ -55,6 +56,7 @@
     readTextEl.textContent      = text
     readTextEl.style.transform  = 'translateY(0)'
     speedBtn.textContent        = SPEED_LABELS[0]
+    progressBar.style.width     = '0%'
 
     listWrap.classList.add('hidden')
     readWrap.classList.remove('hidden')
@@ -68,8 +70,9 @@
           ? parseFloat(cs.fontSize) * 1.35
           : parseFloat(lhVal)
 
-        maxOffset = Math.max(0, readTextEl.offsetHeight - readViewport.offsetHeight)
+        maxOffset = Math.max(0, readTextEl.offsetHeight - lineH)
         updateNextBtn()
+        updateProgressBar()
       })
     })
   }
@@ -82,6 +85,8 @@
     autoTimer = null
     readWrap.classList.add('hidden')
     listWrap.classList.remove('hidden')
+    // Reset speed to manual on exit
+    speedIdx = 0;
   })
 
   // ── Speed selector ────────────────────────────────────────────────────────
@@ -107,6 +112,7 @@
     yOffset = Math.min(yOffset + lineH, maxOffset)
     readTextEl.style.transform = `translateY(${-yOffset}px)`
     updateNextBtn()
+    updateProgressBar()
     if (yOffset >= maxOffset) stopAutoAtEnd()
   }
 
@@ -123,4 +129,9 @@
   function updateNextBtn() {
     nextLineBtn.disabled = yOffset >= maxOffset
   }
+
+  function updateProgressBar() {
+    const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
+    progressBar.style.width = `${progress}%`
+  }
 })()

dyktando.html

@@ -4,62 +4,68 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
     <title>Dyktando</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&display=swap" rel="stylesheet">
   </head>
   <body>
 
     <!-- ── LIST SCREEN ── -->
-    <div id="list-wrap">
-      <nav class="nav-wrap">
-        <a href="index.html" class="back-to-hub" id="back-to-hub">← Menu</a>
+    <div id="list-wrap" class="app-container">
+      <nav class="subpage-nav">
+        <a href="index.html" class="back-btn" id="back-to-hub">← Wróć do menu</a>
       </nav>
-      <div class="app-wrap">
-        <main class="screen">
-          <h1 class="app-title">✏️ Dyktando</h1>
+      <main class="screen-content">
+        <header class="subpage-header">
+          <h1 class="subpage-title">✏️ Dyktando</h1>
+          <p class="subpage-subtitle">Wybierz dyktando lub wklej własny tekst.</p>
+        </header>
 
-          <section class="panel">
-            <h2>Wybierz tekst</h2>
+        <section class="content-panel">
+          <h2 class="panel-title">Gotowe dyktanda</h2>
           <div id="text-list" class="reading-list"></div>
         </section>
 
-          <section class="panel">
-            <h2>Własny tekst</h2>
-            <textarea id="custom-input" class="custom-input"
-              placeholder="Wklej lub wpisz tekst…"></textarea>
-            <button id="custom-start-btn" class="mode-btn">Zacznij →</button>
+        <section class="content-panel">
+          <h2 class="panel-title">Własny tekst</h2>
+          <textarea id="custom-input" class="custom-textarea"
+            placeholder="Wklej lub wpisz tutaj swój tekst..."></textarea>
+          <button id="custom-start-btn" class="action-btn">Rozpocznij dyktando →</button>
         </section>
       </main>
     </div>
-    </div>
 
     <!-- ── PLAY SCREEN ── -->
-    <div id="play-wrap" class="read-wrap hidden">
-      <header class="read-header">
-        <button id="play-back-btn" class="read-nav-btn">← Lista</button>
-        <span id="play-title" class="read-title-text"></span>
-        <span id="blank-progress" class="blank-progress"></span>
+    <div id="play-wrap" class="play-screen-container hidden">
+      <header class="play-header">
+        <button id="play-back-btn" class="play-nav-btn">← Zakończ</button>
+        <span id="play-title" class="play-title-text"></span>
+        <span id="blank-progress" class="play-progress"></span>
       </header>
 
-      <div class="dyk-body">
-        <!-- scrollable area: text during play, summary after -->
-        <div class="dyk-scroll" id="dyk-scroll">
-          <div class="dyk-text" id="text-display"></div>
+      <div class="play-progress-bar">
+        <div id="dyk-progress-bar-inner" class="play-progress-bar-inner"></div>
+      </div>
 
-          <div class="dyk-summary hidden" id="summary">
-            <div id="summary-text" class="dyk-summary-text"></div>
-            <p id="summary-score" class="summary-score"></p>
-            <button id="summary-back-btn" class="mode-btn dyk-summary-back">
+      <div class="play-body">
+        <div class="play-scroll-area" id="dyk-scroll">
+          <div class="dyk-text-display" id="text-display"></div>
+
+          <div class="summary-view hidden" id="summary">
+            <div id="summary-text" class="summary-text-display"></div>
+            <p id="summary-score" class="summary-score-text"></p>
+            <button id="summary-back-btn" class="action-btn summary-back-btn">
               Wróć do listy
             </button>
           </div>
         </div>
 
-        <!-- fixed choice bar at bottom -->
-        <div class="dyk-choices" id="choices"></div>
+        <div class="choices-bar" id="choices"></div>
       </div>
     </div>
 
     <script src="nav.js?v=20260521"></script>
-    <script src="dyktando.js?v=20260521"></script>
+    <script src="dyktando.js?v=20260524"></script>
   </body>
 </html>

dyktando.js

@@ -35,6 +35,7 @@
   const summaryScore   = document.getElementById('summary-score')
   const summaryBackBtn = document.getElementById('summary-back-btn')
   const dykScroll      = document.getElementById('dyk-scroll')
+  const progressBar    = document.getElementById('dyk-progress-bar-inner')
 
   // ── Load texts ────────────────────────────────────────────────────────────
   fetch('dyktanda.json')
@@ -42,7 +43,7 @@
     .then(data => {
       data.forEach(item => {
         const btn = document.createElement('button')
-        btn.className = 'reading-item'
+        btn.className = 'list-item-btn'
         btn.textContent = item.name
         btn.addEventListener('click', () => startGame(item.name, item.text))
         textList.appendChild(btn)
@@ -97,6 +98,7 @@
     textDisplay.classList.remove('hidden')
     choicesEl.classList.remove('hidden')
     progressEl.textContent = ''
+    progressBar.style.width = '0%'
 
     listWrap.classList.add('hidden')
     playWrap.classList.remove('hidden')
@@ -127,7 +129,7 @@
             span.textContent = tok.answer
           } else {
             span.className = 'dyk-blank dyk-blank--err'
-            span.innerHTML = `<s>${esc(tok.userAnswer)}</s><sup>${esc(tok.answer)}</sup>`
+            span.innerHTML = `<s>${esc(tok.userAnswer)}</s><sup class="dyk-correction">${esc(tok.answer)}</sup>`
           }
         } else if (tok.id === current) {
           span.className = 'dyk-blank dyk-blank--active'
@@ -170,6 +172,8 @@
       const el = document.getElementById(`blank-${idx}`)
       if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' })
     })
+
+    updateProgressBar()
   }
 
   // ── Handle answer ─────────────────────────────────────────────────────────
@@ -188,6 +192,7 @@
     } else {
       activateBlank(nextIdx)
     }
+    updateProgressBar()
   }
 
   // ── Summary ───────────────────────────────────────────────────────────────
@@ -202,8 +207,9 @@
     if (total === 0) {
       summaryScore.textContent = 'Brak liter do uzupełnienia w tym tekście.'
       summaryText.innerHTML = esc(origText)
+      updateProgressBar()
     } else {
-      summaryScore.textContent = `Poprawnie: ${correct} / ${total}`
+      summaryScore.textContent = `Poprawnie: ${correct} z ${total}`
       summaryText.innerHTML = buildSummaryHTML()
     }
 
@@ -240,9 +246,9 @@
       word.blanks.forEach(blank => {
         if (blank.start > wPos) inner += esc(origText.slice(wPos, blank.start))
         if (blank.correct) {
-          inner += `<span class="dyk-blank--ok">${esc(blank.answer)}</span>`
+          inner += `<span class="dyk-word--ok">${esc(blank.answer)}</span>`
         } else {
-          inner += `<span class="dyk-blank--err"><s>${esc(blank.userAnswer)}</s><sup>${esc(blank.answer)}</sup></span>`
+          inner += `<span class="dyk-word--err"><s>${esc(blank.userAnswer)}</s><sup class="dyk-correction">${esc(blank.answer)}</sup></span>`
         }
         wPos = blank.end
       })
@@ -259,6 +265,18 @@
     return html
   }
 
+  function updateProgressBar() {
+    const total = blanks.length
+    if (total === 0) {
+      progressBar.style.width = '100%'
+      return
+    }
+    // Use `current` which is the index of the *next* blank to be filled.
+    // When the game ends, `current` becomes `blanks.length`.
+    const progress = (current / total) * 100
+    progressBar.style.width = `${progress}%`
+  }
+
   function esc(s) {
     return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   }

dzielenie.html

@@ -4,94 +4,105 @@
     <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?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">
+  <div class="app-container">
     <!-- ── 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">
+    <main id="select-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">÷ Nauka Dzielenia</h1>
+          <p class="subpage-subtitle">Wybierz dzielnik, przez który chcesz dzielić.</p>
+        </header>
+        <section class="content-panel">
+          <h2 class="panel-title">Wybór dzielnika</h2>
           <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>
+            <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</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">
+        <section class="content-panel">
+          <label class="settings-label">
+            Liczba zadań w serii:
+            <input id="total-input" type="number" min="5" max="100" value="20" class="settings-input">
           </label>
         </section>
-      <button class="start-btn" id="start-btn">Zacznij ▶</button>
+        <button class="action-btn start-btn" id="start-btn">Rozpocznij ćwiczenie →</button>
+      </div>
     </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>
+    <main class="play-screen-container hidden" id="play-screen">
+      <header class="read-header">
+        <button id="back-btn" class="read-nav-btn">← Zmień</button>
+        <span class="read-title-text">Dzielenie</span>
+        <div class="progress-container">
+          <span id="progress-label" class="progress-text">0/20</span>
+        </div>
+      </header>
+      <div class="read-progress-bar">
+        <div id="progress-inner" class="read-progress-bar-inner"></div>
       </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>
+      <div class="play-body">
+        <div class="problem-display">
+          <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-container">
+          <div id="answer" class="answer-display"></div>
           <div class="keypad">
-          <div class="row">
+            <div class="key-row">
               <button class="key">1</button><button class="key">2</button><button class="key">3</button>
             </div>
-          <div class="row">
+            <div class="key-row">
               <button class="key">4</button><button class="key">5</button><button class="key">6</button>
             </div>
-          <div class="row">
+            <div class="key-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>
+            <div class="key-row">
+              <button class="key key-special" id="clear">C</button>
               <button class="key">0</button>
-            <button class="key special" id="backspace">←</button>
+              <button class="key key-special" id="backspace">⌫</button>
+            </div>
           </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>
+    <main class="screen-content hidden" id="summary-screen" style="margin-top: 24px;">
+      <div class="summary-view">
+        <div style="font-size: 64px; text-align: center;">🎉</div>
+        <h2 style="text-align: center; font-size: 28px; margin: 16px 0;">Koniec ćwiczenia!</h2>
+        <p id="summary-text" class="summary-score-text"></p>
+        <button class="action-btn summary-back-btn" id="again-btn">Jeszcze raz</button>
+        <button class="action-btn summary-back-btn secondary" id="change-btn">Zmień dzielnik</button>
       </div>
     </main>
   </div>
 
-  <footer class="app-footer">Commit: <span id="commit-sha">—</span></footer>
+  <footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
   <script src="nav.js?v=20260521"></script>
-  <script src="dzielenie.js?v=20260521"></script>
+  <script src="dzielenie.js?v=20260524"></script>
   </body>
 </html>

dzielenie.js

@@ -10,7 +10,6 @@
   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')
 
@@ -47,13 +46,13 @@
     })
   })
   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('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 === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' }
       else if (e.key === 'Enter') submit()
     }
   })
@@ -65,9 +64,9 @@
     const answer = randInt(1, 10)               // quotient (always integer)
     const a      = b * answer                   // dividend
     st.current   = { a, b, answer }
-    problemEl.textContent = `${a} ÷ ${b} = ?`
+    problemEl.textContent = `${a} ÷ ${b}`
     feedbackEl.textContent = ''
-    st.buf = ''; answerEl.textContent = ' '
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
   }
 
@@ -77,43 +76,60 @@
     st.solved++
     if (given === st.current.answer) {
       st.score++
-      feedbackEl.textContent = '✔ dobrze!'
-      feedbackEl.style.color = '#16a34a'
+      feedbackEl.textContent = 'Dobrze!'
+      feedbackEl.classList.add('correct')
+      feedbackEl.classList.remove('incorrect')
     } else {
-      feedbackEl.textContent = `✖ ${st.current.a} ÷ ${st.current.b} = ${st.current.answer}`
-      feedbackEl.style.color = '#dc2626'
+      feedbackEl.textContent = `Poprawna odpowiedź: ${st.current.answer}`
+      feedbackEl.classList.add('incorrect')
+      feedbackEl.classList.remove('correct')
     }
-    st.buf = ''; answerEl.textContent = ' '
+    feedbackEl.style.opacity = 1;
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
     if (st.solved >= st.total) {
-      setTimeout(showSummary, 700)
+      setTimeout(showSummary, 1200)
     } else {
-      setTimeout(nextProblem, 600)
+      setTimeout(() => {
+        feedbackEl.style.opacity = 0;
+        setTimeout(nextProblem, 200);
+      }, 1000)
     }
   }
 
   function updateBar() {
-    const pct = Math.round((st.solved / st.total) * 100)
+    const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
     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}%)`
+    const pct = st.total > 0 ? Math.round((st.score / st.total) * 100) : 0
+    summaryText.textContent = `Twój wynik: ${st.score} / ${st.total} poprawnie (${pct}%)`
     show(summaryScreen)
   }
 
   function show(screen) {
     [selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
     screen.classList.remove('hidden')
+    if (screen === summaryScreen) {
+      selectScreen.classList.add('hidden');
+      playScreen.classList.add('hidden');
+    }
   }
 
-  // commit SHA
+  // commit SHA and default selection
   document.addEventListener('DOMContentLoaded', async () => {
     const el = document.getElementById('commit-sha')
     if (!el) return
+
+    // Set default divisor selection
+    const defaultDivisorBtn = document.querySelector('.table-btn[data-val="0"]');
+    if(defaultDivisorBtn) {
+      defaultDivisorBtn.classList.add('active');
+      st.divisor = 0;
+    }
+
     let sha = (window.COMMIT_SHA || '').toString().trim()
     if (!sha) {
       try {

index.html

@@ -4,44 +4,58 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
     <title>Edu — Główne Menu</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;700;800&display=swap" rel="stylesheet">
   </head>
   <body>
-    <div class="app-wrap">
-      <main class="screen hub-screen">
-        <h1 class="app-title hub-logo">📚 Nauka</h1>
+    <div class="app-container">
+      <header class="app-header">
+        <h1 class="app-title">Wybierz kategorię</h1>
+        <p class="app-subtitle">i rozpocznij naukę</p>
+      </header>
 
-        <section class="panel hub-group">
-          <h2 class="hub-group-title">🇵🇱 Język Polski</h2>
-          <div class="hub-cards">
-            <a href="czytanie.html" class="hub-card">
-              <span class="hub-card-icon">📖</span>
-              <span class="hub-card-label">Czytanie</span>
-            </a>
-            <a href="dyktando.html" class="hub-card">
-              <span class="hub-card-icon">✏️</span>
-              <span class="hub-card-label">Dyktando</span>
-            </a>
+      <main class="category-grid">
+        <a href="czytanie.html" class="category-card" style="--grad-start: #3B82F6; --grad-end: #1D4ED8;">
+          <div class="card-icon">📖</div>
+          <div class="card-content">
+            <h2 class="card-title">Czytanie</h2>
+            <p class="card-desc">Ćwicz płynność czytania</p>
           </div>
-        </section>
+        </a>
 
-        <section class="panel hub-group">
-          <h2 class="hub-group-title">🔢 Matematyka</h2>
-          <div class="hub-cards">
-            <a href="testy.html" class="hub-card">
-              <span class="hub-card-icon">📝</span>
-              <span class="hub-card-label">Testy</span>
-            </a>
-            <a href="mnozenie.html" class="hub-card">
-              <span class="hub-card-icon">×</span>
-              <span class="hub-card-label">Nauka mnożenia</span>
-            </a>
-            <a href="dzielenie.html" class="hub-card">
-              <span class="hub-card-icon">÷</span>
-              <span class="hub-card-label">Nauka dzielenia</span>
-            </a>
+        <a href="dyktando.html" class="category-card" style="--grad-start: #F59E0B; --grad-end: #D97706;">
+          <div class="card-icon">✏️</div>
+          <div class="card-content">
+            <h2 class="card-title">Dyktando</h2>
+            <p class="card-desc">Sprawdź swoją ortografię</p>
           </div>
-        </section>
+        </a>
+
+        <a href="mnozenie.html" class="category-card" style="--grad-start: #10B981; --grad-end: #059669;">
+          <div class="card-icon">×</div>
+          <div class="card-content">
+            <h2 class="card-title">Mnożenie</h2>
+            <p class="card-desc">Tabliczka mnożenia</p>
+          </div>
+        </a>
+
+        <a href="dzielenie.html" class="category-card" style="--grad-start: #8B5CF6; --grad-end: #7C3AED;">
+          <div class="card-icon">÷</div>
+          <div class="card-content">
+            <h2 class="card-title">Dzielenie</h2>
+            <p class="card-desc">Powtórka z dzielenia</p>
+          </div>
+        </a>
+
+        <a href="testy.html" class="category-card" style="--grad-start: #EF4444; --grad-end: #DC2626;">
+          <div class="card-icon">📝</div>
+          <div class="card-content">
+            <h2 class="card-title">Testy z matematyki</h2>
+            <p class="card-desc">Sprawdź swoją wiedzę</p>
+          </div>
+        </a>
       </main>
     </div>
 

mnozenie.html

@@ -4,94 +4,105 @@
     <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?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">
+  <div class="app-container">
     <!-- ── 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">
+    <main id="select-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">× Nauka Mnożenia</h1>
+          <p class="subpage-subtitle">Wybierz tabliczkę, którą chcesz poćwiczyć.</p>
+        </header>
+        <section class="content-panel">
+          <h2 class="panel-title">Wybór tabliczki</h2>
           <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>
+            <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</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">
+        <section class="content-panel">
+          <label class="settings-label">
+            Liczba zadań w serii:
+            <input id="total-input" type="number" min="5" max="100" value="20" class="settings-input">
           </label>
         </section>
-      <button class="start-btn" id="start-btn">Zacznij ▶</button>
+        <button class="action-btn start-btn" id="start-btn">Rozpocznij ćwiczenie →</button>
+      </div>
     </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>
+    <main class="play-screen-container hidden" id="play-screen">
+      <header class="read-header">
+        <button id="back-btn" class="read-nav-btn">← Zmień</button>
+        <span class="read-title-text">Mnożenie</span>
+        <div class="progress-container">
+          <span id="progress-label" class="progress-text">0/20</span>
+        </div>
+      </header>
+      <div class="read-progress-bar">
+        <div id="progress-inner" class="read-progress-bar-inner"></div>
       </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>
+      <div class="play-body">
+        <div class="problem-display">
+          <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-container">
+          <div id="answer" class="answer-display"></div>
           <div class="keypad">
-          <div class="row">
+            <div class="key-row">
               <button class="key">1</button><button class="key">2</button><button class="key">3</button>
             </div>
-          <div class="row">
+            <div class="key-row">
               <button class="key">4</button><button class="key">5</button><button class="key">6</button>
             </div>
-          <div class="row">
+            <div class="key-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>
+            <div class="key-row">
+              <button class="key key-special" id="clear">C</button>
               <button class="key">0</button>
-            <button class="key special" id="backspace">←</button>
+              <button class="key key-special" id="backspace">⌫</button>
+            </div>
           </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>
+    <main class="screen-content hidden" id="summary-screen" style="margin-top: 24px;">
+      <div class="summary-view">
+        <div style="font-size: 64px; text-align: center;">🎉</div>
+        <h2 style="text-align: center; font-size: 28px; margin: 16px 0;">Koniec ćwiczenia!</h2>
+        <p id="summary-text" class="summary-score-text"></p>
+        <button class="action-btn summary-back-btn" id="again-btn">Jeszcze raz</button>
+        <button class="action-btn summary-back-btn secondary" id="change-btn">Zmień tabliczkę</button>
       </div>
     </main>
   </div>
 
-  <footer class="app-footer">Commit: <span id="commit-sha">—</span></footer>
+  <footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
   <script src="nav.js?v=20260521"></script>
-  <script src="mnozenie.js?v=20260521"></script>
+  <script src="mnozenie.js?v=20260524"></script>
   </body>
 </html>

mnozenie.js

@@ -10,7 +10,7 @@
   const feedbackEl    = document.getElementById('feedback')
   const progressInner = document.getElementById('progress-inner')
   const progressLabel = document.getElementById('progress-label')
-  const scoreLabel    = document.getElementById('score-label')
+  const scoreLabel    = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
   const summaryText   = document.getElementById('summary-text')
   const totalInput    = document.getElementById('total-input')
 
@@ -47,13 +47,13 @@
     })
   })
   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('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 === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' }
       else if (e.key === 'Enter') submit()
     }
   })
@@ -64,9 +64,9 @@
     const a = st.table || randInt(1, 10)
     const b = randInt(1, 10)
     st.current = { a, b, answer: a * b }
-    problemEl.textContent = `${a} × ${b} = ?`
+    problemEl.textContent = `${a} × ${b}`
     feedbackEl.textContent = ''
-    st.buf = ''; answerEl.textContent = ' '
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
   }
 
@@ -76,43 +76,62 @@
     st.solved++
     if (given === st.current.answer) {
       st.score++
-      feedbackEl.textContent = '✔ dobrze!'
-      feedbackEl.style.color = '#16a34a'
+      feedbackEl.textContent = 'Dobrze!'
+      feedbackEl.classList.add('correct')
+      feedbackEl.classList.remove('incorrect')
     } else {
-      feedbackEl.textContent = `✖ ${st.current.a} × ${st.current.b} = ${st.current.answer}`
-      feedbackEl.style.color = '#dc2626'
+      feedbackEl.textContent = `Poprawna odpowiedź: ${st.current.answer}`
+      feedbackEl.classList.add('incorrect')
+      feedbackEl.classList.remove('correct')
     }
-    st.buf = ''; answerEl.textContent = ' '
+    feedbackEl.style.opacity = 1;
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
     if (st.solved >= st.total) {
-      setTimeout(showSummary, 700)
+      setTimeout(showSummary, 1200)
     } else {
-      setTimeout(nextProblem, 600)
+      setTimeout(() => {
+        feedbackEl.style.opacity = 0;
+        setTimeout(nextProblem, 200);
+      }, 1000)
     }
   }
 
   function updateBar() {
-    const pct = Math.round((st.solved / st.total) * 100)
+    const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
     progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
-    scoreLabel.textContent = `✔ ${st.score}`
+    // scoreLabel is removed, so we comment this out
+    // scoreLabel.textContent = `✔ ${st.score}`
   }
 
   function showSummary() {
-    const pct = Math.round((st.score / st.total) * 100)
-    summaryText.textContent = `${st.score} / ${st.total} poprawnie (${pct}%)`
+    const pct = st.total > 0 ? Math.round((st.score / st.total) * 100) : 0
+    summaryText.textContent = `Twój wynik: ${st.score} / ${st.total} poprawnie (${pct}%)`
     show(summaryScreen)
   }
 
   function show(screen) {
+    console.log(`Showing screen: ${screen.id}`);
     [selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
     screen.classList.remove('hidden')
+    if (screen === summaryScreen) {
+      selectScreen.classList.add('hidden');
+      playScreen.classList.add('hidden');
+    }
   }
 
   // commit SHA
   document.addEventListener('DOMContentLoaded', async () => {
     const el = document.getElementById('commit-sha')
     if (!el) return
+    // Set default table selection
+    const defaultTableBtn = document.querySelector('.table-btn[data-val="0"]');
+    if(defaultTableBtn) {
+      defaultTableBtn.classList.add('active');
+      st.table = 0;
+    }
+
     let sha = (window.COMMIT_SHA || '').toString().trim()
     if (!sha) {
       try {

testy.html

@@ -4,19 +4,29 @@
     <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>
+  <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="app-wrap">
-  <main class="screen" id="menu-screen">
-      <h1 class="app-title">Matma Trening</h1>
+      <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">
+        <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>
@@ -24,131 +34,130 @@
             </div>
           </section>
 
-      <section class="panel">
-        <h2>Tryb gry</h2>
-        <div class="modes">
+          <!-- 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="icon">⧗</span>
-            Na czas
+                <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="icon">∞</span>
-            Trening
+                <span class="mode-icon">∞</span>
+                <span class="mode-label">Trening</span>
               </button>
             </div>
-        <p class="hint">Wybierz co najmniej jedno działanie, a następnie tryb, aby rozpocząć.</p>
+            <p class="hint-text">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" />
+        <!-- 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> Maksymalny wynik
-            <input id="setting-max-result" type="number" min="1" max="999" />
+              <label class="settings-label-row"> Maksymalny wynik
+                <input id="setting-max-result" type="number" min="1" max="999" class="settings-input-row" />
               </label>
-          <label> Maksymalna składowa (operand)
-            <input id="setting-max-operand" type="number" min="1" max="999" />
+              <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> Liczba zadań (tryb Trening)
-            <input id="setting-session-problems" type="number" min="1" max="500" />
+              <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> Wynik może być ujemny
+              <label class="settings-label-row checkbox"> Wynik może być ujemny
                 <input id="setting-allow-negative" type="checkbox" />
               </label>
-          <label> Wynik może być ułamkiem
+              <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="mode-btn">Zapisz</button>
-            <button id="reset-settings" class="mode-btn">Reset</button>
+                <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>
 
-  <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-container">
+          <div id="answer" class="answer-display"></div>
           <div class="keypad">
-          <div class="row">
-            <button class="key">1</button>
-            <button class="key">2</button>
-            <button class="key">3</button>
+            <div class="key-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 class="key-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 class="key-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>
+            <div class="key-row">
+              <button class="key key-special" id="negate">±</button>
               <button class="key">0</button>
-            <button class="key" id="dot">.</button>
+              <button class="key key-special" 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="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>
-      </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>
+
+    <!-- ── 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>