Merge pull request #1 from DanFitzgibbon/feature/birthday-card

Add Birthday Card for 2024
DanFitzgibbon · Aug 14, 2024 · e4cb4ad · e4cb4ad
2 parents c95aa04 + 4276b0e
commit e4cb4ad
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 0 deletions.
diff --git a/card/AnimateDiff_00021.gif:Zone.Identifier b/card/AnimateDiff_00021.gif:Zone.Identifier
diff --git a/card/gift.gif b/card/gift.gif
diff --git a/card/index.html b/card/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gift Website</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="gif-container">
+        <img id="gift-gif" src="gift.gif" alt="Gift GIF">
+    </div>
+    <div class="present-container">
+        <img id="gift-image" src="" alt="Gift Image">
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/card/opened-gift.gif b/card/opened-gift.gif
diff --git a/card/script.js b/card/script.js
@@ -0,0 +1,19 @@
+const gif = document.getElementById('gift-gif');
+const presentContainer = document.querySelector('.present-container');
+const giftImage = document.getElementById('gift-image');
+
+gif.addEventListener('click', () => {
+    gif.style.display = 'none';
+    presentContainer.style.display = 'block';
+
+    // Animation for opening the gift image
+    setTimeout(() => {
+        giftImage.src = 'opened-gift.gif';
+    }, 500); // delay for 0.5 seconds
+
+    // Repeat the animation every second
+    setInterval(() => {
+        const newSrc = giftImage.src === 'opened-gift.gif' ? 'gift.gif' : 'opened-gift.gif';
+        giftImage.src = newSrc;
+    }, 1000);
+});
diff --git a/card/style.css b/card/style.css
@@ -0,0 +1,19 @@
+.gif-container {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#gift-gif, #gift-image {
+    margin: 0 auto;
+}
+
+.present-container {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}