Hugging Face's logo

Spaces:
program12
/
eduflow-student-hub
Running

App Files Community
program12 commited on
Commit
fd4a429
·
verified ·
1 Parent(s): b699099

student_management/

Browse files

│
├── config/
│ └── database.php
├── includes/
│ ├── header.php
│ └── footer.php
├── students/
│ ├── add.php
│ ├── view.php
│ ├── edit.php
│ └── delete.php
├── index.php
└── style.css

Files changed (5) hide show
  1. README.md +8 -5
  2. index.html +130 -18
  3. students/add.html +143 -0
  4. students/edit.html +138 -0
  5. students/view.html +162 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Eduflow Student Hub
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: EduFlow Student Hub 📚
3
+ colorFrom: red
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,131 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduFlow Student Hub - Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ .glass-effect {
13
+ background: rgba(255, 255, 255, 0.1);
14
+ backdrop-filter: blur(10px);
15
+ border: 1px solid rgba(255, 255, 255, 0.2);
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="min-h-screen gradient-bg">
23
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
24
+
25
+ <!-- Header -->
26
+ <header class="relative z-10 glass-effect text-white shadow-lg">
27
+ <div class="container mx-auto px-4 py-4">
28
+ <div class="flex justify-between items-center">
29
+ <div class="flex items-center space-x-2">
30
+ <i data-feather="book-open" class="w-8 h-8"></i>
31
+ <h1 class="text-2xl font-bold">EduFlow Student Hub</h1>
32
+ </div>
33
+ <nav class="hidden md:flex space-x-6">
34
+ <a href="index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
35
+ <a href="students/view.html" class="hover:text-blue-200 transition-colors">Students</a>
36
+ <a href="students/add.html" class="hover:text-blue-200 transition-colors">Add Student</a>
37
+ </nav>
38
+ <button class="md:hidden">
39
+ <i data-feather="menu" class="w-6 h-6"></i>
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- Main Content -->
46
+ <main class="relative z-10 container mx-auto px-4 py-8">
47
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
48
+ <!-- Stats Cards -->
49
+ <div class="glass-effect rounded-xl p-6 text-white">
50
+ <div class="flex items-center justify-between">
51
+ <div>
52
+ <p class="text-sm opacity-80">Total Students</p>
53
+ <h3 class="text-3xl font-bold">1,247</h3>
54
+ </div>
55
+ <i data-feather="users" class="w-8 h-8 text-blue-200"></i>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="glass-effect rounded-xl p-6 text-white">
60
+ <div class="flex items-center justify-between">
61
+ <div>
62
+ <p class="text-sm opacity-80">Active Courses</p>
63
+ <h3 class="text-3xl font-bold">42</h3>
64
+ </div>
65
+ <i data-feather="book" class="w-8 h-8 text-green-200"></i>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="glass-effect rounded-xl p-6 text-white">
70
+ <div class="flex items-center justify-between">
71
+ <div>
72
+ <p class="text-sm opacity-80">New This Month</p>
73
+ <h3 class="text-3xl font-bold">28</h3>
74
+ </div>
75
+ <i data-feather="trending-up" class="w-8 h-8 text-yellow-200"></i>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="glass-effect rounded-xl p-6 text-white">
80
+ <div class="flex items-center justify-between">
81
+ <div>
82
+ <p class="text-sm opacity-80">Graduated</p>
83
+ <h3 class="text-3xl font-bold">856</h3>
84
+ </div>
85
+ <i data-feather="award" class="w-8 h-8 text-purple-200"></i>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Quick Actions -->
91
+ <div class="glass-effect rounded-xl p-6 text-white">
92
+ <h2 class="text-xl font-bold mb-6">Quick Actions</h2>
93
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
94
+ <a href="students/add.html" class="flex flex-col items-center justify-center p-4 bg-blue-500/20 rounded-lg hover:bg-blue-500/30 transition-colors">
95
+ <i data-feather="user-plus" class="w-8 h-8 mb-2"></i>
96
+ <span>Add Student</span>
97
+ </a>
98
+ <a href="students/view.html" class="flex flex-col items-center justify-center p-4 bg-green-500/20 rounded-lg hover:bg-green-500/30 transition-colors">
99
+ <i data-feather="list" class="w-8 h-8 mb-2"></i>
100
+ <span>View All</span>
101
+ </a>
102
+ <a href="#" class="flex flex-col items-center justify-center p-4 bg-purple-500/20 rounded-lg hover:bg-purple-500/30 transition-colors">
103
+ <i data-feather="bar-chart-2" class="w-8 h-8 mb-2"></i>
104
+ <span>Reports</span>
105
+ </a>
106
+ <a href="#" class="flex flex-col items-center justify-center p-4 bg-orange-500/20 rounded-lg hover:bg-orange-500/30 transition-colors">
107
+ <i data-feather="settings" class="w-8 h-8 mb-2"></i>
108
+ <span>Settings</span>
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </main>
113
+
114
+ <script>
115
+ VANTA.GLOBE({
116
+ el: "#vanta-bg",
117
+ mouseControls: true,
118
+ touchControls: true,
119
+ gyroControls: false,
120
+ minHeight: 200.00,
121
+ minWidth: 200.00,
122
+ scale: 1.00,
123
+ scaleMobile: 1.00,
124
+ color: 0x667eea,
125
+ backgroundColor: 0x764ba2
126
+ });
127
+
128
+ feather.replace();
129
+ </script>
130
+ </body>
131
  </html>
students/add.html ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Add Student - EduFlow Student Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .glass-effect {
12
+ background: rgba(255, 255, 255, 0.1);
13
+ backdrop-filter: blur(10px);
14
+ border: 1px solid rgba(255, 255, 255, 0.2);
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="min-h-screen gradient-bg">
22
+ <!-- Header -->
23
+ <header class="glass-effect text-white shadow-lg">
24
+ <div class="container mx-auto px-4 py-4">
25
+ <div class="flex justify-between items-center">
26
+ <div class="flex items-center space-x-2">
27
+ <i data-feather="book-open" class="w-8 h-8"></i>
28
+ <h1 class="text-2xl font-bold">EduFlow Student Hub</h1>
29
+ </div>
30
+ <nav class="hidden md:flex space-x-6">
31
+ <a href="../index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
32
+ <a href="view.html" class="hover:text-blue-200 transition-colors">Students</a>
33
+ <a href="add.html" class="text-blue-200 font-semibold">Add Student</a>
34
+ </nav>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu" class="w-6 h-6"></i>
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Main Content -->
43
+ <main class="container mx-auto px-4 py-8">
44
+ <div class="max-w-2xl mx-auto">
45
+ <div class="glass-effect rounded-xl p-6 text-white">
46
+ <div class="flex items-center space-x-2 mb-6">
47
+ <i data-feather="user-plus" class="w-6 h-6"></i>
48
+ <h2 class="text-2xl font-bold">Add New Student</h2>
49
+ </div>
50
+
51
+ <form id="addStudentForm" class="space-y-6">
52
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
53
+ <div>
54
+ <label class="block text-sm font-medium mb-2">First Name</label>
55
+ <input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
56
+ </div>
57
+ <div>
58
+ <label class="block text-sm font-medium mb-2">Last Name</label>
59
+ <input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
60
+ </div>
61
+ </div>
62
+
63
+ <div>
64
+ <label class="block text-sm font-medium mb-2">Email Address</label>
65
+ <input type="email" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
66
+ </div>
67
+
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
69
+ <div>
70
+ <label class="block text-sm font-medium mb-2">Student ID</label>
71
+ <input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
72
+ </div>
73
+ <div>
74
+ <label class="block text-sm font-medium mb-2">Phone Number</label>
75
+ <input type="tel" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
76
+ </div>
77
+ </div>
78
+
79
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
80
+ <div>
81
+ <label class="block text-sm font-medium mb-2">Course</label>
82
+ <select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
83
+ <option value="">Select Course</option>
84
+ <option value="cs">Computer Science</option>
85
+ <option value="math">Mathematics</option>
86
+ <option value="phy">Physics</option>
87
+ <option value="chem">Chemistry</option>
88
+ <option value="bio">Biology</option>
89
+ </select>
90
+ </div>
91
+ <div>
92
+ <label class="block text-sm font-medium mb-2">Year</label>
93
+ <select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
94
+ <option value="">Select Year</option>
95
+ <option value="1">Year 1</option>
96
+ <option value="2">Year 2</option>
97
+ <option value="3">Year 3</option>
98
+ <option value="4">Year 4</option>
99
+ </select>
100
+ </div>
101
+ </div>
102
+
103
+ <div>
104
+ <label class="block text-sm font-medium mb-2">Address</label>
105
+ <textarea rows="3" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300"></textarea>
106
+ </div>
107
+
108
+ <div class="flex items-center space-x-2">
109
+ <input type="checkbox" id="activeStatus" checked class="rounded bg-white/10 border-white/20">
110
+ <label for="activeStatus" class="text-sm">Active Student</label>
111
+ </div>
112
+
113
+ <div class="flex space-x-4 pt-4">
114
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
115
+ <i data-feather="save" class="w-4 h-4"></i>
116
+ <span>Save Student</span>
117
+ </button>
118
+ <a href="view.html" class="bg-white/10 hover:bg-white/20 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
119
+ <i data-feather="x" class="w-4 h-4"></i>
120
+ <span>Cancel</span>
121
+ </a>
122
+ </div>
123
+ </form>
124
+ </div>
125
+ </div>
126
+ </main>
127
+
128
+ <script>
129
+ document.getElementById('addStudentForm').addEventListener('submit', function(e) {
130
+ e.preventDefault();
131
+
132
+ // Simulate form submission
133
+ const formData = new FormData(this);
134
+ const studentData = Object.fromEntries(formData);
135
+
136
+ alert('Student added successfully!');
137
+ window.location.href = 'view.html';
138
+ });
139
+
140
+ feather.replace();
141
+ </script>
142
+ </body>
143
+ </html>
students/edit.html ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Edit Student - EduFlow Student Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .glass-effect {
12
+ background: rgba(255, 255, 255, 0.1);
13
+ backdrop-filter: blur(10px);
14
+ border: 1px solid rgba(255, 255, 255, 0.2);
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="min-h-screen gradient-bg">
22
+ <!-- Header -->
23
+ <header class="glass-effect text-white shadow-lg">
24
+ <div class="container mx-auto px-4 py-4">
25
+ <div class="flex justify-between items-center">
26
+ <div class="flex items-center space-x-2">
27
+ <i data-feather="book-open" class="w-8 h-8"></i>
28
+ <h1 class="text-2xl font-bold">EduFlow Student Hub</h1>
29
+ </div>
30
+ <nav class="hidden md:flex space-x-6">
31
+ <a href="../index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
32
+ <a href="view.html" class="hover:text-blue-200 transition-colors">Students</a>
33
+ <a href="add.html" class="hover:text-blue-200 transition-colors">Add Student</a>
34
+ </nav>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu" class="w-6 h-6"></i>
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Main Content -->
43
+ <main class="container mx-auto px-4 py-8">
44
+ <div class="max-w-2xl mx-auto">
45
+ <div class="glass-effect rounded-xl p-6 text-white">
46
+ <div class="flex items-center space-x-2 mb-6">
47
+ <i data-feather="edit" class="w-6 h-6"></i>
48
+ <h2 class="text-2xl font-bold">Edit Student</h2>
49
+ </div>
50
+
51
+ <form id="editStudentForm" class="space-y-6">
52
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
53
+ <div>
54
+ <label class="block text-sm font-medium mb-2">First Name</label>
55
+ <input type="text" value="John" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
56
+ </div>
57
+ <div>
58
+ <label class="block text-sm font-medium mb-2">Last Name</label>
59
+ <input type="text" value="Smith" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
60
+ </div>
61
+ </div>
62
+
63
+ <div>
64
+ <label class="block text-sm font-medium mb-2">Email Address</label>
65
+ <input type="email" value="[email protected]" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
66
+ </div>
67
+
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
69
+ <div>
70
+ <label class="block text-sm font-medium mb-2">Student ID</label>
71
+ <input type="text" value="STU001" required readonly class="w-full px-4 py-2 bg-white/5 border border-white/20 rounded-lg text-gray-300">
72
+ </div>
73
+ <div>
74
+ <label class="block text-sm font-medium mb-2">Phone Number</label>
75
+ <input type="tel" value="+1 (555) 123-4567" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
76
+ </div>
77
+ </div>
78
+
79
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
80
+ <div>
81
+ <label class="block text-sm font-medium mb-2">Course</label>
82
+ <select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
83
+ <option value="cs" selected>Computer Science</option>
84
+ <option value="math">Mathematics</option>
85
+ <option value="phy">Physics</option>
86
+ <option value="chem">Chemistry</option>
87
+ <option value="bio">Biology</option>
88
+ </select>
89
+ </div>
90
+ <div>
91
+ <label class="block text-sm font-medium mb-2">Year</label>
92
+ <select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
93
+ <option value="1">Year 1</option>
94
+ <option value="2">Year 2</option>
95
+ <option value="3" selected>Year 3</option>
96
+ <option value="4">Year 4</option>
97
+ </select>
98
+ </div>
99
+ </div>
100
+
101
+ <div>
102
+ <label class="block text-sm font-medium mb-2">Address</label>
103
+ <textarea rows="3" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">123 University Ave, Campus City, CC 12345</textarea>
104
+ </div>
105
+
106
+ <div class="flex items-center space-x-2">
107
+ <input type="checkbox" id="activeStatus" checked class="rounded bg-white/10 border-white/20">
108
+ <label for="activeStatus" class="text-sm">Active Student</label>
109
+ </div>
110
+
111
+ <div class="flex space-x-4 pt-4">
112
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
113
+ <i data-feather="save" class="w-4 h-4"></i>
114
+ <span>Update Student</span>
115
+ </button>
116
+ <a href="view.html" class="bg-white/10 hover:bg-white/20 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
117
+ <i data-feather="x" class="w-4 h-4"></i>
118
+ <span>Cancel</span>
119
+ </a>
120
+ </div>
121
+ </form>
122
+ </div>
123
+ </div>
124
+ </main>
125
+
126
+ <script>
127
+ document.getElementById('editStudentForm').addEventListener('submit', function(e) {
128
+ e.preventDefault();
129
+
130
+ // Simulate form submission
131
+ alert('Student information updated successfully!');
132
+ window.location.href = 'view.html';
133
+ });
134
+
135
+ feather.replace();
136
+ </script>
137
+ </body>
138
+ </html>
students/view.html ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>View Students - EduFlow Student Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .glass-effect {
12
+ background: rgba(255, 255, 255, 0.1);
13
+ backdrop-filter: blur(10px);
14
+ border: 1px solid rgba(255, 255, 255, 0.2);
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="min-h-screen gradient-bg">
22
+ <!-- Header -->
23
+ <header class="glass-effect text-white shadow-lg">
24
+ <div class="container mx-auto px-4 py-4">
25
+ <div class="flex justify-between items-center">
26
+ <div class="flex items-center space-x-2">
27
+ <i data-feather="book-open" class="w-8 h-8"></i>
28
+ <h1 class="text-2xl font-bold">EduFlow Student Hub</h1>
29
+ </div>
30
+ <nav class="hidden md:flex space-x-6">
31
+ <a href="../index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
32
+ <a href="view.html" class="text-blue-200 font-semibold">Students</a>
33
+ <a href="add.html" class="hover:text-blue-200 transition-colors">Add Student</a>
34
+ </nav>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu" class="w-6 h-6"></i>
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Main Content -->
43
+ <main class="container mx-auto px-4 py-8">
44
+ <div class="glass-effect rounded-xl p-6 text-white">
45
+ <div class="flex justify-between items-center mb-6">
46
+ <h2 class="text-2xl font-bold">Student Directory</h2>
47
+ <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">
48
+ <i data-feather="user-plus" class="w-4 h-4"></i>
49
+ <span>Add New Student</span>
50
+ </a>
51
+ </div>
52
+
53
+ <!-- Search and Filters -->
54
+ <div class="mb-6 flex flex-col sm:flex-row gap-4">
55
+ <div class="flex-1">
56
+ <div class="relative">
57
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
58
+ <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">
59
+ </div>
60
+ </div>
61
+ <select class="bg-white/10 border border-white/20 rounded-lg text-white px-4 py-2 focus:outline-none focus:border-blue-300">
62
+ <option value="">All Courses</option>
63
+ <option value="cs">Computer Science</option>
64
+ <option value="math">Mathematics</option>
65
+ <option value="phy">Physics</option>
66
+ </select>
67
+ </div>
68
+
69
+ <!-- Students Table -->
70
+ <div class="overflow-x-auto">
71
+ <table class="w-full text-white">
72
+ <thead>
73
+ <tr class="border-b border-white/20">
74
+ <th class="text-left py-3 px-4">Student ID</th>
75
+ <th class="text-left py-3 px-4">Name</th>
76
+ <th class="text-left py-3 px-4">Course</th>
77
+ <th class="text-left py-3 px-4">Year</th>
78
+ <th class="text-left py-3 px-4">Status</th>
79
+ <th class="text-left py-3 px-4">Actions</th>
80
+ </tr>
81
+ </thead>
82
+ <tbody id="studentsTable">
83
+ <!-- Students will be loaded here -->
84
+ </tbody>
85
+ </table>
86
+ </div>
87
+
88
+ <!-- Pagination -->
89
+ <div class="flex justify-between items-center mt-6">
90
+ <div class="text-sm text-gray-300">
91
+ Showing 1-10 of 1,247 students
92
+ </div>
93
+ <div class="flex space-x-2">
94
+ <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors">
95
+ Previous
96
+ </button>
97
+ <button class="bg-blue-500 px-3 py-1 rounded">
98
+ 1
99
+ </button>
100
+ <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors">
101
+ 2
102
+ </button>
103
+ <button class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded transition-colors">
104
+ Next
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </main>
110
+
111
+ <script>
112
+ // Mock data for demonstration
113
+ const students = [
114
+ { id: 'STU001', name: 'John Smith', course: 'Computer Science', year: 3, status: 'Active' },
115
+ { id: 'STU002', name: 'Emma Johnson', course: 'Mathematics', year: 2, status: 'Active' },
116
+ { id: 'STU003', name: 'Michael Brown', course: 'Physics', year: 4, status: 'Graduated' },
117
+ { id: 'STU004', name: 'Sarah Davis', course: 'Computer Science', year: 1, status: 'Active' },
118
+ { id: 'STU005', name: 'David Wilson', course: 'Mathematics', year: 3, status: 'Active' }
119
+ ];
120
+
121
+ function loadStudents() {
122
+ const table = document.getElementById('studentsTable');
123
+ table.innerHTML = students.map(student => `
124
+ <tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
125
+ <td class="py-3 px-4">${student.id}</td>
126
+ <td class="py-3 px-4">${student.name}</td>
127
+ <td class="py-3 px-4">${student.course}</td>
128
+ <td class="py-3 px-4">Year ${student.year}</td>
129
+ <td class="py-3 px-4">
130
+ <span class="px-2 py-1 rounded-full text-xs ${
131
+ student.status === 'Active' ? 'bg-green-500/20 text-green-300' :
132
+ 'bg-blue-500/20 text-blue-300'
133
+ }">
134
+ ${student.status}
135
+ </span>
136
+ </td>
137
+ <td class="py-3 px-4">
138
+ <div class="flex space-x-2">
139
+ <a href="edit.html?id=${student.id}" class="text-blue-300 hover:text-blue-200 transition-colors">
140
+ <i data-feather="edit" class="w-4 h-4"></i>
141
+ </a>
142
+ <button onclick="deleteStudent('${student.id}')" class="text-red-300 hover:text-red-200 transition-colors">
143
+ <i data-feather="trash-2" class="w-4 h-4"></i>
144
+ </button>
145
+ </div>
146
+ </td>
147
+ </tr>
148
+ `).join('');
149
+ feather.replace();
150
+ }
151
+
152
+ function deleteStudent(id) {
153
+ if (confirm('Are you sure you want to delete this student?')) {
154
+ alert(`Student ${id} deleted successfully!`);
155
+ loadStudents();
156
+ }
157
+ }
158
+
159
+ loadStudents();
160
+ </script>
161
+ </body>
162
+ </html>