Refactor z nowa templatka

2026-05-24 14:37:20 +02:00
parent abd320adb4
commit 204375dd39
16 changed files with 2586 additions and 740 deletions
@@ -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>