Hugging Face's logo

Spaces:
Cezarxil
/
client-app
Running

App Files Community
Cezarxil commited on
Commit
63028e1
·
verified ·
1 Parent(s): 52a63ef

Make a small minimalist app for keeping track of clients for a hair removal salon. I want to be able to delete clients and add them, I want a section with a calendar. Make it simple and functional. Have a function that can send a message to the client a day before the appointment. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +558 -372
index.html CHANGED
@@ -3,419 +3,605 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Luminous Laser - Client Management</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
- /* Custom scrollbar */
11
- ::-webkit-scrollbar {
12
- width: 8px;
13
- }
14
- ::-webkit-scrollbar-track {
15
- background: #f8fafc;
16
  }
17
- ::-webkit-scrollbar-thumb {
18
- background: #cbd5e1;
19
- border-radius: 4px;
20
  }
21
- ::-webkit-scrollbar-thumb:hover {
22
- background: #94a3b8;
 
23
  }
24
-
25
- /* Calendar animation */
26
- @keyframes fadeIn {
27
- from { opacity: 0; transform: translateY(-10px); }
28
- to { opacity: 1; transform: translateY(0); }
29
  }
30
-
31
- .calendar-dropdown {
32
- animation: fadeIn 0.2s ease-out;
33
  }
34
-
35
- /* Pulse animation for active treatments */
36
- @keyframes pulse {
37
- 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
38
- 70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
39
- 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
40
  }
41
-
42
- .active-treatment {
43
- animation: pulse 2s infinite;
44
  }
45
  </style>
46
  </head>
47
- <body class="bg-rose-50 font-sans">
48
- <div class="min-h-screen flex flex-col">
49
  <!-- Header -->
50
- <header class="bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow-lg">
51
- <div class="container mx-auto px-4 py-6">
52
- <div class="flex justify-between items-center">
53
- <div class="flex items-center space-x-3">
54
- <i class="fas fa-bolt text-2xl"></i>
55
- <h1 class="text-2xl font-bold">Luminous Laser</h1>
56
- </div>
57
- <div class="flex items-center space-x-4">
58
- <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-purple-50 transition">
59
- <i class="fas fa-plus mr-2"></i>New Client
60
- </button>
61
- <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-purple-600 font-bold">
62
- <i class="fas fa-user"></i>
63
- </div>
64
- </div>
65
- </div>
66
  </div>
67
  </header>
68
 
69
  <!-- Main Content -->
70
- <main class="flex-grow container mx-auto px-4 py-8">
71
- <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
72
- <!-- Sidebar -->
73
- <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit">
74
- <div class="mb-6">
75
- <h2 class="text-xl font-semibold text-gray-800 mb-4">Quick Stats</h2>
76
- <div class="space-y-4">
77
- <div class="bg-purple-50 p-4 rounded-lg">
78
- <p class="text-sm text-purple-600">Total Clients</p>
79
- <p class="text-2xl font-bold text-purple-800">142</p>
80
- </div>
81
- <div class="bg-pink-50 p-4 rounded-lg">
82
- <p class="text-sm text-pink-600">Appointments Today</p>
83
- <p class="text-2xl font-bold text-pink-800">8</p>
84
- </div>
85
- <div class="bg-rose-50 p-4 rounded-lg">
86
- <p class="text-sm text-rose-600">Follow-ups Needed</p>
87
- <p class="text-2xl font-bold text-rose-800">12</p>
88
- </div>
89
- </div>
90
- </div>
91
-
92
- <div>
93
- <h2 class="text-xl font-semibold text-gray-800 mb-4">Quick Actions</h2>
94
- <div class="space-y-3">
95
- <button class="w-full flex items-center space-x-3 bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition">
96
- <i class="fas fa-calendar-check text-purple-600"></i>
97
- <span>Schedule Appointment</span>
98
- </button>
99
- <button class="w-full flex items-center space-x-3 bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition">
100
- <i class="fas fa-bell text-pink-600"></i>
101
- <span>Send Reminders</span>
102
- </button>
103
- <button class="w-full flex items-center space-x-3 bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition">
104
- <i class="fas fa-chart-line text-rose-600"></i>
105
- <span>View Reports</span>
106
- </button>
107
- </div>
108
- </div>
109
  </div>
110
 
111
- <!-- Main Panel -->
112
- <div class="lg:col-span-3 space-y-6">
113
- <!-- Search and Filter -->
114
- <div class="bg-white rounded-xl shadow-md p-6">
115
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
116
- <div class="relative flex-grow">
117
- <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
118
- <input type="text" placeholder="Search clients..." class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
119
  </div>
