From b91a9b8c7d20c55b9323156203657f7693b661e9 Mon Sep 17 00:00:00 2001
From: Zhefu Li <zf-li23@mails.tsinghua.edu.cn>
Date: Tue, 12 Nov 2024 15:55:39 +0000
Subject: [PATCH] Update home.html
---
wiki/pages/home.html | 381 +++++++++++++++++++++++++------------------
1 file changed, 224 insertions(+), 157 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 07bb765..6377be3 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -1,14 +1,16 @@
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
- <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
+ <link rel="license" href="https://creativecommons.org/licenses/by/4.0/" />
<title>Home | Tsinghua - IGEM 2024</title>
<style>
@import url('https://static.igem.wiki/teams/5187/merriweather-black.ttf');
@import url('https://static.igem.wiki/teams/5187/librebaskerville-regular.ttf');
+
body {
font-family: Calibri, sans-serif;
line-height: 1.6;
@@ -20,6 +22,7 @@
background-position: 90% center;
background-repeat: no-repeat;
}
+
.content-wrapper {
display: flex;
flex-direction: column;
@@ -39,7 +42,8 @@
text-align: center;
}
- #first-block h2, #first-block p {
+ #first-block h2,
+ #first-block p {
font-family: Baskerville, 'Baskerville Old Face', serif;
color: #97291d;
opacity: 0;
@@ -83,7 +87,9 @@
align-items: center;
}
- .card, .additional-content, .muscare-content {
+ .card,
+ .additional-content,
+ .muscare-content {
width: 90%;
max-width: 1000px;
margin-bottom: 30px;
@@ -151,24 +157,24 @@
padding: 30px;
}
- .additional-content-text h3{
+ .additional-content-text h3 {
font-size: 2rem;
color: #333;
margin-top: 0;
}
- .additional-content-text p{
+ .additional-content-text p {
font-size: 1.1rem;
color: #666;
}
- .additional-content-image{
+ .additional-content-image {
width: 400px;
height: auto;
object-fit: contain;
margin: 40px;
}
-
+
.muscare-content {
display: flex;
align-items: center;
@@ -202,25 +208,25 @@
font-size: 1.1rem;
color: #666;
}
-
+
.read-more-wrapper {
- display: flex;
- justify-content: center;
- margin-top: 15px;
- }
+ display: flex;
+ justify-content: center;
+ margin-top: 15px;
+ }
.read-more-button {
- padding: 8px 15px;
- background-color: #fa8072;
- color: white;
- text-decoration: none;
- border-radius: 5px;
- font-size: 0.9rem;
- transition: background-color 0.3s ease;
+ padding: 8px 15px;
+ background-color: #fa8072;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ font-size: 0.9rem;
+ transition: background-color 0.3s ease;
}
.read-more-button:hover {
- background-color: #ff6b5b;
+ background-color: #ff6b5b;
}
.aromatherapy-content {
@@ -258,93 +264,96 @@
}
.ape-solution {
- width: 90%;
- max-width: 1000px;
- margin: 50px auto;
- background-color: #ffffff;
- border-radius: 15px;
- overflow: hidden;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- padding: 30px;
- text-align: center;
- }
-
- .ape-solution h2 {
- font-size: 2.5rem;
- color: #333;
- text-align: center;
- margin-bottom: 40px;
- }
-
- .ape-solution h2 span {
- color: #fa8072;
- }
-
- .ape-row {
- display: flex;
- align-items: center;
- margin-bottom: 30px;
- justify-content: center;
- }
-
- .ape-icon {
- width: 175px;
- height: 175px;
- margin-right: 20px;
- }
-
- .ape-text {
- flex: 0 1 60%;
- text-align: left;
- }
-
- .ape-title {
- font-size: 1.5rem;
- color: #333;
- margin: 0 0 5px 0;
- }
-
- .ape-description {
- font-size: 1.1rem;
- color: #666;
- margin: 0;
- }
-
- #last-block {
- padding: 40px;
- background-color: transparent;
- box-shadow: none;
- text-align: center;
-}
-
-#last-block h4, #last-block h3, #last-block h2, #last-block p {
- font-family: Baskerville, 'Baskerville Old Face', serif;
- color: #97291d;
- font-style: italic;
- opacity: 0;
- transform: translateY(20px);
- transition: opacity 0.5s ease, transform 0.5s ease;
-}
-
-#last-block h2 {
- font-size: 3rem;
-}
-
-#last-block p {
- font-size: 1.8rem;
-}
-
-#last-block .fade-in {
- opacity: 1;
- transform: translateY(0);
-}
-
- .fade-section {
- opacity: 0;
- transform: translateY(20px);
- transition: opacity 0.5s ease, transform 0.5s ease;
- margin-top: 15vh;
- justify-content: center;
+ width: 90%;
+ max-width: 1000px;
+ margin: 50px auto;
+ background-color: #ffffff;
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 30px;
+ text-align: center;
+ }
+
+ .ape-solution h2 {
+ font-size: 2.5rem;
+ color: #333;
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .ape-solution h2 span {
+ color: #fa8072;
+ }
+
+ .ape-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 30px;
+ justify-content: center;
+ }
+
+ .ape-icon {
+ width: 175px;
+ height: 175px;
+ margin-right: 20px;
+ }
+
+ .ape-text {
+ flex: 0 1 60%;
+ text-align: left;
+ }
+
+ .ape-title {
+ font-size: 1.5rem;
+ color: #333;
+ margin: 0 0 5px 0;
+ }
+
+ .ape-description {
+ font-size: 1.1rem;
+ color: #666;
+ margin: 0;
+ }
+
+ #last-block {
+ padding: 40px;
+ background-color: transparent;
+ box-shadow: none;
+ text-align: center;
+ }
+
+ #last-block h4,
+ #last-block h3,
+ #last-block h2,
+ #last-block p {
+ font-family: Baskerville, 'Baskerville Old Face', serif;
+ color: #97291d;
+ font-style: italic;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ }
+
+ #last-block h2 {
+ font-size: 3rem;
+ }
+
+ #last-block p {
+ font-size: 1.8rem;
+ }
+
+ #last-block .fade-in {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .fade-section {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ margin-top: 15vh;
+ justify-content: center;
}
.fade-section.active {
@@ -353,6 +362,7 @@
}
</style>
</head>
+
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
@@ -363,7 +373,10 @@
<div class="content-wrapper">
<div id="first-block">
<h2>Do you regret not giving your fullest?</h2>
- <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>
+ <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 class="card-container">
@@ -373,8 +386,16 @@
<div class="card-text">
<p class="card-preview">Even in the darkest moments, I hold onto hope for a brighter, healthier future.</p>
<div class="card-full-content">
- <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>
+ <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>
@@ -383,10 +404,17 @@
<div class="card">
<div class="card-content" style="margin-left: 70px;">
<div class="card-text">
- <p class="card-preview">Despite the constant challenges, I remain determined to live a fulfilling life and pursue my passion.</p>
+ <p class="card-preview">Despite the constant challenges, I remain determined to live a fulfilling life and
+ pursue my passion.</p>
<div class="card-full-content">
- <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>
+ <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>
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="Person 2" class="card-image">
@@ -397,11 +425,21 @@
<div class="card-content">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="Person 3" class="card-image">
<div class="card-text">
- <p class="card-preview">I've turned my challenges with IBD into strengths, choosing to live fully and grow stronger every day.</p>
+ <p class="card-preview">I've turned my challenges with IBD into strengths, choosing to live fully and grow
+ stronger every day.</p>
<div class="card-full-content">
- <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>
+ <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>
</div>
</div>
@@ -410,74 +448,98 @@
<div class="card">
<div class="card-content" style="margin-left: 70px;">
<div class="card-text">
- <p class="card-preview">Despite the overwhelming pain, my family's love gives me the strength to keep fighting.</p>
+ <p class="card-preview">Despite the overwhelming pain, my family's love gives me the strength to keep
+ fighting.</p>
<div class="card-full-content">
- <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>
+ <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>
</div>
</div>
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="Person 4" class="card-image">
</div>
</div>
-
+
<div class="fade-section" id="ibd-section">
<div class="additional-content">
<div class="additional-content-text">
<h3>Inflammatory bowel disease(IBD)</h3>
- <p>The incidence of IBD in China increased from <strong style="color: #fa8072;">1.45/100,000</strong> to <strong style="color: #fa8072;">3.62/100,000</strong> from 1990 to 2019, with an overall increase of <strong style="color: #fa8072;">149.66%</strong>; the standardized incidence rate increased from <strong style="color: #fa8072;">1.47/100,000</strong> to <strong style="color: #fa8072;">3.01/100,000</strong>, with an overall increase of <strong style="color: #fa8072;">104.76%</strong>. IBD has the tendency to become prevalence in China. That's why we are here to help.</p>
+ <p>The incidence of IBD in China increased from <strong style="color: #fa8072;">1.45/100,000</strong> to
+ <strong style="color: #fa8072;">3.62/100,000</strong> from 1990 to 2019, with an overall increase of
+ <strong style="color: #fa8072;">149.66%</strong>; the standardized incidence rate increased from <strong
+ style="color: #fa8072;">1.47/100,000</strong> to <strong style="color: #fa8072;">3.01/100,000</strong>,
+ with an overall increase of <strong style="color: #fa8072;">104.76%</strong>. IBD has the tendency to
+ become prevalence in China. That's why we are here to help.
+ </p>
</div>
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-pic.jpg" alt="IBD Logo" class="additional-content-image">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-pic.jpg" alt="IBD Logo"
+ class="additional-content-image">
</div>
</div>
-
+
<div class="fade-section" id="muscure-section">
<div class="muscare-content">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Muscure Logo" class="muscare-content-image">
<div class="muscare-content-text">
<h3>What is Muscure?</h3>
- <p>Our team is developing a better treatment for Inflammatory Bowel Disease (IBD). Studies show that lactic acid can help improve IBD symptoms. We engineered yeast to produce lactic acid when they detect muscone, a fragrant compound. By inhaling muscone gas, patients trigger the yeast in their small intestine to release lactic acid. This aromatherapy approach aims to make long-term IBD treatment more comfortable and effective.</p>
+ <p>Our team is developing a better treatment for Inflammatory Bowel Disease (IBD). Studies show that lactic
+ acid can help improve IBD symptoms. We engineered yeast to produce lactic acid when they detect muscone, a
+ fragrant compound. By inhaling muscone gas, patients trigger the yeast in their small intestine to release
+ lactic acid. This aromatherapy approach aims to make long-term IBD treatment more comfortable and
+ effective.</p>
<div class="read-more-wrapper">
<a href="https://2024.igem.wiki/Tsinghua/description" class="read-more-button">Read More</a>
</div>
</div>
</div>
</div>
-
+
<div class="fade-section" id="mus-cure-section">
<div class="aromatherapy-content">
<div class="aromatherapy-content-text" style="margin-left: 50px;">
<h3>Why "Mus" Cure?</h3>
- <p>The root "mus" comes from Latin, meaning "musk". 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. 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.</p>
+ <p>The root "mus" comes from Latin, meaning "musk". 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. 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.</p>
</div>
- <img src="https://static.igem.wiki/teams/5187/art/aromatherapy.png" alt="aromatherapy" class="aromatherapy-content-image">
+ <img src="https://static.igem.wiki/teams/5187/art/aromatherapy.png" alt="aromatherapy"
+ class="aromatherapy-content-image">
</div>
</div>
-
+
<div class="fade-section" id="ape-solution-section">
<div class="ape-solution">
<h2>We offer an <span>APE</span> solution!</h2>
-
+
<div class="ape-row">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf1.png" alt="Affordable" class="ape-icon">
<div class="ape-text">
<h3 class="ape-title"><strong style="color: #fa8072;font-size: 160%;">A</strong>ffordable</h3>
- <p class="ape-description">Our solution is cost-effective, making it accessible to a wider range of patients.</p>
+ <p class="ape-description">Our solution is cost-effective, making it accessible to a wider range of
+ patients.</p>
</div>
</div>
-
+
<div class="ape-row">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf2.png" alt="Potential" class="ape-icon">
<div class="ape-text">
<h3 class="ape-title"><strong style="color: #fa8072;font-size: 160%;">P</strong>otential</h3>
- <p class="ape-description">The innovative approach shows great potential for treating IBD and possibly other conditions.</p>
+ <p class="ape-description">The innovative approach shows great potential for treating IBD and possibly
+ other conditions.</p>
</div>
</div>
-
+
<div class="ape-row">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf3.png" alt="Efficiency" class="ape-icon">
<div class="ape-text">
<h3 class="ape-title"><strong style="color: #fa8072 ;font-size: 160%;">E</strong>fficiency</h3>
- <p class="ape-description">Our method is designed to efficiently deliver treatment, maximizing its effectiveness.</p>
+ <p class="ape-description">Our method is designed to efficiently deliver treatment, maximizing its
+ effectiveness.</p>
</div>
</div>
</div>
@@ -489,14 +551,18 @@
<h4 class="fade-line">Through Muscure, we wish to unlock the personal potential of IBD patients.</h4>
<h2 class="fade-line">Muscure, muscone cure for Inflammatory Bowel Disease.</h2>
</div>
-</div>
-</div>
+ <div class="image-container">
+ <img src="https://static.igem.wiki/teams/5187/prize.webp" alt="prize"
+ class="shadowed-image" style="width: 100%; max-width: 1000px;">
+ </div>
+ </div>
+ </div>
{% include 'footer.html' %}
<script>
- window.addEventListener('load', function() {
+ window.addEventListener('load', function () {
const loaderContainer = document.querySelector('.loader-container');
- setTimeout(function() {
+ setTimeout(function () {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
@@ -513,7 +579,7 @@
});
document.querySelectorAll('.card').forEach(card => {
- card.addEventListener('click', function() {
+ card.addEventListener('click', function () {
this.classList.toggle('expanded');
});
});
@@ -552,24 +618,25 @@
window.addEventListener('load', handleScroll);
function handleLastBlockFade() {
- const lastBlock = document.getElementById('last-block');
- const fadeLines = lastBlock.querySelectorAll('h4, h2');
- const lastBlockRect = lastBlock.getBoundingClientRect();
- const triggerPoint = window.innerHeight * 0.8; // 80% of viewport height
-
- if (lastBlockRect.top <= triggerPoint) {
- fadeLines.forEach((line, index) => {
- setTimeout(() => {
- line.classList.add('fade-in');
- }, index * 500); // Delay each line by 500ms
- });
- // Remove the event listener once the animation is triggered
- window.removeEventListener('scroll', handleLastBlockFade);
- }
-}
+ const lastBlock = document.getElementById('last-block');
+ const fadeLines = lastBlock.querySelectorAll('h4, h2');
+ const lastBlockRect = lastBlock.getBoundingClientRect();
+ const triggerPoint = window.innerHeight * 0.8; // 80% of viewport height
-window.addEventListener('scroll', handleLastBlockFade);
-window.addEventListener('load', handleLastBlockFade);
+ if (lastBlockRect.top <= triggerPoint) {
+ fadeLines.forEach((line, index) => {
+ setTimeout(() => {
+ line.classList.add('fade-in');
+ }, index * 500); // Delay each line by 500ms
+ });
+ // Remove the event listener once the animation is triggered
+ window.removeEventListener('scroll', handleLastBlockFade);
+ }
+ }
+
+ window.addEventListener('scroll', handleLastBlockFade);
+ window.addEventListener('load', handleLastBlockFade);
</script>
</body>
+
</html>
\ No newline at end of file
--
GitLab