Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>View Students - EduFlow Student Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg"> | |
| <!-- Header --> | |
| <header class="glass-effect text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="book-open" class="w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold">EduFlow Student Hub</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="../index.html" class="hover:text-blue-200 transition-colors">Dashboard</a> | |
| <a href="view.html" class="text-blue-200 font-semibold">Students</a> | |
| <a href="add.html" class="hover:text-blue-200 transition-colors">Add Student</a> | |
| </nav> | |
| <button class="md:hidden"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="glass-effect rounded-xl p-6 text-white"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Student Directory</h2> | |
| <a href="add.html" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors"> | |
| <i data-feather="user-plus" class="w-4 h-4"></i> | |
| <span>Add New Student</span> | |
| </a> | |
| </div> | |
| <!-- Search and Filters --> | |
| <div class="mb-6 flex flex-col sm:flex-row gap-4"> | |
| <div class="flex-1"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i> | |
| <input type="text" placeholder="Search students..." class="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300"> | |
| </div> | |
| </div> | |
| <select class="bg-white/10 border border-white/20 rounded-lg text-white px-4 py-2 focus:outline-none focus:border-blue-300"> | |
| <option value="">All Courses</option> | |
| <option value="cs">Computer Science</option> | |
| <option value="math">Mathematics</option> | |
| <option value="phy">Physics</option> | |
| </select> | |
| </div> | |
| <!-- Students Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-white"> | |
| <thead> | |
| <tr class="border-b border-white/20"> | |
| <th class="text-left py-3 px-4">Student ID</th> | |
| <th class="text-left py-3 px-4">Name</th> | |
| <th class="text-left py-3 px-4">Course</th> | |
| <th class="text-left py-3 px-4">Year</th> | |
| <th class="text-left py-3 px-4">Status</th> | |
| <th class="text-left py-3 px-4">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="studentsTable"> | |
| <!-- Students will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-between items-center mt-6"> | |
| <div class="text-sm text-gray-300"> | |
| Showing 1-10 of 1,247 students | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors"> | |
| Previous | |
| </button> | |
| <button class="bg-blue-500 px-3 py-1 rounded"> | |
| 1 | |
| </button> | |
| <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors"> | |
| 2 | |
| </button> | |
| <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Mock data for demonstration | |
| const students = [ | |
| { id: 'STU001', name: 'John Smith', course: 'Computer Science', year: 3, status: 'Active' }, | |
| { id: 'STU002', name: 'Emma Johnson', course: 'Mathematics', year: 2, status: 'Active' }, | |
| { id: 'STU003', name: 'Michael Brown', course: 'Physics', year: 4, status: 'Graduated' }, | |
| { id: 'STU004', name: 'Sarah Davis', course: 'Computer Science', year: 1, status: 'Active' }, | |
| { id: 'STU005', name: 'David Wilson', course: 'Mathematics', year: 3, status: 'Active' } | |
| ]; | |
| function loadStudents() { | |
| const table = document.getElementById('studentsTable'); | |
| table.innerHTML = students.map(student => ` | |
| <tr class="border-b border-white/10 hover:bg-white/5 transition-colors"> | |
| <td class="py-3 px-4">${student.id}</td> | |
| <td class="py-3 px-4">${student.name}</td> | |
| <td class="py-3 px-4">${student.course}</td> | |
| <td class="py-3 px-4">Year ${student.year}</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-2 py-1 rounded-full text-xs ${ | |
| student.status === 'Active' ? 'bg-green-500/20 text-green-300' : | |
| 'bg-blue-500/20 text-blue-300' | |
| }"> | |
| ${student.status} | |
| </span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <a href="edit.html?id=${student.id}" class="text-blue-300 hover:text-blue-200 transition-colors"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </a> | |
| <button onclick="deleteStudent('${student.id}')" class="text-red-300 hover:text-red-200 transition-colors"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| function deleteStudent(id) { | |
| if (confirm('Are you sure you want to delete this student?')) { | |
| alert(`Student ${id} deleted successfully!`); | |
| loadStudents(); | |
| } | |
| } | |
| loadStudents(); | |
| </script> | |
| </body> | |
| </html> | |