120
- <div class="flex space-x-3">
121
- <div class="relative">
122
- <button id="dateDropdownButton" class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition">
123
- <i class="fas fa-calendar-alt text-purple-600"></i>
124
- <span>Select Date</span>
125
- <i class="fas fa-chevron-down text-xs"></i>
126
- </button>
127
- <div id="dateDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-xl z-10 calendar-dropdown p-4 border border-gray-200">
128
- <div class="flex justify-between items-center mb-4">
129
- <button class="text-gray-500 hover:text-gray-700">
130
- <i class="fas fa-chevron-left"></i>
131
- </button>
132
- <h3 class="font-medium">June 2023</h3>
133
- <button class="text-gray-500 hover:text-gray-700">
134
- <i class="fas fa-chevron-right"></i>
135
- </button>
136
- </div>
137
- <div class="grid grid-cols-7 gap-1 text-center">
138
- <div class="text-sm font-medium text-gray-500 py-1">Sun</div>
139
- <div class="text-sm font-medium text-gray-500 py-1">Mon</div>
140
- <div class="text-sm font-medium text-gray-500 py-1">Tue</div>
141
- <div class="text-sm font-medium text-gray-500 py-1">Wed</div>
142
- <div class="text-sm font-medium text-gray-500 py-1">Thu</div>
143
- <div class="text-sm font-medium text-gray-500 py-1">Fri</div>
144
- <div class="text-sm font-medium text-gray-500 py-1">Sat</div>
145
-
146
- <!-- Calendar days -->
147
- <div class="py-1 text-gray-400">28</div>
148
- <div class="py-1 text-gray-400">29</div>
149
- <div class="py-1 text-gray-400">30</div>
150
- <div class="py-1 text-gray-400">31</div>
151
- <div class="py-1">1</div>
152
- <div class="py-1">2</div>
153
- <div class="py-1">3</div>
154
-
155
- <div class="py-1">4</div>
156
- <div class="py-1">5</div>
157
- <div class="py-1">6</div>
158
- <div class="py-1">7</div>
159
- <div class="py-1">8</div>
160
- <div class="py-1">9</div>
161
- <div class="py-1">10</div>
162
-
163
- <div class="py-1">11</div>
164
- <div class="py-1">12</div>
165
- <div class="py-1">13</div>
166
- <div class="py-1">14</div>
167
- <div class="py-1">15</div>
168
- <div class="py-1">16</div>
169
- <div class="py-1">17</div>
170
-
171
- <div class="py-1">18</div>
172
- <div class="py-1">19</div>
173
- <div class="py-1">20</div>
174
- <div class="py-1">21</div>
175
- <div class="py-1">22</div>
176
- <div class="py-1">23</div>
177
- <div class="py-1">24</div>
178
-
179
- <div class="py-1">25</div>
180
- <div class="py-1">26</div>
181
- <div class="py-1">27</div>
182
- <div class="py-1">28</div>
183
- <div class="py-1">29</div>
184
- <div class="py-1">30</div>
185
- <div class="py-1 text-gray-400">1</div>
186
- </div>
187
- <div class="mt-4 flex justify-between">
188
- <button class="text-sm text-gray-500 hover:text-gray-700">Today</button>
189
- <button class="text-sm text-purple-600 hover:text-purple-800 font-medium">Apply</button>
190
- </div>
191
- </div>
192
- </div>
193
- <button class="flex items-center space-x-2 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
194
- <i class="fas fa-filter"></i>
195
- <span>Filter</span>
196
- </button>
197
  </div>
198
  </div>
199
- </div>
200
-
201
- <!-- Client List -->
202
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
203
- <div class="p-6 border-b border-gray-200">
204
- <h2 class="text-xl font-semibold text-gray-800">Recent Clients</h2>
205
- </div>
206
-
207
- <div class="divide-y divide-gray-200 max-h-[500px] overflow-y-auto">
208
- <!-- Client Card 1 -->
209
- <div class="p-6 hover:bg-purple-50 transition cursor-pointer">
210
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
211
- <div class="flex items-center space-x-4">
212
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">
213
- <i class="fas fa-user"></i>
214
- </div>
215
- <div>
216
- <h3 class="font-medium text-gray-800">Sarah Johnson</h3>
217
- <p class="text-sm text-gray-500">Last visit: 2 days ago</p>
218
- </div>
219
- </div>
220
- <div class="flex items-center space-x-4">
221
- <div class="hidden md:block">
222
- <p class="text-sm text-gray-500">Treatment Area</p>
223
- <p class="font-medium">Underarms</p>
224
- </div>
225
- <div class="hidden md:block">
226
- <p class="text-sm text-gray-500">Sessions</p>
227
- <p class="font-medium">3/6</p>
228
- </div>
229
- <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
230
- Active
231
- </div>
232
- <button class="text-gray-400 hover:text-purple-600">
233
- <i class="fas fa-ellipsis-v"></i>
234
- </button>
235
- </div>
236
- </div>
237
- </div>
238
-
239
- <!-- Client Card 2 -->
240
- <div class="p-6 hover:bg-purple-50 transition cursor-pointer">
241
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
242
- <div class="flex items-center space-x-4">
243
- <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 font-bold">
244
- <i class="fas fa-user"></i>
245
- </div>
246
- <div>
247
- <h3 class="font-medium text-gray-800">Michael Chen</h3>
248
- <p class="text-sm text-gray-500">Last visit: 1 week ago</p>
249
- </div>
250
- </div>
251
- <div class="flex items-center space-x-4">
252
- <div class="hidden md:block">
253
- <p class="text-sm text-gray-500">Treatment Area</p>
254
- <p class="font-medium">Full Legs</p>
255
- </div>
256
- <div class="hidden md:block">
257
- <p class="text-sm text-gray-500">Sessions</p>
258
- <p class="font-medium">5/8</p>
259
- </div>
260
- <div class="bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm font-medium">
261
- Follow-up
262
- </div>
263
- <button class="text-gray-400 hover:text-pink-600">
264
- <i class="fas fa-ellipsis-v"></i>
265
- </button>
266
- </div>
267
- </div>
268
  </div>
