add diffent lessions

public/index.html

@@ -75,17 +75,45 @@
       </div>
     </div>
 
-    <!-- Main app — hidden until logged in -->
+    <!-- Class picker — shown after login when no class is active -->
+    <div id="classPickerOverlay" class="class-picker-overlay" style="display: none">
+      <div class="class-picker-card">
+        <h2 class="class-picker-title">Klasse wählen</h2>
+        <p class="class-picker-subtitle">Wähle deine Klasse, um fortzufahren.</p>
+        <div id="classList" class="class-list"></div>
+      </div>
+    </div>
+
+    <!-- Class completion — shown when all lessons in the active class are done -->
+    <div id="classCompletionOverlay" class="class-picker-overlay" style="display: none">
+      <div class="class-picker-card" style="text-align: center">
+        <div class="completion-icon">🎉</div>
+        <h2 class="class-picker-title">Klasse abgeschlossen!</h2>
+        <p class="class-picker-subtitle">
+          Du hast alle Aufgaben gelöst und
+          <strong id="completionPoints" style="color: var(--theme-accent)">0</strong>
+          Punkte erreicht.
+        </p>
+        <button class="auth-button" style="margin-top: 24px" onclick="completeAndPickClass()">
+          Nächste Klasse wählen
+        </button>
+        <button class="reset-button" style="margin-top: 10px" onclick="resetClassProgress(this)">
+          Fortschritt zurücksetzen
+        </button>
+      </div>
+    </div>
+
+    <!-- Main app — hidden until logged in and class is active -->
     <div id="appWrapper" class="app-wrapper" style="display: none">
       <aside class="sidebar" id="sidebar"></aside>
       <div class="main-content">
         <div class="container">
           <header>
             <div class="header-content">
-              <h1>Kriminalfälle - Mathematische Ermittlungen</h1>
+              <h1>Mathquest</h1>
               <div class="header-right">
                 <div class="points-display">
-                  <div class="points-label">Ermittlungspunkte</div>
+                  <div class="points-label">Punkte</div>
                   <div class="points-value" id="totalPoints">0</div>
                 </div>
                 <div class="user-display">
@@ -100,7 +128,7 @@
 
           <div class="progress-section">
             <div class="progress-content">
-              <div class="progress-label">Ermittlungsfortschritt</div>
+              <div class="progress-label">Fortschritt</div>
               <div class="progress-bar-container">
                 <div class="progress-bar" id="progressBar"></div>
               </div>