Spaces:

Sheikhsiraj
/

card

Running

App Files Files Community

Sheikhsiraj commited on Sep 1, 2025

Commit

d43cc4e

verified ·

1 Parent(s): ef56c41

Draft a Wedding Card for Following data

Browse files

Yaseen Shaikh and Noor Fatima are getting married, Yaseen father name is Alauddin Shaikh and Noor father name is Obaida Shaikh. create a very attractive and beautiful designed card. And add all features according to you. Do whatever you want but just create a very detailed Card, They are have nikah in 15 May and Walimah in 18 May 2026 ok? And In mumbai Govandi Karbala hall for walimah and Haqqani Masjid for nikah in Govandi location, after namaz 3 Pm and For walimah time it's 7-12 raat me. And more and more features according to you and do whatever you want think very deep but create a wedding card in detail and good looking style also Islamic style. Now write a Html css javascript or bootstrap code at one file ok? Write all code at one file. Now generate it.
Add More and more animations possible, Make it more and more interactive, colourful, design, Modern style, Highly Good looking, With all features and also add extra features according to you to make it best wedding card. Also write a Beautiful love story about them. According to you, I just wrote idea about it. They meet in video game, And Remember add each and every detailed wherever possible and add and every Style to make it Best Wedding Card, And also Make it Islamic structure, And very stylish, animated, colourful, also contains countdown aslo style in everywhere, animation lightning colourful, and add more and more things according to you and do whatever make it best wedding card. Think very deep and Write a code for it. Remember add every posible effect and animation according to you and it should be Modest style card. - Initial Deployment

Files changed (2) hide show

README.md +7 -5
index.html +543 -18

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Card
-emoji: 🐢
-colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: card
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,544 @@
-<!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>
 </html>