269
-
270
- <!-- Client Card 3 -->
271
- <div class="p-6 hover:bg-purple-50 transition cursor-pointer active-treatment">
272
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
273
- <div class="flex items-center space-x-4">
274
- <div class="w-12 h-12 rounded-full bg-rose-100 flex items-center justify-center text-rose-600 font-bold">
275
- <i class="fas fa-user"></i>
276
- </div>
277
- <div>
278
- <h3 class="font-medium text-gray-800">Emily Rodriguez</h3>
279
- <p class="text-sm text-gray-500">Appointment today</p>
280
- </div>
281
- </div>
282
- <div class="flex items-center space-x-4">
283
- <div class="hidden md:block">
284
- <p class="text-sm text-gray-500">Treatment Area</p>
285
- <p class="font-medium">Brazilian</p>
286
- </div>
287
- <div class="hidden md:block">
288
- <p class="text-sm text-gray-500">Sessions</p>
289
- <p class="font-medium">2/6</p>
290
- </div>
291
- <div class="bg-rose-100 text-rose-800 px-3 py-1 rounded-full text-sm font-medium">
292
- Today
293
- </div>
294
- <button class="text-gray-400 hover:text-rose-600">
295
- <i class="fas fa-ellipsis-v"></i>
296
- </button>
297
- </div>
298
- </div>
299
  </div>
300
-
301
- <!-- Client Card 4 -->
302
- <div class="p-6 hover:bg-purple-50 transition cursor-pointer">
303
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
304
- <div class="flex items-center space-x-4">
305
- <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
306
- <i class="fas fa-user"></i>
307
- </div>
308
- <div>
309
- <h3 class="font-medium text-gray-800">David Wilson</h3>
310
- <p class="text-sm text-gray-500">Last visit: 3 weeks ago</p>
311
- </div>
312
- </div>
313
- <div class="flex items-center space-x-4">
314
- <div class="hidden md:block">
315
- <p class="text-sm text-gray-500">Treatment Area</p>
316
- <p class="font-medium">Back</p>
317
- </div>
318
- <div class="hidden md:block">
319
- <p class="text-sm text-gray-500">Sessions</p>
320
- <p class="font-medium">6/6</p>
321
- </div>
322
- <div class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">
323
- Completed
324
- </div>
325
- <button class="text-gray-400 hover:text-indigo-600">
326
- <i class="fas fa-ellipsis-v"></i>
327
- </button>
328
- </div>
329
- </div>
330
- </div>
331
-
332
- <!-- Client Card 5 -->
333
- <div class="p-6 hover:bg-purple-50 transition cursor-pointer">
334
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
335
- <div class="flex items-center space-x-4">
336
- <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 font-bold">
337
- <i class="fas fa-user"></i>
338
- </div>
339
- <div>
340
- <h3 class="font-medium text-gray-800">Jennifer Lee</h3>
341
- <p class="text-sm text-gray-500">Last visit: 1 month ago</p>
342
- </div>
343
- </div>
344
- <div class="flex items-center space-x-4">
345
- <div class="hidden md:block">
346
- <p class="text-sm text-gray-500">Treatment Area</p>
347
- <p class="font-medium">Face</p>
348
- </div>
349
- <div class="hidden md:block">
350
- <p class="text-sm text-gray-500">Sessions</p>
351
- <p class="font-medium">4/8</p>
352
- </div>
353
- <div class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">
354
- Paused
355
- </div>
356
- <button class="text-gray-400 hover:text-amber-600">
357
- <i class="fas fa-ellipsis-v"></i>
358
- </button>
359
- </div>
360
- </div>
361
  </div>
362
  </div>
363
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
  </div>
365
  </div>
366
- </main>
367
 
368
- <!-- Footer -->
369
- <footer class="bg-white border-t border-gray-200 py-6">
370
- <div class="container mx-auto px-4">
371
- <div class="flex flex-col md:flex-row justify-between items-center">
372
- <div class="flex items-center space-x-2 mb-4 md:mb-0">
373
- <i class="fas fa-bolt text-purple-600"></i>
374
- <span class="font-medium">Luminous Laser</span>
 
 
 
 
 
 
 
375
  </div>
376
- <div class="flex space-x-6">
377
- <a href="#" class="text-gray-500 hover:text-purple-600 transition">Privacy</a>
378
- <a href="#" class="text-gray-500 hover:text-purple-600 transition">Terms</a>
379
- <a href="#" class="text-gray-500 hover:text-purple-600 transition">Help</a>
 
 
 
 
380
  </div>
381
- <div class="mt-4 md:mt-0 text-sm text-gray-500">
382
- © 2023 Luminous Laser. All rights reserved.
 
 
 
 
 
 
 
 
383
  </div>
384
  </div>
 
 
 
 
 
 
 
 
385
  </div>
386
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
387
  </div>
388
 
389
  <script>
390
- // Toggle calendar dropdown
391
- const dateDropdownButton = document.getElementById('dateDropdownButton');
392
- const dateDropdown = document.getElementById('dateDropdown');
393
 
394
- dateDropdownButton.addEventListener('click', function() {
395
- dateDropdown.classList.toggle('hidden');
396
- });
397
 
