major update

data/results.json

@@ -39,6 +39,33 @@
         }
       ],
       "timestamp": "2025-07-07T12:14:21.058Z"
+    },
+    {
+      "score": 5,
+      "completed": true,
+      "answers": [
+        {
+          "word": "computer",
+          "correct": true
+        },
+        {
+          "word": "keyboard",
+          "correct": true
+        },
+        {
+          "word": "mouse",
+          "correct": true
+        },
+        {
+          "word": "screen",
+          "correct": true
+        },
+        {
+          "word": "printer",
+          "correct": true
+        }
+      ],
+      "timestamp": "2025-07-15T14:36:13.273Z"
     }
   ]
 }

public/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
+    <meta charset="UTF-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>✨ Modern Spelling Practice</title>
     <link href="styles.css" rel="stylesheet"/>
@@ -35,6 +35,7 @@
             </form>
             <p id="loginMessage" style="margin-top: 1rem; text-align: center;"></p>
         </div>
+        
         <!-- Navigation -->
         <div id="nav" class="hidden">
             <p><strong id="userInfo"></strong></p>
@@ -44,6 +45,7 @@
                 <button id="logoutBtn" onclick="logoutUser()" class="btn-secondary">Sign Out</button>
             </div>
         </div>
+        
         <!-- Admin Panel -->
         <div class="hidden" id="adminPanel">
             <div class="card-header">
@@ -56,12 +58,13 @@
                 <button class="active" onclick="switchTab('tabUsers')">👤 Users</button>
                 <button onclick="switchTab('tabWords')">📝 Word Lists</button>
                 <button onclick="switchTab('tabAnalytics')">📊 Analytics</button>
-                <button onclick="switchTab('tabResults')">� Results</button>
+                <button onclick="switchTab('tabResults')">📋 Results</button>
                 <button onclick="switchTab('tabReports')">📘 Reports</button>
-                <button onclick="switchTab('tabSessions')">� Sessions</button>
+                <button onclick="switchTab('tabSessions')">📅 Sessions</button>
-                <button onclick="switchTab('tabBadges')">� Badges</button>
+                <button onclick="switchTab('tabBadges')">🏅 Badges</button>
                 <button onclick="switchTab('tabTheme')">🎨 Themes</button>
             </div>
+            
             <!-- Users Tab -->
             <div id="tabUsers" class="adminTab">
                 <h3>👤 User Management</h3>
@@ -78,6 +81,7 @@
                             <button type="submit" class="btn-success">➕ Add User</button>
                         </form>
                         <p id="userAddMessage" style="margin-top: 1rem;"></p>
+                        <small id="hashPreview" style="color: var(--text-secondary);"></small>
                     </div>
                     <div class="card">
                         <h4>Remove User</h4>
@@ -87,14 +91,14 @@
                     </div>
                 </div>
             </div>
+            
             <!-- Word Lists Tab -->
             <div class="adminTab hidden" id="tabWords">
-                <h3>📝 Word List Management</h3>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
-                <div style="display: grid; gap: 2rem;">
                     <div class="card">
-                        <h4>Select Student</h4>
+                        <h4>Select User</h4>
                         <select class="word-user-dropdown" id="wordUserSelect" onchange="loadWordsForSelectedUser()" style="width: 100%;">
-                            <option value="">-- Select a student --</option>
+                            <option value="">-- Select a user --</option>
                         </select>
                     </div>
                     
@@ -126,6 +130,7 @@
                     </div>
                 </div>
             </div>
+            
             <!-- Results Tab -->
             <div class="adminTab hidden" id="tabResults">
                 <div class="card">
@@ -166,7 +171,7 @@
             <!-- Badges Tab -->
             <div class="adminTab hidden" id="tabBadges">
                 <div class="card">
-                    <h3>� Student Badges</h3>
+                    <h3>🏅 Student Badges</h3>
                     <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
                         <div>
                             <h4>Select Student</h4>
@@ -194,6 +199,7 @@
                     </select>
                 </div>
             </div>
+            
             <!-- Reports Tab -->
             <div class="adminTab hidden" id="tabReports">
                 <div class="card">
@@ -233,7 +239,7 @@
             <!-- Sessions Tab -->
             <div class="adminTab hidden" id="tabSessions">
                 <div class="card">
