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

Update 4 files 

- /wiki/pages/random.html
- /wiki/pages/tryhomepage.html
- /wiki/pages/hardware.html
- /wiki/menu.html
parent 88f794bb
No related branches found
No related tags found
No related merge requests found
Pipeline #499971 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
wiki/menu.html
+ 0
− 2
View file @ b74f6e73
......@@ -200,8 +200,6 @@
<ul class="son">
<li><a href="{{ url_for('pages', page='team') }}">Roster</a></li>
<li><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
<li><a href="{{ url_for('pages', page='tryhomepage') }}">Try</a></li>
<li><a href="{{ url_for('pages', page='random') }}">ran</a></li>
</ul>
</li>
</ul>
......
wiki/pages/hardware.html
+ 3
− 7
View file @ b74f6e73
......@@ -58,17 +58,13 @@
<hr>
<p>Our project presents an “APE” solution—“Affordable, Potential, and Efficient”—for IBD patients. This solution aims to reduce the frequency of acute phases through a non-invasive, highly accessible, and self-automated device. </p>
<div class="image-container" style="display: flex; flex-direction: column; align-items: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig1.png" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 400px;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig9.jpg" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 400px;">
</div>
<p>Rooted in the rich history of Chinese incense culture, the scented sachet has played a significant role beyond mere fragrance; it carries cultural significance and reflects various aesthetic concepts throughout history. Notably, the Tang Dynasty’s openwork scented sachets, crafted from silver and designed to burn incense without producing sparks or ashes, exemplify this tradition. Historically, sachets filled with Chinese herbs served medicinal purposes, effectively preventing airborne diseases during the Han Dynasty. Drawing inspiration from these traditions, we've developed our “incense + IBD” concept.</p>
<div class="image-container" style="display: flex; flex-direction: column; align-items: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig2.png" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 400px;">
</div>
\
<p>Due to the nature of muscone, we have chosen alcohol as the solvent of muscone. The muscone-alcohol mixture undergoes emulsification via ultrasonication, a reliable technique for homogenizing liquid and solid suspensions. The physical effects of ultrasound facilitate the disruption of oil droplets, resulting in stable oil-in-water emulsions with small droplet sizes.</p>
<p>Our device offers various power modes, allowing users to control muscone concentration and treatment initiation. For user convenience, the device is housed within an accessible sachet bag.</p>
<div class="image-container" style="display: flex; flex-direction: column; align-items: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig3.png" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 400px;">
</div>
\
</div>
</div>
......
wiki/pages/random.html deleted 100644 → 0
+ 0
− 228
View file @ 88f794bb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<title>Home | Tsinghua - IGEM 2024</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
.poppins-bold {
font-family: "Poppins", system-ui;
font-weight: 700;
font-style: normal;
}
}
body {
line-height: 1.6;
margin: 0;
padding: 0;
background-image: url('https://static.igem.wiki/teams/5187/ran-1.jpg');
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);
}
#first-block {
margin: 0 0 50vh 0;
width: 80%;
padding: 40px;
background-color: transparent;
box-shadow: none;
text-align: center;
}
#first-block h2, #first-block p {
color: #161616;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#first-block h2 {
font-size: 3rem;
}
#first-block p {
font-size: 1.8rem;
transition-delay: 1.5s;
}
.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-direction: column;
width: 100%;
margin-top: 50px;
}
.card {
width: 100%;
margin-bottom: 30px;
background-color: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.card-content {
display: flex;
align-items: flex-start;
}
.card-image {
width: 200px;
height: 200px;
object-fit: cover;
margin-right: 30px;
}
.card-text {
flex: 1;
padding: 30px 30px 30px 0;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.card-description {
font-size: 1.1rem;
color: #666;
max-height: 100px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.card.expanded .card-description {
max-height: 1000px;
}
</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-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. Through innovative treatments and a strong support network, many individuals have found ways to manage their symptoms and improve their quality of life. From dietary adjustments to stress management techniques, discover the strategies that have helped others navigate the complexities of IBD.</p>
</div>
</div>
</div>
<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. From career adjustments to lifestyle changes, learn about the creative solutions that have helped people with IBD redefine their "normal." This section includes personal stories of triumph, practical tips for daily living, and insights into maintaining relationships while managing IBD.</p>
</div>
</div>
</div>
<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. Discover the benefits of joining an IBD community, from sharing experiences to accessing valuable information. This section highlights various support networks, online forums, and local groups that provide emotional support, practical advice, and a sense of belonging to those affected by IBD.</p>
</div>
</div>
</div>
<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. This section covers recent breakthroughs in IBD treatment, including biological therapies, personalized medicine approaches, and ongoing clinical trials. Learn about emerging technologies and how they're shaping the future of IBD care, offering new possibilities for symptom management and improved quality of life.</p>
</div>
</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);
});
// Add click event listeners to the cards
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function() {
this.classList.toggle('expanded');
});
});
</script>
</body>
</html>
\ No newline at end of file
wiki/pages/tryhomepage.html deleted 100644 → 0
+ 0
− 145
View file @ 88f794bb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<title>Tsinghua - IGEM 2024</title>
<style>
h1 {
margin: 0;
padding: 0;
box-sizing: border-box;
.poppins-bold {
font-family: "Poppins", system-ui;
font-weight: 700;
font-style: normal;
}
font-optical-sizing: auto;
font-weight: 438;
font-style: normal;
font-size: 70px;
}
header{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 80px;
}
header h4 {
position: absolute;
left: 10%;
bottom: 1rem;
font-size: 1.6rem;
}
/* Splash screen */
.intro{
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
transition: 1。5s;
background-image: url("https://static.igem.wiki/teams/5187/bg-main-5.jpg");
background-size: cover; /* Makes the image cover the entire area */
background-repeat: no-repeat; /* Prevents the image from repeating */
background-position: center; /* Centers the image */
height: 100vh; /* Ensures the body takes up the full height of the viewport */
margin: 0; /* Removes default margin */
}
.logo-header{
position: absolute;
top: 40%;
left: 15%;
transform: translate(-50%, -50%, -50%);
color: #161616;
}
.logo{
position: relative;
display: inline-block;
bottom: -20px;
opacity: 0;
}
.logo.active{
bottom: 0;
opacity: 1;
transition: ease-in-out 0.5s;
}
.logo.fade{
bottom: 150px;
opacity: 0;
transition: ease-in-out 0.5s;
}
.slide-up {
transform: translateY(-100vh); /* Slide up off the screen */
transition: transform 0.5s ease; /* Smooth transition */
}
</style>
</head>
<body>
<div class="intro">
<h1 class="logo-header">
<span class="logo"> Inhale, </span> <span class="logo">heal,</span><span class="logo">repeat.</span>
</h1>
</div>
<script>
let intro = document.querySelector('.intro');
let logo = document.querySelector('.logo-header');
let logoSpan = document.querySelectorAll('.logo');
let nextPage = '/tsinghua/random';
let link = document.createElement('link');
link.rel = 'prefetch'; // Preload the page
link.href = nextPage;
document.head.appendChild(link);
window.addEventListener('DOMContentLoaded', ()=>{
setTimeout(()=>{
logoSpan.forEach((span, idx)=>{
setTimeout(()=>{
span.classList.add('active');
}, (idx + 1) * 400)
});
setTimeout(()=>{
logoSpan.forEach((span, idx)=>{
setTimeout(()=>{
span.classList.remove('active');
span.classList.add('fade');
}, (idx + 1) * 50)
})
}, 2000);
setTimeout(()=>{
intro.style.top = '-100vh';
setTimeout(()=>{
intro.classList.add('slide-up');
})
setTimeout(()=>{
window.location.href = nextPage;
}, 1500);
}, 2300)
})
})
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment