Rajwada Royal Tents Landing Page Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rajwada Royal Tents | Sovereign Heritage Glamping & Palace Canvas Estates</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { emerald: { DEFAULT: '#051A14', deep: '#03100D', surface: '#0B2B22', card: '#12392E', border: 'rgba(212, 175, 55, 0.28)', }, gold: { light: '#F5E6AD', DEFAULT: '#D4AF37', dark: '#AA8C2C', glow: 'rgba(212, 175, 55, 0.45)' }, cream: { DEFAULT: '#FDFBF7', muted: '#E8E3D5' }, ruby: { DEFAULT: '#800020', bright: '#A0153E' } }, fontFamily: { serif: ['"Cormorant Garamond"', '"Playfair Display"', 'serif'], sans: ['"Plus Jakarta Sans"', 'sans-serif'], } } } } </script> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <!-- Three.js Library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> </head> <body class="bg-emerald-deep text-cream antialiased selection:bg-gold selection:text-emerald-deep jaali-overlay"> <!-- Custom Glowing Cursor --> <div id="custom-cursor"></div> <div id="custom-cursor-dot"></div> <!-- Toast Notification Hub --> <div id="toast-container" class="fixed bottom-6 right-6 z-50 flex flex-col space-y-3 pointer-events-none"></div> <!-- Scroll to Top Button --> <button id="scroll-top-btn" onclick="scrollToTop()" class="fixed bottom-6 left-6 z-40 w-12 h-12 rounded-full glass-card border border-gold/40 text-gold flex items-center justify-center opacity-0 pointer-events-none transition-all duration-300 hover:bg-gold hover:text-emerald-deep shadow-2xl" aria-label="Scroll to top"> <i class="fa-solid fa-arrow-up"></i> </button> <!-- Sticky Glass Header Navbar --> <header id="navbar" class="fixed top-0 left-0 right-0 z-40 glass-nav transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between"> <!-- Royal Crest Brand Logo --> <a href="#" class="flex items-center space-x-3.5 group"> <div class="w-12 h-12 rounded-full bg-gradient-to-tr from-gold-dark via-gold to-gold-light flex items-center justify-center text-emerald-deep font-bold shadow-lg shadow-gold/20 relative"> <i class="fa-solid fa-crown text-xl transition-transform duration-700 group-hover:rotate-12"></i> </div> <div class="flex flex-col"> <span class="font-serif text-2xl font-bold tracking-widest text-cream">RAJWADA<span class="text-gold font-light ml-1.5"> TENTS</span></span> <!-- <span class="text-[9px] uppercase tracking-[0.35em] text-gold/90 -mt-1 font-semibold">Sovereign Canvas Estates</span> --> </div> </a> <!-- Navigation Links --> <nav class="hidden lg:flex items-center space-x-8 text-xs uppercase tracking-[0.22em] font-semibold"> <a href="" class="text-cream/80 hover:text-gold transition-colors py-1 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[1px] after:bg-gold hover:after:w-full after:transition-all">Home</a> <a href="" class="text-cream/80 hover:text-gold transition-colors py-1 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[1px] after:bg-gold hover:after:w-full after:transition-all">About</a> <a href="" class="text-cream/80 hover:text-gold transition-colors py-1 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[1px] after:bg-gold hover:after:w-full after:transition-all">Service</a> <a href="" class="text-cream/80 hover:text-gold transition-colors py-1 relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[1px] after:bg-gold hover:after:w-full after:transition-all">Contact</a> </nav> <!-- Actions Right --> <div class="hidden lg:flex items-center space-x-4"> <!-- Currency Toggle --> <div class="glass-card px-3.5 py-2 rounded-full border border-gold/30 text-[11px] text-cream flex items-center space-x-2"> <span class="text-gold"><i class="fa-solid fa-coins"></i></span> <select id="currency-select" onchange="toggleCurrency()" class="bg-transparent text-cream focus:outline-none cursor-pointer uppercase tracking-wider font-semibold"> <option value="INR" class="bg-emerald-deep">INR (₹)</option> <option value="USD" class="bg-emerald-deep">USD ($)</option> </select> </div> <!-- Reserve CTA --> <button onclick="openBookingModal()" class="gold-btn px-7 py-3 rounded-full text-xs uppercase tracking-[0.2em] font-bold flex items-center space-x-2"> <i class="fa-solid fa-gem text-xs"></i> <span>Reserve Tent</span> </button> </div> <!-- Mobile Drawer Button --> <div class="lg:hidden flex items-center space-x-4"> <button id="mobile-menu-btn" onclick="toggleMobileMenu()" aria-label="Toggle Menu" class="text-cream hover:text-gold focus:outline-none p-2"> <i class="fa-solid fa-bars-staggered text-2xl"></i> </button> </div> </div> <!-- Mobile Drawer --> <div id="mobile-menu" class="hidden lg:hidden glass-widget border-t border-gold/20 px-6 py-8 space-y-6"> <a href="#tents" onclick="toggleMobileMenu()" class="block text-xl font-serif text-cream hover:text-gold">Canvas Suites</a> <a href="#experiences" onclick="toggleMobileMenu()" class="block text-xl font-serif text-cream hover:text-gold">Royal Experiences</a> <a href="#itinerary" onclick="toggleMobileMenu()" class="block text-xl font-serif text-cream hover:text-gold">Day-in-the-Life</a> <a href="#calculator" onclick="toggleMobileMenu()" class="block text-xl font-serif text-cream hover:text-gold">Tariff Calculator</a> <a href="#testimonials" onclick="toggleMobileMenu()" class="block text-xl font-serif text-cream hover:text-gold">Guest Testimonials</a> <div class="pt-6 border-t border-gold/20 space-y-4"> <button onclick="toggleAudio()" class="w-full py-3 glass-card rounded-full text-xs uppercase tracking-widest font-bold text-gold flex items-center justify-center space-x-2"> <i class="fa-solid fa-music"></i> <span>Toggle Sitar Ambience</span> </button> <button onclick="openBookingModal()" class="w-full py-4 text-xs uppercase tracking-widest font-bold gold-btn rounded-full text-center"> Reserve Royal Suite </button> </div> </div> </header> <!-- Hyper-Cinematic Hero Section --> <section class="relative min-h-screen flex items-center justify-center pt-28 pb-20 overflow-hidden"> <!-- Interactive Particle Canvas (Floating Gold Ember Dust) --> <div id="hero-canvas-container" class="absolute inset-0 z-0 opacity-80 pointer-events-none"></div> <!-- Radial Ambient Overlay --> <div class="absolute inset-0 bg-radial from-gold-glow/15 via-transparent to-emerald-deep/95 pointer-events-none z-0"></div> <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full text-center mt-6"> <!-- Royal Heritage Badge --> <div class="inline-flex items-center space-x-3 px-6 py-2.5 rounded-full glass-card border border-gold/40 mb-8 shadow-2xl"> <span class="w-2 h-2 rounded-full bg-gold animate-ping"></span> <span class="text-[10px] sm:text-[11px] uppercase tracking-[0.35em] text-gold font-bold">Royal Rajputana Heritage • Handcrafted Canvas Palaces</span> </div> <!-- Staggered Regal Headline --> <h1 class="font-serif text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-cream max-w-5xl mx-auto leading-[1.08] mb-6"> Where Royalty Resides <br class="hidden sm:inline"><span class="italic font-normal text-gold underline decoration-gold/30 underline-offset-8">Under A Million Stars.</span> </h1> <p class="text-base sm:text-lg text-cream/80 max-w-2xl mx-auto font-light leading-relaxed mb-12"> Hand-embroidered block print canvas suites, teakwood antique furnishings, private plunge pools, and 24/7 personal Khadidmatar (Royal Butler) service amidst India's most mystical heritage dunes & tiger reserves. </p> <!-- ROYAL BOOKING ENGINE WIDGET --> <div class="glass-widget rounded-3xl p-6 sm:p-8 max-w-5xl mx-auto text-left relative z-20 border border-gold/40"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <!-- Destination Selection --> <div class="space-y-1.5 px-4 py-3 rounded-2xl bg-emerald-deep/80 border border-gold/25"> <label class="block text-[9px] uppercase tracking-wider text-gold font-bold">Royal Reserve Location</label> <select id="hero-dest" onchange="updateHeroWidget()" class="w-full bg-transparent text-cream text-xs font-semibold focus:outline-none cursor-pointer"> <option value="jaisalmer" class="bg-emerald-deep">Jaisalmer Sam Dunes Pavilion</option> <option value="ranthambore" class="bg-emerald-deep">Ranthambore Royal Tiger Lodge</option> <option value="udaipur" class="bg-emerald-deep">Udaipur Lake Sanctuary Tent</option> <option value="kutch" class="bg-emerald-deep">Kutch White Rann Oasis</option> </select> </div> <!-- Suite Type --> <div class="space-y-1.5 px-4 py-3 rounded-2xl bg-emerald-deep/80 border border-gold/25"> <label class="block text-[9px] uppercase tracking-wider text-gold font-bold">Canvas Suite Category</label> <select id="hero-suite" onchange="updateHeroWidget()" class="w-full bg-transparent text-cream text-xs font-semibold focus:outline-none cursor-pointer"> <option value="maharaja" class="bg-emerald-deep">Maharaja Grand Pavilion Tent</option> <option value="rajputana" class="bg-emerald-deep">Royal Rajputana Swiss Canvas</option> <option value="safari" class="bg-emerald-deep">Royal Wildlife Safari Lodge</option> </select> </div> <!-- Check-in & Duration --> <div class="space-y-1.5 px-4 py-3 rounded-2xl bg-emerald-deep/80 border border-gold/25"> <label class="block text-[9px] uppercase tracking-wider text-gold font-bold">Stay Duration</label> <select id="hero-nights" onchange="updateHeroWidget()" class="w-full bg-transparent text-cream text-xs font-semibold focus:outline-none cursor-pointer"> <option value="2" class="bg-emerald-deep">2 Nights • Weekend Retreat</option> <option value="4" class="bg-emerald-deep">4 Nights • Royal Experience</option> <option value="7" class="bg-emerald-deep">7 Nights • Sovereign Expedition</option> </select> </div> <!-- Guests --> <div class="space-y-1.5 px-4 py-3 rounded-2xl bg-emerald-deep/80 border border-gold/25"> <label class="block text-[9px] uppercase tracking-wider text-gold font-bold">Guests & Entourage</label> <select id="hero-guests" onchange="updateHeroWidget()" class="w-full bg-transparent text-cream text-xs font-semibold focus:outline-none cursor-pointer"> <option value="2" class="bg-emerald-deep">2 Guests • Royal Couple</option> <option value="4" class="bg-emerald-deep">4 Guests • Family Suite</option> <option value="6" class="bg-emerald-deep">6 Guests • Royal Party</option> </select> </div> </div> <div class="flex flex-col sm:flex-row items-center justify-between pt-4 border-t border-gold/20 gap-4"> <div> <span class="text-[10px] uppercase tracking-widest text-gold/80 font-bold block">Estimated All-Inclusive Tariff</span> <div class="text-2xl font-serif font-bold text-cream" id="hero-price-display">₹65,000 / night</div> </div> <button onclick="openBookingModal()" class="w-full sm:w-auto px-9 py-4 rounded-2xl gold-btn font-bold text-xs uppercase tracking-widest flex items-center justify-center space-x-2"> <span>Reserve Sovereign Suite</span> <i class="fa-solid fa-chevron-right text-xs"></i> </button> </div> </div> </div> </section> <!-- ROYAL STATS COUNTER --> <section class="py-12 bg-emerald-surface border-y border-gold/20 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center"> <div class="space-y-1"> <div class="font-serif text-3xl sm:text-4xl font-bold text-gold">100%</div> <div class="text-xs uppercase tracking-widest text-cream/70 font-medium">Handcrafted Cotton Canvas</div> </div> <div class="space-y-1"> <div class="font-serif text-3xl sm:text-4xl font-bold text-gold">24/7</div> <div class="text-xs uppercase tracking-widest text-cream/70 font-medium">Private Khadidmatar (Butler)</div> </div> <div class="space-y-1"> <div class="font-serif text-3xl sm:text-4xl font-bold text-gold">4.98 <i class="fa-solid fa-star text-xs"></i></div> <div class="text-xs uppercase tracking-widest text-cream/70 font-medium">Royal Patron Rating</div> </div> <div class="space-y-1"> <div class="font-serif text-3xl sm:text-4xl font-bold text-gold">1,200+</div> <div class="text-xs uppercase tracking-widest text-cream/70 font-medium">VIP Celebrations Hosted</div> </div> </div> </div> </section> <!-- DUAL-TRACK INFINITE MARQUEE --> <section class="py-10 border-b border-gold/20 overflow-hidden relative"> <div class="marquee-container overflow-hidden mb-4"> <div class="marquee-track space-x-8"> <!-- Track Items --> <div class="flex items-center space-x-8"> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-drum text-gold"></i><span>Live Ghazal & Folk Evenings</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-utensils text-gold"></i><span>Royal Thali & Candlelit Dune Dinners</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-person-safari text-gold"></i><span>Private Royal Camel Caravans</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-hot-tub-person text-gold"></i><span>Heated Plunge Pools & Open Air Spa</span> </div> </div> <!-- Duplicate --> <div class="flex items-center space-x-8"> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-drum text-gold"></i><span>Live Ghazal & Folk Evenings</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-utensils text-gold"></i><span>Royal Thali & Candlelit Dune Dinners</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-person-safari text-gold"></i><span>Private Royal Camel Caravans</span> </div> <div class="glass-card px-6 py-3 rounded-2xl border border-gold/20 text-xs uppercase tracking-widest text-cream/90 flex items-center space-x-2"> <i class="fa-solid fa-hot-tub-person text-gold"></i><span>Heated Plunge Pools & Open Air Spa</span> </div> </div> </div> </div> </section> <!-- 3D CAROUSEL SLIDER: ROYAL CANVAS SUITES COLLECTION --> <section id="tents" class="py-32 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col md:flex-row md:items-end justify-between mb-16"> <div> <span class="text-xs uppercase tracking-[0.35em] text-gold font-bold mb-3 block">Sovereign Accommodations</span> <h2 class="font-serif text-3xl sm:text-5xl font-bold text-cream">Royal Canvas Suites</h2> </div> <!-- Slider Deck Controls --> <div class="flex items-center space-x-4 mt-6 md:mt-0"> <button onclick="prevTentSlide()" class="w-12 h-12 rounded-full glass-card border border-gold/30 text-gold flex items-center justify-center hover:bg-gold hover:text-emerald-deep transition-all" aria-label="Previous Suite"> <i class="fa-solid fa-arrow-left"></i> </button> <button onclick="nextTentSlide()" class="w-12 h-12 rounded-full glass-card border border-gold/30 text-gold flex items-center justify-center hover:bg-gold hover:text-emerald-deep transition-all" aria-label="Next Suite"> <i class="fa-solid fa-arrow-right"></i> </button> </div> </div> <!-- Slider Container --> <div class="relative overflow-hidden" id="tent-slider-container"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="tent-slider-deck"> <!-- Tent Card 1 --> <div class="slider-card glass-card rounded-3xl overflow-hidden group cursor-pointer border border-gold/30 flex flex-col justify-between"> <div> <div class="relative h-72 overflow-hidden"> <img src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=1000&q=85" alt="Maharaja Grand Pavilion" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> <div class="absolute inset-0 bg-gradient-to-t from-emerald-deep via-emerald-deep/30 to-transparent"></div> <div class="absolute top-4 right-4 glass-card px-3 py-1 rounded-full text-[10px] font-bold text-gold border border-gold/30"> <i class="fa-solid fa-crown mr-1"></i> Presidential </div> </div> <div class="p-6"> <span class="text-[10px] uppercase tracking-widest text-gold font-bold">1,800 Sq. Ft. Double Layered Canvas</span> <h3 class="font-serif text-2xl font-bold text-cream mb-2">The Maharaja Grand Pavilion</h3> <p class="text-cream/70 text-xs font-light mb-6">Features hand-carved teakwood poster bed, private heated copper bathtub, open courtyard, and 24/7 personal Khadidmatar detail.</p> <div class="flex items-center space-x-4 text-xs text-gold/80 mb-6"> <span><i class="fa-solid fa-wifi mr-1"></i> Starlink</span> <span><i class="fa-solid fa-temperature-arrow-down mr-1"></i> Climate Controlled</span> <span><i class="fa-solid fa-wine-glass mr-1"></i> Royal Bar</span> </div> </div> </div> <div class="p-6 pt-0"> <div class="flex items-center justify-between pt-4 border-t border-gold/15 mb-4"> <span class="text-xs text-cream/60">Nightly Tariff</span> <span class="text-xl font-serif font-bold text-gold tent-price" data-inr="75000" data-usd="900">₹75,000 / night</span> </div> <button onclick="openBookingModal('The Maharaja Grand Pavilion')" class="w-full py-3.5 rounded-xl gold-btn font-bold text-xs uppercase tracking-widest"> Reserve Pavilion Suite </button> </div> </div> <!-- Tent Card 2 --> <div class="slider-card glass-card rounded-3xl overflow-hidden group cursor-pointer border border-gold/30 flex flex-col justify-between"> <div> <div class="relative h-72 overflow-hidden"> <img src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=1000&q=85" alt="Rajputana Swiss Canvas" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> <div class="absolute inset-0 bg-gradient-to-t from-emerald-deep via-emerald-deep/30 to-transparent"></div> <div class="absolute top-4 right-4 glass-card px-3 py-1 rounded-full text-[10px] font-bold text-gold border border-gold/30"> <i class="fa-solid fa-feather mr-1"></i> Signature </div> </div> <div class="p-6"> <span class="text-[10px] uppercase tracking-widest text-gold font-bold">1,200 Sq. Ft. Luxury Tent</span> <h3 class="font-serif text-2xl font-bold text-cream mb-2">Royal Rajputana Swiss Canvas</h3> <p class="text-cream/70 text-xs font-light mb-6">Authentic Sanganeri block-print interiors, plush cotton silk drapes, private starlight lounge deck, and bonfire hearth.</p> <div class="flex items-center space-x-4 text-xs text-gold/80 mb-6"> <span><i class="fa-solid fa-fire mr-1"></i> Private Hearth</span> <span><i class="fa-solid fa-shower mr-1"></i> Rain Shower</span> </div> </div> </div> <div class="p-6 pt-0"> <div class="flex items-center justify-between pt-4 border-t border-gold/15 mb-4"> <span class="text-xs text-cream/60">Nightly Tariff</span> <span class="text-xl font-serif font-bold text-gold tent-price" data-inr="55000" data-usd="660">₹55,000 / night</span> </div> <button onclick="openBookingModal('Royal Rajputana Swiss Canvas')" class="w-full py-3.5 rounded-xl gold-btn font-bold text-xs uppercase tracking-widest"> Reserve Swiss Suite </button> </div> </div> <!-- Tent Card 3 --> <div class="slider-card glass-card rounded-3xl overflow-hidden group cursor-pointer border border-gold/30 flex flex-col justify-between"> <div> <div class="relative h-72 overflow-hidden"> <img src="https://images.unsplash.com/photo-1510312305653-8ed496efae75?auto=format&fit=crop&w=1000&q=85" alt="Ranthambore Safari Lodge" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> <div class="absolute inset-0 bg-gradient-to-t from-emerald-deep via-emerald-deep/30 to-transparent"></div> <div class="absolute top-4 right-4 glass-card px-3 py-1 rounded-full text-[10px] font-bold text-gold border border-gold/30"> <i class="fa-solid fa-paw mr-1"></i> Wildlife Reserve </div> </div> <div class="p-6"> <span class="text-[10px] uppercase tracking-widest text-gold font-bold">2,100 Sq. Ft. Safari Reserve</span> <h3 class="font-serif text-2xl font-bold text-cream mb-2">Ranthambore Royal Wildlife Lodge</h3> <p class="text-cream/70 text-xs font-light mb-6">Nestled along the tiger corridor. Includes private infinity plunge pool, observation deck, and naturalist guide team.</p> <div class="flex items-center space-x-4 text-xs text-gold/80 mb-6"> <span><i class="fa-solid fa-water-ladder mr-1"></i> Plunge Pool</span> <span><i class="fa-solid fa-binoculars mr-1"></i> Safari Guide</span> </div> </div> </div> <div class="p-6 pt-0"> <div class="flex items-center justify-between pt-4 border-t border-gold/15 mb-4"> <span class="text-xs text-cream/60">Nightly Tariff</span> <span class="text-xl font-serif font-bold text-gold tent-price" data-inr="85000" data-usd="1020">₹85,000 / night</span> </div> <button onclick="openBookingModal('Ranthambore Royal Wildlife Lodge')" class="w-full py-3.5 rounded-xl gold-btn font-bold text-xs uppercase tracking-widest"> Reserve Safari Lodge </button> </div> </div> </div> </div> </div> </section> <!-- DAY-IN-THE-LIFE ACCORDION TIMELINE --> <section id="itinerary" class="py-32 bg-emerald-surface border-y border-gold/20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-16"> <span class="text-xs uppercase tracking-[0.35em] text-gold font-bold mb-3 block">Immersive Heritage</span> <h2 class="font-serif text-3xl sm:text-5xl font-bold text-cream mb-4">A Day in Royal Residency</h2> <p class="text-cream/70 text-base font-light">Experience timeless Rajputana traditions curated around sunrise chai, dune safaris, and starlight feasts.</p> </div> <div class="glass-widget rounded-3xl p-6 sm:p-10"> <!-- Tabs Slider --> <div class="flex items-center space-x-4 border-b border-gold/20 pb-6 mb-8 overflow-x-auto no-scrollbar"> <button onclick="switchTimeline(1, this)" class="timeline-tab px-6 py-3 rounded-full gold-btn font-bold text-xs uppercase tracking-widest whitespace-nowrap"> 06:30 AM: Royal Dawn Chai & Falconry </button> <button onclick="switchTimeline(2, this)" class="timeline-tab px-6 py-3 rounded-full glass-card border border-gold/30 text-cream/70 font-bold text-xs uppercase tracking-widest whitespace-nowrap"> 04:00 PM: Sunset Dune & Camel Caravan </button> <button onclick="switchTimeline(3, this)" class="timeline-tab px-6 py-3 rounded-full glass-card border border-gold/30 text-cream/70 font-bold text-xs uppercase tracking-widest whitespace-nowrap"> 08:00 PM: Candlelit Thali & Ghazal Night </button> </div> <!-- Active Timeline Details --> <div id="timeline-panel" class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> <div class="space-y-4"> <span class="text-xs uppercase tracking-widest text-gold font-bold" id="timeline-time">Morning Ritual</span> <h3 class="font-serif text-3xl font-bold text-cream" id="timeline-title">Royal Dawn Chai & Royal Falconry</h3> <p class="text-cream/70 text-sm leading-relaxed" id="timeline-desc"> Awaken to fresh saffron chai served in silver kulhads on your private deck. Witness regal falcons in flight across the golden morning mist, accompanied by subtle live flute ragas. </p> <div class="pt-4 flex items-center space-x-6 text-xs text-gold"> <span><i class="fa-solid fa-mug-hot mr-2"></i> Organic Saffron Tea</span> <span><i class="fa-solid fa-feather-pointed mr-2"></i> Falconry Master</span> </div> </div> <div class="h-80 rounded-2xl overflow-hidden border border-gold/30 relative"> <img id="timeline-img" src="https://images.unsplash.com/photo-1506461883276-594a12b11cf3?auto=format&fit=crop&w=1000&q=85" alt="Royal Morning" class="w-full h-full object-cover"> </div> </div> </div> </div> </section> <!-- LIVE TARIFF & EVENT CALCULATOR --> <section id="calculator" class="py-32 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-16"> <span class="text-xs uppercase tracking-[0.35em] text-gold font-bold mb-3 block">Bespoke Quotation</span> <h2 class="font-serif text-3xl sm:text-5xl font-bold text-cream mb-4">Royal Event & Stay Tariff Calculator</h2> <p class="text-cream/70 text-base font-light">Estimate your custom royal wedding, corporate retreat, or private dune getaway.</p> </div> <div class="glass-widget rounded-3xl p-8 max-w-4xl mx-auto border border-gold/40"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div> <label class="block text-xs uppercase tracking-wider text-gold font-bold mb-2">Event or Stay Type</label> <select id="calc-event-type" onchange="calculateTariff()" class="w-full px-5 py-4 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold"> <option value="leisure">Private Royal Vacation Stay</option> <option value="wedding">Royal Destination Wedding (Full Camp Buyout)</option> <option value="anniversary">Imperial Celebration & Gala</option> </select> </div> <div> <label class="block text-xs uppercase tracking-wider text-gold font-bold mb-2">Number of Guest Tents Needed</label> <select id="calc-tents-count" onchange="calculateTariff()" class="w-full px-5 py-4 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold"> <option value="1">1 Suite (Royal Couple)</option> <option value="5">5 Suites (VIP Party)</option> <option value="15">15 Suites (Full Camp Buyout)</option> </select> </div> <div> <label class="block text-xs uppercase tracking-wider text-gold font-bold mb-2">Royal Add-on Experiences</label> <div class="space-y-2 text-xs"> <label class="flex items-center space-x-3 cursor-pointer"> <input type="checkbox" id="addon-thali" onchange="calculateTariff()" checked class="accent-gold"> <span>Candlelit Royal Thali Feast (+₹5,000 / guest)</span> </label> <label class="flex items-center space-x-3 cursor-pointer"> <input type="checkbox" id="addon-ghazal" onchange="calculateTariff()" checked class="accent-gold"> <span>Private Ghazal & Folk Troupe (+₹25,000)</span> </label> <label class="flex items-center space-x-3 cursor-pointer"> <input type="checkbox" id="addon-buggy" onchange="calculateTariff()" class="accent-gold"> <span>Royal Vintage Car & Buggy Entry (+₹35,000)</span> </label> </div> </div> <div> <label class="block text-xs uppercase tracking-wider text-gold font-bold mb-2">Duration of Residency</label> <select id="calc-days" onchange="calculateTariff()" class="w-full px-5 py-4 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold"> <option value="2">2 Days / 2 Nights</option> <option value="3">3 Days / 3 Nights</option> <option value="5">5 Days / 5 Nights</option> </select> </div> </div> <!-- Total Output --> <div class="flex flex-col sm:flex-row items-center justify-between pt-6 border-t border-gold/20 gap-4"> <div> <span class="text-xs uppercase tracking-widest text-gold/80 font-bold block">Estimated Package Quote</span> <div class="text-3xl font-serif font-bold text-cream" id="calc-total-display">₹1,65,000</div> </div> <button onclick="openBookingModal('Custom Calculator Reservation')" class="w-full sm:w-auto px-8 py-4 rounded-2xl gold-btn font-bold text-xs uppercase tracking-widest"> Submit Brief For Final Approval </button> </div> </div> </div> </section> <!-- GUEST TESTIMONIALS SLIDER --> <section id="testimonials" class="py-32 bg-emerald-surface border-t border-gold/20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-16"> <span class="text-xs uppercase tracking-[0.35em] text-gold font-bold mb-3 block">Patron Endorsements</span> <h2 class="font-serif text-3xl sm:text-5xl font-bold text-cream mb-4">Words From Our Royal Guests</h2> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="glass-card p-8 rounded-3xl border border-gold/20 flex flex-col justify-between"> <div class="space-y-4"> <div class="text-gold flex space-x-1"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> </div> <p class="text-cream/80 text-xs italic font-serif leading-relaxed"> "The Maharaja Pavilion in Jaisalmer was magical. Eating warm laal maas under the starry desert sky while watching classical Kathak was the highlight of our India trip." </p> </div> <div class="pt-6 border-t border-gold/15 mt-6 flex items-center space-x-4"> <div class="w-10 h-10 rounded-full bg-gold/20 flex items-center justify-center text-gold font-bold font-serif">HR</div> <div> <h4 class="text-xs font-bold text-cream">H.R. Maharaja Vikram Singh</h4> <span class="text-[10px] text-gold/80 uppercase tracking-wider">Heritage Patron</span> </div> </div> </div> <div class="glass-card p-8 rounded-3xl border border-gold/20 flex flex-col justify-between"> <div class="space-y-4"> <div class="text-gold flex space-x-1"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> </div> <p class="text-cream/80 text-xs italic font-serif leading-relaxed"> "Flawless organization for our 3-day wedding. 20 luxury tents set up in Ranthambore with complete privacy and zero compromise on royal luxury." </p> </div> <div class="pt-6 border-t border-gold/15 mt-6 flex items-center space-x-4"> <div class="w-10 h-10 rounded-full bg-gold/20 flex items-center justify-center text-gold font-bold font-serif">AK</div> <div> <h4 class="text-xs font-bold text-cream">Ananya & Kabir</h4> <span class="text-[10px] text-gold/80 uppercase tracking-wider">Royal Wedding Couple</span> </div> </div> </div> <div class="glass-card p-8 rounded-3xl border border-gold/20 flex flex-col justify-between"> <div class="space-y-4"> <div class="text-gold flex space-x-1"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> </div> <p class="text-cream/80 text-xs italic font-serif leading-relaxed"> "Having a personal Khadidmatar wait on us with silver tea sets in the middle of the desert is an experience money usually cannot buy. Unmatched." </p> </div> <div class="pt-6 border-t border-gold/15 mt-6 flex items-center space-x-4"> <div class="w-10 h-10 rounded-full bg-gold/20 flex items-center justify-center text-gold font-bold font-serif">JS</div> <div> <h4 class="text-xs font-bold text-cream">Julian & Sophia</h4> <span class="text-[10px] text-gold/80 uppercase tracking-wider">International Guests (UK)</span> </div> </div> </div> </div> </div> </section> <!-- FOOTER --> <footer class="bg-emerald-deep border-t border-gold/20 pt-20 pb-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col sm:flex-row justify-between items-center text-xs text-cream/60 pb-12 border-b border-gold/15 gap-6"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 rounded-full bg-gold/20 border border-gold/40 flex items-center justify-center text-gold font-bold"> <i class="fa-solid fa-crown"></i> </div> <span class="font-serif text-xl font-bold tracking-widest text-cream">RAJWADA<span class="text-gold font-light ml-1">TENTS</span></span> </div> <p>© 2026 Rajwada Royal Canvas Estates Pvt. Ltd. All Rights Reserved. Sovereign Rajputana Hospitality.</p> </div> </div> </footer> <!-- INTERACTIVE BOOKING WIZARD MODAL --> <div id="booking-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-emerald-deep/95 backdrop-blur-md"> <div class="glass-widget w-full max-w-xl rounded-3xl p-8 sm:p-10 border border-gold/40 relative"> <button onclick="closeBookingModal()" aria-label="Close Modal" class="absolute top-6 right-6 text-cream/70 hover:text-gold text-2xl"> <i class="fa-solid fa-xmark"></i> </button> <div class="text-center mb-8"> <span class="text-[10px] uppercase tracking-[0.3em] text-gold font-bold mb-2 block">Royal Concierge Dispatch</span> <h3 id="modal-suite-title" class="font-serif text-2xl sm:text-3xl font-bold text-cream">Reserve Your Royal Tent</h3> </div> <form onsubmit="handleBookingSubmit(event)" class="space-y-4"> <div> <label class="block text-[10px] uppercase tracking-wider text-gold font-bold mb-1">Full Name / Title</label> <input type="text" required placeholder="H.R. / Mr. / Ms..." class="w-full px-5 py-3.5 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold placeholder:text-cream/40"> </div> <div> <label class="block text-[10px] uppercase tracking-wider text-gold font-bold mb-1">Contact Phone (WhatsApp VIP Dispatch)</label> <input type="tel" required placeholder="+91 98765 43210" class="w-full px-5 py-3.5 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold placeholder:text-cream/40"> </div> <div> <label class="block text-[10px] uppercase tracking-wider text-gold font-bold mb-1">Dates & Special Requirements</label> <textarea rows="3" placeholder="Specify check-in dates, food preferences, anniversary setups..." class="w-full px-5 py-3.5 rounded-2xl bg-emerald-deep border border-gold/30 text-cream text-xs focus:outline-none focus:border-gold placeholder:text-cream/40"></textarea> </div> <button type="submit" class="w-full py-4 rounded-2xl gold-btn font-bold text-xs uppercase tracking-widest"> Confirm Royal Reservation Request </button> </form> </div> </div> </body> </html>
CSS
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #03100D; color: #FDFBF7; overflow-x: hidden; cursor: default; } h1, h2, h3, h4, .font-serif { font-family: 'Cormorant Garamond', serif; } /* Custom Royal Cursor */ #custom-cursor { pointer-events: none; position: fixed; top: 0; left: 0; width: 32px; height: 32px; border: 1px solid rgba(212, 175, 55, 0.75); border-radius: 50%; z-index: 9999; transition: transform 0.08s ease-out, width 0.2s, height 0.2s; transform: translate(-50%, -50%); box-shadow: 0 0 15px rgba(212, 175, 55, 0.35); } #custom-cursor-dot { pointer-events: none; position: fixed; top: 0; left: 0; width: 6px; height: 6px; background-color: #D4AF37; border-radius: 50%; z-index: 10000; transform: translate(-50%, -50%); box-shadow: 0 0 10px #FFD700; } /* Royal Jaali Pattern Overlay */ .jaali-overlay { background-image: radial-gradient(rgba(212, 175, 55, 0.12) 1px, transparent 1px); background-size: 24px 24px; } /* Glassmorphism Refined */ .glass-nav { background: rgba(3, 16, 13, 0.88); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(212, 175, 55, 0.25); } .glass-card { background: linear-gradient(135deg, rgba(18, 57, 46, 0.65) 0%, rgba(5, 26, 20, 0.9) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(212, 175, 55, 0.22); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7); } .glass-card:hover { border-color: rgba(212, 175, 55, 0.65); box-shadow: 0 0 35px rgba(212, 175, 55, 0.28); } .glass-widget { background: rgba(11, 43, 34, 0.93); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 35px 70px rgba(0, 0, 0, 0.85); } .gold-btn { background: linear-gradient(135deg, #F5E6AD 0%, #D4AF37 50%, #AA8C2C 100%); color: #03100D; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .gold-btn:hover { box-shadow: 0 0 35px rgba(212, 175, 55, 0.75); transform: translateY(-2px); } /* Audio Wave Equalizer */ .wave-bar { width: 3px; height: 12px; background-color: #D4AF37; border-radius: 2px; animation: soundWave 1.2s ease-in-out infinite alternate; } .wave-bar:nth-child(2) { animation-delay: 0.2s; } .wave-bar:nth-child(3) { animation-delay: 0.4s; } .wave-bar:nth-child(4) { animation-delay: 0.6s; } @keyframes soundWave { 0% { height: 4px; } 100% { height: 18px; } } /* Marquee Scrollers */ .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; } .marquee-track-reverse { display: flex; width: max-content; animation: marqueeReverse 40s linear infinite; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } @keyframes marqueeReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } } .marquee-container:hover .marquee-track, .marquee-container:hover .marquee-track-reverse { animation-play-state: paused; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: #03100D; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #D4AF37, #AA8C2C); border-radius: 4px; } /* Deck Slider Transitions */ .slider-card { transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
JavaScript
const cursor = document.getElementById('custom-cursor'); const cursorDot = document.getElementById('custom-cursor-dot'); document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; cursorDot.style.left = `${e.clientX}px`; cursorDot.style.top = `${e.clientY}px`; }); // 3D Three.js Particles (Floating Ember Gold Particles) let scene, camera, renderer, particles; function initHeroParticles() { const container = document.getElementById('hero-canvas-container'); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 300; renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); const geometry = new THREE.BufferGeometry(); const count = 1200; const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); for (let i = 0; i < count * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 1000; positions[i + 1] = (Math.random() - 0.5) * 1000; positions[i + 2] = (Math.random() - 0.5) * 1000; colors[i] = 0.83; // Gold colors[i + 1] = 0.68; colors[i + 2] = 0.21; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 2.5, vertexColors: true, transparent: true, opacity: 0.75 }); particles = new THREE.Points(geometry, material); scene.add(particles); function animate() { requestAnimationFrame(animate); particles.rotation.y += 0.0005; particles.rotation.x += 0.0002; renderer.render(scene, camera); } animate(); } window.onload = function() { initHeroParticles(); calculateTariff(); }; // Currency Switcher Logic (INR / USD) let currentCurrency = 'INR'; const usdRate = 0.012; // 1 INR ~ 0.012 USD function toggleCurrency() { currentCurrency = document.getElementById('currency-select').value; // Update Tent Card Prices document.querySelectorAll('.tent-price').forEach(el => { const inr = parseInt(el.getAttribute('data-inr')); const usd = parseInt(el.getAttribute('data-usd')); if (currentCurrency === 'USD') { el.innerText = `$${usd.toLocaleString()} / night`; } else { el.innerText = `₹${inr.toLocaleString()} / night`; } }); updateHeroWidget(); calculateTariff(); } // Hero Widget Logic function updateHeroWidget() { const suite = document.getElementById('hero-suite').value; const nights = parseInt(document.getElementById('hero-nights').value); let baseRate = 55000; if (suite === 'maharaja') baseRate = 75000; if (suite === 'safari') baseRate = 85000; const total = baseRate * nights; if (currentCurrency === 'USD') { document.getElementById('hero-price-display').innerText = `$${Math.round(total * usdRate).toLocaleString()} (${nights} Nights)`; } else { document.getElementById('hero-price-display').innerText = `₹${total.toLocaleString()} (${nights} Nights)`; } } // Tent Deck Slider Controls let currentTentSlide = 0; function nextTentSlide() { const slider = document.getElementById('tent-slider-deck'); currentTentSlide = (currentTentSlide + 1) % 3; slider.style.transform = `translateX(-${currentTentSlide * 100}%)`; } function prevTentSlide() { const slider = document.getElementById('tent-slider-deck'); currentTentSlide = (currentTentSlide - 1 + 3) % 3; slider.style.transform = `translateX(-${currentTentSlide * 100}%)`; } // Day-in-Life Timeline Accordion Switcher const timelines = { 1: { time: "Morning Ritual", title: "Royal Dawn Chai & Falconry", desc: "Awaken to fresh saffron chai served in silver kulhads on your private deck. Witness regal falcons in flight across the golden morning mist, accompanied by subtle live flute ragas.", img: "https://images.unsplash.com/photo-1506461883276-594a12b11cf3?auto=format&fit=crop&w=1000&q=85" }, 2: { time: "Afternoon Safari", title: "Sunset Dune & Camel Caravan", desc: "Ride decorated royal camels across untouchable private sand dunes, arriving at a sunset pavilion with iced sherbets, vintage carpets, and live sarangi melodies.", img: "https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?auto=format&fit=crop&w=1000&q=85" }, 3: { time: "Night Feast", title: "Candlelit Thali & Ghazal Night", desc: "Gather around private bonfires under a canopy of stars. Indulge in 14-course Royal Rajasthani Thali cooked by royal family chefs as world-renowned Ghazal singers perform live.", img: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=1000&q=85" } }; function switchTimeline(index, btn) { document.querySelectorAll('.timeline-tab').forEach(t => { t.classList.remove('gold-btn', 'text-emerald-deep'); t.classList.add('glass-card', 'text-cream/70'); }); btn.classList.add('gold-btn', 'text-emerald-deep'); btn.classList.remove('glass-card', 'text-cream/70'); document.getElementById('timeline-time').innerText = timelines[index].time; document.getElementById('timeline-title').innerText = timelines[index].title; document.getElementById('timeline-desc').innerText = timelines[index].desc; document.getElementById('timeline-img').src = timelines[index].img; } // Tariff Calculator function calculateTariff() { const type = document.getElementById('calc-event-type').value; const tents = parseInt(document.getElementById('calc-tents-count').value); const days = parseInt(document.getElementById('calc-days').value); let baseRatePerTent = 55000; if (type === 'wedding') baseRatePerTent = 70000; let total = baseRatePerTent * tents * days; if (document.getElementById('addon-thali').checked) total += (5000 * tents * 2 * days); if (document.getElementById('addon-ghazal').checked) total += 25000; if (document.getElementById('addon-buggy').checked) total += 35000; if (currentCurrency === 'USD') { document.getElementById('calc-total-display').innerText = `$${Math.round(total * usdRate).toLocaleString()}`; } else { document.getElementById('calc-total-display').innerText = `₹${total.toLocaleString()}`; } } // Sitar Audio Simulation Toggle let audioPlaying = false; function toggleAudio() { audioPlaying = !audioPlaying; const bars = document.querySelectorAll('.wave-bar'); const soundText = document.getElementById('sound-text'); if (audioPlaying) { bars.forEach(b => b.classList.remove('opacity-40')); soundText.innerText = "Playing Sitar"; showToast("Playing Relaxing Indian Royal Sitar & Flute Ambience."); } else { bars.forEach(b => b.classList.add('opacity-40')); soundText.innerText = "Royal Sitar"; } } // Booking Modal Controls const bookingModal = document.getElementById('booking-modal'); function openBookingModal(title) { if (title && typeof title === 'string') { document.getElementById('modal-suite-title').innerText = `Reserve: ${title}`; } else { document.getElementById('modal-suite-title').innerText = 'Reserve Your Royal Tent'; } bookingModal.classList.remove('hidden'); bookingModal.classList.add('flex'); document.body.style.overflow = 'hidden'; } function closeBookingModal() { bookingModal.classList.add('hidden'); bookingModal.classList.remove('flex'); document.body.style.overflow = 'auto'; } function handleBookingSubmit(e) { e.preventDefault(); closeBookingModal(); showToast("Royal Concierge dispatch notified. We will contact your WhatsApp within 30 minutes."); } // Mobile Menu Toggle function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); } // Toast Helper function showToast(message) { const container = document.getElementById('toast-container'); const toast = document.createElement('div'); toast.className = 'glass-widget px-6 py-4 rounded-2xl border border-gold/40 text-cream text-xs shadow-2xl pointer-events-auto transform translate-y-4 opacity-0 transition-all duration-300 flex items-center space-x-3'; toast.innerHTML = ` <div class="w-8 h-8 rounded-full bg-gold/20 flex items-center justify-center text-gold flex-shrink-0"> <i class="fa-solid fa-crown text-xs"></i> </div> <div> <h5 class="font-serif font-bold text-gold text-xs uppercase tracking-wider">Rajwada Royal Tents</h5> <p class="text-cream/90 text-xs">${message}</p> </div> `; container.appendChild(toast); setTimeout(() => toast.classList.remove('translate-y-4', 'opacity-0'), 50); setTimeout(() => { toast.classList.add('translate-y-4', 'opacity-0'); setTimeout(() => toast.remove(), 300); }, 4000); } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } // Scroll listener for top button window.addEventListener('scroll', () => { const btn = document.getElementById('scroll-top-btn'); if (window.scrollY > 400) { btn.classList.remove('opacity-0', 'pointer-events-none'); } else { btn.classList.add('opacity-0', 'pointer-events-none'); } });
Output Preview
Desktop
Mobile
Fullscreen