Hugging Face's logo

Spaces:
program12
/
eduflow-student-hub
Running

App Files Community
eduflow-student-hub
File size: 5,831 Bytes 
fd4a429
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b699099
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduFlow Student Hub - Dashboard</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>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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">
    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
    
    <!-- Header -->
    <header class="relative z-10 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="students/view.html" class="hover:text-blue-200 transition-colors">Students</a>
                    <a href="students/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="relative z-10 container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Stats Cards -->
            <div class="glass-effect rounded-xl p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80">Total Students</p>
                        <h3 class="text-3xl font-bold">1,247</h3>
                    </div>
                    <i data-feather="users" class="w-8 h-8 text-blue-200"></i>
                </div>
            </div>
            
            <div class="glass-effect rounded-xl p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80">Active Courses</p>
                        <h3 class="text-3xl font-bold">42</h3>
                    </div>
                    <i data-feather="book" class="w-8 h-8 text-green-200"></i>
                </div>
            </div>
            
            <div class="glass-effect rounded-xl p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80">New This Month</p>
                        <h3 class="text-3xl font-bold">28</h3>
                    </div>
                    <i data-feather="trending-up" class="w-8 h-8 text-yellow-200"></i>
                </div>
            </div>
            
            <div class="glass-effect rounded-xl p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80">Graduated</p>
                        <h3 class="text-3xl font-bold">856</h3>
                    </div>
                    <i data-feather="award" class="w-8 h-8 text-purple-200"></i>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="glass-effect rounded-xl p-6 text-white">
            <h2 class="text-xl font-bold mb-6">Quick Actions</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <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">
                    <i data-feather="user-plus" class="w-8 h-8 mb-2"></i>
                    <span>Add Student</span>
                </a>
                <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">
                    <i data-feather="list" class="w-8 h-8 mb-2"></i>
                    <span>View All</span>
                </a>
                <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">
                    <i data-feather="bar-chart-2" class="w-8 h-8 mb-2"></i>
                    <span>Reports</span>
                </a>
                <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">
                    <i data-feather="settings" class="w-8 h-8 mb-2"></i>
                    <span>Settings</span>
                </a>
            </div>
        </div>
    </main>

    <script>
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x667eea,
            backgroundColor: 0x764ba2
        });
        
        feather.replace();
    </script>
</body>
</html>