Skip to content
Snippets Groups Projects
Commit a053a867 authored by Haoran Cai's avatar Haoran Cai
Browse files

Update notebook.html

parent 2bec7a97
No related branches found
No related tags found
No related merge requests found
Pipeline #355915 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
wiki/pages/notebook.html
+ 1540
− 0
View file @ a053a867
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://static.igem.wiki/teams/4205/wiki/logo.svg">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/" />
<!-- Bootstrap CSS -->
<!-- <link href="static/bootstrap.min.css" rel="stylesheet"> -->
<!-- Custom CSS -->
<!-- <link href="static/style.css" rel="stylesheet">
-->
<!-- nav CSS -->
<link rel="stylesheet" href="static/nagivation.css">
<!-- animation CSS -->
<link href="static/animation-4.1.1.min.css" rel="stylesheet">
<!-- inside-page CSS -->
<link rel="stylesheet" href="static/inside-page.css">
<link rel="stylesheet" href="static/back-to-top.css">
<link rel="stylesheet" href="static/loading.css">
<link rel="stylesheet" href="static/hover.css">
<link rel="stylesheet" href="static/table.css">
<link rel="stylesheet" href="static/background.css">
<!-- footer CSS-->
<link rel="stylesheet" href="static/footer.css">
<style>
.none {
display: none;
}
section.name {
position: relative;
height: 100vh;
}
.bg-text{
position: absolute;
top: 0;
}
.name svg text {
letter-spacing: 10px;
stroke: #ffffff;
font-size: 130px;
font-weight: 700;
stroke-width: 2;
animation: textAnimate 5s infinite alternate;
font-family: 'Quicksand-bold';
text-shadow: 5px 5px 5px rgb(0, 0, 0, .6);
}
@keyframes textAnimate {
0% {
stroke-dasharray: 0 90%;
stroke-dashoffset: 20%;
fill: whitesmoke;
}
100% {
stroke-dasharray: 50% 0;
stroke-dashoffset: -20%;
fill: #89b9f19f
}
}
.element::-webkit-scrollbar {
display: none;
}
</style>
<link rel="stylesheet" href="static/notebook.css">
<style>
.background{
background: url(https://static.igem.wiki/teams/4205/wiki/banner/note.jpg) no-repeat center center;
background-attachment: fixed;
background-size: cover;
}
.note-container{
position: relative;
display: flex;
flex-wrap: wrap;
background-color: #e1e6eb;
border: 2px solid #253b6e;
width: 100%;
height: fit-content;
border-radius: 20px;
box-shadow: 9px 6px 12px rgb(0,0,0,0.3);
margin: 50px 0;
width: 90%;
margin: 0 auto;
}
#display_zone h2,#display_zone h3{
color:var(--dark-blue);
font-family: 'Louis';
}
#display_zone .text{
font-size: 2.6vh;
}
</style>
<title>Notebook | NJMU-China - iGEM 2022</title>
</head>
<body>
<!--header-->
<!--
-->
<div class="loading">
<div class="load-container">
<img src="https://static.igem.wiki/teams/4205/wiki/loading.gif" alt="loading">
</div>
<div class="loader-text">
<!-- 10个div -->
<div>L</div>
<div>O</div>
<div>A</div>
<div>D</div>
<div>I</div>
<div>N</div>
<div>G</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<section class="name none body">
<div class="stars-wrapper">
<svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
<circle class="star" cx="80.09%" cy="58.37%" r="1.1"></circle>
<circle class="star" cx="0.46%" cy="1.24%" r="0.9"></circle>
<circle class="star" cx="76.34%" cy="12.19%" r="1.1"></circle>
<circle class="star" cx="58.03%" cy="10.94%" r="0.8"></circle>
<circle class="star" cx="52.78%" cy="91.45%" r="0.6"></circle>
<circle class="star" cx="90.57%" cy="82.32%" r="0.6"></circle>
<circle class="star" cx="73.74%" cy="72.06%" r="1"></circle>
<circle class="star" cx="19.2%" cy="78.72%" r="1.1"></circle>
<circle class="star" cx="31.93%" cy="77.84%" r="1.5"></circle>
<circle class="star" cx="48.86%" cy="51.9%" r="0.5"></circle>
<circle class="star" cx="5.36%" cy="9.61%" r="1.2"></circle>
<circle class="star" cx="5.57%" cy="19.65%" r="0.9"></circle>
<circle class="star" cx="30.48%" cy="10.65%" r="1.2"></circle>
<circle class="star" cx="64.42%" cy="14.72%" r="1.4"></circle>
<circle class="star" cx="16.2%" cy="82.35%" r="0.5"></circle>
<circle class="star" cx="63.09%" cy="44.25%" r="1.2"></circle>
<circle class="star" cx="42.09%" cy="61.77%" r="0.6"></circle>
<circle class="star" cx="37.1%" cy="52.96%" r="0.8"></circle>
<circle class="star" cx="54.67%" cy="46.69%" r="1.1"></circle>
<circle class="star" cx="95.92%" cy="89.68%" r="0.9"></circle>
<circle class="star" cx="91.92%" cy="81.34%" r="0.6"></circle>
<circle class="star" cx="38.47%" cy="78.94%" r="0.7"></circle>
<circle class="star" cx="80.08%" cy="84.92%" r="1.2"></circle>
<circle class="star" cx="27.37%" cy="9.47%" r="0.7"></circle>
<circle class="star" cx="9.81%" cy="27.07%" r="1"></circle>
<circle class="star" cx="22.74%" cy="62.18%" r="0.7"></circle>
<circle class="star" cx="29.29%" cy="2.27%" r="1.3"></circle>
<circle class="star" cx="41.05%" cy="80.39%" r="1.1"></circle>
<circle class="star" cx="8.75%" cy="21.19%" r="1.2"></circle>
<circle class="star" cx="99.42%" cy="60.55%" r="1.3"></circle>
<circle class="star" cx="38.27%" cy="65.69%" r="1"></circle>
<circle class="star" cx="83.38%" cy="89.06%" r="1.1"></circle>
<circle class="star" cx="85.74%" cy="8.59%" r="1.4"></circle>
<circle class="star" cx="95.77%" cy="76.14%" r="0.7"></circle>
<circle class="star" cx="82.62%" cy="30.43%" r="0.5"></circle>
<circle class="star" cx="37.3%" cy="9.18%" r="0.5"></circle>
<circle class="star" cx="75.89%" cy="22.4%" r="1.5"></circle>
<circle class="star" cx="88.67%" cy="39.85%" r="0.6"></circle>
<circle class="star" cx="0.09%" cy="100%" r="1.3"></circle>
<circle class="star" cx="80.4%" cy="40.8%" r="0.8"></circle>
<circle class="star" cx="14.84%" cy="85.07%" r="1"></circle>
<circle class="star" cx="45.8%" cy="41.66%" r="0.6"></circle>
<circle class="star" cx="34.09%" cy="47.77%" r="1.5"></circle>
<circle class="star" cx="38.71%" cy="16.26%" r="1.2"></circle>
<circle class="star" cx="32.29%" cy="77.33%" r="1.3"></circle>
<circle class="star" cx="64.98%" cy="38.48%" r="0.6"></circle>
<circle class="star" cx="52.01%" cy="54.4%" r="1.2"></circle>
<circle class="star" cx="85.95%" cy="50.91%" r="1.2"></circle>
<circle class="star" cx="5.8%" cy="53.26%" r="1.3"></circle>
<circle class="star" cx="22.81%" cy="38.09%" r="1.4"></circle>
<circle class="star" cx="11.21%" cy="6.08%" r="0.5"></circle>
<circle class="star" cx="60.81%" cy="65.87%" r="1"></circle>
<circle class="star" cx="87.69%" cy="69.93%" r="0.7"></circle>
<circle class="star" cx="13.58%" cy="46.91%" r="1.2"></circle>
<circle class="star" cx="99%" cy="6.2%" r="0.7"></circle>
<circle class="star" cx="51.6%" cy="32.09%" r="0.7"></circle>
<circle class="star" cx="47.54%" cy="20.98%" r="0.9"></circle>
<circle class="star" cx="82.56%" cy="92.52%" r="1.1"></circle>
<circle class="star" cx="63.14%" cy="43.93%" r="0.6"></circle>
<circle class="star" cx="45.68%" cy="14.5%" r="1.1"></circle>
<circle class="star" cx="10.86%" cy="21.85%" r="0.8"></circle>
<circle class="star" cx="84.4%" cy="3.4%" r="1"></circle>
<circle class="star" cx="75.88%" cy="97.15%" r="0.8"></circle>
<circle class="star" cx="25.75%" cy="8.19%" r="1.1"></circle>
<circle class="star" cx="19.18%" cy="66.58%" r="1.5"></circle>
<circle class="star" cx="88.78%" cy="61.2%" r="0.7"></circle>
<circle class="star" cx="32.47%" cy="0.01%" r="0.6"></circle>
<circle class="star" cx="84.38%" cy="41.2%" r="0.9"></circle>
<circle class="star" cx="66.33%" cy="41.77%" r="1"></circle>
<circle class="star" cx="25.04%" cy="87.88%" r="1"></circle>
<circle class="star" cx="71.12%" cy="89.26%" r="1"></circle>
<circle class="star" cx="14.38%" cy="66.74%" r="1"></circle>
<circle class="star" cx="38.42%" cy="88.73%" r="0.7"></circle>
<circle class="star" cx="77.62%" cy="46%" r="0.7"></circle>
<circle class="star" cx="72.33%" cy="51.09%" r="0.7"></circle>
<circle class="star" cx="91.41%" cy="34.87%" r="0.5"></circle>
<circle class="star" cx="78.46%" cy="56.02%" r="1.3"></circle>
<circle class="star" cx="51.58%" cy="91.83%" r="1"></circle>
<circle class="star" cx="16.06%" cy="46.42%" r="0.6"></circle>
<circle class="star" cx="61.21%" cy="12.52%" r="1.2"></circle>
<circle class="star" cx="4%" cy="42.33%" r="1.5"></circle>
<circle class="star" cx="12.7%" cy="71.96%" r="1"></circle>
<circle class="star" cx="46.69%" cy="48.82%" r="0.8"></circle>
<circle class="star" cx="44.38%" cy="18.71%" r="1.3"></circle>
<circle class="star" cx="17.78%" cy="44.18%" r="0.8"></circle>
<circle class="star" cx="14.5%" cy="19.74%" r="0.7"></circle>
<circle class="star" cx="43.4%" cy="56.16%" r="0.7"></circle>
<circle class="star" cx="41.21%" cy="8.5%" r="0.5"></circle>
<circle class="star" cx="57.24%" cy="39.13%" r="1.3"></circle>
<circle class="star" cx="80.36%" cy="86.48%" r="1.5"></circle>
<circle class="star" cx="0.04%" cy="69.58%" r="1"></circle>
<circle class="star" cx="27.74%" cy="59.66%" r="0.5"></circle>
<circle class="star" cx="98.53%" cy="9.96%" r="1.1"></circle>
<circle class="star" cx="23.16%" cy="18.53%" r="1.2"></circle>
<circle class="star" cx="22.36%" cy="94.16%" r="0.8"></circle>
<circle class="star" cx="41.54%" cy="39.01%" r="1.3"></circle>
<circle class="star" cx="16.13%" cy="52.27%" r="1"></circle>
<circle class="star" cx="68.93%" cy="46.81%" r="1.1"></circle>
<circle class="star" cx="2.18%" cy="25.7%" r="0.9"></circle>
<circle class="star" cx="33.76%" cy="89.45%" r="1.1"></circle>
<circle class="star" cx="62.06%" cy="77.78%" r="0.6"></circle>
<circle class="star" cx="13.67%" cy="73.81%" r="1.4"></circle>
<circle class="star" cx="87.55%" cy="94.96%" r="1.3"></circle>
<circle class="star" cx="11.7%" cy="10.29%" r="1.3"></circle>
<circle class="star" cx="25.19%" cy="12.21%" r="1.1"></circle>
<circle class="star" cx="70.82%" cy="5.02%" r="1.4"></circle>
<circle class="star" cx="17.06%" cy="17.17%" r="1.2"></circle>
<circle class="star" cx="12.02%" cy="78.29%" r="0.6"></circle>
<circle class="star" cx="82.11%" cy="9.42%" r="1"></circle>
<circle class="star" cx="63.85%" cy="34.22%" r="1.4"></circle>
<circle class="star" cx="52.3%" cy="1.21%" r="1.5"></circle>
<circle class="star" cx="14.04%" cy="98.25%" r="0.8"></circle>
<circle class="star" cx="52.46%" cy="71.85%" r="1.4"></circle>
<circle class="star" cx="31.36%" cy="70.58%" r="0.9"></circle>
<circle class="star" cx="65.77%" cy="54.44%" r="1.4"></circle>
<circle class="star" cx="4.4%" cy="65.26%" r="1.1"></circle>
<circle class="star" cx="46.62%" cy="96.28%" r="1.4"></circle>
<circle class="star" cx="7.89%" cy="49.73%" r="1.4"></circle>
<circle class="star" cx="58.19%" cy="5.06%" r="0.7"></circle>
<circle class="star" cx="57.5%" cy="13.8%" r="1.5"></circle>
<circle class="star" cx="9.38%" cy="81.16%" r="1.1"></circle>
<circle class="star" cx="89.87%" cy="1.08%" r="0.5"></circle>
<circle class="star" cx="90.72%" cy="12.11%" r="1"></circle>
<circle class="star" cx="28.34%" cy="89.48%" r="0.6"></circle>
<circle class="star" cx="95.23%" cy="37.79%" r="0.8"></circle>
<circle class="star" cx="62.57%" cy="50.59%" r="0.8"></circle>
<circle class="star" cx="18.54%" cy="15.47%" r="0.5"></circle>
<circle class="star" cx="0.1%" cy="56.34%" r="0.6"></circle>
<circle class="star" cx="7.89%" cy="90.93%" r="1.1"></circle>
<circle class="star" cx="39.43%" cy="71.27%" r="0.6"></circle>
<circle class="star" cx="93.6%" cy="89.36%" r="1.3"></circle>
<circle class="star" cx="87.49%" cy="73.83%" r="1.4"></circle>
<circle class="star" cx="54.68%" cy="60.04%" r="1.4"></circle>
<circle class="star" cx="37.87%" cy="20.89%" r="0.7"></circle>
<circle class="star" cx="47.37%" cy="12.66%" r="1.3"></circle>
<circle class="star" cx="65.79%" cy="33.59%" r="1.3"></circle>
<circle class="star" cx="91.49%" cy="95.8%" r="1"></circle>
<circle class="star" cx="26.77%" cy="22.06%" r="0.8"></circle>
<circle class="star" cx="64.02%" cy="17.64%" r="1.4"></circle>
<circle class="star" cx="11.86%" cy="55.13%" r="0.8"></circle>
<circle class="star" cx="48.46%" cy="72.04%" r="0.8"></circle>
<circle class="star" cx="53.22%" cy="54.85%" r="1.1"></circle>
<circle class="star" cx="49.35%" cy="71.49%" r="1.3"></circle>
<circle class="star" cx="82.37%" cy="53.55%" r="0.8"></circle>
<circle class="star" cx="89.65%" cy="2.78%" r="1"></circle>
<circle class="star" cx="90.64%" cy="66.15%" r="0.9"></circle>
<circle class="star" cx="15.99%" cy="25.04%" r="1.1"></circle>
<circle class="star" cx="79.97%" cy="14.07%" r="0.8"></circle>
<circle class="star" cx="14.14%" cy="23.3%" r="0.7"></circle>
<circle class="star" cx="94.27%" cy="52.93%" r="1.1"></circle>
<circle class="star" cx="14.63%" cy="72.38%" r="0.8"></circle>
<circle class="star" cx="63.98%" cy="47.4%" r="1.4"></circle>
<circle class="star" cx="96.38%" cy="48.23%" r="0.6"></circle>
<circle class="star" cx="44.47%" cy="1.21%" r="1.5"></circle>
<circle class="star" cx="46.18%" cy="87%" r="0.8"></circle>
<circle class="star" cx="72.31%" cy="24.79%" r="1"></circle>
<circle class="star" cx="78.38%" cy="30.21%" r="1.5"></circle>
<circle class="star" cx="21.8%" cy="22.08%" r="1.4"></circle>
<circle class="star" cx="45.33%" cy="11.72%" r="0.7"></circle>
<circle class="star" cx="56.4%" cy="71.19%" r="0.8"></circle>
<circle class="star" cx="12.25%" cy="86.23%" r="1.2"></circle>
<circle class="star" cx="67.3%" cy="55.69%" r="0.7"></circle>
<circle class="star" cx="58.81%" cy="93.78%" r="0.5"></circle>
<circle class="star" cx="15.4%" cy="60.19%" r="0.7"></circle>
<circle class="star" cx="97.11%" cy="35.86%" r="1.3"></circle>
<circle class="star" cx="67.43%" cy="65.35%" r="1.4"></circle>
<circle class="star" cx="11.38%" cy="38.21%" r="1.4"></circle>
<circle class="star" cx="21.41%" cy="86.74%" r="0.8"></circle>
<circle class="star" cx="5.54%" cy="4.68%" r="1.5"></circle>
<circle class="star" cx="15.68%" cy="72.55%" r="1.2"></circle>
<circle class="star" cx="68.37%" cy="89.38%" r="1.2"></circle>
<circle class="star" cx="91.39%" cy="51.24%" r="1.4"></circle>
<circle class="star" cx="27.87%" cy="97.9%" r="0.5"></circle>
<circle class="star" cx="84.25%" cy="68.96%" r="0.6"></circle>
<circle class="star" cx="6.87%" cy="64.44%" r="0.8"></circle>
<circle class="star" cx="43.54%" cy="64.37%" r="0.6"></circle>
<circle class="star" cx="39.12%" cy="3.93%" r="0.5"></circle>
<circle class="star" cx="78.25%" cy="13.74%" r="0.9"></circle>
<circle class="star" cx="8.81%" cy="90.66%" r="0.9"></circle>
<circle class="star" cx="29.55%" cy="26.11%" r="0.9"></circle>
<circle class="star" cx="34.5%" cy="83.17%" r="1.4"></circle>
<circle class="star" cx="86.02%" cy="99.85%" r="0.5"></circle>
<circle class="star" cx="53.68%" cy="50.89%" r="0.8"></circle>
<circle class="star" cx="12.45%" cy="91.72%" r="1.3"></circle>
<circle class="star" cx="45.44%" cy="14.05%" r="1"></circle>
<circle class="star" cx="88.21%" cy="85.87%" r="0.8"></circle>
<circle class="star" cx="45.69%" cy="60.3%" r="0.9"></circle>
<circle class="star" cx="63.83%" cy="99.07%" r="1.2"></circle>
<circle class="star" cx="98.35%" cy="13.44%" r="1.2"></circle>
<circle class="star" cx="49.31%" cy="15.09%" r="1.5"></circle>
<circle class="star" cx="59.58%" cy="61.1%" r="1.1"></circle>
<circle class="star" cx="78.36%" cy="44.7%" r="0.8"></circle>
<circle class="star" cx="94.85%" cy="33.51%" r="0.9"></circle>
<circle class="star" cx="90.7%" cy="64.53%" r="0.8"></circle>
<circle class="star" cx="7.29%" cy="44.21%" r="1.2"></circle>
<circle class="star" cx="4.95%" cy="6.15%" r="1.1"></circle>
<circle class="star" cx="67.37%" cy="53.5%" r="0.5"></circle>
<circle class="star" cx="11.06%" cy="58.91%" r="0.7"></circle>
<circle class="star" cx="50.82%" cy="9.3%" r="1"></circle>
<circle class="star" cx="61.95%" cy="0.82%" r="1.4"></circle>
</svg>
<svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
<circle class="star" cx="0.13%" cy="21.81%" r="0.9"></circle>
<circle class="star" cx="56.04%" cy="39.24%" r="0.8"></circle>
<circle class="star" cx="87.46%" cy="94.07%" r="1.5"></circle>
<circle class="star" cx="63.17%" cy="10.4%" r="0.7"></circle>
<circle class="star" cx="7.72%" cy="65.72%" r="0.7"></circle>
<circle class="star" cx="48.28%" cy="40.47%" r="1.4"></circle>
<circle class="star" cx="80.74%" cy="2.05%" r="1.1"></circle>
<circle class="star" cx="72.9%" cy="68.67%" r="1.1"></circle>
<circle class="star" cx="89.82%" cy="19.25%" r="0.7"></circle>
<circle class="star" cx="47.99%" cy="82.19%" r="1"></circle>
<circle class="star" cx="8.94%" cy="48.24%" r="1"></circle>
<circle class="star" cx="30.63%" cy="52.58%" r="0.7"></circle>
<circle class="star" cx="65.36%" cy="67.57%" r="1"></circle>
<circle class="star" cx="31.38%" cy="64.11%" r="0.8"></circle>
<circle class="star" cx="96.22%" cy="42.88%" r="1.5"></circle>
<circle class="star" cx="24.43%" cy="8.65%" r="0.8"></circle>
<circle class="star" cx="39.21%" cy="20.09%" r="1.3"></circle>
<circle class="star" cx="74.3%" cy="17.84%" r="1.1"></circle>
<circle class="star" cx="37.72%" cy="8.54%" r="0.7"></circle>
<circle class="star" cx="92.73%" cy="28.84%" r="0.6"></circle>
<circle class="star" cx="95.36%" cy="83.94%" r="1.2"></circle>
<circle class="star" cx="17.06%" cy="61.98%" r="0.6"></circle>
<circle class="star" cx="67.38%" cy="82.06%" r="0.6"></circle>
<circle class="star" cx="25.32%" cy="77.94%" r="0.9"></circle>
<circle class="star" cx="68.45%" cy="82.14%" r="0.9"></circle>
<circle class="star" cx="73.34%" cy="93.66%" r="1.5"></circle>
<circle class="star" cx="17.32%" cy="28.05%" r="0.5"></circle>
<circle class="star" cx="64.32%" cy="33.59%" r="1.1"></circle>
<circle class="star" cx="97.94%" cy="75.17%" r="1.2"></circle>
<circle class="star" cx="95.51%" cy="12.47%" r="1.4"></circle>
<circle class="star" cx="75.7%" cy="59.68%" r="1.5"></circle>
<circle class="star" cx="17.81%" cy="5.63%" r="0.7"></circle>
<circle class="star" cx="47.82%" cy="36.86%" r="1.5"></circle>
<circle class="star" cx="39.5%" cy="28.7%" r="1.1"></circle>
<circle class="star" cx="59.63%" cy="66.13%" r="1.2"></circle>
<circle class="star" cx="33.62%" cy="79.16%" r="0.7"></circle>
<circle class="star" cx="36.95%" cy="27.09%" r="0.6"></circle>
<circle class="star" cx="71.9%" cy="27.29%" r="0.9"></circle>
<circle class="star" cx="84.22%" cy="77.11%" r="1.3"></circle>
<circle class="star" cx="41.83%" cy="35.51%" r="1.3"></circle>
<circle class="star" cx="27.72%" cy="8.47%" r="1.5"></circle>
<circle class="star" cx="32.34%" cy="66.08%" r="1.4"></circle>
<circle class="star" cx="55.17%" cy="34.47%" r="1.2"></circle>
<circle class="star" cx="85.81%" cy="2.66%" r="1"></circle>
<circle class="star" cx="50.19%" cy="52.22%" r="1"></circle>
<circle class="star" cx="79.56%" cy="93.32%" r="1"></circle>
<circle class="star" cx="29.72%" cy="62.83%" r="0.5"></circle>
<circle class="star" cx="41.36%" cy="36.05%" r="0.7"></circle>
<circle class="star" cx="76.89%" cy="48.32%" r="0.6"></circle>
<circle class="star" cx="72.08%" cy="51.62%" r="1.4"></circle>
<circle class="star" cx="50.55%" cy="90.5%" r="0.6"></circle>
<circle class="star" cx="59.57%" cy="3.41%" r="1.3"></circle>
<circle class="star" cx="86.03%" cy="76.43%" r="0.6"></circle>
<circle class="star" cx="86.5%" cy="18.47%" r="0.9"></circle>
<circle class="star" cx="31.87%" cy="70.1%" r="0.9"></circle>
<circle class="star" cx="34.18%" cy="40.71%" r="0.8"></circle>
<circle class="star" cx="72.55%" cy="55.58%" r="0.5"></circle>
<circle class="star" cx="96.88%" cy="58.06%" r="0.7"></circle>
<circle class="star" cx="79.53%" cy="61.71%" r="1.3"></circle>
<circle class="star" cx="36.5%" cy="6.96%" r="1.2"></circle>
<circle class="star" cx="39.06%" cy="89.19%" r="1.2"></circle>
<circle class="star" cx="22.55%" cy="34.23%" r="0.5"></circle>
<circle class="star" cx="73.29%" cy="21.24%" r="1.1"></circle>
<circle class="star" cx="94.01%" cy="55.81%" r="1.4"></circle>
<circle class="star" cx="11.93%" cy="61.73%" r="1"></circle>
<circle class="star" cx="80.51%" cy="6.07%" r="0.7"></circle>
<circle class="star" cx="86.72%" cy="73.63%" r="1.2"></circle>
<circle class="star" cx="69.44%" cy="55.42%" r="1.1"></circle>
<circle class="star" cx="83.14%" cy="65.74%" r="1.1"></circle>
<circle class="star" cx="30.77%" cy="68.28%" r="1.3"></circle>
<circle class="star" cx="22.16%" cy="88.62%" r="0.9"></circle>
<circle class="star" cx="74.54%" cy="56.64%" r="1.1"></circle>
<circle class="star" cx="58.16%" cy="35.14%" r="0.9"></circle>
<circle class="star" cx="67.36%" cy="92.45%" r="1.3"></circle>
<circle class="star" cx="96.42%" cy="63.92%" r="0.5"></circle>
<circle class="star" cx="45.34%" cy="79.46%" r="0.6"></circle>
<circle class="star" cx="1.96%" cy="95.99%" r="0.6"></circle>
<circle class="star" cx="9.63%" cy="72.18%" r="0.7"></circle>
<circle class="star" cx="86.9%" cy="8.69%" r="1.3"></circle>
<circle class="star" cx="57.12%" cy="90.31%" r="1"></circle>
<circle class="star" cx="25.56%" cy="52.22%" r="1.4"></circle>
<circle class="star" cx="30.5%" cy="53.77%" r="0.7"></circle>
<circle class="star" cx="26.82%" cy="25.72%" r="1.1"></circle>
<circle class="star" cx="91.33%" cy="71.29%" r="0.8"></circle>
<circle class="star" cx="56.09%" cy="26.77%" r="1.2"></circle>
<circle class="star" cx="42.95%" cy="17.66%" r="1.1"></circle>
<circle class="star" cx="85.38%" cy="76.29%" r="1.2"></circle>
<circle class="star" cx="94.41%" cy="76%" r="1.4"></circle>
<circle class="star" cx="15.75%" cy="47.6%" r="0.5"></circle>
<circle class="star" cx="1.52%" cy="29.06%" r="1.4"></circle>
<circle class="star" cx="8.76%" cy="15.49%" r="1.2"></circle>
<circle class="star" cx="32.01%" cy="64.31%" r="1"></circle>
<circle class="star" cx="97.26%" cy="83.77%" r="1.2"></circle>
<circle class="star" cx="97.69%" cy="64.05%" r="1.1"></circle>
<circle class="star" cx="50.46%" cy="20.44%" r="0.9"></circle>
<circle class="star" cx="99.13%" cy="1.22%" r="0.9"></circle>
<circle class="star" cx="0.47%" cy="19.3%" r="0.8"></circle>
<circle class="star" cx="24.73%" cy="90.62%" r="0.6"></circle>
<circle class="star" cx="74.66%" cy="8.82%" r="1.1"></circle>
<circle class="star" cx="10.88%" cy="70.01%" r="1.1"></circle>
<circle class="star" cx="96.32%" cy="63.87%" r="1.2"></circle>
<circle class="star" cx="1.79%" cy="9.37%" r="0.9"></circle>
<circle class="star" cx="20.52%" cy="87.75%" r="1.2"></circle>
<circle class="star" cx="59.56%" cy="39.49%" r="0.9"></circle>
<circle class="star" cx="73.79%" cy="46.14%" r="0.8"></circle>
<circle class="star" cx="28.89%" cy="28.99%" r="0.8"></circle>
<circle class="star" cx="48.43%" cy="54.62%" r="0.9"></circle>
<circle class="star" cx="92.92%" cy="58.02%" r="1"></circle>
<circle class="star" cx="80.39%" cy="69.29%" r="0.9"></circle>
<circle class="star" cx="62.66%" cy="66.18%" r="1.5"></circle>
<circle class="star" cx="55.77%" cy="87.11%" r="0.9"></circle>
<circle class="star" cx="87.66%" cy="76.58%" r="0.6"></circle>
<circle class="star" cx="2.16%" cy="37.58%" r="0.5"></circle>
<circle class="star" cx="23.36%" cy="12.35%" r="1.4"></circle>
<circle class="star" cx="17.18%" cy="69.72%" r="0.6"></circle>
<circle class="star" cx="16.06%" cy="51.03%" r="0.8"></circle>
<circle class="star" cx="78.03%" cy="44.83%" r="0.6"></circle>
<circle class="star" cx="91.21%" cy="20.01%" r="1.1"></circle>
<circle class="star" cx="56.96%" cy="84.43%" r="0.6"></circle>
<circle class="star" cx="26.9%" cy="35.71%" r="1"></circle>
<circle class="star" cx="13.61%" cy="14.93%" r="0.7"></circle>
<circle class="star" cx="60.9%" cy="58.09%" r="0.6"></circle>
<circle class="star" cx="0.96%" cy="78.12%" r="0.9"></circle>
<circle class="star" cx="49.76%" cy="25.34%" r="1.3"></circle>
<circle class="star" cx="76.17%" cy="90.56%" r="0.5"></circle>
<circle class="star" cx="86.7%" cy="60.95%" r="1.4"></circle>
<circle class="star" cx="66.38%" cy="59.64%" r="1.3"></circle>
<circle class="star" cx="62.04%" cy="52.05%" r="1.1"></circle>
<circle class="star" cx="67.71%" cy="17.31%" r="1.3"></circle>
<circle class="star" cx="36.01%" cy="48.58%" r="1.2"></circle>
<circle class="star" cx="7.43%" cy="67.47%" r="0.7"></circle>
<circle class="star" cx="39.36%" cy="12.77%" r="1.5"></circle>
<circle class="star" cx="64.11%" cy="56.51%" r="0.5"></circle>
<circle class="star" cx="84.1%" cy="35.4%" r="0.7"></circle>
<circle class="star" cx="58.32%" cy="96.94%" r="1.4"></circle>
<circle class="star" cx="9.85%" cy="61.71%" r="1"></circle>
<circle class="star" cx="82.55%" cy="74.78%" r="0.8"></circle>
<circle class="star" cx="85.31%" cy="55.74%" r="1.4"></circle>
<circle class="star" cx="12.9%" cy="51.65%" r="0.9"></circle>
<circle class="star" cx="58.39%" cy="64.26%" r="0.7"></circle>
<circle class="star" cx="65.69%" cy="88.95%" r="0.8"></circle>
<circle class="star" cx="67.39%" cy="84.87%" r="0.6"></circle>
<circle class="star" cx="66.95%" cy="74.04%" r="0.5"></circle>
<circle class="star" cx="29.19%" cy="83.07%" r="0.9"></circle>
<circle class="star" cx="17.3%" cy="56.65%" r="1"></circle>
<circle class="star" cx="71.44%" cy="17.39%" r="1.4"></circle>
<circle class="star" cx="98.93%" cy="32.65%" r="1.4"></circle>
<circle class="star" cx="83.27%" cy="80.43%" r="0.9"></circle>
<circle class="star" cx="40.04%" cy="73.73%" r="1"></circle>
<circle class="star" cx="84.78%" cy="7.64%" r="1.4"></circle>
<circle class="star" cx="58.88%" cy="67.94%" r="0.5"></circle>
<circle class="star" cx="18.41%" cy="58.56%" r="0.6"></circle>
<circle class="star" cx="17.83%" cy="57.36%" r="1.4"></circle>
<circle class="star" cx="58.13%" cy="37.13%" r="0.6"></circle>
<circle class="star" cx="12.82%" cy="48.24%" r="0.8"></circle>
<circle class="star" cx="88.31%" cy="50.99%" r="1.4"></circle>
<circle class="star" cx="62.38%" cy="41.5%" r="1.1"></circle>
<circle class="star" cx="2.66%" cy="97.51%" r="0.6"></circle>
<circle class="star" cx="85.42%" cy="49.59%" r="1.4"></circle>
<circle class="star" cx="18.96%" cy="3.93%" r="1.5"></circle>
<circle class="star" cx="90.33%" cy="45.72%" r="0.9"></circle>
<circle class="star" cx="5.98%" cy="57.76%" r="1.4"></circle>
<circle class="star" cx="12.04%" cy="65.08%" r="0.7"></circle>
<circle class="star" cx="28.5%" cy="34.21%" r="0.8"></circle>
<circle class="star" cx="69.24%" cy="48.86%" r="1.1"></circle>
<circle class="star" cx="5.18%" cy="3.21%" r="1.2"></circle>
<circle class="star" cx="47.37%" cy="58.57%" r="0.6"></circle>
<circle class="star" cx="48.82%" cy="7.58%" r="0.5"></circle>
<circle class="star" cx="84.46%" cy="58.62%" r="1.1"></circle>
<circle class="star" cx="40.88%" cy="32.9%" r="1.1"></circle>
<circle class="star" cx="64.3%" cy="39.86%" r="1.3"></circle>
<circle class="star" cx="29.94%" cy="73.17%" r="1"></circle>
<circle class="star" cx="87.16%" cy="72.75%" r="1.1"></circle>
<circle class="star" cx="60.23%" cy="62.81%" r="1.4"></circle>
<circle class="star" cx="60.79%" cy="9.78%" r="1.1"></circle>
<circle class="star" cx="9.02%" cy="23.51%" r="1"></circle>
<circle class="star" cx="27.34%" cy="56.14%" r="1.5"></circle>
<circle class="star" cx="12.32%" cy="40.74%" r="1.4"></circle>
<circle class="star" cx="32.71%" cy="7.39%" r="1.1"></circle>
<circle class="star" cx="28.93%" cy="13.65%" r="1.3"></circle>
<circle class="star" cx="22.16%" cy="56.61%" r="0.5"></circle>
<circle class="star" cx="20.71%" cy="90.33%" r="1.5"></circle>
<circle class="star" cx="50.11%" cy="88.54%" r="0.6"></circle>
<circle class="star" cx="48.69%" cy="14.28%" r="0.6"></circle>
<circle class="star" cx="68.75%" cy="53.3%" r="0.5"></circle>
<circle class="star" cx="89.78%" cy="31.24%" r="0.9"></circle>
<circle class="star" cx="66.24%" cy="67.23%" r="1.1"></circle>
<circle class="star" cx="39.35%" cy="38.06%" r="0.7"></circle>
<circle class="star" cx="34.39%" cy="94.43%" r="0.7"></circle>
<circle class="star" cx="59.75%" cy="88.81%" r="0.9"></circle>
<circle class="star" cx="49.89%" cy="76.1%" r="1.2"></circle>
<circle class="star" cx="72.55%" cy="15.53%" r="0.8"></circle>
<circle class="star" cx="68.4%" cy="40.67%" r="0.8"></circle>
<circle class="star" cx="70.11%" cy="15.3%" r="1"></circle>
<circle class="star" cx="36.58%" cy="19.07%" r="1.2"></circle>
<circle class="star" cx="3.64%" cy="14.42%" r="0.9"></circle>
<circle class="star" cx="40.16%" cy="43.42%" r="0.7"></circle>
<circle class="star" cx="4.92%" cy="87.25%" r="1.1"></circle>
<circle class="star" cx="1.55%" cy="41.15%" r="1.3"></circle>
<circle class="star" cx="66.89%" cy="73.77%" r="1.5"></circle>
</svg>
<svg class="stars" width="100%" height="100%" preserveAspectRatio="none">
<circle class="star" cx="41.34%" cy="3.74%" r="0.8"></circle>
<circle class="star" cx="66.38%" cy="14.97%" r="1.5"></circle>
<circle class="star" cx="24.03%" cy="8.92%" r="0.9"></circle>
<circle class="star" cx="91.86%" cy="67.35%" r="1.3"></circle>
<circle class="star" cx="95.45%" cy="49.05%" r="0.7"></circle>
<circle class="star" cx="78.95%" cy="8.72%" r="1"></circle>
<circle class="star" cx="44.54%" cy="81.25%" r="0.6"></circle>
<circle class="star" cx="93.73%" cy="48.45%" r="1.3"></circle>
<circle class="star" cx="5.68%" cy="82.64%" r="1.3"></circle>
<circle class="star" cx="76.18%" cy="92.39%" r="0.5"></circle>
<circle class="star" cx="48.79%" cy="25.54%" r="1"></circle>
<circle class="star" cx="64.89%" cy="9.23%" r="1.3"></circle>
<circle class="star" cx="53.38%" cy="97.8%" r="0.8"></circle>
<circle class="star" cx="14.87%" cy="23.41%" r="0.8"></circle>
<circle class="star" cx="45.04%" cy="31.86%" r="0.8"></circle>
<circle class="star" cx="27.19%" cy="27.36%" r="1"></circle>
<circle class="star" cx="85.44%" cy="69.62%" r="0.6"></circle>
<circle class="star" cx="72.67%" cy="6.14%" r="1.4"></circle>
<circle class="star" cx="19.68%" cy="86.3%" r="1.4"></circle>
<circle class="star" cx="71.86%" cy="97.41%" r="1"></circle>
<circle class="star" cx="12.96%" cy="24%" r="1.2"></circle>
<circle class="star" cx="33.28%" cy="80.41%" r="0.8"></circle>
<circle class="star" cx="32.1%" cy="64.55%" r="0.6"></circle>
<circle class="star" cx="13.49%" cy="84.53%" r="0.6"></circle>
<circle class="star" cx="94.81%" cy="61.91%" r="0.9"></circle>
<circle class="star" cx="30.47%" cy="9.55%" r="1.3"></circle>
<circle class="star" cx="40.03%" cy="41.83%" r="0.9"></circle>
<circle class="star" cx="3.57%" cy="36.22%" r="1.2"></circle>
<circle class="star" cx="5.45%" cy="67.22%" r="1.2"></circle>
<circle class="star" cx="92.22%" cy="17.97%" r="0.8"></circle>
<circle class="star" cx="84.28%" cy="87.08%" r="1.4"></circle>
<circle class="star" cx="45.79%" cy="14.51%" r="1"></circle>
<circle class="star" cx="99.66%" cy="83.38%" r="1.5"></circle>
<circle class="star" cx="85.91%" cy="74.03%" r="0.9"></circle>
<circle class="star" cx="24.03%" cy="37.85%" r="0.6"></circle>
<circle class="star" cx="95.68%" cy="1.36%" r="0.6"></circle>
<circle class="star" cx="17.54%" cy="33.68%" r="0.5"></circle>
<circle class="star" cx="71.91%" cy="26.42%" r="1"></circle>
<circle class="star" cx="48.31%" cy="51.17%" r="0.6"></circle>
<circle class="star" cx="10.07%" cy="85.17%" r="0.6"></circle>
<circle class="star" cx="68.48%" cy="1.47%" r="0.8"></circle>
<circle class="star" cx="7.5%" cy="83.21%" r="1.4"></circle>
<circle class="star" cx="62.07%" cy="99.69%" r="0.6"></circle>
<circle class="star" cx="43.24%" cy="90.16%" r="1.1"></circle>
<circle class="star" cx="95.31%" cy="31.01%" r="1.4"></circle>
<circle class="star" cx="25.69%" cy="76.28%" r="1.5"></circle>
<circle class="star" cx="72.39%" cy="77.48%" r="1.1"></circle>
<circle class="star" cx="56.37%" cy="57.86%" r="1"></circle>
<circle class="star" cx="59.79%" cy="29.33%" r="0.9"></circle>
<circle class="star" cx="54.58%" cy="16.48%" r="1.3"></circle>
<circle class="star" cx="53.49%" cy="55.43%" r="1.3"></circle>
<circle class="star" cx="93.65%" cy="15.03%" r="1.1"></circle>
<circle class="star" cx="77.19%" cy="26.96%" r="0.7"></circle>
<circle class="star" cx="37.89%" cy="66.75%" r="0.8"></circle>
<circle class="star" cx="66.83%" cy="1.32%" r="1.2"></circle>
<circle class="star" cx="4.28%" cy="41.75%" r="0.6"></circle>
<circle class="star" cx="3.01%" cy="43.66%" r="1.2"></circle>
<circle class="star" cx="87.06%" cy="79.33%" r="0.6"></circle>
<circle class="star" cx="74.82%" cy="37.66%" r="1.2"></circle>
<circle class="star" cx="70.64%" cy="69.9%" r="1.1"></circle>
<circle class="star" cx="37.08%" cy="28.17%" r="1.4"></circle>
<circle class="star" cx="9.73%" cy="4.38%" r="0.6"></circle>
<circle class="star" cx="27.13%" cy="39.27%" r="1.3"></circle>
<circle class="star" cx="21.96%" cy="33.52%" r="1.2"></circle>
<circle class="star" cx="0.55%" cy="59.52%" r="1.1"></circle>
<circle class="star" cx="43.66%" cy="27.1%" r="1"></circle>
<circle class="star" cx="8.93%" cy="72.6%" r="0.8"></circle>
<circle class="star" cx="72.85%" cy="14.52%" r="0.8"></circle>
<circle class="star" cx="94.98%" cy="11.44%" r="0.8"></circle>
<circle class="star" cx="72.45%" cy="70.47%" r="1"></circle>
<circle class="star" cx="91.22%" cy="69.94%" r="1.3"></circle>
<circle class="star" cx="16.53%" cy="53.73%" r="0.7"></circle>
<circle class="star" cx="55.43%" cy="83.58%" r="1.3"></circle>
<circle class="star" cx="90.33%" cy="20.68%" r="0.8"></circle>
<circle class="star" cx="23.12%" cy="77.08%" r="0.8"></circle>
<circle class="star" cx="81.32%" cy="95.64%" r="1.2"></circle>
<circle class="star" cx="47.08%" cy="83.72%" r="1"></circle>
<circle class="star" cx="7.26%" cy="87.61%" r="0.8"></circle>
<circle class="star" cx="8.59%" cy="16.17%" r="1.4"></circle>
<circle class="star" cx="45.42%" cy="16.71%" r="0.8"></circle>
<circle class="star" cx="68.91%" cy="3.92%" r="1"></circle>
<circle class="star" cx="48.06%" cy="74.71%" r="0.5"></circle>
<circle class="star" cx="14.3%" cy="2.29%" r="1.3"></circle>
<circle class="star" cx="66.57%" cy="82.67%" r="1"></circle>
<circle class="star" cx="46.09%" cy="80.22%" r="0.9"></circle>
<circle class="star" cx="83.32%" cy="27.87%" r="1.5"></circle>
<circle class="star" cx="7.52%" cy="15.06%" r="1.4"></circle>
<circle class="star" cx="60.82%" cy="61.55%" r="0.9"></circle>
<circle class="star" cx="97.23%" cy="6.5%" r="0.9"></circle>
<circle class="star" cx="16.56%" cy="91.91%" r="1"></circle>
<circle class="star" cx="46.67%" cy="98.07%" r="1.3"></circle>
<circle class="star" cx="96.03%" cy="20.99%" r="1"></circle>
<circle class="star" cx="95.13%" cy="44.29%" r="1"></circle>
<circle class="star" cx="29.8%" cy="20.69%" r="1.4"></circle>
<circle class="star" cx="88.38%" cy="64.51%" r="0.9"></circle>
<circle class="star" cx="33.01%" cy="95.46%" r="1.1"></circle>
<circle class="star" cx="26.51%" cy="33.91%" r="0.7"></circle>
<circle class="star" cx="13.03%" cy="4.85%" r="1.2"></circle>
<circle class="star" cx="20.85%" cy="17.83%" r="0.9"></circle>
<circle class="star" cx="40.07%" cy="21.42%" r="1.1"></circle>
<circle class="star" cx="93.64%" cy="0.26%" r="0.6"></circle>
<circle class="star" cx="48.25%" cy="92.15%" r="1.4"></circle>
<circle class="star" cx="51.46%" cy="51.33%" r="1.4"></circle>
<circle class="star" cx="19.6%" cy="99.63%" r="0.8"></circle>
<circle class="star" cx="92.91%" cy="69.52%" r="0.7"></circle>
<circle class="star" cx="18.26%" cy="2.44%" r="1.2"></circle>
<circle class="star" cx="94.25%" cy="45.37%" r="1.5"></circle>
<circle class="star" cx="9.21%" cy="52.33%" r="1.1"></circle>
<circle class="star" cx="74.41%" cy="89.57%" r="1.3"></circle>
<circle class="star" cx="29.17%" cy="22.8%" r="0.5"></circle>
<circle class="star" cx="37.01%" cy="96.95%" r="0.7"></circle>
<circle class="star" cx="83.98%" cy="14.69%" r="1.3"></circle>
<circle class="star" cx="43.1%" cy="83.63%" r="1.2"></circle>
<circle class="star" cx="61.32%" cy="15.65%" r="0.5"></circle>
<circle class="star" cx="75.93%" cy="6.86%" r="1.5"></circle>
<circle class="star" cx="74.91%" cy="92.39%" r="1.1"></circle>
<circle class="star" cx="20.74%" cy="77.14%" r="0.6"></circle>
<circle class="star" cx="14.46%" cy="46.02%" r="0.9"></circle>
<circle class="star" cx="69.64%" cy="72.23%" r="1"></circle>
<circle class="star" cx="78.26%" cy="76.89%" r="1"></circle>
<circle class="star" cx="80.44%" cy="45.35%" r="0.9"></circle>
<circle class="star" cx="36.02%" cy="8.69%" r="1"></circle>
<circle class="star" cx="61.1%" cy="57.19%" r="0.6"></circle>
<circle class="star" cx="29.53%" cy="96.44%" r="0.8"></circle>
<circle class="star" cx="3.85%" cy="20.28%" r="1.2"></circle>
<circle class="star" cx="17.75%" cy="54.02%" r="0.5"></circle>
<circle class="star" cx="52.61%" cy="75.84%" r="0.9"></circle>
<circle class="star" cx="75.13%" cy="66.05%" r="0.5"></circle>
<circle class="star" cx="31.06%" cy="22.86%" r="0.8"></circle>
<circle class="star" cx="23.93%" cy="37.59%" r="1.4"></circle>
<circle class="star" cx="93.02%" cy="77.33%" r="0.8"></circle>
<circle class="star" cx="99.29%" cy="74.13%" r="1.3"></circle>
<circle class="star" cx="8.68%" cy="45.35%" r="1"></circle>
<circle class="star" cx="51.37%" cy="80.44%" r="1.3"></circle>
<circle class="star" cx="54.86%" cy="95.86%" r="0.8"></circle>
<circle class="star" cx="72.18%" cy="33.07%" r="1"></circle>
<circle class="star" cx="54.62%" cy="77.9%" r="0.8"></circle>
<circle class="star" cx="73.28%" cy="84.92%" r="1.2"></circle>
<circle class="star" cx="43.13%" cy="13.5%" r="1.5"></circle>
<circle class="star" cx="40.31%" cy="15.13%" r="1.2"></circle>
<circle class="star" cx="12.42%" cy="39.64%" r="1"></circle>
<circle class="star" cx="32.96%" cy="28.92%" r="1.1"></circle>
<circle class="star" cx="85.16%" cy="13.09%" r="1.2"></circle>
<circle class="star" cx="80.73%" cy="43.82%" r="1.3"></circle>
<circle class="star" cx="95.75%" cy="97.07%" r="0.6"></circle>
<circle class="star" cx="62.68%" cy="53.16%" r="1.4"></circle>
<circle class="star" cx="44.18%" cy="67.44%" r="0.7"></circle>
<circle class="star" cx="38.26%" cy="91.26%" r="1.1"></circle>
<circle class="star" cx="93.97%" cy="99.74%" r="0.7"></circle>
<circle class="star" cx="64.48%" cy="12.41%" r="1.2"></circle>
<circle class="star" cx="72.59%" cy="44.65%" r="1.1"></circle>
<circle class="star" cx="39.36%" cy="80.52%" r="0.9"></circle>
<circle class="star" cx="56.47%" cy="92.06%" r="1.1"></circle>
<circle class="star" cx="94.19%" cy="51.26%" r="0.9"></circle>
<circle class="star" cx="36.38%" cy="34.46%" r="1.1"></circle>
<circle class="star" cx="20.01%" cy="15.3%" r="1.1"></circle>
<circle class="star" cx="91.93%" cy="97.95%" r="1"></circle>
<circle class="star" cx="39.76%" cy="70.84%" r="1.5"></circle>
<circle class="star" cx="33.11%" cy="96.7%" r="1.1"></circle>
<circle class="star" cx="46.96%" cy="19.67%" r="0.7"></circle>
<circle class="star" cx="52.05%" cy="54.44%" r="1.3"></circle>
<circle class="star" cx="49.37%" cy="14.21%" r="1.1"></circle>
<circle class="star" cx="58.48%" cy="12.96%" r="0.5"></circle>
<circle class="star" cx="15.64%" cy="34.47%" r="1.3"></circle>
<circle class="star" cx="23.68%" cy="59.83%" r="0.7"></circle>
<circle class="star" cx="32.6%" cy="17.29%" r="0.9"></circle>
<circle class="star" cx="51.22%" cy="64.53%" r="0.8"></circle>
<circle class="star" cx="24.8%" cy="1.04%" r="0.6"></circle>
<circle class="star" cx="42.45%" cy="29.14%" r="0.9"></circle>
<circle class="star" cx="84.76%" cy="40.02%" r="1.5"></circle>
<circle class="star" cx="93.8%" cy="6.3%" r="0.8"></circle>
<circle class="star" cx="78.22%" cy="54.45%" r="0.7"></circle>
<circle class="star" cx="31.38%" cy="35.67%" r="1.4"></circle>
<circle class="star" cx="87.29%" cy="85.01%" r="1.1"></circle>
<circle class="star" cx="87.36%" cy="9.14%" r="0.5"></circle>
<circle class="star" cx="58.79%" cy="38.05%" r="1.3"></circle>
<circle class="star" cx="21.36%" cy="57.63%" r="0.7"></circle>
<circle class="star" cx="13.2%" cy="53.13%" r="1.5"></circle>
<circle class="star" cx="53.23%" cy="97.5%" r="1"></circle>
<circle class="star" cx="1.49%" cy="29.68%" r="1.1"></circle>
<circle class="star" cx="58.13%" cy="92.51%" r="1"></circle>
<circle class="star" cx="79.73%" cy="20.72%" r="1.2"></circle>
<circle class="star" cx="62.88%" cy="45.69%" r="1.2"></circle>
<circle class="star" cx="31.86%" cy="94.28%" r="0.7"></circle>
<circle class="star" cx="10.77%" cy="1.39%" r="0.7"></circle>
<circle class="star" cx="44.3%" cy="19.87%" r="0.8"></circle>
<circle class="star" cx="18.37%" cy="6.9%" r="1.4"></circle>
<circle class="star" cx="17.23%" cy="5.13%" r="0.8"></circle>
<circle class="star" cx="8.22%" cy="64.95%" r="0.8"></circle>
<circle class="star" cx="36.4%" cy="14.79%" r="1.4"></circle>
<circle class="star" cx="10.6%" cy="91.74%" r="1.1"></circle>
<circle class="star" cx="9.37%" cy="7.77%" r="1.3"></circle>
<circle class="star" cx="68.84%" cy="47.92%" r="1.2"></circle>
<circle class="star" cx="63.68%" cy="66.29%" r="1.3"></circle>
<circle class="star" cx="75.93%" cy="53.05%" r="0.8"></circle>
<circle class="star" cx="86.78%" cy="60.63%" r="0.6"></circle>
<circle class="star" cx="63.6%" cy="27.83%" r="0.6"></circle>
<circle class="star" cx="73.88%" cy="86.73%" r="1.3"></circle>
<circle class="star" cx="60.8%" cy="60.16%" r="1.3"></circle>
<circle class="star" cx="65.06%" cy="4%" r="0.5"></circle>
</svg>
<svg class="extras" width="100%" height="100%" preserveAspectRatio="none">
<defs>
<radialGradient id="comet-gradient" ="" cx="0" cy=".5" r="0.5">
<stop offset="0%" stop-color="rgba(255,255,255,.8)"></stop>
<stop offset="100%" stop-color="rgba(255,255,255,0)"></stop>
</radialGradient>
</defs>
<g transform="rotate(-135)">
<ellipse class="comet comet-a" fill="url(#comet-gradient)" cx="0" cy="0" rx="150" ry="2"></ellipse>
</g>
<g transform="rotate(20)">
<ellipse class="comet comet-b" fill="url(#comet-gradient)" cx="100%" cy="0" rx="150" ry="2"></ellipse>
</g>
<g transform="rotate(300)">
<ellipse class="comet comet-c" fill="url(#comet-gradient)" cx="40%" cy="100%" rx="150" ry="2"></ellipse>
</g>
</svg>
</div>
<svg width="100%" height="100%" class="bg-text">
<defs>
<pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<!-- <circle fill="#be9ddf" cx="25" cy="25" r="3"></circle> -->
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
<text x="50%" y="50%" text-anchor="middle" class="title">Notebook</text>
</svg>
</section>
<!-- Header -->
<!-- <Header class="background-hero py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Notebook</h1>
<p class="lead mb-5 text-white-50"></p>
</div>
</div>
</div>
</Header> -->
<!-- Page Content -->
<!-- <div class="introduction">
<section>
<div class="textBox1">
<div class="intro1">
<h1 class="layer"></h1>
</div>
</div>
<div class="textBox2">
<div class="intro2">
<h1 class="layer"></h1>
</div>
</div>
</section>
</div> -->
<!-- Navigation -->
<div id="icon" class="none body">
<span>&#9776</span>
</div>
<div class="navbar none body" id="Menu">
<ul>
<!---- TEAM NAME ---->
<li><a href="{{ url_for('pages', page='home') }}"><img class="navbar-brand" src="https://static.igem.wiki/teams/4705/wiki/logo.png" height="50px" alt="NJMU"></a></li>
<!-- Home -->
<li class="dropdown">
<a href="{{ url_for('pages', page='home') }}">Home</a>
</li>
<li class="dropdown">
<a>Project</a>
<ol>
<li class="line"><a href="{{ url_for('pages', page='background') }}">Background</a></li>
<li class="line"><a href="{{ url_for('pages', page='description') }}">Description</a></li>
<li class="line"><a href="{{ url_for('pages', page='design') }}">Design</a></li>
<li class="line"><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
<li class="line"><a href="{{ url_for('pages', page='safety') }}">Safety</a></li>
</ol>
</li>
<li class="dropdown">
<a>Wet Lab</a>
<ol>
<li><a href="{{ url_for('pages', page='experiments') }}">Experiments</a></li>
<li class="line"><a href="{{ url_for('pages', page='engineering') }}">Engineering success</a></li>
<li><a href="{{ url_for('pages', page='wetlab-parts') }}">Parts</a></li>
<li class="line"><a href="{{ url_for('pages', page='result') }}">Results</a></li>
<li class="line"><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
</ol>
</li>
<li class="dropdown">
<a href="{{ url_for('pages', page='model') }}"> model</a>
</li>
<li class="dropdown">
<a>Outreach</a>
<ol>
<li class="line"><a href="{{ url_for('pages', page='education') }}">Education</a></li>
<li><a href="{{ url_for('pages', page='communication') }}">Communication</a></li>
</ol>
</li>
<li class="dropdown">
<a>Human Practices</a>
<ol>
<li class="line"><a href="{{ url_for('pages', page='overview') }}">Overview</a></li>
<li class="line"><a href="{{ url_for('pages', page='human-practices') }}">Integrated Human Practices</a></li>
<li class="line"><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
<li><a href="{{ url_for('pages', page='sustainable-development') }}">Sustainable Development </a></li>
</ol>
</li>
<li class="dropdown">
<a>Team</a>
<ol>
<li class="line"><a href="{{ url_for('pages', page='team') }}">Members</a></li>
<li class="line"><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
<li class="line"><a href="{{ url_for('pages', page='collaborations') }}">Collaborations</a></li>
<li class="line"><a href="{{ url_for('pages', page='contribution') }}">Contributions</a></li>
<li class="line"><a href="{{ url_for('pages', page='medal') }}">Mdeal Criteria</a></li>
</ol>
</li>
<li>
<button><a class="cta white" href="#footer">CONTACT</a></button>
</li>
</ul>
</div>
<div class="progress-container none body">
<div class="progress-bar" id="myBar"></div>
</div>
<script>
var HtmlWidth = document.documentElement.clientWidth;
var Icon = document.getElementById('icon');
var DivMenu = document.getElementById('Menu');
var flag = false;
/* DivMenu.style.transform = "scaleX(0)"; */
function IconButton() {
Icon.addEventListener('click', () => {
if (flag) {
DivMenu.style.transform = "scaleX(0)";
flag = false;
} else {
DivMenu.style.transform = "scaleX(1)";
flag = true;
}
})
}
setInterval(IconButton(),1000)
</script>
<!-- -------------AOS JS------------ -->
<script type="text/javascript" src="static/aosanimate.js"></script>
<!-- <script type="text/javascript" src="static/echats-4.7.0.js"></script> -->
</script>
<script>
AOS.init();
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction(); AOS.refresh()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
$(function () {
$('[data-toggle="popover"]').popover()
})
document.querySelector('#HQ_page').removeAttribute('id');
window.onload = function(){
document.getElementById("loader-container").style.display = "none";
document.getElementById("page").style.display = "block";
}
</script>
<div class="none body" id="main">
<div class="flex-container trigger" style="margin-top: 6vh;">
<div class="overview up1 animate__animated">
<p>In the whole iGEM activity, we have experienced a lot of difficulties, but also feel the joy of success. We are very grateful for the great harvest brought to us this time, and we have been growing and making progress from the beginning of the formation of the team to the final completion of the project. We have recorded our experience bit by bit, please click here to get our details.<!-- 待加id -->
</p>
</div>
</div>
<iframe style="width: 60%;position:absolute; height: 1500px;left: 20%;" src="Wet Lab-Notebook附件.pdf" width="100%" height="600px"></iframe>
<div style="width: 1100px; height: 1500px;"> </div>
</div>
</div>
</div>
<script>
var all_months = ['march', 'april', 'may', 'june', 'july', 'august',
'september', 'october'];
//construction of the list of all weeks of work
var all_weeks = [];
for (i = 1; i < 35; i++) {
/* exceptions = [45, 46, 47, 48, 49]; //无事可写的周，可删
if (!exceptions.includes(i)) { */
all_weeks.push(['week' + String(i)]);
/* } */
}
function display_week(week) {
var element = document.getElementById(week);
if (element.style.display != "block") {
element.style.display = "block";
for (let i = 0; i < all_weeks.length; i++) {
if (all_weeks[i] != week) {
document.getElementById(all_weeks[i]).style.display = "none";
}
}
}
}
function display_month(month) {
var element = document.getElementById(month);
if (element.style.display != "block") {
for (let i = 0; i < all_months.length; i++) {
if (all_months[i] != month) {
document.getElementById(all_months[i]).style.display = "none";
}
element.style.display = "block";
}
}
}
</script>
<!-- <div class="row mt-4">
<div class="col-lg-8">
<h2>What should this page contain?</h2>
<hr>
<ul>
<li>Chronological notes of what your team is doing.</li>
<li>Brief descriptions of daily important events.</li>
<li>Pictures of your progress.</li>
<li>Mention who participated in what task.</li>
</ul>
</div>
<div class="col-lg-4">
<h2>Inspirations</h2>
<hr>
<ul>
<li><a href="http://2018.igem.org/Team:Munich/Notebook">2018 Munich</a></li>
<li><a href="https://2019.igem.org/Team:Georgia_State/Notebook">2019 Georgia State</a></li>
<li><a href="https://2019.igem.org/Team:Newcastle/Notebook">2019 Newcastle</a></li>
<li><a href="https://2020.igem.org/Team:IISER-Pune-India/Notebook">2020 IISER Pune India</a></li>
<li><a href="https://2020.igem.org/Team:Lund/Notebook">2020 Lund</a></li>
<li><a href="https://2020.igem.org/Team:NOVA_LxPortugal/Notebook">2020 NOVA LxPortugal</a></li>
<li><a href="https://2020.igem.org/Team:RDFZ-China/NoteBook">2020 RDFZ China</a></li>
</ul>
</div>
</div>
-->
</div>
<div id="outerdiv">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" src="" />
</div>
</div>
<div class="resident">
<input id="a-border" type="button" value="🔍" title="cognitive disability profile" name="" />
<input id="ft-sz1" type="button" value="A+" name="" />
<input id="ft-sz0" type="button" value="A-" name="" />
<div class="backTop none body"><img src="https://static.igem.wiki/teams/4205/wiki/backtop0.png"></div>
</div>
<!-- Footer: MUST mention license AND have a link to team wiki's repository on gitlab.igem.org -->
<footer class="footer bg-dark text-white none body" id="footer" style="position: relative;top:8vh;">
<div class="footer-container">
<svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18
58 18 88 18
v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#C7D5E9"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#BBCCE2"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#b0c4de"/>
</g>
</svg>
<div class="footer-content">
<div class="contact-us">
<sapn>CONTACT US</sapn>
<!-- contactus的图 -->
</div>
<!-- 下面是b站图标等等 -->
<div>
<ul class="footer-contact">
<li>
<a class="footer-a" href="https://space.bilibili.com/1686988101?share_from=space&share_medium=android&share_plat=android&share_session_id=c9aca8a8-0487-4fc0-b6ce-dda817565d3c&share_source=QQ&share_tag=s_i&timestamp=1665111992&unique_k=0bidAJF">
<div class="footer-contact-icon">
<img src="https://static.igem.wiki/teams/4205/wiki/footer/bilibili.png" alt="">
</div>
</a>
</li>
<li>
<div class="footer-a">
<div class="footer-contact-icon email">
<img style="cursor: pointer;" src="https://static.igem.wiki/teams/4205/wiki/footer/box75-75.png" alt="">
<div class="address">njmuigem2021@163.com</div>
</div>
</div>
</li>
<li>
<a class="footer-a" href="https://2022.igem.wiki/njmu-china/">
<div class="footer-contact-icon">
<img src="https://static.igem.wiki/teams/4205/wiki/footer/home.png" alt="">
</div>
</a>
</li>
<li>
<a class="footer-a" href="https://tieba.baidu.com/f?fr=sharewise&kw=%E5%8D%97%E5%8C%BB%E5%A4%A7igem%E5%8A%9F%E8%83%BD&source=12_16_sharecard_a">
<div class="footer-contact-icon">
<img src="https://static.igem.wiki/teams/4205/wiki/footer/baidu.png" alt="">
</div>
</a>
</li>
<li>
<a class="footer-a" href="https://twitter.com/ChinaNjmu">
<div class="footer-contact-icon">
<img src="https://static.igem.wiki/teams/4205/wiki/footer/twitter.png" alt="">
</div>
</a>
</li>
</ul>
<div class="thanks">
<span>THANKS TO OUR SPONSORS</span>
</div>
<!-- 下面是学院logo -->
<div class="njmulogo">
<div class="footer-a" >
<a href="https://www.njmu.edu.cn/">
<img style="width:350px;" src="https://static.igem.wiki/teams/4205/wiki/footer/t-njmu-china-njmu525-122.png " alt="" >
</a>
</div>
<div class="footer-b">
<a href="https://jcyxy.njmu.edu.cn/">
<img style="width:320px;" src="https://static.igem.wiki/teams/4205/wiki/footer/t-njmu-china-bms631-93.png" alt="" >
</a>
<a href="https://sklrm.njmu.edu.cn/">
<img style="width:320px;" src="https://static.igem.wiki/teams/4205/wiki/footer/guozhong568-234.png" alt="" >
</a>
</div>
<div class="footer-b">
<a href="http://www.jsph.org.cn/index.html">
<img style="width:100%;" src="https://static.igem.wiki/teams/4205/wiki/footer/province542-89.png" alt="" >
</a>
<a href="https://gwxy.njmu.edu.cn/">
<img style="width:100%;" src="https://static.igem.wiki/teams/4205/wiki/footer/t-njmu-china-public553-96.png" alt="" >
</a>
<a href="https://bmei.njmu.edu.cn/">
<img style="width:100%;" src="https://static.igem.wiki/teams/4205/wiki/footer/t-njmu-china-bmei681-89.png" alt="" >
</a>
</div>
</div>
</div>
<div class="row mt-4" style="font-family: 'Louis';">
<div class="col">
<p class="mb-0"><small>© 2022 - Content on this site is licensed under a <a style="color:var(--dark-blue);"class="hvr-underline-from-left" href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution 4.0 International license</a>.</small></p>
<p><small>The repository used to create this website is available at <a style="color:var(--dark-blue);" class="hvr-underline-from-left" href="https://gitlab.igem.org/2022/njmu-china">gitlab.igem.org/2022/njmu-china</a>.</small></p>
</div>
</div>
</div>
</div>
<!-- The following MUST be on every page: license information and link to the repository on gitlab.igem.org -->
</footer>
<!-- Wiki Tools: Teams are allowed to remove it -->
<!-- <style>
.wiki-tools-footer {
--bs-gutter-x: 1.5rem;
background: #222124;
margin: 0;
max-width: 100%;
padding: 1rem 3rem;
display: flex;
gap: 1.5em;
}
.wiki-tools-footer a {
text-decoration: none;
color: white;
font-weight: 400;
transition: color 0.3s;
}
.wiki-tools-footer a:hover {
color: #08C784;
}
.wiki-tools-footer img {
object-fit: contain;
}
</style>
<section class="wiki-tools-footer container">
<a id="wiki-tools-link">Access Wiki Tools</a>
<a id="wiki-tools-repo">View Source Code</a>
<img id="wiki-tools-pipeline">
</section>
<script>
const wikiToolsLink = document.getElementById('wiki-tools-link')
const wikiToolsRepo = document.getElementById('wiki-tools-repo')
const wikiToolsPipeline = document.getElementById('wiki-tools-pipeline')
const path = document.location.pathname.split('/')
const competitionSlug = document.location.host.split('.')[0]
const teamSlug = path[1]
const page = path[2] === '' ? 'index' : path[2]
wikiToolsLink.href = `https://tools.igem.org/wiki-tools/${competitionSlug}/${teamSlug}/${page}`
wikiToolsRepo.href = `https://gitlab.igem.org/${competitionSlug}/${teamSlug}`
wikiToolsPipeline.src = `https://gitlab.igem.org/${competitionSlug}/${teamSlug}/badges/main/pipeline.svg`
</script> -->
<!-- Bootstrap Bundle with Popper -->
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/back-to-top.js"></script>
<script type="text/javascript" src="static/animation.js"></script>
<script type="text/javascript" src="static/change-font-size.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="static/tex-mml-svg.js" id="MathJax-script" async></script>
<script>
//pdf
const Pdfs = document.querySelectorAll('.pdf');
Pdfs.forEach((Pdf, index) => {
Pdf.addEventListener('click', () => {
Pdf.classList.toggle('active');
let height = Pdf.getBoundingClientRect().top;
let fix_W = window.innerWidth / 2 - Pdf.getBoundingClientRect().left - Pdf.offsetWidth / 2;
if (Pdf.className.indexOf('active') == -1) {
Pdf.style.transform = `none`;
document.body.classList.remove('noscroll')
} else {
Pdf.style.transform = `translate(${fix_W}px,${height * -1}px) scale(${1280 / 758})`;
document.body.classList.add('noscroll')
}
})
})
</script>
<!-- -----点击放大图片------- -->
<script>
$(function () {
$(".blow-up").click(function () {
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});
function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function () {
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
if (realHeight > windowH * scale) {//判断图片高度
imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
imgWidth = windowW * scale;//再对宽度进行缩放
}
} else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求，高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
$(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
});
$(outerdiv).click(function () {//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
</script>
<!-- 认知障碍 -->
<script>
var a = document.querySelectorAll("a")
a_border = document.getElementById("a-border");
let ifOpen = false;
a_border.onclick = function () {
if (ifOpen) {
for (let element of a) {
element.style.border = "none"
}
for (let element of oPnavp) {
element.style.border = "none"
}
for (let element of oPin_navp) {
element.style.border = "none"
}
for (let element of oPinin_navp) {
element.style.border = "none"
element.style.borderBottom = "3px solid #1f5f88";
}
ifOpen = false
}
else {
for (let element of a) {
element.style.border = "rgb(255, 253, 127) solid 2px"
}
for (let element of oPnavp) {
element.style.border = "rgb(255, 253, 127) solid 2px"
}
for (let element of oPin_navp) {
element.style.border = "blue solid 2px"
}
for (let element of oPinin_navp) {
element.style.border = "blue solid 2px"
}
ifOpen = true
}
}
</script>
<!-- sidebar.js -->
<script>
//60是nav高度，160是overview高度
const SubBtn = document.querySelectorAll('.sub-btn');
const SubItem = document.querySelectorAll('.sub-item');
const Submenu = document.querySelectorAll('.sub-menu');
const sidebar = document.querySelector('.left-box');
const Container = document.querySelectorAll('.container');
const Innavp = document.querySelectorAll('.in-navp');
const FlexCon = document.querySelectorAll('.flex-container')
const Zmain = document.querySelector('.Zmain');
const Overview = document.getElementsByClassName('overview');
const zFooter = document.querySelector('#footer');
let winHeight = window.innerHeight;
window.addEventListener('scroll', () => {
//进场效果
if (Container[0].getBoundingClientRect().top <= 0.8 * window.innerHeight) {
Container[0].style.animationName = 'Container';
Container[0].style.opacity = 1;
sidebar.style.animationName = 'sidebar';
setInterval(() => {
sidebar.style.opacity = 1;
}
, 1300)
}
for (i = 1; i < Container.length; i++) {
if (Container[i].getBoundingClientRect().top <= 0.6 * window.innerHeight) {
Container[i].style.animationName = 'Container';
Container[i].style.opacity = 1;
}
}
//获取滚动高度
let scrolled = window.pageYOffset;
let OverHeight = Overview[0].offsetHeight + 40;
//获取各个标题和对应子标题的数目
let cNum = Container.length;
let sNum = SubBtn.length;
let sbNum = SubItem.length
//点击跳转到相应标题
SubBtn.forEach((Elem, Index) => {
Elem.addEventListener('click', () => {
// let height = Container[Index].offsetTop;
window.scrollTo(0, Container[Index].getBoundingClientRect().top + scrolled - 60)
})
})
//点击跳转到相应次标题，60是人为控制距离
SubItem.forEach((elem, index) => {
elem.addEventListener('click', () => {
// let height = Innavp[index].offsetTop;
window.scrollTo(0, Innavp[index].getBoundingClientRect().top + scrolled - 60)
})
})
//每次滚动都先清理active
for (j = 0; j < sNum; j++) {
SubBtn[j].classList.remove('active')
Submenu[j].classList.remove('active')
}
for (j = 0; j < sbNum; j++) {
SubItem[j].classList.remove('active')
}
//滚动到对应的标题显示，区间采用两个跳转之内,并且优化次级
for (i = 0; i < cNum - 1; i++) {
let ContainerTop1 = Container[i].getBoundingClientRect().top;
let ContainerTop2 = Container[i + 1].getBoundingClientRect().top;
// &&是且的意思
if (ContainerTop1 <= 0.4 * winHeight && ContainerTop2 > 0.4 * winHeight) {
SubBtn[i].classList.add('active');
Submenu[i].classList.add('active');
//获得大的container里面的小标题。
const innavp = Container[i].querySelectorAll('.in-navp');
const subitem = Submenu[i].querySelectorAll('.sub-item');
let nNum = innavp.length;
let bNum = subitem.length;
if (nNum) {
for (ii = 0; ii < nNum - 1; ii++) {
let innavpTop1 = innavp[ii].getBoundingClientRect().top;
let innavpTop2 = innavp[ii + 1].getBoundingClientRect().top;
if (innavpTop1 <= 0.4 * winHeight && innavpTop2 > 0.4 * winHeight) {
subitem[ii].classList.add('active')
}
}
if (innavp[nNum - 1].getBoundingClientRect().top <= 0.4 * winHeight && ContainerTop2 > 0.4 * winHeight) {
subitem[bNum - 1].classList.add('active')
}
}
}
}
//处理 i = cNum，也就是最后一个标题的情况
if (Container[cNum - 1].getBoundingClientRect().top <= 0.4 * winHeight && zFooter.getBoundingClientRect().top > 0.4 * winHeight) {
SubBtn[cNum - 1].classList.add('active');
Submenu[i].classList.add('active');
//获得大的container里面的小标题。
const innavp = Container[cNum - 1].querySelectorAll('.in-navp');
const subitem = Submenu[cNum - 1].querySelectorAll('.sub-item');
let nNum = innavp.length;
let bNum = subitem.length;
if (nNum) {
for (ii = 0; ii < nNum - 1; ii++) {
let innavpTop1 = innavp[ii].getBoundingClientRect().top;
let innavpTop2 = innavp[ii + 1].getBoundingClientRect().top;
if (innavpTop1 <= 0.4 * winHeight && innavpTop2 > 0.4 * winHeight) {
subitem[ii].classList.add('active')
}
}
if (innavp[nNum - 1].getBoundingClientRect().top <= 0.4 * winHeight && zFooter.getBoundingClientRect().top > 0.4 * winHeight) {
subitem[bNum - 1].classList.add('active')
}
}
}
})
window.addEventListener('scroll', () => {
if (Container[0].getBoundingClientRect().top <= 0.8 * window.innerHeight) {
Container[0].style.animationName = 'Container';
Container[0].style.opacity = 1;
sidebar.style.animationName = 'sidebar';
setInterval(() => {
sidebar.style.opacity = 1;
}
, 1900)
}
for (i = 1; i < Container.length; i++) {
if (Container[i].getBoundingClientRect().top <= 0.6 * window.innerHeight) {
Container[i].style.animationName = 'Container';
Container[i].style.opacity = 1;
}
}
})
</script>
<!-- 加载动画 -->
<script>
// 获取动画
let loader = document.querySelector(".loading");
bodyer = document.querySelectorAll(".body");
// 加载完成事件
// 加载完成，隐藏动画，显示内容
loader.style.display = "none";
for (let element of document.getElementsByClassName("body")) {
element.classList.remove("none");
}
</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