398
- // Close dropdown when clicking outside
399
- document.addEventListener('click', function(event) {
400
- if (!dateDropdownButton.contains(event.target) && !dateDropdown.contains(event.target)) {
401
- dateDropdown.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
402
  }
403
  });
404
-
405
- // Sample client data (would normally come from a database)
406
- const clients = [
407
- { name: "Sarah Johnson", lastVisit: "2 days ago", area: "Underarms", sessions: "3/6", status: "Active" },
408
- { name: "Michael Chen", lastVisit: "1 week ago", area: "Full Legs", sessions: "5/8", status: "Follow-up" },
409
- { name: "Emily Rodriguez", lastVisit: "Appointment today", area: "Brazilian", sessions: "2/6", status: "Today" },
410
- { name: "David Wilson", lastVisit: "3 weeks ago", area: "Back", sessions: "6/6", status: "Completed" },
411
- { name: "Jennifer Lee", lastVisit: "1 month ago", area: "Face", sessions: "4/8", status: "Paused" }
412
- ];
413
-
414
- // You would typically have more JavaScript here to:
415
- // 1. Fetch client data from an API
416
- // 2. Handle form submissions
417
- // 3. Manage the calendar functionality
418
- // 4. Implement search/filter functionality
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
419
  </script>
420
  <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=Cezarxil/client-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
421
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Silky Smooth | Client Management</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
+ .calendar-day:hover:not(.empty-day) {
11
+ background-color: #f3f4f6;
12
+ cursor: pointer;
 
 
 
13
  }
14
+ .appointment-day {
15
+ background-color: #f0fdf4;
16
+ border: 1px solid #bbf7d0;
17
  }
18
+ .today {
19
+ background-color: #eff6ff;
20
+ border: 1px solid #bfdbfe;
21
  }
22
+ /* Custom scrollbar */
23
+ .custom-scrollbar::-webkit-scrollbar {
24
+ width: 6px;
 
 
25
  }
26
+ .custom-scrollbar::-webkit-scrollbar-track {
27
+ background: #f1f1f1;
 
28
  }
29
+ .custom-scrollbar::-webkit-scrollbar-thumb {
30
+ background: #cbd5e1;
31
+ border-radius: 3px;
 
 
 
32
  }
33
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
34
+ background: #94a3b8;
 
35
  }
36
  </style>
37
  </head>
38
+ <body class="bg-gray-50 min-h-screen">
39
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
40
  <!-- Header -->
41
+ <header class="flex flex-col md:flex-row justify-between items-center mb-8">
42
+ <div class="flex items-center mb-4 md:mb-0">
43
+ <i class="fas fa-spa text-pink-500 text-3xl mr-3"></i>
44
+ <h1 class="text-2xl font-bold text-gray-800">Silky Smooth Client Manager</h1>
45
+ </div>
46
+ <div class="flex space-x-2">
47
+ <button id="showClientsBtn" class="px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition">
48
+ <i class="fas fa-users mr-2"></i>Clients
49
+ </button>
50
+ <button id="showCalendarBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
51
+ <i class="far fa-calendar-alt mr-2"></i>Calendar
52
+ </button>
 
 
 
 
53
  </div>
54
  </header>
55
 
56
  <!-- Main Content -->
57
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-6">
58
+ <!-- Clients Section -->
59
+ <div id="clientsSection" class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
60
+ <div class="p-5 border-b border-gray-200">
61
+ <h2 class="text-xl font-semibold text-gray-800">Client Management</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
 
64
+ <!-- Add Client Form -->
65
+ <div class="p-5 border-b border-gray-200">
66
+ <form id="clientForm" class="space-y-4">
67
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
68
+ <div>
69
+ <label for="clientName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
70
+ <input type="text" id="clientName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
 
71
  </div>
72
+ <div>
73
+ <label for="clientPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
74
+ <input type="tel" id="clientPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </div>
76
  </div>
77
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
78
+ <div>
79
+ <label for="clientService" class="block text-sm font-medium text-gray-700 mb-1">Service</label>
80
+ <select id="clientService" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500">
81
+ <option value="Brazilian Wax">Brazilian Wax</option>
82
+ <option value="Bikini Wax">Bikini Wax</option>
83
+ <option value="Leg Wax">Leg Wax</option>
84
+ <option value="Arm Wax">Arm Wax</option>
85
+ <option value="Underarm Wax">Underarm Wax</option>
86
+ <option value="Facial Wax">Facial Wax</option>
87
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </div>
89
+ <div>
90
+ <label for="clientDate" class="block text-sm font-medium text-gray-700 mb-1">Appointment Date</label>
91
+ <input type="date" id="clientDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
+ <div>
94
+ <label for="clientTime" class="block text-sm font-medium text-gray-700 mb-1">Time</label>
95
+ <input type="time" id="clientTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
  </div>
98
+ <div class="flex justify-end">
99
+ <button type="submit" class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600 transition flex items-center">
100
+ <i class="fas fa-plus mr-2"></i> Add Client
101
+ </button>
102
+ </div>
103
+ </form>
104
+ </div>
105
+
106
+ <!-- Clients List -->
107
+ <div class="overflow-y-auto custom-scrollbar" style="max-height: 500px;">
108
+ <table class="min-w-full divide-y divide-gray-200">
109
+ <thead class="bg-gray-50">
110
+ <tr>
111
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
112
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
113
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th>
114
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Appointment</th>
115
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
116
+ </tr>
117
+ </thead>
118
+ <tbody id="clientsList" class="bg-white divide-y divide-gray-200">
119
+ <!-- Clients will be added here dynamically -->
120
+ </tbody>
121
+ </table>
122
  </div>
