diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index b16580b4a48c01daf23eeb5a0bcd94fd58373d15..4e86b8df561b5a70e28a3ee3fd97c1aa28c858e7 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -2,27 +2,35 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<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&display=swap" rel="stylesheet">
+
<style>
body, html {
scroll-behavior: smooth;
- font-family: 'Times New Roman', Times, serif;
+ font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
+ background-color: #f9f9f9;
+ color: #333;
}
#menu {
position: fixed;
top: 0;
left: 0;
right: 0;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: rgba(255, 255, 255, 0.95);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 1000;
+ padding: 10px 20px;
}
.content-wrapper {
- padding-top: 60px; /* Adjust based on your menu height */
+ padding-top: 70px; /* Adjusted for menu height */
}
.content-block {
min-height: 100vh;
@@ -31,7 +39,10 @@
align-items: center;
justify-content: center;
transition: background-color 0.5s;
- padding: 20px;
+ padding: 40px 20px;
+ }
+ .content-block:nth-child(even) .content {
+ flex-direction: row-reverse;
}
.content {
display: flex;
@@ -44,21 +55,38 @@
.text, .image {
flex: 1 1 45%;
margin: 10px;
+ transition: transform 0.3s ease;
}
- img {
+ .image img {
max-width: 100%;
height: auto;
+ border-radius: 15px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
}
- .text p {
- font-size: 20px;
- line-height: 1.6;
+ .image img:hover {
+ transform: scale(1.05);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
- .top-text p {
- font-size: 20px;
- line-height: 1.6;
+ .text p, .top-text p {
+ font-size: 18px;
+ line-height: 1.8;
+ color: #444;
}
- .content-block:nth-child(even) .content {
- flex-direction: row-reverse;
+ .top-text {
+ text-align: center;
+ padding: 20px 0;
+ width: 80%;
+ max-width: 800px;
+ }
+ .content-block-text-only .content {
+ display: block;
+ text-align: center;
+ }
+ .content-block-text-only h1 {
+ font-size: 2.5em;
+ margin-bottom: 20px;
+ color: #222;
}
.footer {
background-color: #ffe4e1;
@@ -84,6 +112,10 @@
width: 30px;
height: 30px;
filter: grayscale(100%) brightness(0);
+ transition: filter 0.3s ease;
+ }
+ .social-icons img:hover {
+ filter: none;
}
.contact-info {
display: flex;
@@ -111,25 +143,22 @@
}
.footer-text p {
margin-bottom: 10px;
+ color: #555;
}
.subfoot {
text-decoration: underline;
}
+ .subfoot:hover {
+ color: #000;
+ }
.contact-info .contact-item span {
font-size: 13px;
- }
- .content-block-text-only .content {
- display: block;
- text-align: center;
+ color: #555;
}
.content-block-text-only h2 {
margin-bottom: 20px;
- }
- .top-text {
- text-align: center;
- padding: 20px 0;
- width: 80%;
- max-width: 800px;
+ font-size: 2em;
+ color: #222;
}
.image-only .content {
display: flex;
@@ -139,17 +168,47 @@
.image-only img {
width: 80%;
max-width: 800px;
+ border-radius: 30px;
}
- #block6 .image img,
- #block8 .image img {
- max-width: 60%;
+ /* Specific styling for the second-to-last image */
+ #block7 .content img {
+ width: 50%; /* Reduced size */
+ max-width: 400px;
}
- #block6 .text, #block8 .text {
- margin-left: 0px;
+ /* Hero section styling */
+ #hero .content img {
+ width: 100%;
+ max-width: 1200px;
+ border-radius: 15px;
+ box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
}
- #block6 .image, #block8 .image {
- margin-right: 0px;
+ #hero .content img:hover {
+ transform: scale(1.02);
+ box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
+ /* Text Size Toggle Button */
+ .text-size-toggle {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background-color: #ff5151;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ font-size: 18px;
+ cursor: pointer;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+ transition: background-color 0.3s ease, transform 0.3s ease;
+ z-index: 1001;
+ }
+ .text-size-toggle:hover {
+ background-color: #e04848;
+ transform: scale(1.1);
+ }
+ /* Responsive Adjustments */
@media (max-width: 768px) {
.text, .image {
flex-basis: 100%;
@@ -157,6 +216,9 @@
.content {
flex-direction: column;
}
+ #block7 .content img {
+ width: 70%;
+ }
}
</style>
@@ -166,12 +228,17 @@
{% include 'menu.html' %}
</div>
- <body>
- <div id="menu">
- {% include 'menu.html' %}
- </div>
- <button id="textSizeToggle" class="text-size-toggle">L</button>
+ <button id="textSizeToggle" class="text-size-toggle">A</button>
+
<div class="content-wrapper">
+ <!-- Hero Section -->
+ <div class="content-block image-only" id="hero">
+ <div class="content">
+ <img src="https://static.igem.wiki/teams/5187/art/thu.jpg" alt="Hero Image">
+ </div>
+ </div>
+
+ <!-- Block 1 -->
<div class="content-block content-block-text-only" id="block1">
<div class="content">
<h1>Do you regret not giving your fullest?</h1>
@@ -179,18 +246,20 @@
</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>
+ <!-- Block 2 -->
+ <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>
+ <!-- Block 3 -->
<div class="content-block" id="block3">
<div class="content">
<div class="image">
@@ -203,6 +272,7 @@
</div>
</div>
+ <!-- Block 4 -->
<div class="content-block" id="block4">
<div class="content">
<div class="image">
@@ -216,6 +286,7 @@
</div>
</div>
+ <!-- Block 5 -->
<div class="content-block" id="block5">
<div class="content">
<div class="image">
@@ -228,6 +299,7 @@
</div>
</div>
+ <!-- Block 6 -->
<div class="content-block" id="block6">
<div class="top-text">
<p>The incidence of IBD in China increased from 1.45/100,000 to 3.62/100,000 from 1990 to 2019, with an overall increase of 149.66%; the standardized incidence rate increased from 1.47/100,000 to 3.01/100,000, with an overall increase of 104.76%. IBD has the tendency to become prevalence in China. That's why we are here to help.</p>
@@ -242,12 +314,14 @@
</div>
</div>
+ <!-- Block 7 (Second-to-Last Image) -->
<div class="content-block image-only" id="block7">
<div class="content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic6.png" alt="Centered Image" style="border-radius: 30px;">
</div>
</div>
+ <!-- Block 8 -->
<div class="content-block" id="block8">
<div class="top-text">
<p>Chinese has a long history of implementing incense treatment. Since the Han Dynasty, aromatherapy has been included in the scope of Chinese medicine to enhance physical fitness and prevent diseases from occurring in the first place. The right combination of Chinese herbs and spices would be stuffed in a silky sachet bag. People from ancient times used to bring sachet bag everywhere providing a natural shield from diseases.</p>
@@ -261,6 +335,7 @@
</div>
</div>
</div>
+ </div>
<footer class="footer">
<div class="footer-content">
@@ -271,11 +346,9 @@
<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>
@@ -307,7 +380,7 @@
const menu = document.getElementById('menu');
const colors = {
background: ['#FFFFFF','#f57f7f'],
- text: ['#FFFFFF','#FF5151']
+ text: ['#333333','#FF5151']
};
let lastScrollTop = 0;
@@ -331,7 +404,7 @@
const windowHeight = window.innerHeight;
blocks.forEach((block, index) => {
- const blockTop = block.offsetTop - 60; // Adjust for menu height
+ const blockTop = block.offsetTop - 70; // Adjust for menu height
const blockHeight = block.offsetHeight;
const blockCenter = blockTop + blockHeight / 2;
const distanceFromCenter = Math.abs(scrollPosition + windowHeight / 2 - blockCenter);
@@ -341,13 +414,13 @@
// 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];
+ // Set text color based on block index (alternating colors)
+ const textColor = colors.text[index % colors.text.length];
block.style.color = textColor;
// Interpolate background color
- const fromColor = colors.background[index % 2];
- const toColor = colors.background[(index + 1) % 2];
+ const fromColor = colors.background[index % colors.background.length];
+ const toColor = colors.background[(index + 1) % colors.background.length];
const backgroundColor = interpolateColor(fromColor, toColor, progress);
block.style.backgroundColor = backgroundColor;
@@ -377,6 +450,27 @@
window.addEventListener('scroll', updateColors);
window.addEventListener('resize', updateColors);
updateColors();
+
+ // Text Size Toggle Functionality
+ const textSizeToggle = document.getElementById('textSizeToggle');
+ let isLarge = false;
+ textSizeToggle.addEventListener('click', () => {
+ document.body.classList.toggle('large-text');
+ isLarge = !isLarge;
+ textSizeToggle.textContent = isLarge ? 'A' : 'L';
+ });
+
+ // Add CSS for large text
+ const style = document.createElement('style');
+ style.innerHTML = `
+ .large-text .text p,
+ .large-text .top-text p,
+ .large-text .content-block-text-only h1,
+ .large-text .content-block-text-only h2 {
+ font-size: 22px;
+ }
+ `;
+ document.head.appendChild(style);
</script>
</body>
</html>
\ No newline at end of file