diff --git a/wiki/pages/notebook.html b/wiki/pages/notebook.html
index 8b137891791fe96927ad78e64b0aad7bded08bdc..89f8c3625048da9d43e87d9f46806cf2fe9ab025 100644
--- a/wiki/pages/notebook.html
+++ b/wiki/pages/notebook.html
@@ -1 +1,1541 @@
+<!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>☰</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×tamp=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>