can you make the exam page have like this border red because in this app we will have eye tracker use and that red border is the edge and make tghis on exam pc layout

README.md

@@ -1,10 +1,13 @@
 ---
-title: Examproctor Eyetrack
-emoji: 👁
-colorFrom: gray
-colorTo: yellow
+title: ExamProctor EyeTrack 🚀👁️
+colorFrom: green
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

app.js

@@ -0,0 +1,493 @@
+// App State
+const state = {
+    isLoggedIn: false,
+    currentStudent: null,
+    exams: [
+        {
+            id: 1,
+            subject: "Mathematics",
+            date: "2023-06-15",
+            duration: 30, // minutes
+            questions: [
+                {
+                    id: 1,
+                    type: "multiple",
+                    text: "What is the derivative of x²?",
+                    options: ["x", "2x", "x²", "2x²"],
+                    answer: 1
+                },
+                {
+                    id: 2,
+                    type: "multiple",
+                    text: "What is the value of π (pi) to two decimal places?",
+                    options: ["3.14", "3.16", "3.12", "3.18"],
+                    answer: 0
+                },
+                {
+                    id: 3,
+                    type: "short",
+                    text: "Solve for x: 2x + 5 = 15",
+                    answer: "5"
+                },
+                {
+                    id: 4,
+                    type: "multiple",
+                    text: "Which of these is a prime number?",
+                    options: ["4", "9", "11", "15"],
+                    answer: 2
+                },
+                {
+                    id: 5,
+                    type: "short",
+                    text: "What is the area of a circle with radius 3? (Use π ≈ 3.14)",
+                    answer: "28.26"
+                }
+            ]
+        },
+        {
+            id: 2,
+            subject: "Physics",
+            date: "2023-06-20",
+            duration: 45,
+            questions: [
+                {
+                    id: 1,
+                    type: "multiple",
+                    text: "What is the SI unit of force?",
+                    options: ["Joule", "Watt", "Newton", "Pascal"],
+                    answer: 2
+                },
+                {
+                    id: 2,
+                    type: "short",
+                    text: "What is the acceleration due to gravity on Earth (in m/s²)?",
+                    answer: "9.8"
+                }
+            ]
+        }
+    ],
+    currentExam: null,
+    examStartTime: null,
+    examTimer: null,
+    suspiciousActivities: 0,
+    submissions: []
+};
+
+// DOM Elements
+const loginScreen = document.getElementById('login-screen');
+const appScreens = document.getElementById('app-screens');
+const loginForm = document.getElementById('login-form');
+const forgotPasswordBtn = document.getElementById('forgot-password');
+const forgotModal = document.getElementById('forgot-modal');
+const resetConfirmation = document.getElementById('reset-confirmation');
+const studentName = document.getElementById('student-name');
+const studentAvatar = document.getElementById('student-avatar');
+const statusBadge = document.getElementById('status-badge');
+const examList = document.getElementById('exam-list');
+const examScreen = document.getElementById('exam-screen');
+const examQuestions = document.getElementById('exam-questions');
+const examTitle = document.getElementById('exam-title');
+const examTimer = document.getElementById('exam-timer');
+const examProgress = document.getElementById('exam-progress');
+const submitExamBtn = document.getElementById('submit-exam');
+const submissionList = document.getElementById('submission-list');
+const logoutBtn = document.getElementById('logout-btn');
+const navButtons = document.querySelectorAll('.nav-btn');
+
+// Initialize the app
+function init() {
+    checkAuth();
+    setupEventListeners();
+    renderExamList();
+    loadSubmissions();
+}
+
+// Check if user is logged in
+function checkAuth() {
+    const student = localStorage.getItem('examGuardStudent');
+    if (student) {
+        state.isLoggedIn = true;
+        state.currentStudent = JSON.parse(student);
+        showApp();
+    } else {
+        showLogin();
+    }
+}
+
+// Show login screen
+function showLogin() {
+    loginScreen.classList.remove('hidden');
+    appScreens.classList.add('hidden');
+    state.isLoggedIn = false;
+}
+
+// Show main app
+function showApp() {
+    loginScreen.classList.add('hidden');
+    appScreens.classList.remove('hidden');
+    
+    // Update student info
+    studentName.textContent = state.currentStudent?.name || 'Student';
+    studentAvatar.src = `https://static.photos/people/120x120/${state.currentStudent?.id || 1}`;
+    
+    // Show dashboard by default
+    showScreen('dashboard');
+    updateStatusBadge();
+}
+
+// Show a specific screen
+function showScreen(screenId) {
+    // Hide all screens
+    document.querySelectorAll('[id$="-screen"]').forEach(screen => {
+        screen.classList.add('hidden');
+    });
+    
+    // Show requested screen
+    document.getElementById(`${screenId}-screen`)?.classList.remove('hidden');
+    
+    // Update active nav button
+    navButtons.forEach(btn => {
+        if (btn.dataset.screen === screenId) {
+            btn.classList.add('text-indigo-600');
+            btn.classList.remove('text-gray-500');
+        } else {
+            btn.classList.remove('text-indigo-600');
+            btn.classList.add('text-gray-500');
+        }
+    });
+}
+
+// Update status badge
+function updateStatusBadge() {
+    const pendingExams = state.exams.filter(exam => 
+        !state.submissions.some(sub => sub.examId === exam.id)
+    );
+    
+    if (pendingExams.length > 0) {
+        statusBadge.textContent = `${pendingExams.length} pending exam${pendingExams.length > 1 ? 's' : ''}`;
+        statusBadge.className = 'text-xs px-2 py-1 bg-amber-100 text-amber-800 rounded-full';
+    } else {
+        statusBadge.textContent = 'No active exams';
+        statusBadge.className = 'text-xs px-2 py-1 bg-emerald-100 text-emerald-800 rounded-full';
+    }
+}
+
+// Render exam list
+function renderExamList() {
+    examList.innerHTML = '';
+    
+    state.exams.forEach(exam => {
+        const isSubmitted = state.submissions.some(sub => sub.examId === exam.id);
+        
+        const examCard = document.createElement('div');
+        examCard.className = 'bg-white rounded-xl shadow-sm p-4';
+        examCard.innerHTML = `
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-medium text-gray-800">${exam.subject}</h3>
+                    <p class="text-sm text-gray-500">${new Date(exam.date).toLocaleDateString()} • ${exam.duration} min</p>
+                </div>
+                ${isSubmitted ? 
+                    '<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Submitted</span>' : 
+                    `<button data-exam-id="${exam.id}" class="take-exam-btn text-sm bg-indigo-600 text-white px-3 py-1 rounded-lg hover:bg-indigo-700">
+                        Take Exam
+                    </button>`
+                }
+            </div>
+        `;
+        
+        examList.appendChild(examCard);
+    });
+    
+    // Add event listeners to take exam buttons
+    document.querySelectorAll('.take-exam-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const examId = parseInt(btn.dataset.examId);
+            startExam(examId);
+        });
+    });
+}
+
+// Start an exam
+function startExam(examId) {
+    const exam = state.exams.find(e => e.id === examId);
+    if (!exam) return;
+    
+    state.currentExam = exam;
+    state.examStartTime = new Date();
+    state.suspiciousActivities = 0;
+    
+    // Setup exam UI
+    examTitle.textContent = exam.subject;
+    examQuestions.innerHTML = '';
+    
+    // Render questions
+    exam.questions.forEach((q, index) => {
+        const questionCard = document.createElement('div');
+        questionCard.className = 'question-card bg-white rounded-xl shadow-sm p-4';
+        
+        if (q.type === 'multiple') {
+            questionCard.innerHTML = `
+                <h4 class="font-medium mb-3">${index + 1}. ${q.text}</h4>
+                <div class="space-y-2">
+                    ${q.options.map((opt, i) => `
+                        <label class="flex items-center space-x-3 cursor-pointer">
+                            <input type="radio" name="q${q.id}" value="${i}" class="w-4 h-4 text-indigo-600">
+                            <span>${opt}</span>
+                        </label>
+                    `).join('')}
+                </div>
+            `;
+        } else {
+            questionCard.innerHTML = `
+                <h4 class="font-medium mb-3">${index + 1}. ${q.text}</h4>
+                <input type="text" name="q${q.id}" 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg">
+            `;
+        }
+        
+        examQuestions.appendChild(questionCard);
+    });
+    
+    // Start timer
+    const durationInSeconds = exam.duration * 60;
+    let remainingTime = durationInSeconds;
+    
+    updateTimerDisplay(remainingTime);
+    
+    state.examTimer = setInterval(() => {
+        remainingTime--;
+        updateTimerDisplay(remainingTime);
+        
+        if (remainingTime <= 0) {
+            clearInterval(state.examTimer);
+            submitExam();
+        }
+    }, 1000);
+    
+    // Setup anti-cheat
+    setupAntiCheat();
+    
+    // Show exam screen
+    showScreen('exam');
+}
+
+// Update timer display
+function updateTimerDisplay(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    examTimer.textContent = `${mins}:${secs < 10 ? '0' + secs : secs}`;
+    
+    if (seconds < 60) {
+        examTimer.classList.add('timer-urgent');
+    } else {
+        examTimer.classList.remove('timer-urgent');
+    }
+    
+    // Update progress bar
+    const examDuration = state.currentExam.duration * 60;
+    const percent = (seconds / examDuration) * 100;
+    examProgress.style.width = `${percent}%`;
+}
+// Setup anti-cheat measures
+function setupAntiCheat() {
+    // Add exam layout class
+    document.getElementById('app').classList.add('exam-layout');
+// Detect tab switching
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState !== 'visible') {
+            handleSuspiciousActivity('Tab switched');
+        }
+    });
+    
+    // Disable right click
+    document.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        handleSuspiciousActivity('Right click attempt');
+    });
+    
+    // Disable text selection
+    document.addEventListener('selectstart', (e) => {
+        e.preventDefault();
+        handleSuspiciousActivity('Text selection attempt');
+    });
+    
+    // Disable copy/paste
+    document.addEventListener('copy', (e) => {
+        e.preventDefault();
+        handleSuspiciousActivity('Copy attempt');
+    });
+    
+    document.addEventListener('paste', (e) => {
+        e.preventDefault();
+        handleSuspiciousActivity('Paste attempt');
+    });
+    
+    // Try to access camera
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(stream => {
+                // Camera access granted
+                console.log('Camera access granted for monitoring');
+            })
+            .catch(err => {
+                console.log('Camera access denied or not available');
+            });
+    }
+}
+
+// Handle suspicious activity
+function handleSuspiciousActivity(reason) {
+    state.suspiciousActivities++;
+    
+    // Show warning
+    const warning = document.createElement('div');
+    warning.className = 'warning-flash fixed top-4 left-1/2 transform -translate-x-1/2 bg-white shadow-md rounded-lg px-4 py-2 z-50';
+    warning.textContent = `⚠️ Suspicious activity detected: ${reason}`;
+    document.body.appendChild(warning);
+    
+    setTimeout(() => {
+        warning.remove();
+    }, 3000);
+}
+// Submit exam
+function submitExam() {
+    // Remove exam layout class
+    document.getElementById('app').classList.remove('exam-layout');
+if (!state.currentExam) return;
+    
+    clearInterval(state.examTimer);
+    
+    // Create submission
+    const submission = {
+        examId: state.currentExam.id,
+        subject: state.currentExam.subject,
+        submittedAt: new Date().toISOString(),
+        suspiciousCount: state.suspiciousActivities
+    };
+    
+    // Save to state and localStorage
+    state.submissions.push(submission);
+    localStorage.setItem('examGuardSubmissions', JSON.stringify(state.submissions));
+    
+    // Update UI
+    updateStatusBadge();
+    renderExamList();
+    loadSubmissions();
+    
+    // Show pending screen
+    showScreen('pending');
+}
+
+// Load submissions from localStorage
+function loadSubmissions() {
+    const savedSubmissions = localStorage.getItem('examGuardSubmissions');
+    if (savedSubmissions) {
+        state.submissions = JSON.parse(savedSubmissions);
+    }
+    
+    renderSubmissions();
+}
+
+// Render submissions list
+function renderSubmissions() {
+    submissionList.innerHTML = '';
+    
+    if (state.submissions.length === 0) {
+        submissionList.innerHTML = '<p class="text-gray-500 text-center py-4">No submissions yet</p>';
+        return;
+    }
+    
+    state.submissions.forEach(sub => {
+        const subCard = document.createElement('div');
+        subCard.className = 'bg-white rounded-xl shadow-sm p-4';
+        subCard.innerHTML = `
+            <div class="flex justify-between items-start">
+                <div>
+                    <h3 class="font-medium text-gray-800">${sub.subject}</h3>
+                    <p class="text-sm text-gray-500">Submitted: ${new Date(sub.submittedAt).toLocaleString()}</p>
+                </div>
+                <div class="text-right">
+                    <span class="block text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full mb-1">Pending Review</span>
+                    ${sub.suspiciousCount > 0 ? 
+                        `<span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">
+                            ${sub.suspiciousCount} suspicious event${sub.suspiciousCount > 1 ? 's' : ''}
+                        </span>` : 
+                        `<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">
+                            No issues detected
+                        </span>`
+                    }
+                </div>
+            </div>
+        `;
+        
+        submissionList.appendChild(subCard);
+    });
+}
+
+// Setup event listeners
+function setupEventListeners() {
+    // Login form
+    loginForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const studentId = document.getElementById('student-id').value;
+        const password = document.getElementById('password').value;
+        
+        // Mock authentication
+        state.currentStudent = {
+            id: studentId,
+            name: `Student ${studentId}`,
+            email: `student${studentId}@example.com`
+        };
+        
+        // Save to localStorage
+        localStorage.setItem('examGuardStudent', JSON.stringify(state.currentStudent));
+        
+        // Show app
+        showApp();
+    });
+    
+    // Forgot password
+    forgotPasswordBtn.addEventListener('click', () => {
+        forgotModal.classList.remove('hidden');
+    });
+    
+    // Cancel reset
+    document.getElementById('cancel-reset').addEventListener('click', () => {
+        forgotModal.classList.add('hidden');
+    });
+    
+    // Submit reset
+    document.getElementById('submit-reset').addEventListener('click', () => {
+        const email = document.getElementById('reset-email').value;
+        if (email) {
+            forgotModal.classList.add('hidden');
+            resetConfirmation.classList.remove('hidden');
+        }
+    });
+    
+    // Close confirmation
+    document.getElementById('close-confirmation').addEventListener('click', () => {
+        resetConfirmation.classList.add('hidden');
+    });
+    
+    // Navigation buttons
+    navButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            showScreen(btn.dataset.screen);
+        });
+    });
+    
+    // Submit exam button
+    submitExamBtn.addEventListener('click', submitExam);
+    
+    // Logout button
+    logoutBtn.addEventListener('click', () => {
+        localStorage.removeItem('examGuardStudent');
+        showLogin();
+    });
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', init);

index.html

@@ -1,19 +1,206 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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="space-y-6"></div>
+
+                    <div class="fixed bottom-4 left-0 right-0 px-4">
+                        <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="student@example.com" 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>

styles.css

@@ -0,0 +1,70 @@
+/* Base Styles */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+}
+
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.slide-up {
+    animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+/* Question styles */
+.question-card {
+    transition: all 0.2s ease;
+}
+
+.question-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Anti-cheat warnings */
+.warning-flash {
+    animation: warningFlash 0.5s ease 3;
+}
+
+@keyframes warningFlash {
+    0%, 100% { background-color: transparent; }
+    50% { background-color: rgba(239, 68, 68, 0.2); }
+}
+
+/* Exam timer urgent state */
+.timer-urgent {
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}