Hugging Face's logo

Spaces:
theaimoron
/
pauls-try-1
Running

App Files Community
theaimoron commited on
Commit
345fdb2
·
verified ·
1 Parent(s): 406ed28

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1343 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pauls Try 1
3
- emoji: 🏢
4
- colorFrom: gray
5
  colorTo: red
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: pauls-try-1
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,1343 @@
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>Paul's Barbershop - Premium Booking</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ transition: all 0.3s ease;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
19
+ }
20
+
21
+ .service-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
24
+ }
25
+
26
+ .slot-btn:hover {
27
+ transform: scale(1.05);
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #dc2626;
32
+ }
33
+
34
+ .calendar-day:hover:not(.disabled) {
35
+ background-color: #f3f4f6;
36
+ }
37
+
38
+ .fade-in {
39
+ animation: fadeIn 0.3s ease-in-out;
40
+ }
41
+
42
+ @keyframes fadeIn {
43
+ from { opacity: 0; transform: translateY(10px); }
44
+ to { opacity: 1; transform: translateY(0); }
45
+ }
46
+
47
+ .slide-in {
48
+ animation: slideIn 0.3s ease-out;
49
+ }
50
+
51
+ @keyframes slideIn {
52
+ from { transform: translateX(100%); }
53
+ to { transform: translateX(0); }
54
+ }
55
+
56
+ .pulse {
57
+ animation: pulse 2s infinite;
58
+ }
59
+
60
+ @keyframes pulse {
61
+ 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
62
+ 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
63
+ 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-100">
68
+ <!-- Landing Page -->
69
+ <div id="landing" class="min-h-screen gradient-bg text-white flex flex-col items-center justify-center relative overflow-hidden">
70
+ <div class="absolute inset-0 bg-black opacity-40"></div>
71
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80')] bg-cover bg-center filter blur-sm"></div>
72
+
73
+ <div class="relative z-10 text-center px-6 w-full max-w-4xl">
74
+ <div class="mb-12">
75
+ <h1 class="text-5xl font-bold mb-2 tracking-tight">PAUL'S</h1>
76
+ <p class="text-2xl font-light uppercase tracking-widest">Barbershop</p>
77
+ </div>
78
+
79
+ <p class="text-xl mb-12 font-light max-w-2xl mx-auto leading-relaxed">
80
+ Experience premium grooming services with our master barbers. Book your appointment seamlessly with our online system.
81
+ </p>
82
+
83
+ <div class="flex flex-col sm:flex-row justify-center gap-6">
84
+ <button onclick="showCustomerLogin()" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
85
+ Customer Booking
86
+ </button>
87
+ <button onclick="showVendorLogin()" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
88
+ Vendor Portal
89
+ </button>
90
+ </div>
91
+
92
+ <button class="mt-16 text-gray-300 hover:text-white transition-all flex items-center justify-center mx-auto">
93
+ <span class="mr-2">Learn More</span>
94
+ <i class="fas fa-chevron-down"></i>
95
+ </button>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Customer Login Modal -->
100
+ <div id="customerLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
101
+ <div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 slide-in">
102
+ <div class="flex justify-between items-center mb-6">
103
+ <h2 class="text-2xl font-bold text-gray-800">Customer Login</h2>
104
+ <button onclick="hideModal('customerLoginModal')" class="text-gray-500 hover:text-gray-700">
105
+ <i class="fas fa-times"></i>
106
+ </button>
107
+ </div>
108
+
109
+ <form class="space-y-4">
110
+ <div>
111
+ <label class="block text-gray-700 mb-2">Email</label>
112
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
113
+ </div>
114
+
115
+ <div>
116
+ <label class="block text-gray-700 mb-2">Password</label>
117
+ <input type="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
118
+ </div>
119
+
120
+ <div class="flex justify-between items-center">
121
+ <div class="flex items-center">
122
+ <input type="checkbox" id="remember" class="mr-2">
123
+ <label for="remember" class="text-gray-700">Remember me</label>
124
+ </div>
125
+ <a href="#" class="text-blue-600 hover:underline">Forgot password?</a>
126
+ </div>
127
+
128
+ <button type="button" onclick="loginCustomer()" class="w-full bg-red-600 text-white py-3 rounded-lg font-medium hover:bg-red-700 transition mt-6">
129
+ Login
130
+ </button>
131
+
132
+ <div class="text-center mt-4">
133
+ <p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:underline">Sign up</a></p>
134
+ </div>
135
+ </form>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Vendor Login Modal -->
140
+ <div id="vendorLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
141
+ <div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 slide-in">
142
+ <div class="flex justify-between items-center mb-6">
143
+ <h2 class="text-2xl font-bold text-gray-800">Vendor Login</h2>
144
+ <button onclick="hideModal('vendorLoginModal')" class="text-gray-500 hover:text-gray-700">
145
+ <i class="fas fa-times"></i>
146
+ </button>
147
+ </div>
148
+
149
+ <form class="space-y-4">
150
+ <div>
151
+ <label class="block text-gray-700 mb-2">Username</label>
152
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
153
+ </div>
154
+
155
+ <div>
156
+ <label class="block text-gray-700 mb-2">Password</label>
157
+ <input type="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
158
+ </div>
159
+
160
+ <div class="flex justify-between items-center">
161
+ <div class="flex items-center">
162
+ <input type="checkbox" id="rememberVendor" class="mr-2">
163
+ <label for="rememberVendor" class="text-gray-700">Remember me</label>
164
+ </div>
165
+ <a href="#" class="text-blue-600 hover:underline">Forgot password?</a>
166
+ </div>
167
+
168
+ <button type="button" onclick="loginVendor()" class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mt-6">
169
+ Login
170
+ </button>
171
+ </form>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Customer Dashboard -->
176
+ <div id="customerDashboard" class="hidden">
177
+ <!-- Header -->
178
+ <header class="bg-white shadow-sm sticky top-0 z-40">
179
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
180
+ <div class="flex items-center">
181
+ <h1 class="text-xl font-bold text-gray-800">PAUL'S</h1>
182
+ </div>
183
+
184
+ <div class="flex items-center space-x-4">
185
+ <button class="text-gray-600 hover:text-gray-900">
186
+ <i class="fas fa-bell text-xl"></i>
187
+ </button>
188
+ <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer">
189
+ <i class="fas fa-user text-gray-600"></i>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </header>
194
+
195
+ <!-- Main Content -->
196
+ <main class="container mx-auto px-4 py-6 pb-24">
197
+ <!-- Tab Navigation -->
198
+ <div id="customerTabs" class="flex justify-around border-b mb-6">
199
+ <button onclick="switchTab('services')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900 tab-active" data-tab="services">
200
+ <i class="fas fa-cut mr-2"></i> Services
201
+ </button>
202
+ <button onclick="switchTab('calendar')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="calendar">
203
+ <i class="far fa-calendar-alt mr-2"></i> Calendar
204
+ </button>
205
+ <button onclick="switchTab('timeslots')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="timeslots">
206
+ <i class="far fa-clock mr-2"></i> Timeslots
207
+ </button>
208
+ <button onclick="switchTab('locations')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="locations">
209
+ <i class="fas fa-map-marker-alt mr-2"></i> Locations
210
+ </button>
211
+ <button onclick="switchTab('payment')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="payment">
212
+ <i class="fas fa-credit-card mr-2"></i> Payment
213
+ </button>
214
+ </div>
215
+
216
+ <!-- Tab Content -->
217
+ <div id="tabContent">
218
+ <!-- Services Tab -->
219
+ <div id="servicesTab" class="fade-in">
220
+ <div class="flex justify-between items-center mb-6">
221
+ <h2 class="text-2xl font-bold text-gray-800">Our Services</h2>
222
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
223
+ <i class="fas fa-filter mr-2"></i> Filter
224
+ </button>
225
+ </div>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
228
+ <!-- Service Card 1 -->
229
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Haircut', 25)">
230
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
231
+ <i class="fas fa-cut text-5xl text-gray-500"></i>
232
+ </div>
233
+ <div class="p-5">
234
+ <h3 class="text-xl font-semibold mb-2">Classic Haircut</h3>
235
+ <p class="text-gray-600 mb-4">Precision haircut with clippers and scissors for a clean, sharp look.</p>
236
+ <div class="flex justify-between items-center">
237
+ <span class="text-lg font-bold">$25</span>
238
+ <span class="text-sm text-gray-500">45 min</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Service Card 2 -->
244
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Beard Trim', 15)">
245
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
246
+ <i class="fas fa-male text-5xl text-gray-500"></i>
247
+ </div>
248
+ <div class="p-5">
249
+ <h3 class="text-xl font-semibold mb-2">Beard Trim & Shape</h3>
250
+ <p class="text-gray-600 mb-4">Professional beard trimming and shaping to maintain your style.</p>
251
+ <div class="flex justify-between items-center">
252
+ <span class="text-lg font-bold">$15</span>
253
+ <span class="text-sm text-gray-500">30 min</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Service Card 3 -->
259
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Haircut + Beard', 35)">
260
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
261
+ <i class="fas fa-user-tie text-5xl text-gray-500"></i>
262
+ </div>
263
+ <div class="p-5">
264
+ <h3 class="text-xl font-semibold mb-2">Haircut + Beard Combo</h3>
265
+ <p class="text-gray-600 mb-4">Complete grooming package with haircut and beard service.</p>
266
+ <div class="flex justify-between items-center">
267
+ <span class="text-lg font-bold">$35</span>
268
+ <span class="text-sm text-gray-500">60 min</span>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Service Card 4 -->
274
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Hot Towel Shave', 30)">
275
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
276
+ <i class="fas fa-fire text-5xl text-gray-500"></i>
277
+ </div>
278
+ <div class="p-5">
279
+ <h3 class="text-xl font-semibold mb-2">Hot Towel Shave</h3>
280
+ <p class="text-gray-600 mb-4">Traditional straight razor shave with hot towels and premium products.</p>
281
+ <div class="flex justify-between items-center">
282
+ <span class="text-lg font-bold">$30</span>
283
+ <span class="text-sm text-gray-500">45 min</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Service Card 5 -->
289
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Hair Color', 50)">
290
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
291
+ <i class="fas fa-paint-brush text-5xl text-gray-500"></i>
292
+ </div>
293
+ <div class="p-5">
294
+ <h3 class="text-xl font-semibold mb-2">Hair Coloring</h3>
295
+ <p class="text-gray-600 mb-4">Professional hair coloring services for men with premium products.</p>
296
+ <div class="flex justify-between items-center">
297
+ <span class="text-lg font-bold">$50</span>
298
+ <span class="text-sm text-gray-500">90 min</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Service Card 6 -->
304
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Kids Cut', 20)">
305
+ <div class="h-40 bg-gray-200 flex items-center justify-center">
306
+ <i class="fas fa-child text-5xl text-gray-500"></i>
307
+ </div>
308
+ <div class="p-5">
309
+ <h3 class="text-xl font-semibold mb-2">Kids Haircut</h3>
310
+ <p class="text-gray-600 mb-4">Special haircut service for children with a fun, comfortable experience.</p>
311
+ <div class="flex justify-between items-center">
312
+ <span class="text-lg font-bold">$20</span>
313
+ <span class="text-sm text-gray-500">30 min</span>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Calendar Tab -->
321
+ <div id="calendarTab" class="hidden fade-in">
322
+ <div class="flex justify-between items-center mb-6">
323
+ <h2 class="text-2xl font-bold text-gray-800">Select Date</h2>
324
+ <div class="flex items-center space-x-4">
325
+ <button onclick="prevMonth()" class="text-gray-600 hover:text-gray-900">
326
+ <i class="fas fa-chevron-left"></i>
327
+ </button>
328
+ <span id="currentMonth" class="font-medium">June 2023</span>
329
+ <button onclick="nextMonth()" class="text-gray-600 hover:text-gray-900">
330
+ <i class="fas fa-chevron-right"></i>
331
+ </button>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
336
+ <div class="grid grid-cols-7 bg-gray-100 border-b">
337
+ <div class="py-3 text-center font-medium text-gray-600">Sun</div>
338
+ <div class="py-3 text-center font-medium text-gray-600">Mon</div>
339
+ <div class="py-3 text-center font-medium text-gray-600">Tue</div>
340
+ <div class="py-3 text-center font-medium text-gray-600">Wed</div>
341
+ <div class="py-3 text-center font-medium text-gray-600">Thu</div>
342
+ <div class="py-3 text-center font-medium text-gray-600">Fri</div>
343
+ <div class="py-3 text-center font-medium text-gray-600">Sat</div>
344
+ </div>
345
+
346
+ <div id="calendarDays" class="grid grid-cols-7">
347
+ <!-- Calendar days will be populated by JavaScript -->
348
+ </div>
349
+ </div>
350
+
351
+ <div class="mt-6 flex justify-between">
352
+ <button onclick="switchTab('services')" class="text-gray-600 hover:text-gray-900 flex items-center">
353
+ <i class="fas fa-arrow-left mr-2"></i> Back to Services
354
+ </button>
355
+ <button onclick="goToToday()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
356
+ Today
357
+ </button>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Timeslots Tab -->
362
+ <div id="timeslotsTab" class="hidden fade-in">
363
+ <div class="flex justify-between items-center mb-6">
364
+ <div>
365
+ <h2 class="text-2xl font-bold text-gray-800">Available Times</h2>
366
+ <p id="selectedDateDisplay" class="text-gray-600">June 15, 2023</p>
367
+ </div>
368
+ <button onclick="switchTab('calendar')" class="text-gray-600 hover:text-gray-900 flex items-center">
369
+ <i class="fas fa-arrow-left mr-2"></i> Change Date
370
+ </button>
371
+ </div>
372
+
373
+ <div class="space-y-3">
374
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
375
+ <div class="p-4 border-b">
376
+ <h3 class="font-medium text-gray-800">Morning</h3>
377
+ </div>
378
+ <div class="grid grid-cols-3 gap-3 p-4">
379
+ <button onclick="selectTimeSlot('9:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
380
+ 9:00 AM
381
+ </button>
382
+ <button onclick="selectTimeSlot('9:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
383
+ 9:30 AM
384
+ </button>
385
+ <button onclick="selectTimeSlot('10:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
386
+ 10:00 AM
387
+ </button>
388
+ <button onclick="selectTimeSlot('10:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
389
+ 10:30 AM
390
+ </button>
391
+ <button onclick="selectTimeSlot('11:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
392
+ 11:00 AM
393
+ </button>
394
+ <button onclick="selectTimeSlot('11:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
395
+ 11:30 AM
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
401
+ <div class="p-4 border-b">
402
+ <h3 class="font-medium text-gray-800">Afternoon</h3>
403
+ </div>
404
+ <div class="grid grid-cols-3 gap-3 p-4">
405
+ <button onclick="selectTimeSlot('12:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
406
+ 12:00 PM
407
+ </button>
408
+ <button onclick="selectTimeSlot('12:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
409
+ 12:30 PM
410
+ </button>
411
+ <button onclick="selectTimeSlot('1:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
412
+ 1:00 PM
413
+ </button>
414
+ <button onclick="selectTimeSlot('1:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
415
+ 1:30 PM
416
+ </button>
417
+ <button onclick="selectTimeSlot('2:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
418
+ 2:00 PM
419
+ </button>
420
+ <button onclick="selectTimeSlot('2:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
421
+ 2:30 PM
422
+ </button>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
427
+ <div class="p-4 border-b">
428
+ <h3 class="font-medium text-gray-800">Evening</h3>
429
+ </div>
430
+ <div class="grid grid-cols-3 gap-3 p-4">
431
+ <button onclick="selectTimeSlot('3:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
432
+ 3:00 PM
433
+ </button>
434
+ <button onclick="selectTimeSlot('3:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
435
+ 3:30 PM
436
+ </button>
437
+ <button onclick="selectTimeSlot('4:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
438
+ 4:00 PM
439
+ </button>
440
+ <button onclick="selectTimeSlot('4:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
441
+ 4:30 PM
442
+ </button>
443
+ <button onclick="selectTimeSlot('5:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
444
+ 5:00 PM
445
+ </button>
446
+ <button onclick="selectTimeSlot('5:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
447
+ 5:30 PM
448
+ </button>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="mt-6 flex justify-between">
454
+ <button onclick="switchTab('calendar')" class="text-gray-600 hover:text-gray-900 flex items-center">
455
+ <i class="fas fa-arrow-left mr-2"></i> Back to Calendar
456
+ </button>
457
+ <button onclick="switchTab('locations')" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium">
458
+ Next: Choose Location
459
+ </button>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Locations Tab -->
464
+ <div id="locationsTab" class="hidden fade-in">
465
+ <div class="flex justify-between items-center mb-6">
466
+ <div>
467
+ <h2 class="text-2xl font-bold text-gray-800">Our Locations</h2>
468
+ <p class="text-gray-600">Select your preferred barbershop</p>
469
+ </div>
470
+ <button onclick="switchTab('timeslots')" class="text-gray-600 hover:text-gray-900 flex items-center">
471
+ <i class="fas fa-arrow-left mr-2"></i> Back to Timeslots
472
+ </button>
473
+ </div>
474
+
475
+ <div class="space-y-6">
476
+ <!-- Location Card 1 -->
477
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
478
+ <div class="md:flex">
479
+ <div class="md:w-1/3 h-48 bg-gray-200 flex items-center justify-center">
480
+ <i class="fas fa-store text-5xl text-gray-500"></i>
481
+ </div>
482
+ <div class="p-6 md:w-2/3">
483
+ <h3 class="text-xl font-semibold mb-2">Bedok Central</h3>
484
+ <div class="flex items-center text-gray-600 mb-3">
485
+ <i class="fas fa-map-marker-alt mr-2"></i>
486
+ <span>311 New Upper Changi Rd, #01-725, Singapore 467360</span>
487
+ </div>
488
+ <div class="flex items-center text-gray-600 mb-4">
489
+ <i class="fas fa-phone mr-2"></i>
490
+ <span>+65 6789 1234</span>
491
+ </div>
492
+ <div class="flex justify-between">
493
+ <button onclick="selectLocation('Bedok')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium">
494
+ Select This Location
495
+ </button>
496
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
497
+ <i class="fas fa-directions mr-2"></i> Get Directions
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Location Card 2 -->
505
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
506
+ <div class="md:flex">
507
+ <div class="md:w-1/3 h-48 bg-gray-200 flex items-center justify-center">
508
+ <i class="fas fa-store text-5xl text-gray-500"></i>
509
+ </div>
510
+ <div class="p-6 md:w-2/3">
511
+ <h3 class="text-xl font-semibold mb-2">Pasir Ris</h3>
512
+ <div class="flex items-center text-gray-600 mb-3">
513
+ <i class="fas fa-map-marker-alt mr-2"></i>
514
+ <span>1 Pasir Ris Central, #02-345, Singapore 519457</span>
515
+ </div>
516
+ <div class="flex items-center text-gray-600 mb-4">
517
+ <i class="fas fa-phone mr-2"></i>
518
+ <span>+65 6789 5678</span>
519
+ </div>
520
+ <div class="flex justify-between">
521
+ <button onclick="selectLocation('Pasir Ris')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium">
522
+ Select This Location
523
+ </button>
524
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
525
+ <i class="fas fa-directions mr-2"></i> Get Directions
526
+ </button>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="mt-6 flex justify-between">
534
+ <button onclick="switchTab('timeslots')" class="text-gray-600 hover:text-gray-900 flex items-center">
535
+ <i class="fas fa-arrow-left mr-2"></i> Back to Timeslots
536
+ </button>
537
+ <button onclick="switchTab('payment')" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium">
538
+ Next: Payment
539
+ </button>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Payment Tab -->
544
+ <div id="paymentTab" class="hidden fade-in">
545
+ <div class="flex justify-between items-center mb-6">
546
+ <h2 class="text-2xl font-bold text-gray-800">Payment</h2>
547
+ <button onclick="switchTab('locations')" class="text-gray-600 hover:text-gray-900 flex items-center">
548
+ <i class="fas fa-arrow-left mr-2"></i> Back to Locations
549
+ </button>
550
+ </div>
551
+
552
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
553
+ <div class="p-6 border-b">
554
+ <h3 class="font-medium text-gray-800">Booking Summary</h3>
555
+ </div>
556
+ <div class="p-6 space-y-4">
557
+ <div class="flex justify-between">
558
+ <span class="text-gray-600">Service:</span>
559
+ <span id="summaryService" class="font-medium">Classic Haircut</span>
560
+ </div>
561
+ <div class="flex justify-between">
562
+ <span class="text-gray-600">Date:</span>
563
+ <span id="summaryDate" class="font-medium">June 15, 2023</span>
564
+ </div>
565
+ <div class="flex justify-between">
566
+ <span class="text-gray-600">Time:</span>
567
+ <span id="summaryTime" class="font-medium">10:00 AM</span>
568
+ </div>
569
+ <div class="flex justify-between">
570
+ <span class="text-gray-600">Location:</span>
571
+ <span id="summaryLocation" class="font-medium">Bedok Central</span>
572
+ </div>
573
+ <div class="flex justify-between pt-4 border-t">
574
+ <span class="text-gray-600">Total:</span>
575
+ <span id="summaryPrice" class="font-bold text-lg">$25.00</span>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
581
+ <div class="p-6 border-b">
582
+ <h3 class="font-medium text-gray-800">Payment Method</h3>
583
+ </div>
584
+ <div class="p-6 space-y-4">
585
+ <button onclick="selectPaymentMethod('Cash')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
586
+ <div class="flex items-center">
587
+ <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
588
+ <i class="fas fa-money-bill-wave text-gray-600"></i>
589
+ </div>
590
+ <span class="font-medium">Cash</span>
591
+ </div>
592
+ <i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
593
+ </button>
594
+
595
+ <button onclick="selectPaymentMethod('Nets')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
596
+ <div class="flex items-center">
597
+ <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
598
+ <i class="fas fa-credit-card text-gray-600"></i>
599
+ </div>
600
+ <span class="font-medium">Nets</span>
601
+ </div>
602
+ <i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
603
+ </button>
604
+
605
+ <button onclick="selectPaymentMethod('PayNow')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
606
+ <div class="flex items-center">
607
+ <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
608
+ <i class="fas fa-mobile-alt text-gray-600"></i>
609
+ </div>
610
+ <span class="font-medium">PayNow</span>
611
+ </div>
612
+ <i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
613
+ </button>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
618
+ <div class="p-6 border-b">
619
+ <h3 class="font-medium text-gray-800">Customer Information</h3>
620
+ </div>
621
+ <div class="p-6">
622
+ <div class="mb-4">
623
+ <label class="block text-gray-700 mb-2">Full Name</label>
624
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
625
+ </div>
626
+ <div class="mb-4">
627
+ <label class="block text-gray-700 mb-2">Phone Number</label>
628
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
629
+ </div>
630
+ <div>
631
+ <label class="block text-gray-700 mb-2">Special Requests (Optional)</label>
632
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" rows="3"></textarea>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <button onclick="confirmBooking()" class="w-full bg-red-600 hover:bg-red-700 text-white py-4 rounded-lg font-bold text-lg transition-all pulse">
638
+ Confirm Booking
639
+ </button>
640
+ </div>
641
+ </div>
642
+ </main>
643
+
644
+ <!-- Bottom Navigation (Mobile) -->
645
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg md:hidden flex justify-around items-center h-16 z-50">
646
+ <button onclick="switchTab('services')" class="flex flex-col items-center justify-center text-red-600">
647
+ <i class="fas fa-cut text-xl"></i>
648
+ <span class="text-xs mt-1">Services</span>
649
+ </button>
650
+ <button onclick="switchTab('calendar')" class="flex flex-col items-center justify-center text-gray-600">
651
+ <i class="far fa-calendar-alt text-xl"></i>
652
+ <span class="text-xs mt-1">Calendar</span>
653
+ </button>
654
+ <button onclick="switchTab('timeslots')" class="flex flex-col items-center justify-center text-gray-600">
655
+ <i class="far fa-clock text-xl"></i>
656
+ <span class="text-xs mt-1">Timeslots</span>
657
+ </button>
658
+ <button onclick="switchTab('locations')" class="flex flex-col items-center justify-center text-gray-600">
659
+ <i class="fas fa-map-marker-alt text-xl"></i>
660
+ <span class="text-xs mt-1">Locations</span>
661
+ </button>
662
+ <button onclick="switchTab('payment')" class="flex flex-col items-center justify-center text-gray-600">
663
+ <i class="fas fa-credit-card text-xl"></i>
664
+ <span class="text-xs mt-1">Payment</span>
665
+ </button>
666
+ </nav>
667
+ </div>
668
+
669
+ <!-- Vendor Dashboard -->
670
+ <div id="vendorDashboard" class="hidden min-h-screen bg-gray-100">
671
+ <!-- Sidebar -->
672
+ <div class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg hidden md:block">
673
+ <div class="flex items-center justify-center h-16 px-4 border-b">
674
+ <h1 class="text-xl font-bold text-gray-800">Vendor Portal</h1>
675
+ </div>
676
+ <nav class="p-4">
677
+ <div class="space-y-2">
678
+ <button onclick="switchVendorTab('appointments')" class="w-full flex items-center p-3 text-white bg-red-600 rounded-lg">
679
+ <i class="fas fa-calendar-check mr-3"></i>
680
+ <span>Appointments</span>
681
+ </button>
682
+ <button onclick="switchVendorTab('sales')" class="w-full flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg">
683
+ <i class="fas fa-chart-bar mr-3"></i>
684
+ <span>Sales Report</span>
685
+ </button>
686
+ <button onclick="switchVendorTab('settings')" class="w-full flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg">
687
+ <i class="fas fa-cog mr-3"></i>
688
+ <span>Settings</span>
689
+ </button>
690
+ </div>
691
+ </nav>
692
+ </div>
693
+
694
+ <!-- Main Content -->
695
+ <div class="md:ml-64">
696
+ <!-- Header -->
697
+ <header class="bg-white shadow-sm sticky top-0 z-40">
698
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
699
+ <button class="md:hidden text-gray-600 hover:text-gray-900">
700
+ <i class="fas fa-bars text-xl"></i>
701
+ </button>
702
+
703
+ <div class="flex items-center space-x-4">
704
+ <div class="relative">
705
+ <button class="text-gray-600 hover:text-gray-900">
706
+ <i class="fas fa-bell text-xl"></i>
707
+ </button>
708
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-600 rounded-full"></span>
709
+ </div>
710
+ <div class="flex items-center">
711
+ <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer">
712
+ <i class="fas fa-user text-gray-600"></i>
713
+ </div>
714
+ <span class="ml-2 font-medium hidden md:inline">Admin</span>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </header>
719
+
720
+ <!-- Vendor Tab Content -->
721
+ <main class="container mx-auto px-4 py-6">
722
+ <!-- Appointments Tab -->
723
+ <div id="vendorAppointmentsTab">
724
+ <div class="flex justify-between items-center mb-6">
725
+ <h2 class="text-2xl font-bold text-gray-800">Today's Appointments</h2>
726
+ <div class="flex items-center space-x-4">
727
+ <button class="text-gray-600 hover:text-gray-900">
728
+ <i class="fas fa-filter"></i>
729
+ </button>
730
+ <button class="text-gray-600 hover:text-gray-900">
731
+ <i class="fas fa-ellipsis-v"></i>
732
+ </button>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
737
+ <div class="grid grid-cols-12 bg-gray-100 p-4 border-b font-medium text-gray-700">
738
+ <div class="col-span-2">Time</div>
739
+ <div class="col-span-3">Customer</div>
740
+ <div class="col-span-3">Service</div>
741
+ <div class="col-span-2">Location</div>
742
+ <div class="col-span-2">Actions</div>
743
+ </div>
744
+
745
+ <div class="divide-y">
746
+ <!-- Appointment 1 -->
747
+ <div class="grid grid-cols-12 p-4 items-center">
748
+ <div class="col-span-2 font-medium">9:00 AM</div>
749
+ <div class="col-span-3">John Smith</div>
750
+ <div class="col-span-3">Classic Haircut</div>
751
+ <div class="col-span-2">Bedok</div>
752
+ <div class="col-span-2 flex space-x-2">
753
+ <button class="text-blue-600 hover:text-blue-800">
754
+ <i class="fas fa-edit"></i>
755
+ </button>
756
+ <button class="text-red-600 hover:text-red-800">
757
+ <i class="fas fa-times"></i>
758
+ </button>
759
+ <button class="text-green-600 hover:text-green-800">
760
+ <i class="fas fa-check"></i>
761
+ </button>
762
+ </div>
763
+ </div>
764
+
765
+ <!-- Appointment 2 -->
766
+ <div class="grid grid-cols-12 p-4 items-center">
767
+ <div class="col-span-2 font-medium">10:30 AM</div>
768
+ <div class="col-span-3">Michael Tan</div>
769
+ <div class="col-span-3">Haircut + Beard</div>
770
+ <div class="col-span-2">Pasir Ris</div>
771
+ <div class="col-span-2 flex space-x-2">
772
+ <button class="text-blue-600 hover:text-blue-800">
773
+ <i class="fas fa-edit"></i>
774
+ </button>
775
+ <button class="text-red-600 hover:text-red-800">
776
+ <i class="fas fa-times"></i>
777
+ </button>
778
+ <button class="text-green-600 hover:text-green-800">
779
+ <i class="fas fa-check"></i>
780
+ </button>
781
+ </div>
782
+ </div>
783
+
784
+ <!-- Appointment 3 -->
785
+ <div class="grid grid-cols-12 p-4 items-center">
786
+ <div class="col-span-2 font-medium">1:00 PM</div>
787
+ <div class="col-span-3">David Wong</div>
788
+ <div class="col-span-3">Hot Towel Shave</div>
789
+ <div class="col-span-2">Bedok</div>
790
+ <div class="col-span-2 flex space-x-2">
791
+ <button class="text-blue-600 hover:text-blue-800">
792
+ <i class="fas fa-edit"></i>
793
+ </button>
794
+ <button class="text-red-600 hover:text-red-800">
795
+ <i class="fas fa-times"></i>
796
+ </button>
797
+ <button class="text-green-600 hover:text-green-800">
798
+ <i class="fas fa-check"></i>
799
+ </button>
800
+ </div>
801
+ </div>
802
+
803
+ <!-- Appointment 4 -->
804
+ <div class="grid grid-cols-12 p-4 items-center">
805
+ <div class="col-span-2 font-medium">3:30 PM</div>
806
+ <div class="col-span-3">Robert Lim</div>
807
+ <div class="col-span-3">Hair Coloring</div>
808
+ <div class="col-span-2">Pasir Ris</div>
809
+ <div class="col-span-2 flex space-x-2">
810
+ <button class="text-blue-600 hover:text-blue-800">
811
+ <i class="fas fa-edit"></i>
812
+ </button>
813
+ <button class="text-red-600 hover:text-red-800">
814
+ <i class="fas fa-times"></i>
815
+ </button>
816
+ <button class="text-green-600 hover:text-green-800">
817
+ <i class="fas fa-check"></i>
818
+ </button>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+
825
+ <!-- Sales Report Tab -->
826
+ <div id="vendorSalesTab" class="hidden">
827
+ <div class="flex justify-between items-center mb-6">
828
+ <h2 class="text-2xl font-bold text-gray-800">Sales Report</h2>
829
+ <div class="flex items-center space-x-4">
830
+ <select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
831
+ <option>Today</option>
832
+ <option>This Week</option>
833
+ <option>This Month</option>
834
+ <option>Custom Range</option>
835
+ </select>
836
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-lg">
837
+ Export
838
+ </button>
839
+ </div>
840
+ </div>
841
+
842
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
843
+ <div class="bg-white p-6 rounded-xl shadow-md">
844
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Total Revenue</h3>
845
+ <p class="text-3xl font-bold">$1,245.00</p>
846
+ <p class="text-green-600 mt-2">+12% from yesterday</p>
847
+ </div>
848
+ <div class="bg-white p-6 rounded-xl shadow-md">
849
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Total Appointments</h3>
850
+ <p class="text-3xl font-bold">24</p>
851
+ <p class="text-green-600 mt-2">+3 from yesterday</p>
852
+ </div>
853
+ <div class="bg-white p-6 rounded-xl shadow-md">
854
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Average per Customer</h3>
855
+ <p class="text-3xl font-bold">$51.88</p>
856
+ <p class="text-red-600 mt-2">-2% from yesterday</p>
857
+ </div>
858
+ </div>
859
+
860
+ <div class="bg-white p-6 rounded-xl shadow-md mb-6">
861
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Revenue by Payment Method</h3>
862
+ <div class="h-64">
863
+ <!-- Chart would go here -->
864
+ <div class="flex items-center justify-center h-full bg-gray-100 rounded-lg">
865
+ <p class="text-gray-500">Revenue chart visualization</p>
866
+ </div>
867
+ </div>
868
+ </div>
869
+
870
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
871
+ <div class="p-4 border-b font-medium text-gray-700">
872
+ Recent Transactions
873
+ </div>
874
+
875
+ <div class="divide-y">
876
+ <!-- Transaction 1 -->
877
+ <div class="grid grid-cols-12 p-4 items-center">
878
+ <div class="col-span-2 font-medium">#1001</div>
879
+ <div class="col-span-3">John Smith</div>
880
+ <div class="col-span-2">Classic Haircut</div>
881
+ <div class="col-span-2">$25.00</div>
882
+ <div class="col-span-2">Cash</div>
883
+ <div class="col-span-1 text-green-600">
884
+ <i class="fas fa-check-circle"></i>
885
+ </div>
886
+ </div>
887
+
888
+ <!-- Transaction 2 -->
889
+ <div class="grid grid-cols-12 p-4 items-center">
890
+ <div class="col-span-2 font-medium">#1002</div>
891
+ <div class="col-span-3">Michael Tan</div>
892
+ <div class="col-span-2">Haircut + Beard</div>
893
+ <div class="col-span-2">$35.00</div>
894
+ <div class="col-span-2">PayNow</div>
895
+ <div class="col-span-1 text-green-600">
896
+ <i class="fas fa-check-circle"></i>
897
+ </div>
898
+ </div>
899
+
900
+ <!-- Transaction 3 -->
901
+ <div class="grid grid-cols-12 p-4 items-center">
902
+ <div class="col-span-2 font-medium">#1003</div>
903
+ <div class="col-span-3">David Wong</div>
904
+ <div class="col-span-2">Hot Towel Shave</div>
905
+ <div class="col-span-2">$30.00</div>
906
+ <div class="col-span-2">Nets</div>
907
+ <div class="col-span-1 text-green-600">
908
+ <i class="fas fa-check-circle"></i>
909
+ </div>
910
+ </div>
911
+
912
+ <!-- Transaction 4 -->
913
+ <div class="grid grid-cols-12 p-4 items-center">
914
+ <div class="col-span-2 font-medium">#1004</div>
915
+ <div class="col-span-3">Robert Lim</div>
916
+ <div class="col-span-2">Hair Coloring</div>
917
+ <div class="col-span-2">$50.00</div>
918
+ <div class="col-span-2">Cash</div>
919
+ <div class="col-span-1 text-yellow-500">
920
+ <i class="fas fa-hourglass-half"></i>
921
+ </div>
922
+ </div>
923
+ </div>
924
+ </div>
925
+ </div>
926
+
927
+ <!-- Settings Tab -->
928
+ <div id="vendorSettingsTab" class="hidden">
929
+ <div class="mb-6">
930
+ <h2 class="text-2xl font-bold text-gray-800">Shop Settings</h2>
931
+ <p class="text-gray-600">Manage your barbershop details and preferences</p>
932
+ </div>
933
+
934
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
935
+ <div class="p-6 border-b">
936
+ <h3 class="font-medium text-gray-800">Shop Information</h3>
937
+ </div>
938
+ <div class="p-6">
939
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
940
+ <div>
941
+ <label class="block text-gray-700 mb-2">Shop Name</label>
942
+ <input type="text" value="Paul's Barbershop" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
943
+ </div>
944
+ <div>
945
+ <label class="block text-gray-700 mb-2">Contact Number</label>
946
+ <input type="tel" value="+65 6789 1234" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
947
+ </div>
948
+ </div>
949
+
950
+ <div class="mb-6">
951
+ <label class="block text-gray-700 mb-2">About</label>
952
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3">Premium barbershop offering classic and modern grooming services for men.</textarea>
953
+ </div>
954
+
955
+ <div>
956
+ <label class="block text-gray-700 mb-2">Shop Logo</label>
957
+ <div class="flex items-center">
958
+ <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mr-4">
959
+ <i class="fas fa-camera text-gray-500"></i>
960
+ </div>
961
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
962
+ Upload New Logo
963
+ </button>
964
+ </div>
965
+ </div>
966
+ </div>
967
+ </div>
968
+
969
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
970
+ <div class="p-6 border-b">
971
+ <h3 class="font-medium text-gray-800">Business Hours</h3>
972
+ </div>
973
+ <div class="p-6">
974
+ <div class="space-y-4">
975
+ <div class="flex items-center justify-between">
976
+ <span class="font-medium">Monday</span>
977
+ <div class="flex items-center space-x-4">
978
+ <select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
979
+ <option>9:00 AM</option>
980
+ <option>8:00 AM</option>
981
+ <option>10:00 AM</option>
982
+ </select>
983
+ <span>to</span>
984
+ <select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
985
+ <option>6:00 PM</option>
986
+ <option>7:00 PM</option>
987
+ <option>5:00 PM</option>
988
+ </select>
989
+ </div>
990
+ </div>
991
+
992
+ <div class="flex items-center justify-between">
993
+ <span class="font-medium">Tuesday</span>
994
+ <div class="flex items-center space-x-4">
995
+ <select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
996
+ <option>9:00 AM</option>
997
+ <option>8:00 AM</option>
998
+ <option>10:00 AM</option>
999
+ </select>
1000
+ <span>to</span>
1001
+ <select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
1002
+ <option>6:00 PM</option>
1003
+ <option>7:00 PM</option>
1004
+ <option>5:00 PM</option>
1005
+ </select>
1006
+ </div>
1007
+ </div>
1008
+
1009
+ <!-- Repeat for other days -->
1010
+
1011
+ <div class="flex items-center justify-between pt-4 border-t">
1012
+ <span class="font-medium">Sunday</span>
1013
+ <div>
1014
+ <label class="inline-flex items-center">
1015
+ <input type="checkbox" class="form-checkbox text-blue-600">
1016
+ <span class="ml-2">Closed</span>
1017
+ </label>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <div class="flex justify-end">
1025
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg mr-4">
1026
+ Cancel
1027
+ </button>
1028
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
1029
+ Save Changes
1030
+ </button>
1031
+ </div>
1032
+ </div>
1033
+ </main>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <!-- Booking Confirmation Modal -->
1038
+ <div id="bookingConfirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
1039
+ <div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 text-center">
1040
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
1041
+ <i class="fas fa-check text-green-600 text-3xl"></i>
1042
+ </div>
1043
+
1044
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h2>
1045
+ <p class="text-gray-600 mb-6">Your appointment has been successfully scheduled.</p>
1046
+
1047
+ <div class="bg-gray-50 rounded-lg p-4 mb-6 text-left">
1048
+ <div class="flex justify-between mb-2">
1049
+ <span class="text-gray-600">Service:</span>
1050
+ <span id="confirmService" class="font-medium">Classic Haircut</span>
1051
+ </div>
1052
+ <div class="flex justify-between mb-2">
1053
+ <span class="text-gray-600">Date & Time:</span>
1054
+ <span id="confirmDateTime" class="font-medium">June 15, 2023 at 10:00 AM</span>
1055
+ </div>
1056
+ <div class="flex justify-between">
1057
+ <span class="text-gray-600">Location:</span>
1058
+ <span id="confirmLocation" class="font-medium">Bedok Central</span>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="flex flex-col space-y-3">
1063
+ <button onclick="hideModal('bookingConfirmationModal')" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-medium">
1064
+ Done
1065
+ </button>
1066
+ <button class="w-full border border-gray-300 hover:bg-gray-100 text-gray-800 py-3 rounded-lg font-medium">
1067
+ Add to Calendar
1068
+ </button>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <script>
1074
+ // Global variables to store booking information
1075
+ let selectedService = '';
1076
+ let selectedServicePrice = 0;
1077
+ let selectedDate = '';
1078
+ let selectedTime = '';
1079
+ let selectedLocation = '';
1080
+ let selectedPaymentMethod = '';
1081
+
1082
+ // Current date for calendar
1083
+ let currentDate = new Date();
1084
+ let currentMonth = currentDate.getMonth();
1085
+ let currentYear = currentDate.getFullYear();
1086
+
1087
+ // Show customer login modal
1088
+ function showCustomerLogin() {
1089
+ document.getElementById('customerLoginModal').classList.remove('hidden');
1090
+ }
1091
+
1092
+ // Show vendor login modal
1093
+ function showVendorLogin() {
1094
+ document.getElementById('vendorLoginModal').classList.remove('hidden');
1095
+ }
1096
+
1097
+ // Hide any modal
1098
+ function hideModal(modalId) {
1099
+ document.getElementById(modalId).classList.add('hidden');
1100
+ }
1101
+
1102
+ // Customer login function
1103
+ function loginCustomer() {
1104
+ hideModal('customerLoginModal');
1105
+ document.getElementById('landing').classList.add('hidden');
1106
+ document.getElementById('customerDashboard').classList.remove('hidden');
1107
+ generateCalendar(currentMonth, currentYear);
1108
+ }
1109
+
1110
+ // Vendor login function
1111
+ function loginVendor() {
1112
+ hideModal('vendorLoginModal');
1113
+ document.getElementById('landing').classList.add('hidden');
1114
+ document.getElementById('vendorDashboard').classList.remove('hidden');
1115
+ }
1116
+
1117
+ // Switch between customer tabs
1118
+ function switchTab(tabName) {
1119
+ // Hide all tab contents
1120
+ document.getElementById('servicesTab').classList.add('hidden');
1121
+ document.getElementById('calendarTab').classList.add('hidden');
1122
+ document.getElementById('timeslotsTab').classList.add('hidden');
1123
+ document.getElementById('locationsTab').classList.add('hidden');
1124
+ document.getElementById('paymentTab').classList.add('hidden');
1125
+
1126
+ // Remove active class from all tab buttons
1127
+ const tabButtons = document.querySelectorAll('.tab-btn');
1128
+ tabButtons.forEach(button => {
1129
+ button.classList.remove('tab-active');
1130
+ });
1131
+
1132
+ // Show selected tab content
1133
+ document.getElementById(tabName + 'Tab').classList.remove('hidden');
1134
+
1135
+ // Add active class to selected tab button
1136
+ document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('tab-active');
1137
+
1138
+ // Update mobile bottom navigation
1139
+ if (window.innerWidth < 768) {
1140
+ const mobileButtons = document.querySelectorAll('nav button');
1141
+ mobileButtons.forEach(button => {
1142
+ button.classList.remove('text-red-600');
1143
+ button.classList.add('text-gray-600');
1144
+ });
1145
+
1146
+ const activeMobileButton = document.querySelector(`nav button[onclick="switchTab('${tabName}')"]`);
1147
+ if (activeMobileButton) {
1148
+ activeMobileButton.classList.remove('text-gray-600');
1149
+ activeMobileButton.classList.add('text-red-600');
1150
+ }
1151
+ }
1152
+ }
1153
+
1154
+ // Select a service
1155
+ function selectService(service, price) {
1156
+ selectedService = service;
1157
+ selectedServicePrice = price;
1158
+
1159
+ // Update summary
1160
+ document.getElementById('summaryService').textContent = service;
1161
+ document.getElementById('summaryPrice').textContent = '$' + price.toFixed(2);
1162
+
1163
+ switchTab('calendar');
1164
+ }
1165
+
1166
+ // Generate calendar
1167
+ function generateCalendar(month, year) {
1168
+ const calendarDays = document.getElementById('calendarDays');
1169
+ calendarDays.innerHTML = '';
1170
+
1171
+ // Update month display
1172
+ const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
1173
+ document.getElementById('currentMonth').textContent = monthNames[month] + ' ' + year;
1174
+
1175
+ // Get first day of month
1176
+ const firstDay = new Date(year, month, 1).getDay();
1177
+
1178
+ // Get days in month
1179
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
1180
+
1181
+ // Get today's date
1182
+ const today = new Date();
1183
+ const isCurrentMonth = (month === today.getMonth() && year === today.getFullYear());
1184
+
1185
+ // Add empty cells for days before first day of month
1186
+ for (let i = 0; i < firstDay; i++) {
1187
+ const emptyDay = document.createElement('div');
1188
+ emptyDay.className = 'p-3 text-center text-gray-400';
1189
+ calendarDays.appendChild(emptyDay);
1190
+ }
1191
+
1192
+ // Add days of month
1193
+ for (let day = 1; day <= daysInMonth; day++) {
1194
+ const dayElement = document.createElement('div');
1195
+ dayElement.className = 'p-3 text-center cursor-pointer calendar-day';
1196
+
1197
+ // Highlight today
1198
+ if (isCurrentMonth && day === today.getDate()) {
1199
+ dayElement.classList.add('font-bold', 'text-red-600');
1200
+ }
1201
+
1202
+ // Disable past days
1203
+ if (isCurrentMonth && day < today.getDate()) {
1204
+ dayElement.classList.add('text-gray-400', 'disabled');
1205
+ } else {
1206
+ dayElement.addEventListener('click', () => selectDate(day, month, year));
1207
+ }
1208
+
1209
+ dayElement.textContent = day;
1210
+ calendarDays.appendChild(dayElement);
1211
+ }
1212
+ }
1213
+
1214
+ // Select a date
1215
+ function selectDate(day, month, year) {
1216
+ const date = new Date(year, month, day);
1217
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
1218
+ selectedDate = date.toLocaleDateString('en-US', options);
1219
+
1220
+ // Update timeslot display
1221
+ document.getElementById('selectedDateDisplay').textContent = selectedDate;
1222
+
1223
+ switchTab('timeslots');
1224
+ }
1225
+
1226
+ // Select a time slot
1227
+ function selectTimeSlot(time) {
1228
+ selectedTime = time;
1229
+
1230
+ // Update summary
1231
+ document.getElementById('summaryDate').textContent = selectedDate;
1232
+ document.getElementById('summaryTime').textContent = selectedTime;
1233
+
1234
+ switchTab('locations');
1235
+ }
1236
+
1237
+ // Select a location
1238
+ function selectLocation(location) {
1239
+ selectedLocation = location;
1240
+
1241
+ // Update summary
1242
+ document.getElementById('summaryLocation').textContent = location;
1243
+
1244
+ switchTab('payment');
1245
+ }
1246
+
1247
+ // Select payment method
1248
+ function selectPaymentMethod(method) {
1249
+ selectedPaymentMethod = method;
1250
+
1251
+ // Remove selected from all payment methods
1252
+ const paymentIcons = document.querySelectorAll('.payment-selected');
1253
+ paymentIcons.forEach(icon => {
1254
+ icon.classList.add('hidden');
1255
+ });
1256
+
1257
+ // Add selected to chosen method
1258
+ const selectedIcon = document.querySelector(`button[onclick="selectPaymentMethod('${method}')"] .payment-selected`);
1259
+ selectedIcon.classList.remove('hidden');
1260
+ }
1261
+
1262
+ // Confirm booking
1263
+ function confirmBooking() {
1264
+ if (!selectedPaymentMethod) {
1265
+ alert('Please select a payment method');
1266
+ return;
1267
+ }
1268
+
1269
+ // Update confirmation modal
1270
+ document.getElementById('confirmService').textContent = selectedService;
1271
+ document.getElementById('confirmDateTime').textContent = selectedDate + ' at ' + selectedTime;
1272
+ document.getElementById('confirmLocation').textContent = selectedLocation;
1273
+
1274
+ // Show confirmation modal
1275
+ document.getElementById('bookingConfirmationModal').classList.remove('hidden');
1276
+ }
1277
+
1278
+ // Calendar navigation
1279
+ function prevMonth() {
1280
+ currentMonth--;
1281
+ if (currentMonth < 0) {
1282
+ currentMonth = 11;
1283
+ currentYear--;
1284
+ }
1285
+ generateCalendar(currentMonth, currentYear);
1286
+ }
1287
+
1288
+ function nextMonth() {
1289
+ currentMonth++;
1290
+ if (currentMonth > 11) {
1291
+ currentMonth = 0;
1292
+ currentYear++;
1293
+ }
1294
+ generateCalendar(currentMonth, currentYear);
1295
+ }
1296
+
1297
+ function goToToday() {
1298
+ currentDate = new Date();
1299
+ currentMonth = currentDate.getMonth();
1300
+ currentYear = currentDate.getFullYear();
1301
+ generateCalendar(currentMonth, currentYear);
1302
+ }
1303
+
1304
+ // Vendor tab switching
1305
+ function switchVendorTab(tabName) {
1306
+ // Hide all vendor tabs
1307
+ document.getElementById('vendorAppointmentsTab').classList.add('hidden');
1308
+ document.getElementById('vendorSalesTab').classList.add('hidden');
1309
+ document.getElementById('vendorSettingsTab').classList.add('hidden');
1310
+
1311
+ // Show selected tab
1312
+ document.getElementById('vendor' + tabName.charAt(0).toUpperCase() + tabName.slice(1) + 'Tab').classList.remove('hidden');
1313
+
1314
+ // Update sidebar active button
1315
+ const sidebarButtons = document.querySelectorAll('#vendorDashboard nav button');
1316
+ sidebarButtons.forEach(button => {
1317
+ button.classList.remove('text-white', 'bg-red-600');
1318
+ button.classList.add('text-gray-600', 'hover:bg-gray-100');
1319
+ });
1320
+
1321
+ const activeButton = document.querySelector(`#vendorDashboard nav button[onclick="switchVendorTab('${tabName}')"]`);
1322
+ activeButton.classList.remove('text-gray-600', 'hover:bg-gray-100');
1323
+ activeButton.classList.add('text-white', 'bg-red-600');
1324
+ }
1325
+
1326
+ // Initialize calendar on load
1327
+ document.addEventListener('DOMContentLoaded', function() {
1328
+ // Set default payment method to Cash
1329
+ selectPaymentMethod('Cash');
1330
+
1331
+ // Set default selected service for demo purposes
1332
+ selectService('Classic Haircut', 25);
1333
+
1334
+ // Set a default date for demo purposes
1335
+ const demoDate = new Date();
1336
+ demoDate.setDate(15);
1337
+ selectedDate = demoDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
1338
+ document.getElementById('selectedDateDisplay').textContent = selectedDate;
1339
+ document.getElementById('summaryDate').textContent = selectedDate;
1340
+ });
1341
+ </script>
1342
+ <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=theaimoron/pauls-try-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1343
+ </html>