123
  </div>
 
124
 
125
+ <!-- Calendar Section -->
126
+ <div id="calendarSection" class="hidden lg:block bg-white rounded-xl shadow-md overflow-hidden">
127
+ <div class="p-5 border-b border-gray-200">
128
+ <h2 class="text-xl font-semibold text-gray-800">Appointment Calendar</h2>
129
+ </div>
130
+ <div class="p-4">
131
+ <div class="flex justify-between items-center mb-4">
132
+ <button id="prevMonth" class="p-2 rounded-full hover:bg-gray-100">
133
+ <i class="fas fa-chevron-left text-gray-600"></i>
134
+ </button>
135
+ <h3 id="currentMonthYear" class="text-lg font-medium text-gray-800">June 2023</h3>
136
+ <button id="nextMonth" class="p-2 rounded-full hover:bg-gray-100">
137
+ <i class="fas fa-chevron-right text-gray-600"></i>
138
+ </button>
139
  </div>
140
+ <div class="grid grid-cols-7 gap-1 mb-2">
141
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Sun</div>
142
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Mon</div>
143
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Tue</div>
144
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Wed</div>
145
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Thu</div>
146
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Fri</div>
147
+ <div class="text-center text-xs font-medium text-gray-500 py-1">Sat</div>
148
  </div>
149
+ <div id="calendarDays" class="grid grid-cols-7 gap-1">
150
+ <!-- Calendar days will be generated here -->
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Day Appointments -->
155
+ <div class="p-4 border-t border-gray-200">
156
+ <h3 id="selectedDayTitle" class="text-md font-medium text-gray-800 mb-3">Today's Appointments</h3>
157
+ <div id="dayAppointments" class="space-y-3 max-h-64 overflow-y-auto custom-scrollbar">
158
+ <!-- Appointments for selected day will appear here -->
159
  </div>
160
  </div>
161
+
162
+ <!-- SMS Reminder Button -->
163
+ <div class="p-4 border-t border-gray-200">
164
+ <button id="sendRemindersBtn" class="w-full py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition flex items-center justify-center">
165
+ <i class="fas fa-sms mr-2"></i> Send Tomorrow's Reminders
166
+ </button>
167
+ <div id="smsStatus" class="mt-2 text-sm text-center hidden"></div>
168
+ </div>
169
  </div>
170
+ </main>
171
+ </div>
172
+
173
+ <!-- Edit Client Modal -->
174
+ <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
175
+ <div class="bg-white rounded-lg p-6 w-full max-w-md">
176
+ <div class="flex justify-between items-center mb-4">
177
+ <h3 class="text-lg font-semibold">Edit Client</h3>
178
+ <button id="closeEditModal" class="text-gray-500 hover:text-gray-700">
179
+ <i class="fas fa-times"></i>
180
+ </button>
181
+ </div>
182
+ <form id="editClientForm" class="space-y-4">
183
+ <input type="hidden" id="editClientId">
184
+ <div>
185
+ <label for="editClientName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
186
+ <input type="text" id="editClientName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
187
+ </div>
188
+ <div>
189
+ <label for="editClientPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
190
+ <input type="tel" id="editClientPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
191
+ </div>
192
+ <div>
193
+ <label for="editClientService" class="block text-sm font-medium text-gray-700 mb-1">Service</label>
194
+ <select id="editClientService" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500">
195
+ <option value="Brazilian Wax">Brazilian Wax</option>
196
+ <option value="Bikini Wax">Bikini Wax</option>
197
+ <option value="Leg Wax">Leg Wax</option>
198
+ <option value="Arm Wax">Arm Wax</option>
199
+ <option value="Underarm Wax">Underarm Wax</option>
200
+ <option value="Facial Wax">Facial Wax</option>
201
+ </select>
202
+ </div>
203
+ <div class="grid grid-cols-2 gap-4">
204
+ <div>
205
+ <label for="editClientDate" class="block text-sm font-medium text-gray-700 mb-1">Appointment Date</label>
206
+ <input type="date" id="editClientDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
207
+ </div>
208
+ <div>
209
+ <label for="editClientTime" class="block text-sm font-medium text-gray-700 mb-1">Time</label>
210
+ <input type="time" id="editClientTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500" required>
211
+ </div>
212
+ </div>
213
+ <div class="flex justify-end space-x-3 pt-4">
214
+ <button type="button" id="cancelEdit" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
215
+ Cancel
216
+ </button>
217
+ <button type="submit" class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600 transition">
218
+ Save Changes
219
+ </button>
220
+ </div>
221
+ </form>
222
+ </div>
223
  </div>
224
 
225
  <script>
226
+ // Client data storage
227
+ let clients = JSON.parse(localStorage.getItem('clients')) || [];
 
228
 
229
+ // Current date for calendar
230
+ let currentDate = new Date();
231
+ let selectedDate = new Date();
232
 
