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

Update file home.html

parent a678e318
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tsinghua - IGEM 2024</title>
<style>
body {
font-family: Calibri, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://static.igem.wiki/teams/5187/art/bg.png');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.content-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.content-block {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 20px;
margin: 20px;
width: calc(66.66% - 40px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.content-block:hover {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: scale(1.02);
}
.content-block img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.content-block h2 {
color: #333;
text-align: center;
}
.content-block p {
color: #666;
text-align: center;
}
.full-content {
display: none;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<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/"/>
<title>Tsinghua - IGEM 2024</title>
<style>
body {
font-family: Calibri, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://static.igem.wiki/teams/5187/art/bg.png');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.content-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
max-width: 1200px;
margin: 60px auto 0; /* Added top margin for menu */
}
.content-block {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 20px;
margin: 20px;
width: calc(66.66% - 40px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.content-block:hover {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: scale(1.02);
}
.content-block img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.content-block h2 {
color: #333;
text-align: center;
}
.content-block p {
color: #666;
text-align: center;
}
.full-content {
display: none;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader-gif {
width: 150px;
height: 150px;
}
.scroll-guide {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 100px;
background-image: url('https://static.igem.wiki/teams/5187/art/icon.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: float 2s ease-in-out infinite;
z-index: 1000;
}
.scroll-guide::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 20px;
height: 20px;
background: radial-gradient(circle, rgba(144,238,144,0.8) 0%, rgba(144,238,144,0) 70%);
border-radius: 50%;
animation: release 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes release {
0%, 100% { opacity: 0; transform: translate(-50%, 0); }
50% { opacity: 1; transform: translate(-50%, 10px); }
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="content-block" onclick="showModal(this)">
<h2>Do you regret not giving your fullest?</h2>
<div class="full-content">
<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="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
<div class="content-block" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
<p>A patient's journey through IBD diagnosis and treatment.</p>
<div class="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>
</div>
</div>
{% include 'menu.html' %}
<div class="content-block" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
<p>An animation director's struggle with IBD.</p>
<div class="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>
</div>
</div>
<div class="scroll-guide"></div>
<div class="content-block" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
<p>A fortunate IBD patient's story of remission and personal growth.</p>
<div class="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>
</div>
</div>
<div class="content-wrapper">
<div class="content-block" onclick="showModal(this)">
<h2>Do you regret not giving your fullest?</h2>
<div class="full-content">
<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" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
<p>A patient battling both IBD and tuberculosis.</p>
<div class="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>
</div>
</div>
<div class="content-block" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
<p>A patient's journey through IBD diagnosis and treatment.</p>
<div class="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>
</div>
</div>
<div class="content-block" onclick="showModal(this)">
<h2>The Rise of IBD in China</h2>
<p>IBD incidence in China has increased significantly from 1990 to 2019.</p>
<div class="full-content">
<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>
<h2>MuScure offers an APE solution.</h2>
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic5.png" alt="MuScure Solution" style="width: 30%; max-width: 300px;">
</div>
</div>
<!-- Add more content blocks here, following the same pattern -->
<div class="content-block" onclick="showModal(this)">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic6.png" alt="Centered Image" style="border-radius: 30px;">
<p>Our innovative approach to IBD treatment.</p>
<div class="full-content">
<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>
<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>
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic7.png" alt="Treatment Inspiration" style="border-radius: 30px; width: 30%; max-width: 200px;">
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div id="modalContent"></div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div id="modalContent"></div>
</div>
</div>
{% include 'footer.html' %}
<script>
window.addEventListener('load', function() {
const loaderContainer = document.querySelector('.loader-container');
setTimeout(function() {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
loaderContainer.style.display = 'none';
}, 500);
}, 2000);
});
window.addEventListener('scroll', function() {
var scrollGuide = document.querySelector('.scroll-guide');
var scrollPosition = window.scrollY;
var windowHeight = window.innerHeight;
var documentHeight = document.documentElement.scrollHeight;
if (scrollPosition + windowHeight >= documentHeight - 100) {
scrollGuide.style.display = 'none';
} else {
scrollGuide.style.display = 'block';
}
});
<script>
function showModal(element) {
var modal = document.getElementById("myModal");
var modalContent = document.getElementById("modalContent");
var fullContent = element.querySelector('.full-content').innerHTML;
modalContent.innerHTML = fullContent;
modal.style.display = "block";
}
function showModal(element) {
var modal = document.getElementById("myModal");
var modalContent = document.getElementById("modalContent");
var fullContent = element.querySelector('.full-content').innerHTML;
modalContent.innerHTML = fullContent;
modal.style.display = "block";
}
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</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