Spaces:
Running
Running
File size: 7,702 Bytes
fd4a429 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!DOCTYPE html>
<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>
|