233
+ // DOM Elements
234
+ const clientsSection = document.getElementById('clientsSection');
235
+ const calendarSection = document.getElementById('calendarSection');
236
+ const showClientsBtn = document.getElementById('showClientsBtn');
237
+ const showCalendarBtn = document.getElementById('showCalendarBtn');
238
+ const clientForm = document.getElementById('clientForm');
239
+ const clientsList = document.getElementById('clientsList');
240
+ const currentMonthYear = document.getElementById('currentMonthYear');
241
+ const calendarDays = document.getElementById('calendarDays');
242
+ const prevMonthBtn = document.getElementById('prevMonth');
243
+ const nextMonthBtn = document.getElementById('nextMonth');
244
+ const dayAppointments = document.getElementById('dayAppointments');
245
+ const selectedDayTitle = document.getElementById('selectedDayTitle');
246
+ const sendRemindersBtn = document.getElementById('sendRemindersBtn');
247
+ const smsStatus = document.getElementById('smsStatus');
248
+ const editModal = document.getElementById('editModal');
249
+ const editClientForm = document.getElementById('editClientForm');
250
+ const closeEditModal = document.getElementById('closeEditModal');
251
+ const cancelEdit = document.getElementById('cancelEdit');
252
+
253
+ // Initialize the app
254
+ document.addEventListener('DOMContentLoaded', () => {
255
+ renderClients();
256
+ generateCalendar();
257
+ showTodaysAppointments();
258
+
259
+ // Set default date to today in the form
260
+ const today = new Date().toISOString().split('T')[0];
261
+ document.getElementById('clientDate').value = today;
262
+
263
+ // Set default time to next hour
264
+ const nextHour = new Date();
265
+ nextHour.setHours(nextHour.getHours() + 1, 0, 0, 0);
266
+ const timeString = nextHour.toTimeString().substring(0, 5);
267
+ document.getElementById('clientTime').value = timeString;
268
+ });
269
+
270
+ // Toggle between clients and calendar on mobile
271
+ showClientsBtn.addEventListener('click', () => {
272
+ clientsSection.classList.remove('hidden');
273
+ calendarSection.classList.add('hidden');
274
+ showClientsBtn.classList.remove('bg-gray-200', 'text-gray-700');
275
+ showClientsBtn.classList.add('bg-pink-500', 'text-white');
276
+ showCalendarBtn.classList.remove('bg-pink-500', 'text-white');
277
+ showCalendarBtn.classList.add('bg-gray-200', 'text-gray-700');
278
+ });
279
+
280
+ showCalendarBtn.addEventListener('click', () => {
281
+ clientsSection.classList.add('hidden');
282
+ calendarSection.classList.remove('hidden');
283
+ showCalendarBtn.classList.remove('bg-gray-200', 'text-gray-700');
284
+ showCalendarBtn.classList.add('bg-pink-500', 'text-white');
285
+ showClientsBtn.classList.remove('bg-pink-500', 'text-white');
286
+ showClientsBtn.classList.add('bg-gray-200', 'text-gray-700');
287
+ });
288
+
289
+ // Add new client
290
+ clientForm.addEventListener('submit', (e) => {
291
+ e.preventDefault();
292
+
293
+ const name = document.getElementById('clientName').value;
294
+ const phone = document.getElementById('clientPhone').value;
295
+ const service = document.getElementById('clientService').value;
296
+ const date = document.getElementById('clientDate').value;
297
+ const time = document.getElementById('clientTime').value;
298
+
299
+ const newClient = {
300
+ id: Date.now().toString(),
301
+ name,
302
+ phone,
303
+ service,
304
+ date,
305
+ time,
306
+ status: 'scheduled'
307
+ };
308
+
309
+ clients.push(newClient);
310
+ saveClients();
311
+ renderClients();
312
+ generateCalendar();
313
+ showTodaysAppointments();
314
+
315
+ // Reset form
316
+ clientForm.reset();
317
+
318
+ // Set default date to today
319
+ document.getElementById('clientDate').value = new Date().toISOString().split('T')[0];
320
+
321
+ // Set default time to next hour
322
+ const nextHour = new Date();
323
+ nextHour.setHours(nextHour.getHours() + 1, 0, 0, 0);
324
+ const timeString = nextHour.toTimeString().substring(0, 5);
325
+ document.getElementById('clientTime').value = timeString;
326
+ });
327
+
328
+ // Edit client modal
329
+ function openEditModal(client) {
330
+ document.getElementById('editClientId').value = client.id;
331
+ document.getElementById('editClientName').value = client.name;
332
+ document.getElementById('editClientPhone').value = client.phone;
333
+ document.getElementById('editClientService').value = client.service;
334
+ document.getElementById('editClientDate').value = client.date;
335
+ document.getElementById('editClientTime').value = client.time;
336
+
337
+ editModal.classList.remove('hidden');
338
+ }
339
+
340
+ // Close edit modal
341
+ closeEditModal.addEventListener('click', () => {
342
+ editModal.classList.add('hidden');
343
+ });
344
+
345
+ cancelEdit.addEventListener('click', () => {
346
+ editModal.classList.add('hidden');
347
+ });
348
+
349
+ // Save edited client
350
+ editClientForm.addEventListener('submit', (e) => {
351
+ e.preventDefault();
352
+
353
+ const id = document.getElementById('editClientId').value;
354
+ const name = document.getElementById('editClientName').value;
355
+ const phone = document.getElementById('editClientPhone').value;
356
+ const service = document.getElementById('editClientService').value;
357
+ const date = document.getElementById('editClientDate').value;
358
+ const time = document.getElementById('editClientTime').value;
359
+
360
+ const clientIndex = clients.findIndex(client => client.id === id);
361
+
362
+ if (clientIndex !== -1) {
363
+ clients[clientIndex] = {
364
+ ...clients[clientIndex],
365
+ name,
366
+ phone,
367
+ service,
368
+ date,
369
+ time
370
+ };
371
+
372
+ saveClients();
373
+ renderClients();
374
+ generateCalendar();
375
+ showTodaysAppointments();
376
+ editModal.classList.add('hidden');
377
  }
378
  });
