diff --git a/static/script.js b/static/script.js deleted file mode 100644 index 5a4ea6ff310950b329d473c987a8859599249578..0000000000000000000000000000000000000000 --- a/static/script.js +++ /dev/null @@ -1,12 +0,0 @@ -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/static/style.css b/static/style.css deleted file mode 100644 index 08cdcef57c3ce9f3588498a4ab5439fda1aa6774..0000000000000000000000000000000000000000 --- a/static/style.css +++ /dev/null @@ -1,43 +0,0 @@ -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 diff --git a/wiki/pages/tryhomepage.html b/wiki/pages/tryhomepage.html index cf593e4aa53ef4a6879cc9f381b8409646447e9c..95b733a8d0bece47314064ff791fbf10c212654d 100644 --- a/wiki/pages/tryhomepage.html +++ b/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