-                    <h3>� Session History</h3>
+                    <h3>📅 Session History</h3>
                     <div style="margin-bottom: 2rem;">
                         <label for="sessionUserSelect">Select Student:</label>
                         <select id="sessionUserSelect" onchange="loadUserSessions(this.value)" style="width: 100%; max-width: 300px;">
@@ -244,6 +250,7 @@
                 </div>
             </div>
         </div>
+        
         <!-- Student Panel -->
         <div class="hidden" id="studentPanel">
             <div class="card">
@@ -252,6 +259,18 @@
                     <p style="color: var(--text-secondary);">Choose an activity to start practicing</p>
                 </div>
                 
+                <!-- Theme Selection for Students -->
+                <div class="card" style="margin-bottom: 1.5rem;">
+                    <h4>🎨 Choose Your Theme</h4>
+                    <select id="studentThemeSelect" onchange="changeTheme(this.value)" style="width: 100%; max-width: 300px;">
+                        <option value="default">✨ Modern (Default)</option>
+                        <option value="playground">🎪 Playground</option>
+                        <option value="chalkboard">🎓 Chalkboard</option>
+                        <option value="galaxy">🌌 Galaxy</option>
+                        <option value="nature">🌿 Nature</option>
+                    </select>
+                </div>
+                
                 <div class="student-controls">
                     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 600px; margin: 0 auto;">
                         <button id="startGameBtn" onclick="startGame()" class="btn-success">
@@ -262,43 +281,58 @@
                         </button>
                     </div>
                 </div>
-                
+            </div>
-                <!-- Game Section -->
+        </div>
-                <div class="hidden" id="gameSection">
+        
+        <!-- Game Section -->
+        <div class="hidden" id="gameSection">
+            <div class="card">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h3>🎮 Spelling Challenge</h3>
-                    <div class="word-box" id="wordBox"></div>
+                    <button onclick="backToStudentDashboard()" class="btn-secondary" style="padding: 0.5rem 1rem;">
-                    <div class="hidden" id="inputSection" style="text-align: center;">
+                        ← Back to Dashboard
-                        <input id="userInput" placeholder="Type the word you saw..." type="text" style="max-width: 400px;"/>
+                    </button>
-                        <button onclick="submitAnswer()" class="btn-primary">Submit Answer</button>
-                    </div>
-                    <!-- Game Summary -->
-                    <div class="hidden" id="summary" class="card"></div>
-                    <!-- Badge Display -->
-                    <div class="hidden" id="badgeDisplay" class="card">
-                        <h3>🏅 Congratulations!</h3>
-                        <p>You've earned new badges:</p>
-                        <ul id="badgeList"></ul>
-                    </div>
                 </div>
-                
+                <div class="word-box" id="wordBox"></div>
-                <!-- Typing Practice Section -->
+                <div class="hidden" id="inputSection" style="text-align: center;">
-                <div class="hidden" id="typingSection">
+                    <input id="userInput" placeholder="Type the word you saw..." type="text" style="max-width: 400px;"/>
+                    <button onclick="submitAnswer()" class="btn-primary">Submit Answer</button>
+                </div>
+                <!-- Game Summary -->
+                <div class="hidden" id="summary" class="card"></div>
+                <!-- Badge Display -->
+                <div class="hidden" id="badgeDisplay" class="card">
+                    <h3>🏅 Congratulations!</h3>
+                    <p>You've earned new badges:</p>
+                    <ul id="badgeList"></ul>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Typing Practice Section -->
+        <div class="hidden" id="typingSection">
+            <div class="card">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h3>⌨️ Typing Practice</h3>
-                    <div id="typingPrompt">Get ready to type...</div>
+                    <button onclick="backToStudentDashboard()" class="btn-secondary" style="padding: 0.5rem 1rem;">
-                    <div style="text-align: center; margin: 2rem 0;">
+                        ← Back to Dashboard
-                        <input id="typingInput" type="text" style="max-width: 500px;"/>
+                    </button>
-                        <button onclick="submitTyping()" class="btn-primary">Submit</button>
-                    </div>
-                    <p id="typingFeedback" style="text-align: center; font-weight: 600;"></p>
                 </div>
+                <div id="typingPrompt">Get ready to type...</div>
+                <div style="text-align: center; margin: 2rem 0;">
+                    <input id="typingInput" type="text" style="max-width: 500px;"/>
+                    <button onclick="submitTyping()" class="btn-primary">Submit</button>
+                </div>
+                <p id="typingFeedback" style="text-align: center; font-weight: 600;"></p>
             </div>
         </div>
         
         <!-- Toast notification -->
         <div id="toast" class="toast"></div>
