From 4033748a5fc69cf22756aa129401dbf3bc7e7839 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Sun, 29 Sep 2024 05:09:06 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 329 +++++++++++++++++++------------------------
1 file changed, 142 insertions(+), 187 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 997eb6f3..b16580b4 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -2,87 +2,42 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
<title>Tsinghua - IGEM 2024</title>
-
- <!-- Google Fonts -->
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
-
<style>
- /* Reset and Base Styles */
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
body, html {
scroll-behavior: smooth;
- font-family: 'Roboto', sans-serif;
- background-color: #f5f5f5;
- color: #333;
+ font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
-
- /* Menu Styles */
#menu {
position: fixed;
top: 0;
left: 0;
right: 0;
- background-color: rgba(255, 255, 255, 0.95);
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ background-color: rgba(255, 255, 255, 0.9);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 1000;
}
- /* Example menu styles - adjust as needed */
- #menu ul {
- list-style: none;
- display: flex;
- justify-content: center;
- padding: 15px 0;
- }
- #menu ul li {
- margin: 0 20px;
- }
- #menu ul li a {
- text-decoration: none;
- color: #333;
- font-weight: 700;
- transition: color 0.3s;
- }
- #menu ul li a:hover {
- color: #FF5151;
- }
-
- /* Content Wrapper */
.content-wrapper {
- padding-top: 70px; /* Adjusted for menu height */
+ padding-top: 60px; /* Adjust based on your menu height */
}
-
- /* Content Blocks */
.content-block {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- transition: background-color 0.5s, transform 0.3s;
- padding: 40px 20px;
- background-color: #ffffff;
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
- margin-bottom: 20px;
- }
- .content-block:hover {
- transform: translateY(-5px);
- box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+ transition: background-color 0.5s;
+ padding: 20px;
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
- width: 90%;
+ width: 80%;
max-width: 1200px;
flex-wrap: wrap;
}
@@ -93,23 +48,22 @@
img {
max-width: 100%;
height: auto;
- border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
- .text p, .top-text p {
- font-size: 18px;
- line-height: 1.8;
- color: #555;
+ .text p {
+ font-size: 20px;
+ line-height: 1.6;
+ }
+ .top-text p {
+ font-size: 20px;
+ line-height: 1.6;
}
.content-block:nth-child(even) .content {
flex-direction: row-reverse;
}
-
- /* Footer Styles */
.footer {
background-color: #ffe4e1;
- padding: 30px 0;
- margin-top: 40px;
+ padding: 20px 0;
+ margin-top: 20px;
}
.footer-content {
display: flex;
@@ -119,43 +73,22 @@
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
- position: relative;
}
.social-icons {
display: flex;
- gap: 20px;
+ gap: 15px;
align-items: center;
- margin-bottom: 20px;
- }
- .social-icons a img {
- width: 35px;
- height: 35px;
- transition: transform 0.3s, filter 0.3s;
- }
- .social-icons a img:hover {
- transform: scale(1.1);
- filter: brightness(0) saturate(100%) invert(39%) sepia(87%) saturate(394%) hue-rotate(345deg) brightness(95%) contrast(101%);
+ margin-right: 20px;
}
-
- /* Inserted Images */
- .footer-images {
- display: flex;
- gap: 125px;
- margin: 20px 0;
- }
- .footer-images img {
- width: 100px;
- height: auto;
- border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ .social-icons img {
+ width: 30px;
+ height: 30px;
+ filter: grayscale(100%) brightness(0);
}
-
- /* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
- gap: 15px;
- margin-bottom: 20px;
+ gap: 10px;
}
.contact-item {
display: flex;
@@ -163,20 +96,13 @@
gap: 10px;
}
.contact-item img {
- width: 24px;
- height: 24px;
+ width: 20px;
+ height: 20px;
filter: grayscale(100%) brightness(0);
}
- .contact-info .contact-item span {
- font-size: 14px;
- color: #555;
- }
-
- /* Footer Divider and Text */
.footer-divider {
border-top: 1px solid #dee2e6;
margin: 20px 0;
- width: 100%;
}
.footer-text {
max-width: 800px;
@@ -185,43 +111,45 @@
}
.footer-text p {
margin-bottom: 10px;
- font-size: 14px;
- color: #555;
- }
- .footer-text a {
- color: #FF5151;
- text-decoration: none;
- font-weight: 500;
- }
- .footer-text a:hover {
- text-decoration: underline;
}
.subfoot {
text-decoration: underline;
}
-
- /* Text Size Toggle Button */
- .text-size-toggle {
- position: fixed;
- bottom: 20px;
- right: 20px;
- background-color: #FF5151;
- color: white;
- border: none;
- padding: 10px 15px;
- border-radius: 5px;
- cursor: pointer;
- font-size: 16px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
- transition: background-color 0.3s, transform 0.3s;
- z-index: 1001;
- }
- .text-size-toggle:hover {
- background-color: #e04e4e;
- transform: scale(1.05);
+ .contact-info .contact-item span {
+ font-size: 13px;
+ }
+ .content-block-text-only .content {
+ display: block;
+ text-align: center;
+ }
+ .content-block-text-only h2 {
+ margin-bottom: 20px;
+ }
+ .top-text {
+ text-align: center;
+ padding: 20px 0;
+ width: 80%;
+ max-width: 800px;
+ }
+ .image-only .content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .image-only img {
+ width: 80%;
+ max-width: 800px;
+ }
+ #block6 .image img,
+ #block8 .image img {
+ max-width: 60%;
+ }
+ #block6 .text, #block8 .text {
+ margin-left: 0px;
+ }
+ #block6 .image, #block8 .image {
+ margin-right: 0px;
}
-
- /* Responsive Styles */
@media (max-width: 768px) {
.text, .image {
flex-basis: 100%;
@@ -229,23 +157,20 @@
.content {
flex-direction: column;
}
- .footer-images {
- flex-direction: column;
- gap: 20px;
- }
- .social-icons, .contact-info {
- margin-bottom: 20px;
- }
}
</style>
+
</head>
<body>
<div id="menu">
{% include 'menu.html' %}
</div>
-
- <button id="textSizeToggle" class="text-size-toggle">A+</button>
-
+
+ <body>
+ <div id="menu">
+ {% include 'menu.html' %}
+ </div>
+ <button id="textSizeToggle" class="text-size-toggle">L</button>
<div class="content-wrapper">
<div class="content-block content-block-text-only" id="block1">
<div class="content">
@@ -254,17 +179,17 @@
</div>
</div>
- <div class="content-block" id="block2">
- <div class="content">
- <div class="image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
- </div>
- <div class="text">
- <p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer. I underwent several small intestine resections, ultimately becoming a short bowel patient. Throughout my journey, I lost many friends to this disease and feared I would be next. I waited patiently for the first doctor to investigate IBD, hoping for the arrival of monoclonal antibodies, believing that perhaps a panacea was just around the corner.</p>
- <p>To survive, I needed to earn a living, but many of us face rejection in the workforce. With a lifelong illness to manage, who will cover the costs? I find myself signing disclaimer agreements before employment, limited to freelance work. The uncertainty weighs heavily on me; I never know when an acute phase might strike. Meanwhile, my friends in rural areas have had to stop their medication due to financial constraints, and I fear I may face the same fate.</p>
- </div>
+ <div class="content-block" id="block2">
+ <div class="content">
+ <div class="image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+ </div>
+ <div class="text">
+ <p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer. I underwent several small intestine resections, ultimately becoming a short bowel patient. Throughout my journey, I lost many friends to this disease and feared I would be next. I waited patiently for the first doctor to investigate IBD, hoping for the arrival of monoclonal antibodies, believing that perhaps a panacea was just around the corner.</p>
+ <p>To survive, I needed to earn a living, but many of us face rejection in the workforce. With a lifelong illness to manage, who will cover the costs? I find myself signing disclaimer agreements before employment, limited to freelance work. The uncertainty weighs heavily on me; I never know when an acute phase might strike. Meanwhile, my friends in rural areas have had to stop their medication due to financial constraints, and I fear I may face the same fate.</p>
</div>
</div>
+ </div>
<div class="content-block" id="block3">
<div class="content">
@@ -336,7 +261,6 @@
</div>
</div>
</div>
- </div>
<footer class="footer">
<div class="footer-content">
@@ -347,19 +271,15 @@
<a href="https://www.youtube.com/@igemtsinghua2024?si=nrNZ1XaRee_rAYYn" target="_blank">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-youtube.svg" alt="YouTube">
</a>
+
<a href="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat-code.png" target="_blank" class="wechat-link">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat.png" alt="Wechat">
</a>
+
<a href="https://b23.tv/xvsnyxK" target="_blank">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-bilibili.svg" alt="Bilibili">
</a>
</div>
-
- <div class="footer-images">
- <img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Logo">
- <img src="https://static.igem.wiki/teams/5187/art/thu.jpg" alt="Tsinghua University">
- </div>
-
<div class="contact-info">
<div class="contact-item">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/location.png" alt="Location">
@@ -377,51 +297,86 @@
</div>
<div class="footer-divider"></div>
<div class="footer-text">
- <p><small>© 2024 - Content on this site is licensed under a <a class="subfoot" href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
+ <p><small>© 2024 - Content on this site is licensed under a <a class="subfoot" href="https://creativecommons.org/licenses/by/4.0/" style="color: black;" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
<p><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;">gitlab.igem.org/2024/tsinghua</a>.</small></p>
</div>
</footer>
<script>
- // Menu Scroll Behavior
- let lastScrollTop = 0;
+ const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
- const menuHeight = menu.offsetHeight;
+ const colors = {
+ background: ['#FFFFFF','#f57f7f'],
+ text: ['#FFFFFF','#FF5151']
+ };
+ let lastScrollTop = 0;
+
+ function interpolateColor(color1, color2, factor) {
+ const r1 = parseInt(color1.slice(1, 3), 16);
+ const g1 = parseInt(color1.slice(3, 5), 16);
+ const b1 = parseInt(color1.slice(5, 7), 16);
+ const r2 = parseInt(color2.slice(1, 3), 16);
+ const g2 = parseInt(color2.slice(3, 5), 16);
+ const b2 = parseInt(color2.slice(5, 7), 16);
+
+ const r = Math.round(r1 + factor * (r2 - r1));
+ const g = Math.round(g1 + factor * (g2 - g1));
+ const b = Math.round(b1 + factor * (b2 - b1));
+
+ return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+ }
- window.addEventListener('scroll', () => {
- const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
- if (currentScroll > lastScrollTop && currentScroll > menuHeight) {
- // Scroll Down
+ function updateColors() {
+ const scrollPosition = window.scrollY;
+ const windowHeight = window.innerHeight;
+
+ blocks.forEach((block, index) => {
+ const blockTop = block.offsetTop - 60; // Adjust for menu height
+ const blockHeight = block.offsetHeight;
+ const blockCenter = blockTop + blockHeight / 2;
+ const distanceFromCenter = Math.abs(scrollPosition + windowHeight / 2 - blockCenter);
+ const maxDistance = windowHeight / 2 + blockHeight / 2;
+ let progress = 1 - Math.min(distanceFromCenter / maxDistance, 1);
+
+ // Ensure the progress is always between 0 and 1
+ progress = Math.max(0, Math.min(1, progress));
+
+ // Set text color based on block index (固定的粉白粉白粉)
+ const textColor = colors.text[index % 2];
+ block.style.color = textColor;
+
+ // Interpolate background color
+ const fromColor = colors.background[index % 2];
+ const toColor = colors.background[(index + 1) % 2];
+ const backgroundColor = interpolateColor(fromColor, toColor, progress);
+
+ block.style.backgroundColor = backgroundColor;
+ });
+
+ // Menu behavior
+ const menuHeight = menu.offsetHeight;
+ const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+ if (currentScrollTop <= menuHeight) {
+ // At the top of the page
+ menu.style.transform = 'translateY(0)';
+ menu.style.opacity = '1';
+ } else if (currentScrollTop > lastScrollTop) {
+ // Scrolling down
menu.style.transform = `translateY(-${menuHeight}px)`;
menu.style.opacity = '0';
} else {
- // Scroll Up
+ // Scrolling up
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
}
- lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
- });
-
- // Text Size Toggle (Optional Enhancement)
- const textSizeToggle = document.getElementById('textSizeToggle');
- let currentSize = 16;
- textSizeToggle.addEventListener('click', () => {
- if (currentSize === 16) {
- currentSize = 20;
- textSizeToggle.textContent = 'A-';
- } else {
- currentSize = 16;
- textSizeToggle.textContent = 'A+';
- }
- document.body.style.fontSize = currentSize + 'px';
- });
+ lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
+ }
- // Initial Menu State
- window.addEventListener('load', () => {
- menu.style.transform = 'translateY(0)';
- menu.style.opacity = '1';
- });
+ window.addEventListener('scroll', updateColors);
+ window.addEventListener('resize', updateColors);
+ updateColors();
</script>
</body>
</html>
\ No newline at end of file
--
GitLab