y2007k/codelockpro-secure-coding-exams

1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Students | CodeLock</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://unpkg.com/feather-icons"></script>9    <style>10        .gradient-bg {11            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);12        }13        .dark body {14            background-color: #111827;15            color: #f3f4f6;16        }17        .dark .bg-white {18            background-color: #1f2937 !important;19        }20    </style>21</head>22<body class="bg-gray-50">23    <!-- Navigation -->24    <nav class="bg-white shadow-sm">25        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">26            <div class="flex justify-between h-16">27                <div class="flex items-center">28                    <div class="flex-shrink-0 flex items-center">29                        <i data-feather="lock" class="text-indigo-600 h-6 w-6"></i>30                        <span class="ml-2 font-bold text-indigo-600">CodeLock</span>31                    </div>32                </div>33                <div class="flex items-center space-x-4">34                    <a href="teacher_dashboard.html" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-300 dark:hover:text-indigo-400">Dashboard</a>35                    <a href="students.html" class="bg-indigo-100 text-indigo-700 px-3 py-2 rounded-md text-sm font-medium dark:bg-indigo-800 dark:text-indigo-200">Students</a>36                    <div class="flex items-center">37                        <img src="http://static.photos/people/200x200/42" class="h-8 w-8 rounded-full" alt="Profile">38                        <span class="ml-2 text-sm font-medium dark:text-gray-300">Prof. Johnson</span>39                    </div>40                </div>41            </div>42        </div>43    </nav>44 45    <!-- Main Content -->46    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">47        <div class="flex justify-between items-center mb-8">48            <h1 class="text-2xl font-bold">Student Management</h1>49            <div class="flex space-x-4">50                <button onclick="showImportDialog()" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md text-sm hover:bg-gray-50 transition dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700">Import Students</button>51                <button onclick="showAddStudentDialog()" class="gradient-bg text-white px-4 py-2 rounded-md text-sm hover:bg-indigo-700 transition">Add Student</button>52            </div>53        </div>54 55        <div class="bg-white rounded-lg shadow-md overflow-hidden">56            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">57                <div>58                    <h2 class="text-lg font-medium">Computer Science 101 - Fall 2023</h2>59                    <p class="text-sm text-gray-600">42 students enrolled</p>60                </div>61                <div class="flex items-center space-x-2">62                    <input type="text" placeholder="Search students..." class="px-3 py-1 border border-gray-300 rounded text-sm">63                    <button class="text-indigo-600 hover:text-indigo-800">64                        <i data-feather="search" class="h-4 w-4"></i>65                    </button>66                </div>67            </div>68 69            <div class="overflow-x-auto">70                <table class="min-w-full divide-y divide-gray-200">71                    <thead class="bg-gray-50">72                        <tr>73                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>74                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>75                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>76                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Average Score</th>77                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>78                        </tr>79                    </thead>80                    <tbody class="bg-white divide-y divide-gray-200" id="studentsTable">81                        <!-- Students will be loaded here -->82                    </tbody>83                </table>84            </div>85 86            <div class="bg-gray-50 px-6 py-3 border-t border-gray-200 flex justify-between items-center">87                <div class="text-sm text-gray-600">Showing 1 to 10 of 42 students</div>88                <div class="flex space-x-2">89                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-100">Previous</button>90                    <button class="px-3 py-1 border border-gray-300 rounded text-sm bg-indigo-600 text-white hover:bg-indigo-700">1</button>91                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-100">2</button>92                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-100">3</button>93                    <button class="px-3 py-1 border border-gray-300 rounded text-sm hover:bg-gray-100">Next</button>94                </div>95            </div>96        </div>97    </div>98 99    <!-- Add Student Modal -->100    <div id="addStudentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">101        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">102            <div class="px-6 py-4 border-b border-gray-200">103                <h3 class="text-lg font-medium">Add New Student</h3>104            </div>105            <div class="p-6">106                <form id="addStudentForm" class="space-y-4">107                    <div>108                        <label class="block text-sm font-medium mb-1">Full Name</label>109                        <input type="text" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">110                    </div>111                    <div>112                        <label class="block text-sm font-medium mb-1">Student ID</label>113                        <input type="text" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">114                    </div>115                    <div>116                        <label class="block text-sm font-medium mb-1">Email</label>117                        <input type="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">118                    </div>119                </form>120            </div>121            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">122                <button onclick="hideAddStudentDialog()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 transition">Cancel</button>123                <button onclick="addStudent()" class="gradient-bg text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition">Add Student</button>124            </div>125        </div>126    </div>127 128    <!-- Import Students Modal -->129    <div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">130        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">131            <div class="px-6 py-4 border-b border-gray-200">132                <h3 class="text-lg font-medium">Import Students</h3>133            </div>134            <div class="p-6">135                <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center">136                    <i data-feather="upload" class="h-10 w-10 text-gray-400 mx-auto"></i>137                    <p class="mt-2 text-sm text-gray-600">Drag and drop CSV file here, or click to browse</p>138                    <input type="file" id="csvFile" class="hidden" accept=".csv">139                    <button onclick="document.getElementById('csvFile').click()" class="mt-4 bg-indigo-100 text-indigo-700 px-4 py-2 rounded-md text-sm hover:bg-indigo-200 transition">Select File</button>140                </div>141                <div class="mt-4 text-xs text-gray-500">142                    CSV format: Student ID, Full Name, Email (one student per line)143                </div>144            </div>145            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">146                <button onclick="hideImportDialog()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 transition">Cancel</button>147                <button onclick="importStudents()" class="gradient-bg text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition">Import</button>148            </div>149        </div>150    </div>151 152    <script>153        // Sample student data154        const students = [155            { name: "Alice Johnson", id: "S1001", email: "alice@uni.edu", score: "92.5%", img: 1 },156            { name: "Bob Smith", id: "S1002", email: "bob@uni.edu", score: "85.3%", img: 2 },157            { name: "Charlie Brown", id: "S1003", email: "charlie@uni.edu", score: "76.8%", img: 3 },158            { name: "Diana Miller", id: "S1004", email: "diana@uni.edu", score: "91.2%", img: 4 },159            { name: "Ethan Wilson", id: "S1005", email: "ethan@uni.edu", score: "88.7%", img: 5 },160            { name: "Fiona Clark", id: "S1006", email: "fiona@uni.edu", score: "79.4%", img: 6 },161            { name: "George Lee", id: "S1007", email: "george@uni.edu", score: "68.9%", img: 7 },162            { name: "Hannah Wright", id: "S1008", email: "hannah@uni.edu", score: "94.1%", img: 8 },163            { name: "Ian Taylor", id: "S1009", email: "ian@uni.edu", score: "82.6%", img: 9 },164            { name: "Julia Martinez", id: "S1010", email: "julia@uni.edu", score: "89.5%", img: 10 }165        ];166 167        // Load students into table168        const studentsTable = document.getElementById('studentsTable');169        students.forEach(student => {170            const row = `171                <tr>172                    <td class="px-6 py-4 whitespace-nowrap">173                        <div class="flex items-center">174                            <div class="flex-shrink-0 h-10 w-10">175                                <img src="http://static.photos/people/200x200/${student.img}" class="h-10 w-10 rounded-full" alt="">176                            </div>177                            <div class="ml-4">178                                <div class="text-sm font-medium text-gray-900">${student.name}</div>179                            </div>180                        </div>181                    </td>182                    <td class="px-6 py-4 whitespace-nowrap">183                        <div class="text-sm text-gray-900">${student.id}</div>184                    </td>185                    <td class="px-6 py-4 whitespace-nowrap">186                        <div class="text-sm text-gray-900">${student.email}</div>187                    </td>188                    <td class="px-6 py-4 whitespace-nowrap">189                        <div class="text-sm text-gray-900">${student.score}</div>190                    </td>191                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192                        <button onclick="viewStudent('${student.id}')" class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>193                        <button onclick="editStudent('${student.id}')" class="text-green-600 hover:text-green-900 mr-3">Edit</button>194                        <button onclick="deleteStudent('${student.id}')" class="text-red-600 hover:text-red-900">Remove</button>195                    </td>196                </tr>197            `;198            studentsTable.insertAdjacentHTML('beforeend', row);199        });200 201        // Modal functions202        function showAddStudentDialog() {203            document.getElementById('addStudentModal').classList.remove('hidden');204        }205 206        function hideAddStudentDialog() {207            document.getElementById('addStudentModal').classList.add('hidden');208        }209 210        function showImportDialog() {211            document.getElementById('importModal').classList.remove('hidden');212        }213 214        function hideImportDialog() {215            document.getElementById('importModal').classList.add('hidden');216        }217 218        // Student management functions219        function addStudent() {220            alert('Student added successfully!');221            hideAddStudentDialog();222            // In a real app, this would add to the table via API223        }224 225        function importStudents() {226            alert('Students imported successfully!');227            hideImportDialog();228            // In a real app, this would parse CSV and add to table via API229        }230 231        function viewStudent(id) {232            alert(`Viewing student with ID: ${id}`);233            // In a real app, this would show detailed view234        }235 236        function editStudent(id) {237            alert(`Editing student with ID: ${id}`);238            // In a real app, this would open edit modal239        }240 241        function deleteStudent(id) {242            if (confirm(`Are you sure you want to remove student ${id}?`)) {243                alert(`Student ${id} removed successfully!`);244                // In a real app, this would remove from table via API245            }246        }247 248        feather.replace();249    </script>250</body>251</html>