diff --git a/wiki/pages/tryhomepage.html b/wiki/pages/tryhomepage.html
index c711a08b7180bac371270073f05daf6a75290c03..43d811ea9065e6ec8386c19a48a3a952bea3d98f 100644
--- a/wiki/pages/tryhomepage.html
+++ b/wiki/pages/tryhomepage.html
@@ -4,74 +4,69 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sachet Animation</title>
-
<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);
- }
-
+ 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 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>
</head>
-
<body>
<div class="sachet">
- <img src="https://static.igem.wiki/teams/5187/tie.png" alt="Tied Sachet" class="bag tied">
+ <img src="tied-sachet.svg" alt="Tied Sachet" class="bag tied">
<div class="scent"></div>
</div>
-</body>
-<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>
+ <script>
+ document.querySelector('.sachet').addEventListener('click', function() {
+ const bag = document.querySelector('.bag');
+ const scent = document.querySelector('.scent');
-
-</html>
\ No newline at end of file
+ // Untie the bag
+ bag.classList.add('untied');
+
+ // Release the scent
+ scent.classList.add('release');
+ });
+ </script>
+</body>
+</html>