diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,1405 +1,630 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>College Management System</title>
+    <title>Secure Coding Assignment Submission</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.3/ace.js"></script>
     <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .sidebar {
-            transition: all 0.3s ease;
-        }
-        .card {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        }
-        .dark .card:hover {
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-        }
-        .tooltip {
-            position: relative;
-            display: inline-block;
-        }
-        .tooltip .tooltiptext {
-            visibility: hidden;
-            width: 200px;
-            background-color: #555;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -100px;
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .tooltip:hover .tooltiptext {
-            visibility: visible;
-            opacity: 1;
-        }
-        .password-strength-meter {
-            height: 5px;
+        .editor {
+            height: 400px;
             width: 100%;
-            margin-top: 5px;
-            border-radius: 5px;
-            background-color: #e0e0e0;
-        }
-        .dark .password-strength-meter {
-            background-color: #4a5568;
-        }
-        .password-strength-meter-fill {
-            height: 100%;
-            border-radius: 5px;
-            transition: width 0.3s ease, background-color 0.3s ease;
+            font-size: 16px;
         }
-        .sidebar-link.active {
-            background-color: rgba(59, 130, 246, 0.1);
-            border-left: 4px solid #3b82f6;
-        }
-        .dark .sidebar-link.active {
-            background-color: rgba(59, 130, 246, 0.2);
-        }
-        .sidebar-link:hover:not(.active) {
-            background-color: rgba(59, 130, 246, 0.05);
-        }
-        .dark .sidebar-link:hover:not(.active) {
-            background-color: rgba(59, 130, 246, 0.1);
-        }
-        .notification-badge {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-            background-color: #ef4444;
-            color: white;
-            border-radius: 50%;
-            width: 20px;
+        .typewriter-cursor {
+            display: inline-block;
+            width: 10px;
             height: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
+            background-color: #000;
+            animation: blink 1s step-end infinite;
         }
-        .dropdown-menu {
-            display: none;
-            position: absolute;
-            right: 0;
-            background-color: white;
-            min-width: 200px;
-            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-            z-index: 1;
-            border-radius: 0.5rem;
-            overflow: hidden;
-        }
-        .dark .dropdown-menu {
-            background-color: #1f2937;
-            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
-        }
-        .dropdown:hover .dropdown-menu {
-            display: block;
+        @keyframes blink {
+            from, to { background-color: transparent }
+            50% { background-color: #000; }
         }
-        .mobile-menu {
+        .hidden {
             display: none;
         }
-        @media (max-width: 1024px) {
-            .sidebar {
-                transform: translateX(-100%);
-                position: fixed;
-                z-index: 50;
-                height: 100vh;
-                top: 0;
-                left: 0;
-            }
-            .sidebar.active {
-                transform: translateX(0);
-            }
-            .mobile-menu {
-                display: block;
-            }
+        .shake {
+            animation: shake 0.5s;
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20%, 60% { transform: translateX(-5px); }
+            40%, 80% { transform: translateX(5px); }
         }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
-    <script>
-        // Initialize Charts
-        function initCharts() {
-            // Enrollment Chart
-            const enrollmentCtx = document.getElementById('enrollmentChart').getContext('2d');
-            const enrollmentChart = new Chart(enrollmentCtx, {
-                type: 'line',
-                data: {
-                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-                    datasets: [{
-                        label: 'New Students',
-                        data: [45, 60, 75, 55, 80, 90, 110, 95, 120, 105, 90, 70],
-                        borderColor: '#3B82F6',
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        tension: 0.3,
-                        fill: true
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-
-            // Department Chart
-            const departmentCtx = document.getElementById('departmentChart').getContext('2d');
-            const departmentChart = new Chart(departmentCtx, {
-                type: 'doughnut',
-                data: {
-                    labels: ['Computer Science', 'Engineering', 'Business', 'Arts', 'Science'],
-                    datasets: [{
-                        data: [35, 25, 20, 12, 8],
-                        backgroundColor: [
-                            '#3B82F6',
-                            '#6366F1',
-                            '#10B981',
-                            '#F59E0B',
-                            '#EF4444'
-                        ],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'right'
-                        }
-                    },
-                    cutout: '70%'
-                }
-            });
-        }
-
-        // Function to show a specific page and hide others
-        function showPage(pageId) {
-            // Hide all pages
-            document.querySelectorAll('[id$="-page"]').forEach(page => {
-                page.classList.add('hidden');
-            });
-            
-            // Show the requested page
-            document.getElementById(pageId).classList.remove('hidden');
-        }
-
-        // Initialize page navigation and charts
-        document.addEventListener('DOMContentLoaded', function() {
-            initCharts();
-            // Handle login button click
-            document.querySelector('a[href="#login"]').addEventListener('click', function(e) {
-                e.preventDefault();
-                showPage('login-page');
-            });
-
-            // Handle register button click
-            document.querySelector('a[href="#register"]').addEventListener('click', function(e) {
-                e.preventDefault();
-                showPage('register-page');
-            });
-
-            // Handle back to home links
-            document.querySelectorAll('a[href="#landing"]').forEach(link => {
-                link.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    showPage('landing-page');
-                });
-            });
-
-            // Show landing page by default
-            showPage('landing-page');
-        });
-
-        // Password strength checker
-        function checkPasswordStrength(password) {
-            // Implementation remains the same as existing
-        }
-
-        // Registration handler
-        function handleRegistration() {
-            const firstName = document.getElementById('first-name').value;
-            const lastName = document.getElementById('last-name').value;
-            const email = document.getElementById('email').value;
-            const password = document.getElementById('password').value;
-            const confirmPassword = document.getElementById('confirm-password').value;
-            const termsChecked = document.getElementById('terms').checked;
-
-            // Basic validation
-            if (!firstName || !lastName || !email || !password || !confirmPassword) {
-                alert('Please fill in all fields');
-                return;
-            }
-
-            if (password !== confirmPassword) {
-                alert('Passwords do not match');
-                return;
-            }
-
-            if (!termsChecked) {
-                alert('You must agree to the terms and conditions');
-                return;
-            }
-
-            // Here you would typically make an API call to register the user
-            // For now we'll just show a success message and redirect to login
-            alert('Registration successful!');
-            showPage('login-page');
-        }
-    </script>
-
-    <!-- Landing Page -->
-    <div id="landing-page" class="min-h-screen">
-        <!-- Navigation -->
-        <nav class="bg-white dark:bg-gray-800 shadow-sm">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-16">
-                    <div class="flex items-center">
-                        <div class="flex-shrink-0 flex items-center">
-                            <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-2xl mr-2"></i>
-                            <span class="text-xl font-bold text-gray-800 dark:text-white">EduManage</span>
-                        </div>
-                    </div>
-                    <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
-                        <a href="#features" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">Features</a>
-                        <a href="#about" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">About</a>
-                        <a href="#contact" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 text-sm font-medium">Contact</a>
-                        <button onclick="toggleTheme()" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
-                            <i class="fas fa-moon dark:hidden"></i>
-                            <i class="fas fa-sun hidden dark:inline"></i>
-                        </button>
-                        <a href="#login" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                            Login
-                        </a>
-                        <a href="#register" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:text-blue-100 dark:bg-blue-800 dark:hover:bg-blue-700">
-                            Register
-                        </a>
-                    </div>
-                    <div class="-mr-2 flex items-center md:hidden">
-                        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:hover:bg-gray-700" aria-expanded="false">
-                            <span class="sr-only">Open main menu</span>
-                            <i class="fas fa-bars"></i>
-                        </button>
-                    </div>
-                </div>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- App Header -->
+        <header class="bg-blue-600 text-white p-4 rounded-lg shadow-md mb-8">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-bold">Secure Coding Assignment Submission</h1>
+                <div id="appMode" class="bg-blue-800 px-3 py-1 rounded-full text-sm">Student Mode</div>
             </div>
-        </nav>
+        </header>
 
-        <!-- Hero Section -->
-        <div class="relative bg-white dark:bg-gray-900 overflow-hidden">
-            <div class="max-w-7xl mx-auto">
-                <div class="relative z-10 pb-8 bg-white dark:bg-gray-900 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
-                    <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
-                        <div class="sm:text-center lg:text-left">
-                            <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-                                <span class="block">Modern College</span>
-                                <span class="block text-blue-600 dark:text-blue-400">Management System</span>
-                            </h1>
-                            <p class="mt-3 text-base text-gray-500 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
-                                Streamline your academic institution's operations with our comprehensive management solution designed for administrators, faculty, and students.
-                            </p>
-                            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
-                                <div class="rounded-md shadow">
-                                    <a href="#register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
-                                        Get started
-                                    </a>
-                                </div>
-                                <div class="mt-3 sm:mt-0 sm:ml-3">
-                                    <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10 dark:text-blue-100 dark:bg-blue-800 dark:hover:bg-blue-700">
-                                        Learn more
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </main>
-                </div>
-            </div>
-            <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
-                <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="Students studying">
+        <!-- Mode Selector -->
+        <div class="bg-white p-4 rounded-lg shadow-md mb-8">
+            <div class="flex space-x-4">
+                <button id="studentModeBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Student Mode</button>
+                <button id="teacherModeBtn" class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition">Teacher Mode</button>
             </div>
         </div>
 
-        <!-- Dashboard Preview Section -->
-        <div class="py-12 bg-white dark:bg-gray-900">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:text-center">
-                    <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Interactive Dashboard</h2>
-                    <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                        Real-time insights at your fingertips
-                    </p>
-                </div>
-                
-                <div class="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                    <!-- Student Card -->
-                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-xl p-6 text-white">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-sm font-medium">Students</p>
-                                <p class="text-3xl font-bold mt-2">1,245</p>
-                                <p class="text-xs opacity-80 mt-1">+12.5% from last month</p>
-                            </div>
-                            <div class="bg-white bg-opacity-20 p-3 rounded-lg">
-                                <i class="fas fa-users text-xl"></i>
-                            </div>
-                        </div>
-                        <div class="mt-4 h-2 bg-white bg-opacity-30 rounded-full overflow-hidden">
-                            <div class="h-full bg-white" style="width: 75%"></div>
-                        </div>
-                    </div>
-
-                    <!-- Staff Card -->
-                    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-xl p-6 text-white">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-sm font-medium">Staff</p>
-                                <p class="text-3xl font-bold mt-2">87</p>
-                                <p class="text-xs opacity-80 mt-1">+5.2% from last month</p>
-                            </div>
-                            <div class="bg-white bg-opacity-20 p-3 rounded-lg">
-                                <i class="fas fa-chalkboard-teacher text-xl"></i>
-                            </div>
-                        </div>
-                        <div class="mt-4 h-2 bg-white bg-opacity-30 rounded-full overflow-hidden">
-                            <div class="h-full bg-white" style="width: 65%"></div>
-                        </div>
-                    </div>
-
-                    <!-- Courses Card -->
-                    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-xl p-6 text-white">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-sm font-medium">Courses</p>
-                                <p class="text-3xl font-bold mt-2">42</p>
-                                <p class="text-xs opacity-80 mt-1">+3 new this semester</p>
-                            </div>
-                            <div class="bg-white bg-opacity-20 p-3 rounded-lg">
-                                <i class="fas fa-book text-xl"></i>
-                            </div>
-                        </div>
-                        <div class="mt-4 h-2 bg-white bg-opacity-30 rounded-full overflow-hidden">
-                            <div class="h-full bg-white" style="width: 85%"></div>
-                        </div>
-                    </div>
-
-                    <!-- Attendance Card -->
-                    <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl shadow-xl p-6 text-white">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-sm font-medium">Attendance</p>
-                                <p class="text-3xl font-bold mt-2">92%</p>
-                                <p class="text-xs opacity-80 mt-1">-3.1% from yesterday</p>
-                            </div>
-                            <div class="bg-white bg-opacity-20 p-3 rounded-lg">
-                                <i class="fas fa-clipboard-check text-xl"></i>
-                            </div>
-                        </div>
-                        <div class="mt-4 h-2 bg-white bg-opacity-30 rounded-full overflow-hidden">
-                            <div class="h-full bg-white" style="width: 92%"></div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <!-- Chart 1 -->
-                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
-                        <div class="flex justify-between items-center mb-4">
-                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Student Enrollment</h3>
-                            <div class="flex space-x-2">
-                                <button class="px-3 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-full">This Year</button>
-                                <button class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">All Time</button>
-                            </div>
-                        </div>
-                        <div class="h-64">
-                            <canvas id="enrollmentChart"></canvas>
-                        </div>
+        <!-- Student Interface -->
+        <div id="studentInterface" class="bg-white p-6 rounded-lg shadow-md">
+            <!-- Student Info Form -->
+            <div id="studentInfoForm" class="mb-8">
+                <h2 class="text-xl font-semibold mb-4">Student Information</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <label for="rollNumber" class="block text-sm font-medium text-gray-700 mb-1">Roll Number</label>
+                        <input type="text" id="rollNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
-
-                    <!-- Chart 2 -->
-                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
-                        <div class="flex justify-between items-center mb-4">
-                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Department Distribution</h3>
-                            <div class="flex space-x-2">
-                                <button class="px-3 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-full">Students</button>
-                                <button class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">Staff</button>
-                            </div>
-                        </div>
-                        <div class="h-64">
-                            <canvas id="departmentChart"></canvas>
-                        </div>
+                    <div>
+                        <label for="studentName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                        <input type="text" id="studentName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                 </div>
+                <button id="startAssignmentBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Start Assignment</button>
             </div>
-        </div>
 
-        <!-- Features Section -->
-        <div id="features" class="py-12 bg-gray-50 dark:bg-gray-800">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:text-center">
-                    <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Features</h2>
-                    <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                        A better way to manage your institution
-                    </p>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
-                        Comprehensive tools for administrators, faculty, and students.
-                    </p>
-                </div>
-
-                <div class="mt-10">
-                    <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
-                        <!-- Admin Features -->
-                        <div class="relative group">
-                            <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
-                            <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 bg-blue-500 dark:bg-blue-600 rounded-md p-3">
-                                        <i class="fas fa-user-shield text-white"></i>
-                                    </div>
-                                    <div class="ml-5">
-                                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Admin Dashboard</h3>
-                                    </div>
-                                </div>
-                                <div class="mt-5">
-                                    <p class="text-sm text-gray-500 dark:text-gray-300">
-                                        Comprehensive tools for managing students, staff, courses, attendance, fees, and more with powerful reporting and analytics.
-                                    </p>
-                                    <ul class="mt-4 space-y-2">
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Student & Staff Management</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Fees Collection & Reporting</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Tracking</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Leave Approval System</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Staff Features -->
-                        <div class="relative group">
-                            <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-purple-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
-                            <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 bg-purple-500 dark:bg-purple-600 rounded-md p-3">
-                                        <i class="fas fa-chalkboard-teacher text-white"></i>
-                                    </div>
-                                    <div class="ml-5">
-                                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Staff Portal</h3>
-                                    </div>
-                                </div>
-                                <div class="mt-5">
-                                    <p class="text-sm text-gray-500 dark:text-gray-300">
-                                        Tools designed specifically for faculty members to manage their classes, take attendance, submit grades, and communicate with students.
-                                    </p>
-                                    <ul class="mt-4 space-y-2">
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Class & Student Management</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Recording</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Grade Submission</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Leave Application</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Student Features -->
-                        <div class="relative group">
-                            <div class="absolute -inset-1 bg-gradient-to-r from-green-600 to-green-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
-                            <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 bg-green-500 dark:bg-green-600 rounded-md p-3">
-                                        <i class="fas fa-user-graduate text-white"></i>
-                                    </div>
-                                    <div class="ml-5">
-                                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Student Portal</h3>
-                                    </div>
-                                </div>
-                                <div class="mt-5">
-                                    <p class="text-sm text-gray-500 dark:text-gray-300">
-                                        Personalized dashboard for students to view their attendance, grades, timetable, fees, and communicate with faculty.
-                                    </p>
-                                    <ul class="mt-4 space-y-2">
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Attendance Tracking</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Grade Viewing</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Timetable Access</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Fee Payment & Tracking</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
+            <!-- Assignment Area (initially hidden) -->
+            <div id="assignmentArea" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold">Assignment Editor</h2>
+                    <div class="flex items-center space-x-4">
+                        <div>
+                            <label for="languageSelect" class="block text-sm font-medium text-gray-700 mb-1">Language</label>
+                            <select id="languageSelect" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="plaintext">Plain Text</option>
+                                <option value="python">Python</option>
+                                <option value="java">Java</option>
+                                <option value="c_cpp">C/C++</option>
+                                <option value="javascript">JavaScript</option>
+                                <option value="html">HTML</option>
+                                <option value="css">CSS</option>
+                            </select>
                         </div>
-
-                        <!-- General Features -->
-                        <div class="relative group">
-                            <div class="absolute -inset-1 bg-gradient-to-r from-yellow-600 to-yellow-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
-                            <div class="relative bg-white dark:bg-gray-700 rounded-lg p-6 h-full">
-                                <div class="flex items-center">
-                                    <div class="flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 rounded-md p-3">
-                                        <i class="fas fa-cogs text-white"></i>
-                                    </div>
-                                    <div class="ml-5">
-                                        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">System Features</h3>
-                                    </div>
-                                </div>
-                                <div class="mt-5">
-                                    <p class="text-sm text-gray-500 dark:text-gray-300">
-                                        Powerful features that make the system flexible, secure, and easy to use for all stakeholders.
-                                    </p>
-                                    <ul class="mt-4 space-y-2">
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Responsive Design</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Dark/Light Mode</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Data Visualization</p>
-                                        </li>
-                                        <li class="flex items-start">
-                                            <div class="flex-shrink-0">
-                                                <i class="fas fa-check-circle text-green-500"></i>
-                                            </div>
-                                            <p class="ml-2 text-sm text-gray-500 dark:text-gray-300">Secure Authentication</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
+                        <div class="text-sm bg-gray-200 px-3 py-1 rounded-full">
+                            <span id="charCount">0</span> characters typed
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
 
-        <!-- About Section -->
-        <div id="about" class="py-12 bg-white dark:bg-gray-900">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:text-center">
-                    <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">About</h2>
-                    <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                        Transforming education management
-                    </p>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
-                        Our mission is to provide institutions with powerful tools to streamline operations and enhance the educational experience.
-                    </p>
+                <div class="mb-4 p-4 bg-gray-100 rounded-md">
+                    <h3 class="font-medium mb-2">Assignment Instructions:</h3>
+                    <p id="assignmentPrompt" class="text-gray-700">Write a program that prints "Hello, World!" to the console.</p>
                 </div>
 
-                <div class="mt-10">
-                    <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
-                                    <i class="fas fa-rocket"></i>
-                                </div>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Our Vision</h3>
-                                <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
-                                    To revolutionize education management through innovative technology solutions that empower institutions to focus on what matters most - education.
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
-                                    <i class="fas fa-lightbulb"></i>
-                                </div>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Our Approach</h3>
-                                <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
-                                    We combine deep educational expertise with cutting-edge technology to create solutions that are both powerful and intuitive to use.
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
-                                    <i class="fas fa-users"></i>
-                                </div>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">For Institutions</h3>
-                                <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
-                                    Whether you're a small college or a large university, our scalable solutions adapt to your needs and grow with your institution.
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 dark:bg-blue-600 text-white">
-                                    <i class="fas fa-shield-alt"></i>
-                                </div>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Security & Privacy</h3>
-                                <p class="mt-2 text-base text-gray-500 dark:text-gray-300">
-                                    We prioritize the security and privacy of your data with industry-leading encryption and compliance with global data protection standards.
-                                </p>
+                <div class="relative">
+                    <div id="editor" class="editor border border-gray-300 rounded-md"></div>
+                    <div id="typewriterOverlay" class="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center hidden">
+                        <div class="text-center p-8 max-w-lg">
+                            <h3 class="text-xl font-semibold mb-4">Typewriter Mode Active</h3>
+                            <p class="mb-6">You must type your code character by character. Copy-paste is disabled to ensure academic integrity.</p>
+                            <div class="bg-gray-200 p-4 rounded-md mb-6">
+                                <p class="font-mono text-lg"><span id="typedContent"></span><span class="typewriter-cursor"></span></p>
                             </div>
+                            <button id="resumeTypingBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Continue Typing</button>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
 
-        <!-- Contact Section -->
-        <div id="contact" class="py-12 bg-gray-50 dark:bg-gray-800">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:text-center">
-                    <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Contact Us</h2>
-                    <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                        Get in touch
-                    </p>
-                    <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-300 lg:mx-auto">
-                        Have questions or want to learn more? We'd love to hear from you.
-                    </p>
+                <div class="mt-4 flex justify-between items-center">
+                    <div class="text-sm text-gray-600">
+                        <span id="lastSaved"></span>
+                    </div>
+                    <div class="space-x-2">
+                        <button id="submitAssignmentBtn" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition">Submit Assignment</button>
+                        <button id="saveDraftBtn" class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition">Save Draft</button>
+                    </div>
                 </div>
 
-                <div class="mt-10">
-                    <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
-                        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
-                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Contact Information</h3>
-                            <div class="space-y-4">
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-map-marker-alt text-blue-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-base text-gray-500 dark:text-gray-300">123 Education Street, Academic City, AC 12345</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-phone-alt text-blue-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-base text-gray-500 dark:text-gray-300">+1 (555) 123-4567</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-envelope text-blue-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-base text-gray-500 dark:text-gray-300">info@edumanage.com</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-start">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-clock text-blue-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-base text-gray-500 dark:text-gray-300">Monday - Friday: 9:00 AM - 5:00 PM</p>
-                                    </div>
-                                </div>
-                            </div>
+                <div id="studentInfoDisplay" class="mt-6 p-4 bg-gray-100 rounded-md">
+                    <h3 class="font-medium mb-2">Student Information (Locked)</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-sm text-gray-600">Roll Number</p>
+                            <p id="displayRollNumber" class="font-medium"></p>
                         </div>
-
-                        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
-                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Send us a message</h3>
-                            <form class="space-y-4">
-                                <div>
-                                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
-                                    <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
-                                </div>
-                                <div>
-                                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
-                                    <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
-                                </div>
-                                <div>
-                                    <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
-                                    <input type="text" id="subject" name="subject" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
-                                </div>
-                                <div>
-                                    <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
-                                    <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"></textarea>
-                                </div>
-                                <div>
-                                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                        Send Message
-                                    </button>
-                                </div>
-                            </form>
+                        <div>
+                            <p class="text-sm text-gray-600">Full Name</p>
+                            <p id="displayStudentName" class="font-medium"></p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- Footer -->
-        <footer class="bg-gray-800 dark:bg-gray-900">
-            <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3>
-                        <ul class="mt-4 space-y-4">
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Documentation</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Releases</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
-                        <ul class="mt-4 space-y-4">
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
-                        <ul class="mt-4 space-y-4">
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">GDPR</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
-                        <ul class="mt-4 space-y-4">
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">Facebook</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">LinkedIn</a></li>
-                            <li><a href="#" class="text-base text-gray-400 hover:text-white">GitHub</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
-                    <div class="flex space-x-6 md:order-2">
-                        <a href="#" class="text-gray-400 hover:text-gray-300">
-                            <span class="sr-only">Facebook</span>
-                            <i class="fab fa-facebook-f"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-gray-300">
-                            <span class="sr-only">Twitter</span>
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-gray-300">
-                            <span class="sr-only">Instagram</span>
-                            <i class="fab fa-instagram"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-gray-300">
-                            <span class="sr-only">LinkedIn</span>
-                            <i class="fab fa-linkedin-in"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-gray-300">
-                            <span class="sr-only">GitHub</span>
-                            <i class="fab fa-github"></i>
-                        </a>
-                    </div>
-                    <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
-                        &copy; 2023 EduManage. All rights reserved.
-                    </p>
+        <!-- Teacher Interface (initially hidden) -->
+        <div id="teacherInterface" class="bg-white p-6 rounded-lg shadow-md hidden">
+            <h2 class="text-xl font-semibold mb-4">Teacher Dashboard</h2>
+            
+            <div class="mb-6">
+                <label for="assignmentFile" class="block text-sm font-medium text-gray-700 mb-2">Upload Student Assignment</label>
+                <div class="flex items-center space-x-4">
+                    <input type="file" id="assignmentFile" accept=".txt,.json" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <button id="uploadAssignmentBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Upload</button>
                 </div>
+                <p class="text-sm text-gray-500 mt-2">Only assignments created with this app can be viewed.</p>
             </div>
-        </footer>
-    </div>
 
-    <!-- Login Page -->
-    <div id="login-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
-            <div>
-                <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Sign in to your account
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
-                    Or <a href="#register" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">register for a new account</a>
-                </p>
-                <div class="text-center mt-4">
-                    <a href="#landing" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
-                        <i class="fas fa-arrow-left mr-1"></i> Back to home
-                    </a>
+            <div id="assignmentVerification" class="hidden p-4 border rounded-md mb-6">
+                <div class="flex items-center mb-2">
+                    <span id="verificationIcon" class="text-2xl mr-2"></span>
+                    <h3 id="verificationResult" class="font-semibold"></h3>
                 </div>
+                <p id="verificationDetails" class="text-sm"></p>
             </div>
-            <form class="mt-8 space-y-6" onsubmit="event.preventDefault(); handleRegistration()">
-                <input type="hidden" name="remember" value="true">
-                <div class="rounded-md shadow-sm space-y-4">
-                    <div>
-                        <label for="email-address" class="sr-only">Email address</label>
-                        <div class="tooltip w-full">
-                            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
-                            <span class="tooltiptext">Please enter your registered email address</span>
-                        </div>
-                    </div>
-                    <div>
-                        <label for="password" class="sr-only">Password</label>
-                        <div class="tooltip w-full">
-                            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
-                            <span class="tooltiptext">Enter your password (8+ characters)</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center">
-                        <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
-                        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
-                            Remember me
-                        </label>
-                    </div>
-
-                    <div class="text-sm">
-                        <a href="#forgot-password" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
-                            Forgot your password?
-                        </a>
-                    </div>
-                </div>
 
-                <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-                            <i class="fas fa-sign-in-alt"></i>
-                        </span>
-                        Sign in
-                    </button>
-                </div>
-            </form>
-            <div class="mt-6">
-                <div class="relative">
-                    <div class="absolute inset-0 flex items-center">
-                        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
-                    </div>
-                    <div class="relative flex justify-center text-sm">
-                        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
-                            Or continue with
-                        </span>
+            <div id="assignmentViewer" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-medium">Assignment Submission</h3>
+                    <div class="text-sm bg-gray-200 px-3 py-1 rounded-full">
+                        <span id="submissionCharCount">0</span> characters
                     </div>
                 </div>
 
-                <div class="mt-6 grid grid-cols-3 gap-3">
-                    <div>
-                        <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
-                            <span class="sr-only">Sign in with Google</span>
-                            <i class="fab fa-google"></i>
-                        </a>
-                    </div>
-
-                    <div>
-                        <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
-                            <span class="sr-only">Sign in with Microsoft</span>
-                            <i class="fab fa-microsoft"></i>
-                        </a>
-                    </div>
-
-                    <div>
-                        <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
-                            <span class="sr-only">Sign in with GitHub</span>
-                            <i class="fab fa-github"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Registration Page -->
-    <div id="register-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
-            <div>
-                <i class="fas fa-user-plus text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Create a new account
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
-                    Or <a href="#login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">sign in to your existing account</a>
-                </p>
-                <div class="text-center mt-4">
-                    <a href="#landing" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
-                        <i class="fas fa-arrow-left mr-1"></i> Back to home
-                    </a>
-                </div>
-            </div>
-            <form class="mt-8 space-y-6" action="#" method="POST">
-                <div class="rounded-md shadow-sm space-y-4">
+                <div class="mb-4 p-4 bg-gray-100 rounded-md">
+                    <h4 class="font-medium mb-2">Student Information:</h4>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
-                            <label for="first-name" class="sr-only">First name</label>
-                            <div class="tooltip w-full">
-                                <input id="first-name" name="first-name" type="text" autocomplete="given-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md md:rounded-tr-none focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="First name">
-                                <span class="tooltiptext">Enter your first name</span>
-                            </div>
+                            <p class="text-sm text-gray-600">Roll Number</p>
+                            <p id="submissionRollNumber" class="font-medium"></p>
                         </div>
                         <div>
-                            <label for="last-name" class="sr-only">Last name</label>
-                            <div class="tooltip w-full">
-                                <input id="last-name" name="last-name" type="text" autocomplete="family-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md md:rounded-tl-none focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Last name">
-                                <span class="tooltiptext">Enter your last name</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <label for="email" class="sr-only">Email address</label>
-                        <div class="tooltip w-full">
-                            <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
-                            <span id="email-tooltip" class="tooltiptext">Please enter a valid email address</span>
-                        </div>
-                        <p id="email-validation" class="mt-1 text-xs text-gray-500 dark:text-gray-400 hidden">Email must be valid and from an educational institution</p>
-                    </div>
-                    <div>
-                        <label for="password" class="sr-only">Password</label>
-                        <div class="tooltip w-full">
-                            <input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password" onkeyup="checkPasswordStrength(this.value)">
-                            <span class="tooltiptext">Password must be at least 8 characters</span>
-                        </div>
-                        <div class="password-strength-meter mt-1">
-                            <div id="password-strength-meter-fill" class="password-strength-meter-fill" style="width: 0%; background-color: #ef4444;"></div>
+                            <p class="text-sm text-gray-600">Full Name</p>
+                            <p id="submissionStudentName" class="font-medium"></p>
                         </div>
-                        <p id="password-strength-text" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Password strength: Very Weak</p>
-                    </div>
-                    <div>
-                        <label for="confirm-password" class="sr-only">Confirm Password</label>
-                        <div class="tooltip w-full">
-                            <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Confirm Password">
-                            <span class="tooltiptext">Passwords must match</span>
-                        </div>
-                        <p id="password-match" class="mt-1 text-xs text-red-500 dark:text-red-400 hidden">Passwords do not match</p>
                     </div>
                 </div>
 
-                <div class="flex items-center">
-                    <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
-                    <label for="terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
-                        I agree to the <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms of Service</a> and <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
-                    </label>
+                <div class="mb-4 p-4 bg-gray-100 rounded-md">
+                    <h4 class="font-medium mb-2">Assignment Instructions:</h4>
+                    <p id="submissionPrompt" class="text-gray-700"></p>
                 </div>
 
-                <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-                            <i class="fas fa-user-plus"></i>
-                        </span>
-                        Register
-                    </button>
+                <div class="border border-gray-300 rounded-md p-4 bg-white">
+                    <pre id="submissionContent" class="whitespace-pre-wrap font-mono text-sm"></pre>
                 </div>
-            </form>
-        </div>
-    </div>
 
-    <!-- Forgot Password Page -->
-    <div id="forgot-password-page" class="hidden min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
-            <div>
-                <i class="fas fa-key text-blue-600 dark:text-blue-400 text-4xl mx-auto"></i>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Forgot your password?
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
-                    Enter your email and we'll send you a link to reset your password
-                </p>
-            </div>
-            <form class="mt-8 space-y-6" action="#" method="POST">
-                <div class="rounded-md shadow-sm">
-                    <div>
-                        <label for="email" class="sr-only">Email address</label>
-                        <div class="tooltip w-full">
-                            <input id="forgot-email" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Email address">
-                            <span class="tooltiptext">Enter your registered email address</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-                            <i class="fas fa-paper-plane"></i>
-                        </span>
-                        Send Reset Link
-                    </button>
-                </div>
-                <div class="text-center">
-                    <a href="#login" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 text-sm">
-                        Back to login
-                    </a>
+                <div class="mt-4 flex justify-end">
+                    <button id="downloadAssignmentBtn" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition">Download Submission</button>
                 </div>
-            </form>
+            </div>
         </div>
-    </div>
 
-    <!-- Admin Dashboard -->
-    <div id="admin-dashboard" class="hidden min-h-screen bg-gray-50 dark:bg-gray-900">
-        <div class="flex h-full">
-            <!-- Sidebar -->
-            <div class="sidebar bg-white dark:bg-gray-800 w-64 flex-shrink-0 shadow-lg">
-                <div class="p-4 flex items-center border-b border-gray-200 dark:border-gray-700">
-                    <i class="fas fa-graduation-cap text-blue-600 dark:text-blue-400 text-2xl mr-2"></i>
-                    <span class="text-xl font-bold text-gray-800 dark:text-white">EduManage</span>
-                </div>
-                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-                    <div class="flex items-center">
-                        <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin profile">
-                        <div class="ml-3">
-                            <p class="text-sm font-medium text-gray-800 dark:text-white">Dr. John Smith</p>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">Head of Department</p>
-                        </div>
+        <!-- Submission Modal (hidden initially) -->
+        <div id="submissionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+            <div class="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
+                <h3 class="text-xl font-semibold mb-4">Assignment Submitted</h3>
+                <div class="mb-6">
+                    <div class="flex items-center justify-center text-green-500 mb-4">
+                        <i class="fas fa-check-circle text-5xl"></i>
                     </div>
+                    <p class="text-center">Your assignment has been submitted successfully.</p>
+                    <p class="text-center text-sm text-gray-600 mt-2">A digital signature has been embedded in your submission.</p>
+                </div>
+                <div class="flex justify-center">
+                    <button id="closeModalBtn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Close</button>
                 </div>
-                <nav class="p-4 space-y-1">
-                    <a href="#" class="sidebar-link active flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-tachometer-alt mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Dashboard
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-users mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Students
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-chalkboard-teacher mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Staff
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-book mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Courses
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-book-open mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Subjects
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-calendar-alt mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Sessions
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-clipboard-check mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Attendance
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-comment-alt mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Feedback
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-file-invoice-dollar mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Fees Management
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-bell mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Notifications
-                    </a>
-                    <a href="#" class="sidebar-link flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-800 dark:text-gray-200">
-                        <i class="fas fa-cog mr-3 text-blue-600 dark:text-blue-400"></i>
-                        Settings
-                    </a>
-                </nav>
             </div>
+        </div>
+    </div>
 
-            <!-- Main Content -->
-            <div class="flex-1 flex flex-col overflow-hidden">
-                <!-- Top Navigation -->
-                <header class="bg-white dark:bg-gray-800 shadow-sm">
-                    <div class="flex items-center justify-between px-6 py-3">
-                        <div class="flex items-center">
-                            <button class="md:hidden mr-4 text-gray-500 dark:text-gray-400 focus:outline-none">
-                                <i class="fas fa-bars"></i>
-                            </button>
-                            <div class="relative w-64">
-                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                    <i class="fas fa-search text-gray-400"></i>
-                                </span>
-                                <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 dark:focus:placeholder-gray-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search" type="search">
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-4">
-                            <button onclick="toggleTheme()" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
-                                <i class="fas fa-moon dark:hidden"></i>
-                                <i class="fas fa-sun hidden dark:inline"></i>
-                            </button>
-                            <div class="relative">
-                                <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 relative">
-                                    <i class="fas fa-bell"></i>
-                                    <span class="notification-badge">3</span>
-                                </button>
-                            </div>
-                            <div class="dropdown relative">
-                                <button class="flex items-center space-x-2 focus:outline-none">
-                                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin profile">
-                                    <span class="hidden md:inline-block text-sm font-medium text-gray-700 dark:text-gray-200">Dr. John Smith</span>
-                                </button>
-                                <div class="dropdown-menu mt-2 w-48">
-                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
-                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
-                                    <a href="#login" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </header>
-
-                <!-- Main Content Area -->
-                <main class="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-gray-900">
-                    <div class="mb-6">
-                        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Admin Dashboard</h1>
-                        <p class="text-gray-600 dark:text-gray-300">Welcome back, Dr. Smith. Here's what's happening with your institution today.</p>
-                    </div>
-
-                    <!-- Stats Cards -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex items-center">
-                                <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
-                                    <i class="fas fa-users"></i>
-                                </div>
-                                <div class="ml-4">
-                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Students</p>
-                                    <p class="text-2xl font-semibold text-gray-800 dark:text-white">1,245</p>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12.5%</span>
-                                <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last month</span>
-                            </div>
-                        </div>
-
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex items-center">
-                                <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300">
-                                    <i class="fas fa-chalkboard-teacher"></i>
-                                </div>
-                                <div class="ml-4">
-                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Staff</p>
-                                    <p class="text-2xl font-semibold text-gray-800 dark:text-white">87</p>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5.2%</span>
-                                <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last month</span>
-                            </div>
-                        </div>
-
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex items-center">
-                                <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300">
-                                    <i class="fas fa-clipboard-check"></i>
-                                </div>
-                                <div class="ml-4">
-                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Today's Attendance</p>
-                                    <p class="text-2xl font-semibold text-gray-800 dark:text-white">92%</p>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-down"></i> 3.1%</span>
-                                <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from yesterday</span>
-                            </div>
-                        </div>
-
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex items-center">
-                                <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-300">
-                                    <i class="fas fa-file-invoice-dollar"></i>
-                                </div>
-                                <div class="ml-4">
-                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Outstanding Fees</p>
-                                    <p class="text-2xl font-semibold text-gray-800 dark:text-white">$24,560</p>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8.7%</span>
-                                <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">from last week</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Charts Row -->
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                        <!-- Attendance Chart -->
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex justify-between items-center mb-4">
-                                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Attendance Summary</h2>
-                                <div class="relative">
-                                    <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
-                                        <option>This Week</option>
-                                        <option>This Month</option>
-                                        <option>This Semester</option>
-                                    </select>
-                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
-                                        <i class="fas fa-chevron-down text-xs"></i>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="h-64">
-                                <canvas id="attendanceChart"></canvas>
-                            </div>
-                        </div>
-
-                        <!-- Fees Chart -->
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                            <div class="flex justify-between items-center mb-4">
-                                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Fees Collection</h2>
-                                <div class="relative">
-                                    <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
-                                        <option>This Month</option>
-                                        <option>Last Month</option>
-                                        <option>This Semester</option>
-                                    </select>
-                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
-                                        <i class="fas fa-chevron-down text-xs"></i>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="h-64">
-                                <canvas id="feesChart"></canvas>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Recent Activity and Pending Leaves -->
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                        <!-- Recent Activity -->
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow">
-                            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
-                                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Recent Activity</h2>
-                            </div>
-                            <div class="divide-y divide-gray-200 dark:divide-gray-700">
-                                <div class="p-4 flex items-start">
-                                    <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-2">
-                                        <i class="fas fa-user-plus text-blue-600 dark:text-blue-300"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-gray-800 dark:text-white">New student registered</p>
-                                        <p class="text-sm text-gray-500 dark:text-gray-400">Sarah Johnson registered for Computer Science</p>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 hours ago</p>
-                                    </div>
-                                </div>
-                                <div class="p-4 flex items-start">
-                                    <div class="flex-shrink-0 bg-green-100 dark:bg-green-900 rounded-md p-2">
-                                        <i class="fas fa-file-invoice-dollar text-green-600 dark:text-green-300"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-gray-800 dark:text-white">Fee payment received</p>
-                                        <p class="text-sm text-gray-500 dark:text-gray-400">Michael Brown paid $1,200 for semester fees</p>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">5 hours ago</p>
-                                    </div>
-                                </div>
-                                <div class="p-4 flex items-start">
-                                    <div class="flex-shrink-0 bg-purple-100 dark:bg-purple-900 rounded-md p-2">
-                                        <i class="fas fa-chalkboard-teacher text-purple-600 dark:text-purple-300"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-gray-800 dark:text-white">New staff member added</p>
-                                        <p class="text-sm text-gray-500 dark:text-gray-400">Dr. Emily Wilson joined as Professor of Mathematics</p>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">1 day ago</p>
-                                    </div>
-                                </div>
-                                <div class="p-4 flex items-start">
-                                    <div class="flex-shrink-0 bg-yellow-100 dark:bg-yellow-900 rounded-md p-2">
-                                        <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-300"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm font-medium text-gray-800 dark:text-white">Low attendance alert</p>
-                                        <p class="text-sm text-gray-500 dark:text-gray-400">Physics 101 has 65% attendance this week</p>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 days ago</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-center">
-                                <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">View all activity</a>
-                            </div>
-                        </div>
-
-                        <!-- Pending Leaves -->
-                        <div class="card bg-white dark:bg-gray-800 rounded-lg shadow">
-                            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
-                                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Pending Leave Requests</h2>
-                            </div>
-                            <div class="divide-y divide-gray-200 dark:divide-gray-700">
-                                <div class="p-4 flex items-start">
-                                    <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
-                                    <div class="ml-3 flex-1">
-                                        <div class="flex items-center justify-between">
-                                            <p class="text-sm font-medium text-gray-800 dark:text-white">Prof. Jane Smith</p>
-                                            <span class="px-2 inline-flex text-xs
+    <script>
+        // DOM Elements
+        const studentModeBtn = document.getElementById('studentModeBtn');
+        const teacherModeBtn = document.getElementById('teacherModeBtn');
+        const appMode = document.getElementById('appMode');
+        const studentInterface = document.getElementById('studentInterface');
+        const teacherInterface = document.getElementById('teacherInterface');
+        
+        // Student elements
+        const studentInfoForm = document.getElementById('studentInfoForm');
+        const assignmentArea = document.getElementById('assignmentArea');
+        const rollNumberInput = document.getElementById('rollNumber');
+        const studentNameInput = document.getElementById('studentName');
+        const startAssignmentBtn = document.getElementById('startAssignmentBtn');
+        const displayRollNumber = document.getElementById('displayRollNumber');
+        const displayStudentName = document.getElementById('displayStudentName');
+        const languageSelect = document.getElementById('languageSelect');
+        const charCount = document.getElementById('charCount');
+        const submitAssignmentBtn = document.getElementById('submitAssignmentBtn');
+        const saveDraftBtn = document.getElementById('saveDraftBtn');
+        const lastSaved = document.getElementById('lastSaved');
+        const typewriterOverlay = document.getElementById('typewriterOverlay');
+        const typedContent = document.getElementById('typedContent');
+        const resumeTypingBtn = document.getElementById('resumeTypingBtn');
+        const submissionModal = document.getElementById('submissionModal');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        
+        // Teacher elements
+        const assignmentFile = document.getElementById('assignmentFile');
+        const uploadAssignmentBtn = document.getElementById('uploadAssignmentBtn');
+        const assignmentVerification = document.getElementById('assignmentVerification');
+        const verificationIcon = document.getElementById('verificationIcon');
+        const verificationResult = document.getElementById('verificationResult');
+        const verificationDetails = document.getElementById('verificationDetails');
+        const assignmentViewer = document.getElementById('assignmentViewer');
+        const submissionRollNumber = document.getElementById('submissionRollNumber');
+        const submissionStudentName = document.getElementById('submissionStudentName');
+        const submissionPrompt = document.getElementById('submissionPrompt');
+        const submissionContent = document.getElementById('submissionContent');
+        const submissionCharCount = document.getElementById('submissionCharCount');
+        const downloadAssignmentBtn = document.getElementById('downloadAssignmentBtn');
+
+        // App state
+        let studentInfoLocked = false;
+        let editor;
+        let currentContent = '';
+        let typedPosition = 0;
+        let typingTimeout;
+        let lastSaveTime = null;
+        
+        // Initialize ACE Editor
+        function initEditor() {
+            editor = ace.edit("editor");
+            editor.setTheme("ace/theme/chrome");
+            editor.session.setMode("ace/mode/plain_text");
+            editor.setOptions({
+                fontSize: "14px",
+                enableBasicAutocompletion: true,
+                enableLiveAutocompletion: true,
+                showPrintMargin: false
+            });
+            
+            // Disable copy-paste
+            editor.commands.bindKey("Ctrl-V", null);
+            editor.commands.bindKey("Command-V", null);
+            
+            // Track changes
+            editor.session.on('change', function(delta) {
+                if (!studentInfoLocked) return;
+                
+                // If user tries to paste or make large changes
+                if (delta.action === 'insert' && delta.lines.length > 1 || delta.lines[0].length > 10) {
+                    // Revert the change
+                    editor.session.undo();
+                    // Show typewriter overlay
+                    showTypewriterOverlay();
+                    return;
+                }
+                
+                updateCharCount();
+                lastSaveTime = new Date();
+                updateLastSaved();
+            });
+        }
+        
+        // Initialize the app
+        function init() {
+            initEditor();
+            
+            // Mode switching
+            studentModeBtn.addEventListener('click', () => {
+                studentInterface.classList.remove('hidden');
+                teacherInterface.classList.add('hidden');
+                appMode.textContent = 'Student Mode';
+            });
+            
+            teacherModeBtn.addEventListener('click', () => {
+                studentInterface.classList.add('hidden');
+                teacherInterface.classList.remove('hidden');
+                appMode.textContent = 'Teacher Mode';
+            });
+            
+            // Student form
+            startAssignmentBtn.addEventListener('click', () => {
+                const rollNumber = rollNumberInput.value.trim();
+                const studentName = studentNameInput.value.trim();
+                
+                if (!rollNumber || !studentName) {
+                    alert('Please enter both roll number and name');
+                    return;
+                }
+                
+                // Lock student info
+                studentInfoLocked = true;
+                displayRollNumber.textContent = rollNumber;
+                displayStudentName.textContent = studentName;
+                studentInfoForm.classList.add('hidden');
+                assignmentArea.classList.remove('hidden');
+                
+                // Set focus to editor
+                editor.focus();
+            });
+            
+            // Language selection
+            languageSelect.addEventListener('change', () => {
+                const language = languageSelect.value;
+                let mode;
+                
+                switch(language) {
+                    case 'python': mode = 'ace/mode/python'; break;
+                    case 'java': mode = 'ace/mode/java'; break;
+                    case 'c_cpp': mode = 'ace/mode/c_cpp'; break;
+                    case 'javascript': mode = 'ace/mode/javascript'; break;
+                    case 'html': mode = 'ace/mode/html'; break;
+                    case 'css': mode = 'ace/mode/css'; break;
+                    default: mode = 'ace/mode/plain_text';
+                }
+                
+                editor.session.setMode(mode);
+            });
+            
+            // Save draft
+            saveDraftBtn.addEventListener('click', () => {
+                saveDraft();
+            });
+            
+            // Submit assignment
+            submitAssignmentBtn.addEventListener('click', () => {
+                submitAssignment();
+            });
+            
+            // Typewriter mode
+            resumeTypingBtn.addEventListener('click', () => {
+                typewriterOverlay.classList.add('hidden');
+                editor.focus();
+            });
+            
+            // Close modal
+            closeModalBtn.addEventListener('click', () => {
+                submissionModal.classList.add('hidden');
+            });
+            
+            // Teacher functions
+            uploadAssignmentBtn.addEventListener('click', () => {
+                verifyAssignment();
+            });
+            
+            downloadAssignmentBtn.addEventListener('click', () => {
+                downloadSubmission();
+            });
+            
+            // Auto-save every 30 seconds
+            setInterval(() => {
+                if (studentInfoLocked && lastSaveTime) {
+                    saveDraft();
+                }
+            }, 30000);
+            
+            // Initial update
+            updateCharCount();
+            updateLastSaved();
+        }
+        
+        // Show typewriter overlay
+        function showTypewriterOverlay() {
+            currentContent = editor.getValue();
+            typedPosition = 0;
+            typedContent.textContent = '';
+            typewriterOverlay.classList.remove('hidden');
+            
+            // Start typing animation
+            typeNextCharacter();
+        }
+        
+        // Type next character animation
+        function typeNextCharacter() {
+            if (typedPosition < currentContent.length) {
+                typedContent.textContent += currentContent.charAt(typedPosition);
+                typedPosition++;
+                typingTimeout = setTimeout(typeNextCharacter, Math.random() * 100 + 50);
+            }
+        }
+        
+        // Update character count
+        function updateCharCount() {
+            const content = editor.getValue();
+            charCount.textContent = content.length;
+        }
+        
+        // Update last saved time
+        function updateLastSaved() {
+            if (lastSaveTime) {
+                const options = { 
+                    hour: '2-digit', 
+                    minute: '2-digit', 
+                    second: '2-digit',
+                    hour12: true 
+                };
+                lastSaved.textContent = `Last saved: ${lastSaveTime.toLocaleTimeString(undefined, options)}`;
+            } else {
+                lastSaved.textContent = 'Not saved yet';
+            }
+        }
+        
+        // Save draft to localStorage
+        function saveDraft() {
+            if (!studentInfoLocked) return;
+            
+            const assignmentData = {
+                rollNumber: displayRollNumber.textContent,
+                studentName: displayStudentName.textContent,
+                language: languageSelect.value,
+                content: editor.getValue(),
+                prompt: document.getElementById('assignmentPrompt').textContent,
+                timestamp: new Date().toISOString(),
+                signature: generateSignature()
+            };
+            
+            localStorage.setItem('assignmentDraft', JSON.stringify(assignmentData));
+            lastSaveTime = new Date();
+            updateLastSaved();
+            
+            // Show brief feedback
+            saveDraftBtn.textContent = 'Saved!';
+            setTimeout(() => {
+                saveDraftBtn.textContent = 'Save Draft';
+            }, 2000);
+        }
+        
+        // Submit assignment
+        function submitAssignment() {
+            if (!studentInfoLocked) return;
+            
+            const assignmentData = {
+                rollNumber: displayRollNumber.textContent,
+                studentName: displayStudentName.textContent,
+                language: languageSelect.value,
+                content: editor.getValue(),
+                prompt: document.getElementById('assignmentPrompt').textContent,
+                timestamp: new Date().toISOString(),
+                signature: generateSignature()
+            };
+            
+            // In a real app, this would be sent to a server
+            // For demo, we'll just show the modal
+            submissionModal.classList.remove('hidden');
+            
+            // Clear draft
+            localStorage.removeItem('assignmentDraft');
+        }
+        
+        // Generate a unique signature for the assignment
+        function generateSignature() {
+            const data = {
+                rollNumber: displayRollNumber.textContent,
+                studentName: displayStudentName.textContent,
+                content: editor.getValue(),
+                timestamp: new Date().toISOString()
+            };
+            
+            // In a real app, this would be a more secure hash
+            return btoa(JSON.stringify(data)).slice(0, 32);
+        }
+        
+        // Verify assignment (teacher mode)
+        function verifyAssignment() {
+            const file = assignmentFile.files[0];
+            if (!file) {
+                alert('Please select a file to upload');
+                return;
+            }
+            
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const assignmentData = JSON.parse(e.target.result);
+                    
+                    // Check for required fields
+                    if (!assignmentData.rollNumber || !assignmentData.studentName || 
+                        !assignmentData.content || !assignmentData.signature) {
+                        showVerificationResult(false, "Invalid file format");
+                        return;
+                    }
+                    
+                    // Verify signature
+                    const expectedSignature = generateVerificationSignature(assignmentData);
+                    if (assignmentData.signature !== expectedSignature) {
+                        showVerificationResult(false, "Invalid signature - This file was not created with the Secure Coding App");
+                        return;
+                    }
+                    
+                    // Show assignment
+                    showVerificationResult(true, "Valid assignment submission");
+                    displayAssignment(assignmentData);
+                } catch (error) {
+                    showVerificationResult(false, "Error parsing file - Invalid format");
+                }
+            };
+            reader.readAsText(file);
+        }
+        
+        // Generate verification signature
+        function generateVerificationSignature(assignmentData) {
+            // Must match the same logic as generateSignature()
+            const data = {
+                rollNumber: assignmentData.rollNumber,
+                studentName: assignmentData.studentName,
+                content: assignmentData.content,
+                timestamp: assignmentData.timestamp
+            };
+            
+            return btoa(JSON.stringify(data)).slice(0, 32);
+        }
+        
+        // Show verification result
+        function showVerificationResult(isValid, message) {
+            assignmentVerification.classList.remove('hidden');
+            
+            if (isValid) {
+                verificationIcon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
+                verificationResult.textContent = 'Valid Submission';
+                verificationResult.className = 'font-semibold text-green-600';
+            } else {
+                verificationIcon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>';
+                verificationResult.textContent = 'Invalid Submission';
+                verificationResult.className = 'font-semibold text-red-600';
+                assignmentViewer.classList.add('hidden');
+            }
+            
+            verificationDetails.textContent = message;
+        }
+        
+        // Display assignment (teacher mode)
+        function displayAssignment(assignmentData) {
+            submissionRollNumber.textContent = assignmentData.rollNumber;
+            submissionStudentName.textContent = assignmentData.studentName;
+            submissionPrompt.textContent = assignmentData.prompt;
+            submissionContent.textContent = assignmentData.content;
+            submissionCharCount.textContent = assignmentData.content.length;
+            
+            // Set syntax highlighting based on language
+            let languageClass = '';
+            switch(assignmentData.language) {
+                case 'python': languageClass = 'language-python'; break;
+                case 'java': languageClass = 'language-java'; break;
+                case 'c_cpp': languageClass = 'language-cpp'; break;
+                case 'javascript': languageClass = 'language-javascript'; break;
+                case 'html': languageClass = 'language-html'; break;
+                case 'css': languageClass = 'language-css'; break;
+                default: languageClass = '';
+            }
+            
+            submissionContent.className = `whitespace-pre-wrap font-mono text-sm ${languageClass}`;
+            assignmentViewer.classList.remove('hidden');
+        }
+        
+        // Download submission (teacher mode)
+        function downloadSubmission() {
+            if (!assignmentViewer.classList.contains('hidden')) {
+                const assignmentData = {
+                    rollNumber: submissionRollNumber.textContent,
+                    studentName: submissionStudentName.textContent,
+                    language: languageSelect.value,
+                    content: submissionContent.textContent,
+                    prompt: submissionPrompt.textContent,
+                    timestamp: new Date().toISOString(),
+                    signature: generateVerificationSignature({
+                        rollNumber: submissionRollNumber.textContent,
+                        studentName: submissionStudentName.textContent,
+                        content: submissionContent.textContent,
+                        timestamp: new Date().toISOString()
+                    })
+                };
+                
+                const blob = new Blob([JSON.stringify(assignmentData, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `assignment_${assignmentData.rollNumber}_${new Date().toISOString().slice(0, 10)}.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            }
+        }
+        
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Kast-KIIT/cms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
