From 30c9b97f1ca61d6a9a0f6e19f3e29205a5f6f0cd Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 04:18:47 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 133 +++++++++++++++++++++----------------------
1 file changed, 65 insertions(+), 68 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 0408ecbd..c14b193d 100644
--- a/wiki/pages/home.html
+++ b/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>
--
GitLab