diff --git a/card/AnimateDiff_00021.gif:Zone.Identifier b/card/AnimateDiff_00021.gif:Zone.Identifier new file mode 100644 index 0000000..e69de29 diff --git a/card/gift.gif b/card/gift.gif new file mode 100644 index 0000000..3b94855 Binary files /dev/null and b/card/gift.gif differ diff --git a/card/index.html b/card/index.html new file mode 100644 index 0000000..c0efa08 --- /dev/null +++ b/card/index.html @@ -0,0 +1,19 @@ + + + + + + Gift Website + + + +
+ Gift GIF +
+
+ Gift Image +
+ + + + \ No newline at end of file diff --git a/card/opened-gift.gif b/card/opened-gift.gif new file mode 100644 index 0000000..51aeaa3 Binary files /dev/null and b/card/opened-gift.gif differ diff --git a/card/script.js b/card/script.js new file mode 100644 index 0000000..6e167f8 --- /dev/null +++ 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); +}); \ No newline at end of file diff --git a/card/style.css b/card/style.css new file mode 100644 index 0000000..7491d85 --- /dev/null +++ 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%); +}