diff --git a/wiki/pages/notebook.html b/wiki/pages/notebook.html
index 6b0cd69fd5c3d6fd856c332aadc012f13fd3af42..85aa97b8a33136c37d00590d0fc3c86f12f7668e 100644
--- a/wiki/pages/notebook.html
+++ b/wiki/pages/notebook.html
@@ -1,61 +1,30 @@
{% extends "laytest.html" %}
{% block title %}Notebookstest{% endblock %}
{% block css %}
-#Timeline {
-width: 100%;
-padding: 2%;
-display: block;
-/* float: right; */
-background-color: #cee1ea;
-font-family: 'Fresca', sans-serif;
-font-size: 18px;
-}
-
-.panel {
-/* background-color: #fff; */
-border: 1px solid transparent;
-border-radius: 4px;
-border-color: #ddd;
-border-radius: 10px;
--webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-padding: 15px;
-padding-top: 20px;
-}
+ div.month{
+font-size: 2.2vw;
+font-family: 'ABBody';
+cursor: pointer;
+color: #479fcc;
+margin: 10px;
+padding: 5px;
+margin-left: 40px;
+ }
+ div.content{
+ font-family: 'Body';
+ font-size: 1.5vw;
+ margin-left: 80px;
+ margin-right: 80px;
+ padding: 5px;
+ }
+div.box{
-.expandable {
-/* overflow set to hidden to hide the expanded text */
-overflow: hidden;
-/* all style changes will ease-in-out for 1s */
--moz-transition: all 1s ease-in-out;
--ms-transition: all 1s ease-in-out;
--o-transition: all 1s ease-in-out;
--webkit-transition: all 1s ease-in-out;
-transition: all 1s;
}
-
-#Labnote {
-width: 100%;
-padding: 2%;
-display: block;
-/* float: right; */
-background-color: rgb(244,242,232);
-font-family: 'Fresca', sans-serif;
-font-size: 20px;
-padding-bottom: 100px;
+div.boxs{
+ background-color: rgb(206,225,234);
+ border-radius: 5px;
}
-@media only screen and (max-width: 800px) {
-#Timeline {
-width: 96%;
-
-}
-
-#Labnote {
-width: 96%;
-
-}
-}
{% endblock %}
<!-- Header -->
@@ -68,57 +37,53 @@ width: 96%;
<!-- Page Content -->
-<div id="Timeline">
- <div>
- <h1 style="display:inline;">Timeline </h1>
- <p style="display:inline;">(please click the time table to explore more)</p>
- </div>
- <div class='panel'>
- <div id="s1" class="expandable" style='height: 50px;padding-top:5px;'>
- <a href="#!" onclick="toggleHeight1(this, 650); return false"
- style="font-family: 'Acme', sans-serif;font-size:28px;color: #479fcc;height: 20px;">
- June, 2022
- </a>
- <p>
- <br>
- <b>2022-06-01~2022-06-07</b>   <br><br>Select the team members for the experiment, wiki, human
- practice,
- modeling, and artwork respectively and form a team of 15 members.<br>
- We analyzed iGEM competition and shared our understanding of it collectively.<br>
- After communicating with our PI, we finally selected our topic this year----Chlipid: a highly productive
- biofuel factory.
- <br><br>
- <b>2022-06-08~2022-06-14</b>   <br><br>Our team members looked up and read the literature
- extensively,
- and
- finally settled the culture, transformation, gene editing, and gene expression methods of Chlamydomonas
- reinhardtii, as well as the according design and improvement of the Crispr-cas9 system.<br>
- Our team members did cas9 plasmid and sequence summary, gene transformation system construction, lipid gene
- and the summary of protocols.<br><br>
- <b>2022-06-15~2022-06-30</b>  <br><br> We Started to experiment with different culture methods,
- metabolic
- pathway studies and CRISPR system selection for Chlamydomonas reinhardtii.<br>
- We designed 6 Composite Parts, they are HSP70A Promoter+3×Flag+NLS+SpCas9+NLS+Rbcs2 Termã€U6 promotor+insert
- site+SpScaffold+polyT Termã€Rbcs2 Promotor+APHVII+Rbcs2 Termã€Rbcs2 Promotor+mCherry+Rbcs2 Termã€Rbcs2
- Promotor+Staygold+Rbcs2 Term.<br>
- We sent the sequences we needed to Tsingke Biotechnology Co., Ltd for synthesis, and got our synthesized
- sequence fragments at the end of June. <br><br>
- </p>
-
-
- <a href="#!" onclick="toggleHeight1(this, 650);" style='font-size:20px;color:#2c498c'>
- click to close
- </a>
-
+ <div style="background-color:rgb(206,225,234) ;">
+ <div id="Timeline" style="margin-left: 10px;">
+ <div style="font-family: 'Home';"><br>
+ <h1 style="display:inline;font-size: 2.4vw;"><i class="fab fa-pagelines"></i> Timeline </h1>
+ <p style="display:inline;">(please click the time table to explore more)</p>
+ </div></div>
+ <div class="boxs">
+ <div class="box">
+ <div id="btn-1" class="month" style="padding-top: 15px;"><b>June, 2022</b></div>
+ <div class="content" >
+ <div id="spread-1" style="display: none;">
+ <p>
+ <br>
+ <b>2022-06-01~2022-06-07</b>   <br><br>Select the team members for the experiment, wiki, human
+ practice,
+ modeling, and artwork respectively and form a team of 15 members.<br>
+ We analyzed iGEM competition and shared our understanding of it collectively.<br>
+ After communicating with our PI, we finally selected our topic this year----Chlipid: a highly productive
+ biofuel factory.
+ <br><br>
+ <b>2022-06-08~2022-06-14</b>   <br><br>Our team members looked up and read the literature
+ extensively,
+ and
+ finally settled the culture, transformation, gene editing, and gene expression methods of Chlamydomonas
+ reinhardtii, as well as the according design and improvement of the Crispr-cas9 system.<br>
+ Our team members did cas9 plasmid and sequence summary, gene transformation system construction, lipid gene
+ and the summary of protocols.<br><br>
+ <b>2022-06-15~2022-06-30</b>  <br><br> We Started to experiment with different culture methods,
+ metabolic
+ pathway studies and CRISPR system selection for Chlamydomonas reinhardtii.<br>
+ We designed 6 Composite Parts, they are HSP70A Promoter+3×Flag+NLS+SpCas9+NLS+Rbcs2 Termã€U6 promotor+insert
+ site+SpScaffold+polyT Termã€Rbcs2 Promotor+APHVII+Rbcs2 Termã€Rbcs2 Promotor+mCherry+Rbcs2 Termã€Rbcs2
+ Promotor+Staygold+Rbcs2 Term.<br>
+ We sent the sequences we needed to Tsingke Biotechnology Co., Ltd for synthesis, and got our synthesized
+ sequence fragments at the end of June. <br><br>
+ </p>
+ <p id="closet1" style="color:#0d6efd;cursor: pointer;">
+ click to close
+ </p>
+ </div>
</div>
</div>
-
- <div class='panel'>
- <div id="s2" class="expandable" style='height: 50px;padding-top:5px;'>
- <a href="#!" onclick="toggleHeight2(this, 1280); return false"
- style="font-family: 'Acme', sans-serif;font-size:28px;color: #479fcc;height: 20px;">
- July, 2022
- </a>
+ <hr>
+ <div class="box">
+ <div id="btn-2" class="month" style="padding-top: 10px;"><b>July, 2022</b></div>
+ <div class="content" >
+ <div id="spread-2" style="display: none;">
<p>
<br>
<b>2022-07-01~2022-07-07</b>   <br><br>We designed and improved the following experiments:
@@ -167,201 +132,193 @@ width: 96%;
<br>We constructed the plamid which involves CRISPR-Cas9 system successfully and started to design sgRNAs.
<br><br>
</p>
- <a href="#!" onclick="toggleHeight2(this,1280);" style='font-size:20px;color:#2c498c'>
- click to close
- </a>
-
- </div>
- </div>
-
- <div class='panel'>
- <div id="s3" class="expandable" style='height: 50px;padding-top:5px;'>
- <a href="#!" onclick="toggleHeight3(this, 1300); return false"
- style="font-family: 'Acme', sans-serif;font-size:28px;color: #479fcc;height: 20px;">
- August, 2022
- </a>
- <p>
- <br>
- <b>2022-08-01~2022-08-07</b>    <br><br>We found false positives of our algae after
- electrotransformation. After communicating with our PI, we decided to use a 96-well plate for the secondary
- selection of our algae.
- <br>Based on the results of the plate after the second electrotransformation, we determined the screening
- pressure of 25 μg/mL as the screening pressure after electrotransformation, which laid the foundation for
- the later electrotransformation experiments.
- <br>The modified method of plasmid mini extraction reduces the loss of reagents.
- <br>The most suitable Nile Red staining method was explored from the variables of microwave heating time,
- whether DMSO was added or not, and the staining solvent.
- <br>We finished the design of all the sgRNAs and sent them to the company for synthesis and started to
- insert our sgRNAs into the insert site of our system.
- <br><br>
-
- <b>2022-08-08~2022-08-14</b>    <br><br>We summarized the experience of electrotransformation
- and designed a protocol for secondary screening and subsequent observation of fluorescence based on the
- grown single algal colonies.
- <br>Due to the low conversion rate and a low number of positive clones in the early stage resulted from
- electrotransformation, we retrieved the factors which influence the electrotransformation efficiency and
- designed two more sets of electrotransformation protocols which were remained to be tried.
- <br>We did the in-depth drawing of the growth curve for algae of WT and algae under Fe and N stress
- conditions, Nile red staining, and quantitative analysis of fluorescent images experiments.
- <br>We did the first round of fragment insertion. And we found that only a few succeeded, and the control
- groups of DH5α transformation were often contaminated with spurious bacteria.
- <br><br>
-
- <b>2022-08-15~2022-08-21</b>    <br><br>Based on the experimental results, we decided to
- change the antibiotic used for antibacterial purposes from Amp to Tim. The concentration of usage was 250
- μg/mL. These gestures led to the reduction of the miscellaneous bacteria.
- <br>In our constructed plasmid with empty vectors (pTX2038, pTX2039, etc.) as well as plasmid vectors that
- have been combined with different gRNAs, different electrotransformation protocols were tried while
- performing formal electrotransformation experiments with these materials in the hope of obtaining optimal
- processing conditions.
- <br>We learned to use a fluorescence spectrophotometer and performed quantitative analysis of Nile Red
- staining for a new set of stresses.
- <br>We consulted our PI and Advisor for the advice on the second round of fragment insertion, after which
- process we increased the cycle number of Golden Gate assembly. Although we focused on an aseptic operation
- to avoid contamination by spurious bacteria, the insertion success rate was still not high.
- <br><br>
-
- <b>2022-08-22~2022-08-31</b>    <br><br>We purchased the Electroporation Buffer (ME-Suc): MAX
- Efficiencyâ„¢ Transformation Reagent (therfisher science, #A24229). Subsequently, the electrotransformation
- experiments were performed according to its instructions. And the positive results were obtained, so we
- decided to continue using this protocol for subsequent electrotransformation experiments.
- <br>We did a quantification of Nile Red staining results by using a fluorophotometer.
- <br><br>
- </p>
-
-
- <a href="#!" onclick="toggleHeight3(this, 1300);" style='font-size:20px;color:#2c498c'>
- click to close
- </a>
-
- </div>
- </div>
-
- <div class='panel'>
- <div id="s4" class="expandable" style='height: 50px;padding-top:5px;'>
- <a href="#!" onclick="toggleHeight4(this, 680); return false"
- style="font-family: 'Acme', sans-serif;font-size:28px;color: #479fcc;height: 20px;">
- September, 2022
- </a>
- <p>
- <br>
- <b>2022-09-01~2022-09-07</b>    <br><br>Positive clones were obtained by
- electrotransformation and target bands were successfully verified by algal colony PCR.
- <br>In the following stage, we continuously did electrotransformation experiments.
- <br>The glass bead transformation experiment was continued and single algal colonies were found to grow in
- the blank group during the glass bead process.
- <br>We did the third round of plasmid construction, this time we were more careful. Finally our success rate
- was much higher though certain failure still exists.
- <br><br>
-
- <b>2022-09-08~2022-09-14</b>    <br><br>We continuously did electrotransformation
- experiments.
- <br>The glass bead conversion experiments were continued and the screening pressure of glass bead conversion
- was re-executed.
- <br><br>
-
- <b>2022-09-15~2022-09-21</b>    <br><br>Continuously doing electrotransformation experiments
- <br><br>
-
- <b>2022-09-22~2022-09-30</b>    <br><br>Continuously doing electrotransformation experiments.
- <br><br>
-
- </p>
-
-
- <a href="#!" onclick="toggleHeight4(this, 680);" style='font-size:20px;color:#2c498c'>
- click to close
- </a>
-
- </div>
+ <p id="closet2" style="color:#0d6efd;cursor: pointer;">
+ click to close
+ </p>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="box">
+ <div id="btn-3" class="month" style="padding-top: 10px;"><b>August, 2022</b></div>
+ <div class="content" >
+ <div id="spread-3" style="display: none;">
+ <p>
+ <br>
+ <b>2022-08-01~2022-08-07</b>    <br><br>We found false positives of our algae after
+ electrotransformation. After communicating with our PI, we decided to use a 96-well plate for the secondary
+ selection of our algae.
+ <br>Based on the results of the plate after the second electrotransformation, we determined the screening
+ pressure of 25 μg/mL as the screening pressure after electrotransformation, which laid the foundation for
+ the later electrotransformation experiments.
+ <br>The modified method of plasmid mini extraction reduces the loss of reagents.
+ <br>The most suitable Nile Red staining method was explored from the variables of microwave heating time,
+ whether DMSO was added or not, and the staining solvent.
+ <br>We finished the design of all the sgRNAs and sent them to the company for synthesis and started to
+ insert our sgRNAs into the insert site of our system.
+ <br><br>
+
+ <b>2022-08-08~2022-08-14</b>    <br><br>We summarized the experience of electrotransformation
+ and designed a protocol for secondary screening and subsequent observation of fluorescence based on the
+ grown single algal colonies.
+ <br>Due to the low conversion rate and a low number of positive clones in the early stage resulted from
+ electrotransformation, we retrieved the factors which influence the electrotransformation efficiency and
+ designed two more sets of electrotransformation protocols which were remained to be tried.
+ <br>We did the in-depth drawing of the growth curve for algae of WT and algae under Fe and N stress
+ conditions, Nile red staining, and quantitative analysis of fluorescent images experiments.
+ <br>We did the first round of fragment insertion. And we found that only a few succeeded, and the control
+ groups of DH5α transformation were often contaminated with spurious bacteria.
+ <br><br>
+
+ <b>2022-08-15~2022-08-21</b>    <br><br>Based on the experimental results, we decided to
+ change the antibiotic used for antibacterial purposes from Amp to Tim. The concentration of usage was 250
+ μg/mL. These gestures led to the reduction of the miscellaneous bacteria.
+ <br>In our constructed plasmid with empty vectors (pTX2038, pTX2039, etc.) as well as plasmid vectors that
+ have been combined with different gRNAs, different electrotransformation protocols were tried while
+ performing formal electrotransformation experiments with these materials in the hope of obtaining optimal
+ processing conditions.
+ <br>We learned to use a fluorescence spectrophotometer and performed quantitative analysis of Nile Red
+ staining for a new set of stresses.
+ <br>We consulted our PI and Advisor for the advice on the second round of fragment insertion, after which
+ process we increased the cycle number of Golden Gate assembly. Although we focused on an aseptic operation
+ to avoid contamination by spurious bacteria, the insertion success rate was still not high.
+ <br><br>
+
+ <b>2022-08-22~2022-08-31</b>    <br><br>We purchased the Electroporation Buffer (ME-Suc): MAX
+ Efficiencyâ„¢ Transformation Reagent (therfisher science, #A24229). Subsequently, the electrotransformation
+ experiments were performed according to its instructions. And the positive results were obtained, so we
+ decided to continue using this protocol for subsequent electrotransformation experiments.
+ <br>We did a quantification of Nile Red staining results by using a fluorophotometer.
+ <br><br>
+ </p>
+ <p id="closet3" style="color:#0d6efd;cursor: pointer;">
+ click to close
+ </p>
+ </div>
+ </div>
+</div>
+<hr>
+<div class="box">
+ <div id="btn-4" class="month" style="padding-top: 10px;"><b>September, 2022</b></div>
+ <div class="content" >
+ <div id="spread-4" style="display: none;">
+ <p>
+ <br>
+ <b>2022-09-01~2022-09-07</b>    <br><br>Positive clones were obtained by
+ electrotransformation and target bands were successfully verified by algal colony PCR.
+ <br>In the following stage, we continuously did electrotransformation experiments.
+ <br>The glass bead transformation experiment was continued and single algal colonies were found to grow in
+ the blank group during the glass bead process.
+ <br>We did the third round of plasmid construction, this time we were more careful. Finally our success rate
+ was much higher though certain failure still exists.
+ <br><br>
+
+ <b>2022-09-08~2022-09-14</b>    <br><br>We continuously did electrotransformation
+ experiments.
+ <br>The glass bead conversion experiments were continued and the screening pressure of glass bead conversion
+ was re-executed.
+ <br><br>
+
+ <b>2022-09-15~2022-09-21</b>    <br><br>Continuously doing electrotransformation experiments
+ <br><br>
+
+ <b>2022-09-22~2022-09-30</b>    <br><br>Continuously doing electrotransformation experiments.
+ <br><br>
+
+ </p>
+ <p id="closet4" style="color:#0d6efd;cursor: pointer;">
+ click to close
+ </p>
+ </div>
+ </div>
+</div>
+<hr>
+<div class="box">
+ <div id="btn-5" class="month" style="padding-top: 10px;"><b>October, 2022</b></div>
+ <div class="content" >
+ <div id="spread-5" style="display: none;">
+ <p>
+ <br>
+ <b>2022-10-01~2022-10-07</b>    <br><br>We organized the data and results of the stress
+ conditions.
+ <br>We selected appropriate pictures for our various experiments.
+ <br>We organized the results of transcriptome analysis and then wrote our wikipage.
+ <br><br>
+
+ <b>2022-10-08~2022-10-12</b>    <br><br>We organized and analyzed our previous results, and
+ then wrote our wiki.
+ <br><br>
+ </p>
+ <p id="closet5" style="color:#0d6efd;cursor: pointer;">
+ click to close
+ </p>
+ </div>
+ </div>
+</div>
+<hr>
</div>
+</div>
- <div class='panel'>
- <div id="s5" class="expandable" style='height: 50px;padding-top:5px;'>
- <a href="#!" onclick="toggleHeight5(this, 400); return false"
- style="font-family: 'Acme', sans-serif;font-size:28px;color: #479fcc;height: 20px;">
- October, 2022
- </a>
- <p>
- <br>
- <b>2022-10-01~2022-10-07</b>    <br><br>We organized the data and results of the stress
- conditions.
- <br>We selected appropriate pictures for our various experiments.
- <br>We organized the results of transcriptome analysis and then wrote our wikipage.
- <br><br>
-
- <b>2022-10-08~2022-10-12</b>    <br><br>We organized and analyzed our previous results, and
- then wrote our wiki.
- <br><br>
- </p>
-
-
- <a href="#!" onclick="toggleHeight5(this, 2260);" style='font-size:20px;color:#2c498c'>
- click to close
- </a>
-
- </div>
- </div>
-</div>
-<div id="Labnote">
- <h1>Labnote</h1>
- <p></p>
- <a href="https://static.igem.wiki/teams/4335/wiki/protocol.pdf" target="_blank">Download the
- file</a>
- <p></p>
- <embed src="https://static.igem.wiki/teams/4335/wiki/protocol.pdf"
- style="width:100%;height:680px;">
+<div id="Labnote" style="margin-left: 10px;padding-top: 40px;background-color:rgb(244,242,232)">
+ <div style="font-family: 'Home';">
+ <h1 style="display:inline;font-size: 2.4vw;"><i class="fas fa-book"></i> Labnote </h1>
+ <p style="display:inline;"><a style="text-decoration: none;" href="https://static.igem.wiki/teams/4335/wiki/protocol.pdf" target="_blank">Download the
+ file</a>
+ </p>
+ </div><br>
</div>
+
{% endblock %}
{% block js %}
-function toggleHeight1(e, maxHeight) {
-e = document.getElementById("s1"); // e = the gray div
-
-if (e.style.height != '50px') {
-e.style.height = '50px'; // height of one line: 20px
-} else {
-e.style.height = maxHeight + 'px';
-}
-}
-function toggleHeight2(e, maxHeight) {
-e = document.getElementById("s2"); // e = the gray div
-
-if (e.style.height != '50px') {
-e.style.height = '50px'; // height of one line: 20px
-} else {
-e.style.height = maxHeight + 'px';
-}
-}
-
-function toggleHeight3(e, maxHeight) {
-e = document.getElementById("s3"); // e = the gray div
-
-if (e.style.height != '50px') {
-e.style.height = '50px'; // height of one line: 20px
-} else {
-e.style.height = maxHeight + 'px';
-}
-}
-
-function toggleHeight4(e, maxHeight) {
-e = document.getElementById("s4"); // e = the gray div
-
-if (e.style.height != '50px') {
-e.style.height = '50px'; // height of one line: 20px
-} else {
-e.style.height = maxHeight + 'px';
-}
-}
-
-function toggleHeight5(e, maxHeight) {
-e = document.getElementById("s5"); // e = the gray div
-
-if (e.style.height != '50px') {
-e.style.height = '50px'; // height of one line: 20px
-} else {
-e.style.height = maxHeight + 'px';
-}
-}
+ var btn1 = $('#btn-1')
+ var closet1=$('#closet1')
+ var spread1 = $('#spread-1')
+ btn1.click(function () {
+ spread1.slideToggle()
+ })
+ closet1.click(function () {
+ spread1.slideToggle()
+ })
+
+ var btn2 = $('#btn-2')
+ var closet2=$('#closet2')
+ var spread2 = $('#spread-2')
+ btn2.click(function () {
+ spread2.slideToggle()
+ })
+ closet2.click(function () {
+ spread2.slideToggle()
+ })
+
+ var btn3 = $('#btn-3')
+ var closet3=$('#closet3')
+ var spread3 = $('#spread-3')
+ btn3.click(function () {
+ spread3.slideToggle()
+ })
+ closet3.click(function () {
+ spread3.slideToggle()
+ })
+
+ var btn4 = $('#btn-4')
+ var closet4=$('#closet4')
+ var spread4 = $('#spread-4')
+ btn4.click(function () {
+ spread4.slideToggle()
+ })
+ closet4.click(function () {
+ spread4.slideToggle()
+ })
+
+ var btn5 = $('#btn-5')
+ var closet5=$('#closet5')
+ var spread5 = $('#spread-5')
+ btn5.click(function () {
+ spread5.slideToggle()
+ })
+ closet5.click(function () {
+ spread5.slideToggle()
+ })
{% endblock %}