Hugging Face's logo

Spaces:
Mankeysocks
/
group
Running

App Files Community
Mankeysocks commited on
Commit
b5dfda7
·
verified ·
1 Parent(s): 5b34e85

Purpose: Manage multiplayer/group runs. Contents: Create Group Button: Start a new group run session. Join Group: Input or browse available groups to join. Group Member Panel: List current members with avatars and player names. Show ready/not ready status per member. Indicate leader and allow leader controls. Group Chat/Communication Status (optional): Voice link indicators if integrated. Start Challenge Button: Enabled for leader only when all members are ready. Group Stats: Aggregate info like average vehicle condition, trail selected. Notifications: Member join/leave, readiness changes, challenge start. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +556 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Group
3
- emoji: 🐨
4
- colorFrom: pink
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: group
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,556 @@
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>TrailBlazers - Group Run Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3b82f6',
15
+ secondary: '#1e40af',
16
+ dark: '#0f172a',
17
+ success: '#10b981',
18
+ warning: '#f59e0b',
19
+ danger: '#ef4444'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Poppins', sans-serif;
30
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
31
+ min-height: 100vh;
32
+ color: #e2e8f0;
33
+ }
34
+
35
+ .group-card {
36
+ transition: all 0.3s ease;
37
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
38
+ }
39
+
40
+ .group-card:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
43
+ }
44
+
45
+ .member-card {
46
+ transition: all 0.2s ease;
47
+ }
48
+
49
+ .member-card:hover {
50
+ background-color: rgba(59, 130, 246, 0.1);
51
+ }
52
+
53
+ .status-indicator {
54
+ display: inline-block;
55
+ width: 10px;
56
+ height: 10px;
57
+ border-radius: 50%;
58
+ margin-right: 8px;
59
+ }
60
+
61
+ .ready {
62
+ background-color: #10b981;
63
+ box-shadow: 0 0 8px #10b981;
64
+ }
65
+
66
+ .not-ready {
67
+ background-color: #ef4444;
68
+ box-shadow: 0 0 8px #ef4444;
69
+ }
70
+
71
+ .leader {
72
+ background-color: #f59e0b;
73
+ box-shadow: 0 0 8px #f59e0b;
74
+ }
75
+
76
+ .pulse {
77
+ animation: pulse 2s infinite;
78
+ }
79
+
80
+ @keyframes pulse {
81
+ 0% { transform: scale(1); }
82
+ 50% { transform: scale(1.05); }
83
+ 100% { transform: scale(1); }
84
+ }
85
+
86
+ .notification {
87
+ transform: translateX(100%);
88
+ transition: transform 0.3s ease;
89
+ }
90
+
91
+ .notification.show {
92
+ transform: translateX(0);
93
+ }
94
+
95
+ .chat-message {
96
+ animation: fadeIn 0.3s ease;
97
+ }
98
+
99
+ @keyframes fadeIn {
100
+ from { opacity: 0; transform: translateY(10px); }
101
+ to { opacity: 1; transform: translateY(0); }
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="p-4 md:p-8">
106
+ <div class="max-w-7xl mx-auto">
107
+ <!-- Header -->
108
+ <header class="mb-8 text-center">
109
+ <h1 class="text-3xl md:text-4xl font-bold text-white mb-2 flex items-center justify-center">
110
+ <i class="fas fa-mountain text-primary mr-3"></i> TrailBlazers
111
+ </h1>
112
+ <p class="text-gray-400">Manage your multiplayer group runs</p>
113
+ </header>
114
+
115
+ <!-- Main Content -->
116
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
117
+ <!-- Left Column - Group Management -->
118
+ <div class="lg:col-span-2">
119
+ <div class="group-card bg-gray-800 rounded-xl p-6 mb-6">
120
+ <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
121
+ <h2 class="text-2xl font-bold text-white mb-4 md:mb-0">Group Management</h2>
122
+ <div class="flex flex-wrap gap-3">
123
+ <button id="createGroupBtn" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center transition">
124
+ <i class="fas fa-plus mr-2"></i> Create Group
125
+ </button>
126
+ <button id="joinGroupBtn" class="bg-dark border border-gray-700 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center transition">
127
+ <i class="fas fa-sign-in-alt mr-2"></i> Join Group
128
+ </button>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Join Group Form -->
133
+ <div id="joinGroupForm" class="hidden bg-gray-900 rounded-lg p-4 mb-6">
134
+ <div class="flex flex-col md:flex-row gap-3">
135
+ <div class="flex-1">
136
+ <label class="block text-gray-400 mb-2">Group ID or Name</label>
137
+ <input type="text" id="groupIdInput" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter group ID or name">
138
+ </div>
139
+ <div class="flex items-end">
140
+ <button id="joinGroupSubmit" class="bg-success hover:bg-green-600 text-white px-6 py-2 rounded-lg flex items-center transition">
141
+ <i class="fas fa-sign-in-alt mr-2"></i> Join
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Group Stats -->
148
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
149
+ <div class="bg-gray-900 rounded-lg p-4 flex items-center">
150
+ <div class="bg-blue-500/20 p-3 rounded-lg mr-4">
151
+ <i class="fas fa-route text-blue-400 text-xl"></i>
152
+ </div>
153
+ <div>
154
+ <p class="text-gray-400 text-sm">Trail Selected</p>
155
+ <p class="text-white font-medium">Mountain Ridge Trail</p>
156
+ </div>
157
+ </div>
158
+ <div class="bg-gray-900 rounded-lg p-4 flex items-center">
159
+ <div class="bg-green-500/20 p-3 rounded-lg mr-4">
160
+ <i class="fas fa-car text-green-400 text-xl"></i>
161
+ </div>
162
+ <div>
163
+ <p class="text-gray-400 text-sm">Avg Vehicle Condition</p>
164
+ <p class="text-white font-medium">85%</p>
165
+ </div>
166
+ </div>
167
+ <div class="bg-gray-900 rounded-lg p-4 flex items-center">
168
+ <div class="bg-yellow-500/20 p-3 rounded-lg mr-4">
169
+ <i class="fas fa-users text-yellow-400 text-xl"></i>
170
+ </div>
171
+ <div>
172
+ <p class="text-gray-400 text-sm">Group Size</p>
173
+ <p class="text-white font-medium">5/8 Members</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Member Panel -->
179
+ <div class="mb-6">
180
+ <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
181
+ <i class="fas fa-users mr-2"></i> Group Members
182
+ </h3>
183
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
184
+ <!-- Leader -->
185
+ <div class="member-card bg-gray-900 rounded-lg p-4 border border-yellow-500/30">
186
+ <div class="flex items-center">
187
+ <div class="relative">
188
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Leader" class="w-12 h-12 rounded-full">
189
+ <div class="absolute -bottom-1 -right-1 bg-yellow-500 rounded-full p-1">
190
+ <i class="fas fa-crown text-xs"></i>
191
+ </div>
192
+ </div>
193
+ <div class="ml-4 flex-1">
194
+ <div class="flex justify-between">
195
+ <h4 class="font-medium text-white">Alex Morgan</h4>
196
+ <span class="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded">Leader</span>
197
+ </div>
198
+ <div class="flex items-center mt-1">
199
+ <span class="status-indicator ready"></span>
200
+ <span class="text-sm text-gray-400">Ready</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Member 1 -->
207
+ <div class="member-card bg-gray-900 rounded-lg p-4">
208
+ <div class="flex items-center">
209
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Member" class="w-12 h-12 rounded-full">
210
+ <div class="ml-4 flex-1">
211
+ <div class="flex justify-between">
212
+ <h4 class="font-medium text-white">Sarah Johnson</h4>
213
+ <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span>
214
+ </div>
215
+ <div class="flex items-center mt-1">
216
+ <span class="status-indicator ready"></span>
217
+ <span class="text-sm text-gray-400">Ready</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Member 2 -->
224
+ <div class="member-card bg-gray-900 rounded-lg p-4">
225
+ <div class="flex items-center">
226
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Member" class="w-12 h-12 rounded-full">
227
+ <div class="ml-4 flex-1">
228
+ <div class="flex justify-between">
229
+ <h4 class="font-medium text-white">Mike Chen</h4>
230
+ <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span>
231
+ </div>
232
+ <div class="flex items-center mt-1">
233
+ <span class="status-indicator not-ready"></span>
234
+ <span class="text-sm text-gray-400">Not Ready</span>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Member 3 -->
241
+ <div class="member-card bg-gray-900 rounded-lg p-4">
242
+ <div class="flex items-center">
243
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Member" class="w-12 h-12 rounded-full">
244
+ <div class="ml-4 flex-1">
245
+ <div class="flex justify-between">
246
+ <h4 class="font-medium text-white">Emma Rodriguez</h4>
247
+ <span class="text-xs bg-gray-700 text-gray-300 px-2 py-1 rounded">Member</span>
248
+ </div>
249
+ <div class="flex items-center mt-1">
250
+ <span class="status-indicator ready"></span>
251
+ <span class="text-sm text-gray-400">Ready</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Start Challenge Button -->
260
+ <div class="text-center">
261
+ <button id="startChallengeBtn" class="bg-success hover:bg-green-600 text-white px-8 py-3 rounded-lg text-lg font-semibold flex items-center justify-center mx-auto transition pulse">
262
+ <i class="fas fa-flag-checkered mr-2"></i> Start Challenge
263
+ </button>
264
+ <p class="text-gray-400 text-sm mt-2">Only available when all members are ready</p>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Group Chat -->
269
+ <div class="group-card bg-gray-800 rounded-xl p-6">
270
+ <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
271
+ <i class="fas fa-comments mr-2"></i> Group Chat
272
+ </h3>
273
+ <div class="bg-gray-900 rounded-lg p-4 mb-4 h-64 overflow-y-auto">
274
+ <div class="space-y-3">
275
+ <div class="chat-message flex">
276
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex" class="w-8 h-8 rounded-full mr-3">
277
+ <div>
278
+ <div class="bg-blue-500/20 text-blue-300 rounded-lg p-3 max-w-xs">
279
+ <p class="font-medium">Alex Morgan</p>
280
+ <p>Ready to start the challenge when everyone is ready!</p>
281
+ </div>
282
+ <span class="text-gray-500 text-xs mt-1 block">10:24 AM</span>
283
+ </div>
284
+ </div>
285
+ <div class="chat-message flex justify-end">
286
+ <div class="text-right">
287
+ <div class="bg-primary/20 text-white rounded-lg p-3 max-w-xs">
288
+ <p class="font-medium">You</p>
289
+ <p>Just checking my vehicle diagnostics</p>
290
+ </div>
291
+ <span class="text-gray-500 text-xs mt-1 block">10:26 AM</span>
292
+ </div>
293
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-8 h-8 rounded-full ml-3">
294
+ </div>
295
+ <div class="chat-message flex">
296
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-8 h-8 rounded-full mr-3">
297
+ <div>
298
+ <div class="bg-blue-500/20 text-blue-300 rounded-lg p-3 max-w-xs">
299
+ <p class="font-medium">Sarah Johnson</p>
300
+ <p>I'm ready to go! Let's do this!</p>
301
+ </div>
302
+ <span class="text-gray-500 text-xs mt-1 block">10:27 AM</span>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div class="flex">
308
+ <input type="text" id="chatInput" class="flex-1 bg-gray-900 border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none" placeholder="Type your message...">
309
+ <button id="sendChatBtn" class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg">
310
+ <i class="fas fa-paper-plane"></i>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Right Column - Notifications & Voice Status -->
317
+ <div>
318
+ <!-- Voice Status -->
319
+ <div class="group-card bg-gray-800 rounded-xl p-6 mb-6">
320
+ <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
321
+ <i class="fas fa-microphone mr-2"></i> Voice Status
322
+ </h3>
323
+ <div class="space-y-4">
324
+ <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg">
325
+ <div class="flex items-center">
326
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex" class="w-10 h-10 rounded-full mr-3">
327
+ <div>
328
+ <p class="font-medium text-white">Alex Morgan</p>
329
+ <p class="text-sm text-gray-400">Voice connected</p>
330
+ </div>
331
+ </div>
332
+ <div class="flex items-center">
333
+ <i class="fas fa-microphone text-green-500 mr-2"></i>
334
+ <span class="text-green-500 text-sm">Connected</span>
335
+ </div>
336
+ </div>
337
+ <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg">
338
+ <div class="flex items-center">
339
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-10 h-10 rounded-full mr-3">
340
+ <div>
341
+ <p class="font-medium text-white">Sarah Johnson</p>
342
+ <p class="text-sm text-gray-400">Voice connected</p>
343
+ </div>
344
+ </div>
345
+ <div class="flex items-center">
346
+ <i class="fas fa-microphone text-green-500 mr-2"></i>
347
+ <span class="text-green-500 text-sm">Connected</span>
348
+ </div>
349
+ </div>
350
+ <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg">
351
+ <div class="flex items-center">
352
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Mike" class="w-10 h-10 rounded-full mr-3">
353
+ <div>
354
+ <p class="font-medium text-white">Mike Chen</p>
355
+ <p class="text-sm text-gray-400">Voice connected</p>
356
+ </div>
357
+ </div>
358
+ <div class="flex items-center">
359
+ <i class="fas fa-microphone text-green-500 mr-2"></i>
360
+ <span class="text-green-500 text-sm">Connected</span>
361
+ </div>
362
+ </div>
363
+ <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg">
364
+ <div class="flex items-center">
365
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma" class="w-10 h-10 rounded-full mr-3">
366
+ <div>
367
+ <p class="font-medium text-white">Emma Rodriguez</p>
368
+ <p class="text-sm text-gray-400">Voice connected</p>
369
+ </div>
370
+ </div>
371
+ <div class="flex items-center">
372
+ <i class="fas fa-microphone text-green-500 mr-2"></i>
373
+ <span class="text-green-500 text-sm">Connected</span>
374
+ </div>
375
+ </div>
376
+ <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg">
377
+ <div class="flex items-center">
378
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-10 h-10 rounded-full mr-3">
379
+ <div>
380
+ <p class="font-medium text-white">You</p>
381
+ <p class="text-sm text-gray-400">Voice connected</p>
382
+ </div>
383
+ </div>
384
+ <div class="flex items-center">
385
+ <i class="fas fa-microphone text-green-500 mr-2"></i>
386
+ <span class="text-green-500 text-sm">Connected</span>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Notifications -->
393
+ <div class="group-card bg-gray-800 rounded-xl p-6">
394
+ <div class="flex justify-between items-center mb-4">
395
+ <h3 class="text-xl font-semibold text-white flex items-center">
396
+ <i class="fas fa-bell mr-2"></i> Notifications
397
+ </h3>
398
+ <button id="clearNotificationsBtn" class="text-gray-400 hover:text-white text-sm">
399
+ Clear All
400
+ </button>
401
+ </div>
402
+ <div id="notificationsContainer" class="space-y-3">
403
+ <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-yellow-500">
404
+ <div class="flex">
405
+ <i class="fas fa-crown text-yellow-500 mt-1 mr-3"></i>
406
+ <div>
407
+ <p class="font-medium text-white">Alex Morgan</p>
408
+ <p class="text-sm text-gray-400">became the group leader</p>
409
+ <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500">
414
+ <div class="flex">
415
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
416
+ <div>
417
+ <p class="font-medium text-white">Sarah Johnson</p>
418
+ <p class="text-sm text-gray-400">is now ready</p>
419
+ <p class="text-xs text-gray-500 mt-1">5 minutes ago</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-blue-500">
424
+ <div class="flex">
425
+ <i class="fas fa-user-plus text-blue-500 mt-1 mr-3"></i>
426
+ <div>
427
+ <p class="font-medium text-white">Mike Chen</p>
428
+ <p class="text-sm text-gray-400">joined the group</p>
429
+ <p class="text-xs text-gray-500 mt-1">10 minutes ago</p>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ <div class="notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500">
434
+ <div class="flex">
435
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
436
+ <div>
437
+ <p class="font-medium text-white">Emma Rodriguez</p>
438
+ <p class="text-sm text-gray-400">is now ready</p>
439
+ <p class="text-xs text-gray-500 mt-1">12 minutes ago</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <script>
450
+ // DOM Elements
451
+ const createGroupBtn = document.getElementById('createGroupBtn');
452
+ const joinGroupBtn = document.getElementById('joinGroupBtn');
453
+ const joinGroupForm = document.getElementById('joinGroupForm');
454
+ const joinGroupSubmit = document.getElementById('joinGroupSubmit');
455
+ const groupIdInput = document.getElementById('groupIdInput');
456
+ const startChallengeBtn = document.getElementById('startChallengeBtn');
457
+ const chatInput = document.getElementById('chatInput');
458
+ const sendChatBtn = document.getElementById('sendChatBtn');
459
+ const clearNotificationsBtn = document.getElementById('clearNotificationsBtn');
460
+ const notificationsContainer = document.getElementById('notificationsContainer');
461
+
462
+ // Event Listeners
463
+ createGroupBtn.addEventListener('click', () => {
464
+ // In a real app, this would create a new group
465
+ alert('Group created successfully!');
466
+ });
467
+
468
+ joinGroupBtn.addEventListener('click', () => {
469
+ joinGroupForm.classList.toggle('hidden');
470
+ });
471
+
472
+ joinGroupSubmit.addEventListener('click', () => {
473
+ if (groupIdInput.value.trim() !== '') {
474
+ // In a real app, this would join the group
475
+ alert(`Joined group: ${groupIdInput.value}`);
476
+ groupIdInput.value = '';
477
+ joinGroupForm.classList.add('hidden');
478
+ } else {
479
+ alert('Please enter a group ID or name');
480
+ }
481
+ });
482
+
483
+ startChallengeBtn.addEventListener('click', () => {
484
+ // In a real app, this would start the challenge
485
+ alert('Challenge started! Good luck everyone!');
486
+ });
487
+
488
+ sendChatBtn.addEventListener('click', sendMessage);
489
+ chatInput.addEventListener('keypress', (e) => {
490
+ if (e.key === 'Enter') {
491
+ sendMessage();
492
+ }
493
+ });
494
+
495
+ clearNotificationsBtn.addEventListener('click', () => {
496
+ notificationsContainer.innerHTML = '';
497
+ });
498
+
499
+ // Function to send chat message
500
+ function sendMessage() {
501
+ const message = chatInput.value.trim();
502
+ if (message !== '') {
503
+ const chatContainer = document.querySelector('.bg-gray-900.h-64.overflow-y-auto');
504
+ const messageElement = document.createElement('div');
505
+ messageElement.className = 'chat-message flex justify-end';
506
+ messageElement.innerHTML = `
507
+ <div class="text-right">
508
+ <div class="bg-primary/20 text-white rounded-lg p-3 max-w-xs">
509
+ <p class="font-medium">You</p>
510
+ <p>${message}</p>
511
+ </div>
512
+ <span class="text-gray-500 text-xs mt-1 block">Just now</span>
513
+ </div>
514
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="You" class="w-8 h-8 rounded-full ml-3">
515
+ `;
516
+ chatContainer.appendChild(messageElement);
517
+ chatInput.value = '';
518
+ chatContainer.scrollTop = chatContainer.scrollHeight;
519
+ }
520
+ }
521
+
522
+ // Simulate notifications
523
+ setTimeout(() => {
524
+ const newNotification = document.createElement('div');
525
+ newNotification.className = 'notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-blue-500';
526
+ newNotification.innerHTML = `
527
+ <div class="flex">
528
+ <i class="fas fa-user-plus text-blue-500 mt-1 mr-3"></i>
529
+ <div>
530
+ <p class="font-medium text-white">You</p>
531
+ <p class="text-sm text-gray-400">joined the group</p>
532
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
533
+ </div>
534
+ </div>
535
+ `;
536
+ notificationsContainer.prepend(newNotification);
537
+ }, 3000);
538
+
539
+ setTimeout(() => {
540
+ const newNotification = document.createElement('div');
541
+ newNotification.className = 'notification show bg-gray-900 rounded-lg p-3 border-l-4 border-l-green-500';
542
+ newNotification.innerHTML = `
543
+ <div class="flex">
544
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
545
+ <div>
546
+ <p class="font-medium text-white">You</p>
547
+ <p class="text-sm text-gray-400">are now ready</p>
548
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
549
+ </div>
550
+ </div>
551
+ `;
552
+ notificationsContainer.prepend(newNotification);
553
+ }, 5000);
554
+ </script>
555
+ <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=Mankeysocks/group" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
556
+ </html>