From f9dbcd30a67bdd97ad3d3ca62545e14318bb1ae0 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Tue, 1 Oct 2024 16:50:02 +0000
Subject: [PATCH] Update file home.html
---
wiki/pages/home.html | 195 +++++++++++++++++++++----------------------
1 file changed, 97 insertions(+), 98 deletions(-)
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 50a9763a..38d1120b 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -57,72 +57,88 @@
transition-delay: 1s;
}
+ .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;
+ }
+
+ .card-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ width: 100%;
+ margin-top: 50px;
+ }
+
.card {
- background-color: rgba(255, 255, 255, 0.7);
+ width: 45%;
+ margin-bottom: 20px;
+ background-color: #ffffff;
border-radius: 10px;
- padding: 20px;
- margin: 20px 0;
- width: 80%;
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- display: flex;
- align-items: flex-start;
+ overflow: hidden;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
- cursor: pointer;
- flex-direction: row;
}
.card:hover {
transform: translateY(-5px);
- box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
- .card-image {
- flex: 0 0 20%;
- margin-right: 20px;
+ .card-content {
+ display: flex;
+ align-items: center;
}
- .card-image img {
- width: 100%;
- height: auto;
- border-radius: 5px;
+ .card-image {
+ width: 100px;
+ height: 100px;
+ object-fit: cover;
+ margin-right: 20px;
}
- .card-content {
+ .card-text {
flex: 1;
- text-align: left;
+ padding: 20px 20px 20px 0;
}
- .card h2 {
+ .card-title {
+ font-size: 1.2rem;
+ margin-bottom: 10px;
color: #333;
- margin-top: 0;
}
- .card p {
+ .card-description {
+ font-size: 1rem;
color: #666;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
}
- .full-content {
- display: none;
- margin-top: 20px;
+ .card.expanded .card-description {
+ max-height: 500px;
}
- .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;
+ .read-more {
+ display: inline-block;
+ margin-top: 10px;
+ color: #fa8072;
+ cursor: pointer;
}
</style>
</head>
@@ -139,59 +155,45 @@
<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">
- <div class="card-image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
- </div>
- <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 class="card-container">
+ <div class="card">
+ <div class="card-content">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="Person 1" class="card-image">
+ <div class="card-text">
+ <h3 class="card-title">Overcoming Challenges</h3>
+ <p class="card-description">Living with IBD presents unique challenges, but with proper care and support, patients can lead fulfilling lives. This story explores the journey of resilience and hope.</p>
+ <span class="read-more">Read more</span>
+ </div>
</div>
</div>
- </div>
-
- <div class="card">
- <div class="card-image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
- </div>
- <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 class="card">
+ <div class="card-content">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="Person 2" class="card-image">
+ <div class="card-text">
+ <h3 class="card-title">Embracing New Normals</h3>
+ <p class="card-description">Adapting to life with IBD requires patience and understanding. Discover how individuals have found ways to thrive despite their condition.</p>
+ <span class="read-more">Read more</span>
+ </div>
</div>
</div>
- </div>
-
- <div class="card">
- <div class="card-image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
- </div>
- <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 class="card">
+ <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">
+ <h3 class="card-title">The Power of Community</h3>
+ <p class="card-description">Connect with others who understand your journey. Learn about support groups and resources available for IBD patients and their families.</p>
+ <span class="read-more">Read more</span>
+ </div>
</div>
</div>
- </div>
-
- <div class="card">
- <div class="card-image">
- <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
- </div>
- <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 class="card">
+ <div class="card-content">
+ <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="Person 4" class="card-image">
+ <div class="card-text">
+ <h3 class="card-title">Advances in Treatment</h3>
+ <p class="card-description">Stay informed about the latest developments in IBD research and treatment options. Hope is on the horizon with new therapies and management strategies.</p>
+ <span class="read-more">Read more</span>
+ </div>
</div>
</div>
</div>
@@ -217,15 +219,12 @@
}, 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';
- }
+ // Add click event listeners to the "Read more" spans
+ document.querySelectorAll('.read-more').forEach(button => {
+ button.addEventListener('click', function() {
+ const card = this.closest('.card');
+ card.classList.toggle('expanded');
+ this.textContent = card.classList.contains('expanded') ? 'Read less' : 'Read more';
});
});
</script>
--
GitLab