Hugging Face's logo

Spaces:
Ishwinder
/
YPI
Running

App Files Community
Ishwinder commited on
Commit
a6c71ec
·
verified ·
1 Parent(s): c52d68d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1262 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webbuilder
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: gray
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: webbuilder
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1262 @@
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>Youth Peer Initiative | School Community Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://code.highcharts.com/maps/highmaps.js"></script>
10
+ <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
11
+ <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ .sidebar {
15
+ transition: all 0.3s;
16
+ }
17
+ .sidebar.collapsed {
18
+ width: 70px;
19
+ }
20
+ .sidebar.collapsed .sidebar-text {
21
+ display: none;
22
+ }
23
+ .sidebar.collapsed .user-info {
24
+ display: none;
25
+ }
26
+ .main-content {
27
+ transition: margin-left 0.3s;
28
+ }
29
+ .dark .dark\:bg-dark-primary {
30
+ background-color: #1a1a2e;
31
+ }
32
+ .dark .dark\:bg-dark-secondary {
33
+ background-color: #16213e;
34
+ }
35
+ .dark .dark\:text-light {
36
+ color: #e2e8f0;
37
+ }
38
+ .dark .dark\:border-dark {
39
+ border-color: #2d3748;
40
+ }
41
+ #usaMap {
42
+ height: 400px;
43
+ width: 100%;
44
+ }
45
+ .tab-content {
46
+ display: none;
47
+ }
48
+ .tab-content.active {
49
+ display: block;
50
+ }
51
+ .club-card:hover {
52
+ transform: translateY(-5px);
53
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
54
+ }
55
+ .notification-item:hover {
56
+ background-color: rgba(124, 58, 237, 0.1);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-white text-gray-800">
61
+ <div class="flex h-screen overflow-hidden">
62
+ <!-- Sidebar -->
63
+ <div class="sidebar bg-purple-800 text-white w-64 flex flex-col">
64
+ <div class="p-4 flex items-center justify-between border-b border-purple-700">
65
+ <div class="flex items-center space-x-2">
66
+ <i class="fas fa-users text-2xl"></i>
67
+ <span class="sidebar-text text-xl font-bold">Youth Peer Initiative</span>
68
+ </div>
69
+ <button id="toggleSidebar" class="text-white focus:outline-none">
70
+ <i class="fas fa-bars"></i>
71
+ </button>
72
+ </div>
73
+
74
+ <!-- User Profile -->
75
+ <div class="user-info p-4 flex flex-col items-center border-b border-purple-700">
76
+ <div class="w-24 h-24 rounded-full bg-white flex items-center justify-center mb-3 overflow-hidden">
77
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover">
78
+ </div>
79
+ <h3 class="font-semibold text-lg">Sarah Johnson</h3>
80
+ <p class="text-purple-200 text-sm">[email protected]</p>
81
+ <div class="mt-2 flex space-x-2">
82
+ <button class="bg-purple-600 hover:bg-purple-700 px极速赛车开奖直播-3 py-1 rounded-full text-xs">
83
+ <i class="fas fa-cog"></i> <span class="sidebar-text">Settings</span>
84
+ </button>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Navigation -->
89
+ <nav class="flex-1 overflow-y-auto">
90
+ <ul>
91
+ <li>
92
+ <a href="#" data-tab="home" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-purple-500 bg-purple-700">
93
+ <i class="fas fa-home mr-3"></i>
94
+ <span class="sidebar-text">Home</span>
95
+ </a>
96
+ </li>
97
+ <li>
98
+ <a href="#" data-tab="files" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
99
+ <i class="fas fa-folder mr-3"></i>
100
+ <span class="sidebar-text">Files</span>
101
+ </a>
102
+ </li>
103
+ <li>
104
+ <a href="#" data-tab="notifications" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
105
+ <i class="fas fa-bell mr-3"></i>
106
+ <span class="sidebar-text">Notifications</span>
107
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
108
+ </a>
109
+ </li>
110
+ <li>
111
+ <a href="#" data-tab="location" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
112
+ <i class="fas fa-map-marker-alt mr-3"></i>
113
+ <span class="sidebar-text">Location</span>
114
+ </a>
115
+ </li>
116
+ <li>
117
+ <a href="#" data-tab="graphs" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
118
+ <i class="fas fa-chart-line mr-3"></i>
119
+ <span class="sidebar-text">Graphs</span>
120
+ </a>
121
+ </li>
122
+ <li>
123
+ <a href="#" data-tab="reports" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
124
+ <i class="fas fa-file-alt mr-3"></i>
125
+ <span class="sidebar-text">Reports</span>
126
+ </a>
127
+ </li>
128
+ <li>
129
+ <a href="#" data-tab="settings" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent">
130
+ <i class="fas fa-cog mr-3"></i>
131
+ <span class="sidebar-text">Settings</span>
132
+ </a>
133
+ </li>
134
+ </ul>
135
+ </nav>
136
+
137
+ <!-- Dark Mode Toggle -->
138
+ <div class="p-4 border-t border-purple-700">
139
+ <button id="darkModeToggle" class="flex items-center justify-between w-full p-2 rounded-lg bg-purple-700 hover:bg-purple-600">
140
+ <div class="flex items-center">
141
+ <i class="fas fa-moon mr-2"></i>
142
+ <span class="sidebar-text">Dark Mode</span>
143
+ </div>
144
+ <div class="w-10 h-5 bg-purple-900 rounded-full relative">
145
+ <div class="toggle-circle absolute w-4 h-4 bg-white rounded-full top-0.5 left-0.5 transition-transform"></div>
146
+ </div>
147
+ </button>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Main Content -->
152
+ <div class="main-content flex-1 overflow-y-auto">
153
+ <!-- Header -->
154
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
155
+ <h1 class="text-2xl font-bold" id="currentTabTitle">Home</h1>
156
+ <div class="flex items-center space-x-4">
157
+ <div class="relative">
158
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-purple-500">
159
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
160
+ </div>
161
+ <div class="flex items-center space-x-2">
162
+ <div class="relative">
163
+ <button class="text-gray-600 focus:极速赛车开奖直播outline-none">
164
+ <i class="fas fa-bell text-xl"></i>
165
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
166
+ </button>
167
+ </div>
168
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
169
+ <span>SJ</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- Tab Contents -->
176
+ <div class="p-6">
177
+ <!-- Home Tab -->
178
+ <div id="home" class="tab-content active">
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
180
+ <div class="bg-white rounded-lg shadow p-6">
181
+ <div class="flex items-center justify-between">
182
+ <div>
183
+ <p class="text-gray-500">Total Clubs</p>
184
+ <h3 class="text-2xl font-bold">142</h3>
185
+ </div>
186
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
187
+ <i class="fas fa-users text-xl"></i>
188
+ </div>
189
+ </div>
190
+ <div class="mt-4">
191
+ <span class="text-green-500 text-sm font-semibold">+12 this month</span>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="bg-white rounded-lg shadow p-6">
196
+ <div class="flex items-center justify-between">
197
+ <div>
198
+ <p class="text-gray-500">Total Schools</p>
199
+ <h3 class="text-2xl font-bold">67</h3>
200
+ </div>
201
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
202
+ <i class="fas fa-school text-xl"></i>
203
+ </div>
204
+ </div>
205
+ <div class="mt-4">
206
+ <span class="text-green-500 text-sm font-semibold">+3 this month</span>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="bg-white rounded-lg shadow p-6">
211
+ <div class="flex items-center justify-between">
212
+ <div>
213
+ <p class="text-gray-500">Total Students</p>
214
+ <h3 class="text-2xl font-bold">8,742</h3>
215
+ </div>
216
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
217
+ <i class="fas fa-user-graduate text-xl"></i>
218
+ </div>
219
+ </div>
220
+ <div class="mt-4">
221
+ <span class="text-green-500 text-sm font-semibold">+324 this month</span>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="bg-white rounded-lg shadow p-6">
226
+ <div class="flex items-center justify-between">
227
+ <div>
228
+ <p class="text-gray-500">Active Projects</p>
229
+ <h3 class="text-2xl font-bold">28</h3>
230
+ </div>
231
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
232
+ <i class="fas fa-project-diagram text-xl"></i>
233
+ </div>
234
+ </div>
235
+ <div class="mt-4">
236
+ <span class="text-green-500 text-sm font-semibold">+5 this month</span>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
242
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
243
+ <div class="flex justify-between items-center mb-4">
244
+ <h2 class="text-lg font-semibold">Schools Location Map</h2>
245
+ <div class="flex space-x-2">
246
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">USA</button>
247
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">State</button>
248
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">Local</button>
249
+ </div>
250
+ </div>
251
+ <div id="usaMap" class="bg-gray-50 rounded-md"></div>
252
+ </div>
253
+
254
+ <div class="bg-white rounded-lg shadow p-6">
255
+ <h2 class="text-lg font-semibold mb-4">Platform Statistics</h2>
256
+ <div class="space-y-4">
257
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
258
+ <div class="flex items-center">
259
+ <div class="p-2 bg-purple-100 rounded-full mr-3">
260
+ <i class="fas fa-chart-line text-purple-600"></i>
261
+ </div>
262
+ <div>
263
+ <p class="text-sm text-gray-500">Engagement Rate</p>
264
+ <p class="font-semibold">45%</p>
265
+ </div>
266
+ </div>
267
+ <span class="text-green-500 text-sm">↑ 5.2%</span>
268
+ </div>
269
+
270
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
271
+ <div class="flex items-center">
272
+ <div class="p-2 bg-blue-100 rounded-full mr-3">
273
+ <i class="fas fa-book text-blue-600"></i>
274
+ </div>
275
+ <div>
276
+ <p class="text-sm text-gray-500">Trainings</p>
277
+ <p class="font-semibold">600</p>
278
+ </div>
279
+ </div>
280
+ <span class="text-green-500 text-sm">↑ 12%</span>
281
+ </div>
282
+
283
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
284
+ <div class="flex items-center">
285
+ <div class="p-2 bg-green-100 rounded-full mr-3">
286
+ <i class="fas fa-comments text-green-600"></i>
287
+ </div>
288
+ <div>
289
+ <p class="text-sm text-gray-500">Messages</p>
290
+ <p class="font-semibold">7,000+</p>
291
+ </div>
292
+ </div>
293
+ <span class="text-green-500 text-sm">↑ 23%</span>
294
+ </div>
295
+
296
+ <div class="flex items-center justify-between p-3 bg-gray极速赛车开奖直播-50 rounded-md">
297
+ <div class="flex items-center">
298
+ <div class="p-2 bg-red-100 rounded-full mr-3">
299
+ <i class="fas fa-running text-red-600"></i>
300
+ </div>
301
+ <div>
302
+ <p class="text-sm text-gray-500">Bounce Rate</p>
303
+ <p class="font-semibold">24%</p>
304
+ </div>
305
+ </div>
306
+ <span class="text-red-500 text-sm">↓ 2.1%</span>
307
+ </div>
308
+
309
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
310
+ <div class="flex items-center">
311
+ <div class="p-2 bg-yellow-100 rounded-full mr-3">
312
+ <i class="fas fa-users text-yellow-600"></i>
313
+ </div>
314
+ <div>
315
+ <p class="text-sm text-gray-500">Visites</p>
316
+ <p class="font-semibold">67K</p>
317
+ </div>
318
+ </div>
319
+ <span class="text-green-500 text-sm">↑ 8.7%</span>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
326
+ <div class="bg-white rounded-lg shadow p-6">
327
+ <h2 class="text-lg font-semibold mb-4">Recent Activities</h2>
328
+ <div class="space-y-4">
329
+ <div class="flex items-start">
330
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
331
+ <i class="fas fa-user-plus text-purple-600"></i>
332
+ </div>
333
+ <div>
334
+ <p class="font-medium">New member joined</p>
335
+ <p class="text-sm text-gray-500">Alex Johnson joined the Coding Club at Lincoln High School</p>
336
+ <p class="text-xs text-gray-400">2 hours ago</极速赛车开奖直播p>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="flex items-start">
341
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
342
+ <极速赛车开奖直播i class="fas fa-calendar-check text-blue-600"></i>
343
+ </div>
344
+ <div>
345
+ <p class="font-medium">New event created</p>
346
+ <p class="text-sm text-gray-500">"Science Fair 2023" event created by STEM Club</p>
347
+ <p class="text-xs text-gray-400">5 hours ago</p>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="flex items-start">
352
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
353
+ <i class="fas fa-comment-dots text-green-600"></i>
354
+ </div>
355
+ <div>
356
+ <p class="font-medium">New discussion</p>
357
+ <p class="text-sm text-gray-500">"Environmental Awareness" discussion started in Eco Club</p>
358
+ <p class="text-xs text-gray-400">1 day ago</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <button class="mt-4 text-purple-600 font-medium">View All Activities →</button>
363
+ </div>
364
+
365
+ <div class="bg-white rounded-lg shadow p-6">
366
+ <h2 class="text-lg font-semibold mb-4">Popular Clubs</h2>
367
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
368
+ <div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer">
369
+ <div class="flex items-center mb-2">
370
+ <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">
371
+ <i class="fas fa-code"></i>
372
+ </div>
373
+ <div>
374
+ <h3 class="font-medium">Coding Club</h3>
375
+ <p class="text-xs text-gray-500">Lincoln High School</p>
376
+ </div>
377
+ </div>
378
+ <div class="flex justify-between text-xs">
379
+ <span class="text-gray-500">45 members</span>
380
+ <span class="text-green-500">Active</span>
381
+ </div>
382
+ </div>
383
+
384
+ <div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer">
385
+ <div class="flex items-center mb-2">
386
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">
387
+ <i class="fas fa-atom"></i>
388
+ </div>
389
+ <div>
390
+ <h3 class="font-medium">STEM Club</h3>
391
+ <p class="text-xs text-gray-500">Jefferson High</p>
392
+ </div>
393
+ </div>
394
+ <div class="flex justify-between text-xs">
395
+ <span class="text-gray-500">32 members</span>
396
+ <span class="text-green-500">Active</span>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer">
401
+ <div class="flex items-center mb-2">
402
+ <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">
403
+ <i class="fas fa-leaf"></i>
404
+ </div>
405
+ <div>
406
+ <h3 class="font-medium">Eco Club</h3>
407
+ <p class="text-xs text-gray-500">Washington High</p>
408
+ </div>
409
+ </div>
410
+ <div class="flex justify-between text-xs">
411
+ <span class="text-gray-500">28 members</span>
412
+ <span class="text-green-500">Active</span>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer">
417
+ <div class="flex items-center mb-2">
418
+ <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center text-white mr-3">
419
+ <i class="fas fa-paint-brush"></i>
420
+ </div>
421
+ <div>
422
+ <h3 class="font-medium">Art Club</h3>
423
+ <p class="text-xs text-gray-500">Roosevelt High</p>
424
+ </div>
425
+ </div>
426
+ <div class="flex justify-between text-xs">
427
+ <span class="text-gray-500">36 members</span>
428
+ <span class="text-green-500">Active</span>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
436
+ <div class="bg-white rounded-lg shadow p-6">
437
+ <h2 class="text-lg font-semibold mb-4">Engagement Overview</h2>
438
+ <div class="h-80">
439
+ <canvas id="engagementChart"></canvas>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="bg-white rounded-lg shadow p-6">
444
+ <h2 class="text-lg font-semibold mb-4">Club Categories</h2>
445
+ <div class="h-80">
446
+ <canvas id="clubCategoriesChart"></canvas>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="bg-white rounded-lg shadow p-6">
452
+ <h2 class="text-lg font-semibold mb-4">Monthly Participation</h2>
453
+ <div class="h-80">
454
+ <canvas id="monthlyParticipationChart"></canvas>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Files Tab -->
460
+ <div id="files" class="tab-content">
461
+ <div class="bg-white rounded-lg shadow p-6">
462
+ <div class="flex justify-between items-center mb-6">
463
+ <h2 class="text-2xl font-bold">Files & Resources</h2>
464
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md flex items-center">
465
+ <i class="fas fa-plus mr-2"></i> Upload File
466
+ </button>
467
+ </div>
468
+
469
+ <div class="mb-6">
470
+ <div class="flex space-x-2">
471
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-md">All Files</button>
472
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Documents</button>
473
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Images</button>
474
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Videos</button>
475
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Audio</button>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
480
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
481
+ <div class="flex items-center mb-3">
482
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
483
+ <i class="fas fa-file-pdf text-blue-600 text-xl"></i>
484
+ </div>
485
+ <div>
486
+ <h3 class="font-medium">Club Guidelines.pdf</h3>
487
+ <p class="text-sm text-gray-500">2.4 MB</p>
488
+ </div>
489
+ </div>
490
+ <div class="flex justify-between text-sm">
491
+ <span class="text-gray-500">Uploaded: 12/05/2023</span>
492
+ <div class="flex space-x-2">
493
+ <button class="text-purple-600 hover:text-purple-800">
494
+ <i class="fas fa-download"></i>
495
+ </button>
496
+ <button class="text-gray-500 hover:text-gray-700">
497
+ <i class="fas fa-trash"></i>
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
504
+ <div class="flex items-center mb-3">
505
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-3">
506
+ <i class="fas fa-file-word text-green-600 text-xl"></i>
507
+ </div>
508
+ <div>
509
+ <h3 class="font-medium">Meeting Notes.docx</h3>
510
+ <p class="text-sm text-gray-500">1.2 MB</p>
511
+ </div>
512
+ </div>
513
+ <div class="flex justify-between text-sm">
514
+ <span class="text-gray-500">Uploaded: 11/28/2023</span>
515
+ <div class="flex space-x-2">
516
+ <button class="text-purple-600 hover:text-purple-800">
517
+ <i class="fas fa-download"></i>
518
+ </button>
519
+ <button class="text-gray-500 hover:text-gray-700">
520
+ <i class="fas fa-trash"></i>
521
+ </button>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
527
+ <div class="flex items-center mb-3">
528
+ <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
529
+ <i class="fas fa-file-excel text-yellow-600 text-xl"></i>
530
+ </div>
531
+ <div>
532
+ <h3 class="font-medium">Budget.xlsx</h3>
533
+ <p class="text-sm text-gray-500">3.1 MB</p>
534
+ </div>
535
+ </div>
536
+ <div class="flex justify-between text-sm">
537
+ <span class="text-gray-500">Uploaded: 11/15/2023</span>
538
+ <div class="flex space-x-2">
539
+ <button class="text-purple-600 hover:text-purple-800">
540
+ <i class="fas fa-download"></i>
541
+ </button>
542
+ <button class="text-gray-500 hover:text-gray-700">
543
+ <i class="fas fa-trash"></i>
544
+ </button>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Notifications Tab -->
553
+ <div id="notifications" class="tab-content">
554
+ <div class="bg-white rounded-lg shadow p-6">
555
+ <div class="flex justify-between items-center mb-6">
556
+ <h2 class="text-2xl font-bold">Notifications</h2>
557
+ <div class="flex space-x-2">
558
+ <button class="px-4 py-2 bg-gray-100 rounded-md">
559
+ <i class="fas fa-filter mr-2"></i> Filter
560
+ </button>
561
+ <button class="px-4 py-2 bg-gray-100 rounded-md">
562
+ <i class="fas fa-check-double mr-2"></i> Mark All Read
563
+ </button>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="space极速赛车开奖直播-y-4">
568
+ <div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors">
569
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4 mt-1">
570
+ <i class="fas fa-users text-purple-600"></i>
571
+ </div>
572
+ <div class="flex-1">
573
+ <div class="flex justify-between items-start">
574
+ <h3 class="font-medium">New Club Request</h3>
575
+ <span class="text-xs text-gray-500">10 min ago</span>
576
+ </div>
577
+ <p class="text-gray-600 mt-1">"Debate Club" creation request from Jefferson High School needs your approval.</p>
578
+ <div class="flex space-x-3 mt-3">
579
+ <button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md">
580
+ Approve
581
+ </button>
582
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-md">
583
+ Decline
584
+ </button>
585
+ </div>
586
+ </div>
587
+ <div class="w-2 h-2 rounded-full bg-red-500 ml-2 mt-2"></div>
588
+ </div>
589
+
590
+ <div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors">
591
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4 mt-1">
592
+ <i class="fas fa-calendar-check text-blue-600"></i>
593
+ </div>
594
+ <div class="flex-1">
595
+ <div class="flex justify-between items-start">
596
+ <h3 class="font-medium">Event Reminder</h3>
597
+ <span class="text-xs text-gray-500">2 hours ago</span>
598
+ </div>
599
+ <p class="text-gray-600 mt-1">"Science Fair 2023" is happening tomorrow at 10:00 AM in the school gym.</p>
600
+ </div>
601
+ <div class="w-2 h-2 rounded-full bg-red-500 ml-2 mt-2"></div>
602
+ </div>
603
+
604
+ <div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors">
605
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4 mt-1">
606
+ <i class="fas fa-comment-dots text-green-600"></i>
607
+ </div>
608
+ <div class="flex-1">
609
+ <div class="flex justify-between items-start">
610
+ <h3 class="font-medium">New Message</h3>
611
+ <span class="text-xs text-gray-500">1 day ago</span>
612
+ </div>
613
+ <p class="text-gray-600 mt-1">You have 3 unread messages in the "Environmental Awareness" discussion.</p>
614
+ <div class="flex space-x-3 mt-3">
615
+ <button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md">
616
+ View Messages
617
+ </button>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Location Tab -->
626
+ <div id="location" class="tab-content">
627
+ <div class="bg-white rounded-lg shadow p-6">
628
+ <div class="flex justify-between items-center mb-6">
629
+ <h2 class="text-2xl font-bold">School Locations</h2>
630
+ <div class="flex space-x-2">
631
+ <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md">
632
+ <i class="fas fa-plus mr-2"></i> Add School
633
+ </button>
634
+ </div>
635
+ </div>
636
+
637
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
638
+ <div class="lg:col-span-2">
639
+ <div id="detailedMap" class="h-96 bg-gray-50 rounded-lg"></div>
640
+ </div>
641
+
642
+ <div class="bg-gray-50 rounded-lg p-4">
643
+ <h3 class="font-semibold mb-4">School Directory</h3>
644
+ <div class="relative mb-4">
645
+ <input type="text" placeholder="Search schools..." class="w-full pl-10 pr-4 py-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-purple-500">
646
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></极速赛车开奖直播i>
647
+ </div>
648
+
649
+ <div class="space-y-3 max-h-80 overflow-y-auto">
650
+ <div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors">
651
+ <div class="flex items-center">
652
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
653
+ <i class="fas fa-school text-purple-600"></i>
654
+ </div>
655
+ <div>
656
+ <h4 class="font-medium">Lincoln High School</h4>
657
+ <p class="text-xs text-gray-500">123 Education St, Springfield</p>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors">
663
+ <div class="flex items-center">
664
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
665
+ <i class="fas fa-school text-blue-600"></i>
666
+ </div>
667
+ <div>
668
+ <h4 class="font-medium">Jefferson High School</h4>
669
+ <p class="text-xs text-gray-500">456 Knowledge Ave, Jefferson</p>
670
+ </div>
671
+ </div>
672
+ </div>
673
+
674
+ <div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors">
675
+ <div class="flex items-center">
676
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
677
+ <i class="fas fa-school text-green-600"></i>
678
+ </div>
679
+ <div>
680
+ <h4 class="font-medium">Washington High School</h4>
681
+ <p class="text-xs text-gray-500">789 Wisdom Blvd, Washington</p>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- Graphs Tab -->
692
+ <div id="graphs" class="tab-content">
693
+ <div class="bg-white rounded-lg shadow p-6">
694
+ <div class="flex justify-between items-center mb-6">
695
+ <h2 class="text-2xl font-bold">Analytics Dashboard</h2>
696
+ <div class="flex space-x-2">
697
+ <button class="px-4 py-2 bg-gray-100 rounded-md">
698
+ <i class="fas fa-calendar mr-2"></i> Last 30 Days
699
+ </button>
700
+ <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md">
701
+ <i class="fas fa-download mr-2"></i> Export
702
+ </button>
703
+ </div>
704
+ </div>
705
+
706
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
707
+ <div class="bg-gray-50 rounded-lg p-4">
708
+ <h3 class="font-semibold mb-4">Club Growth</h3>
709
+ <div class="h-64">
710
+ <canvas id="clubGrowthChart"></canvas>
711
+ </div>
712
+ </div>
713
+
714
+ <div class="bg-gray-50 rounded-lg p-4">
715
+ <h3 class="font-semibold mb-4">Student Participation</h3>
716
+ <div class="h-64">
717
+ <canvas id="participationChart"></canvas>
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
723
+ <div class="bg-gray-50 rounded-lg p-4">
724
+ <h3 class="font-semibold mb-4">Activity Types</h3>
725
+ <div class="h-64">
726
+ <canvas id="activityTypesChart"></canvas>
727
+ </div>
728
+ </div>
729
+
730
+ <div class="bg-gray-50 rounded-lg p-4">
731
+ <h3 class="font-semibold mb-4">User Engagement</h3>
732
+ <div class="h-64">
733
+ <canvas id="userEngagementChart"></canvas>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Reports Tab -->
741
+ <div id="reports" class="tab-content">
742
+ <div class="bg-white rounded-lg shadow p-6">
743
+ <div class="flex justify-between items-center mb-6">
744
+ <h2 class="text-2xl font-bold">Reports</h2>
745
+ <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md flex items-center">
746
+ <i class="fas fa-plus mr-2"></i> Generate Report
747
+ </button>
748
+ </div>
749
+
750
+ <div class="mb-6">
751
+ <div class="flex space-x-2">
752
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-md">All Reports</button>
753
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Monthly</button>
754
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Quarterly</button>
755
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Annual</button>
756
+ <button class="px-4 py-2 bg-gray-100 rounded-md">Custom</button>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="overflow-x-auto">
761
+ <table class="min-w-full divide-y divide-gray-200">
762
+ <thead class="bg-gray-50">
763
+ <tr>
764
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report Name</th>
765
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
766
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Generated By</th>
767
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
768
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
769
+ </tr>
770
+ </thead>
771
+ <tbody class="bg-white divide-y divide-gray-200">
772
+ <tr class="hover:bg-gray-50">
773
+ <td class="px-6 py-4 whitespace-nowrap">
774
+ <div class="flex items-center">
775
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
776
+ <i class="fas fa-file-alt text-purple-600"></i>
777
+ </div>
778
+ <div class="ml-4">
779
+ <div class="text-sm font-medium">Monthly Engagement Report</div>
780
+ <div class="text-sm text-gray-500">May 2023</div>
781
+ </div>
782
+ </div>
783
+ </td>
784
+ <td class="px-6 py-4 whitespace-nowrap">
785
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Monthly</span>
786
+ </td>
787
+ <td class="px-极速赛车开奖直播6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>
788
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06/01/2023</td>
789
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
790
+ <button class="text-purple-600 hover:text-purple-900 mr-3">
791
+ <i class="fas fa-eye"></i> View
792
+ </button>
793
+ <button class="text-blue-600 hover:text-blue-900 mr-3">
794
+ <i class="fas fa-download"></i> Download
795
+ </button>
796
+ <button class="text-red-极速赛车开奖直播600 hover:text-red-900">
797
+ <i class="fas fa-trash"></i> Delete
798
+ </button>
799
+ </td>
800
+ </tr>
801
+
802
+ <tr class="hover:bg-gray-50">
803
+ <td class="px-6 py-4 whitespace-nowrap">
804
+ <div class="flex items-center">
805
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
806
+ <i class="fas fa-file-alt text-blue-600"></i>
807
+ </div>
808
+ <div class="ml-4">
809
+ <div class="text-sm font-medium">Quarterly Performance</div>
810
+ <div class="text-sm text-gray-500">Q2 2023</div>
811
+ </div>
812
+ </div>
813
+ </td>
814
+ <td class="px-6 py-4 whitespace-nowrap">
815
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Quarterly</span>
816
+ </td>
817
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>
818
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">07/15/2023</td>
819
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
820
+ <button class="text-purple-600 hover:text-purple-900 mr-3">
821
+ <i class="fas fa-eye"></i> View
822
+ </button>
823
+ <button class="text-blue-600 hover:text-blue-900 mr-3">
824
+ <i class="fas fa-download"></i> Download
825
+ </button>
826
+ <button class="text-red-600 hover:text-red-900">
827
+ <i class="fas fa-trash"></i> Delete
828
+ </button>
829
+ </td>
830
+ </tr>
831
+ </tbody>
832
+ </table>
833
+ </div>
834
+ </div>
835
+ </div>
836
+
837
+ <!-- Settings Tab -->
838
+ <div id="settings" class="tab-content">
839
+ <div class="bg-white rounded-lg shadow p-6">
840
+ <div class="flex justify-between items-center mb-6">
841
+ <h2 class="text-2xl font-bold">Settings</h2>
842
+ </div>
843
+
844
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
845
+ <div class="lg:col-span-2">
846
+ <div class="bg-gray-50 rounded-lg p-6 mb-6">
847
+ <h3 class="text-lg font-semibold mb-4">Profile Settings</h3>
848
+ <div class="space-y-4">
849
+ <div>
850
+ <label class="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label>
851
+ <div class="flex items-center">
852
+ <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
853
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover">
854
+ </div>
855
+ <div>
856
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm mr-2">
857
+ Change
858
+ </button>
859
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm">
860
+ Remove
861
+ </button>
862
+ </div>
863
+ </div>
864
+ </div>
865
+
866
+ <div>
867
+ <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
868
+ <input type="text" value="Sarah Johnson" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
869
+ </div>
870
+
871
+ <div>
872
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
873
+ <input type="email" value="[email protected]" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
874
+ </div>
875
+
876
+ <div>
877
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
878
+ <input type="password" placeholder="••••••••" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
879
+ </div>
880
+ </div>
881
+ </div>
882
+ </div>
883
+
884
+ <div>
885
+ <div class="bg-gray-50 rounded-lg p-6 mb-6">
886
+ <h3 class="text-lg font-semibold mb-4">Preferences</h3>
887
+ <div class="space-y-4">
888
+ <div>
889
+ <label class="block text-sm font-medium text-gray-700 mb-2">Notification Preferences</label>
890
+ <div class="space-y-2">
891
+ <div class="flex items-center">
892
+ <input id="email-notifications" name="email-notifications" type="checkbox" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
893
+ <label for="email-notifications" class="ml-2 block text-sm text-gray-700">Email Notifications</label>
894
+ </div>
895
+ <div class="flex items-center">
896
+ <input id="push-notifications" name="push-notifications" type="checkbox" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
897
+ <label for="push-notifications" class="ml-2 block text-sm text-gray-700">Push Notifications</label>
898
+ </div>
899
+ </div>
900
+ </div>
901
+
902
+ <div>
903
+ <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
904
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
905
+ <option>English</option>
906
+ <option>Spanish</option>
907
+ <option>French</option>
908
+ </select>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </div>
917
+ </div>
918
+ </div>
919
+
920
+ <script>
921
+ // Tab switching functionality
922
+ document.querySelectorAll('.tab-link').forEach(link => {
923
+ link.addEventListener('click', function(e) {
924
+ e.preventDefault();
925
+
926
+ // Hide all tab contents
927
+ document.querySelectorAll('.tab-content').forEach(content => {
928
+ content.classList.remove('active');
929
+ });
930
+
931
+ // Show the selected tab content
932
+ const tabId = this.getAttribute('data-tab');
933
+ document.getElementById(tabId).classList.add('active');
934
+
935
+ // Update the current tab title
936
+ document.getElementById('currentTabTitle').textContent = this.querySelector('.sidebar-text').textContent;
937
+
938
+ // Update active state in sidebar
939
+ document.querySelectorAll('.tab-link').forEach(tab => {
940
+ tab.classList.remove('border-purple-500', 'bg-purple-700');
941
+ tab.classList.add('border-transparent');
942
+ });
943
+ this.classList.remove('border-transparent');
944
+ this.classList.add('border-purple-500', 'bg-purple-700');
945
+ });
946
+ });
947
+
948
+ // Sidebar toggle functionality
949
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
950
+ document.querySelector('.sidebar').classList.toggle('collapsed');
951
+ document.querySelector('.main-content').classList.toggle('ml-64');
952
+ document.querySelector('.main-content').classList.toggle('ml-20');
953
+ });
954
+
955
+ // Dark mode toggle functionality
956
+ document.getElementById('darkModeToggle').addEventListener('click', function() {
957
+ document.documentElement.classList.toggle('dark');
958
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
959
+ const toggleCircle = document.querySelector('.toggle-circle');
960
+ if (document.documentElement.classList.contains('dark')) {
961
+ toggleCircle.style.transform = 'translateX(20px)';
962
+ } else {
963
+ toggleCircle.style.transform = 'translateX(0)';
964
+ }
965
+ });
966
+
967
+ // Check for saved dark mode preference
968
+ if (localStorage.getItem('darkMode') === 'true') {
969
+ document.documentElement.classList.add('dark');
970
+ document.querySelector('.toggle-circle').style.transform = 'translateX(20px)';
971
+ }
972
+
973
+ // Initialize USA Map
974
+ document.addEventListener('DOMContentLoaded', function() {
975
+ // USA Map
976
+ Highcharts.mapChart('usaMap', {
977
+ chart: {
978
+ map: 'countries/us/us-all'
979
+ },
980
+ title: {
981
+ text: ''
982
+ },
983
+ mapNavigation: {
984
+ enabled: true,
985
+ buttonOptions: {
986
+ verticalAlign: 'bottom'
987
+ }
988
+ },
989
+ colorAxis: {
990
+ min: 0,
991
+ stops: [
992
+ [0, '#E6E6FA'],
993
+ [0.5, '#9370DB'],
994
+ [1, '#4B0082']
995
+ ]
996
+ },
997
+ series: [{
998
+ data: [
999
+ ['us-ma', 10], ['us-wa', 15], ['us-ca', 25], ['us-or', 8],
1000
+ ['us-wi', 12], ['us-me', 5], ['us-mi', 18], ['us-nv', 7],
1001
+ ['us-nm', 6], ['us-co', 9], ['us-wy', 3], ['us-ks', 4],
1002
+ ['us-ne', 5], ['us-ok', 7], ['us-mo', 8], ['us-il', 14],
1003
+ ['us-in', 10], ['us-vt', 2], ['us-ar', 5], ['us-tx', 22],
1004
+ ['us-ri', 3], ['us-al', 7], ['us-ms', 5], ['us-nc', 12],
1005
+ ['us-va', 11], ['us-ia', 6], ['us-md', 9], ['us-de', 2],
1006
+ ['us-pa', 16], ['us-nj', 10], ['us-ny', 20], ['us-id', 4],
1007
+ ['us-sd', 3], ['us-ct', 6], ['us-nh', 4], ['us-ky', 7],
1008
+ ['us-oh', 14], ['us-tn', 9], ['us-wv', 3], ['us-dc', 5],
1009
+ ['us-la', 8], ['us-fl', 18], ['us-ga', 12], ['us-sc', 7],
1010
+ ['us-mn', 8], ['us-mt', 3], ['us-nd', 2], ['us-az', 9],
1011
+ ['us-ut', 5], ['us-hi', 4], ['us-ak', 2]
1012
+ ],
1013
+ name: 'Schools',
1014
+ states: {
1015
+ hover: {
1016
+ color: '#BADA55'
1017
+ }
1018
+ },
1019
+ dataLabels: {
1020
+ enabled: true,
1021
+ format: '{point.name}'
1022
+ }
1023
+ }]
1024
+ });
1025
+
1026
+ // Engagement Chart
1027
+ const engagementCtx = document.getElementById('engagementChart').getContext('2d');
1028
+ new Chart(engagementCtx, {
1029
+ type: 'line',
1030
+ data: {
1031
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1032
+ datasets: [
1033
+ {
1034
+ label: 'Engagement Rate',
1035
+ data: [35, 38, 42, 40, 45, 43, 47],
1036
+ borderColor: '#7C3AED',
1037
+ backgroundColor: 'rgba(124, 58, 237, 0.1)',
1038
+ tension: 0.3,
1039
+ fill: true
1040
+ },
1041
+ {
1042
+ label: 'Participation',
1043
+ data: [28, 32, 35, 38, 42, 40, 45],
1044
+ borderColor: '#10B981',
1045
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1046
+ tension: 0.3,
1047
+ fill: true
1048
+ }
1049
+ ]
1050
+ },
1051
+ options: {
1052
+ responsive: true,
1053
+ plugins: {
1054
+ legend: {
1055
+ position: 'top',
1056
+ }
1057
+ },
1058
+ scales: {
1059
+ y: {
1060
+ beginAtZero: true
1061
+ }
1062
+ }
1063
+ }
1064
+ });
1065
+
1066
+ // Club Categories Chart
1067
+ const clubCategoriesCtx = document.getElementById('clubCategoriesChart').getContext('2d');
1068
+ new Chart(clubCategoriesCtx, {
1069
+ type: 'doughnut',
1070
+ data: {
1071
+ labels: ['Academic', 'Arts', 'Sports', 'Community Service', 'STEM', 'Other'],
1072
+ datasets: [{
1073
+ data: [25, 15, 20, 18, 12, 10],
1074
+ backgroundColor: [
1075
+ '#7C3AED',
1076
+ '#3B82F6',
1077
+ '#10B981',
1078
+ '#F59E0B',
1079
+ '#EC4899',
1080
+ '#6B7280'
1081
+ ],
1082
+ borderWidth: 0
1083
+ }]
1084
+ },
1085
+ options: {
1086
+ responsive: true,
1087
+ plugins: {
1088
+ legend: {
1089
+ position: 'right',
1090
+ }
1091
+ }
1092
+ }
1093
+ });
1094
+
1095
+ // Monthly Participation Chart
1096
+ const monthlyParticipationCtx = document.getElementById('monthlyParticipationChart').getContext('2d');
1097
+ new Chart(monthlyParticipationCtx, {
1098
+ type: 'bar',
1099
+ data: {
1100
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1101
+ datasets: [
1102
+ {
1103
+ label: 'New Members',
1104
+ data: [120, 150, 180, 210, 240, 220, 250],
1105
+ backgroundColor: '#7C3AED'
1106
+ },
1107
+ {
1108
+ label: 'Active Members',
1109
+ data: [80, 100, 120, 150, 180, 200, 220],
1110
+ backgroundColor: '#10B981'
1111
+ }
1112
+ ]
1113
+ },
1114
+ options: {
1115
+ responsive: true,
1116
+ plugins: {
1117
+ legend: {
1118
+ position: 'top',
1119
+ }
1120
+ },
1121
+ scales: {
1122
+ x: {
1123
+ stacked: false,
1124
+ },
1125
+ y: {
1126
+ stacked: false
1127
+ }
1128
+ }
1129
+ }
1130
+ });
1131
+
1132
+ // Club Growth Chart
1133
+ const clubGrowthCtx = document.getElementById('clubGrowthChart').getContext('2d');
1134
+ new Chart(clubGrowthCtx, {
1135
+ type: 'line',
1136
+ data: {
1137
+ labels: ['2020', '2021', '2022', '2023'],
1138
+ datasets: [{
1139
+ label: 'Total Clubs',
1140
+ data: [85, 105, 125, 142],
1141
+ borderColor: '#7C3AED',
1142
+ backgroundColor: 'rgba(124, 58, 237, 0.1)',
1143
+ tension: 0.3,
1144
+ fill: true
1145
+ }]
1146
+ },
1147
+ options: {
1148
+ responsive: true,
1149
+ plugins: {
1150
+ legend: {
1151
+ position: 'top',
1152
+ }
1153
+ },
1154
+ scales: {
1155
+ y: {
1156
+ beginAtZero: true
1157
+ }
1158
+ }
1159
+ }
1160
+ });
1161
+
1162
+ // Participation Chart
1163
+ const participationCtx = document.getElementById('participationChart').getContext('2d');
1164
+ new Chart(participationCtx, {
1165
+ type: 'bar',
1166
+ data: {
1167
+ labels: ['Freshmen', 'Sophomores', 'Juniors', 'Seniors'],
1168
+ datasets: [{
1169
+ label: 'Participation by Grade',
1170
+ data: [1200, 1800, 2200, 2500],
1171
+ backgroundColor: [
1172
+ '#7C3AED',
1173
+ '#3B82F6',
1174
+ '#10B981',
1175
+ '#F59E0B'
1176
+ ]
1177
+ }]
1178
+ },
1179
+ options: {
1180
+ responsive: true,
1181
+ plugins: {
1182
+ legend: {
1183
+ display: false
1184
+ }
1185
+ },
1186
+ scales: {
1187
+ y: {
1188
+ beginAtZero: true
1189
+ }
1190
+ }
1191
+ }
1192
+ });
1193
+
1194
+ // Activity Types Chart
1195
+ const activityTypesCtx = document.getElementById('activityTypesChart').getContext('2d');
1196
+ new Chart(activityTypesCtx, {
1197
+ type: 'polarArea',
1198
+ data: {
1199
+ labels: ['Meetings', 'Events', 'Workshops', 'Fundraisers', 'Community Service'],
1200
+ datasets: [{
1201
+ data: [45, 30, 25, 20, 15],
1202
+ backgroundColor: [
1203
+ '#7C3AED',
1204
+ '#3B82F6',
1205
+ '#10B981',
1206
+ '#F59E0B',
1207
+ '#EC4899'
1208
+ ]
1209
+ }]
1210
+ },
1211
+ options: {
1212
+ responsive: true,
1213
+ plugins: {
1214
+ legend: {
1215
+ position: 'right',
1216
+ }
1217
+ }
1218
+ }
1219
+ });
1220
+
1221
+ // User Engagement Chart
1222
+ const userEngagementCtx = document.getElementById('userEngagementChart').getContext('2d');
1223
+ new Chart(userEngagementCtx, {
1224
+ type: 'radar',
1225
+ data: {
1226
+ labels: ['Logins', 'Posts', 'Comments', 'Event Attendance', 'Resource Downloads'],
1227
+ datasets: [
1228
+ {
1229
+ label: 'Student Engagement',
1230
+ data: [85, 70, 65, 60, 50],
1231
+ backgroundColor: 'rgba(124, 58, 237, 0.2)',
1232
+ borderColor: '#7C3AED',
1233
+ pointBackgroundColor: '#7C3AED',
1234
+ pointBorderColor: '#fff',
1235
+ pointHoverBackgroundColor: '#fff',
1236
+ pointHoverBorderColor: '#7C3AED'
1237
+ },
1238
+ {
1239
+ label: 'Faculty Engagement',
1240
+ data: [90, 50, 40, 70, 30],
1241
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
1242
+ borderColor: '#3B82F6',
1243
+ pointBackgroundColor: '#3B82F6',
1244
+ pointBorderColor: '#fff',
1245
+ pointHoverBackgroundColor: '#fff',
1246
+ pointHoverBorderColor: '#3B82F6'
1247
+ }
1248
+ ]
1249
+ },
1250
+ options: {
1251
+ responsive: true,
1252
+ plugins: {
1253
+ legend: {
1254
+ position: 'top',
1255
+ }
1256
+ }
1257
+ }
1258
+ });
1259
+ });
1260
+ </script>
1261
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ishwinder/webbuilder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1262
+ </html>