-    </div>    <script>
+    </div>
+    
+    <script>
         // Initialize the application when DOM is loaded
-        
         window.addEventListener('DOMContentLoaded', () => {
             const user = JSON.parse(localStorage.getItem('loggedInUser'));
             if (user) {

public/js/game.js

@@ -83,8 +83,13 @@ window.startGame = async function() {
     }
 
     try {
+        // Hide student dashboard and typing practice
+        document.getElementById('studentPanel').style.display = 'none';
+        document.getElementById('typingSection').style.display = 'none';
+        
         // Show game section
         document.getElementById('gameSection').classList.remove('hidden');
+        document.getElementById('gameSection').style.display = 'block';
         document.getElementById('wordBox').textContent = 'Loading...';
         document.getElementById('summary')?.classList.add('hidden');
         document.getElementById('badgeDisplay')?.classList.add('hidden');

public/js/main.js

@@ -51,4 +51,54 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
   
   console.log('✅ Application initialized');
-});
+});
+
+// Function to return to student dashboard
+window.backToStudentDashboard = function() {
+    console.log('🔙 Returning to student dashboard');
+    
+    // Hide all sections
+    document.getElementById('gameSection').classList.add('hidden');
+    document.getElementById('gameSection').style.display = 'none';
+    document.getElementById('typingSection').classList.add('hidden');
+    document.getElementById('typingSection').style.display = 'none';
+    
+    // Show student panel
+    document.getElementById('studentPanel').classList.remove('hidden');
+    document.getElementById('studentPanel').style.display = 'block';
+    
+    // Reset any game/typing state
+    document.getElementById('userInput').value = '';
+    document.getElementById('typingInput').value = '';
+    document.getElementById('wordBox').textContent = '';
+    document.getElementById('typingPrompt').textContent = 'Get ready to type...';
+    document.getElementById('typingFeedback').textContent = '';
+}
+
+// Function to change theme (accessible to students)
+window.changeTheme = function(themeName) {
+    console.log('🎨 Changing theme to:', themeName);
+    
+    // Apply the theme
+    applyTheme(themeName);
+    
+    // Save the preference in both possible keys
+    localStorage.setItem('selectedTheme', themeName);
+    localStorage.setItem('theme', themeName);
+    
+    // Update both theme selects if they exist
+    const adminThemeSelect = document.getElementById('themeSelect');
+    const studentThemeSelect = document.getElementById('studentThemeSelect');
+    
+    if (adminThemeSelect) {
+        adminThemeSelect.value = themeName;
+    }
+    if (studentThemeSelect) {
+        studentThemeSelect.value = themeName;
+    }
+    
+    // Show toast notification
+    if (typeof showToast === 'function') {
+        showToast(`🎨 Theme changed to ${themeName}`);
+    }
+}

public/js/themes.js

