From 4ffb9897c10213232c4d671d78ad4b963316757e Mon Sep 17 00:00:00 2001
From: HauErn Lien <lienhe81@gmail.com>
Date: Mon, 30 Sep 2024 06:18:23 +0000
Subject: [PATCH] Update 3 files
- /wiki/pages/tryhomepage.html
- /wiki/pages/style.css
- /static/script.js
---
static/script.js | 12 +++++++++++
wiki/pages/style.css | 43 +++++++++++++++++++++++++++++++++++++
wiki/pages/tryhomepage.html | 18 ++++++++++++++++
3 files changed, 73 insertions(+)
create mode 100644 static/script.js
create mode 100644 wiki/pages/style.css
create mode 100644 wiki/pages/tryhomepage.html
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 00000000..5a4ea6ff
--- /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 00000000..82e79a6a
--- /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 00000000..b541da27
--- /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>
--
GitLab