+<!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>
+    <link rel="icon" type="image/x-icon" href="https://emojicdn.elk.sh/👰">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        .islamic-pattern {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(255,215,0,0.2)" stroke-width="1"/><path d="M50 0 L50 100 M0 50 L100 50" stroke="rgba(255,215,0,0.2)" stroke-width="1"/></svg>');
+            background-size: 100px 100px;
+        }
+        .curved-text {
+            font-family: 'Great Vibes', cursive;
+        }
+        .gold-gradient {
+            background: linear-gradient(135deg, #D4AF37 0%, #F9D423 100%);
+        }
+        .glow {
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-b from-indigo-900 to-purple-900 text-white font-sans overflow-x-hidden">
+    <!-- Preloader -->
+    <div class="fixed inset-0 bg-black z-50 flex items-center justify-center" id="preloader">
+        <div class="text-center">
+            <div class="w-20 h-20 border-4 border-gold-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+            <p class="mt-4 text-xl gold-gradient bg-clip-text text-transparent">Loading Blessings...</p>
+        </div>
+    </div>
+    <!-- Main Container -->
+    <div class="max-w-4xl mx-auto px-4 py-8 relative overflow-hidden">
+        <!-- Islamic Border -->
+        <div class="absolute inset-0 border-8 border-transparent border-image border-image-slice-8 border-image-source-[url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"none\" stroke=\"%23D4AF37\" stroke-width=\"8\" rx=\"10\"/></svg>')] pointer-events-none"></div>
+        <!-- Header Section -->
+        <header class="text-center py-12 relative">
+            <div class="absolute top-0 left-0 right-0 h-1 gold-gradient"></div>
+            <h1 class="text-5xl md:text-7xl font-bold mb-4 curved-text glow" data-aos="fade-down">
+                Yaseen <span class="text-yellow-300">&</span> Noor
+            </h1>
+            <p class="text-xl md:text-2xl mb-6 text-yellow-200" data-aos="fade-up" data-aos-delay="200">
+                Are Tying The Knot
+            </p>
+            <div class="w-32 h-32 mx-auto rounded-full border-4 border-yellow-300 overflow-hidden shadow-lg shadow-yellow-500/30" data-aos="zoom-in">
+                <div class="w-full h-full bg-gradient-to-br from-yellow-200 to-yellow-500 flex items-center justify-center">
+                    <i data-feather="heart" class="w-16 h-16 text-red-500"></i>
+                </div>
+            </div>
+            <div class="mt-8" data-aos="fade-up" data-aos-delay="400">
+                <p class="text-lg text-yellow-200">With the blessings of Allah</p>
+                <p class="text-lg text-yellow-200">and our beloved families</p>
+            </div>
+        </header>
+        <!-- Countdown -->
+        <section class="py-8 text-center islamic-pattern rounded-xl shadow-lg my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-yellow-300">Countdown to Our Nikah</h2>
+            <div class="grid grid-cols-4 gap-4 max-w-md mx-auto">
+                <div class="bg-white/10 rounded-lg p-4 shadow-lg" data-aos="flip-left">
+                    <div class="text-3xl font-bold countdown-days text-yellow-300">00</div>
+                    <div class="text-sm mt-2">Days</div>
+                </div>
+                <div class="bg-white/10 rounded-lg p-4 shadow-lg" data-aos="flip-left" data-aos-delay="100">
+                    <div class="text-3xl font-bold countdown-hours text-yellow-300">00</div>
+                    <div class="text-sm mt-2">Hours</div>
+                </div>
+                <div class="bg-white/10 rounded-lg p-4 shadow-lg" data-aos="flip-left" data-aos-delay="200">
+                    <div class="text-3xl font-bold countdown-minutes text-yellow-300">00</div>
+                    <div class="text-sm mt-2">Minutes</div>
+                </div>
+                <div class="bg-white/10 rounded-lg p-4 shadow-lg" data-aos="flip-left" data-aos-delay="300">
+                    <div class="text-3xl font-bold countdown-seconds text-yellow-300">00</div>
+                    <div class="text-sm mt-2">Seconds</div>
+                </div>
+            </div>
+        </section>
+        <!-- Love Story -->
+        <section class="py-8 bg-white/5 backdrop-blur-sm rounded-xl shadow-lg my-8 p-6" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center text-yellow-300">Our Love Story</h2>
+            <div class="flex flex-col md:flex-row items-center gap-8">
+                <div class="w-full md:w-1/3" data-aos="fade-right">
+                    <div class="relative h-64 rounded-xl overflow-hidden shadow-lg">
+                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                            <i data-feather="cpu" class="w-16 h-16 text-white"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-full md:w-2/3" data-aos="fade-left">
+                    <p class="mb-4 leading-relaxed">
+                        In the vast digital universe, amidst pixels and virtual battles, two hearts found each other unexpectedly. Yaseen and Noor first crossed paths in an online game where teamwork was key to victory.
+                    </p>
+                    <p class="mb-4 leading-relaxed">
+                        What began as friendly competition soon blossomed into late-night conversations about life, dreams, and faith. Their virtual connection became real when they discovered they lived in the same city, both practicing Muslims with similar values.
+                    </p>
+                    <p class="leading-relaxed">
+                        With the approval of their families and countless prayers, their halal journey from online allies to life partners was written in the stars by Allah's divine plan.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- Event Details -->
+        <section class="py-8 my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center text-yellow-300">Wedding Events</h2>
+            <!-- Nikah -->
+            <div class="flex flex-col md:flex-row gap-8 mb-12">
+                <div class="w-full md:w-1/2 order-2 md:order-1" data-aos="fade-right">
+                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 h-full shadow-lg">
+                        <h3 class="text-xl md:text-2xl font-bold mb-4 text-yellow-300">Nikah Ceremony</h3>
+                        <div class="flex items-start mb-4">
+                            <i data-feather="calendar" class="w-5 h-5 mr-3 text-yellow-300 mt-1"></i>
+                            <div>
+                                <p class="font-medium">Friday, 15th May 2026</p>
+                                <p class="text-sm">After Zuhr Prayer (3:00 PM)</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start mb-4">
+                            <i data-feather="map-pin" class="w-5 h-5 mr-3 text-yellow-300 mt-1"></i>
+                            <div>
+                                <p class="font-medium">Haqqani Masjid</p>
+                                <p class="text-sm">Govandi, Mumbai</p>
+                            </div>
+                        </div>
+                        <p class="text-sm italic text-yellow-200 mt-4">
+                            "And one of His signs is that He created for you spouses from among yourselves so that you may find comfort in them. And He has placed between you compassion and mercy. Surely in this are signs for people who reflect." (Quran 30:21)
+                        </p>
+                    </div>
+                </div>
+                <div class="w-full md:w-1/2 order-1 md:order-2" data-aos="fade-left">
+                    <div class="relative h-full min-h-64 rounded-xl overflow-hidden shadow-lg floating">
+                        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-700 flex items-center justify-center">
+                            <i data-feather="book-open" class="w-16 h-16 text-white"></i>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 bg-black/50 p-4">
+                            <h3 class="text-xl font-bold text-white">Sacred Union</h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Walimah -->
+            <div class="flex flex-col md:flex-row gap-8">
+                <div class="w-full md:w-1/2" data-aos="fade-right">
+                    <div class="relative h-full min-h-64 rounded-xl overflow-hidden shadow-lg floating">
+                        <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center">
+                            <i data-feather="feather" class="w-16 h-16 text-white"></i>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 bg-black/50 p-4">
+                            <h3 class="text-xl font-bold text-white">Celebration Feast</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-full md:w-1/2" data-aos="fade-left">
+                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 h-full shadow-lg">
+                        <h3 class="text-xl md:text-2xl font-bold mb-4 text-yellow-300">Walimah Reception</h3>
+                        <div class="flex items-start mb-4">
+                            <i data-feather="calendar" class="w-5 h-5 mr-3 text-yellow-300 mt-1"></i>
+                            <div>
+                                <p class="font-medium">Monday, 18th May 2026</p>
+                                <p class="text-sm">7:00 PM to 12:00 AM</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start mb-4">
+                            <i data-feather="map-pin" class="w-5 h-5 mr-3 text-yellow-300 mt-1"></i>
+                            <div>
+                                <p class="font-medium">Karbala Hall</p>
+                                <p class="text-sm">Govandi, Mumbai</p>
+                            </div>
+                        </div>
+                        <p class="text-sm italic text-yellow-200 mt-4">
+                            "The Prophet (peace be upon him) said: 'The worst of feasts are those of the walimah to which the rich are invited and the poor are left out.'" (Bukhari)
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Family Section -->
+        <section class="py-8 bg-white/5 backdrop-blur-sm rounded-xl shadow-lg my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center text-yellow-300">With Blessings From</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="text-center" data-aos="fade-right">
+                    <div class="w-24 h-24 mx-auto rounded-full border-4 border-yellow-300 overflow-hidden shadow-lg shadow-yellow-500/30 mb-4">
+                        <div class="w-full h-full bg-gradient-to-br from-blue-200 to-blue-400 flex items-center justify-center">
+                            <i data-feather="user" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1">Alauddin Shaikh</h3>
+                    <p class="text-yellow-200">Father of the Groom</p>
+                </div>
+                <div class="text-center" data-aos="fade-left">
+                    <div class="w-24 h-24 mx-auto rounded-full border-4 border-yellow-300 overflow-hidden shadow-lg shadow-yellow-500/30 mb-4">
+                        <div class="w-full h-full bg-gradient-to-br from-pink-200 to-pink-400 flex items-center justify-center">
+                            <i data-feather="user" class="w-10 h-10 text-white"></i>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-bold mb-1">Obaida Shaikh</h3>
+                    <p class="text-yellow-200">Father of the Bride</p>
+                </div>
+            </div>
+        </section>
+        <!-- Map Section -->
+        <section class="py-8 my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center text-yellow-300">Venue Location</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg" data-aos="fade-right">
+                    <h3 class="text-xl font-bold mb-4 text-yellow-300">Nikah Venue</h3>
+                    <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden shadow-lg">
+                        <div class="bg-gradient-to-br from-blue-200 to-blue-500 h-full flex items-center justify-center">
+                            <i data-feather="map" class="w-16 h-16 text-white"></i>
+                        </div>
+                    </div>
+                    <p class="mt-4 font-medium">Haqqani Masjid, Govandi</p>
+                    <p class="text-sm">Landmark: Near Govandi Railway Station</p>
+                </div>
+                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg" data-aos="fade-left">
+                    <h3 class="text-xl font-bold mb-4 text-yellow-300">Walimah Venue</h3>
+                    <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden shadow-lg">
+                        <div class="bg-gradient-to-br from-pink-200 to-pink-500 h-full flex items-center justify-center">
+                            <i data-feather="map" class="w-16 h-16 text-white"></i>
+                        </div>
+                    </div>
+                    <p class="mt-4 font-medium">Karbala Hall, Govandi</p>
+                    <p class="text-sm">Landmark: Opposite Municipal Garden</p>
+                </div>
+            </div>
+        </section>
+        <!-- RSVP -->
+        <section class="py-8 bg-yellow-500/10 backdrop-blur-sm rounded-xl shadow-lg my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center text-yellow-300">Kindly Respond</h2>
+            <form class="max-w-md mx-auto">
+                <div class="mb-4">
+                    <label class="block mb-2 text-yellow-200">Your Name</label>
+                    <input type="text" class="w-full bg-white/20 border border-yellow-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:border-transparent">
+                </div>
+                <div class="mb-4">
+                    <label class="block mb-2 text-yellow-200">Will you attend?</label>
+                    <div class="flex items-center space-x-4">
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="attendance" checked class="text-yellow-500">
+                            <span class="ml-2">Yes, Insha'Allah</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="attendance" class="text-yellow-500">
+                            <span class="ml-2">Regretfully No</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block mb-2 text-yellow-200">Number of Guests</label>
+                    <select class="w-full bg-white/20 border border-yellow-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:border-transparent">
+                        <option>1</option>
+                        <option>2</option>
+                        <option>3</option>
+                        <option>4</option>
+                        <option>5+</option>
+                    </select>
+                </div>
+                <button type="submit" class="w-full gold-gradient text-black font-bold py-3 px-4 rounded-lg hover:opacity-90 transition duration-300 shadow-lg">
+                    Submit Response <i data-feather="send" class="w-4 h-4 inline ml-2"></i>
+                </button>
+            </form>
+        </section>
+        <!-- Islamic Quotes Carousel -->
+        <section class="py-8 my-8" data-aos="fade-up">
+            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 shadow-lg">
+                <div class="text-center">
+                    <i data-feather="quote" class="w-8 h-8 text-yellow-300 mx-auto mb-4"></i>
+                    <div class="relative">
+                        <div class="overflow-hidden">
+                            <div id="quotes-carousel" class="flex transition-transform duration-500">
+                                <div class="w-full flex-shrink-0 px-4">
+                                    <p class="text-lg italic leading-relaxed text-center">
+                                        "And among His signs is that He created for you spouses from among yourselves, that you may dwell in tranquility with them, and He has put love and mercy between your hearts. Verily in that are signs for those who reflect."
+                                    </p>
+                                    <p class="text-sm text-yellow-200 mt-4">- Quran (30:21)</p>
+                                </div>
+                                <div class="w-full flex-shrink-0 px-4">
+                                    <p class="text-lg italic leading-relaxed text-center">
+                                        "The best of you are those who are best to their wives, and I am the best of you to my wives."
+                                    </p>
+                                    <p class="text-sm text-yellow-200 mt-4">- Prophet Muhammad (SAW)</p>
+                                </div>
+                                <div class="w-full flex-shrink-0 px-4">
+                                    <p class="text-lg italic leading-relaxed text-center">
+                                        "When a man marries, he has fulfilled half of his religion, so let him fear Allah regarding the remaining half."
+                                    </p>
+                                    <p class="text-sm text-yellow-200 mt-4">- Hadith</p>
+                                </div>
+                            </div>
+                        </div>
+                        <button class="absolute left-0 top-1/2 transform -translate-y-1/2 -ml-4 bg-white/20 p-2 rounded-full hover:bg-yellow-500 transition">
+                            <i data-feather="chevron-left" class="w-4 h-4"></i>
+                        </button>
+                        <button class="absolute right-0 top-1/2 transform -translate-y-1/2 -mr-4 bg-white/20 p-2 rounded-full hover:bg-yellow-500 transition">
+                            <i data-feather="chevron-right" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                    <div class="flex justify-center mt-6 space-x-2">
+                        <button class="w-2 h-2 rounded-full bg-yellow-300 opacity-100"></button>
+                        <button class="w-2 h-2 rounded-full bg-yellow-300 opacity-50"></button>
+                        <button class="w-2 h-2 rounded-full bg-yellow-300 opacity-50"></button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Gallery -->
+        <section class="py-8 my-8" data-aos="fade-up">
+            <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center text-yellow-300">Memories</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                <div class="relative aspect-square rounded-xl overflow-hidden shadow-lg hover:scale-105 transition-transform duration-300" data-aos="zoom-in">
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center">
+                        <i data-feather="image" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <div class="relative aspect-square rounded-xl overflow-hidden shadow-lg hover:scale-105 transition-transform duration-300" data-aos="zoom-in" data-aos-delay="100">
+                    <div class="absolute inset-0 bg-gradient-to-br from-pink-400 to-red-500 flex items-center justify-center">
+                        <i data-feather="image" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+                <div class="relative aspect-square rounded-xl overflow-hidden shadow-lg hover:scale-105 transition-transform duration-300" data-aos="zoom-in" data-aos-delay="200">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 flex items-center justify-center">
+                        <i data-feather="image" class="w-10 h-10 text-white"></i>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="py-8 text-center border-t border-yellow-300/20 mt-12">
+            <p class="text-yellow-200 mb-4">We humbly request your prayers for our blessed union</p>
+            <div class="flex justify-center space-x-6 mb-6">
+                <a href="#" class="text-yellow-300 hover:text-white transition">
+                    <i data-feather="phone" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="text-yellow-300 hover:text-white transition">
+                    <i data-feather="mail" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="text-yellow-300 hover:text-white transition">
+                    <i data-feather="map-pin" class="w-5 h-5"></i>
+                </a>
+            </div>
+            <p class="text-sm text-yellow-300/70">
+                "May Allah bless us and grant us a marriage filled with love, mercy, and tranquility. Ameen."
+            </p>
+        </footer>
+    </div>
+    <!-- Floating Elements -->
+    <div class="fixed top-20 left-10 w-8 h-8 rounded-full bg-yellow-300/30 animate-pulse" style="animation-delay: 0.5s;"></div>
+    <div class="fixed bottom-1/4 right-16 w-12 h-12 rounded-full bg-yellow-300/20 animate-pulse" style="animation-delay: 1s;"></div>
+    <div class="fixed top-1/3 right-1/4 w-6 h-6 rounded-full bg-yellow-300/40 animate-pulse" style="animation-delay: 1.5s;"></div>
+    <!-- Confetti Canvas -->
+    <canvas id="confetti-canvas" class="fixed inset-0 pointer-events-none z-50"></canvas>
+    <script>
+        // Initialize AOS
+        AOS.init({
+            duration: 1000,
+            once: true
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Preloader
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                document.getElementById('preloader').classList.add('opacity-0', 'pointer-events-none');
+                setTimeout(function() {
+                    document.getElementById('preloader').style.display = 'none';
+                }, 500);
+            }, 1500);
+        });
+        // Countdown Timer
+        function updateCountdown() {
+            const nikahDate = new Date('May 15, 2026 15:00:00').getTime();
+            const now = new Date().getTime();
+            const distance = nikahDate - now;
+            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+            document.querySelector('.countdown-days').textContent = days;
+            document.querySelector('.countdown-hours').textContent = hours;
+            document.querySelector('.countdown-minutes').textContent = minutes;
+            document.querySelector('.countdown-seconds').textContent = seconds;
+        }
+        setInterval(updateCountdown, 1000);
+        updateCountdown();
+        // Quotes Carousel
+        let currentQuote = 0;
+        const quotes = document.getElementById('quotes-carousel');
+        const quoteItems = quotes.querySelectorAll('div');
+        const totalQuotes = quoteItems.length;
+        function showQuote(index) {
+            quotes.style.transform = `translateX(-${index * 100}%)`;
+            document.querySelectorAll('#quotes-carousel + div button').forEach((btn, i) => {
+                btn.classList.toggle('opacity-50', i !== index);
+                btn.classList.toggle('opacity-100', i === index);
+            });
+        }
+        document.querySelectorAll('#quotes-carousel + div button').forEach((btn, index) => {
+            btn.addEventListener('click', () => {
+                currentQuote = index;
+                showQuote(currentQuote);
+            });
+        });
+        document.querySelectorAll('.absolute button').forEach(btn => {
+            btn.addEventListener('click', () => {
+                if (btn.querySelector('i').getAttribute('data-feather') === 'chevron-left') {
+                    currentQuote = (currentQuote - 1 + totalQuotes) % totalQuotes;
+                } else {
+                    currentQuote = (currentQuote + 1) % totalQuotes;
+                }
+                showQuote(currentQuote);
+            });
+        });
+        // Auto rotate quotes
+        setInterval(() => {
+            currentQuote = (currentQuote + 1) % totalQuotes;
+            showQuote(currentQuote);
+        }, 8000);
+        // Confetti Animation
+        const confettiCanvas = document.getElementById('confetti-canvas');
+        if (confettiCanvas) {
+            confettiCanvas.width = window.innerWidth;
+            confettiCanvas.height = window.innerHeight;
+            const confettiSettings = {
+                target: 'confetti-canvas',
+                max: 30,
+                size: 1.5,
+                animate: true,
+                props: ['circle', 'square', 'triangle', 'line'],
+                colors: [[255, 215, 0], [255, 255, 255], [0, 191, 255], [255, 20, 147]],
+                clock: 25,
+                rotate: true,
+                start_from_edge: true,
+                respawn: true
+            };
+            const confetti = new ConfettiGenerator(confettiSettings);
+            confetti.render();
+            // Only show confetti when scrolled to certain sections
+            let confettiActive = false;
+            window.addEventListener('scroll', function() {
+                const scrollPosition = window.scrollY;
+                const windowHeight = window.innerHeight;
+                // Show confetti when reaching the header
+                if (scrollPosition < windowHeight && !confettiActive) {
+                    confettiActive = true;
+                    confettiCanvas.style.opacity = '1';
+                } else if (scrollPosition >= windowHeight && confettiActive) {
+                    confettiActive = false;
+                    confettiCanvas.style.opacity = '0';
+                }
+            });
+        }
+        // Floating animation for elements with .floating class
+        document.querySelectorAll('.floating').forEach(el => {
+            anime({
+                targets: el,
+                translateY: [-15, 15],
+                duration: 3000,
+                direction: 'alternate',
+                easing: 'easeInOutSine',
+                loop: true
+            });
+        });
+        // Scroll reveal animations
+        document.querySelectorAll('[data-aos]').forEach(el => {
+            el.addEventListener('mouseenter', () => {
+                anime({
+                    targets: el,
+                    scale: [1, 1.05],
+                    duration: 500,
+                    easing: 'easeInOutQuad'
+                });
+            });
+            el.addEventListener('mouseleave', () => {
+                anime({
+                    targets: el,
+                    scale: [1.05, 1],
+                    duration: 500,
+                    easing: 'easeInOutQuad'
+                });
+            });
+        });
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
+    <script>
+        // Confetti on click
+        document.addEventListener('click', function() {
+            confetti({
+                particleCount: 100,
+                spread: 70,
+                origin: { y: 0.6 },
+                colors: ['#D4AF37', '#FFFFFF', '#FF1493']
+            });
+        });
+    </script>
+</body>
 </html>