Hugging Face's logo

Spaces:
99Odeshi
/
billy-bones
Running

App Files Community
billy-bones / index.html
99Odeshi's picture
99Odeshi
Let's create a working celebrity booking website where i can easily add celeb of my choice where people can book them for their verious events - Initial Deployment
9a80a7b verified
raw
history blame contribute delete
31.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>StarBook - Book Celebrities for Your Events</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <style>
 .celebrity-card:hover .celebrity-image {
 transform: scale(1.05);
 transition: transform 0.3s ease;
 }
 .gradient-text {
 background: linear-gradient(90deg, #3b82f6, #8b5cf6);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Navigation -->
 <nav class="bg-white shadow-lg sticky top-0 z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i data-feather="star" class="text-indigo-600 h-8 w-8"></i>
 <span class="ml-2 text-xl font-bold gradient-text">StarBook</span>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
 <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
 <a href="#celebrities" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Celebrities</a>
 <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
 <a href="#add-celebrity" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Add Celebrity</a>
 </div>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:items-center">
 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Login</button>
 </div>
 <div class="-mr-2 flex items-center sm: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 focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
 <i data-feather="menu"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Mobile menu -->
 <div class="sm:hidden hidden" id="mobile-menu">
 <div class="pt-2 pb-3 space-y-1">
 <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
 <a href="#celebrities" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Celebrities</a>
 <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
 <a href="#add-celebrity" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Add Celebrity</a>
 <div class="mt-4 pl-3">
 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Login</button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white overflow-hidden">
 <div class="max-w-7xl mx-auto">
 <div class="relative z-10 pb-8 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 sm:text-5xl md:text-6xl" data-aos="fade-right">
 <span class="block">Book Your Favorite</span>
 <span class="block">Celebrities Today</span>
 </h1>
 <p class="mt-3 text-base sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0" data-aos="fade-right" data-aos-delay="100">
 Make your event unforgettable with appearances from top celebrities, athletes, and influencers.
 </p>
 <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start" data-aos="fade-up" data-aos-delay="200">
 <div class="rounded-md shadow">
 <a href="#celebrities" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
 Browse Celebrities
 </a>
 </div>
 <div class="mt-3 sm:mt-0 sm:ml-3">
 <a href="#how-it-works" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
 How It Works
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
 <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Concert crowd">
 </div>
 </section>
<!-- Celebrities Section -->
 <section id="celebrities" class="py-12 bg-white" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
 Featured Celebrities
 </h2>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
 Browse our roster of available celebrities for your next event
 </p>
 </div>
<div class="mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3" id="celebrities-container">
 <!-- Celebrity cards will be dynamically inserted here -->
 </div>
 </div>
 </section>
<!-- How It Works Section -->
 <section id="how-it-works" class="py-12 bg-gray-50" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
 How It Works
 </h2>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
 Simple steps to book your favorite celebrity
 </p>
 </div>
<div class="mt-10">
 <div class="relative">
 <div class="absolute left-1/2 -ml-px h-full w-0.5 bg-indigo-200" aria-hidden="true"></div>
 <div class="relative grid grid-cols-1 gap-8 md:grid-cols-3">
 <!-- Step 1 -->
 <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
 <div class="flex items-center">
 <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold text-xl">1</span>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Browse & Select</h3>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-base text-gray-500">
 Explore our diverse roster of celebrities and select your preferred talent for the event.
 </p>
 </div>
 </div>
<!-- Step 2 -->
 <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
 <div class="flex items-center">
 <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold text-xl">2</span>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Submit Request</h3>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-base text-gray-500">
 Fill out the booking form with your event details and submit your request.
 </p>
 </div>
 </div>
<!-- Step 3 -->
 <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
 <div class="flex items-center">
 <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <span class="text-indigo-600 font-bold text-xl">3</span>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Confirm Booking</h3>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-base text-gray-500">
 Our team will confirm availability and finalize your booking within 48 hours.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Add Celebrity Section -->
 <section id="add-celebrity" class="py-12 bg-white" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
 Add a Celebrity
 </h2>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
 Submit a celebrity to our platform
 </p>
 </div>
<div class="mt-10 sm:mt-12">
 <div class="bg-white shadow-md rounded-lg p-6 max-w-3xl mx-auto">
 <form id="celebrity-form" class="space-y-6">
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-700">Celebrity Name</label>
 <input type="text" name="name" id="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-indigo-500 focus:border-indigo-500">
 </div>
 <div>
 <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
 <select id="category" name="category" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Select a category</option>
 <option value="Actor">Actor</option>
 <option value="Musician">Musician</option>
 <option value="Athlete">Athlete</option>
 <option value="Influencer">Influencer</option>
 <option value="Comedian">Comedian</option>
 <option value="Other">Other</option>
 </select>
 </div>
 </div>
 <div>
 <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
 <textarea id="description" name="description" rows="3" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
 </div>
 <div>
 <label for="image" class="block text-sm font-medium text-gray-700">Image URL</label>
 <input type="url" name="image" id="image" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="https://example.com/image.jpg">
 </div>
 <div>
 <label for="price" class="block text-sm font-medium text-gray-700">Booking Fee (USD)</label>
 <input type="number" name="price" id="price" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
 </div>
 <div class="flex justify-end">
 <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md text-sm font-medium">
 Add Celebrity
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <h3 class="text-lg font-semibold mb-4">StarBook</h3>
 <p class="text-gray-300">
 Connecting events with celebrities to create unforgettable experiences.
 </p>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
 <li><a href="#celebrities" class="text-gray-300 hover:text-white">Celebrities</a></li>
 <li><a href="#how-it-works" class="text-gray-300 hover:text-white">How It Works</a></li>
 <li><a href="#add-celebrity" class="text-gray-300 hover:text-white">Add Celebrity</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
 <ul class="space-y-2">
 <li class="flex items-center text-gray-300"><i data-feather="mail" class="mr-2"></i> contact@starbook.com</li>
 <li class="flex items-center text-gray-300"><i data-feather="phone" class="mr-2"></i> (555) 123-4567</li>
 <li class="flex items-center text-gray-300"><i data-feather="map-pin" class="mr-2"></i> 123 Celebrity Ave, Hollywood</li>
 </ul>
 </div>
 </div>
 <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
 <p>&copy; 2023 StarBook. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- Booking Modal -->
 <div id="booking-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></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 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Book <span id="modal-celebrity-name"></span></h3>
 <div class="mt-2">
 <form id="booking-form">
 <input type="hidden" id="celebrity-id" name="celebrity-id">
 <div class="mb-4">
 <label for="event-type" class="block text-sm font-medium text-gray-700">Event Type</label>
 <select id="event-type" name="event-type" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Select event type</option>
 <option value="Corporate Event">Corporate Event</option>
 <option value="Private Party">Private Party</option>
 <option value="Wedding">Wedding</option>
 <option value="Charity Event">Charity Event</option>
 <option value="Concert">Concert</option>
 <option value="Other">Other</option>
 </select>
 </div>
 <div class="mb-4">
 <label for="event-date" class="block text-sm font-medium text-gray-700">Event Date</label>
 <input type="date" id="event-date" name="event-date" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
 </div>
 <div class="mb-4">
 <label for="contact-name" class="block text-sm font-medium text-gray-700">Your Name</label>
 <input type="text" id="contact-name" name="contact-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-indigo-500 focus:border-indigo-500">
 </div>
 <div class="mb-4">
 <label for="contact-email" class="block text-sm font-medium text-gray-700">Email</label>
 <input type="email" id="contact-email" name="contact-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-indigo-500 focus:border-indigo-500">
 </div>
 <div class="mb-4">
 <label for="contact-phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
 <input type="tel" id="contact-phone" name="contact-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-indigo-500 focus:border-indigo-500">
 </div>
 <div class="mb-4">
 <label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests</label>
 <textarea id="special-requests" name="special-requests" 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-indigo-500 focus:border-indigo-500"></textarea>
 </div>
 </form>
 </div>
 </div>
 <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
 <button type="button" id="confirm-booking" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
 Submit Booking Request
 </button>
 <button type="button" id="cancel-booking" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
 Cancel
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Success Toast -->
 <div id="success-toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden flex items-center">
 <i data-feather="check-circle" class="mr-2"></i>
 <span id="toast-message"></span>
 </div>
<script>
 // Initialize libraries
 AOS.init();
 feather.replace();
// Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
 // Sample celebrity data
 let celebrities = [
 {
 id: 1,
 name: "John Smith",
 category: "Actor",
 description: "Award-winning actor known for blockbuster movies and TV series appearances.",
 image: "https://randomuser.me/api/portraits/men/32.jpg",
 price: 50000
 },
 {
 id: 2,
 name: "Emma Johnson",
 category: "Musician",
 description: "Chart-topping singer with multiple platinum albums and global tours.",
 image: "https://randomuser.me/api/portraits/women/44.jpg",
 price: 75000
 },
 {
 id: 3,
 name: "Michael Brown",
 category: "Athlete",
 description: "Professional athlete with championship titles and Olympic medals.",
 image: "https://randomuser.me/api/portraits/men/75.jpg",
 price: 40000
 },
 {
 id: 4,
 name: "Sarah Davis",
 category: "Influencer",
 description: "Social media influencer with millions of followers across platforms.",
 image: "https://randomuser.me/api/portraits/women/68.jpg",
 price: 30000
 },
 {
 id: 5,
 name: "David Wilson",
 category: "Comedian",
 description: "Stand-up comedian with multiple comedy specials and TV appearances.",
 image: "https://randomuser.me/api/portraits/men/91.jpg",
 price: 35000
 },
 {
 id: 6,
 name: "Lisa Taylor",
 category: "Actor",
 description: "Versatile actress known for both dramatic and comedic roles.",
 image: "https://randomuser.me/api/portraits/women/33.jpg",
 price: 45000
 }
 ];
 // Render celebrities
 function renderCelebrities() {
 const container = document.getElementById('celebrities-container');
 container.innerHTML = '';
celebrities.forEach(celebrity => {
 const card = document.createElement('div');
 card.className = 'celebrity-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl';
 card.innerHTML = `
 <div class="h-48 overflow-hidden">
 <img src="${celebrity.image}" alt="${celebrity.name}" class="celebrity-image w-full h-full object-cover">
 </div>
 <div class="p-6">
 <div class="flex justify-between items-start">
 <div>
 <h3 class="text-lg font-bold text-gray-900">${celebrity.name}</h3>
 <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-800 mt-1">${celebrity.category}</span>
 </div>
 <div class="text-xl font-bold text-indigo-600">$${celebrity.price.toLocaleString()}</div>
 </div>
 <p class="mt-3 text-gray-600">${celebrity.description}</p>
 <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md book-button" data-id="${celebrity.id}">
 Book Now
 </button>
 </div>
 `;
 container.appendChild(card);
 });
 // Add event listeners to book buttons
 document.querySelectorAll('.book-button').forEach(button => {
 button.addEventListener('click', function() {
 const celebrityId = parseInt(this.getAttribute('data-id'));
 openBookingModal(celebrityId);
 });
 });
 }
 // Open booking modal
 function openBookingModal(celebrityId) {
 const celebrity = celebrities.find(c => c.id === celebrityId);
 if (!celebrity) return;
document.getElementById('modal-celebrity-name').textContent = celebrity.name;
 document.getElementById('celebrity-id').value = celebrity.id;
 document.getElementById('booking-modal').classList.remove('hidden');
 }
 // Close booking modal
 function closeBookingModal() {
 document.getElementById('booking-modal').classList.add('hidden');
 document.getElementById('booking-form').reset();
 }
 // Handle form submissions
 document.getElementById('celebrity-form').addEventListener('submit', function(e) {
 e.preventDefault();
const formData = new FormData(this);
 const newCelebrity = {
 id: celebrities.length + 1,
 name: formData.get('name'),
 category: formData.get('category'),
 description: formData.get('description'),
 image: formData.get('image'),
 price: parseInt(formData.get('price'))
 };
celebrities.push(newCelebrity);
 renderCelebrities();
 this.reset();
showToast('Celebrity added successfully!');
 });
 document.getElementById('booking-form').addEventListener('submit', function(e) {
 e.preventDefault();
// In a real app, you would send this data to your backend
 const formData = new FormData(this);
 const bookingData = {
 celebrityId: formData.get('celebrity-id'),
 eventType: formData.get('event-type'),
 eventDate: formData.get('event-date'),
 contactName: formData.get('contact-name'),
 contactEmail: formData.get('contact-email'),
 contactPhone: formData.get('contact-phone'),
 specialRequests: formData.get('special-requests')
 };
closeBookingModal();
 showToast('Booking request submitted successfully!');
 });
 // Modal button events
 document.getElementById('confirm-booking').addEventListener('click', function() {
 document.getElementById('booking-form').dispatchEvent(new Event('submit'));
 });
 document.getElementById('cancel-booking').addEventListener('click', closeBookingModal);
 // Show toast notification
 function showToast(message) {
 const toast = document.getElementById('success-toast');
 document.getElementById('toast-message').textContent = message;
 toast.classList.remove('hidden');
setTimeout(() => {
 toast.classList.add('hidden');
 }, 3000);
// Refresh icons in case new ones were added
 feather.replace();
 }
 // Initial render
 renderCelebrities();
 </script>
</body>
</html>