Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Royal Appointments - Book with the Queens</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom styles */ | |
| .calendar-day:hover:not(.empty-day) { | |
| background-color: #f3e8ff; | |
| cursor: pointer; | |
| } | |
| .selected-day { | |
| background-color: #8b5cf6 ; | |
| color: white; | |
| } | |
| .time-slot:hover { | |
| background-color: #8b5cf6; | |
| color: white; | |
| } | |
| .selected-slot { | |
| background-color: #8b5cf6; | |
| color: white; | |
| } | |
| .appointment-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .royal-purple-bg { | |
| background-color: #5b21b6; | |
| } | |
| .royal-purple-text { | |
| color: #5b21b6; | |
| } | |
| .royal-purple-border { | |
| border-color: #5b21b6; | |
| } | |
| .crown-icon { | |
| color: #f59e0b; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .provider-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .provider-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| border-left: 4px solid #8b5cf6; | |
| } | |
| /* Swapped background colors between Carla and Heavenly */ | |
| .provider-carla { | |
| background: linear-gradient(to right, #ecfdf5, #d1fae5); | |
| } | |
| .provider-heavenly { | |
| background: linear-gradient(to right, #f3e8ff, #e9d5ff); | |
| } | |
| .provider-kyri { | |
| background: linear-gradient(to right, #fef2f2, #fee2e2); | |
| } | |
| /* Price list styles */ | |
| .price-list { | |
| margin-top: 0.5rem; | |
| font-size: 0.8rem; | |
| } | |
| .price-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.25rem 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-purple-50 font-serif"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="royal-purple-bg text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-crown crown-icon text-2xl mr-3"></i> | |
| <h1 class="text-xl font-bold">Royal Appointments</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-white font-medium hover:text-yellow-200">Home</a> | |
| <a href="#" class="text-purple-200 hover:text-white">Services</a> | |
| <a href="#" class="text-purple-200 hover:text-white">Our Queens</a> | |
| <a href="#" class="text-purple-200 hover:text-white">My Appointments</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center text-purple-900 font-medium">OSO</div> | |
| <span class="text-sm font-medium">Oso Pardo</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Side - Calendar and Time Selection --> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6 border border-purple-100"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-purple-900">Book a Royal Appointment</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button id="prev-month" class="p-2 rounded-full hover:bg-purple-100"> | |
| <i class="fas fa-chevron-left text-purple-600"></i> | |
| </button> | |
| <span id="current-month" class="font-medium text-purple-800">June 2023</span> | |
| <button id="next-month" class="p-2 rounded-full hover:bg-purple-100"> | |
| <i class="fas fa-chevron-right text-purple-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Calendar Grid --> | |
| <div class="mb-6"> | |
| <div class="grid grid-cols-7 gap-1 mb-2"> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Sun</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Mon</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Tue</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Wed</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Thu</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Fri</div> | |
| <div class="text-center text-xs font-medium text-purple-600 py-2">Sat</div> | |
| </div> | |
| <div id="calendar-grid" class="grid grid-cols-7 gap-1"> | |
| <!-- Calendar days will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Time Slots --> | |
| <div id="time-slots-container" class="hidden fade-in"> | |
| <h3 class="font-medium text-purple-800 mb-4">Available Royal Time Slots</h3> | |
| <div id="time-slots" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"> | |
| <!-- Time slots will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appointment Form --> | |
| <div id="appointment-form" class="bg-white rounded-lg shadow-md p-6 hidden fade-in border border-purple-100"> | |
| <h2 class="text-xl font-bold text-purple-900 mb-6">Royal Appointment Details</h2> | |
| <form id="booking-form"> | |
| <div class="mb-4"> | |
| <label for="service" class="block text-sm font-medium text-purple-800 mb-1">Service</label> | |
| <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"> | |
| <option value="">Select a royal service</option> | |
| <option value="royal-consultation">Royal Consultation</option> | |
| <option value="kingdom-strategy">Kingdom Strategy Session</option> | |
| <option value="court-etiquette">Court Etiquette Training</option> | |
| <option value="royal-decree">Royal Decree Assistance</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="provider" class="block text-sm font-medium text-purple-800 mb-1">Royal Provider</label> | |
| <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"> | |
| <option value="">Select your queen</option> | |
| <option value="queen_carla">Queen Carla</option> | |
| <option value="queen_heavenly">Queen Heavenly</option> | |
| <option value="queen_kyri">Queen Kyri</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="notes" class="block text-sm font-medium text-purple-800 mb-1">Royal Notes (Optional)</label> | |
| <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> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <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"> | |
| Cancel | |
| </button> | |
| <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"> | |
| Confirm Royal Appointment | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Our Queens Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mt-6 border border-purple-100"> | |
| <h2 class="text-xl font-bold text-purple-900 mb-6">Meet Our Royal Providers</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Queen Carla --> | |
| <div class="provider-card provider-carla rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center text-green-800 font-bold mr-3"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-green-900">Queen Carla</h3> | |
| <p class="text-sm text-green-600">Royal Strategist</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-700 mb-3">Specializes in kingdom expansion strategies and royal diplomacy.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Strategy</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Diplomacy</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Leadership</span> | |
| </div> | |
| </div> | |
| <!-- Queen Heavenly --> | |
| <div class="provider-card provider-heavenly rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-purple-200 flex items-center justify-center text-purple-800 font-bold mr-3"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-purple-900">Queen Heavenly</h3> | |
| <p class="text-sm text-purple-600">Nail Specialist</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-purple-700 mb-2">Expert nail technician providing premium nail services.</p> | |
| <div class="price-list text-purple-800 border-t border-purple-100 mt-2 pt-1"> | |
| <div class="price-item"><span>Short Nails</span><span>$25</span></div> | |
| <div class="price-item"><span>Medium Nails</span><span>$30</span></div> | |
| <div class="price-item"><span>Medium Long Nails</span><span>$35</span></div> | |
| <div class="price-item"><span>Long Nails</span><span>$45</span></div> | |
| <div class="price-item"><span>XL Long Nails</span><span>$50-55</span></div> | |
| <div class="price-item"><span>Toe Sets</span><span>$35</span></div> | |
| </div> | |
| </div> | |
| <!-- Queen Kyri --> | |
| <div class="provider-card provider-kyri rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-red-200 flex items-center justify-center text-red-800 font-bold mr-3"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-red-900">Queen Kyri</h3> | |
| <p class="text-sm text-red-600">Royal Decree Specialist</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-red-700 mb-3">Expert in crafting royal decrees, proclamations, and official documents.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Decrees</span> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Proclamations</span> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Documents</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side - Upcoming Appointments --> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white rounded-lg shadow-md p-6 sticky top-6 border border-purple-100"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-purple-900">Your Royal Appointments</h2> | |
| <button class="text-purple-600 text-sm font-medium hover:text-purple-800">View All</button> | |
| </div> | |
| <div id="upcoming-appointments"> | |
| <!-- Sample appointment cards --> | |
| <div class="appointment-card mb-4 border border-purple-100 rounded-lg p-4 transition-all duration-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium text-purple-900">Royal Consultation</h3> | |
| <p class="text-sm text-purple-600">With Queen Carla</p> | |
| </div> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Confirmed</span> | |
| </div> | |
| <div class="flex items-center text-sm text-purple-600 mb-2"> | |
| <i class="far fa-calendar-alt mr-2"></i> | |
| <span>June 15, 2023</span> | |
| </div> | |
| <div class="flex items-center text-sm text-purple-600"> | |
| <i class="far fa-clock mr-2"></i> | |
| <span>10:30 AM - 11:00 AM</span> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="text-xs text-purple-600 hover:text-purple-800">Reschedule</button> | |
| <button class="text-xs text-red-500 hover:text-red-700">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="appointment-card mb-4 border border-purple-100 rounded-lg p-4 transition-all duration-200"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium text-purple-900">Medium Nails</h3> | |
| <p class="text-sm text-purple-600">With Queen Heavenly</p> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Pending</span> | |
| </div> | |
| <div class="flex items-center text-sm text-purple-600 mb-2"> | |
| <i class="far fa-calendar-alt mr-2"></i> | |
| <span>June 20, 2023</span> | |
| </div> | |
| <div class="flex items-center text-sm text-purple-600"> | |
| <i class="far fa-clock mr-2"></i> | |
| <span>2:00 PM - 2:30 PM</span> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="text-xs text-purple-600 hover:text-purple-800">Reschedule</button> | |
| <button class="text-xs text-red-500 hover:text-red-700">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="text-center py-4"> | |
| <button class="text-purple-600 hover:text-purple-800 font-medium flex items-center justify-center w-full"> | |
| <i class="fas fa-plus mr-2"></i> Book New Royal Appointment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Confirmation Modal --> | |
| <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 fade-in border-2 border-purple-300"> | |
| <div class="text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100"> | |
| <i class="fas fa-crown crown-icon"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-purple-900">Royal Appointment Confirmed!</h3> | |
| <div class="mt-4 bg-purple-50 p-4 rounded-md"> | |
| <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Service:</span> <span id="confirmed-service">Royal Consultation</span></p> | |
| <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Provider:</span> <span id="confirmed-provider">Queen Carla</span></p> | |
| <p class="text-sm text-purple-700 mb-1"><span class="font-medium">Date:</span> <span id="confirmed-date">June 15, 2023</span></p> | |
| <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> | |
| </div> | |
| <div class="mt-6"> | |
| <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"> | |
| Done | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current date | |
| let currentDate = new Date(); | |
| let selectedDate = null; | |
| let selectedTimeSlot = null; | |
| // DOM Elements | |
| const calendarGrid = document.getElementById('calendar-grid'); | |
| const currentMonthElement = document.getElementById('current-month'); | |
| const prevMonthButton = document.getElementById('prev-month'); | |
| const nextMonthButton = document.getElementById('next-month'); | |
| const timeSlotsContainer = document.getElementById('time-slots-container'); | |
| const timeSlots = document.getElementById('time-slots'); | |
| const appointmentForm = document.getElementById('appointment-form'); | |
| const bookingForm = document.getElementById('booking-form'); | |
| const cancelBookingButton = document.getElementById('cancel-booking'); | |
| const confirmationModal = document.getElementById('confirmation-modal'); | |
| const closeModalButton = document.getElementById('close-modal'); | |
| // Initialize calendar | |
| renderCalendar(currentDate); | |
| // Event Listeners | |
| prevMonthButton.addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() - 1); | |
| renderCalendar(currentDate); | |
| }); | |
| nextMonthButton.addEventListener('click', () => { | |
| currentDate.setMonth(currentDate.getMonth() + 1); | |
| renderCalendar(currentDate); | |
| }); | |
| bookingForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const service = document.getElementById('service').value; | |
| const provider = document.getElementById('provider').value; | |
| const notes = document.getElementById('notes').value; | |
| // Update confirmation modal with appointment details | |
| document.getElementById('confirmed-service').textContent = | |
| document.getElementById('service').options[document.getElementById('service').selectedIndex].text; | |
| document.getElementById('confirmed-provider').textContent = | |
| document.getElementById('provider').options[document.getElementById('provider').selectedIndex].text; | |
| document.getElementById('confirmed-date').textContent = | |
| selectedDate.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); | |
| document.getElementById('confirmed-time').textContent = selectedTimeSlot; | |
| // Hide form and show confirmation | |
| appointmentForm.classList.add('hidden'); | |
| confirmationModal.classList.remove('hidden'); | |
| // Here you would typically send the data to a server | |
| console.log('Royal appointment booked:', { | |
| date: selectedDate, | |
| time: selectedTimeSlot, | |
| service, | |
| provider, | |
| notes | |
| }); | |
| }); | |
| cancelBookingButton.addEventListener('click', function() { | |
| appointmentForm.classList.add('hidden'); | |
| resetSelection(); | |
| }); | |
| closeModalButton.addEventListener('click', function() { | |
| confirmationModal.classList.add('hidden'); | |
| resetSelection(); | |
| }); | |
| // Functions | |
| function renderCalendar(date) { | |
| // Set month and year in header | |
| currentMonthElement.textContent = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); | |
| // Clear previous calendar | |
| calendarGrid.innerHTML = ''; | |
| // Get first day of month and total days in month | |
| const firstDay = new Date(date.getFullYear(), date.getMonth(), 1); | |
| const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); | |
| // Get day of week for first day (0 = Sunday, 6 = Saturday) | |
| const firstDayOfWeek = firstDay.getDay(); | |
| // Get days from previous month to show | |
| const prevMonthDays = new Date(date.getFullYear(), date.getMonth(), 0).getDate(); | |
| // Create calendar grid | |
| let dayCount = 1; | |
| let nextMonthDay = 1; | |
| // 6 rows to account for months that span 6 weeks | |
| for (let i = 0; i < 42; i++) { | |
| const dayElement = document.createElement('div'); | |
| dayElement.className = 'text-center py-2 rounded-md'; | |
| if (i < firstDayOfWeek) { | |
| // Days from previous month | |
| const prevDay = prevMonthDays - (firstDayOfWeek - i - 1); | |
| dayElement.textContent = prevDay; | |
| dayElement.classList.add('text-gray-400', 'empty-day'); | |
| } else if (dayCount <= daysInMonth) { | |
| // Days in current month | |
| dayElement.textContent = dayCount; | |
| dayElement.classList.add('calendar-day'); | |
| // Highlight today | |
| const today = new Date(); | |
| if (date.getMonth() === today.getMonth() && | |
| date.getFullYear() === today.getFullYear() && | |
| dayCount === today.getDate()) { | |
| dayElement.classList.add('bg-purple-100', 'font-medium'); | |
| } | |
| // Add click event | |
| dayElement.addEventListener('click', function() { | |
| selectDay(dayCount, dayElement); | |
| }); | |
| dayCount++; | |
| } else { | |
| // Days from next month | |
| dayElement.textContent = nextMonthDay; | |
| dayElement.classList.add('text-gray-400', 'empty-day'); | |
| nextMonthDay++; | |
| } | |
| calendarGrid.appendChild(dayElement); | |
| } | |
| } | |
| function selectDay(day, element) { | |
| // Remove selection from previously selected day | |
| const previouslySelected = document.querySelector('.selected-day'); | |
| if (previouslySelected) { | |
| previouslySelected.classList.remove('selected-day'); | |
| } | |
| // Add selection to new day | |
| element.classList.add('selected-day'); | |
| // Set selected date | |
| selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); | |
| // Show time slots | |
| showTimeSlots(); | |
| } | |
| function showTimeSlots() { | |
| // Generate random available time slots for demo | |
| timeSlots.innerHTML = ''; | |
| const startHour = 9; // 9 AM | |
| const endHour = 17; // 5 PM | |
| const availableSlots = []; | |
| // Generate slots every 30 minutes | |
| for (let hour = startHour; hour < endHour; hour++) { | |
| // Randomly make some slots unavailable for demo | |
| if (Math.random() > 0.3) { | |
| availableSlots.push(`${hour}:00 - ${hour}:30`); | |
| } | |
| if (Math.random() > 0.3) { | |
| availableSlots.push(`${hour}:30 - ${hour + 1}:00`); | |
| } | |
| } | |
| // Display available slots | |
| availableSlots.forEach(slot => { | |
| const slotElement = document.createElement('div'); | |
| slotElement.className = 'time-slot text-center py-2 border border-purple-200 rounded-md text-sm'; | |
| slotElement.textContent = slot; | |
| slotElement.addEventListener('click', function() { | |
| // Remove selection from previously selected slot | |
| const previouslySelected = document.querySelector('.selected-slot'); | |
| if (previouslySelected) { | |
| previouslySelected.classList.remove('selected-slot'); | |
| } | |
| // Add selection to new slot | |
| slotElement.classList.add('selected-slot'); | |
| selectedTimeSlot = slot; | |
| // Show appointment form | |
| setTimeout(() => { | |
| appointmentForm.classList.remove('hidden'); | |
| }, 200); | |
| }); | |
| timeSlots.appendChild(slotElement); | |
| }); | |
| // Show time slots container | |
| timeSlotsContainer.classList.remove('hidden'); | |
| } | |
| function resetSelection() { | |
| // Reset selected day and time | |
| const selectedDay = document.querySelector('.selected-day'); | |
| if (selectedDay) { | |
| selectedDay.classList.remove('selected-day'); | |
| } | |
| const selectedSlot = document.querySelector('.selected-slot'); | |
| if (selectedSlot) { | |
| selectedSlot.classList.remove('selected-slot'); | |
| } | |
| // Hide time slots and form | |
| timeSlotsContainer.classList.add('hidden'); | |
| appointmentForm.classList.add('hidden'); | |
| // Reset form | |
| bookingForm.reset(); | |
| // Clear selections | |
| selectedDate = null; | |
| selectedTimeSlot = null; | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |