Hugging Face's logo

Spaces:
privateuserh
/
chandelier-performance-module
Running

App Files Community
privateuserh commited on
Commit
5b628cd
·
verified ·
1 Parent(s): 43ae8e8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +494 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chandelier Performance Module
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: pink
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: chandelier-performance-module
3
+ emoji: 🐳
4
+ colorFrom: purple
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,494 @@
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>Performance Venue 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
+ /* Custom animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(10px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 0.5s ease-out forwards;
18
+ }
19
+
20
+ /* Custom checkbox */
21
+ .custom-checkbox {
22
+ display: none;
23
+ }
24
+
25
+ .custom-checkbox + label:before {
26
+ content: '';
27
+ display: inline-block;
28
+ width: 20px;
29
+ height: 20px;
30
+ margin-right: 10px;
31
+ border: 2px solid #4f46e5;
32
+ border-radius: 4px;
33
+ background-color: white;
34
+ vertical-align: middle;
35
+ }
36
+
37
+ .custom-checkbox:checked + label:before {
38
+ background-color: #4f46e5;
39
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
40
+ background-position: center;
41
+ background-repeat: no-repeat;
42
+ background-size: 60%;
43
+ }
44
+
45
+ /* Custom scrollbar */
46
+ ::-webkit-scrollbar {
47
+ width: 8px;
48
+ }
49
+
50
+ ::-webkit-scrollbar-track {
51
+ background: #f1f1f1;
52
+ border-radius: 10px;
53
+ }
54
+
55
+ ::-webkit-scrollbar-thumb {
56
+ background: #888;
57
+ border-radius: 10px;
58
+ }
59
+
60
+ ::-webkit-scrollbar-thumb:hover {
61
+ background: #555;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-100 min-h-screen">
66
+ <div class="container mx-auto px-4 py-8">
67
+ <!-- Header with navigation -->
68
+ <header class="mb-10">
69
+ <div class="flex justify-between items-center">
70
+ <div class="flex items-center space-x-2">
71
+ <i class="fas fa-theater-masks text-indigo-600 text-3xl"></i>
72
+ <h1 class="text-2xl font-bold text-gray-800">StageMasters</h1>
73
+ </div>
74
+ <nav class="hidden md:block">
75
+ <ul class="flex space-x-8">
76
+ <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">Venues</a></li>
77
+ <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">Artists</a></li>
78
+ <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">Pricing</a></li>
79
+ <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">Support</a></li>
80
+ </ul>
81
+ </nav>
82
+ <button class="md:hidden text-gray-700">
83
+ <i class="fas fa-bars text-2xl"></i>
84
+ </button>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Main booking section -->
89
+ <div class="max-w-5xl mx-auto fade-in">
90
+ <div class="overflow-hidden shadow-lg rounded-xl">
91
+ <div class="grid lg:grid-cols-12 bg-white">
92
+ <!-- Calendar section -->
93
+ <div class="lg:col-span-7 p-8 bg-gray-50 border-r border-gray-200">
94
+ <div class="flex justify-between items-center mb-6">
95
+ <h2 class="text-2xl font-bold text-gray-800">Select Date & Time</h2>
96
+ <div class="flex items-center space-x-3">
97
+ <button id="prev-month" class="p-2 rounded-full hover:bg-gray-200 transition">
98
+ <i class="fas fa-chevron-left text-gray-600"></i>
99
+ </button>
100
+ <button id="next-month" class="p-2 rounded-full hover:bg-gray-200 transition">
101
+ <i class="fas fa-chevron-right text-gray-600"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <div id="month-year" class="text-xl font-semibold text-center mb-6 text-indigo-700"></div>
107
+
108
+ <div class="grid grid-cols-7 gap-2 mb-6">
109
+ <div class="text-center font-medium text-gray-500">Sun</div>
110
+ <div class="text-center font-medium text-gray-500">Mon</div>
111
+ <div class="text-center font-medium text-gray-500">Tue</div>
112
+ <div class="text-center font-medium text-gray-500">Wed</div>
113
+ <div class="text-center font-medium text-gray-500">Thu</div>
114
+ <div class="text-center font-medium text-gray-500">Fri</div>
115
+ <div class="text-center font-medium text-gray-500">Sat</div>
116
+ </div>
117
+
118
+ <div id="calendar-grid" class="grid grid-cols-7 gap-2 mb-8"></div>
119
+
120
+ <div class="mb-6">
121
+ <h3 class="font-semibold text-gray-700 mb-3">Available Time Slots</h3>
122
+ <div id="time-slots" class="grid grid-cols-2 sm:grid-cols-3 gap-3">
123
+ <!-- Time slots will be populated by JavaScript -->
124
+ </div>
125
+ </div>
126
+
127
+ <div>
128
+ <h3 class="font-semibold text-gray-700 mb-3">Performance Duration</h3>
129
+ <div class="flex flex-wrap gap-2">
130
+ <button class="duration-btn px-4 py-2 rounded-full bg-indigo-100 text-indigo-700 font-medium hover:bg-indigo-200 transition" data-duration="1">1 hour</button>
131
+ <button class="duration-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition" data-duration="2">2 hours</button>
132
+ <button class="duration-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition" data-duration="3">3 hours</button>
133
+ <button class="duration-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition" data-duration="all">Full day</button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Booking summary section -->
139
+ <div class="lg:col-span-5 p-8">
140
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Booking Summary</h2>
141
+
142
+ <div class="bg-gray-50 rounded-lg p-4 mb-6">
143
+ <div class="flex items-center space-x-3 mb-4">
144
+ <div class="w-16 h-16 rounded-md overflow-hidden">
145
+ <img src="https://images.unsplash.com/photo-1551818255-e6e10975bc17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Venue Image" class="w-full h-full object-cover">
146
+ </div>
147
+ <div>
148
+ <h3 class="font-semibold">Grand Performance Hall</h3>
149
+ <p class="text-sm text-gray-600"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 123 Art Street, Culture City</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="space-y-3">
154
+ <div class="flex justify-between">
155
+ <span class="text-gray-600">Capacity:</span>
156
+ <span class="font-medium">250 seated / 400 standing</span>
157
+ </div>
158
+ <div class="flex justify-between">
159
+ <span class="text-gray-600">Stage size:</span>
160
+ <span class="font-medium">10m x 8m</span>
161
+ </div>
162
+ <div class="flex justify-between">
163
+ <span class="text-gray-600">Equipment:</span>
164
+ <span class="font-medium">Sound system, lights</span>
165
+ </div>
166
+ <div class="flex justify-between">
167
+ <span class="text-gray-600">Dressing rooms:</span>
168
+ <span class="font-medium">3 available</span>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="space-y-4">
174
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
175
+ <div>
176
+ <h4 class="font-medium text-gray-700">Selected Date</h4>
177
+ <p id="selected-date" class="text-sm text-gray-500">Not selected</p>
178
+ </div>
179
+ <button id="edit-date" class="text-indigo-600 hover:text-indigo-800 transition">
180
+ <i class="fas fa-edit"></i>
181
+ </button>
182
+ </div>
183
+
184
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
185
+ <div>
186
+ <h4 class="font-medium text-gray-700">Time Slot</h4>
187
+ <p id="selected-time" class="text-sm text-gray-500">Not selected</p>
188
+ </div>
189
+ <button id="edit-time" class="text-indigo-600 hover:text-indigo-800 transition">
190
+ <i class="fas fa-edit"></i>
191
+ </button>
192
+ </div>
193
+
194
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
195
+ <div>
196
+ <h4 class="font-medium text-gray-700">Performance Duration</h4>
197
+ <p id="selected-duration" class="text-sm text-gray-500">Not selected</p>
198
+ </div>
199
+ <button id="edit-duration" class="text-indigo-600 hover:text-indigo-800 transition">
200
+ <i class="fas fa-edit"></i>
201
+ </button>
202
+ </div>
203
+
204
+ <div class="pt-2">
205
+ <div class="flex justify-between mb-1">
206
+ <span class="text-gray-600">Base rate:</span>
207
+ <span id="base-rate" class="font-medium">$0.00</span>
208
+ </div>
209
+ <div class="flex justify-between mb-1">
210
+ <span class="text-gray-600">Equipment fee:</span>
211
+ <span id="equipment-fee" class="font-medium">$150.00</span>
212
+ </div>
213
+ <div class="flex justify-between font-bold text-lg">
214
+ <span>Total:</span>
215
+ <span id="total-cost" class="text-indigo-600">$0.00</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="mt-8">
221
+ <input type="checkbox" id="terms-check" class="custom-checkbox">
222
+ <label for="terms-check" class="text-sm text-gray-600 cursor-pointer">I agree to the <a href="#" class="text-indigo-600 hover:underline">terms and conditions</a> and <a href="#" class="text-indigo-600 hover:underline">venue policies</a></label>
223
+
224
+ <button id="book-now-btn" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
225
+ Book Now
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Modal for booking confirmation -->
234
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
235
+ <div class="bg-white rounded-xl p-8 max-w-md w-full text-center fade-in">
236
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
237
+ <i class="fas fa-check text-green-500 text-3xl"></i>
238
+ </div>
239
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h2>
240
+ <p class="text-gray-600 mb-6">Your performance slot has been successfully booked. Details have been sent to your email.</p>
241
+ <div class="bg-gray-50 rounded-lg p-4 mb-6">
242
+ <div id="confirmation-details" class="space-y-2 text-left">
243
+ <!-- Details will be populated by JavaScript -->
244
+ </div>
245
+ </div>
246
+ <button id="close-modal" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition">
247
+ Back to Dashboard
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <script>
254
+ document.addEventListener('DOMContentLoaded', function() {
255
+ // Date handling
256
+ let currentDate = new Date();
257
+ let selectedDate = null;
258
+ let selectedTime = null;
259
+ let selectedDuration = null;
260
+
261
+ const monthYearEl = document.getElementById('month-year');
262
+ const calendarGridEl = document.getElementById('calendar-grid');
263
+ const timeSlotsEl = document.getElementById('time-slots');
264
+ const selectedDateEl = document.getElementById('selected-date');
265
+ const selectedTimeEl = document.getElementById('selected-time');
266
+ const selectedDurationEl = document.getElementById('selected-duration');
267
+ const baseRateEl = document.getElementById('base-rate');
268
+ const equipmentFeeEl = document.getElementById('equipment-fee');
269
+ const totalCostEl = document.getElementById('total-cost');
270
+ const bookNowBtn = document.getElementById('book-now-btn');
271
+ const successModal = document.getElementById('success-modal');
272
+ const confirmationDetails = document.getElementById('confirmation-details');
273
+
274
+ // Initialize calendar
275
+ renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
276
+
277
+ // Navigation buttons
278
+ document.getElementById('prev-month').addEventListener('click', function() {
279
+ currentDate.setMonth(currentDate.getMonth() - 1);
280
+ renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
281
+ });
282
+
283
+ document.getElementById('next-month').addEventListener('click', function() {
284
+ currentDate.setMonth(currentDate.getMonth() + 1);
285
+ renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
286
+ });
287
+
288
+ // Duration buttons
289
+ document.querySelectorAll('.duration-btn').forEach(btn => {
290
+ btn.addEventListener('click', function() {
291
+ // Remove active class from all buttons
292
+ document.querySelectorAll('.duration-btn').forEach(b => {
293
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
294
+ b.classList.add('bg-gray-100', 'text-gray-700');
295
+ });
296
+
297
+ // Add active class to clicked button
298
+ this.classList.remove('bg-gray-100', 'text-gray-700');
299
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
300
+
301
+ selectedDuration = this.dataset.duration;
302
+ selectedDurationEl.textContent = selectedDuration === 'all' ? 'Full day (8 hours)' : `${selectedDuration} hour(s)`;
303
+ updateTotalCost();
304
+ checkBookingReady();
305
+ });
306
+ });
307
+
308
+ // Edit buttons
309
+ document.getElementById('edit-date').addEventListener('click', function() {
310
+ selectedDate = null;
311
+ selectedDateEl.textContent = 'Not selected';
312
+ checkBookingReady();
313
+ });
314
+
315
+ document.getElementById('edit-time').addEventListener('click', function() {
316
+ selectedTime = null;
317
+ selectedTimeEl.textContent = 'Not selected';
318
+ checkBookingReady();
319
+ });
320
+
321
+ document.getElementById('edit-duration').addEventListener('click', function() {
322
+ selectedDuration = null;
323
+ document.querySelectorAll('.duration-btn').forEach(b => {
324
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
325
+ b.classList.add('bg-gray-100', 'text-gray-700');
326
+ });
327
+ selectedDurationEl.textContent = 'Not selected';
328
+ checkBookingReady();
329
+ });
330
+
331
+ // Terms checkbox
332
+ document.getElementById('terms-check').addEventListener('change', checkBookingReady);
333
+
334
+ // Book now button
335
+ bookNowBtn.addEventListener('click', function() {
336
+ if (!selectedDate || !selectedTime || !selectedDuration) return;
337
+
338
+ // Show confirmation modal
339
+ confirmationDetails.innerHTML = `
340
+ <p><strong>Venue:</strong> Grand Performance Hall</p>
341
+ <p><strong>Date:</strong> ${selectedDate.toDateString()}</p>
342
+ <p><strong>Time:</strong> ${selectedTime}</p>
343
+ <p><strong>Duration:</strong> ${selectedDuration === 'all' ? 'Full day (8 hours)' : selectedDuration + ' hour(s)'}</p>
344
+ <p><strong>Total:</strong> ${totalCostEl.textContent}</p>
345
+ `;
346
+
347
+ successModal.classList.remove('hidden');
348
+ });
349
+
350
+ // Close modal button
351
+ document.getElementById('close-modal').addEventListener('click', function() {
352
+ successModal.classList.add('hidden');
353
+ });
354
+
355
+ // Functions
356
+ function renderCalendar(year, month) {
357
+ monthYearEl.textContent = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' });
358
+ calendarGridEl.innerHTML = '';
359
+
360
+ // Get first day of month and total days
361
+ const firstDay = new Date(year, month, 1).getDay();
362
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
363
+
364
+ // Add empty cells for days before first day of month
365
+ for (let i = 0; i < firstDay; i++) {
366
+ const cell = document.createElement('div');
367
+ cell.className = 'h-12';
368
+ calendarGridEl.appendChild(cell);
369
+ }
370
+
371
+ // Add cells for each day of the month
372
+ for (let day = 1; day <= daysInMonth; day++) {
373
+ const date = new Date(year, month, day);
374
+ const cell = document.createElement('button');
375
+ cell.className = 'h-12 rounded-full flex items-center justify-center font-medium hover:bg-gray-100 transition';
376
+ cell.textContent = day;
377
+
378
+ // Highlight today
379
+ if (day === new Date().getDate() && month === new Date().getMonth() && year === new Date().getFullYear()) {
380
+ cell.classList.add('bg-indigo-100', 'text-indigo-700');
381
+ }
382
+
383
+ // Disable past dates
384
+ if (date < new Date(new Date().setHours(0, 0, 0, 0))) {
385
+ cell.classList.add('text-gray-400', 'cursor-not-allowed');
386
+ cell.disabled = true;
387
+ } else {
388
+ cell.addEventListener('click', function() {
389
+ // Remove selected class from all cells
390
+ document.querySelectorAll('#calendar-grid button').forEach(c => {
391
+ c.classList.remove('bg-indigo-600', 'text-white');
392
+ });
393
+
394
+ // Add selected class to clicked cell
395
+ cell.classList.add('bg-indigo-600', 'text-white');
396
+
397
+ selectedDate = date;
398
+ selectedDateEl.textContent = date.toDateString();
399
+ generateTimeSlots();
400
+ checkBookingReady();
401
+ });
402
+ }
403
+
404
+ calendarGridEl.appendChild(cell);
405
+ }
406
+ }
407
+
408
+ function generateTimeSlots() {
409
+ if (!selectedDate) return;
410
+
411
+ timeSlotsEl.innerHTML = '';
412
+
413
+ // Generate available time slots (mock data)
414
+ const startHour = 9; // 9 AM
415
+ const endHour = 22; // 10 PM
416
+ const hourDiff = endHour - startHour;
417
+
418
+ for (let i = 0; i < hourDiff; i++) {
419
+ const hour = startHour + i;
420
+ const ampm = hour >= 12 ? 'PM' : 'AM';
421
+ const displayHour = hour > 12 ? hour - 12 : hour;
422
+
423
+ // Skip some unavailable times (mock)
424
+ if (Math.random() > 0.7) continue;
425
+
426
+ const timeSlot = document.createElement('button');
427
+ timeSlot.className = 'bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg py-2 px-3 text-sm font-medium transition';
428
+ timeSlot.textContent = `${displayHour}:00 ${ampm}`;
429
+
430
+ // Highlight if already selected
431
+ if (selectedTime === timeSlot.textContent) {
432
+ timeSlot.classList.remove('bg-gray-100', 'text-gray-700');
433
+ timeSlot.classList.add('bg-indigo-600', 'text-white');
434
+ }
435
+
436
+ timeSlot.addEventListener('click', function() {
437
+ // Remove selected class from all time slots
438
+ document.querySelectorAll('#time-slots button').forEach(t => {
439
+ t.classList.remove('bg-indigo-600', 'text-white');
440
+ t.classList.add('bg-gray-100', 'text-gray-700');
441
+ });
442
+
443
+ // Add selected class to clicked time slot
444
+ timeSlot.classList.remove('bg-gray-100', 'text-gray-700');
445
+ timeSlot.classList.add('bg-indigo-600', 'text-white');
446
+
447
+ selectedTime = timeSlot.textContent;
448
+ selectedTimeEl.textContent = selectedTime;
449
+ updateTotalCost();
450
+ checkBookingReady();
451
+ });
452
+
453
+ timeSlotsEl.appendChild(timeSlot);
454
+ }
455
+
456
+ // Add a "custom time" option
457
+ if (timeSlotsEl.children.length === 0) {
458
+ timeSlotsEl.innerHTML = '<p class="text-gray-500 col-span-3 text-center">No standard slots available.<br><button class="text-indigo-600 font-medium mt-2">Request custom time</button></p>';
459
+ }
460
+ }
461
+
462
+ function updateTotalCost() {
463
+ if (!selectedDate || !selectedTime || !selectedDuration) return;
464
+
465
+ // Calculate base rate based on duration and day of week (weekend more expensive)
466
+ let baseRate = 0;
467
+ const day = selectedDate.getDay(); // Sunday is 0
468
+
469
+ if (selectedDuration === '1') baseRate = day === 0 || day === 6 ? 300 : 250;
470
+ else if (selectedDuration === '2') baseRate = day === 0 || day === 6 ? 500 : 400;
471
+ else if (selectedDuration === '3') baseRate = day === 0 || day === 6 ? 700 : 550;
472
+ else if (selectedDuration === 'all') baseRate = day === 0 || day === 6 ? 1200 : 1000;
473
+
474
+ baseRateEl.textContent = `$${baseRate.toFixed(2)}`;
475
+
476
+ // Equipment fee might vary (mock logic)
477
+ const equipmentFee = selectedDuration === 'all' ? 250 : 150;
478
+ equipmentFeeEl.textContent = `$${equipmentFee.toFixed(2)}`;
479
+
480
+ // Calculate total
481
+ const total = baseRate + equipmentFee;
482
+ totalCostEl.textContent = `$${total.toFixed(2)}`;
483
+ }
484
+
485
+ function checkBookingReady() {
486
+ const termsChecked = document.getElementById('terms-check').checked;
487
+ const isReady = selectedDate && selectedTime && selectedDuration && termsChecked;
488
+
489
+ bookNowBtn.disabled = !isReady;
490
+ }
491
+ });
492
+ </script>
493
+ <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=privateuserh/chandelier-performance-module" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
494
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Make this into a module for performance artists to book the venue for live performances