diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000000000000000000000000000000000000..5a4ea6ff310950b329d473c987a8859599249578 --- /dev/null +++ b/static/script.js @@ -0,0 +1,12 @@ +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 diff --git a/wiki/pages/style.css b/wiki/pages/style.css new file mode 100644 index 0000000000000000000000000000000000000000..82e79a6a0bab0fb492534fb3c5ae191ddf255dd2 --- /dev/null +++ b/wiki/pages/style.css @@ -0,0 +1,43 @@ +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 diff --git a/wiki/pages/tryhomepage.html b/wiki/pages/tryhomepage.html new file mode 100644 index 0000000000000000000000000000000000000000..b541da2785487c8c33487071e4e50ed452585e82 --- /dev/null +++ b/wiki/pages/tryhomepage.html @@ -0,0 +1,18 @@ +<!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>