Skip to content
Snippets Groups Projects
Commit bfc92160 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update 2 files

- /wiki/footer.html
- /wiki/pages/home.html
parent 73c1fcb1
No related branches found
No related tags found
No related merge requests found
......@@ -2,124 +2,98 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<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&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer</title>
<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;
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);
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;
.follow-us-wrapper {
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;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
/* Content Wrapper */
.content-wrapper {
padding-top: 70px; /* Adjusted for menu height */
.follow-us {
width: 30px;
height: auto;
filter: grayscale(100%) brightness(0);
}
/* Content Blocks */
.content-block {
min-height: 100vh;
.contact-info {
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;
margin-bottom: 5px;
}
.content-block:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0,0,0,0.15);
.contact-column {
padding-top: 15px;
}
.content {
.contact-icon {
width: 20px;
height: 20px;
margin-right: 10px;
}
.footer-content {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
width: 90%;
max-width: 1200px;
flex-wrap: wrap;
gap: 20px;
}
.text, .image {
flex: 1 1 45%;
margin: 10px;
.social-column, .logo-column, .contact-column {
flex: 0 0 auto;
}
img {
max-width: 100%;
height: auto;
.wechat-container {
position: relative;
display: inline-block;
}
.wechat-qr {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.text p, .top-text p {
font-size: 18px;
line-height: 1.8;
color: #555;
.wechat-container:hover .wechat-qr {
display: block;
}
.content-block:nth-child(even) .content {
flex-direction: row-reverse;
.logo-images {
display: flex;
justify-content: center;
gap: 20px;
}
.logo-image {
width: 125px;
height: 125px;
object-fit: contain;
}
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
align-items: center;
}
.follow-us-wrapper {
justify-content: center;
}
.logo-images {
flex-direction: column;
align-items: center;
}
}
/* Footer Styles */
.footer {
background-color: #ffe4e1;
padding: 30px 0;
color: #333;
padding: 40px 0;
margin-top: 40px;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-around;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
.social-icons {
display: flex;
......@@ -127,35 +101,19 @@
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%);
}
/* Inserted Images */
.footer-images {
display: flex;
gap: 125px;
margin: 20px 0;
.social-icons img {
width: 30px;
height: 30px;
transition: transform 0.3s ease;
filter: grayscale(100%) brightness(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:hover {
transform: scale(1.2);
}
/* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
......@@ -163,20 +121,12 @@
gap: 10px;
}
.contact-item img {
width: 24px;
height: 24px;
filter: grayscale(100%) brightness(0);
}
.contact-info .contact-item span {
font-size: 14px;
color: #555;
width: 20px;
height: 20px;
}
/* Footer Divider and Text */
.footer-divider {
border-top: 1px solid #dee2e6;
margin: 20px 0;
width: 100%;
border-top: 1px solid #ccc;
margin: 30px 0;
}
.footer-text {
max-width: 800px;
......@@ -184,244 +134,116 @@
text-align: center;
}
.footer-text p {
margin-bottom: 10px;
margin-bottom: 15px;
font-size: 14px;
color: #555;
}
.footer-text a {
color: #FF5151;
text-decoration: none;
font-weight: 500;
.subfoot {
color: #333;
transition: color 0.3s ease;
}
.footer-text a:hover {
text-decoration: underline;
.subfoot:hover {
color: #000;
}
.subfoot {
text-decoration: underline;
.logo-images {
display: flex;
justify-content: center;
gap: 20px;
}
/* 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);
.logo-image {
width: 125px;
height: 125px;
object-fit: contain;
}
/* Responsive Styles */
.wechat-container {
position: relative;
display: inline-block;
}
.wechat-qr {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.wechat-container:hover .wechat-qr {
display: block;
}
@media (max-width: 768px) {
.text, .image {
flex-basis: 100%;
}
.content {
.footer-content {
flex-direction: column;
align-items: center;
}
.footer-images {
flex-direction: column;
gap: 20px;
.social-icons {
justify-content: center;
}
.social-icons, .contact-info {
margin-bottom: 20px;
.logo-images {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div id="menu">
{% include 'menu.html' %}
</div>
<button id="textSizeToggle" class="text-size-toggle">A+</button>
<div class="content-wrapper">
<div class="content-block content-block-text-only" id="block1">
<div class="content">
<h1>Do you regret not giving your fullest?</h1>
<p>Everyone gets sick from time to time, often returning to their normal routines within days. But what if you're an IBD patient? Can life ever truly feel normal again? While IBD may not be fatal, it can gradually consume every facet of your existence. With constant hospital visits, unpredictable cramps, and the toll of immune attacks, you find yourself living—but not truly alive.</p>
</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">
<footer class="pb-2 pt-2 mt-5 footer text-center" style="background-color: #ffe4e1">
<div class="container">
<div class="footer-content">
<div class="social-column">
<div class="follow-us-wrapper">
<a href="https://www.instagram.com/igem_tsinghua2024?igsh=MTY4d3EzMGtwZjg3ZA==">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-instagram.svg" alt="Instagram">
</a>
<a href="https://www.youtube.com/@igemtsinghua2024?si=nrNZ1XaRee_rAYYn">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-youtube.svg" alt="Youtube">
</a>
<div class="wechat-container">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat.png" alt="Wechat">
<div class="wechat-qr">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/wechat-code.png" alt="WeChat QR Code" width="250" height="250">
</div>
</div>
<a href="https://b23.tv/xvsnyxK">
<img class="follow-us" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-bilibili.svg" alt="BiliBili">
</a>
</div>
</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 class="logo-column">
<div class="logo-images">
<img class="logo-image" src="https://static.igem.wiki/teams/5187/art/logo.png" alt="iGEM Tsinghua Logo">
<img class="logo-image" src="https://static.igem.wiki/teams/5187/art/thu.jpg" alt="Tsinghua University Logo">
</div>
</div>
</div>
</div>
<div class="content-block" id="block3">
<div class="content">
<div class="image">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
</div>
<div class="text">
<p>My symptoms began in 2017, with stomach cramps that left me too ill to perform every couple of months. As the pain intensified, I realized something was seriously wrong. Every IBD patient endures significant suffering, and I am no exception. Yet, I refuse to let my illness waste my life.</p>
<p>As an animation director, I once thrived on exciting projects and creative ideas. Now, constant pain and fatigue force me to prioritize my health. If work tires me, I cut back; if surgery is needed, I embrace it; if dietary changes are required, I comply. I've come too far to let happiness slip away. Losing control of my life feels like an endless nightmare, but while regaining total control may be unrealistic, managing my IBD feels like a tangible goal.</p>
</div>
</div>
</div>
<div class="content-block" id="block4">
<div class="content">
<div class="image">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
</div>
<div class="text">
<p>I consider myself a fortunate IBD patient, as I've remained in remission. Unlike many others on strict diets, I enjoy a varied diet, avoiding only spicy foods and caffeine. My doctor recommends enteral nutritional powder to address potential deficiencies and advises not to stray too far from the hospital. However, I make my own choices. I even participated in an exchange program in the U.S. Thanks to Tsinghua University's medication subsidies, which alleviate my financial burdens. Aside from regular check-ups, life is generally good.</p>
<p>Yet, I faced dark times when I was first diagnosed with IBD, especially while preparing for the Gaokao, China's Advanced Level Examination. The symptoms hit hard, leading to frustration and a destructive mindset. I often asked myself, 'Why me?'</p>
<p>Over time, I accepted my fate and resolved to make the most of it. This is my destiny. Would I be more successful in a healthy body? Perhaps. But it is what it is, and I've grown stronger through the challenges I face.</p>
<div class="contact-column">
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/location.png" alt="Location">
<p class="mb-0"><small>Tsinghua University, Hai Dian, Beijing</small></p>
</div>
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/phone.png" alt="Phone">
<p class="mb-0"><small>+86-10-62788604 </small></p>
</div>
<div class="contact-info">
<img class="contact-icon" src="https://static.igem.wiki/teams/5187/unrelated-to-tech/email.png" alt="Email">
<p class="mb-0"><small>igemtsinghua2024@gmail.com</small></p>
</div>
</div>
</div>
</div>
<div class="content-block" id="block5">
<div class="content">
<div class="image">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
</div>
<div class="text">
<p>What could be worse than having IBD? Having both IBD and tuberculosis. The nature of their treatments is incompatible; stopping either one could end my life, yet taking both poses the same risk.</p>
<p>I find myself at the gastroenterology clinic most frequently, with psychiatry close behind. The pain is relentless, and after being betrayed by my husband, I often feel like I'm living in hell. There are moments when I wish for an escape from this suffering, but I have two children and a family who love me dearly. Their love gives me strength, even though I'm uncertain how much longer I can endure. All I wish for is to attend my kids' parent day at school.</p>
<hr>
<div class="row justify-content-center mt-4">
<div class="col">
<p class="mb-0 text-center"><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 class="text-center"><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>
</div>
</div>
<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>
</div>
<div class="content">
<div class="text">
<h1>MuScure offers an APE solution.</h1>
</div>
<div class="image">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic5.png" alt="MuScure Solution">
</div>
</div>
</div>
<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>
<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>
</div>
<div class="content">
<div class="text">
<p>During our brainstorm for treating IBD, we were inspired by the wisdom of our ancestor. A non-invasive, convenient and aromatic medication is what the Chinese IBD patient could use of. We introduced a muscone detecting switch in the engineered yeast and activated the downstream pathway to express lactate dehydrogenase to produce lactic acid. Ultimately, the engineered bacteria will colonize the small intestine, enabling the patient to treat IBD by inhaling muscone gas in vitro therefore induces the yeast to synthesize a low amount of stabilized lactic acid in vivo.</p>
</div>
<div class="image">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic7.png" alt="Treatment Inspiration" style="border-radius: 30px;">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<div class="social-icons">
<a href="https://www.instagram.com/igem_tsinghua2024?igsh=MTY4d3EzMGtwZjg3ZA==" target="_blank">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/icons8-instagram.svg" alt="Instagram">
</a>
<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">
<span>Tsinghua University, Hai Dian, Beijing</span>
</div>
<div class="contact-item">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/phone.png" alt="Phone">
<span>+86-10-62788604</span>
</div>
<div class="contact-item">
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/email.png" alt="Email">
<span>igemtsinghua2024@gmail.com</span>
</div>
</div>
</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>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 menu = document.getElementById('menu');
const menuHeight = menu.offsetHeight;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop && currentScroll > menuHeight) {
// Scroll Down
menu.style.transform = `translateY(-${menuHeight}px)`;
menu.style.opacity = '0';
} else {
// Scroll 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';
});
// Initial Menu State
window.addEventListener('load', () => {
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -2,42 +2,87 @@
<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&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: 'Times New Roman', Times, serif;
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
}
/* Menu Styles */
#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;
}
/* 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: 60px;
padding-top: 70px; /* Adjusted for 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;
padding: 20px;
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);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
width: 90%;
max-width: 1200px;
flex-wrap: wrap;
}
......@@ -48,22 +93,23 @@
img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text p {
font-size: 20px;
line-height: 1.6;
}
.top-text p {
font-size: 20px;
line-height: 1.6;
.text p, .top-text p {
font-size: 18px;
line-height: 1.8;
color: #555;
}
.content-block:nth-child(even) .content {
flex-direction: row-reverse;
}
/* Footer Styles */
.footer {
background-color: #ffe4e1;
padding: 20px 0;
margin-top: 20px;
padding: 30px 0;
margin-top: 40px;
}
.footer-content {
display: flex;
......@@ -73,22 +119,43 @@
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
.social-icons {
display: flex;
gap: 15px;
gap: 20px;
align-items: center;
margin-right: 20px;
margin-bottom: 20px;
}
.social-icons img {
width: 30px;
height: 30px;
filter: grayscale(100%) brightness(0);
.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%);
}
/* 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);
}
/* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 10px;
gap: 15px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
......@@ -96,13 +163,20 @@
gap: 10px;
}
.contact-item img {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
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;
......@@ -111,45 +185,43 @@
}
.footer-text p {
margin-bottom: 10px;
font-size: 14px;
color: #555;
}
.subfoot {
text-decoration: underline;
}
.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;
.footer-text a {
color: #FF5151;
text-decoration: none;
font-weight: 500;
}
#block6 .image img,
#block8 .image img {
max-width: 60%;
.footer-text a:hover {
text-decoration: underline;
}
#block6 .text, #block8 .text {
margin-left: 0px;
.subfoot {
text-decoration: underline;
}
#block6 .image, #block8 .image {
margin-right: 0px;
/* 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);
}
/* Responsive Styles */
@media (max-width: 768px) {
.text, .image {
flex-basis: 100%;
......@@ -157,20 +229,23 @@
.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>
<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">
<div class="content-block content-block-text-only" id="block1">
<div class="content">
......@@ -179,17 +254,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 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>
<div class="content-block" id="block3">
<div class="content">
......@@ -261,6 +336,7 @@
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-content">
......@@ -271,15 +347,19 @@
<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">
......@@ -297,86 +377,51 @@
</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/" style="color: black;" 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/" 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>
const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
const colors = {
background: ['#FFFFFF','#f57f7f'],
text: ['#FFFFFF','#FF5151']
};
// Menu Scroll Behavior
let lastScrollTop = 0;
const menu = document.getElementById('menu');
const menuHeight = menu.offsetHeight;
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')}`;
}
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
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop && currentScroll > menuHeight) {
// Scroll Down
menu.style.transform = `translateY(-${menuHeight}px)`;
menu.style.opacity = '0';
} else {
// Scrolling up
// Scroll Up
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
});
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}
// 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';
});
window.addEventListener('scroll', updateColors);
window.addEventListener('resize', updateColors);
updateColors();
// Initial Menu State
window.addEventListener('load', () => {
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
});
</script>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment