Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Nova ExamGuard</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| :root { | |
| --primary: #4f46e5; | |
| --secondary: #10b981; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen font-sans"> | |
| <div id="app" class="max-w-md mx-auto relative overflow-hidden exam-layout"> | |
| <!-- Login Screen --> | |
| <section id="login-screen" class="p-6 h-screen flex flex-col justify-center"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-2">Nova ExamGuard</h1> | |
| <p class="text-gray-600">Secure exam platform</p> | |
| </div> | |
| <form id="login-form" class="space-y-4"> | |
| <div> | |
| <label for="student-id" class="block text-sm font-medium text-gray-700 mb-1">Student ID</label> | |
| <input type="text" id="student-id" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="password" required | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition"> | |
| Login | |
| </button> | |
| <div class="text-center"> | |
| <button type="button" id="forgot-password" class="text-sm text-indigo-600 hover:text-indigo-800"> | |
| Forgot Password? | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Forgot Password Modal --> | |
| <div id="forgot-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-sm"> | |
| <h3 class="text-lg font-medium mb-4">Reset Password</h3> | |
| <input type="email" id="reset-email" placeholder="Enter your email" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-4"> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancel-reset" class="px-4 py-2 text-gray-600 rounded-lg">Cancel</button> | |
| <button id="submit-reset" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reset Confirmation --> | |
| <div id="reset-confirmation" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-sm"> | |
| <h3 class="text-lg font-medium mb-4">Reset Link Sent</h3> | |
| <p class="text-gray-600 mb-4">Password reset link has been sent to your email (simulation only).</p> | |
| <button id="close-confirmation" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg">OK</button> | |
| </div> | |
| </div> | |
| <!-- Main App Screens (hidden initially) --> | |
| <div id="app-screens" class="hidden h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img id="student-avatar" src="https://static.photos/people/120x120/1" alt="Student" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h2 id="student-name" class="font-medium text-gray-800">Student</h2> | |
| <span id="status-badge" class="text-xs px-2 py-1 bg-emerald-100 text-emerald-800 rounded-full">No active exam</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main id="main-content" class="flex-1 overflow-y-auto p-4 bg-gray-50"> | |
| <!-- Dashboard Screen --> | |
| <section id="dashboard-screen" class="space-y-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-medium mb-4">Upcoming Exams</h3> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium">Mathematics Final</h4> | |
| <p class="text-sm text-gray-500">Tomorrow at 9:00 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Exams Screen --> | |
| <section id="exams-screen" class="hidden space-y-4"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Available Exams</h2> | |
| <div id="exam-list" class="space-y-3"></div> | |
| </section> | |
| <!-- Take Exam Screen --> | |
| <section id="exam-screen" class="hidden"> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 id="exam-title" class="text-lg font-medium">Mathematics Final</h3> | |
| <span id="exam-timer" class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">30:00</span> | |
| </div> | |
| <div class="relative h-2 bg-gray-200 rounded-full mb-4"> | |
| <div id="exam-progress" class="absolute top-0 left-0 h-full bg-indigo-600 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div id="exam-questions" class="border-4 border-red-600 rounded-lg p-4 relative min-h-[300px]"></div> | |
| <div class="fixed bottom-4 left-0 right-0 px-4 flex justify-between"> | |
| <button id="prev-question" class="bg-gray-200 text-gray-800 py-3 px-6 rounded-lg shadow-md hover:bg-gray-300 hidden"> | |
| Previous | |
| </button> | |
| <button id="next-question" class="bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md hover:bg-indigo-700"> | |
| Next Question | |
| </button> | |
| <button id="submit-exam" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg shadow-md hover:bg-indigo-700"> | |
| Submit Exam | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Pending Screen --> | |
| <section id="pending-screen" class="hidden"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Pending Submissions</h2> | |
| <div id="submission-list" class="space-y-3"></div> | |
| </section> | |
| <!-- Profile Screen --> | |
| <section id="profile-screen" class="hidden space-y-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex flex-col items-center mb-6"> | |
| <img src="https://static.photos/people/120x120/1" alt="Student" class="w-20 h-20 rounded-full mb-3"> | |
| <h3 id="profile-name" class="text-lg font-medium">John Doe</h3> | |
| <p id="profile-id" class="text-sm text-gray-500">ID: 12345</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="profile-email" value="[email protected]" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Change Password</label> | |
| <input type="password" placeholder="New password" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> | |
| </div> | |
| <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| <button id="logout-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-lg hover:bg-red-700"> | |
| Logout | |
| </button> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-white border-t border-gray-200 p-2"> | |
| <div class="flex justify-around"> | |
| <button data-screen="dashboard" class="nav-btn flex flex-col items-center text-indigo-600 p-2"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button data-screen="exams" class="nav-btn flex flex-col items-center text-gray-500 p-2"> | |
| <i data-feather="book" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Exams</span> | |
| </button> | |
| <button data-screen="take-exam" class="nav-btn flex flex-col items-center text-gray-500 p-2"> | |
| <i data-feather="edit-3" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Take Exam</span> | |
| </button> | |
| <button data-screen="pending" class="nav-btn flex flex-col items-center text-gray-500 p-2"> | |
| <i data-feather="clock" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Pending</span> | |
| </button> | |
| <button data-screen="profile" class="nav-btn flex flex-col items-center text-gray-500 p-2"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |