Hugging Face's logo

Spaces:
gladiatorsociety
/
royal-ap1
Running

App Files Community
gladiatorsociety commited on
Commit
1e99576
·
verified ·
1 Parent(s): 13b9e3b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +575 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Royal Ap1
3
- emoji: 📈
4
- colorFrom: pink
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: royal-ap1
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: gray
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,575 @@
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>Royal Appointments - Book with the Queens</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 styles */
11
+ .calendar-day:hover:not(.empty-day) {
12
+ background-color: #f3e8ff;
13
+ cursor: pointer;
14
+ }
15
+ .selected-day {
16
+ background-color: #8b5cf6 !important;
17
+ color: white;
18
+ }
19
+ .time-slot:hover {
20
+ background-color: #8b5cf6;
21
+ color: white;
22
+ }
23
+ .selected-slot {
24
+ background-color: #8b5cf6;
25
+ color: white;
26
+ }
27
+ .appointment-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .fade-in {
32
+ animation: fadeIn 0.3s ease-in-out;
33
+ }
34
+ .royal-purple-bg {
35
+ background-color: #5b21b6;
36
+ }
37
+ .royal-purple-text {
38
+ color: #5b21b6;
39
+ }
40
+ .royal-purple-border {
41
+ border-color: #5b21b6;
42
+ }
43
+ .crown-icon {
44
+ color: #f59e0b;
45
+ }
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; transform: translateY(10px); }
48
+ to { opacity: 1; transform: translateY(0); }
49
+ }
50
+ .provider-card {
51
+ transition: all 0.3s ease;
52
+ border-left: 4px solid transparent;
53
+ }
54
+ .provider-card:hover {
55
+ transform: translateY(-3px);
56
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
57
+ border-left: 4px solid #8b5cf6;
58
+ }
59
+ /* Swapped background colors between Carla and Heavenly */
60
+ .provider-carla {
61
+ background: linear-gradient(to right, #ecfdf5, #d1fae5);
62
+ }
63
+ .provider-heavenly {
64
+ background: linear-gradient(to right, #f3e8ff, #e9d5ff);
65
+ }
66
+ .provider-kyri {
67
+ background: linear-gradient(to right, #fef2f2, #fee2e2);
68
+ }
69
+ /* Price list styles */
70
+ .price-list {
71
+ margin-top: 0.5rem;
72
+ font-size: 0.8rem;
73
+ }
74
+ .price-item {
75
+ display: flex;
76
+ justify-content: space-between;
77
+ padding: 0.25rem 0;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-purple-50 font-serif">
82
+ <div class="min-h-screen">
83
+ <!-- Header -->
84
+ <header class="royal-purple-bg text-white shadow-lg">
85
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
86
+ <div class="flex items-center">
87
+ <i class="fas fa-crown crown-icon text-2xl mr-3"></i>
88
+ <h1 class="text-xl font-bold">Royal Appointments</h1>
89
+ </div>
90
+ <nav class="hidden md:flex space-x-8">
91
+ <a href="#" class="text-white font-medium hover:text-yellow-200">Home</a>
92
+ <a href="#" class="text-purple-200 hover:text-white">Services</a>
93
+ <a href="#" class="text-purple-200 hover:text-white">Our Queens</a>
94
+ <a href="#" class="text-purple-200 hover:text-white">My Appointments</a>
95
+ </nav>
96
+ <div class="flex items-center space-x-4">
97
+ <button class="md:hidden text-white">
98
+ <i class="fas fa-bars text-xl"></i>
99
+ </button>
100
+ <div class="hidden md:flex items-center space-x-2">
101
+ <div class="w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center text-purple-900 font-medium">OSO</div>
102
+ <span class="text-sm font-medium">Oso Pardo</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Main Content -->
109
+ <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
110
+ <div class="flex flex-col lg:flex-row gap-8">
111
+ <!-- Left Side - Calendar and Time Selection -->
112
+ <div class="lg:w-2/3">
113
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6 border border-purple-100">
114
+ <div class="flex justify-between items-center mb-6">
115
+ <h2 class="text-xl font-bold text-purple-900">Book a Royal Appointment</h2>
116
+ <div class="flex items-center space-x-2">
117
+ <button id="prev-month" class="p-2 rounded-full hover:bg-purple-100">
118
+ <i class="fas fa-chevron-left text-purple-600"></i>
119
+ </button>
120
+ <span id="current-month" class="font-medium text-purple-800">June 2023</span>
121
+ <button id="next-month" class="p-2 rounded-full hover:bg-purple-100">
122
+ <i class="fas fa-chevron-right text-purple-600"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Calendar Grid -->
128
+ <div class="mb-6">
129
+ <div class="grid grid-cols-7 gap-1 mb-2">
130
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Sun</div>
131
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Mon</div>
132
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Tue</div>
133
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Wed</div>
134
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Thu</div>
135
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Fri</div>
136
+ <div class="text-center text-xs font-medium text-purple-600 py-2">Sat</div>
137
+ </div>
138
+ <div id="calendar-grid" class="grid grid-cols-7 gap-1">
139
+ <!-- Calendar days will be populated by JavaScript -->
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Time Slots -->
144
+ <div id="time-slots-container" class="hidden fade-in">
145
+ <h3 class="font-medium text-purple-800 mb-4">Available Royal Time Slots</h3>
146
+ <div id="time-slots" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
147
+ <!-- Time slots will be populated by JavaScript -->
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Appointment Form -->
153
+ <div id="appointment-form" class="bg-white rounded-lg shadow-md p-6 hidden fade-in border border-purple-100">
154
+ <h2 class="text-xl font-bold text-purple-900 mb-6">Royal Appointment Details</h2>
155
+ <form id="booking-form">
156
+ <div class="mb-4">
157
+ <label for="service" class="block text-sm font-medium text-purple-800 mb-1">Service</label>
158
+ <select id="service" class="w-full px-3 py-2 border border-purple-200 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
159
+ <option value="">Select a royal service</option>
160
+ <option value="royal-consultation">Royal Consultation</option>
161
+ <option value="kingdom-strategy">Kingdom Strategy Session</option>
162
+ <option value="court-etiquette">Court Etiquette Training</option>
163
+ <option value="royal-decree">Royal Decree Assistance</option>
164
+ </select>
165
+ </div>
166
+ <div class="mb-4">
167
+ <label for="provider" class="block text-sm font-medium text-purple-800 mb-1">Royal Provider</label>
168
+ <select id="provider" class="w-full px-3 py-2 border border-purple-200 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500">
169
+ <option value="">Select your queen</option>
170
+ <option value="queen_carla">Queen Carla</option>
171
+ <option value="queen_heavenly">Queen Heavenly</option>
172
+ <option value="queen_kyri">Queen Kyri</option>
173
+ </select>
174
+ </div>
175
+ <div class="mb-4">
176
+ <label for="notes" class="block text-sm font-medium text-purple-800 mb-1">Royal Notes (Optional)</label>
177
+ <textarea id="notes" rows="3" class="w-full px-3 py-2 border border-purple-200 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="Your royal requests or information..."></textarea>
178
+ </div>
179
+ <div class="flex justify-end space-x-3">
180
+ <button type="button" id="cancel-booking" class="px-4 py-2 border border-purple-200 rounded-md text-sm font-medium text-purple-800 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
181
+ Cancel
182
+ </button>
183
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white royal-purple-bg hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
184
+ Confirm Royal Appointment
185
+ </button>
186
+ </div>
187
+ </form>
188
+ </div>
189
+
190
+ <!-- Our Queens Section -->
191
+ <div class="bg-white rounded-lg shadow-md p-6 mt-6 border border-purple-100">
192
+ <h2 class="text-xl font-bold text-purple-900 mb-6">Meet Our Royal Providers</h2>
193
+ <div class="grid md:grid-cols-3 gap-6">
194
+ <!-- Queen Carla -->
195
+ <div class="provider-card provider-carla rounded-lg p-4">
196
+ <div class="flex items-center mb-3">
197
+ <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center text-green-800 font-bold mr-3">
198
+ <i class="fas fa-crown"></i>
199
+ </div>
200
+ <div>
201
+ <h3 class="font-bold text-green-900">Queen Carla</h3>
202
+ <p class="text-sm text-green-600">Royal Strategist</p>
203
+ </div>
204
+ </div>
205
+ <p class="text-sm text-green-700 mb-3">Specializes in kingdom expansion strategies and royal diplomacy.</p>
206
+ <div class="flex flex-wrap gap-2">
207
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Strategy</span>
208
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Diplomacy</span>
209
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Leadership</span>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Queen Heavenly -->
214
+ <div class="provider-card provider-heavenly rounded-lg p-4">
215
+ <div class="flex items-center mb-3">
216
+ <div class="w-12 h-12 rounded-full bg-purple-200 flex items-center justify-center text-purple-800 font-bold mr-3">
217
+ <i class="fas fa-crown"></i>
218
+ </div>
219
+ <div>
220
+ <h3 class="font-bold text-purple-900">Queen Heavenly</h3>
221
+ <p class="text-sm text-purple-600">Nail Specialist</p>
222
+ </div>
223
+ </div>
224
+ <p class="text-sm text-purple-700 mb-2">Expert nail technician providing premium nail services.</p>
225
+ <div class="price-list text-purple-800 border-t border-purple-100 mt-2 pt-1">
226
+ <div class="price-item"><span>Short Nails</span><span>$25</span></div>
227
+ <div class="price-item"><span>Medium Nails</span><span>$30</span></div>
228
+ <div class="price-item"><span>Medium Long Nails</span><span>$35</span></div>
229
+ <div class="price-item"><span>Long Nails</span><span>$45</span></div>
230
+ <div class="price-item"><span>XL Long Nails</span><span>$50-55</span></div>
231
+ <div class="price-item"><span>Toe Sets</span><span>$35</span></div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Queen Kyri -->
236
+ <div class="provider-card provider-kyri rounded-lg p-4">
237
+ <div class="flex items-center mb-3">
238
+ <div class="w-12 h-12 rounded-full bg-red-200 flex items-center justify-center text-red-800 font-bold mr-3">
239
+ <i class="fas fa-crown"></i>
240
+ </div>
241
+ <div>
242
+ <h3 class="font-bold text-red-900">Queen Kyri</h3>
243
+ <p class="text-sm text-red-600">Royal Decree Specialist</p>
244
+ </div>
245
+ </div>
246
+ <p class="text-sm text-red-700 mb-3">Expert in crafting royal decrees, proclamations, and official documents.</p>
247
+ <div class="flex flex-wrap gap-2">
248
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Decrees</span>
249
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Proclamations</span>
250
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Documents</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Right Side - Upcoming Appointments -->
258
+ <div class="lg:w-1/3">
259
+ <div class="bg-white rounded-lg shadow-md p-6 sticky top-6 border border-purple-100">
260
+ <div class="flex justify-between items-center mb-6">
261
+ <h2 class="text-xl font-bold text-purple-900">Your Royal Appointments</h2>
262
+ <button class="text-purple-600 text-sm font-medium hover:text-purple-800">View All</button>
263
+ </div>
264
+
265
+ <div id="upcoming-appointments">
266
+ <!-- Sample appointment cards -->
267
+ <div class="appointment-card mb-4 border border-purple-100 rounded-lg p-4 transition-all duration-200">
268
+ <div class="flex justify-between items-start mb-2">
269
+ <div>
270
+ <h3 class="font-medium text-purple-900">Royal Consultation</h3>
271
+ <p class="text-sm text-purple-600">With Queen Carla</p>
272
+ </div>
273
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Confirmed</span>
274
+ </div>
275
+ <div class="flex items-center text-sm text-purple-600 mb-2">
276
+ <i class="far fa-calendar-alt mr-2"></i>
277
+ <span>June 15, 2023</span>
278
+ </div>
279
+ <div class="flex items-center text-sm text-purple-600">
280
+ <i class="far fa-clock mr-2"></i>
281
+ <span>10:30 AM - 11:00 AM</span>
282
+ </div>
283
+ <div class="mt-3 flex justify-end space-x-2">
284
+ <button class="text-xs text-purple-600 hover:text-purple-800">Reschedule</button>
285
+ <button class="text-xs text-red-500 hover:text-red-700">Cancel</button>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="appointment-card mb-4 border border-purple-100 rounded-lg p-4 transition-all duration-200">
290
+ <div class="flex justify-between items-start mb-2">
291
+ <div>
292
+ <h3 class="font-medium text-purple-900">Medium Nails</h3>
293
+ <p class="text-sm text-purple-600">With Queen Heavenly</p>
294
+ </div>
295
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Pending</span>
296
+ </div>
297
+ <div class="flex items-center text-sm text-purple-600 mb-2">
298
+ <i class="far fa-calendar-alt mr-2"></i>
299
+ <span>June 20, 2023</span>
300
+ </div>
301
+ <div class="flex items-center text-sm text-purple-600">
302
+ <i class="far fa-clock mr-2"></i>
303
+ <span>2:00 PM - 2:30 PM</span>
304
+ </div>
305
+ <div class="mt-3 flex justify-end space-x-2">
306
+ <button class="text-xs text-purple-600 hover:text-purple-800">Reschedule</button>
307
+ <button class="text-xs text-red-500 hover:text-red-700">Cancel</button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="text-center py-4">
312
+ <button class="text-purple-600 hover:text-purple-800 font-medium flex items-center justify-center w-full">
313
+ <i class="fas fa-plus mr-2"></i> Book New Royal Appointment
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </main>
321
+ </div>
322
+
323
+ <!-- Confirmation Modal -->
324
+ <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
325
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 fade-in border-2 border-purple-300">
326
+ <div class="text-center">
327
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100">
328
+ <i class="fas fa-crown crown-icon"></i>
329
+ </div>
330
+ <h3 class="mt-3 text-lg font-medium text-purple-900">Royal Appointment Confirmed!</h3>
331
+ <div class="mt-4 bg-purple-50 p-4 rounded-md">
332
+ <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Service:</span> <span id="confirmed-service">Royal Consultation</span></p>
333
+ <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Provider:</span> <span id="confirmed-provider">Queen Carla</span></p>
334
+ <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Date:</span> <span id="confirmed-date">June 15, 2023</span></p>
335
+ <p class="text-sm text-purple-700"><span class="font-medium">Time:</span> <span id="confirmed-time">10:30 AM - 11:00 AM</span></p>
336
+ </div>
337
+ <div class="mt-6">
338
+ <button id="close-modal" type="button" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white royal-purple-bg hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
339
+ Done
340
+ </button>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <script>
347
+ document.addEventListener('DOMContentLoaded', function() {
348
+ // Current date
349
+ let currentDate = new Date();
350
+ let selectedDate = null;
351
+ let selectedTimeSlot = null;
352
+
353
+ // DOM Elements
354
+ const calendarGrid = document.getElementById('calendar-grid');
355
+ const currentMonthElement = document.getElementById('current-month');
356
+ const prevMonthButton = document.getElementById('prev-month');
357
+ const nextMonthButton = document.getElementById('next-month');
358
+ const timeSlotsContainer = document.getElementById('time-slots-container');
359
+ const timeSlots = document.getElementById('time-slots');
360
+ const appointmentForm = document.getElementById('appointment-form');
361
+ const bookingForm = document.getElementById('booking-form');
362
+ const cancelBookingButton = document.getElementById('cancel-booking');
363
+ const confirmationModal = document.getElementById('confirmation-modal');
364
+ const closeModalButton = document.getElementById('close-modal');
365
+
366
+ // Initialize calendar
367
+ renderCalendar(currentDate);
368
+
369
+ // Event Listeners
370
+ prevMonthButton.addEventListener('click', () => {
371
+ currentDate.setMonth(currentDate.getMonth() - 1);
372
+ renderCalendar(currentDate);
373
+ });
374
+
375
+ nextMonthButton.addEventListener('click', () => {
376
+ currentDate.setMonth(currentDate.getMonth() + 1);
377
+ renderCalendar(currentDate);
378
+ });
379
+
380
+ bookingForm.addEventListener('submit', function(e) {
381
+ e.preventDefault();
382
+
383
+ // Get form values
384
+ const service = document.getElementById('service').value;
385
+ const provider = document.getElementById('provider').value;
386
+ const notes = document.getElementById('notes').value;
387
+
388
+ // Update confirmation modal with appointment details
389
+ document.getElementById('confirmed-service').textContent =
390
+ document.getElementById('service').options[document.getElementById('service').selectedIndex].text;
391
+ document.getElementById('confirmed-provider').textContent =
392
+ document.getElementById('provider').options[document.getElementById('provider').selectedIndex].text;
393
+ document.getElementById('confirmed-date').textContent =
394
+ selectedDate.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
395
+ document.getElementById('confirmed-time').textContent = selectedTimeSlot;
396
+
397
+ // Hide form and show confirmation
398
+ appointmentForm.classList.add('hidden');
399
+ confirmationModal.classList.remove('hidden');
400
+
401
+ // Here you would typically send the data to a server
402
+ console.log('Royal appointment booked:', {
403
+ date: selectedDate,
404
+ time: selectedTimeSlot,
405
+ service,
406
+ provider,
407
+ notes
408
+ });
409
+ });
410
+
411
+ cancelBookingButton.addEventListener('click', function() {
412
+ appointmentForm.classList.add('hidden');
413
+ resetSelection();
414
+ });
415
+
416
+ closeModalButton.addEventListener('click', function() {
417
+ confirmationModal.classList.add('hidden');
418
+ resetSelection();
419
+ });
420
+
421
+ // Functions
422
+ function renderCalendar(date) {
423
+ // Set month and year in header
424
+ currentMonthElement.textContent = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
425
+
426
+ // Clear previous calendar
427
+ calendarGrid.innerHTML = '';
428
+
429
+ // Get first day of month and total days in month
430
+ const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
431
+ const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
432
+
433
+ // Get day of week for first day (0 = Sunday, 6 = Saturday)
434
+ const firstDayOfWeek = firstDay.getDay();
435
+
436
+ // Get days from previous month to show
437
+ const prevMonthDays = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
438
+
439
+ // Create calendar grid
440
+ let dayCount = 1;
441
+ let nextMonthDay = 1;
442
+
443
+ // 6 rows to account for months that span 6 weeks
444
+ for (let i = 0; i < 42; i++) {
445
+ const dayElement = document.createElement('div');
446
+ dayElement.className = 'text-center py-2 rounded-md';
447
+
448
+ if (i < firstDayOfWeek) {
449
+ // Days from previous month
450
+ const prevDay = prevMonthDays - (firstDayOfWeek - i - 1);
451
+ dayElement.textContent = prevDay;
452
+ dayElement.classList.add('text-gray-400', 'empty-day');
453
+ } else if (dayCount <= daysInMonth) {
454
+ // Days in current month
455
+ dayElement.textContent = dayCount;
456
+ dayElement.classList.add('calendar-day');
457
+
458
+ // Highlight today
459
+ const today = new Date();
460
+ if (date.getMonth() === today.getMonth() &&
461
+ date.getFullYear() === today.getFullYear() &&
462
+ dayCount === today.getDate()) {
463
+ dayElement.classList.add('bg-purple-100', 'font-medium');
464
+ }
465
+
466
+ // Add click event
467
+ dayElement.addEventListener('click', function() {
468
+ selectDay(dayCount, dayElement);
469
+ });
470
+
471
+ dayCount++;
472
+ } else {
473
+ // Days from next month
474
+ dayElement.textContent = nextMonthDay;
475
+ dayElement.classList.add('text-gray-400', 'empty-day');
476
+ nextMonthDay++;
477
+ }
478
+
479
+ calendarGrid.appendChild(dayElement);
480
+ }
481
+ }
482
+
483
+ function selectDay(day, element) {
484
+ // Remove selection from previously selected day
485
+ const previouslySelected = document.querySelector('.selected-day');
486
+ if (previouslySelected) {
487
+ previouslySelected.classList.remove('selected-day');
488
+ }
489
+
490
+ // Add selection to new day
491
+ element.classList.add('selected-day');
492
+
493
+ // Set selected date
494
+ selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
495
+
496
+ // Show time slots
497
+ showTimeSlots();
498
+ }
499
+
500
+ function showTimeSlots() {
501
+ // Generate random available time slots for demo
502
+ timeSlots.innerHTML = '';
503
+
504
+ const startHour = 9; // 9 AM
505
+ const endHour = 17; // 5 PM
506
+ const availableSlots = [];
507
+
508
+ // Generate slots every 30 minutes
509
+ for (let hour = startHour; hour < endHour; hour++) {
510
+ // Randomly make some slots unavailable for demo
511
+ if (Math.random() > 0.3) {
512
+ availableSlots.push(`${hour}:00 - ${hour}:30`);
513
+ }
514
+ if (Math.random() > 0.3) {
515
+ availableSlots.push(`${hour}:30 - ${hour + 1}:00`);
516
+ }
517
+ }
518
+
519
+ // Display available slots
520
+ availableSlots.forEach(slot => {
521
+ const slotElement = document.createElement('div');
522
+ slotElement.className = 'time-slot text-center py-2 border border-purple-200 rounded-md text-sm';
523
+ slotElement.textContent = slot;
524
+
525
+ slotElement.addEventListener('click', function() {
526
+ // Remove selection from previously selected slot
527
+ const previouslySelected = document.querySelector('.selected-slot');
528
+ if (previouslySelected) {
529
+ previouslySelected.classList.remove('selected-slot');
530
+ }
531
+
532
+ // Add selection to new slot
533
+ slotElement.classList.add('selected-slot');
534
+ selectedTimeSlot = slot;
535
+
536
+ // Show appointment form
537
+ setTimeout(() => {
538
+ appointmentForm.classList.remove('hidden');
539
+ }, 200);
540
+ });
541
+
542
+ timeSlots.appendChild(slotElement);
543
+ });
544
+
545
+ // Show time slots container
546
+ timeSlotsContainer.classList.remove('hidden');
547
+ }
548
+
549
+ function resetSelection() {
550
+ // Reset selected day and time
551
+ const selectedDay = document.querySelector('.selected-day');
552
+ if (selectedDay) {
553
+ selectedDay.classList.remove('selected-day');
554
+ }
555
+
556
+ const selectedSlot = document.querySelector('.selected-slot');
557
+ if (selectedSlot) {
558
+ selectedSlot.classList.remove('selected-slot');
559
+ }
560
+
561
+ // Hide time slots and form
562
+ timeSlotsContainer.classList.add('hidden');
563
+ appointmentForm.classList.add('hidden');
564
+
565
+ // Reset form
566
+ bookingForm.reset();
567
+
568
+ // Clear selections
569
+ selectedDate = null;
570
+ selectedTimeSlot = null;
571
+ }
572
+ });
573
+ </script>
574
+ <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=gladiatorsociety/royal-ap1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
575
+ </html>
prompts.txt ADDED
File without changes