Skip to content
Snippets Groups Projects
Commit 3f180c97 authored by HauErn Lien's avatar HauErn Lien
Browse files

Update file random.html

parent 752b4145
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">
<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>Home | Tsinghua - IGEM 2024</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Baskerville&display=swap');
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: 90% center;
background-repeat: no-repeat;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 1200px;
margin: 100px auto 0;
min-height: calc(100vh - 210px);
justify-content: center;
}
#first-block {
margin: 0 0 50vh 0;
width: 80%;
padding: 40px;
background-color: transparent;
box-shadow: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#first-block h2, #first-block p {
font-family: Baskerville, 'Baskerville Old Face', serif;
color: #fa8072;
opacity: 0;
transition: opacity 1s ease-in-out;
text-align: center;
font-style: italic;
}
#first-block h2 {
font-size: 3rem;
}
#first-block p {
font-size: 1.8rem;
transition-delay: 1s;
}
.card {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
width: 80%;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: flex-start;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.card img {
width: 45%;
height: auto;
border-radius: 5px;
margin-right: 20px;
}
.card-content {
flex: 1;
}
.card h2 {
color: #333;
margin-top: 0;
}
.card p {
color: #666;
}
.full-content {
display: none;
padding-top: 20px;
}
.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;
}
</style>
</head>
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
{% include 'menu.html' %}
<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>
</div>
<div class="card">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
<div class="card-content">
<h2>A patient's journey through IBD diagnosis and treatment</h2>
<p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer...</p>
<div class="full-content">
<p>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="card">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
<div class="card-content">
<h2>An animation director's struggle with IBD</h2>
<p>My symptoms began in 2017, with stomach cramps that left me too ill to perform every couple of months...</p>
<div class="full-content">
<p>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="card">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
<div class="card-content">
<h2>A fortunate IBD patient's story of remission and personal growth</h2>
<p>I consider myself a fortunate IBD patient, as I've remained in remission. Unlike many others on strict diets...</p>
<div class="full-content">
<p>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>
<div class="card">
<img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
<div class="card-content">
<h2>A patient battling both IBD and tuberculosis</h2>
<p>What could be worse than having IBD? Having both IBD and tuberculosis...</p>
<div class="full-content">
<p>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>
</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';
// Start the fade-in effect for the first block
const firstBlockTitle = document.querySelector('#first-block h2');
const firstBlockContent = document.querySelector('#first-block p');
firstBlockTitle.style.opacity = '1';
setTimeout(() => {
firstBlockContent.style.opacity = '1';
}, 1000);
}, 500);
}, 2000);
});
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function(e) {
if (e.target.closest('.full-content')) return;
const fullContent = this.querySelector('.full-content');
if (fullContent.style.display === 'none' || fullContent.style.display === '') {
fullContent.style.display = 'block';
} else {
fullContent.style.display = 'none';
}
});
});
</script>
</body>
</html>
\ No newline at end of file
</html>
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