Spaces:

ItsJayKee
/

codeflow-typeracer

Running

App Files Files Community

ItsJayKee commited on Jan 15

Commit

bdf6428

verified ·

1 Parent(s): 927550e

now make a log in page where the user must put their name, section and grade level. so after taking the test their name section and grade will be added at the leaderboard

Browse files

Files changed (5) hide show

components/header.js +3 -2
index.html +9 -3
leaderboard.html +6 -2
login.html +87 -0
script.js +60 -10

components/header.js CHANGED Viewed

@@ -32,8 +32,9 @@ class CustomHeader extends HTMLElement {
           <nav class="hidden md:flex space-x-6">
             <a href="/" class="nav-link">Home</a>
             <a href="/leaderboard.html" class="nav-link">Leaderboard</a>
-</nav>
-          <button class="md:hidden">
             <i data-feather="menu"></i>
           </button>
         </div>

           <nav class="hidden md:flex space-x-6">
             <a href="/" class="nav-link">Home</a>
             <a href="/leaderboard.html" class="nav-link">Leaderboard</a>
+            <a href="/login.html" class="nav-link">Login</a>
+          </nav>
+<button class="md:hidden">
             <i data-feather="menu"></i>
           </button>
         </div>

index.html CHANGED Viewed

@@ -91,11 +91,17 @@
     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
-    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
+        // Check if user is logged in
+        document.addEventListener('DOMContentLoaded', () => {
+            const userInfo = localStorage.getItem('userInfo');
+            if (!userInfo) {
+                window.location.href = '/login.html';
+            }
+        });
     </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

leaderboard.html CHANGED Viewed

@@ -22,12 +22,14 @@
                     <thead>
                         <tr>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Rank</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Language</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">WPM</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Accuracy</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Time</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Date</th>
-                        </tr>
                     </thead>
                     <tbody id="leaderboard-body" class="divide-y divide-gray-700">
                         <!-- Leaderboard data will be inserted here -->
@@ -54,12 +56,14 @@
                 const row = document.createElement('tr');
                 row.innerHTML = `
                     <td class="px-6 py-4 whitespace-nowrap">${index + 1}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.language.toUpperCase()}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.wpm}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.accuracy}%</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.time_taken}s</td>
                     <td class="px-6 py-4 whitespace-nowrap">${new Date(entry.created_at).toLocaleString()}</td>
-                `;
                 tbody.appendChild(row);
             });
         }

                     <thead>
                         <tr>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Rank</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Name</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Grade & Section</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Language</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">WPM</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Accuracy</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Time</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-indigo-300 uppercase tracking-wider">Date</th>
+</tr>
                     </thead>
                     <tbody id="leaderboard-body" class="divide-y divide-gray-700">
                         <!-- Leaderboard data will be inserted here -->
                 const row = document.createElement('tr');
                 row.innerHTML = `
                     <td class="px-6 py-4 whitespace-nowrap">${index + 1}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.name}</td>
+                    <td class="px-6 py-4 whitespace-nowrap">${entry.grade} - ${entry.section}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.language.toUpperCase()}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.wpm}</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.accuracy}%</td>
                     <td class="px-6 py-4 whitespace-nowrap">${entry.time_taken}s</td>
                     <td class="px-6 py-4 whitespace-nowrap">${new Date(entry.created_at).toLocaleString()}</td>
+`;
                 tbody.appendChild(row);
             });
         }

	@@ -0,0 +1,87 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - CodeFlow Typing Challenge</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8 max-w-md">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold mb-2 text-indigo-400">Enter Your Details</h1>
