Update file home.html

26d796b7 · HouTeng Chan · 765c9697 · 26d796b7
Commit 26d796b7 authored 6 months ago by HouTeng Chan
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -6,28 +6,139 @@
  <link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
  <title>Tsinghua - IGEM 2024</title>
  <style>
-    body {
-      font-family: Arial, sans-serif;
-      line-height: 1.6;
+    body, html {
      margin: 0;
      padding: 0;
+      font-family: Arial, sans-serif;
+      scroll-behavior: smooth;
+    }
+    .content-block {
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color 0.5s, color 0.5s;
    }
    .content {
-      padding: 20px;
-      max-width: 800px;
-      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 80%;
+      max-width: 1200px;
    }
-    
-    h2 {
-      scroll-margin-top: 60px; 
+    .text, .image {
+      flex: 1;
    }
-    .row.mt-4 {
-      margin-right: 100px; 
-      margin-left: 130px; 
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+    .content-block:nth-child(even) .content {
+      flex-direction: row-reverse;
    }
-    
  </style>
 </head>
-{% include "menu.html" %}
+<body>
+  <div class="content-block" id="block1">
+    <div class="content">
+      <div class="image">
+        <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+      </div>
+      <div class="text">
+        <h2>Welcome to Tsinghua - IGEM 2024</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="content-block" id="block2">
+    <div class="content">
+      <div class="image">
+        <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+      </div>
+      <div class="text">
+        <h2>Our Mission</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="content-block" id="block3">
+    <div class="content">
+      <div class="image">
+        <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+      </div>
+      <div class="text">
+        <h2>Our Team</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="content-block" id="block4">
+    <div class="content">
+      <div class="image">
+        <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+      </div>
+      <div class="text">
+        <h2>Our Projects</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="content-block" id="block5">
+    <div class="content">
+      <div class="image">
+        <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
+      </div>
+      <div class="text">
+        <h2>Contact Us</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const blocks = document.querySelectorAll('.content-block');
+    const colors = ['#FFFFFF', '#FF5151'];
+
+    function updateColors() {
+      const scrollPosition = window.scrollY;
+      const windowHeight = window.innerHeight;
+
+      blocks.forEach((block, index) => {
+        const blockTop = block.offsetTop;
+        const blockBottom = blockTop + block.offsetHeight;
+        const progress = (scrollPosition - blockTop + windowHeight / 2) / windowHeight;
+
+        if (progress >= 0 && progress <= 1) {
+          const startColor = index % 2 === 0 ? colors[0] : colors[1];
+          const endColor = index % 2 === 0 ? colors[1] : colors[0];
+
+          const backgroundColor = interpolateColor(startColor, endColor, progress);
+          const textColor = interpolateColor(endColor, startColor, progress);
+
+          block.style.backgroundColor = backgroundColor;
+          block.style.color = textColor;
+        }
+      });
+    }
+
+    function interpolateColor(color1, color2, factor) {
+      const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
+        const start = parseInt(hex, 16);
+        const end = parseInt(color2.slice(1).match(/.{2}/g)[i], 16);
+        const interpolated = Math.round(start + (end - start) * factor);
+        return interpolated.toString(16).padStart(2, '0');
+      }).join('');
+
+      return `#${result}`;
+    }

-{% include 'footer.html' %}
+    window.addEventListener('scroll', updateColors);
+    window.addEventListener('resize', updateColors);
+    updateColors();
+  </script>
+</body>
+</html>
\ No newline at end of file