home.html 11.13 KiB
{% extends "layout.html" %}
{% block title %}Home{% endblock %}
{% block lead %}<b>Welcome to iGEM 2024!</b>{% endblock %}
{% block page_content %}
<head>
<link rel="icon" href="https://static.igem.wiki/teams/5182/logo-forwebuse.ico" >
<link rel="stylesheet" href="\sjtu-biox-shanghai\static\animate.css">
</head>
<style type="text/css">
body{overflow-x:hidden; background-size: cover;
background-image: url(https://static.igem.wiki/teams/5182/mascot-sticker/backgr-3-black-forcut.webp),
url(https://static.igem.wiki/teams/5182/paper-rough2.webp);
background-origin: border-box;
background-attachment: scroll, scroll;
background-color: transparent, transparent;
background-position: 0px -80px,center;
background-repeat:no-repeat,repeat;
background-size:100% auto , cover;
}
.bg-dark { background-color: #ffffff00; }
.bg-hero { background-color: transparent;}
.nav-link:hover {
background-color:#ffffff00;
-webkit-animation: Glow 0.2s ease infinite alternate;
animation: Glow 0.2s ease infinite alternate;
}
.dropdown-menu {
background-color:#26204C ;
padding: 0px;
}
.dropdown-item {
color: white;
font-size: 1rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.dropdown-item:hover {
display: block;
background-color:#26204C;
color:white;
border-radius: 0.25rem;
-webkit-animation: Glow 0.2s ease infinite alternate;
animation: Glow 0.2s ease infinite alternate;
}
@-webkit-keyframes Glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff;
}
}
@keyframes Glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff; }
}
#vedio1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<body>
<!-- /*这是标题*/ -->
<div class="slide-in" style="display: flex; justify-content: center; position: relative; top: 120px;" >
<div style="text-align: start;line-height: 1.2;" >
<span style="font-weight: bold; font-size: 100pt; color: #c063f2;">X</span>
<span style="font-weight: bold; font-size: 100pt; color: #b58de0;">PCures</span>
<br>
<span style="font-weight: bold; font-size: 35pt; color: #c1b7f5;"><span style="color: #b689d4;">
X</span>eroderma
<span style="color: #b689d4;">P</span>igmentosum complementation group
<span style="color: #b689d4;">C</span></span>
<br>
<span style="font-weight: bold; font-size: 35pt; color: #c1b7f5;">
<span style="color: #b689d4;">U</span>ltraviolet
<span style="color: #b689d4;">R</span>esposive
g<span style="color: #b689d4;">E</span>netic
<span style="color: #b689d4;">S</span>witch</span>
</div>
</div>
<!-- /*贴纸crane1*/ -->
<div class="mascot-sticker" style="position: absolute; top: 480px; right:100px; ">
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/crane3.webp" >
</div>
<!-- 什么是xp？小标题 -->
<div style="position: relative; margin-top: 450px;display: flex; justify-content: center;">
<p class="homepage-subtitle" style="z-index: 4;">What is XP? </p>
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-ball.svg" style="position: absolute;
height:70px !important; width:auto; left:500px; top:-20px; z-index:3;">
</div>
<!-- xp患者示例图 -->
<div style="display: flex; justify-content: center; margin-top:50px;">
<img class="slide-in"
src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-forpatient.webp" style="width: 60%;
height:auto; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);">
</div>
<!-- xp简介 -->
<div style="position: relative; margin-top: 50px;">
<p class="homepage-text">Xeroderma Pigmentosum (XP) is a genetic disorder caused by defects in DNA repair mechanisms.
In affected individuals, cells are unable to effectively repair DNA damage from ultraviolet (UV) light,
resulting in the accumulation of UV-induced injuries. This condition is primarily characterized
by heightened sensitivity to sunlight and an increased risk of skin cancer, often accompanied by
other complications, including eye disorders and more.
</p>
<p class="homepage-text"> Patients commonly exhibit distinctive features such as dry skin, skin atrophy, checkerboard
pigmentation, telangiectasia, and the early onset of various skin tumors. Consequently,
this condition can lead to significant physical and emotional distress for those affected.
</p>
</div>
<!-- 黑夜&月光（背景图） -->
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-formoonnight.webp"
style="margin-top=500px;
position:absolute; width:100% !important; height:auto !important;left:0 !important;">
<!-- 不知道2025的igem还会不会搬前人代码。总之我在力所能及的范围内留下了注释 如果是屎山代码请不要骂我（骂了我也听不见） -->
<!-- 数据列举 -->
<div style="position: relative; margin-top: 400px;">
<div style="width: 50%; height: 100px; left: 100px !important; ">
<p class="homepage-moon" ><span class="moon-highlight"">1</span>
person suffers from XP for every
<span class="moon-highlight"">250,000</span> people.</p>
</div>
<img class="moon-sticker"
src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-people.webp">
<div style="width: 50%; height: 100px; left: 20%; ">
<p class="homepage-moon">Patients typically show symptoms of the disease around
<span class="moon-highlight"">1 year old</span>.</p>
</div>
<img class="moon-sticker" style="height:250px !important;"
src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-baby.webp">
<div style="width: 50%; height: 100px; left: 20%; ">
<p class="homepage-moon"><span class="moon-highlight"">60%</span> of patients do not survive past
<span class="moon-highlight"">20 years old</span>.</p>
</div>
<img class="moon-sticker" style="height:250px !important;"
src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-bed.webp">
<p class="homepage-moon" style="color: #f6f6f6;">The vast majority of patients must escape sunlight their entire lives
—— they can only wander under moonlight.</p>
<img class="moon-sticker" style="height:300px !important;right: -70% !important;"
src="https://static.igem.wiki/teams/5182/mascot-sticker/mascot-papercrane18.webp">
<!-- 烧焦的千纸鹤 -->
</div>
<!-- 我们能做什么? 小标题 -->
<div style="position: relative; margin-top: 200px;display: flex; justify-content: center;">
<p class="homepage-subtitle" style="z-index: 4;">So what can we do? </p>
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-ball.svg" style="position: absolute;
height:70px !important; width:auto; left:370px; top:-20px; z-index:3;">
</div>
<!-- gene switch 转场 -->
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-switch.webp" style="position: absolute;
width:100% !important; height:auto !important;left:0 !important;">
<!-- xpc介绍 -->
<div style="position: relative;margin-top: 800px;">
<p class="homepage-text">Our project focuses on Xeroderma Pigmentosum(XP) Complementation Group C,
which is caused by mutations in the XPC gene, leading to abnormal XPC DNA repair
proteins and consequently impairs global genome repair. XPC is also one of the most common types of XP.
</p>
<p class="homepage-text">The causes of XPC are directly linked to genetic mutations and ultraviolet (UV) exposure.
Therefore, our project approaches the issue from both genetic and UV perspectives by constructing
a UV-controlled Genetic Switch.
</p>
<p class="homepage-text">We aim to achieve two main objectives:</p>
<div style="position: relative; margin-top: 50px; padding: 20px; background-color: #ffffffb3;
border-radius: 15px;box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); margin-left: 8%;margin-right: 8%; ">
<p class="homepage-text" style="color: #4d2069;">
First, to introduce a normal XPC gene to express functional XPC protein;</p>
<p class="homepage-text" style="color: #4d2069;">Second, to create a genetic switch that responds to UV light, aiming to mitigate
the risks associated with the extrinsic delivery of non-integrating XPC genes into cytoplasm,
which may cause problems.
</p>
</div>
<div style="display: flex; justify-content: center;margin-top: 80px;">
<img src="https://static.igem.wiki/teams/5182/project/description/schematic-diagram.png" style="width: 60%;
height:auto; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);">
</div>
<p class="homepage-text" style="margin-top: 50px;">
A UV response mechanism has been reported in plants, where UV signals induce the monomerization
of UVR8 protein and its interaction with COP1, while RUP2 relieves this interaction. We introduced
this mechanism into mammalian cells by combining UVR8 with VP64 and COP1 with GAL4. Upon UV irradiation,
this system will be activated. In this process, COP1 aids in localization, and VP64 enhances the
expression of the CMV promoter, leading to the production of XPC and RUP2. The XPC protein will serve a
therapeutic role, while RUP2 acts as a negative feedback regulator to prevent overexpression.
</p>
<p class="homepage-text">
Our project proposes a novel optogenetic strategy for gene therapy.
We are developing a UV-B regulated gene expression system to enable controllable expression of the XPC
gene in patients, transforming harmful UV exposure into a therapeutic tool.
</p>
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/mascot-papercrane-bottle.webp"
class="mascot-sticker" style="height:250px !important; right:20% !important;">
</div>
<!-- 总而言之……（小标题） -->
<div style="position: relative; margin-top: 50px;display: flex; justify-content: center;">
<p class="homepage-subtitle" style="z-index: 4;">In conclusion... </p>
<img src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-ball.svg" style="position: absolute;
height:70px !important; width:auto; left:450px; top:-20px; z-index:3;">
</div>
<div style="position: relative; margin-top: 50px;">
<p class="homepage-text">On our journey to combat this disease, the purple sun stands not only as a symbol of life,
but also as a representation of our hopes for the future. We aspire, with determination and efforts,
to transform ultraviolet light from a harmful blade into a life-saving remedy, bringing new hope to
XP patients, allowing them to bask again in the warmth of the sun.
</p>
</div>
<div style="display: flex; justify-content: center; height: 100vh;">
<img class="mascot-sticker" src="https://static.igem.wiki/teams/5182/mascot-sticker/homepage-purplesun.webp"
style="position: absolute;width:60% !important;height:auto;">
</div>
<script src="{{ url_for('static', filename = 'homepage.js') }}"></script>
</body>
{% endblock %}