Update 3 files

- /wiki/pages/tryhomepage.html - /wiki/pages/style.css - /static/script.js

Update 3 files
4ffb9897 · HauErn Lien · ea3c172d · 4ffb9897 · 4ffb9897 · 4ffb9897
Commit 4ffb9897 authored 5 months ago by HauErn Lien
--- a/static/script.js
+++ b/static/script.js
+document.querySelector('.sachet').addEventListener('click', function() {
+    const bag = document.querySelector('.bag');
+    const scent = document.querySelector('.scent');
+  
+    // Untie the bag
+    bag.classList.add('untied');
+  
+    // Release the scent
+    scent.classList.add('release');
+  });
+
+  
\ No newline at end of file
--- a/wiki/pages/style.css
+++ b/wiki/pages/style.css
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+  }
+  
+  .sachet {
+    position: relative;
+    width: 150px;
+    height: 200px;
+  }
+  
+  .bag {
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition: background-image 1s ease-in-out;
+  }
+  
+  .untied {
+    background-image: url('untied-sachet.svg'); /* Replace with your untied image */
+  }
+  
+  .scent {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: -50px;
+    left: 25px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 2s ease, transform 2s ease;
+  }
+  
+  .scent.release {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+  
\ No newline at end of file
--- a/wiki/pages/tryhomepage.html
+++ b/wiki/pages/tryhomepage.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sachet Animation</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="sachet">
+    <img src="tied-sachet.svg" alt="Tied Sachet" class="bag tied">
+    <div class="scent"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>