Create bd.html

birthday remainder
eliakimatamba · Sep 12, 2023 · 7b2bc74 · 7b2bc74
1 parent 7b76d30
commit 7b2bc74
Showing 1 changed file with 79 additions and 0 deletions.
diff --git a/bd.html b/bd.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Birthday Celebration Demo</title>
+    <style>
+        /* CSS for the celebration animation */
+        @keyframes confetti-fall {
+            from {
+                transform: translateY(0);
+            }
+            to {
+                transform: translateY(100vh);
+            }
+        }
+
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #FFD700; /* Yellow confetti color */
+            border-radius: 50%;
+            opacity: 0.8;
+        }
+    </style>
+</head>
+<body>
+    <section id="birthday-section">
+        <div id="birthday-reminder">
+            <p>It's my birthday today! 🎉🥳</p>
+            <p>Happy Birthday!</p>
+        </div>
+
+        <script>
+            // Get the current date
+            const currentDate = new Date();
+
+            // Set the birthdate (Change to your actual birthdate)
+            const birthdate = new Date('2000-01-15');
+
+            // Check if it's the birthday
+            if (currentDate.getMonth() === birthdate.getMonth() && currentDate.getDate() === birthdate.getDate()) {
+                // Display the birthday reminder
+                const birthdayReminder = document.getElementById('birthday-reminder');
+                birthdayReminder.style.display = 'block';
+
+                // Create confetti elements
+                const confettiContainer = document.createElement('div');
+                confettiContainer.style.position = 'fixed';
+                confettiContainer.style.top = '0';
+                confettiContainer.style.left = '0';
+                confettiContainer.style.width = '100%';
+                confettiContainer.style.height = '100%';
+                confettiContainer.style.pointerEvents = 'none';
+
+                // Randomize confetti celebration intervals for the day
+                const randomizeConfetti = () => {
+                    const confetti = document.createElement('div');
+                    confetti.className = 'confetti';
+                    confetti.style.left = Math.random() * 100 + 'vw';
+                    confetti.style.animationDuration = Math.random() * 3 + 2 + 's'; // Randomize animation duration
+                    confettiContainer.appendChild(confetti);
+
+                    // Schedule the next confetti drop
+                    const nextDelay = Math.random() * 2000; // Randomize the interval between confetti drops (up to 2 seconds)
+                    setTimeout(randomizeConfetti, nextDelay);
+                };
+
+                // Start the confetti celebration
+                randomizeConfetti();
+
+                // Append confetti to the document
+                document.body.appendChild(confettiContainer);
+            }
+        </script>
+    </section>
+</body>
+</html>