isubbu commited on
Commit
f8d56cc
·
verified ·
1 Parent(s): 7cd5812

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +1059 -38
index.html CHANGED
@@ -1,41 +1,1062 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=isubbu/first" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>AI Membership Platform</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
+ <link rel="manifest" href="/manifest.json">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#4F46E5',
16
+ secondary: '#10B981',
17
+ dark: '#1F2937',
18
+ light: '#F9FAFB',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
  <style>
25
+ /* Custom styles */
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
28
+ }
29
+ .chat-bubble {
30
+ border-radius: 1rem;
31
+ max-width: 80%;
32
+ }
33
+ .user-bubble {
34
+ background-color: #4F46E5;
35
+ color: white;
36
+ margin-left: auto;
37
+ }
38
+ .other-bubble {
39
+ background-color: #E5E7EB;
40
+ color: #1F2937;
41
+ margin-right: auto;
42
+ }
43
+ .language-selector:hover .language-dropdown {
44
+ display: block;
45
+ }
46
+ /* PWA specific */
47
+ #installButton {
48
+ display: none;
49
+ }
50
+ /* Animation */
51
+ @keyframes pulse {
52
+ 0%, 100% {
53
+ opacity: 1;
54
+ }
55
+ 50% {
56
+ opacity: 0.5;
57
+ }
58
+ }
59
+ .animate-pulse {
60
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
61
+ }
62
  </style>