+            <p class="text-lg text-gray-400">Your information will appear on the leaderboard</p>
+        </div>
+        <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+            <form id="login-form" class="space-y-6">
+                <div>
+                    <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
+                    <input type="text" id="name" required
+                        class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:border-indigo-500 focus:outline-none">
+                </div>
+                <div>
+                    <label for="grade" class="block text-sm font-medium text-gray-300 mb-1">Grade Level</label>
+                    <select id="grade" required
+                        class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:border-indigo-500 focus:outline-none">
+                        <option value="">Select Grade</option>
+                        <option value="7">Grade 7</option>
+                        <option value="8">Grade 8</option>
+                        <option value="9">Grade 9</option>
+                        <option value="10">Grade 10</option>
+                        <option value="11">Grade 11</option>
+                        <option value="12">Grade 12</option>
+                        <option value="college">College</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="section" class="block text-sm font-medium text-gray-300 mb-1">Section</label>
+                    <input type="text" id="section" required
+                        class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 focus:border-indigo-500 focus:outline-none">
+                </div>
+                <button type="submit"
+                    class="w-full bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
+                    Start Typing Test
+                </button>
+            </form>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+        document.getElementById('login-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('name').value.trim();
+            const grade = document.getElementById('grade').value;
+            const section = document.getElementById('section').value.trim();
+            if (!name || !grade || !section) {
+                alert('Please fill in all fields');
+                return;
+            }
+            // Store user info in localStorage
+            localStorage.setItem('userInfo', JSON.stringify({
+                name,
+                grade,
+                section
+            }));
+            // Redirect to test page
+            window.location.href = '/';
+        });
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -299,22 +299,72 @@ resultsSection.classList.remove('hidden');
 }
 // Mock save results function for local testing
 async function saveResults(language, wpm, accuracy, timeTaken) {
-    console.log('Results would be saved:', {
         language,
         wpm,
         accuracy,
-        time: timeTaken
-    });
-    return { success: true };
-}
 // Mock leaderboard data for local testing
 async function fetchLeaderboard() {
-    return [
-        { language: 'javascript', wpm: 85, accuracy: 98, time_taken: 120, created_at: new Date() },
-        { language: 'html', wpm: 75, accuracy: 95, time_taken: 180, created_at: new Date() },
-        { language: 'css', wpm: 65, accuracy: 92, time_taken: 150, created_at: new Date() }
-    ];
 }
 // Event listeners
 inputField.addEventListener('input', updateDisplay);

 }
 // Mock save results function for local testing
 async function saveResults(language, wpm, accuracy, timeTaken) {
+    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
+    const result = {
         language,
         wpm,
         accuracy,
+        time_taken: timeTaken,
+        name: userInfo.name || 'Anonymous',
+        grade: userInfo.grade || 'N/A',
+        section: userInfo.section || 'N/A',
+        created_at: new Date().toISOString()
+    };
+    console.log('Results would be saved:', result);
+    // In a real app, you would send this to your backend
+    // await fetch('/api/results', {
+    //     method: 'POST',
+    //     headers: { 'Content-Type': 'application/json' },
+    //     body: JSON.stringify(result)
+    // });
+    return { success: true, data: result };
+}
 // Mock leaderboard data for local testing
 async function fetchLeaderboard() {
+    // Try to get from localStorage if no backend
+    const savedResults = JSON.parse(localStorage.getItem('savedResults') || '[]');
+    // Add some sample data if empty
+    if (savedResults.length === 0) {
+        return [
+            {
+                name: 'John Doe',
+                grade: '10',
+                section: 'A',
+                language: 'javascript',
+                wpm: 85,
+                accuracy: 98,
+                time_taken: 120,
+                created_at: new Date().toISOString()
+            },
+            {
+                name: 'Jane Smith',
+                grade: '11',
+                section: 'B',
+                language: 'html',
+                wpm: 75,
+                accuracy: 95,
+                time_taken: 180,
+                created_at: new Date().toISOString()
+            },
+            {
+                name: 'Alex Johnson',
+                grade: '9',
+                section: 'C',
+                language: 'css',
+                wpm: 65,
+                accuracy: 92,
+                time_taken: 150,
+                created_at: new Date().toISOString()
+            }
+        ];
+    }
+    return savedResults;
 }
 // Event listeners
 inputField.addEventListener('input', updateDisplay);