Phenomenal Wedding Card Prompt with Feature Checklist

> Role: You are a world‑class full‑stack web developer, UI/UX designer, and creative director.
> Goal: Build the most phenomenal, feature‑rich, interactive, Islamic‑style wedding invitation card ever made — all in one single HTML file containing HTML, CSS, and JavaScript (Bootstrap optional).
>
> Couple & Event Details:
> - Groom: Yaseen Shaikh (Son of Alauddin Shaikh)
> - Bride: Noor Fatima (Daughter of Obaida Shaikh)
> - Nikah: 15 May 2026, after Namaz at 3:00 PM, Haqqani Masjid, Govandi, Mumbai
> - Walimah: 18 May 2026, 7:00 PM – 12:00 midnight, Govandi Karbala Hall, Mumbai
> - Love story: They met in a video game, became friends, bonded over faith, families approved, and now they’re starting a life together.
>
> Instructions:
> - All code in one file — HTML, CSS, and JavaScript combined.
> - Use online resources if needed — royalty‑free dummy images, Islamic calligraphy SVGs, decorative patterns, icon libraries (Font Awesome), Google Fonts, etc.
> - Islamic‑inspired design — modest yet stylish, with crescents, lanterns, arabesque patterns, and Quranic verses.
> - Responsive — perfect on mobile, tablet, and desktop.
> - Performance‑friendly — smooth animations without lag.
> - Culturally respectful — modest imagery, Islamic calligraphy, and appropriate colour palettes.
>
> Feature Checklist (Tick off each as you implement):
>
> ### 🎨 Design & Visuals
> - [ ] Animated backgrounds (stars, lanterns, petals, bokeh, gradients)
> - [ ] Islamic decorative elements (crescent moon, arabesque patterns, calligraphy)
> - [ ] Multiple themes (emerald, blush, midnight, gold) with theme switcher
> - [ ] Shimmer & glow effects on names/headings
> - [ ] Animated SVG dividers between sections
> - [ ] Custom cursor (crescent or floral)
> - [ ] Custom scrollbars matching theme
> - [ ] Floating decorative elements (petals, lanterns, stars)
> - [ ] Animated borders with glowing gold outlines
> - [ ] Time‑of‑day background change
> - [ ] Loading screen with Islamic calligraphy animation
> - [ ] Floating Quranic calligraphy in background
> - [ ] Dynamic floral patterns generated with CSS/JS
> - [ ] Interactive lanterns (click to light/unlight)
> - [ ] 3D tilt effect on hover for main card
> - [ ] Light/Dark mode toggle
>
> ### 📅 Event Info & Interactivity
> - [ ] Countdown timers for Nikah and Walimah
> - [ ] Hijri date converter for each event
> - [ ] Interactive map buttons (“Open in Google Maps”)
> - [ ] Add to Calendar (.ics) for each event
> - [ ] Event reminders (pop‑up/banner when near)
> - [ ] Weather widget for Mumbai on event days
> - [ ] Prayer times widget for Govandi on event days
> - [ ] Animated progress bar showing days left until wedding
>
> ### 💌 Story & Media
> - [ ] Love story timeline with animations and icons
> - [ ] Auto‑scroll storytelling mode with background music
> - [ ] Photo gallery carousel (dummy images)
> - [ ] Auto‑play slideshow of couple’s journey
> - [ ] Animated signature of couple’s names in calligraphy
> - [ ] Auto‑generated Islamic poetry or duas displayed randomly
>
> ### 🎶 Audio & Effects
> - [ ] Background nasheed/music (royalty‑free) with play/pause toggle
> - [ ] Confetti & fireworks animation on load or button click
> - [ ] Soft chime sound effects on button clicks
> - [ ] Floating tasbih beads animation
> - [ ] Easter eggs (hidden animations/blessings when clicking certain elements)
>
> ### 📝 Guest Interaction
> - [ ] RSVP form with validation and success animation
> - [ ] Guestbook/message board (store in localStorage)
> - [ ] Digital guest badge generator for each RSVP
> - [ ] Interactive quiz (“How well do you know the couple?”)
> - [ ] Live chat widget for guests (optional)
> - [ ] Live visitor counter
> - [ ] Photo frame generator for guest uploads
>
> ### ♿ Accessibility & Sharing
> - [ ] Language toggle (English/Urdu)
> - [ ] High‑contrast accessibility mode
> - [ ] ARIA labels for screen readers
> - [ ] Print/PDF download option
> - [ ] SEO & social preview meta tags
> - [ ] Optimised for sharing on WhatsApp, Instagram, etc.
> - [ ] Lazy‑loading images for performance
> - [ ] Offline mode with service worker
>
> Output Requirements:
> - Deliver all code in one HTML file.
> - Include clear comments for each major section.
> - Use dummy images/audio from online sources where needed.
> - Ensure it runs standalone in a browser without extra setup.
> - Make it visually breathtaking, deeply interactive, and culturally respectful.
> - Add any extra creative features you can imagine beyond this list.
> - Think like a designer, developer, and storyteller — this is not just a card, it’s an experience. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Yasso
-emoji: 🔥
-colorFrom: blue
-colorTo: red
+title: yasso
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,966 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Yaseen & Noor - Wedding Invitation</title>
+    <meta name="description" content="Join us in celebrating the union of Yaseen Shaikh and Noor Fatima on 15th May 2026">
+    
+    <!-- Favicon -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌙</text></svg>">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        gold: '#D4AF37',
+                        emerald: '#50C878',
+                        blush: '#DE5D83',
+                        midnight: '#1A1A2E',
+                    },
+                    fontFamily: {
+                        arabic: ['"Amiri"', 'serif'],
+                        english: ['"Playfair Display"', 'serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
+    
+    <!-- Feather Icons -->
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    
+    <!-- Anime.js -->
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
+    
+    <!-- AOS Animation -->
+    <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>
+    
+    <style>
+        /* Custom CSS */
+        :root {
+            --primary: #D4AF37;
+            --secondary: #1A1A2E;
+        }
+        
+        body {
+            font-family: 'Playfair Display', serif;
+            background-color: #f9f5f0;
+            color: #333;
+            overflow-x: hidden;
+        }
+        
+        .arabic-text {
+            font-family: 'Amiri', serif;
+            direction: rtl;
+        }
+        
+        .glow-text {
+            text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
+        }
+        
+        .card-hover {
+            transition: transform 0.3s ease;
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-10px);
+        }
+        
+        .lantern {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        .lantern:hover {
+            filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.9));
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        .petal {
+            position: absolute;
+            background-size: contain;
+            opacity: 0.7;
+            animation: falling linear infinite;
+        }
+        
+        @keyframes falling {
+            0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(calc(100vh + 100px)) rotate(360deg); opacity: 0; }
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 10px;
+        }
+        
+        .theme-selector {
+            transition: all 0.3s ease;
+        }
+        
+        .theme-selector:hover {
+            transform: scale(1.1);
+        }
+        
+        .countdown-number {
+            font-size: 2rem;
+            font-weight: bold;
+            color: var(--primary);
+        }
+        
+        .countdown-label {
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary);
+            left: -10px;
+            top: 0;
+        }
+        
+        .floating-quran {
+            position: absolute;
+            opacity: 0.1;
+            z-index: -1;
+            animation: float 15s ease-in-out infinite;
+        }
+        
+        .map-container {
+            position: relative;
+            overflow: hidden;
+            padding-top: 56.25%;
+        }
+        
+        .map-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+        
+        .rsvp-input {
+            border-bottom: 2px solid #ddd;
+            transition: all 0.3s ease;
+        }
+        
+        .rsvp-input:focus {
+            border-bottom-color: var(--primary);
+        }
+        
+        .guestbook-message {
+            border-left: 3px solid var(--primary);
+        }
+        
+        .modal-overlay {
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+        
+        .modal-content {
+            animation: modalFadeIn 0.3s ease-out;
+        }
+        
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .music-toggle {
+            transition: all 0.3s ease;
+        }
+        
+        .music-toggle:hover {
+            transform: scale(1.1);
+        }
+        
+        .active-theme {
+            border: 3px solid var(--primary);
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body class="relative overflow-x-hidden">
+    <!-- Loading Screen -->
+    <div id="loading-screen" class="fixed inset-0 bg-midnight z-50 flex flex-col items-center justify-center transition-opacity duration-1000">
+        <div class="text-4xl text-gold mb-4 animate-pulse">🌙</div>
+        <div class="text-xl text-white font-english">Loading the Celebration...</div>
+        <div class="w-1/4 h-1 bg-gold mt-4 rounded-full overflow-hidden">
+            <div id="loading-bar" class="h-full bg-emerald" style="width: 0%"></div>
+        </div>
+    </div>
+    
+    <!-- Floating Elements -->
+    <div id="floating-elements">
+        <!-- Will be populated by JS -->
+    </div>
+    
+    <!-- Floating Quranic Verses -->
+    <div class="floating-quran text-6xl text-gold opacity-10" style="top: 10%; left: 5%;">﷽</div>
+    <div class="floating-quran text-4xl text-gold opacity-10" style="top: 30%; right: 10%;">وَمِنْ آيَاتِهِ أَنْ خَلَقَ لَكُم مِّنْ أَنفُسِكُمْ أَزْوَاجًا</div>
+    <div class="floating-quran text-5xl text-gold opacity-10" style="bottom: 20%; left: 15%;">وَأَنكِحُوا الْأَيَامَىٰ مِنكُمْ</div>
+    
+    <!-- Main Container -->
+    <div class="max-w-6xl mx-auto px-4 py-8 relative">
+        <!-- Header with Theme Switcher -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="text-xl text-gold font-english">Yaseen & Noor</div>
+            <div class="flex space-x-2">
+                <div class="theme-selector w-6 h-6 rounded-full bg-emerald cursor-pointer" data-theme="emerald"></div>
+                <div class="theme-selector w-6 h-6 rounded-full bg-blush cursor-pointer" data-theme="blush"></div>
+                <div class="theme-selector w-6 h-6 rounded-full bg-midnight cursor-pointer" data-theme="midnight"></div>
+                <div class="theme-selector w-6 h-6 rounded-full bg-gold active-theme cursor-pointer" data-theme="gold"></div>
+            </div>
+        </header>
+        
+        <!-- Hero Section -->
+        <section class="relative mb-16" data-aos="fade-up">
+            <div class="absolute inset-0 bg-gradient-to-r from-gold/10 to-transparent rounded-2xl"></div>
+            <div class="relative bg-white p-8 rounded-2xl shadow-lg">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/2 mb-8 md:mb-0 text-center">
+                        <h1 class="text-4xl md:text-5xl font-bold text-gold mb-2 glow-text">Yaseen & Noor</h1>
+                        <p class="text-lg text-gray-600 mb-4">Invite you to celebrate their union</p>
+                        <div class="flex justify-center space-x-4 mb-6">
+                            <div class="lantern text-3xl">🏮</div>
+                            <div class="lantern text-3xl" style="animation-delay: 1s;">🏮</div>
+                            <div class="lantern text-3xl" style="animation-delay: 2s;">🏮</div>
+                        </div>
+                        <p class="arabic-text text-xl mb-4">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</p>
+                        <p class="text-gray-700">"And among His signs is that He created for you mates from among yourselves, that you may dwell in tranquility with them, and He has put love and mercy between your hearts."</p>
+                        <p class="arabic-text text-sm mt-2">(Quran 30:21)</p>
+                    </div>
+                    <div class="md:w-1/2 flex justify-center">
+                        <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-gold shadow-lg card-hover">
+                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Couple" class="w-full h-full object-cover">
+                            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Countdown Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">Countdown to Our Special Day</h2>
+                <div class="flex justify-center space-x-4 md:space-x-8 mb-8">
+                    <div class="text-center">
+                        <div class="countdown-number" id="countdown-days">00</div>
+                        <div class="countdown-label">Days</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="countdown-number" id="countdown-hours">00</div>
+                        <div class="countdown-label">Hours</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="countdown-number" id="countdown-minutes">00</div>
+                        <div class="countdown-label">Minutes</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="countdown-number" id="countdown-seconds">00</div>
+                        <div class="countdown-label">Seconds</div>
+                    </div>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                    <div id="progress-bar" class="bg-gold h-2.5 rounded-full" style="width: 0%"></div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Event Details Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">Event Details</h2>
+                
+                <div class="grid md:grid-cols-2 gap-8">
+                    <!-- Nikah -->
+                    <div class="bg-gray-50 p-6 rounded-xl card-hover">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-gold text-white p-3 rounded-full mr-4">
+                                <i data-feather="heart"></i>
+                            </div>
+                            <h3 class="text-2xl font-bold text-gold">Nikah Ceremony</h3>
+                        </div>
+                        <div class="space-y-2">
+                            <p class="flex items-center"><i data-feather="calendar" class="mr-2 text-gold"></i> <span class="font-medium">Date:</span> 15th May 2026</p>
+                            <p class="flex items-center"><i data-feather="clock" class="mr-2 text-gold"></i> <span class="font-medium">Time:</span> After Asr Prayer (~3:00 PM)</p>
+                            <p class="flex items-center"><i data-feather="map-pin" class="mr-2 text-gold"></i> <span class="font-medium">Venue:</span> Haqqani Masjid, Govandi, Mumbai</p>
+                            <p class="arabic-text mt-4 text-right">وَأَنكِحُوا الْأَيَامَىٰ مِنكُمْ وَالصَّالِحِينَ مِنْ عِبَادِكُمْ وَإِمَائِكُمْ</p>
+                            <p class="text-sm text-gray-500">"And marry the unmarried among you and the righteous among your male slaves and female slaves." (Quran 24:32)</p>
+                        </div>
+                        <div class="mt-4 flex space-x-2">
+                            <button class="bg-gold text-white px-4 py-2 rounded-full flex items-center hover:bg-gold/90 transition">
+                                <i data-feather="map" class="mr-2"></i> View Map
+                            </button>
+                            <button class="border border-gold text-gold px-4 py-2 rounded-full flex items-center hover:bg-gold/10 transition">
+                                <i data-feather="calendar" class="mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Walimah -->
+                    <div class="bg-gray-50 p-6 rounded-xl card-hover">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-gold text-white p-3 rounded-full mr-4">
+                                <i data-feather="feather"></i>
+                            </div>
+                            <h3 class="text-2xl font-bold text-gold">Walimah Reception</h3>
+                        </div>
+                        <div class="space-y-2">
+                            <p class="flex items-center"><i data-feather="calendar" class="mr-2 text-gold"></i> <span class="font-medium">Date:</span> 18th May 2026</p>
+                            <p class="flex items-center"><i data-feather="clock" class="mr-2 text-gold"></i> <span class="font-medium">Time:</span> 7:00 PM - 12:00 Midnight</p>
+                            <p class="flex items-center"><i data-feather="map-pin" class="mr-2 text-gold"></i> <span class="font-medium">Venue:</span> Govandi Karbala Hall, Mumbai</p>
+                            <p class="arabic-text mt-4 text-right">كُلُوا وَاشْرَبُوا هَنِيئًا بِمَا أَسْلَفْتُمْ فِي الْأَيَّامِ الْخَالِيَةِ</p>
+                            <p class="text-sm text-gray-500">"Eat and drink in satisfaction for what you put forth in the days past." (Quran 69:24)</p>
+                        </div>
+                        <div class="mt-4 flex space-x-2">
+                            <button class="bg-gold text-white px-4 py-2 rounded-full flex items-center hover:bg-gold/90 transition">
+                                <i data-feather="map" class="mr-2"></i> View Map
+                            </button>
+                            <button class="border border-gold text-gold px-4 py-2 rounded-full flex items-center hover:bg-gold/10 transition">
+                                <i data-feather="calendar" class="mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Our Story Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">Our Story</h2>
+                
+                <div class="relative">
+                    <!-- Timeline -->
+                    <div class="space-y-8 pl-8 border-l-2 border-gold/30">
+                        <!-- Timeline Item 1 -->
+                        <div class="relative timeline-item pl-8">
+                            <div class="bg-gray-50 p-6 rounded-xl">
+                                <div class="flex items-center mb-2">
+                                    <div class="bg-gold text-white p-2 rounded-full mr-3">
+                                        <i data-feather="heart"></i>
+                                    </div>
+                                    <h3 class="text-xl font-bold text-gold">The Meeting</h3>
+                                </div>
+                                <p class="text-gray-700">Yaseen and Noor first met in an online game. What started as a casual team-up turned into regular gaming sessions and late-night conversations.</p>
+                                <p class="text-sm text-gray-500 mt-2">Spring 2023</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Timeline Item 2 -->
+                        <div class="relative timeline-item pl-8">
+                            <div class="bg-gray-50 p-6 rounded-xl">
+                                <div class="flex items-center mb-2">
+                                    <div class="bg-gold text-white p-2 rounded-full mr-3">
+                                        <i data-feather="message-square"></i>
+                                    </div>
+                                    <h3 class="text-xl font-bold text-gold">Bonding Over Faith</h3>
+                                </div>
+                                <p class="text-gray-700">They discovered their shared love for Islam and began discussing Quranic verses, Islamic history, and their dreams for a faithful family.</p>
+                                <p class="text-sm text-gray-500 mt-2">Summer 2023</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Timeline Item 3 -->
+                        <div class="relative timeline-item pl-8">
+                            <div class="bg-gray-50 p-6 rounded-xl">
+                                <div class="flex items-center mb-2">
+                                    <div class="bg-gold text-white p-2 rounded-full mr-3">
+                                        <i data-feather="users"></i>
+                                    </div>
+                                    <h3 class="text-xl font-bold text-gold">Family Introductions</h3>
+                                </div>
+                                <p class="text-gray-700">After months of getting to know each other, they introduced their families. Both families approved and supported their relationship.</p>
+                                <p class="text-sm text-gray-500 mt-2">Winter 2023</p>
+                            </div>
+                        </div>
+                        
+                        <!-- Timeline Item 4 -->
+                        <div class="relative timeline-item pl-8">
+                            <div class="bg-gray-50 p-6 rounded-xl">
+                                <div class="flex items-center mb-2">
+                                    <div class="bg-gold text-white p-2 rounded-full mr-3">
+                                        <i data-feather="ring"></i>
+                                    </div>
+                                    <h3 class="text-xl font-bold text-gold">The Proposal</h3>
+                                </div>
+                                <p class="text-gray-700">Yaseen proposed to Noor during a family gathering, with both sets of parents present, following Islamic traditions.</p>
+                                <p class="text-sm text-gray-500 mt-2">Spring 2024</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Photo Gallery -->
+                <div class="mt-12">
+                    <h3 class="text-2xl font-bold text-center text-gold mb-6">Our Journey</h3>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <div class="rounded-xl overflow-hidden h-40 bg-gray-200">
+                            <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple" class="w-full h-full object-cover">
+                        </div>
+                        <div class="rounded-xl overflow-hidden h-40 bg-gray-200">
+                            <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple" class="w-full h-full object-cover">
+                        </div>
+                        <div class="rounded-xl overflow-hidden h-40 bg-gray-200">
+                            <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple" class="w-full h-full object-cover">
+                        </div>
+                        <div class="rounded-xl overflow-hidden h-40 bg-gray-200">
+                            <img src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- RSVP Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">RSVP</h2>
+                
+                <form id="rsvp-form" class="max-w-lg mx-auto">
+                    <div class="mb-6">
+                        <label for="name" class="block text-gray-700 mb-2">Your Name</label>
+                        <input type="text" id="name" class="w-full px-4 py-2 rsvp-input focus:outline-none" required>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="email" class="block text-gray-700 mb-2">Email Address</label>
+                        <input type="email" id="email" class="w-full px-4 py-2 rsvp-input focus:outline-none" required>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
+                        <input type="tel" id="phone" class="w-full px-4 py-2 rsvp-input focus:outline-none" required>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label class="block text-gray-700 mb-2">Which events will you attend?</label>
+                        <div class="space-y-2">
+                            <label class="flex items-center">
+                                <input type="checkbox" name="events" value="nikah" class="mr-2">
+                                <span>Nikah Ceremony (15th May)</span>
+                            </label>
+                            <label class="flex items-center">
+                                <input type="checkbox" name="events" value="walimah" class="mr-2">
+                                <span>Walimah Reception (18th May)</span>
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="guests" class="block text-gray-700 mb-2">Number of Guests</label>
+                        <select id="guests" class="w-full px-4 py-2 rsvp-input focus:outline-none">
+                            <option value="1">1 (Just me)</option>
+                            <option value="2">2</option>
+                            <option value="3">3</option>
+                            <option value="4">4</option>
+                            <option value="5">5+</option>
+                        </select>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="message" class="block text-gray-700 mb-2">Message for the Couple</label>
+                        <textarea id="message" rows="3" class="w-full px-4 py-2 rsvp-input focus:outline-none"></textarea>
+                    </div>
+                    
+                    <button type="submit" class="w-full bg-gold text-white py-3 rounded-full font-bold hover:bg-gold/90 transition">
+                        Submit RSVP
+                    </button>
+                </form>
+            </div>
+        </section>
+        
+        <!-- Guestbook Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">Guestbook</h2>
+                
+                <div id="guestbook-messages" class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar p-2">
+                    <!-- Messages will be loaded here -->
+                </div>
+                
+                <div class="mt-8">
+                    <h3 class="text-xl font-bold text-gold mb-4">Leave a Message</h3>
+                    <form id="guestbook-form" class="flex">
+                        <input type="text" id="guestbook-input" placeholder="Write your message..." class="flex-grow px-4 py-2 rsvp-input focus:outline-none">
+                        <button type="submit" class="ml-2 bg-gold text-white px-6 py-2 rounded-full hover:bg-gold/90 transition">
+                            <i data-feather="send"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Prayer Times Section -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg">
+                <h2 class="text-3xl font-bold text-center text-gold mb-8">Prayer Times for Event Days</h2>
+                
+                <div class="grid md:grid-cols-2 gap-8">
+                    <!-- Nikah Day Prayer Times -->
+                    <div class="bg-gray-50 p-6 rounded-xl">
+                        <h3 class="text-xl font-bold text-gold mb-4">15th May 2026 - Nikah Day</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Fajr</span>
+                                <span>5:12 AM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Dhuhr</span>
+                                <span>12:30 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Asr</span>
+                                <span>3:45 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Maghrib</span>
+                                <span>6:58 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="font-medium">Isha</span>
+                                <span>8:15 PM</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Walimah Day Prayer Times -->
+                    <div class="bg-gray-50 p-6 rounded-xl">
+                        <h3 class="text-xl font-bold text-gold mb-4">18th May 2026 - Walimah Day</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Fajr</span>
+                                <span>5:10 AM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Dhuhr</span>
+                                <span>12:30 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Asr</span>
+                                <span>3:45 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center border-b pb-2">
+                                <span class="font-medium">Maghrib</span>
+                                <span>6:59 PM</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="font-medium">Isha</span>
+                                <span>8:16 PM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Final Blessing -->
+        <section class="mb-16" data-aos="fade-up">
+            <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
+                <h2 class="text-3xl font-bold text-gold mb-4">بارك الله لكما وبارك عليكما وجمع بينكما في خير</h2>
+                <p class="text-lg text-gray-700 mb-6">"May Allah bless you and shower His blessings upon you and unite you in goodness."</p>
+                <p class="text-gray-600">We look forward to celebrating this blessed occasion with you</p>
+                <div class="mt-6 flex justify-center space-x-4">
+                    <button id="print-btn" class="bg-gold text-white px-6 py-2 rounded-full flex items-center hover:bg-gold/90 transition">
+                        <i data-feather="printer" class="mr-2"></i> Print Invitation
+                    </button>
+                    <button id="share-btn" class="border border-gold text-gold px-6 py-2 rounded-full flex items-center hover:bg-gold/10 transition">
+                        <i data-feather="share-2" class="mr-2"></i> Share
+                    </button>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Footer -->
+        <footer class="text-center py-8 text-gray-600">
+            <p>With love, Yaseen Shaikh (Son of Alauddin Shaikh) & Noor Fatima (Daughter of Obaida Shaikh)</p>
+            <p class="mt-2 text-sm">© 2026 All Rights Reserved</p>
+        </footer>
+    </div>
+    
+    <!-- Music Player -->
+    <div class="fixed bottom-4 right-4">
+        <button id="music-toggle" class="music-toggle bg-gold text-white p-4 rounded-full shadow-lg hover:shadow-xl">
+            <i data-feather="music"></i>
+        </button>
+        <audio id="background-music" loop>
+            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+        </audio>
+    </div>
+    
+    <!-- Map Modal -->
+    <div id="map-modal" class="fixed inset-0 z-50 flex items-center justify-center modal-overlay hidden">
+        <div class="modal-content bg-white rounded-2xl shadow-xl w-full max-w-4xl mx-4">
+            <div class="p-4 border-b flex justify-between items-center">
+                <h3 class="text-xl font-bold text-gold">Event Location</h3>
+                <button id="close-map" class="text-gray-500 hover:text-gray-700">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="map-container">
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3770.981097839318!2d72.9961883153774!3d19.06272238709736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c1d1d7d4d0a1%3A0x9b9c9c9c9c9c9c9c!2sHaqqani%20Masjid%2C%20Govandi%2C%20Mumbai!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>
+            </div>
+        </div>
+    </div>
+    
+    <!-- RSVP Success Modal -->
+    <div id="rsvp-success" class="fixed inset-0 z-50 flex items-center justify-center modal-overlay hidden">
+        <div class="modal-content bg-white p-8 rounded-2xl shadow-xl max-w-md text-center">
+            <div class="text-6xl text-gold mb-4">🎉</div>
+            <h3 class="text-2xl font-bold text-gold mb-2">Thank You!</h3>
+            <p class="text-gray-700 mb-6">Your RSVP has been received. We look forward to celebrating with you!</p>
+            <button id="close-rsvp-success" class="bg-gold text-white px-6 py-2 rounded-full hover:bg-gold/90 transition">
+                Close
+            </button>
+        </div>
+    </div>
+    
+    <!-- Confetti Canvas -->
+    <canvas id="confetti-canvas" class="fixed top-0 left-0 w-full h-full pointer-events-none z-40" style="display: none;"></canvas>
+    
+    <script>
+        // Initialize AOS animation
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Loading Screen Animation
+        window.addEventListener('load', function() {
+            // Simulate loading progress
+            let progress = 0;
+            const loadingInterval = setInterval(() => {
+                progress += Math.random() * 10;
+                if (progress >= 100) {
+                    progress = 100;
+                    clearInterval(loadingInterval);
+                    
+                    document.getElementById('loading-bar').style.width = '100%';
+                    
+                    setTimeout(() => {
+                        document.getElementById('loading-screen').style.opacity = '0';
+                        setTimeout(() => {
+                            document.getElementById('loading-screen').style.display = 'none';
+                            
+                            // Trigger confetti after loading
+                            triggerConfetti();
+                        }, 1000);
+                    }, 300);
+                } else {
+                    document.getElementById('loading-bar').style.width = progress + '%';
+                }
+            }, 100);
+        });
+        
+        // Countdown Timer
+        function updateCountdown() {
+            const now = new Date();
+            const nikahDate = new Date('May 15, 2026 15:00:00');
+            const timeLeft = nikahDate - now;
+            
+            if (timeLeft <= 0) {
+                document.getElementById('countdown-days').textContent = '00';
+                document.getElementById('countdown-hours').textContent = '00';
+                document.getElementById('countdown-minutes').textContent = '00';
+                document.getElementById('countdown-seconds').textContent = '00';
+                return;
+            }
+            
+            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+            
+            document.getElementById('countdown-days').textContent = days.toString().padStart(2, '0');
+            document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0');
+            document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0');
+            document.getElementById('countdown-seconds').textContent = seconds.toString().padStart(2, '0');
+            
+            // Update progress bar
+            const totalDays = Math.ceil((nikahDate - new Date('January 1, 2026')) / (1000 * 60 * 60 * 24));
+            const daysPassed = totalDays - days;
+            const progressPercentage = (daysPassed / totalDays) * 100;
+            document.getElementById('progress-bar').style.width = Math.min(progressPercentage, 100) + '%';
+        }
+        
+        setInterval(updateCountdown, 1000);
+        updateCountdown();
+        
+        // Theme Switcher
+        const themeSelectors = document.querySelectorAll('.theme-selector');
+        
+        themeSelectors.forEach(selector => {
+            selector.addEventListener('click', function() {
+                const theme = this.getAttribute('data-theme');
+                
+                // Remove active class from all selectors
+                themeSelectors.forEach(el => el.classList.remove('active-theme'));
+                
+                // Add active class to clicked selector
+                this.classList.add('active-theme');
+                
+                // Apply theme to body
+                document.body.className = '';
+                document.body.classList.add(theme);
+            });
+        });
+        
+        // Floating Elements Animation
+        function createFloatingElements() {
+            const container = document.getElementById('floating-elements');
+            const types = ['🌸', '🌙', '✨', '🕌', '📿'];
+            
+            for (let i = 0; i < 20; i++) {
+                const element = document.createElement('div');
+                element.className = 'petal';
+                element.innerHTML = types[Math.floor(Math.random() * types.length)];
+                element.style.left = Math.random() * 100 + 'vw';
+                element.style.animationDuration = Math.random() * 5 + 5 + 's';
+                element.style.animationDelay = Math.random() * 5 + 's';
+                element.style.fontSize = Math.random() * 20 + 10 + 'px';
+                container.appendChild(element);
+            }
+        }
+        
+        createFloatingElements();
+        
+        // Music Toggle
+        const musicToggle = document.getElementById('music-toggle');
+        const backgroundMusic = document.getElementById('background-music');
+        let isMusicPlaying = false;
+        
+        musicToggle.addEventListener('click', function() {
+            if (isMusicPlaying) {
+                backgroundMusic.pause();
+                musicToggle.innerHTML = '<i data-feather="music"></i>';
+                feather.replace();
+            } else {
+                backgroundMusic.play();
+                musicToggle.innerHTML = '<i data-feather="pause"></i>';
+                feather.replace();
+            }
+            isMusicPlaying = !isMusicPlaying;
+        });
+        
+        // Map Modal
+        const mapButtons = document.querySelectorAll('[id^="view-map"], [id^="add-to-calendar"]');
+        const mapModal = document.getElementById('map-modal');
+        const closeMap = document.getElementById('close-map');
+        
+        mapButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                if (this.id.includes('map')) {
+                    mapModal.classList.remove('hidden');
+                }
+            });
+        });
+        
+        closeMap.addEventListener('click', function() {
+            mapModal.classList.add('hidden');
+        });
+        
+        // RSVP Form
+        const rsvpForm = document.getElementById('rsvp-form');
+        const rsvpSuccessModal = document.getElementById('rsvp-success');
+        const closeRsvpSuccess = document.getElementById('close-rsvp-success');
+        
+        rsvpForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // In a real app, you would send this data to a server
+            // For now, we'll just show the success modal
+            rsvpSuccessModal.classList.remove('hidden');
+            triggerConfetti();
+        });
+        
+        closeRsvpSuccess.addEventListener('click', function() {
+            rsvpSuccessModal.classList.add('hidden');
+        });
+        
+        // Guestbook
+        const guestbookForm = document.getElementById('guestbook-form');
+        const guestbookInput = document.getElementById('guestbook-input');
+        const guestbookMessages = document.getElementById('guestbook-messages');
+        
+        // Load messages from localStorage
+        function loadGuestbookMessages() {
+            const messages = JSON.parse(localStorage.getItem('guestbookMessages')) || [];
+            
+            guestbookMessages.innerHTML = '';
+            
+            messages.forEach(message => {
+                const messageElement = document.createElement('div');
+                messageElement.className = 'guestbook-message bg-gray-50 p-4 rounded-lg';
+                messageElement.innerHTML = `
+                    <p class="font-medium">${message.name}</p>
+                    <p class="text-gray-700 mt-1">${message.text}</p>
+                    <p class="text-xs text-gray-500 mt-2">${message.date}</p>
+                `;
+                guestbookMessages.appendChild(messageElement);
+            });
+        }
+        
+        guestbookForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const messageText = guestbookInput.value.trim();
+            if (!messageText) return;
+            
+            // Get existing messages
+            const messages = JSON.parse(localStorage.getItem('guestbookMessages')) || [];
+            
+            // Add new message
+            messages.push({
+                name: 'Guest',
+                text: messageText,
+                date: new Date().toLocaleDateString()
+            });
+            
+            // Save to localStorage
+            localStorage.setItem('guestbookMessages', JSON.stringify(messages));
+            
+            // Reload messages
+            loadGuestbookMessages();
+            
+            // Clear input
+            guestbookInput.value = '';
+        });
+        
+        loadGuestbookMessages();
+        
+        // Print Button
+        const printButton = document.getElementById('print-btn');
+        
+        printButton.addEventListener('click', function() {
+            window.print();
+        });
+        
+        // Share Button
+        const shareButton = document.getElementById('share-btn');
+        
+        shareButton.addEventListener('click', function() {
+            if (navigator.share) {
+                navigator.share({
+                    title: 'Yaseen & Noor Wedding Invitation',
+                    text: 'Join us in celebrating the union of Yaseen Shaikh and Noor Fatima',
+                    url: window.location.href
+                }).catch(err => {
+                    console.log('Error sharing:', err);
+                });
+            } else {
+                // Fallback for browsers that don't support Web Share API
+                alert('Web Share API not supported in your browser. Please copy the URL manually.');
+            }
+        });
+        
+        // Confetti Effect
+        function triggerConfetti() {
+            const canvas = document.getElementById('confetti-canvas');
+            canvas.style.display = 'block';
+            
+            // Confetti settings
+            const confettiSettings = {
+                target: 'confetti-canvas',
+                max: 150,
+                size: 1.5,
+                animate: true,
+                props: ['circle', 'square', 'triangle', 'line'],
+                colors: [[255, 215, 0], [192, 192, 192], [255, 255, 255], [218, 165, 32]],
+                clock: 50,
+                rotate: true,
+                start_from_edge: true,
+                respawn: false
+            };
+            
+            const confetti = new ConfettiGenerator(confettiSettings);
+            confetti.render();
+            
+            setTimeout(() => {
+                confetti.clear();
+                canvas.style.display = 'none';
+            }, 3000);
+        }
+        
+        // Easter Egg - Click on lanterns to light them
+        const lanterns = document.querySelectorAll('.lantern');
+        
+        lanterns.forEach(lantern => {
+            lantern.addEventListener('click', function() {
+                if (this.textContent === '🏮') {
+                    this.textContent = '🪔';
+                    this.style.filter = 'drop-shadow(0 0 15px rgba(255, 100, 0, 0.9))';
+                } else {
+                    this.textContent = '🏮';
+                    this.style.filter = 'drop-shadow(0 0 10px rgba(212, 175, 55, 0.9))';
+                }
+            });
+        });
+        
+        // 3D Tilt Effect
+        const cards = document.querySelectorAll('.card-hover');
+        
+        cards.forEach(card => {
+            card.addEventListener('mousemove', (e) => {
+                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+                card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+            });
+            
+            card.addEventListener('mouseenter', () => {
+                card.style.transition = 'none';
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                card.style.transition = 'all 0.5s ease';
+                card.style.transform = 'rotateY(0deg) rotateX(0deg)';
+            });
+        });
+    </script>
+    
+    <!-- Confetti JS -->
+    <script src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.18/dist/index.min.js"></script>
+    
+    <!-- Initialize everything when DOM is loaded -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // All initialization is already in the script above
+        });
+    </script>
+</body>
 </html>