63
+ </head>
64
+ <body class="bg-gray-50 min-h-screen">
65
+ <!-- PWA Install Prompt -->
66
+ <div id="installContainer" class="fixed bottom-4 right-4 z-50 hidden">
67
+ <div class="bg-white p-4 rounded-lg shadow-xl max-w-xs">
68
+ <p class="text-sm text-gray-700 mb-2">Install our app for a better experience</p>
69
+ <div class="flex space-x-2">
70
+ <button id="installButton" class="bg-primary text-white px-3 py-1 rounded text-sm">Install</button>
71
+ <button id="dismissInstall" class="border border-gray-300 px-3 py-1 rounded text-sm">Later</button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Loading Screen -->
77
+ <div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center">
78
+ <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
79
+ <p class="mt-4 text-gray-600">Loading your experience...</p>
80
+ </div>
81
+
82
+ <!-- Auth Modal -->
83
+ <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
84
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
85
+ <div class="p-6">
86
+ <div class="flex justify-between items-center mb-4">
87
+ <h3 class="text-xl font-semibold text-gray-800">Welcome</h3>
88
+ <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700">
89
+ <i class="fas fa-times"></i>
90
+ </button>
91
+ </div>
92
+
93
+ <div class="space-y-4">
94
+ <button id="googleAuth" class="w-full flex items-center justify-center space-x-2 bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50">
95
+ <i class="fab fa-google text-red-500"></i>
96
+ <span>Continue with Google</span>
97
+ </button>
98
+
99
+ <div class="relative flex items-center">
100
+ <div class="flex-grow border-t border-gray-300"></div>
101
+ <span class="flex-shrink mx-4 text-gray-500">or</span>
102
+ <div class="flex-grow border-t border-gray-300"></div>
103
+ </div>
104
+
105
+ <div class="space-y-2">
106
+ <label for="whatsappNumber" class="block text-sm font-medium text-gray-700">WhatsApp Number</label>
107
+ <div class="flex">
108
+ <select class="border border-gray-300 rounded-l-lg px-3 py-2 bg-gray-50 text-gray-700">
109
+ <option>+1</option>
110
+ <option>+44</option>
111
+ <option>+49</option>
112
+ <option>+33</option>
113
+ <option>+34</option>
114
+ <option>+81</option>
115
+ <option>+63</option>
116
+ <option>+91</option>
117
+ </select>
118
+ <input type="tel" id="whatsappNumber" placeholder="1234567890" class="flex-grow border border-gray-300 rounded-r-lg px-3 py-2 focus:ring-primary focus:border-primary">
119
+ </div>
120
+ </div>
121
+
122
+ <button id="whatsappAuth" class="w-full flex items-center justify-center space-x-2 bg-green-600 text-white rounded-lg px-4 py-2 hover:bg-green-700">
123
+ <i class="fab fa-whatsapp"></i>
124
+ <span>Continue with WhatsApp</span>
125
+ </button>
126
+ </div>
127
+
128
+ <div class="mt-6 text-center text-sm text-gray-500">
129
+ <p>By continuing, you agree to our <a href="#" class="text-primary hover:underline">Terms</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a></p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Role Selection Modal -->
136
+ <div id="roleModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
137
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
138
+ <div class="p-6">
139
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Select Your Role</h3>
140
+
141
+ <div class="grid grid-cols-1 gap-4">
142
+ <button data-role="member" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:bg-opacity-5 transition-all">
143
+ <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-2">
144
+ <i class="fas fa-user text-primary text-xl"></i>
145
+ </div>
146
+ <h4 class="font-medium text-gray-800">Member</h4>
147
+ <p class="text-sm text-gray-500 text-center mt-1">Join clubs, access services, and connect with others</p>
148
+ </button>
149
+
150
+ <button data-role="vendor" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-secondary hover:bg-secondary hover:bg-opacity-5 transition-all">
151
+ <div class="w-12 h-12 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-2">
152
+ <i class="fas fa-store text-secondary text-xl"></i>
153
+ </div>
154
+ <h4 class="font-medium text-gray-800">Vendor</h4>
155
+ <p class="text-sm text-gray-500 text-center mt-1">Offer services and manage bookings</p>
156
+ </button>
157
+
158
+ <button data-role="agent" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-500 hover:bg-opacity-5 transition-all">
159
+ <div class="w-12 h-12 bg-purple-500 bg-opacity-10 rounded-full flex items-center justify-center mb-2">
160
+ <i class="fas fa-robot text-purple-500 text-xl"></i>
161
+ </div>
162
+ <h4 class="font-medium text-gray-800">Agent</h4>
163
+ <p class="text-sm text-gray-500 text-center mt-1">Connect members and facilitate services</p>
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Main App Container -->
171
+ <div id="appContainer" class="hidden">
172
+ <!-- Header -->
173
+ <header class="bg-white shadow-sm">
174
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
175
+ <div class="flex justify-between items-center py-4">
176
+ <div class="flex items-center">
177
+ <button id="menuToggle" class="mr-4 text-gray-500 hover:text-gray-700 md:hidden">
178
+ <i class="fas fa-bars text-xl"></i>
179
+ </button>
180
+ <div class="flex items-center">
181
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white">
182
+ <i class="fas fa-brain"></i>
183
+ </div>
184
+ <span class="ml-2 font-semibold text-gray-800">AI Membership</span>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="flex items-center space-x-4">
189
+ <!-- Voice Search -->
190
+ <button id="voiceSearchBtn" class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100">
191
+ <i class="fas fa-microphone"></i>
192
+ </button>
193
+
194
+ <!-- Language Selector -->
195
+ <div class="language-selector relative">
196
+ <button class="flex items-center space-x-1 p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100">
197
+ <i class="fas fa-globe"></i>
198
+ <span class="text-sm">EN</span>
199
+ </button>
200
+ <div class="language-dropdown absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
201
+ <div class="px-4 py-2 text-xs text-gray-500">Select Language</div>
202
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Deutsch</a>
203
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Français</a>
204
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Español</a>
205
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">日本語</a>
206
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Tagalog</a>
207
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">हिन्दी</a>
208
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">বাংলা</a>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Notifications -->
213
+ <div class="relative">
214
+ <button id="notificationsBtn" class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100">
215
+ <i class="fas fa-bell"></i>
216
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
217
+ </button>
218
+ <div id="notificationsDropdown" class="absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-10 hidden">
219
+ <div class="px-4 py-2 border-b border-gray-200">
220
+ <div class="flex justify-between items-center">
221
+ <h3 class="text-sm font-medium">Notifications</h3>
222
+ <button class="text-xs text-primary">Mark all as read</button>
223
+ </div>
224
+ </div>
225
+ <div class="max-h-60 overflow-y-auto">
226
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-100">
227
+ <div class="flex items-start">
228
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
229
+ <i class="fas fa-user-plus"></i>
230
+ </div>
231
+ <div class="ml-3">
232
+ <p class="font-medium">New connection request</p>
233
+ <p class="text-xs text-gray-500">2 hours ago</p>
234
+ </div>
235
+ </div>
236
+ </a>
237
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-100">
238
+ <div class="flex items-start">
239
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-500">
240
+ <i class="fas fa-calendar-check"></i>
241
+ </div>
242
+ <div class="ml-3">
243
+ <p class="font-medium">Your booking is confirmed</p>
244
+ <p class="text-xs text-gray-500">5 hours ago</p>
245
+ </div>
246
+ </div>
247
+ </a>
248
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50">
249
+ <div class="flex items-start">
250
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
251
+ <i class="fas fa-robot"></i>
252
+ </div>
253
+ <div class="ml-3">
254
+ <p class="font-medium">AI Agent has a suggestion for you</p>
255
+ <p class="text-xs text-gray-500">Yesterday</p>
256
+ </div>
257
+ </div>
258
+ </a>
259
+ </div>
260
+ <div class="px-4 py-2 border-t border-gray-200 text-center">
261
+ <a href="#" class="text-xs text-primary font-medium">View all notifications</a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- User Profile -->
267
+ <div class="relative">
268
+ <button id="userMenuBtn" class="flex items-center space-x-2">
269
+ <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
270
+ <span id="userInitial">U</span>
271
+ </div>
272
+ </button>
273
+ <div id="userMenuDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
274
+ <div class="px-4 py-2 border-b border-gray-200">
275
+ <p class="text-sm font-medium">Signed in as</p>
276
+ <p class="text-sm text-gray-500 truncate" id="userEmail">user@example.com</p>
277
+ </div>
278
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
279
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
280
+ <div class="border-t border-gray-200"></div>
281
+ <button id="logoutBtn" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </header>
288
+
289
+ <!-- Mobile Sidebar -->
290
+ <div id="mobileSidebar" class="fixed inset-0 bg-black bg-opacity-50 z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out">
291
+ <div class="w-64 bg-white h-full relative">
292
+ <div class="p-4 border-b border-gray-200">
293
+ <div class="flex items-center">
294
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white">
295
+ <i class="fas fa-brain"></i>
296
+ </div>
297
+ <span class="ml-2 font-semibold text-gray-800">AI Membership</span>
298
+ </div>
299
+ </div>
300
+ <nav class="p-4">
301
+ <div class="space-y-2">
302
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-primary bg-opacity-10 text-primary">
303
+ <i class="fas fa-home w-5"></i>
304
+ <span>Dashboard</span>
305
+ </a>
306
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
307
+ <i class="fas fa-users w-5"></i>
308
+ <span>Clubs</span>
309
+ </a>
310
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
311
+ <i class="fas fa-store w-5"></i>
312
+ <span>Vendors</span>
313
+ </a>
314
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
315
+ <i class="fas fa-comments w-5"></i>
316
+ <span>Messages</span>
317
+ </a>
318
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
319
+ <i class="fas fa-calendar w-5"></i>
320
+ <span>Bookings</span>
321
+ </a>
322
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
323
+ <i class="fas fa-cog w-5"></i>
324
+ <span>Settings</span>
325
+ </a>
326
+ </div>
327
+ </nav>
328
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
329
+ <button class="w-full flex items-center justify-center space-x-2 text-gray-700 hover:text-primary">
330
+ <i class="fas fa-sign-out-alt"></i>
331
+ <span>Logout</span>
332
+ </button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Main Content -->
338
+ <div class="flex">
339
+ <!-- Desktop Sidebar -->
340
+ <aside class="hidden md:block w-64 bg-white border-r border-gray-200 h-[calc(100vh-65px)] sticky top-[65px]">
341
+ <nav class="p-4">
342
+ <div class="space-y-1">
343
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-primary bg-opacity-10 text-primary">
344
+ <i class="fas fa-home w-5"></i>
345
+ <span>Dashboard</span>
346
+ </a>
347
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
348
+ <i class="fas fa-users w-5"></i>
349
+ <span>Clubs</span>
350
+ </a>
351
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
352
+ <i class="fas fa-store w-5"></i>
353
+ <span>Vendors</span>
354
+ </a>
355
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
356
+ <i class="fas fa-comments w-5"></i>
357
+ <span>Messages</span>
358
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
359
+ </a>
360
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
361
+ <i class="fas fa-calendar w-5"></i>
362
+ <span>Bookings</span>
363
+ </a>
364
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
365
+ <i class="fas fa-robot w-5"></i>
366
+ <span>AI Assistant</span>
367
+ </a>
368
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
369
+ <i class="fas fa-wallet w-5"></i>
370
+ <span>Payments</span>
371
+ </a>
372
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
373
+ <i class="fas fa-cog w-5"></i>
374
+ <span>Settings</span>
375
+ </a>
376
+ </div>
377
+
378
+ <div class="mt-8">
379
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Your Clubs</h3>
380
+ <div class="mt-2 space-y-1">
381
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
382
+ <div class="w-5 h-5 rounded-full bg-blue-500"></div>
383
+ <span class="text-sm">Tech Enthusiasts</span>
384
+ </a>
385
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
386
+ <div class="w-5 h-5 rounded-full bg-green-500"></div>
387
+ <span class="text-sm">Fitness Group</span>
388
+ </a>
389
+ <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100">
390
+ <div class="w-5 h-5 rounded-full bg-purple-500"></div>
391
+ <span class="text-sm">Book Club</span>
392
+ </a>
393
+ </div>
394
+ </div>
395
+ </nav>
396
+ </aside>
397
+
398
+ <!-- Dashboard Content -->
399
+ <main class="flex-1 pb-8">
400
+ <!-- Page header -->
401
+ <div class="bg-white shadow">
402
+ <div class="px-4 sm:px-6 lg:px-8">
403
+ <div class="py-6 md:flex md:items-center md:justify-between">
404
+ <div class="min-w-0 flex-1">
405
+ <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
406
+ Welcome back, <span id="userName">User</span>
407
+ </h1>
408
+ <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
409
+ <div class="mt-2 flex items-center text-sm text-gray-500">
410
+ <i class="fas fa-map-marker-alt mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400"></i>
411
+ <span id="userLocation">Detecting your location...</span>
412
+ </div>
413
+ <div class="mt-2 flex items-center text-sm text-gray-500">
414
+ <i class="fas fa-user-tag mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400"></i>
415
+ <span id="userRole">Member</span>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <div class="mt-4 flex md:mt-0 md:ml-4">
420
+ <button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
421
+ <i class="fas fa-robot mr-2"></i> AI Assistant
422
+ </button>
423
+ <button type="button" class="ml-3 inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
424
+ <i class="fas fa-plus mr-2"></i> New Club
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Main content -->
432
+ <div class="mt-8 px-4 sm:px-6 lg:px-8">
433
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
434
+ <!-- Stats -->
435
+ <div class="bg-white overflow-hidden shadow rounded-lg">
436
+ <div class="px-4 py-5 sm:p-6">
437
+ <div class="flex items-center">
438
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
439
+ <i class="fas fa-users text-white text-xl"></i>
440
+ </div>
441
+ <div class="ml-5 w-0 flex-1">
442
+ <dt class="text-sm font-medium text-gray-500 truncate">Your Clubs</dt>
443
+ <dd class="flex items-baseline">
444
+ <div class="text-2xl font-semibold text-gray-900">3</div>
445
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
446
+ <i class="fas fa-arrow-up text-xs"></i>
447
+ <span class="sr-only">Increased by</span>
448
+ 12%
449
+ </div>
450
+ </dd>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="bg-white overflow-hidden shadow rounded-lg">
457
+ <div class="px-4 py-5 sm:p-6">
458
+ <div class="flex items-center">
459
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
460
+ <i class="fas fa-store text-white text-xl"></i>
461
+ </div>
462
+ <div class="ml-5 w-0 flex-1">
463
+ <dt class="text-sm font-medium text-gray-500 truncate">Connected Vendors</dt>
464
+ <dd class="flex items-baseline">
465
+ <div class="text-2xl font-semibold text-gray-900">5</div>
466
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
467
+ <i class="fas fa-arrow-up text-xs"></i>
468
+ <span class="sr-only">Increased by</span>
469
+ 2%
470
+ </div>
471
+ </dd>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="bg-white overflow-hidden shadow rounded-lg">
478
+ <div class="px-4 py-5 sm:p-6">
479
+ <div class="flex items-center">
480
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
481
+ <i class="fas fa-calendar-check text-white text-xl"></i>
482
+ </div>
483
+ <div class="ml-5 w-0 flex-1">
484
+ <dt class="text-sm font-medium text-gray-500 truncate">Upcoming Bookings</dt>
485
+ <dd class="flex items-baseline">
486
+ <div class="text-2xl font-semibold text-gray-900">2</div>
487
+ <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
488
+ <i class="fas fa-arrow-down text-xs"></i>
489
+ <span class="sr-only">Decreased by</span>
490
+ 1%
491
+ </div>
492
+ </dd>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- AI Recommendations -->
500
+ <div class="mt-8">
501
+ <h2 class="text-lg font-medium text-gray-900">AI Recommendations For You</h2>
502
+ <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
503
+ <!-- Recommendation 1 -->
504
+ <div class="bg-white overflow-hidden shadow rounded-lg">
505
+ <div class="px-4 py-5 sm:p-6">
506
+ <div class="flex items-center">
507
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
508
+ <i class="fas fa-users text-white text-xl"></i>
509
+ </div>
510
+ <div class="ml-4">
511
+ <h3 class="text-lg font-medium text-gray-900">Tech Innovators Club</h3>
512
+ <p class="mt-1 text-sm text-gray-500">Join other tech enthusiasts to discuss the latest innovations.</p>
513
+ </div>
514
+ </div>
515
+ <div class="mt-4 flex justify-end">
516
+ <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark">
517
+ Join Club
518
+ </button>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Recommendation 2 -->
524
+ <div class="bg-white overflow-hidden shadow rounded-lg">
525
+ <div class="px-4 py-5 sm:p-6">
526
+ <div class="flex items-center">
527
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
528
+ <i class="fas fa-store text-white text-xl"></i>
529
+ </div>
530
+ <div class="ml-4">
531
+ <h3 class="text-lg font-medium text-gray-900">FitLife Gym</h3>
532
+ <p class="mt-1 text-sm text-gray-500">Personal training sessions tailored to your fitness goals.</p>
533
+ </div>
534
+ </div>
535
+ <div class="mt-4 flex justify-end">
536
+ <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark">
537
+ View Services
538
+ </button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Recommendation 3 -->
544
+ <div class="bg-white overflow-hidden shadow rounded-lg">
545
+ <div class="px-4 py-5 sm:p-6">
546
+ <div class="flex items-center">
547
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
548
+ <i class="fas fa-user-friends text-white text-xl"></i>
549
+ </div>
550
+ <div class="ml-4">
551
+ <h3 class="text-lg font-medium text-gray-900">Connect with Sarah</h3>
552
+ <p class="mt-1 text-sm text-gray-500">Based on your interests, you might enjoy connecting with Sarah.</p>
553
+ </div>
554
+ </div>
555
+ <div class="mt-4 flex justify-end">
556
+ <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark">
557
+ Send Message
558
+ </button>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <!-- Recent Activity -->
566
+ <div class="mt-8">
567
+ <h2 class="text-lg font-medium text-gray-900">Recent Activity</h2>
568
+ <div class="mt-4 bg-white shadow overflow-hidden sm:rounded-lg">
569
+ <ul class="divide-y divide-gray-200">
570
+ <li class="px-6 py-4">
571
+ <div class="flex items-center">
572
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
573
+ <i class="fas fa-calendar-check"></i>
574
+ </div>
575
+ <div class="ml-4">
576
+ <div class="text-sm font-medium text-gray-900">Booking confirmed</div>
577
+ <div class="text-sm text-gray-500">Your session with FitLife Gym has been confirmed for tomorrow at 5 PM.</div>
578
+ </div>
579
+ <div class="ml-auto text-sm text-gray-500">2 hours ago</div>
580
+ </div>
581
+ </li>
582
+ <li class="px-6 py-4">
583
+ <div class="flex items-center">
584
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
585
+ <i class="fas fa-comment"></i>
586
+ </div>
587
+ <div class="ml-4">
588
+ <div class="text-sm font-medium text-gray-900">New message</div>
589
+ <div class="text-sm text-gray-500">You have a new message from the Book Club organizer.</div>
590
+ </div>
591
+ <div class="ml-auto text-sm text-gray-500">5 hours ago</div>
592
+ </div>
593
+ </li>
594
+ <li class="px-6 py-4">
595
+ <div class="flex items-center">
596
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
597
+ <i class="fas fa-robot"></i>
598
+ </div>
599
+ <div class="ml-4">
600
+ <div class="text-sm font-medium text-gray-900">AI suggestion</div>
601
+ <div class="text-sm text-gray-500">Based on your interests, we found a new coding workshop you might enjoy.</div>
602
+ </div>
603
+ <div class="ml-auto text-sm text-gray-500">1 day ago</div>
604
+ </div>
605
+ </li>
606
+ </ul>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </main>
611
+ </div>
612
+
613
+ <!-- AI Chat Modal -->
614
+ <div id="aiChatModal" class="fixed bottom-4 right-4 z-40 hidden">
615
+ <div class="w-80 bg-white rounded-t-lg shadow-xl overflow-hidden">
616
+ <div class="bg-primary px-4 py-3 flex justify-between items-center">
617
+ <div class="flex items-center space-x-2">
618
+ <div class="w-8 h-8 rounded-full bg-white text-primary flex items-center justify-center">
619
+ <i class="fas fa-robot"></i>
620
+ </div>
621
+ <span class="text-white font-medium">AI Assistant</span>
622
+ </div>
623
+ <button id="closeAIChat" class="text-white hover:text-gray-200">
624
+ <i class="fas fa-times"></i>
625
+ </button>
626
+ </div>
627
+ <div id="aiChatMessages" class="h-64 overflow-y-auto p-4 bg-gray-50 space-y-3">
628
+ <div class="flex">
629
+ <div class="other-bubble px-4 py-2">
630
+ <p class="text-sm">Hello! I'm your AI assistant. How can I help you today?</p>
631
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ <div class="bg-white border-t border-gray-200 p-3">
636
+ <div class="flex">
637
+ <input type="text" id="aiChatInput" placeholder="Type your message..." class="flex-grow border border-gray-300 rounded-l-lg px-3 py-2 focus:ring-primary focus:border-primary">
638
+ <button id="sendAIMessage" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary-dark">
639
+ <i class="fas fa-paper-plane"></i>
640
+ </button>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <!-- Test Data Modal -->
648
+ <div id="testDataModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
649
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
650
+ <div class="p-6">
651
+ <div class="flex justify-between items-center mb-4">
652
+ <h3 class="text-xl font-semibold text-gray-800">Test Data</h3>
653
+ <button id="closeTestDataModal" class="text-gray-500 hover:text-gray-700">
654
+ <i class="fas fa-times"></i>
655
+ </button>
656
+ </div>
657
+
658
+ <div class="space-y-4">
659
+ <div>
660
+ <h4 class="font-medium text-gray-800 mb-2">Members (5)</h4>
661
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
662
+ <div class="bg-gray-50 p-3 rounded-lg">
663
+ <p class="font-medium">John Doe</p>
664
+ <p class="text-sm text-gray-600">john@example.com</p>
665
+ <p class="text-xs text-gray-500">Interests: Tech, Fitness</p>
666
+ </div>
667
+ <div class="bg-gray-50 p-3 rounded-lg">
668
+ <p class="font-medium">Jane Smith</p>
669
+ <p class="text-sm text-gray-600">jane@example.com</p>
670
+ <p class="text-xs text-gray-500">Interests: Books, Travel</p>
671
+ </div>
672
+ <div class="bg-gray-50 p-3 rounded-lg">
673
+ <p class="font-medium">Mike Johnson</p>
674
+ <p class="text-sm text-gray-600">mike@example.com</p>
675
+ <p class="text-xs text-gray-500">Interests: Sports, Music</p>
676
+ </div>
677
+ <div class="bg-gray-50 p-3 rounded-lg">
678
+ <p class="font-medium">Sarah Williams</p>
679
+ <p class="text-sm text-gray-600">sarah@example.com</p>
680
+ <p class="text-xs text-gray-500">Interests: Art, Cooking</p>
681
+ </div>
682
+ <div class="bg-gray-50 p-3 rounded-lg">
683
+ <p class="font-medium">David Brown</p>
684
+ <p class="text-sm text-gray-600">david@example.com</p>
685
+ <p class="text-xs text-gray-500">Interests: Photography, Hiking</p>
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ <div>
691
+ <h4 class="font-medium text-gray-800 mb-2">Vendors (3)</h4>
692
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
693
+ <div class="bg-gray-50 p-3 rounded-lg">
694
+ <p class="font-medium">FitLife Gym</p>
695
+ <p class="text-sm text-gray-600">fitlife@example.com</p>
696
+ <p class="text-xs text-gray-500">Services: Personal Training, Yoga</p>
697
+ </div>
698
+ <div class="bg-gray-50 p-3 rounded-lg">
699
+ <p class="font-medium">Tech Workshops</p>
700
+ <p class="text-sm text-gray-600">tech@example.com</p>
701
+ <p class="text-xs text-gray-500">Services: Coding Classes, Seminars</p>
702
+ </div>
703
+ <div class="bg-gray-50 p-3 rounded-lg">
704
+ <p class="font-medium">Book Haven</p>
705
+ <p class="text-sm text-gray-600">books@example.com</p>
706
+ <p class="text-xs text-gray-500">Services: Book Clubs, Readings</p>
707
+ </div>
708
+ </div>
709
+ </div>
710
+
711
+ <div>
712
+ <h4 class="font-medium text-gray-800 mb-2">Agents (2)</h4>
713
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
714
+ <div class="bg-gray-50 p-3 rounded-lg">
715
+ <p class="font-medium">AI Agent</p>
716
+ <p class="text-sm text-gray-600">ai@example.com</p>
717
+ <p class="text-xs text-gray-500">AI-powered connection facilitator</p>
718
+ </div>
719
+ <div class="bg-gray-50 p-3 rounded-lg">
720
+ <p class="font-medium">Lisa Taylor</p>
721
+ <p class="text-sm text-gray-600">lisa@example.com</p>
722
+ <p class="text-xs text-gray-500">Human community manager</p>
723
+ </div>
724
+ </div>
725
+ </div>
726
+
727
+ <div>
728
+ <h4 class="font-medium text-gray-800 mb-2">Clubs (2)</h4>
729
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
730
+ <div class="bg-gray-50 p-3 rounded-lg">
731
+ <p class="font-medium">Tech Enthusiasts</p>
732
+ <p class="text-sm text-gray-600">12 members</p>
733
+ <p class="text-xs text-gray-500">Focus: Technology discussions</p>
734
+ </div>
735
+ <div class="bg-gray-50 p-3 rounded-lg">
736
+ <p class="font-medium">Book Club</p>
737
+ <p class="text-sm text-gray-600">8 members</p>
738
+ <p class="text-xs text-gray-500">Focus: Monthly book readings</p>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="mt-6 flex justify-end space-x-3">
745
+ <button id="useTestData" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark">
746
+ Use Test Data
747
+ </button>
748
+ <button id="closeTestData" class="border border-gray-300 px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-50">
749
+ Close
750
+ </button>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <script>
757
+ // DOM Elements
758
+ const loadingScreen = document.getElementById('loadingScreen');
759
+ const appContainer = document.getElementById('appContainer');
760
+ const authModal = document.getElementById('authModal');
761
+ const roleModal = document.getElementById('roleModal');
762
+ const closeAuthModal = document.getElementById('closeAuthModal');
763
+ const googleAuth = document.getElementById('googleAuth');
764
+ const whatsappAuth = document.getElementById('whatsappAuth');
765
+ const roleButtons = document.querySelectorAll('.role-btn');
766
+ const menuToggle = document.getElementById('menuToggle');
767
+ const mobileSidebar = document.getElementById('mobileSidebar');
768
+ const userMenuBtn = document.getElementById('userMenuBtn');
769
+ const userMenuDropdown = document.getElementById('userMenuDropdown');
770
+ const notificationsBtn = document.getElementById('notificationsBtn');
771
+ const notificationsDropdown = document.getElementById('notificationsDropdown');
772
+ const voiceSearchBtn = document.getElementById('voiceSearchBtn');
773
+ const logoutBtn = document.getElementById('logoutBtn');
774
+ const aiChatModal = document.getElementById('aiChatModal');
775
+ const closeAIChat = document.getElementById('closeAIChat');
776
+ const aiChatMessages = document.getElementById('aiChatMessages');
777
+ const aiChatInput = document.getElementById('aiChatInput');
778
+ const sendAIMessage = document.getElementById('sendAIMessage');
779
+ const testDataModal = document.getElementById('testDataModal');
780
+ const closeTestDataModal = document.getElementById('closeTestDataModal');
781
+ const useTestData = document.getElementById('useTestData');
782
+ const closeTestData = document.getElementById('closeTestData');
783
+ const installContainer = document.getElementById('installContainer');
784
+ const installButton = document.getElementById('installButton');
785
+ const dismissInstall = document.getElementById('dismissInstall');
786
+
787
+ // Current user state
788
+ let currentUser = null;
789
+ let currentRole = null;
790
+ let deferredPrompt = null;
791
+
792
+ // Simulate loading
793
+ setTimeout(() => {
794
+ loadingScreen.classList.add('hidden');
795
+ authModal.classList.remove('hidden');
796
+ }, 2000);
797
+
798
+ // Event Listeners
799
+ closeAuthModal.addEventListener('click', () => {
800
+ authModal.classList.add('hidden');
801
+ });
802
+
803
+ googleAuth.addEventListener('click', () => {
804
+ // Simulate Google auth
805
+ simulateAuth('Google');
806
+ });
807
+
808
+ whatsappAuth.addEventListener('click', () => {
809
+ const number = document.getElementById('whatsappNumber').value;
810
+ if (number) {
811
+ // Simulate WhatsApp auth
812
+ simulateAuth('WhatsApp');
813
+ } else {
814
+ alert('Please enter your WhatsApp number');
815
+ }
816
+ });
817
+
818
+ roleButtons.forEach(button => {
819
+ button.addEventListener('click', () => {
820
+ currentRole = button.getAttribute('data-role');
821
+ document.getElementById('userRole').textContent = currentRole.charAt(0).toUpperCase() + currentRole.slice(1);
822
+ roleModal.classList.add('hidden');
823
+ appContainer.classList.remove('hidden');
824
+
825
+ // Update UI based on role
826
+ updateUIForRole(currentRole);
827
+ });
828
+ });
829
+
830
+ menuToggle.addEventListener('click', () => {
831
+ mobileSidebar.classList.toggle('-translate-x-full');
832
+ });
833
+
834
+ userMenuBtn.addEventListener('click', () => {
835
+ userMenuDropdown.classList.toggle('hidden');
836
+ notificationsDropdown.classList.add('hidden');
837
+ });
838
+
839
+ notificationsBtn.addEventListener('click', () => {
840
+ notificationsDropdown.classList.toggle('hidden');
841
+ userMenuDropdown.classList.add('hidden');
842
+ });
843
+
844
+ voiceSearchBtn.addEventListener('click', () => {
845
+ startVoiceSearch();
846
+ });
847
+
848
+ logoutBtn.addEventListener('click', () => {
849
+ // Simulate logout
850
+ currentUser = null;
851
+ currentRole = null;
852
+ appContainer.classList.add('hidden');
853
+ authModal.classList.remove('hidden');
854
+ userMenuDropdown.classList.add('hidden');
855
+ });
856
+
857
+ closeAIChat.addEventListener('click', () => {
858
+ aiChatModal.classList.add('hidden');
859
+ });
860
+
861
+ sendAIMessage.addEventListener('click', () => {
862
+ sendAIMessageHandler();
863
+ });
864
+
865
+ aiChatInput.addEventListener('keypress', (e) => {
866
+ if (e.key === 'Enter') {
867
+ sendAIMessageHandler();
868
+ }
869
+ });
870
+
871
+ document.addEventListener('click', (e) => {
872
+ // Close dropdowns when clicking outside
873
+ if (!userMenuBtn.contains(e.target) && !userMenuDropdown.contains(e.target)) {
874
+ userMenuDropdown.classList.add('hidden');
875
+ }
876
+
877
+ if (!notificationsBtn.contains(e.target) && !notificationsDropdown.contains(e.target)) {
878
+ notificationsDropdown.classList.add('hidden');
879
+ }
880
+ });
881
+
882
+ // Show test data modal after 5 seconds (for demo purposes)
883
+ setTimeout(() => {
884
+ testDataModal.classList.remove('hidden');
885
+ }, 5000);
886
+
887
+ closeTestDataModal.addEventListener('click', () => {
888
+ testDataModal.classList.add('hidden');
889
+ });
890
+
891
+ closeTestData.addEventListener('click', () => {
892
+ testDataModal.classList.add('hidden');
893
+ });
894
+
895
+ useTestData.addEventListener('click', () => {
896
+ // Simulate loading test data
897
+ testDataModal.classList.add('hidden');
898
+ alert('Test data loaded successfully!');
899
+ });
900
+
901
+ // PWA Installation
902
+ window.addEventListener('beforeinstallprompt', (e) => {
903
+ // Prevent the mini-infobar from appearing on mobile
904
+ e.preventDefault();
905
+ // Stash the event so it can be triggered later.
906
+ deferredPrompt = e;
907
+ // Update UI notify the user they can install the PWA
908
+ installContainer.classList.remove('hidden');
909
+ });
910
+
911
+ installButton.addEventListener('click', () => {
912
+ // Hide the app provided install promotion
913
+ installContainer.classList.add('hidden');
914
+ // Show the install prompt
915
+ deferredPrompt.prompt();
916
+ // Wait for the user to respond to the prompt
917
+ deferredPrompt.userChoice.then((choiceResult) => {
918
+ if (choiceResult.outcome === 'accepted') {
919
+ console.log('User accepted the install prompt');
920
+ } else {
921
+ console.log('User dismissed the install prompt');
922
+ }
923
+ deferredPrompt = null;
924
+ });
925
+ });
926
+
927
+ dismissInstall.addEventListener('click', () => {
928
+ installContainer.classList.add('hidden');
929
+ });
930
+
931
+ // Functions
932
+ function simulateAuth(provider) {
933
+ // Simulate authentication
934
+ loadingScreen.classList.remove('hidden');
935
+ authModal.classList.add('hidden');
936
+
937
+ setTimeout(() => {
938
+ currentUser = {
939
+ name: provider === 'Google' ? 'Demo User' : 'WhatsApp User',
940
+ email: provider === 'Google' ? 'demo@example.com' : 'whatsapp@example.com',
941
+ initial: provider === 'Google' ? 'D' : 'W'
942
+ };
943
+
944
+ document.getElementById('userInitial').textContent = currentUser.initial;
945
+ document.getElementById('userEmail').textContent = currentUser.email;
946
+ document.getElementById('userName').textContent = currentUser.name;
947
+
948
+ loadingScreen.classList.add('hidden');
949
+ roleModal.classList.remove('hidden');
950
+
951
+ // Detect location
952
+ if (navigator.geolocation) {
953
+ navigator.geolocation.getCurrentPosition(
954
+ (position) => {
955
+ // In a real app, you would reverse geocode to get city/country
956
+ document.getElementById('userLocation').textContent = `Lat: ${position.coords.latitude.toFixed(2)}, Long: ${position.coords.longitude.toFixed(2)}`;
957
+ },
958
+ (error) => {
959
+ document.getElementById('userLocation').textContent = 'Location access denied';
960
+ }
961
+ );
962
+ } else {
963
+ document.getElementById('userLocation').textContent = 'Geolocation not supported';
964
+ }
965
+ }, 1500);
966
+ }
967
+
968
+ function updateUIForRole(role) {
969
+ // In a real app, you would update the UI based on the user's role
970
+ console.log(`UI updated for ${role} role`);
971
+ }
972
+
973
+ function startVoiceSearch() {
974
+ if ('webkitSpeechRecognition' in window) {
975
+ const recognition = new webkitSpeechRecognition();
976
+ recognition.lang = 'en-US';
977
+ recognition.start();
978
+
979
+ voiceSearchBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>';
980
+ voiceSearchBtn.classList.add('animate-pulse');
981
+
982
+ recognition.onresult = (event) => {
983
+ const transcript = event.results[0][0].transcript;
984
+ alert(`You said: ${transcript}`);
985
+ voiceSearchBtn.innerHTML = '<i class="fas fa-microphone"></i>';
986
+ voiceSearchBtn.classList.remove('animate-pulse');
987
+ };
988
+
989
+ recognition.onerror = (event) => {
990
+ console.error('Voice recognition error', event.error);
991
+ voiceSearchBtn.innerHTML = '<i class="fas fa-microphone"></i>';
992
+ voiceSearchBtn.classList.remove('animate-pulse');
993
+ };
994
+ } else {
995
+ alert('Voice search is not supported in your browser');
996
+ }
997
+ }
998
+
999
+ function sendAIMessageHandler() {
1000
+ const message = aiChatInput.value.trim();
1001
+ if (message) {
1002
+ // Add user message
1003
+ addAIMessage(message, true);
1004
+ aiChatInput.value = '';
1005
+
1006
+ // Simulate AI response after a delay
1007
+ setTimeout(() => {
1008
+ const responses = [
1009
+ "I understand you're asking about " + message + ". Here's what I can tell you...",
1010
+ "That's an interesting question about " + message + ". Let me help with that.",
1011
+ "I've analyzed your query about " + message + " and here's my suggestion...",
1012
+ message + " is something I can certainly help with. Here's the information you need."
1013
+ ];
1014
+
1015
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
1016
+ addAIMessage(randomResponse, false);
1017
+ }, 1000);
1018
+ }
1019
+ }
1020
+
1021
+ function addAIMessage(message, isUser) {
1022
+ const messageDiv = document.createElement('div');
1023
+ messageDiv.className = 'flex';
1024
+
1025
+ const bubbleDiv = document.createElement('div');
1026
+ bubbleDiv.className = isUser ? 'user-bubble chat-bubble px-4 py-2' : 'other-bubble chat-bubble px-4 py-2';
1027
+
1028
+ const messageText = document.createElement('p');
1029
+ messageText.className = 'text-sm';
1030
+ messageText.textContent = message;
1031
+
1032
+ const timeText = document.createElement('p');
1033
+ timeText.className = 'text-xs text-gray-500 mt-1';
1034
+ timeText.textContent = 'Just now';
1035
+
1036
+ bubbleDiv.appendChild(messageText);
1037
+ bubbleDiv.appendChild(timeText);
1038
+ messageDiv.appendChild(bubbleDiv);
1039
+ aiChatMessages.appendChild(messageDiv);
1040
+
1041
+ // Scroll to bottom
1042
+ aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
1043
+ }
1044
+
1045
+ // Initialize AI chat button in header
1046
+ document.querySelector('[aria-label="AI Assistant"]').addEventListener('click', () => {
1047
+ aiChatModal.classList.remove('hidden');
1048
+ });
1049
+
1050
+ // Service Worker Registration for PWA
1051
+ if ('serviceWorker' in navigator) {
1052
+ window.addEventListener('load', () => {
1053
+ navigator.serviceWorker.register('/sw.js').then(registration => {
1054
+ console.log('ServiceWorker registration successful with scope: ', registration.scope);
1055
+ }).catch(err => {
1056
+ console.log('ServiceWorker registration failed: ', err);
1057
+ });
1058
+ });
1059
+ }
1060
+ </script>
1061
+ <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=isubbu/first" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1062
+ </html>