379
+
380
+ // Delete client
381
+ function deleteClient(id) {
382
+ if (confirm('Are you sure you want to delete this client?')) {
383
+ clients = clients.filter(client => client.id !== id);
384
+ saveClients();
385
+ renderClients();
386
+ generateCalendar();
387
+ showTodaysAppointments();
388
+ }
389
+ }
390
+
391
+ // Render clients list
392
+ function renderClients() {
393
+ if (clients.length === 0) {
394
+ clientsList.innerHTML = `
395
+ <tr>
396
+ <td colspan="5" class="px-6 py-4 text-center text-gray-500">No clients found. Add your first client above.</td>
397
+ </tr>
398
+ `;
399
+ return;
400
+ }
401
+
402
+ // Sort clients by date and time
403
+ const sortedClients = [...clients].sort((a, b) => {
404
+ const dateA = new Date(`${a.date}T${a.time}`);
405
+ const dateB = new Date(`${b.date}T${b.time}`);
406
+ return dateA - dateB;
407
+ });
408
+
409
+ clientsList.innerHTML = sortedClients.map(client => `
410
+ <tr class="hover:bg-gray-50">
411
+ <td class="px-6 py-4 whitespace-nowrap">
412
+ <div class="text-sm font-medium text-gray-900">${client.name}</div>
413
+ </td>
414
+ <td class="px-6 py-4 whitespace-nowrap">
415
+ <div class="text-sm text-gray-500">${formatPhoneNumber(client.phone)}</div>
416
+ </td>
417
+ <td class="px-6 py-4 whitespace-nowrap">
418
+ <div class="text-sm text-gray-500">${client.service}</div>
419
+ </td>
420
+ <td class="px-6 py-4 whitespace-nowrap">
421
+ <div class="text-sm text-gray-500">${formatDate(client.date)} at ${client.time}</div>
422
+ </td>
423
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
424
+ <button onclick="openEditModal(${JSON.stringify(client).replace(/"/g, '&quot;')})" class="text-pink-600 hover:text-pink-900 mr-3">
425
+ <i class="fas fa-edit"></i>
426
+ </button>
427
+ <button onclick="deleteClient('${client.id}')" class="text-red-600 hover:text-red-900">
428
+ <i class="fas fa-trash-alt"></i>
429
+ </button>
430
+ </td>
431
+ </tr>
432
+ `).join('');
433
+ }
434
+
435
+ // Generate calendar
436
+ function generateCalendar() {
437
+ const year = currentDate.getFullYear();
438
+ const month = currentDate.getMonth();
439
+
440
+ currentMonthYear.textContent = new Date(year, month).toLocaleDateString('en-US', {
441
+ month: 'long',
442
+ year: 'numeric'
443
+ });
444
+
445
+ const firstDay = new Date(year, month, 1).getDay();
446
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
447
+ const daysInPrevMonth = new Date(year, month, 0).getDate();
448
+
449
+ calendarDays.innerHTML = '';
450
+
451
+ // Previous month's days
452
+ for (let i = firstDay; i > 0; i--) {
453
+ const day = daysInPrevMonth - i + 1;
454
+ calendarDays.innerHTML += `
455
+ <div class="h-12 flex items-center justify-center text-gray-400 text-sm empty-day">
456
+ ${day}
457
+ </div>
458
+ `;
459
+ }
460
+
461
+ // Current month's days
462
+ for (let i = 1; i <= daysInMonth; i++) {
463
+ const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
464
+ const hasAppointment = clients.some(client => client.date === dateStr);
465
+ const isToday = isSameDay(new Date(dateStr), new Date());
466
+
467
+ let dayClass = 'h-12 flex items-center justify-center text-sm calendar-day';
468
+ if (hasAppointment) dayClass += ' appointment-day';
469
+ if (isToday) dayClass += ' today';
470
+
471
+ calendarDays.innerHTML += `
472
+ <div class="${dayClass}" data-date="${dateStr}">
473
+ ${i}
474
+ ${hasAppointment ? '<span class="absolute bottom-1 w-1 h-1 bg-pink-500 rounded-full"></span>' : ''}
475
+ </div>
476
+ `;
477
+ }
478
+
479
+ // Next month's days
480
+ const daysToAdd = 42 - (firstDay + daysInMonth); // 6 rows x 7 days = 42 cells
481
+ for (let i = 1; i <= daysToAdd; i++) {
482
+ calendarDays.innerHTML += `
483
+ <div class="h-12 flex items-center justify-center text-gray-400 text-sm empty-day">
484
+ ${i}
485
+ </div>
486
+ `;
487
+ }
488
+
489
+ // Add click event to days
490
+ document.querySelectorAll('.calendar-day').forEach(day => {
491
+ day.addEventListener('click', () => {
492
+ const dateStr = day.getAttribute('data-date');
493
+ selectedDate = new Date(dateStr);
494
+ showDayAppointments(dateStr);
495
+ });
496
+ });
497
+ }
498
+
499
+ // Show today's appointments
500
+ function showTodaysAppointments() {
501
+ const today = new Date().toISOString().split('T')[0];
502
+ selectedDayTitle.textContent = "Today's Appointments";
503
+ showDayAppointments(today);
504
+ }
505
+
506
+ // Show appointments for a specific day
507
+ function showDayAppointments(dateStr) {
508
+ const dayAppointmentsList = clients.filter(client => client.date === dateStr)
509
+ .sort((a, b) => a.time.localeCompare(b.time));
510
+
511
+ if (dayAppointmentsList.length === 0) {
512
+ dayAppointments.innerHTML = `
513
+ <div class="text-center text-gray-500 py-4">
514
+ No appointments scheduled for ${formatDate(dateStr)}
515
+ </div>
516
+ `;
517
+ } else {
518
+ dayAppointments.innerHTML = dayAppointmentsList.map(client => `
519
+ <div class="bg-white border border-gray-200 rounded-lg p-3 shadow-sm">
520
+ <div class="flex justify-between items-start">
521
+ <div>
522
+ <h4 class="font-medium text-gray-800">${client.name}</h4>
523
+ <p class="text-sm text-gray-600">${client.service}</p>
524
+ </div>
525
+ <span class="text-sm font-medium">${client.time}</span>
526
+ </div>
527
+ <div class="mt-2 flex justify-between items-center">
528
+ <span class="text-xs text-gray-500">${formatPhoneNumber(client.phone)}</span>
529
+ <button onclick="deleteClient('${client.id}')" class="text-red-500 hover:text-red-700 text-xs">
530
+ <i class="fas fa-times mr-1"></i>Cancel
531
+ </button>
532
+ </div>
533
+ </div>
534
+ `).join('');
535
+ }
536
+
537
+ // Update selected day title if not today
538
+ if (!isSameDay(new Date(dateStr), new Date())) {
539
+ selectedDayTitle.textContent = `Appointments for ${formatDate(dateStr)}`;
540
+ }
541
+ }
542
+
543
+ // Navigate calendar months
544
+ prevMonthBtn.addEventListener('click', () => {
545
+ currentDate.setMonth(currentDate.getMonth() - 1);
546
+ generateCalendar();
547
+ });
548
+
549
+ nextMonthBtn.addEventListener('click', () => {
550
+ currentDate.setMonth(currentDate.getMonth() + 1);
551
+ generateCalendar();
552
+ });
553
+
554
+ // Send SMS reminders for tomorrow's appointments
555
+ sendRemindersBtn.addEventListener('click', () => {
556
+ const tomorrow = new Date();
557
+ tomorrow.setDate(tomorrow.getDate() + 1);
558
+ const tomorrowStr = tomorrow.toISOString().split('T')[0];
559
+
560
+ const tomorrowsAppointments = clients.filter(client => client.date === tomorrowStr);
561
+
562
+ if (tomorrowsAppointments.length === 0) {
563
+ smsStatus.textContent = "No appointments tomorrow to send reminders for.";
564
+ smsStatus.className = "mt-2 text-sm text-center text-gray-600";
565
+ smsStatus.classList.remove('hidden');
566
+ return;
567
+ }
568
+
569
+ // Simulate sending SMS (in a real app, you would integrate with an SMS API)
570
+ smsStatus.textContent = `Sending ${tomorrowsAppointments.length} reminder(s)...`;
571
+ smsStatus.className = "mt-2 text-sm text-center text-blue-600";
572
+ smsStatus.classList.remove('hidden');
573
+
574
+ setTimeout(() => {
575
+ smsStatus.textContent = `Successfully sent ${tomorrowsAppointments.length} reminder(s) for tomorrow's appointments!`;
576
+ smsStatus.className = "mt-2 text-sm text-center text-green-600";
577
+
578
+ // In a real app, you would track which reminders were sent
579
+ tomorrowsAppointments.forEach(appointment => {
580
+ console.log(`Sent SMS to ${appointment.phone}: Reminder: Your ${appointment.service} appointment is tomorrow at ${appointment.time}.`);
581
+ });
582
+ }, 2000);
583
+ });
584
+
585
+ // Helper functions
586
+ function saveClients() {
587
+ localStorage.setItem('clients', JSON.stringify(clients));
588
+ }
589
+
590
+ function formatDate(dateStr) {
591
+ const options = { weekday: 'short', month: 'short', day: 'numeric' };
592
+ return new Date(dateStr).toLocaleDateString('en-US', options);
593
+ }
594
+
595
+ function formatPhoneNumber(phone) {
596
+ // Simple formatting for display
597
+ return phone.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
598
+ }
599
+
600
+ function isSameDay(date1, date2) {
601
+ return date1.getFullYear() === date2.getFullYear() &&
602
+ date1.getMonth() === date2.getMonth() &&
603
+ date1.getDate() === date2.getDate();
604
+ }
605
  </script>
606
  <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=Cezarxil/client-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
607
  </html>