b2 / index.html
BasilBarakat's picture
Create a "Book Now" button and a complete booking page for my cleaning company website, The Cleaning Crew. The experience should be fast, intuitive, and mobile-first, inspired by top-tier platforms like Airbnb and Calendly. ✅ Button Design: Prominent "Book Now" button placed in the hero section and the sticky navbar Use a bold, high-contrast color (e.g. emerald green or navy blue with white text) Rounded edges, hover animation, and slight shadow Smooth scroll to booking section or page transition on click ✅ Booking Page Features: Clean, responsive layout with step-by-step flow Booking form should include: Full Name Phone Number Email Address Select Service Type: Eco-Friendly Cleaning Office Cleaning Airbnb Turnover Post-Construction Cleanup Address field with Google Maps auto-suggest Select Date and Time (live calendar with availability) Extra Notes (optional) Option to create an account or book as guest Instant confirmation on-screen and via email Payment section (credit card or PayPal integration) Real-time availability sync with admin panel Captcha or bot-prevention (simple and unobtrusive) ✅ User Experience Optimizations: One-column form layout on mobile, multi-column on desktop Visual icons or illustrations next to each service type Progress bar or visual feedback as users fill out the form Error validation in real-time (e.g. missing email, invalid phone) ✅ Admin Dashboard Integration: Booking data is saved and displayed in admin panel Notifications sent to admin email Ability to approve, reschedule, or cancel bookings Customer data stored securely for future contact or follow-up ✅ Design Preferences: Simple, modern fonts (like Inter, Open Sans, or Helvetica Neue) Soft animations, loading spinner while submitting Optimized for fast load time and accessibility (e.g. ARIA labels, contrast) Ensure the booking system is modular, so I can update services or availability without coding. It should make customers feel confident and informed at every step. - Initial Deployment
de80d6f verified
Raw History Blame Contribute Delete
47.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Cleaning Crew - Book Now</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.btn-pulse:hover {
transform: scale(1.03);
box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
}
.btn-pulse {
transition: all 0.3s ease;
}
.progress-step.active {
background-color: #10b981;
color: white;
}
.progress-step.completed {
background-color: #10b981;
color: white;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.service-card {
transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Sticky Navbar with Book Now Button -->
<nav class="sticky top-0 z-50 bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<span class="text-xl font-bold text-gray-800">The Cleaning Crew</span>
</div>
<div class="hidden md:block">
<a href="#book-now" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 btn-pulse">
<i class="fas fa-calendar-check mr-2"></i> Book Now
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section with Book Now Button -->
<div class="relative bg-emerald-700 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-emerald-700 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
<div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
<span class="block">Spotless Spaces,</span>
<span class="block text-emerald-200">Effortless Booking</span>
</h1>
<p class="mt-3 text-base text-emerald-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Professional cleaning services tailored to your needs. Book online in less than 2 minutes.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#book-now" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-emerald-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 btn-pulse">
<i class="fas fa-calendar-day mr-2"></i> Book Now
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#services" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-emerald-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
<i class="fas fa-info-circle mr-2"></i> Our Services
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Booking Section -->
<div id="book-now" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-emerald-600 font-semibold tracking-wide uppercase">Booking</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Schedule Your Cleaning
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Complete the form below to book your professional cleaning service.
</p>
</div>
<!-- Progress Steps -->
<div class="mt-10 flex justify-center">
<div class="flex items-center space-x-4">
<div class="progress-step active flex items-center justify-center w-10 h-10 rounded-full bg-emerald-600 text-white font-bold">
1
</div>
<div class="h-1 w-16 bg-gray-200"></div>
<div class="progress-step flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-600 font-bold">
2
</div>
<div class="h-1 w-16 bg-gray-200"></div>
<div class="progress-step flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-600 font-bold">
3
</div>
<div class="h-1 w-16 bg-gray-200"></div>
<div class="progress-step flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-600 font-bold">
4
</div>
</div>
</div>
<!-- Booking Form -->
<div class="mt-10">
<form id="booking-form" class="space-y-8">
<!-- Step 1: Select Service -->
<div id="step-1" class="fade-in">
<h3 class="text-lg font-medium text-gray-900 mb-6">1. Select Your Service</h3>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<!-- Eco-Friendly Cleaning -->
<div class="service-card cursor-pointer relative bg-white border border-gray-200 rounded-lg shadow-sm p-6 flex flex-col">
<div class="flex-1">
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-emerald-50 text-emerald-700 mb-4">
<i class="fas fa-leaf text-xl"></i>
</div>
<h4 class="text-lg font-medium text-gray-900">Eco-Friendly Cleaning</h4>
<p class="mt-2 text-sm text-gray-500">Green cleaning products that are safe for your family and pets.</p>
</div>
<div class="mt-6">
<span class="text-base font-semibold text-emerald-600">From $99</span>
</div>
<input type="radio" name="service" value="eco-friendly" class="absolute opacity-0 w-full h-full cursor-pointer">
</div>
<!-- Office Cleaning -->
<div class="service-card cursor-pointer relative bg-white border border-gray-200 rounded-lg shadow-sm p-6 flex flex-col">
<div class="flex-1">
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-blue-50 text-blue-700 mb-4">
<i class="fas fa-building text-xl"></i>
</div>
<h4 class="text-lg font-medium text-gray-900">Office Cleaning</h4>
<p class="mt-2 text-sm text-gray-500">Professional cleaning for your workplace to boost productivity.</p>
</div>
<div class="mt-6">
<span class="text-base font-semibold text-emerald-600">From $149</span>
</div>
<input type="radio" name="service" value="office" class="absolute opacity-0 w-full h-full cursor-pointer">
</div>
<!-- Airbnb Turnover -->
<div class="service-card cursor-pointer relative bg-white border border-gray-200 rounded-lg shadow-sm p-6 flex flex-col">
<div class="flex-1">
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-purple-50 text-purple-700 mb-4">
<i class="fas fa-key text-xl"></i>
</div>
<h4 class="text-lg font-medium text-gray-900">Airbnb Turnover</h4>
<p class="mt-2 text-sm text-gray-500">Quick and thorough cleaning between guest stays.</p>
</div>
<div class="mt-6">
<span class="text-base font-semibold text-emerald-600">From $129</span>
</div>
<input type="radio" name="service" value="airbnb" class="absolute opacity-0 w-full h-full cursor-pointer">
</div>
<!-- Post-Construction -->
<div class="service-card cursor-pointer relative bg-white border border-gray-200 rounded-lg shadow-sm p-6 flex flex-col">
<div class="flex-1">
<div class="flex items-center justify-center w-12 h-12 rounded-md bg-yellow-50 text-yellow-700 mb-4">
<i class="fas fa-hammer text-xl"></i>
</div>
<h4 class="text-lg font-medium text-gray-900">Post-Construction</h4>
<p class="mt-2 text-sm text-gray-500">Deep cleaning after renovations or construction projects.</p>
</div>
<div class="mt-6">
<span class="text-base font-semibold text-emerald-600">From $199</span>
</div>
<input type="radio" name="service" value="construction" class="absolute opacity-0 w-full h-full cursor-pointer">
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="button" onclick="nextStep(1, 2)" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 btn-pulse">
Next: Your Details <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 2: Personal Details -->
<div id="step-2" class="hidden fade-in">
<h3 class="text-lg font-medium text-gray-900 mb-6">2. Your Information</h3>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700">Full Name *</label>
<input type="text" id="full-name" name="full-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number *</label>
<input type="tel" id="phone" name="phone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email Address *</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700">Service Address *</label>
<input type="text" id="address" name="address" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
<p class="mt-1 text-xs text-gray-500">Start typing your address and we'll suggest matches</p>
</div>
</div>
<div class="mt-8 flex justify-between">
<button type="button" onclick="prevStep(2, 1)" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<button type="button" onclick="nextStep(2, 3)" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 btn-pulse">
Next: Date & Time <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 3: Date & Time -->
<div id="step-3" class="hidden fade-in">
<h3 class="text-lg font-medium text-gray-900 mb-6">3. Select Date & Time</h3>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700">Available Dates *</label>
<div class="mt-1 grid grid-cols-3 gap-2">
<!-- These would be dynamically generated in a real app -->
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 15
</button>
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 16
</button>
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 17
</button>
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 18
</button>
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 19
</button>
<button type="button" class="date-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
May 20
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Available Times *</label>
<div class="mt-1 grid grid-cols-2 gap-2">
<!-- These would be dynamically generated in a real app -->
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
8:00 AM
</button>
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
10:00 AM
</button>
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
12:00 PM
</button>
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
2:00 PM
</button>
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
4:00 PM
</button>
<button type="button" class="time-option py-2 px-3 border rounded-md text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
6:00 PM
</button>
</div>
</div>
</div>
<div class="mt-6">
<label for="notes" class="block text-sm font-medium text-gray-700">Special Instructions (Optional)</label>
<textarea id="notes" name="notes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm"></textarea>
</div>
<div class="mt-8 flex justify-between">
<button type="button" onclick="prevStep(3, 2)" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<button type="button" onclick="nextStep(3, 4)" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 btn-pulse">
Next: Payment <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 4: Payment & Confirmation -->
<div id="step-4" class="hidden fade-in">
<h3 class="text-lg font-medium text-gray-900 mb-6">4. Payment & Confirmation</h3>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<!-- Order Summary -->
<div class="bg-gray-50 p-6 rounded-lg">
<h4 class="text-lg font-medium text-gray-900 mb-4">Order Summary</h4>
<div class="space-y-4">
<div class="flex justify-between">
<span class="text-gray-600">Service:</span>
<span id="summary-service" class="font-medium text-gray-900">Eco-Friendly Cleaning</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Date & Time:</span>
<span id="summary-datetime" class="font-medium text-gray-900">May 15, 2023 at 10:00 AM</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Address:</span>
<span id="summary-address" class="font-medium text-gray-900">123 Main St, Apt 4B</span>
</div>
<div class="border-t border-gray-200 pt-4">
<div class="flex justify-between">
<span class="text-base font-medium text-gray-900">Total</span>
<span id="summary-total" class="text-base font-medium text-emerald-600">$99.00</span>
</div>
</div>
</div>
</div>
<!-- Payment Method -->
<div>
<h4 class="text-lg font-medium text-gray-900 mb-4">Payment Method</h4>
<div class="space-y-4">
<div class="flex items-center">
<input id="credit-card" name="payment-method" type="radio" checked class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-300">
<label for="credit-card" class="ml-3 block text-sm font-medium text-gray-700">Credit Card</label>
</div>
<div class="mt-4">
<label for="card-number" class="block text-sm font-medium text-gray-700">Card Number *</label>
<input type="text" id="card-number" name="card-number" placeholder="1234 5678 9012 3456" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="expiry" class="block text-sm font-medium text-gray-700">Expiry Date *</label>
<input type="text" id="expiry" name="expiry" placeholder="MM/YY" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
<div>
<label for="cvc" class="block text-sm font-medium text-gray-700">CVC *</label>
<input type="text" id="cvc" name="cvc" placeholder="123" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
</div>
</div>
<div class="flex items-center mt-4">
<input id="save-card" name="save-card" type="checkbox" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-300 rounded">
<label for="save-card" class="ml-2 block text-sm text-gray-700">Save card for future bookings</label>
</div>
<div class="flex items-center mt-2">
<input id="create-account" name="create-account" type="checkbox" class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-300 rounded">
<label for="create-account" class="ml-2 block text-sm text-gray-700">Create an account for faster booking next time</label>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<button type="button" onclick="prevStep(4, 3)" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<button type="button" onclick="submitBooking()" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 btn-pulse">
<i class="fas fa-check-circle mr-2"></i> Confirm Booking
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="fixed z-50 inset-0 overflow-y-auto hidden">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100">
<i class="fas fa-check text-emerald-600"></i>
</div>
<div class="mt-3 text-center sm:mt-5">
<h3 class="text-lg leading-6 font-medium text-gray-900">Booking Confirmed!</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
Thank you for booking with The Cleaning Crew. A confirmation has been sent to your email.
</p>
</div>
<div class="mt-4 bg-gray-50 p-4 rounded-md text-left">
<h4 class="text-sm font-medium text-gray-900">Booking Details</h4>
<div class="mt-2 space-y-1 text-sm text-gray-600">
<p id="confirm-service">Service: Eco-Friendly Cleaning</p>
<p id="confirm-date">Date: May 15, 2023 at 10:00 AM</p>
<p id="confirm-address">Address: 123 Main St, Apt 4B</p>
<p id="confirm-total">Total: $99.00</p>
</div>
</div>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button type="button" onclick="closeConfirmation()" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-emerald-600 text-base font-medium text-white hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:text-sm btn-pulse">
Done
</button>
</div>
</div>
</div>
</div>
<!-- Services Section -->
<div id="services" class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-emerald-600 font-semibold tracking-wide uppercase">Services</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Our Cleaning Services
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Professional cleaning tailored to your specific needs.
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<!-- Eco-Friendly -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-emerald-500 rounded-md p-3">
<i class="fas fa-leaf text-white text-xl"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Eco-Friendly Cleaning</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600">
Our green cleaning products are safe for your family, pets, and the environment while delivering exceptional results.
</p>
<div class="mt-4">
<span class="text-base font-semibold text-emerald-600">From $99</span>
</div>
<div class="mt-4">
<a href="#book-now" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-500">
Book now <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Office Cleaning -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i class="fas fa-building text-white text-xl"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Office Cleaning</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600">
Keep your workplace spotless and professional with our comprehensive office cleaning services.
</p>
<div class="mt-4">
<span class="text-base font-semibold text-emerald-600">From $149</span>
</div>
<div class="mt-4">
<a href="#book-now" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-500">
Book now <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Airbnb Turnover -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
<i class="fas fa-key text-white text-xl"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Airbnb Turnover</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600">
Quick and thorough cleaning between guest stays to maintain your 5-star ratings and happy guests.
</p>
<div class="mt-4">
<span class="text-base font-semibold text-emerald-600">From $129</span>
</div>
<div class="mt-4">
<a href="#book-now" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-500">
Book now <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-white">
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
</div>
<div class="px-5 py-2">
<a href="#services" class="text-base text-gray-500 hover:text-gray-900">Services</a>
</div>
<div class="px-5 py-2">
<a href="#book-now" class="text-base text-gray-500 hover:text-gray-900">Book Now</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">FAQ</a>
</div>
<div class="px-5 py-2">
<a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a>
</div>
</nav>
<div class="mt-8 flex justify-center space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Facebook</span>
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Instagram</span>
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<i class="fab fa-twitter"></i>
</a>
</div>
<p class="mt-8 text-center text-base text-gray-400">
&copy; 2023 The Cleaning Crew. All rights reserved.
</p>
</div>
</footer>
<script>
// Form navigation
function nextStep(current, next) {
document.getElementById(`step-${current}`).classList.add('hidden');
document.getElementById(`step-${next}`).classList.remove('hidden');
// Update progress steps
document.querySelectorAll('.progress-step').forEach((step, index) => {
if (index + 1 <= next) {
step.classList.add('completed');
step.classList.add('active');
} else {
step.classList.remove('completed');
step.classList.remove('active');
}
});
// Scroll to top of form
document.getElementById('book-now').scrollIntoView({ behavior: 'smooth' });
}
function prevStep(current, prev) {
document.getElementById(`step-${current}`).classList.add('hidden');
document.getElementById(`step-${prev}`).classList.remove('hidden');
// Update progress steps
document.querySelectorAll('.progress-step').forEach((step, index) => {
if (index + 1 < current) {
step.classList.add('completed');
step.classList.add('active');
} else {
step.classList.remove('completed');
step.classList.remove('active');
}
});
}
// Service selection
document.querySelectorAll('.service-card').forEach(card => {
card.addEventListener('click', function() {
// Remove active class from all cards
document.querySelectorAll('.service-card').forEach(c => {
c.classList.remove('border-emerald-500', 'ring-2', 'ring-emerald-500');
});
// Add active class to clicked card
this.classList.add('border-emerald-500', 'ring-2', 'ring-emerald-500');
// Update the radio button
const radio = this.querySelector('input[type="radio"]');
radio.checked = true;
// Update summary
updateSummary();
});
});
// Date and time selection
document.querySelectorAll('.date-option, .time-option').forEach(option => {
option.addEventListener('click', function() {
// Remove active class from all options in same group
const isDate = this.classList.contains('date-option');
const selector = isDate ? '.date-option' : '.time-option';
document.querySelectorAll(selector).forEach(opt => {
opt.classList.remove('bg-emerald-100', 'border-emerald-500', 'text-emerald-700');
});
// Add active class to clicked option
this.classList.add('bg-emerald-100', 'border-emerald-500', 'text-emerald-700');
// Update summary
updateSummary();
});
});
// Update booking summary
function updateSummary() {
// Service
const selectedService = document.querySelector('input[name="service"]:checked');
if (selectedService) {
const serviceCard = selectedService.closest('.service-card');
const serviceName = serviceCard.querySelector('h4').textContent;
const servicePrice = serviceCard.querySelector('span').textContent;
document.getElementById('summary-service').textContent = serviceName;
document.getElementById('summary-total').textContent = servicePrice;
document.getElementById('confirm-service').textContent = `Service: ${serviceName}`;
document.getElementById('confirm-total').textContent = `Total: ${servicePrice}`;
}
// Address
const address = document.getElementById('address').value;
if (address) {
document.getElementById('summary-address').textContent = address;
document.getElementById('confirm-address').textContent = `Address: ${address}`;
}
// Date and time (this would be more dynamic in a real app)
const selectedDate = document.querySelector('.date-option.bg-emerald-100');
const selectedTime = document.querySelector('.time-option.bg-emerald-100');
if (selectedDate && selectedTime) {
const dateTime = `${selectedDate.textContent}, 2023 at ${selectedTime.textContent}`;
document.getElementById('summary-datetime').textContent = dateTime;
document.getElementById('confirm-date').textContent = `Date: ${dateTime}`;
}
}
// Form submission
function submitBooking() {
// In a real app, this would validate and submit to your backend
// For demo purposes, we'll just show the confirmation
// Update confirmation details
updateSummary();
// Show modal
document.getElementById('confirmation-modal').classList.remove('hidden');
}
function closeConfirmation() {
document.getElementById('confirmation-modal').classList.add('hidden');
// Reset form (in a real app, you might redirect or do something else)
document.getElementById('booking-form').reset();
document.querySelectorAll('.service-card').forEach(c => {
c.classList.remove('border-emerald-500', 'ring-2', 'ring-emerald-500');
});
document.querySelectorAll('.date-option, .time-option').forEach(opt => {
opt.classList.remove('bg-emerald-100', 'border-emerald-500', 'text-emerald-700');
});
// Reset to step 1
document.querySelectorAll('[id^="step-"]').forEach(step => {
step.classList.add('hidden');
});
document.getElementById('step-1').classList.remove('hidden');
// Reset progress steps
document.querySelectorAll('.progress-step').forEach((step, index) => {
if (index === 0) {
step.classList.add('active');
} else {
step.classList.remove('completed');
step.classList.remove('active');
}
});
}
// Initialize form
document.addEventListener('DOMContentLoaded', function() {
// Watch form fields for changes to update summary
document.getElementById('address').addEventListener('input', updateSummary);
});
</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=BasilBarakat/b2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>