Difference between revisions of "Team:Mingdao/Notebook"

 
(149 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{:Team:Mingdao/test}}
+
{{:Team:Mingdao/test9}}
 +
<html>
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
Line 6: Line 7:
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <title>Notebook</title>
 
     <title>Notebook</title>
 +
 
 
   </head>
 
   </head>
−
  <style type="text/css">
+
 
 +
<style type="text/css">
  
 
* {
 
* {
Line 19: Line 22:
 
   padding: 0;
 
   padding: 0;
 
   font-family: 'Ubuntu' !important; }
 
   font-family: 'Ubuntu' !important; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
  
  
 +
img.right {
 +
    float: right;
 +
  }
 
.bg-container {
 
.bg-container {
 +
  background-attachment: fixed;
 +
 
 
   overflow: hidden;
 
   overflow: hidden;
 
   position: relative;
 
   position: relative;
−
  background-color: #c5d7d9;
+
   background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg);
−
   background-image: url(https://static.igem.org/mediawiki/2017/2/20/T--CSMU_NCHU_Taiwan--inter_lab.png);
+
   background-repeat: no-repeat;
−
   background-repeat: repeat-y;
+
 
   background-size: 100%;
 
   background-size: 100%;
 +
  background-position: center;
 
}
 
}
  
 
.my-main-container {
 
.my-main-container {
 
   width: 100%;
 
   width: 100%;
−
   padding: 50px 7%;
+
   padding: 600px 7%;
 
  }
 
  }
  
 
.main-content {
 
.main-content {
−
   background-color: white;
+
   background-color: rgba(255, 255, 255, .4);
−
   width: 80%;
+
   width: 90%;
−
   margin-left: 10%;
+
   margin-left: 5%;
 
   padding: 50px;
 
   padding: 50px;
 
   min-height: 180vh;
 
   min-height: 180vh;
 
   z-index: 10; }
 
   z-index: 10; }
  
−
.text-area {
+
.m-text-area h1 {
−
  margin-bottom: 80px; }
+
     font-size: 50px;
−
  .text-area h1 {
+
−
     font-size: 60px;
+
 
     font-weight: 700;
 
     font-weight: 700;
 
     font-family: 'Arizonia' !important;
 
     font-family: 'Arizonia' !important;
−
     text-align: center; }
+
     text-align: center;
−
  .text-area p {
+
    margin-bottom: 1rem;
−
     font-size: 22px;
+
    color: #385e66; }
 +
.m-text-area p {
 +
     font-size: 22px !important;
 +
    font-family: 'Ubuntu' !important;
 
     font-weight: 500; }
 
     font-weight: 500; }
  
−
.pdfbtn {
+
.m-block img {
−
   width: 100%;
+
   width: 100%; }
−
   margin: 20px 0 10px 0;
+
 
−
   padding: 10px 20px;
+
.path-btns {
−
   border-radius: 5px;
+
   position: fixed;
−
   background-color: #556b7e;
+
   width: 250px;
−
   color: white;
+
   top: 200px;
−
  display: block;
+
   left: 225px; }
−
  position: relative; }
+
   .path-btns .path-dot {
−
  .pdfbtn i {
+
    width: 25px;
 +
    height: 25px;
 +
    border-radius: 50%;
 
     position: absolute;
 
     position: absolute;
−
     right: 50px;
+
     background-color: #fff;
−
     top: 50%;
+
     top: 10px;
−
     transform: translateY(-50%); }
+
     left: 27px;
 +
    border: 5px solid #385e66;
 +
    cursor: pointer; }
 +
    .path-btns .path-dot.active {
 +
      background-color: #385e66; }
 +
    .path-btns .path-dot:hover {
 +
      transition: all .3s;
 +
      transform: scale(1.2); }
  
−
.pdf-container {
 
−
  width: 100%;
 
−
  text-align: center;
 
−
  height: 90vh;
 
−
  display: none; }
 
−
 
−
.ul-container {
 
−
  width: 100%;
 
−
  text-align: center;
 
−
  height: auto;
 
−
  }
 
−
 
−
.ul-container ul.medal li {
 
−
  list-style: none; }
 
−
  .ul-container ul.medal li:before {
 
−
    content: '';
 
−
    display: inline-block;
 
−
    height: 1em;
 
−
    width: 2em;
 
−
    background-size: 1em;
 
−
    background-image: url(../img/circle.png);
 
−
    background-repeat: no-repeat; }
 
−
 
−
.ul-container ul {
 
−
  text-align: left;
 
−
  padding: 20px 50px;
 
−
  margin-left: 0;
 
−
 
−
  border: #556b7e solid 2px;
 
−
  font-size: 22px; }
 
−
  .ul-container ul li {
 
−
    padding: 10px;
 
−
    list-style: disc; }
 
−
    .ul-container ul li a {
 
−
      text-decoration: none;
 
−
      color: #000; }
 
−
      .ul-container ul li a:visited, .ul-container ul li a:hover, .ul-container ul li a:focus {
 
−
        color: #000;
 
−
        text-decoration: none; }
 
−
    .ul-container ul li span {
 
−
      background-color: #fadd3a;
 
−
      padding: 1px 10px;
 
−
      border-radius: 5px;
 
−
      margin-left: 20px;
 
−
      cursor: pointer; }
 
−
    .ul-container ul li i {
 
−
      padding-left: 10px; }
 
  
 +
.path {
 +
  height: 65px;
 +
  display: flex; }
 +
  .path .pathSvg {
 +
    display: block; }
 +
  .path .pathWord {
 +
    padding-right: 10%; }
 +
  .path .path-btn {
 +
    cursor: pointer;
 +
    fill: #fff; }
 +
    .path .path-btn.path-active {
 +
      fill: #385e66; }
 +
  .path .path-word-sm {
 +
    font-size: 12px; }
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
}
 
#HQ_page .text-area p {
 
#HQ_page .text-area p {
 
   font-size: 22px;
 
   font-size: 22px;
 
   font-family: 'Ubuntu';
 
   font-family: 'Ubuntu';
 
   font-weight: 500; }
 
   font-weight: 500; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
 +
 +
.text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important; }
 +
 +
.m-text-area {
 +
  padding-left: 225px; }
 +
.m-text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important;
 +
}
 +
.path-tags{
 +
  position: fixed;
 +
  left: 11%;
 +
  top: 200px;
 +
}
 +
.path-tags ul{
 +
  color: #385e66;
 +
  list-style: none;
 +
  font-size: 18px;
 +
  font-family: 'Ubuntu' !important;
 +
}
 +
 +
.path-tags li{
 +
  cursor: pointer;
 +
}
 +
 +
.path-tags span{
 +
    color: #385e66;
 +
    position: relative;
 +
    top: -8px;
 +
    left: 10px;
 +
    z-index: 1;
 +
 +
    font-size: 15px;
 +
}
 
.top {
 
.top {
 
   position: fixed;
 
   position: fixed;
Line 130: Line 166:
 
   .top img {
 
   .top img {
 
     width: 100%; }
 
     width: 100%; }
−
h2 {
+
.m-text-area h3 {
−
font-family: 'Ubuntu';
+
    font-size: 28px;
−
font-size: 30px;
+
    text-align: left;
−
text-align: center;
+
    font-weight:700;
−
color: #000000 !important;
+
    margin-bottom: 3rem !important;
 +
    margin-top: 1rem;
 +
    color: #385e66  !important; }
 +
.m-text-area p2 {
 +
    font-size: 15px;
 +
    }
 +
 
 +
 
 +
.img-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  display: none; }
 +
  .img-container img {
 +
    width: 100%; }
 +
 
 +
 
 +
.pdfbtn {
 +
  width: 100%;
 +
  margin: 20px 0 10px 0;
 +
  padding: 10px 20px;
 +
  border-radius: 5px;
 +
  background-color: #385e66;
 +
  color: white;
 +
  display: block;
 +
  position: relative; }
 +
  .pdfbtn i {
 +
    position: absolute;
 +
    right: 50px;
 +
    top: 50%;
 +
    transform: translateY(-50%); }
 +
 
 +
.tag{
 +
  font-size:26px !important;
 +
  font-weight:bold;
 +
  color:#385e66 !important;
 +
  font-family: 'Ubuntu' !important;
 +
}
 +
.top-picture{
 +
  position:absolute;
 +
  z-index:1
 
}
 
}
  
 
</style>
 
</style>
  
−
  <body>
+
<body>
−
    <div class="bg-container">
+
<div class="bg-container" style="max-height:none;">  
 +
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/8/85/T--Mingdao--Phil13-7.png" style="width:100%">
 +
   
 
       <div class="my-main-container">
 
       <div class="my-main-container">
 
         <div class="main-content">
 
         <div class="main-content">
−
           <div class="text-area">
+
           <div class="m-text-area">
−
             <h1>Notebook</h1>
+
       
−
             <p>The aim of the interlab this year is to assess the relationship between fluorescence and Abs600 when samples were measured all around the world.</p>
+
             <div id="notebook-timeline" class="m-block" >
 +
            <h1>Timeline</h1>
 +
            <!-- <h3>Timeline</h3> -->
 +
             <img src="https://static.igem.org/mediawiki/2018/e/e5/T--Mingdao--notebook_timeline_hp.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg">
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
            <img src="https://static.igem.org/mediawiki/2018/6/61/T--Mingdao--notebook_timeline1.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/b/bc/T--Mingdao--notebook_timeline4.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg">
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
                <div id="notebook-assay" class="m-block" >
 +
                <h1>Mosquito Assay</h1>
 +
              <!--  <h3>Mosquito Assay</h3> -->
 +
                <img src="https://static.igem.org/mediawiki/2018/3/35/T--Mingdao--notebook_flow_chart1.jpg">
 +
             
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />             
 +
              <div id="notebook-functional" class="m-block" >
 +
                <h1>Functional Assay</h1>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Mingdao--notebook_flaw_chart2.jpg">
 +
             
 +
           
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />
  
−
         
+
            <div id="notebook-plasmid" class="m-block" >
 +
<br />
 +
                <h1>Plasmid Extraction</h1>
 +
               
 +
               
 +
                <img src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--notebook1.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg">
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />           
 +
            <div id="notebook-PCR" class="m-block" >
 +
<br />
 +
                <h1>PCR & Conoly PCR</h1>
 +
             
 +
                <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--notebook3.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/aa/T--Mingdao--notebook4.jpg">
  
 +
<br />
 +
<br />
 +
<br />
 +
<br />               
 +
            </div>
 +
           
 +
            <div id="notebook-gel" class="m-block" >
 +
<br />
 +
                <h1>Gel Elution & PCR Cleanup</h1>
 +
             
 +
             
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Mingdao--notebook5.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg">
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />           
 +
            <div id="notebook-restriction" class="m-block" >
 +
<br />
 +
                <h1>Restriction Enzyme</h1>
 +
               
  
−
 
+
              <img src="https://static.igem.org/mediawiki/2018/5/5b/T--Mingdao--notebook7.jpg">
−
          <div class="pdf-area">
+
               
−
<div class="img-container" id="lab-1">
+
−
<embed src="https://static.igem.org/mediawiki/2018/3/32/T--Mingdao--notebook_flowchart.pdf" style="width:100%; height:1000px" frameborder="0"></embed>
+
−
            </div>
+
−
          </div>
+
−
<h2>Discussion</h2>
+
−
<div class="ul-container">
+
−
              <ul>
+
−
                <li>This year, we finished our interlab study in July. However, the first version of the protocol provided from iGEM HQ did not suggest a clear λex and λem then. We tracked back to the resource of the Fluorescein Sodium Salt in the Measurement Kit, and found that the λex is 460nm and the λem is 515nm in the <a href="http://www.sigmaaldrich.com/catalog/product/sial/30181" style="text-decoration:underline;"> Sigma-Aldrich’s website.</a> Therefore, we adopted these values in our interlab study.</li>
+
−
                <li>The value of Fluorescence deviated much from the standard curve in high Fluorescein Concentration. It is hypothesized that the Fluorescence will be distorted because of self-absorption effect.</li>
+
−
                <li>It was found that the ratio decreased over time for all samples, except for Test Device 1. Taking the high Fluorescein/Abs600 radio of Test Device 1 into account, there was little variation in readings when using different settings on the plate reader. Given that iGEM HQ has kept the protocol consistent, it is hypothesized that the Fluorescence was high enough to ignore the self-absorption of Fluorescein.</li>
+
−
                <li>As shown in the results, the growth of the E. coli in the six test devices and both controls were not consistent during the 6-hour period. It is implied that the variation of the Fluorescein could be interfered by the count of E. coli not by the ability to produce Fluorescein.</li>
+
−
              </ul>
+
 
             </div>
 
             </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br /> 
 +
            <div id="notebook-transformation" class="m-block" >
 +
<br />
 +
                <h1>Transformation</h1>
 +
               
 +
              <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg"> 
 +
            </div>
 +
 +
         
 +
           
 +
               
 +
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 +
      </div>
 +
 +
      <div class="path-tags">
 +
        <ul>
 +
          <p class="tag">Notebook</p>
 +
          <li id="timeline-btn" class="tag-btn">- Timeline</li>
 +
          <li id="assay-btn" class="tag-btn">- Mosquito Assay </li>
 +
          <li id="functional-btn" class="tag-btn">- Functional Assay</li>
 +
          <li id="plasmid-btn" class="tag-btn">- Plasmid Extraction</li>
 +
          <li id="PCR-btn" class="tag-btn">- PCR & Colony PCR</li>
 +
          <li id="gel-btn" class="tag-btn">- Gel Elution & PCR Cleanup</li>
 +
          <li id="restriction-btn" class="tag-btn">- Restriction Enzyme</li>
 +
          <li id="transformation-btn" class="tag-btn">- Transformation</li>
 +
         
 +
 +
         
 +
        </ul>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <div class="top">
 
     <div class="top">
−
       <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
+
       <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 
     </div>
 
     </div>
 
   </body>
 
   </body>
 
   <script type="text/javascript">
 
   <script type="text/javascript">
−
     $('#interlab-btn-1').on('click', function(){
+
     $(document).ready(function(){
−
      $('#interlab-1').css('height','250vh')
+
      $('.top').on('click', function(){
−
       $('#interlab-1').slideToggle("slow");
+
        $('html, body').animate({scrollTop: '0px'}, 500);
−
       $('.bg-container').css('max-height','500vh')
+
       });
−
       $('.main-content').css('min-height','200vh')
+
     
−
    });
+
      $("#timeline-btn").click(function() {
−
    $('#interlab-btn-2').on('click', function(){
+
        $('html, body').animate({
−
      $('#interlab-2').slideToggle("slow");
+
            scrollTop: $("#notebook-timeline").offset().top
−
       $('.bg-container').css('max-height','500vh')
+
        }, 500);
−
      $('.main-content').css('min-height','200vh')
+
       });
−
    });
+
     
−
    $('.top').on('click', function(){
+
      $("#assay-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-assay").offset().top
 +
        }, 500);
 +
      });
 +
     
 +
       $("#functional-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-functional").offset().top
 +
        }, 500);
 +
      });
 +
 
 +
 
 +
      $("ul>li#plasmid-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-plasmid").offset().top
 +
        }, 500);
 +
      });
 +
      $("#PCR-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-PCR").offset().top
 +
        }, 500);
 +
      });
 +
      $("#gel-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-gel").offset().top
 +
        }, 500);
 +
      });
 +
       $("#restriction-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-restriction").offset().top
 +
        }, 500);
 +
      });
 +
      $("#transformation-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-transformation").offset().top
 +
        }, 500);
 +
      });
 +
     
 +
  });
 +
  $(document).ready(function(){
 +
 
 +
      for( var i = 1; i < 2; i++){
 +
        $('#public-btn-' + i).click( toggleContainer(i) );
 +
      }
 +
 
 +
      $('.top').on('click', function(){
 
       $('html, body').animate({scrollTop: '0px'}, 500);
 
       $('html, body').animate({scrollTop: '0px'}, 500);
 
     });
 
     });
−
</script>
+
 
 +
});
 +
 
 +
function toggleContainer(i){
 +
  return function(){
 +
      if($('#public-'+i).is(":visible")){
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      else{
 +
        $('.img-container:visible').slideToggle(500);
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      $('.hp-bg-container').css('max-height','none')
 +
      $('.main-content').css('min-height','200vh')
 +
  }
 +
}
 +
  </script>
 +
 
 +
 
 
</html>
 
</html>
 +
 +
 +
{{:Team:Mingdao/test6}}

Latest revision as of 15:32, 15 October 2018

HOME
Notebook

Timeline









Mosquito Assay





Functional Assay






Plasmid Extraction






PCR & Conoly PCR






Gel Elution & PCR Cleanup






Restriction Enzyme






Transformation

    Notebook

  • - Timeline
  • - Mosquito Assay
  • - Functional Assay
  • - Plasmid Extraction
  • - PCR & Colony PCR
  • - Gel Elution & PCR Cleanup
  • - Restriction Enzyme
  • - Transformation