Hugging Face's logo

Spaces:
theaimoron
/
pauls-try-1
Running

App Files Community
pauls-try-1 / index.html
theaimoron's picture
theaimoron
Add 2 files
345fdb2 verified
raw
history blame contribute delete
76.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paul's Barbershop - Premium Booking</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>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.gradient-bg {
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.slot-btn:hover {
transform: scale(1.05);
}
.tab-active {
border-bottom: 3px solid #dc2626;
}
.calendar-day:hover:not(.disabled) {
background-color: #f3f4f6;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
</style>
</head>
<body class="bg-gray-100">
<!-- Landing Page -->
<div id="landing" class="min-h-screen gradient-bg text-white flex flex-col items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80')] bg-cover bg-center filter blur-sm"></div>
<div class="relative z-10 text-center px-6 w-full max-w-4xl">
<div class="mb-12">
<h1 class="text-5xl font-bold mb-2 tracking-tight">PAUL'S</h1>
<p class="text-2xl font-light uppercase tracking-widest">Barbershop</p>
</div>
<p class="text-xl mb-12 font-light max-w-2xl mx-auto leading-relaxed">
Experience premium grooming services with our master barbers. Book your appointment seamlessly with our online system.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-6">
<button onclick="showCustomerLogin()" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
Customer Booking
</button>
<button onclick="showVendorLogin()" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
Vendor Portal
</button>
</div>
<button class="mt-16 text-gray-300 hover:text-white transition-all flex items-center justify-center mx-auto">
<span class="mr-2">Learn More</span>
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<!-- Customer Login Modal -->
<div id="customerLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 slide-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Customer Login</h2>
<button onclick="hideModal('customerLoginModal')" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Email</label>
<input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
</div>
<div>
<label class="block text-gray-700 mb-2">Password</label>
<input type="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2">
<label for="remember" class="text-gray-700">Remember me</label>
</div>
<a href="#" class="text-blue-600 hover:underline">Forgot password?</a>
</div>
<button type="button" onclick="loginCustomer()" class="w-full bg-red-600 text-white py-3 rounded-lg font-medium hover:bg-red-700 transition mt-6">
Login
</button>
<div class="text-center mt-4">
<p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:underline">Sign up</a></p>
</div>
</form>
</div>
</div>
<!-- Vendor Login Modal -->
<div id="vendorLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 slide-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Vendor Login</h2>
<button onclick="hideModal('vendorLoginModal')" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Username</label>
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 mb-2">Password</label>
<input type="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<input type="checkbox" id="rememberVendor" class="mr-2">
<label for="rememberVendor" class="text-gray-700">Remember me</label>
</div>
<a href="#" class="text-blue-600 hover:underline">Forgot password?</a>
</div>
<button type="button" onclick="loginVendor()" class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mt-6">
Login
</button>
</form>
</div>
</div>
<!-- Customer Dashboard -->
<div id="customerDashboard" class="hidden">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-40">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<h1 class="text-xl font-bold text-gray-800">PAUL'S</h1>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-bell text-xl"></i>
</button>
<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer">
<i class="fas fa-user text-gray-600"></i>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-6 pb-24">
<!-- Tab Navigation -->
<div id="customerTabs" class="flex justify-around border-b mb-6">
<button onclick="switchTab('services')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900 tab-active" data-tab="services">
<i class="fas fa-cut mr-2"></i> Services
</button>
<button onclick="switchTab('calendar')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="calendar">
<i class="far fa-calendar-alt mr-2"></i> Calendar
</button>
<button onclick="switchTab('timeslots')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="timeslots">
<i class="far fa-clock mr-2"></i> Timeslots
</button>
<button onclick="switchTab('locations')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="locations">
<i class="fas fa-map-marker-alt mr-2"></i> Locations
</button>
<button onclick="switchTab('payment')" class="tab-btn py-3 px-4 font-medium text-gray-600 hover:text-gray-900" data-tab="payment">
<i class="fas fa-credit-card mr-2"></i> Payment
</button>
</div>
<!-- Tab Content -->
<div id="tabContent">
<!-- Services Tab -->
<div id="servicesTab" class="fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Our Services</h2>
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-filter mr-2"></i> Filter
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Service Card 1 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Haircut', 25)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-cut text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Classic Haircut</h3>
<p class="text-gray-600 mb-4">Precision haircut with clippers and scissors for a clean, sharp look.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$25</span>
<span class="text-sm text-gray-500">45 min</span>
</div>
</div>
</div>
<!-- Service Card 2 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Beard Trim', 15)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-male text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Beard Trim & Shape</h3>
<p class="text-gray-600 mb-4">Professional beard trimming and shaping to maintain your style.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$15</span>
<span class="text-sm text-gray-500">30 min</span>
</div>
</div>
</div>
<!-- Service Card 3 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Haircut + Beard', 35)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-user-tie text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Haircut + Beard Combo</h3>
<p class="text-gray-600 mb-4">Complete grooming package with haircut and beard service.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$35</span>
<span class="text-sm text-gray-500">60 min</span>
</div>
</div>
</div>
<!-- Service Card 4 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Hot Towel Shave', 30)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-fire text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Hot Towel Shave</h3>
<p class="text-gray-600 mb-4">Traditional straight razor shave with hot towels and premium products.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$30</span>
<span class="text-sm text-gray-500">45 min</span>
</div>
</div>
</div>
<!-- Service Card 5 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Hair Color', 50)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-paint-brush text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Hair Coloring</h3>
<p class="text-gray-600 mb-4">Professional hair coloring services for men with premium products.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$50</span>
<span class="text-sm text-gray-500">90 min</span>
</div>
</div>
</div>
<!-- Service Card 6 -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 cursor-pointer" onclick="selectService('Kids Cut', 20)">
<div class="h-40 bg-gray-200 flex items-center justify-center">
<i class="fas fa-child text-5xl text-gray-500"></i>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold mb-2">Kids Haircut</h3>
<p class="text-gray-600 mb-4">Special haircut service for children with a fun, comfortable experience.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold">$20</span>
<span class="text-sm text-gray-500">30 min</span>
</div>
</div>
</div>
</div>
</div>
<!-- Calendar Tab -->
<div id="calendarTab" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Select Date</h2>
<div class="flex items-center space-x-4">
<button onclick="prevMonth()" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-chevron-left"></i>
</button>
<span id="currentMonth" class="font-medium">June 2023</span>
<button onclick="nextMonth()" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="grid grid-cols-7 bg-gray-100 border-b">
<div class="py-3 text-center font-medium text-gray-600">Sun</div>
<div class="py-3 text-center font-medium text-gray-600">Mon</div>
<div class="py-3 text-center font-medium text-gray-600">Tue</div>
<div class="py-3 text-center font-medium text-gray-600">Wed</div>
<div class="py-3 text-center font-medium text-gray-600">Thu</div>
<div class="py-3 text-center font-medium text-gray-600">Fri</div>
<div class="py-3 text-center font-medium text-gray-600">Sat</div>
</div>
<div id="calendarDays" class="grid grid-cols-7">
<!-- Calendar days will be populated by JavaScript -->
</div>
</div>
<div class="mt-6 flex justify-between">
<button onclick="switchTab('services')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Services
</button>
<button onclick="goToToday()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
Today
</button>
</div>
</div>
<!-- Timeslots Tab -->
<div id="timeslotsTab" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Available Times</h2>
<p id="selectedDateDisplay" class="text-gray-600">June 15, 2023</p>
</div>
<button onclick="switchTab('calendar')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Change Date
</button>
</div>
<div class="space-y-3">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b">
<h3 class="font-medium text-gray-800">Morning</h3>
</div>
<div class="grid grid-cols-3 gap-3 p-4">
<button onclick="selectTimeSlot('9:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
9:00 AM
</button>
<button onclick="selectTimeSlot('9:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
9:30 AM
</button>
<button onclick="selectTimeSlot('10:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
10:00 AM
</button>
<button onclick="selectTimeSlot('10:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
10:30 AM
</button>
<button onclick="selectTimeSlot('11:00 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
11:00 AM
</button>
<button onclick="selectTimeSlot('11:30 AM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
11:30 AM
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b">
<h3 class="font-medium text-gray-800">Afternoon</h3>
</div>
<div class="grid grid-cols-3 gap-3 p-4">
<button onclick="selectTimeSlot('12:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
12:00 PM
</button>
<button onclick="selectTimeSlot('12:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
12:30 PM
</button>
<button onclick="selectTimeSlot('1:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
1:00 PM
</button>
<button onclick="selectTimeSlot('1:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
1:30 PM
</button>
<button onclick="selectTimeSlot('2:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
2:00 PM
</button>
<button onclick="selectTimeSlot('2:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
2:30 PM
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b">
<h3 class="font-medium text-gray-800">Evening</h3>
</div>
<div class="grid grid-cols-3 gap-3 p-4">
<button onclick="selectTimeSlot('3:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
3:00 PM
</button>
<button onclick="selectTimeSlot('3:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
3:30 PM
</button>
<button onclick="selectTimeSlot('4:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
4:00 PM
</button>
<button onclick="selectTimeSlot('4:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
4:30 PM
</button>
<button onclick="selectTimeSlot('5:00 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
5:00 PM
</button>
<button onclick="selectTimeSlot('5:30 PM')" class="slot-btn bg-gray-100 hover:bg-red-100 border border-gray-200 rounded-lg py-2 transition-all">
5:30 PM
</button>
</div>
</div>
</div>
<div class="mt-6 flex justify-between">
<button onclick="switchTab('calendar')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Calendar
</button>
<button onclick="switchTab('locations')" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium">
Next: Choose Location
</button>
</div>
</div>
<!-- Locations Tab -->
<div id="locationsTab" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Our Locations</h2>
<p class="text-gray-600">Select your preferred barbershop</p>
</div>
<button onclick="switchTab('timeslots')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Timeslots
</button>
</div>
<div class="space-y-6">
<!-- Location Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="md:flex">
<div class="md:w-1/3 h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-store text-5xl text-gray-500"></i>
</div>
<div class="p-6 md:w-2/3">
<h3 class="text-xl font-semibold mb-2">Bedok Central</h3>
<div class="flex items-center text-gray-600 mb-3">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>311 New Upper Changi Rd, #01-725, Singapore 467360</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i class="fas fa-phone mr-2"></i>
<span>+65 6789 1234</span>
</div>
<div class="flex justify-between">
<button onclick="selectLocation('Bedok')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium">
Select This Location
</button>
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-directions mr-2"></i> Get Directions
</button>
</div>
</div>
</div>
</div>
<!-- Location Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="md:flex">
<div class="md:w-1/3 h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-store text-5xl text-gray-500"></i>
</div>
<div class="p-6 md:w-2/3">
<h3 class="text-xl font-semibold mb-2">Pasir Ris</h3>
<div class="flex items-center text-gray-600 mb-3">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>1 Pasir Ris Central, #02-345, Singapore 519457</span>
</div>
<div class="flex items-center text-gray-600 mb-4">
<i class="fas fa-phone mr-2"></i>
<span>+65 6789 5678</span>
</div>
<div class="flex justify-between">
<button onclick="selectLocation('Pasir Ris')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium">
Select This Location
</button>
<button class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="fas fa-directions mr-2"></i> Get Directions
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-between">
<button onclick="switchTab('timeslots')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Timeslots
</button>
<button onclick="switchTab('payment')" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium">
Next: Payment
</button>
</div>
</div>
<!-- Payment Tab -->
<div id="paymentTab" class="hidden fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Payment</h2>
<button onclick="switchTab('locations')" class="text-gray-600 hover:text-gray-900 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back to Locations
</button>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-6 border-b">
<h3 class="font-medium text-gray-800">Booking Summary</h3>
</div>
<div class="p-6 space-y-4">
<div class="flex justify-between">
<span class="text-gray-600">Service:</span>
<span id="summaryService" class="font-medium">Classic Haircut</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Date:</span>
<span id="summaryDate" class="font-medium">June 15, 2023</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Time:</span>
<span id="summaryTime" class="font-medium">10:00 AM</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Location:</span>
<span id="summaryLocation" class="font-medium">Bedok Central</span>
</div>
<div class="flex justify-between pt-4 border-t">
<span class="text-gray-600">Total:</span>
<span id="summaryPrice" class="font-bold text-lg">$25.00</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-6 border-b">
<h3 class="font-medium text-gray-800">Payment Method</h3>
</div>
<div class="p-6 space-y-4">
<button onclick="selectPaymentMethod('Cash')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
<i class="fas fa-money-bill-wave text-gray-600"></i>
</div>
<span class="font-medium">Cash</span>
</div>
<i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
</button>
<button onclick="selectPaymentMethod('Nets')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
<i class="fas fa-credit-card text-gray-600"></i>
</div>
<span class="font-medium">Nets</span>
</div>
<i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
</button>
<button onclick="selectPaymentMethod('PayNow')" class="w-full flex items-center justify-between p-4 border rounded-lg hover:border-red-500 transition-all">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4">
<i class="fas fa-mobile-alt text-gray-600"></i>
</div>
<span class="font-medium">PayNow</span>
</div>
<i class="fas fa-check-circle text-red-600 hidden payment-selected"></i>
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-6 border-b">
<h3 class="font-medium text-gray-800">Customer Information</h3>
</div>
<div class="p-6">
<div class="mb-4">
<label class="block text-gray-700 mb-2">Full Name</label>
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Phone Number</label>
<input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
</div>
<div>
<label class="block text-gray-700 mb-2">Special Requests (Optional)</label>
<textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" rows="3"></textarea>
</div>
</div>
</div>
<button onclick="confirmBooking()" class="w-full bg-red-600 hover:bg-red-700 text-white py-4 rounded-lg font-bold text-lg transition-all pulse">
Confirm Booking
</button>
</div>
</div>
</main>
<!-- Bottom Navigation (Mobile) -->
<nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg md:hidden flex justify-around items-center h-16 z-50">
<button onclick="switchTab('services')" class="flex flex-col items-center justify-center text-red-600">
<i class="fas fa-cut text-xl"></i>
<span class="text-xs mt-1">Services</span>
</button>
<button onclick="switchTab('calendar')" class="flex flex-col items-center justify-center text-gray-600">
<i class="far fa-calendar-alt text-xl"></i>
<span class="text-xs mt-1">Calendar</span>
</button>
<button onclick="switchTab('timeslots')" class="flex flex-col items-center justify-center text-gray-600">
<i class="far fa-clock text-xl"></i>
<span class="text-xs mt-1">Timeslots</span>
</button>
<button onclick="switchTab('locations')" class="flex flex-col items-center justify-center text-gray-600">
<i class="fas fa-map-marker-alt text-xl"></i>
<span class="text-xs mt-1">Locations</span>
</button>
<button onclick="switchTab('payment')" class="flex flex-col items-center justify-center text-gray-600">
<i class="fas fa-credit-card text-xl"></i>
<span class="text-xs mt-1">Payment</span>
</button>
</nav>
</div>
<!-- Vendor Dashboard -->
<div id="vendorDashboard" class="hidden min-h-screen bg-gray-100">
<!-- Sidebar -->
<div class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg hidden md:block">
<div class="flex items-center justify-center h-16 px-4 border-b">
<h1 class="text-xl font-bold text-gray-800">Vendor Portal</h1>
</div>
<nav class="p-4">
<div class="space-y-2">
<button onclick="switchVendorTab('appointments')" class="w-full flex items-center p-3 text-white bg-red-600 rounded-lg">
<i class="fas fa-calendar-check mr-3"></i>
<span>Appointments</span>
</button>
<button onclick="switchVendorTab('sales')" class="w-full flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-chart-bar mr-3"></i>
<span>Sales Report</span>
</button>
<button onclick="switchVendorTab('settings')" class="w-full flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-cog mr-3"></i>
<span>Settings</span>
</button>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="md:ml-64">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-40">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<button class="md:hidden text-gray-600 hover:text-gray-900">
<i class="fas fa-bars text-xl"></i>
</button>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-bell text-xl"></i>
</button>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-600 rounded-full"></span>
</div>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer">
<i class="fas fa-user text-gray-600"></i>
</div>
<span class="ml-2 font-medium hidden md:inline">Admin</span>
</div>
</div>
</div>
</header>
<!-- Vendor Tab Content -->
<main class="container mx-auto px-4 py-6">
<!-- Appointments Tab -->
<div id="vendorAppointmentsTab">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Today's Appointments</h2>
<div class="flex items-center space-x-4">
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-filter"></i>
</button>
<button class="text-gray-600 hover:text-gray-900">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="grid grid-cols-12 bg-gray-100 p-4 border-b font-medium text-gray-700">
<div class="col-span-2">Time</div>
<div class="col-span-3">Customer</div>
<div class="col-span-3">Service</div>
<div class="col-span-2">Location</div>
<div class="col-span-2">Actions</div>
</div>
<div class="divide-y">
<!-- Appointment 1 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">9:00 AM</div>
<div class="col-span-3">John Smith</div>
<div class="col-span-3">Classic Haircut</div>
<div class="col-span-2">Bedok</div>
<div class="col-span-2 flex space-x-2">
<button class="text-blue-600 hover:text-blue-800">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-times"></i>
</button>
<button class="text-green-600 hover:text-green-800">
<i class="fas fa-check"></i>
</button>
</div>
</div>
<!-- Appointment 2 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">10:30 AM</div>
<div class="col-span-3">Michael Tan</div>
<div class="col-span-3">Haircut + Beard</div>
<div class="col-span-2">Pasir Ris</div>
<div class="col-span-2 flex space-x-2">
<button class="text-blue-600 hover:text-blue-800">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-times"></i>
</button>
<button class="text-green-600 hover:text-green-800">
<i class="fas fa-check"></i>
</button>
</div>
</div>
<!-- Appointment 3 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">1:00 PM</div>
<div class="col-span-3">David Wong</div>
<div class="col-span-3">Hot Towel Shave</div>
<div class="col-span-2">Bedok</div>
<div class="col-span-2 flex space-x-2">
<button class="text-blue-600 hover:text-blue-800">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-times"></i>
</button>
<button class="text-green-600 hover:text-green-800">
<i class="fas fa-check"></i>
</button>
</div>
</div>
<!-- Appointment 4 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">3:30 PM</div>
<div class="col-span-3">Robert Lim</div>
<div class="col-span-3">Hair Coloring</div>
<div class="col-span-2">Pasir Ris</div>
<div class="col-span-2 flex space-x-2">
<button class="text-blue-600 hover:text-blue-800">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-times"></i>
</button>
<button class="text-green-600 hover:text-green-800">
<i class="fas fa-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Sales Report Tab -->
<div id="vendorSalesTab" class="hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Sales Report</h2>
<div class="flex items-center space-x-4">
<select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Today</option>
<option>This Week</option>
<option>This Month</option>
<option>Custom Range</option>
</select>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-lg">
Export
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium text-gray-700 mb-2">Total Revenue</h3>
<p class="text-3xl font-bold">$1,245.00</p>
<p class="text-green-600 mt-2">+12% from yesterday</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium text-gray-700 mb-2">Total Appointments</h3>
<p class="text-3xl font-bold">24</p>
<p class="text-green-600 mt-2">+3 from yesterday</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-medium text-gray-700 mb-2">Average per Customer</h3>
<p class="text-3xl font-bold">$51.88</p>
<p class="text-red-600 mt-2">-2% from yesterday</p>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-md mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Revenue by Payment Method</h3>
<div class="h-64">
<!-- Chart would go here -->
<div class="flex items-center justify-center h-full bg-gray-100 rounded-lg">
<p class="text-gray-500">Revenue chart visualization</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b font-medium text-gray-700">
Recent Transactions
</div>
<div class="divide-y">
<!-- Transaction 1 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">#1001</div>
<div class="col-span-3">John Smith</div>
<div class="col-span-2">Classic Haircut</div>
<div class="col-span-2">$25.00</div>
<div class="col-span-2">Cash</div>
<div class="col-span-1 text-green-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
<!-- Transaction 2 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">#1002</div>
<div class="col-span-3">Michael Tan</div>
<div class="col-span-2">Haircut + Beard</div>
<div class="col-span-2">$35.00</div>
<div class="col-span-2">PayNow</div>
<div class="col-span-1 text-green-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
<!-- Transaction 3 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">#1003</div>
<div class="col-span-3">David Wong</div>
<div class="col-span-2">Hot Towel Shave</div>
<div class="col-span-2">$30.00</div>
<div class="col-span-2">Nets</div>
<div class="col-span-1 text-green-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
<!-- Transaction 4 -->
<div class="grid grid-cols-12 p-4 items-center">
<div class="col-span-2 font-medium">#1004</div>
<div class="col-span-3">Robert Lim</div>
<div class="col-span-2">Hair Coloring</div>
<div class="col-span-2">$50.00</div>
<div class="col-span-2">Cash</div>
<div class="col-span-1 text-yellow-500">
<i class="fas fa-hourglass-half"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div id="vendorSettingsTab" class="hidden">
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800">Shop Settings</h2>
<p class="text-gray-600">Manage your barbershop details and preferences</p>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-6 border-b">
<h3 class="font-medium text-gray-800">Shop Information</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-gray-700 mb-2">Shop Name</label>
<input type="text" value="Paul's Barbershop" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 mb-2">Contact Number</label>
<input type="tel" value="+65 6789 1234" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">About</label>
<textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3">Premium barbershop offering classic and modern grooming services for men.</textarea>
</div>
<div>
<label class="block text-gray-700 mb-2">Shop Logo</label>
<div class="flex items-center">
<div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mr-4">
<i class="fas fa-camera text-gray-500"></i>
</div>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
Upload New Logo
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-6 border-b">
<h3 class="font-medium text-gray-800">Business Hours</h3>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-medium">Monday</span>
<div class="flex items-center space-x-4">
<select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>9:00 AM</option>
<option>8:00 AM</option>
<option>10:00 AM</option>
</select>
<span>to</span>
<select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>6:00 PM</option>
<option>7:00 PM</option>
<option>5:00 PM</option>
</select>
</div>
</div>
<div class="flex items-center justify-between">
<span class="font-medium">Tuesday</span>
<div class="flex items-center space-x-4">
<select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>9:00 AM</option>
<option>8:00 AM</option>
<option>10:00 AM</option>
</select>
<span>to</span>
<select class="border rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>6:00 PM</option>
<option>7:00 PM</option>
<option>5:00 PM</option>
</select>
</div>
</div>
<!-- Repeat for other days -->
<div class="flex items-center justify-between pt-4 border-t">
<span class="font-medium">Sunday</span>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2">Closed</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg mr-4">
Cancel
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
Save Changes
</button>
</div>
</div>
</main>
</div>
</div>
<!-- Booking Confirmation Modal -->
<div id="bookingConfirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl w-full max-w-md mx-4 p-8 text-center">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-check text-green-600 text-3xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h2>
<p class="text-gray-600 mb-6">Your appointment has been successfully scheduled.</p>
<div class="bg-gray-50 rounded-lg p-4 mb-6 text-left">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Service:</span>
<span id="confirmService" class="font-medium">Classic Haircut</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600">Date & Time:</span>
<span id="confirmDateTime" class="font-medium">June 15, 2023 at 10:00 AM</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Location:</span>
<span id="confirmLocation" class="font-medium">Bedok Central</span>
</div>
</div>
<div class="flex flex-col space-y-3">
<button onclick="hideModal('bookingConfirmationModal')" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-medium">
Done
</button>
<button class="w-full border border-gray-300 hover:bg-gray-100 text-gray-800 py-3 rounded-lg font-medium">
Add to Calendar
</button>
</div>
</div>
</div>
<script>
// Global variables to store booking information
let selectedService = '';
let selectedServicePrice = 0;
let selectedDate = '';
let selectedTime = '';
let selectedLocation = '';
let selectedPaymentMethod = '';
// Current date for calendar
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
// Show customer login modal
function showCustomerLogin() {
document.getElementById('customerLoginModal').classList.remove('hidden');
}
// Show vendor login modal
function showVendorLogin() {
document.getElementById('vendorLoginModal').classList.remove('hidden');
}
// Hide any modal
function hideModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
}
// Customer login function
function loginCustomer() {
hideModal('customerLoginModal');
document.getElementById('landing').classList.add('hidden');
document.getElementById('customerDashboard').classList.remove('hidden');
generateCalendar(currentMonth, currentYear);
}
// Vendor login function
function loginVendor() {
hideModal('vendorLoginModal');
document.getElementById('landing').classList.add('hidden');
document.getElementById('vendorDashboard').classList.remove('hidden');
}
// Switch between customer tabs
function switchTab(tabName) {
// Hide all tab contents
document.getElementById('servicesTab').classList.add('hidden');
document.getElementById('calendarTab').classList.add('hidden');
document.getElementById('timeslotsTab').classList.add('hidden');
document.getElementById('locationsTab').classList.add('hidden');
document.getElementById('paymentTab').classList.add('hidden');
// Remove active class from all tab buttons
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(button => {
button.classList.remove('tab-active');
});
// Show selected tab content
document.getElementById(tabName + 'Tab').classList.remove('hidden');
// Add active class to selected tab button
document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('tab-active');
// Update mobile bottom navigation
if (window.innerWidth < 768) {
const mobileButtons = document.querySelectorAll('nav button');
mobileButtons.forEach(button => {
button.classList.remove('text-red-600');
button.classList.add('text-gray-600');
});
const activeMobileButton = document.querySelector(`nav button[onclick="switchTab('${tabName}')"]`);
if (activeMobileButton) {
activeMobileButton.classList.remove('text-gray-600');
activeMobileButton.classList.add('text-red-600');
}
}
}
// Select a service
function selectService(service, price) {
selectedService = service;
selectedServicePrice = price;
// Update summary
document.getElementById('summaryService').textContent = service;
document.getElementById('summaryPrice').textContent = '$' + price.toFixed(2);
switchTab('calendar');
}
// Generate calendar
function generateCalendar(month, year) {
const calendarDays = document.getElementById('calendarDays');
calendarDays.innerHTML = '';
// Update month display
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
document.getElementById('currentMonth').textContent = monthNames[month] + ' ' + year;
// Get first day of month
const firstDay = new Date(year, month, 1).getDay();
// Get days in month
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Get today's date
const today = new Date();
const isCurrentMonth = (month === today.getMonth() && year === today.getFullYear());
// Add empty cells for days before first day of month
for (let i = 0; i < firstDay; i++) {
const emptyDay = document.createElement('div');
emptyDay.className = 'p-3 text-center text-gray-400';
calendarDays.appendChild(emptyDay);
}
// Add days of month
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'p-3 text-center cursor-pointer calendar-day';
// Highlight today
if (isCurrentMonth && day === today.getDate()) {
dayElement.classList.add('font-bold', 'text-red-600');
}
// Disable past days
if (isCurrentMonth && day < today.getDate()) {
dayElement.classList.add('text-gray-400', 'disabled');
} else {
dayElement.addEventListener('click', () => selectDate(day, month, year));
}
dayElement.textContent = day;
calendarDays.appendChild(dayElement);
}
}
// Select a date
function selectDate(day, month, year) {
const date = new Date(year, month, day);
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
selectedDate = date.toLocaleDateString('en-US', options);
// Update timeslot display
document.getElementById('selectedDateDisplay').textContent = selectedDate;
switchTab('timeslots');
}
// Select a time slot
function selectTimeSlot(time) {
selectedTime = time;
// Update summary
document.getElementById('summaryDate').textContent = selectedDate;
document.getElementById('summaryTime').textContent = selectedTime;
switchTab('locations');
}
// Select a location
function selectLocation(location) {
selectedLocation = location;
// Update summary
document.getElementById('summaryLocation').textContent = location;
switchTab('payment');
}
// Select payment method
function selectPaymentMethod(method) {
selectedPaymentMethod = method;
// Remove selected from all payment methods
const paymentIcons = document.querySelectorAll('.payment-selected');
paymentIcons.forEach(icon => {
icon.classList.add('hidden');
});
// Add selected to chosen method
const selectedIcon = document.querySelector(`button[onclick="selectPaymentMethod('${method}')"] .payment-selected`);
selectedIcon.classList.remove('hidden');
}
// Confirm booking
function confirmBooking() {
if (!selectedPaymentMethod) {
alert('Please select a payment method');
return;
}
// Update confirmation modal
document.getElementById('confirmService').textContent = selectedService;
document.getElementById('confirmDateTime').textContent = selectedDate + ' at ' + selectedTime;
document.getElementById('confirmLocation').textContent = selectedLocation;
// Show confirmation modal
document.getElementById('bookingConfirmationModal').classList.remove('hidden');
}
// Calendar navigation
function prevMonth() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
generateCalendar(currentMonth, currentYear);
}
function nextMonth() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
generateCalendar(currentMonth, currentYear);
}
function goToToday() {
currentDate = new Date();
currentMonth = currentDate.getMonth();
currentYear = currentDate.getFullYear();
generateCalendar(currentMonth, currentYear);
}
// Vendor tab switching
function switchVendorTab(tabName) {
// Hide all vendor tabs
document.getElementById('vendorAppointmentsTab').classList.add('hidden');
document.getElementById('vendorSalesTab').classList.add('hidden');
document.getElementById('vendorSettingsTab').classList.add('hidden');
// Show selected tab
document.getElementById('vendor' + tabName.charAt(0).toUpperCase() + tabName.slice(1) + 'Tab').classList.remove('hidden');
// Update sidebar active button
const sidebarButtons = document.querySelectorAll('#vendorDashboard nav button');
sidebarButtons.forEach(button => {
button.classList.remove('text-white', 'bg-red-600');
button.classList.add('text-gray-600', 'hover:bg-gray-100');
});
const activeButton = document.querySelector(`#vendorDashboard nav button[onclick="switchVendorTab('${tabName}')"]`);
activeButton.classList.remove('text-gray-600', 'hover:bg-gray-100');
activeButton.classList.add('text-white', 'bg-red-600');
}
// Initialize calendar on load
document.addEventListener('DOMContentLoaded', function() {
// Set default payment method to Cash
selectPaymentMethod('Cash');
// Set default selected service for demo purposes
selectService('Classic Haircut', 25);
// Set a default date for demo purposes
const demoDate = new Date();
demoDate.setDate(15);
selectedDate = demoDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
document.getElementById('selectedDateDisplay').textContent = selectedDate;
document.getElementById('summaryDate').textContent = selectedDate;
});
</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=theaimoron/pauls-try-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>