Update 3 files

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

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

static/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('https://static.igem.wiki/teams/5187/untie.png'); /* 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

wiki/pages/tryhomepage.html

@@ -13,6 +13,63 @@
     <div class="scent"></div>
   </div>
 
-  <script src="script.js"></script>
+  <script>
+  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');
+  });
+  </script>
+
+  <style>
+    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('https://static.igem.wiki/teams/5187/untie.png'); /* 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);
+  }
+  
+  </style>
 </body>
 </html>
\ No newline at end of file