@@ -1,10 +1,14 @@
 // Modern theme system
 function applySavedTheme() {
-  const savedTheme = localStorage.getItem('theme') || 'default';
+  const savedTheme = localStorage.getItem('theme') || localStorage.getItem('selectedTheme') || 'default';
   applyTheme(savedTheme);
 
+  // Update both theme selectors
   const themeSelector = document.getElementById('themeSelect');
+  const studentThemeSelector = document.getElementById('studentThemeSelect');
+  
   if (themeSelector) themeSelector.value = savedTheme;
+  if (studentThemeSelector) studentThemeSelector.value = savedTheme;
 }
 
 function changeTheme(themeName) {

public/js/typing.js

@@ -12,8 +12,12 @@ window.startTypingPractice = async function() {
     const user = JSON.parse(localStorage.getItem('loggedInUser'));
     if (!user) return;
 
+    // Hide student dashboard and game section
+    document.getElementById('studentPanel').style.display = 'none';
     document.getElementById('gameSection').classList.add('hidden');
+    document.getElementById('gameSection').style.display = 'none';
     document.getElementById('typingSection').classList.remove('hidden');
+    document.getElementById('typingSection').style.display = 'block';
 
     const typingPrompt = document.getElementById('typingPrompt');
     typingPrompt.textContent = 'Loading...';

public/js/ui.js

@@ -57,6 +57,7 @@ function showStudent() {
   const studentPanel = document.getElementById('studentPanel');
   if (studentPanel) {
     studentPanel.classList.remove('hidden');
+    studentPanel.style.display = 'block';
     
     // Ensure buttons are visible and functional
     const gameBtn = document.getElementById('startGameBtn');
@@ -67,6 +68,13 @@ function showStudent() {
       typingBtn.classList.remove('hidden');
       console.log("✅ Student buttons are now visible");
     }
+    
+    // Update student theme selector to match current theme
+    const savedTheme = localStorage.getItem('theme') || localStorage.getItem('selectedTheme') || 'default';
+    const studentThemeSelect = document.getElementById('studentThemeSelect');
+    if (studentThemeSelect) {
+      studentThemeSelect.value = savedTheme;
+    }
   }
 }
 

public/styles.css

@@ -105,7 +105,7 @@ button {
   padding: 0.75rem 1.5rem;
   margin: 0.25rem;
   background: var(--primary);
-  color: white;
+  color: white !important;
   border: none;
   border-radius: var(--radius);
   font-size: 1rem;
@@ -114,56 +114,126 @@ button {
   cursor: pointer;
   transition: var(--transition);
   box-shadow: var(--shadow);
+  text-decoration: none;
 }
 
 button:hover {
   background: var(--primary-dark);
+  color: white !important;
   transform: translateY(-1px);
   box-shadow: var(--shadow-lg);
 }
 
 button:active {
   transform: translateY(0);
+  color: white !important;
 }
 
 button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
+  color: white !important;
 }
 
 /* Button variants */
 .btn-secondary {
   background: var(--secondary);
-  color: var(--text-primary);
+  color: var(--text-primary) !important;
 }
 
 .btn-secondary:hover {
   background: var(--border);
+  color: var(--text-primary) !important;
 }
 
 .btn-success {
   background: var(--success);
+  color: white !important;
 }
 
 .btn-success:hover {
   background: #059669;
+  color: white !important;
 }
 
 .btn-warning {
   background: var(--warning);
+  color: white !important;
 }
 
 .btn-warning:hover {
   background: #d97706;
+  color: white !important;
 }
 
 .btn-error {
   background: var(--error);
+  color: white !important;
 }
 
 .btn-error:hover {
   background: #dc2626;
+  color: white !important;
+}
+
+/* Additional button contrast fixes */
+#startGameBtn, #startTypingBtn {
+  background: var(--success) !important;
+  color: white !important;
+  border: 2px solid rgba(255, 255, 255, 0.2) !important;
+  font-weight: 600 !important;
+  min-height: 48px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+#startGameBtn:hover, #startTypingBtn:hover {
+  background: #059669 !important;
+  color: white !important;
+  transform: translateY(-2px) !important;
+}
+
+/* Typing Practice button specific styling */
+#startTypingBtn {
+  background: var(--warning) !important;
+}
+
+#startTypingBtn:hover {
+  background: #d97706 !important;
+}
+
+/* Back to dashboard button */
+button[onclick="backToStudentDashboard()"] {
+  background: var(--secondary) !important;
+  color: var(--text-primary) !important;
+  border: 1px solid var(--border) !important;
+}
+
+button[onclick="backToStudentDashboard()"]:hover {
+  background: var(--border) !important;
+  color: var(--text-primary) !important;
+}
+
+/* Theme-specific button fixes */
+.theme-chalkboard button,
+.theme-galaxy button {
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+}
+
+.theme-chalkboard .btn-secondary,
+.theme-galaxy .btn-secondary {
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: white !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+.theme-chalkboard .btn-secondary:hover,
+.theme-galaxy .btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
 }
 
 /* Cards and panels */
@@ -333,6 +403,31 @@ button:disabled {
   box-shadow: var(--shadow);
 }
 
+/* Student controls specific styling */
+.student-controls button {
+  min-height: 60px !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  text-shadow: none !important;
+  border: 2px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.student-controls .btn-success {
+  background: linear-gradient(135deg, #10b981, #059669) !important;
+  color: white !important;
+}
+
+.student-controls .btn-warning {
+  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+  color: white !important;
+}
+
+.student-controls button:hover {
+  transform: translateY(-3px) !important;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
+}
+
 /* Lists */
 ul {
   list-style: none;