Update file home.html

wiki/pages/home.html

@@ -149,7 +149,7 @@
         margin: 20px;
       }
     }
-    
+
     .loader-container {
             position: fixed;
             top: 0;
@@ -168,7 +168,8 @@
             width: 150px;
             height: 150px;
         }
-        .line-container {
+
+       .line-container {
             position: absolute;
             top: 0;
             left: 0;
@@ -205,15 +206,15 @@
 
 <div class="line-container">
   <svg width="100%" height="100%" preserveAspectRatio="none">
-      <path class="line" id="line1" d="M0 0 Q 0 0, 0 0"/>
-      <path class="line" id="line2" d="M0 0 Q 0 0, 0 0"/>
-      <path class="line" id="line3" d="M0 0 Q 0 0, 0 0"/>
+      <path class="line" id="line1" d=""/>
+      <path class="line" id="line2" d=""/>
+      <path class="line" id="line3" d=""/>
   </svg>
 </div>
 
 <img id="sachet" src="https://static.igem.wiki/teams/5187/art/icon.png" alt="Sachet">
 
-
+<!-- Existing content -->
 <div id="menu">
   {% include 'menu.html' %}
 </div>
@@ -363,75 +364,71 @@
   </footer>
 </body>
 
-<script>
-  window.addEventListener('load', function() {
-  const loaderContainer = document.querySelector('.loader-container');
-  setTimeout(function() {
-    loaderContainer.style.opacity = '0';
-    loaderContainer.style.transition = 'opacity 0.5s ease';
-    setTimeout(() => {
-      loaderContainer.style.display = 'none';
-    }, 500);
-  }, 2000); // Hide after 2 seconds (adjust as needed)
-});
-// Animated lines
-const lines = document.querySelectorAll('.line');
-        const sachet = document.getElementById('sachet');
-        let mouseX = 0, mouseY = 0;
+<    <script>
+  // Animated lines with fixed paths
+  const lines = document.querySelectorAll('.line');
+  const sachet = document.getElementById('sachet');
+  let mouseX = 0, mouseY = 0;
 
-        function updateLines() {
-            const rect = sachet.getBoundingClientRect();
-            const sachetX = rect.left + rect.width / 2;
-            const sachetY = rect.top + rect.height / 2;
+  // Define fixed paths for each line
+  const fixedPaths = [
+      "M0,100 Q200,200 400,150 T800,300 T1200,200 T1600,250",
+      "M0,300 Q300,400 600,350 T1000,500 T1400,400 T1800,450",
+      "M0,500 Q400,600 800,550 T1200,700 T1600,600 T2000,650"
+  ];
 
-            lines.forEach((line, index) => {
-                const startX = Math.random() * window.innerWidth;
-                const startY = Math.random() * window.innerHeight;
-                const midX = (startX + sachetX) / 2 + (Math.random() - 0.5) * 200;
-                const midY = (startY + sachetY) / 2 + (Math.random() - 0.5) * 200;
+  function updateLines() {
+      const rect = sachet.getBoundingClientRect();
+      const sachetX = rect.left + rect.width / 2;
+      const sachetY = rect.top + rect.height / 2;
 
-                const path = `M${startX} ${startY} Q ${midX} ${midY}, ${sachetX} ${sachetY}`;
-                line.setAttribute('d', path);
-            });
-        }
+      lines.forEach((line, index) => {
+          let path = fixedPaths[index];
+          // Add a curve to the sachet at the end of each path
+          path += ` T${sachetX},${sachetY}`;
+          line.setAttribute('d', path);
+      });
+  }
 
-        function animateLines() {
-            updateLines();
-            requestAnimationFrame(animateLines);
-        }
+  function animateLines() {
+      updateLines();
+      requestAnimationFrame(animateLines);
+  }
 
-        animateLines();
+  window.addEventListener('resize', updateLines);
+  animateLines();
 
-        document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-            
-            lines.forEach((line) => {
-                const distanceX = mouseX - line.getBoundingClientRect().left;
-                const distanceY = mouseY - line.getBoundingClientRect().top;
-                const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
-                
-                if (distance < 100) {
-                    line.style.strokeWidth = 4;
-                    line.style.opacity = 1;
-                } else {
-                    line.style.strokeWidth = 2;
-                    line.style.opacity = 0.7;
-                }
-            });
-        });
+  document.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      
+      lines.forEach((line) => {
+          const lineRect = line.getBoundingClientRect();
+          const distanceX = mouseX - (lineRect.left + lineRect.width / 2);
+          const distanceY = mouseY - (lineRect.top + lineRect.height / 2);
+          const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+          
+          if (distance < 100) {
+              line.style.strokeWidth = 4;
+              line.style.opacity = 1;
+          } else {
+              line.style.strokeWidth = 2;
+              line.style.opacity = 0.7;
+          }
+      });
+  });
 
-        // Existing scripts
-        window.addEventListener('load', function() {
-            const loaderContainer = document.querySelector('.loader-container');
-            setTimeout(function() {
-                loaderContainer.style.opacity = '0';
-                loaderContainer.style.transition = 'opacity 0.5s ease';
-                setTimeout(() => {
-                    loaderContainer.style.display = 'none';
-                }, 500);
-            }, 2000);
-        });
+  // Existing scripts
+  window.addEventListener('load', function() {
+      const loaderContainer = document.querySelector('.loader-container');
+      setTimeout(function() {
+          loaderContainer.style.opacity = '0';
+          loaderContainer.style.transition = 'opacity 0.5s ease';
+          setTimeout(() => {
+              loaderContainer.style.display = 'none';
+          }, 500);
+      }, 2000);
+  });
 </script>
 </html>