Update file home.html

wiki/pages/home.html

@@ -137,27 +137,40 @@
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
-      animation: float 2s ease-in-out infinite;
       z-index: 1000;
     }
-    .scroll-guide::after {
-      content: '';
+    .scroll-line {
+      position: fixed;
+      right: 50px;
+      top: 0;
+      bottom: 120px;
+      width: 10px;
+      background-color: rgba(255, 192, 203, 0.7);
+      border-radius: 5px;
+      z-index: 999;
+    }
+    .scroll-progress {
       position: absolute;
-      top: 100%;
+      bottom: 0;
+      width: 100%;
+      background-color: #FF69B4;
+      border-radius: 5px;
+      transition: height 0.3s;
+    }
+    .scroll-fragrance {
+      position: absolute;
+      bottom: 100%;
       left: 50%;
-      width: 20px;
-      height: 20px;
-      background: radial-gradient(circle, rgba(144,238,144,0.8) 0%, rgba(144,238,144,0) 70%);
+      transform: translateX(-50%);
+      width: 30px;
+      height: 30px;
+      background-color: #FF69B4;
       border-radius: 50%;
-      animation: release 2s ease-in-out infinite;
+      animation: float 2s ease-in-out infinite;
     }
     @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
-    }
-    @keyframes release {
-      0%, 100% { opacity: 0; transform: translate(-50%, 0); }
-      50% { opacity: 1; transform: translate(-50%, 10px); }
+      0%, 100% { transform: translate(-50%, 0); }
+      50% { transform: translate(-50%, -10px); }
     }
     .centered-text {
       text-align: center;
@@ -173,6 +186,10 @@
   {% include 'menu.html' %}
 
   <div class="scroll-guide"></div>
+  <div class="scroll-line">
+    <div class="scroll-progress"></div>
+    <div class="scroll-fragrance"></div>
+  </div>
 
   <div class="content-wrapper">
     <div class="content-block" onclick="showModal(this)">
@@ -261,14 +278,21 @@
 
     window.addEventListener('scroll', function() {
       var scrollGuide = document.querySelector('.scroll-guide');
+      var scrollLine = document.querySelector('.scroll-line');
+      var scrollProgress = document.querySelector('.scroll-progress');
       var scrollPosition = window.scrollY;
       var windowHeight = window.innerHeight;
       var documentHeight = document.documentElement.scrollHeight;
       
+      var scrollPercentage = (scrollPosition / (documentHeight - windowHeight)) * 100;
+      scrollProgress.style.height = scrollPercentage + '%';
+      
       if (scrollPosition + windowHeight >= documentHeight - 100) {
         scrollGuide.style.display = 'none';
+        scrollLine.style.display = 'none';
       } else {
         scrollGuide.style.display = 'block';
+        scrollLine.style.display = 'block';
       }
     });