Difference between revisions of "Team:Mingdao/Notebook"

Line 1: Line 1:
 
{{:Team:Mingdao/test}}
 
{{:Team:Mingdao/test}}
−
<html>
 
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
Line 6: Line 5:
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <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>software</title>
+
     <title>APP</title>
 
   </head>
 
   </head>
  
Line 21: Line 20:
 
   padding: 0;
 
   padding: 0;
 
   font-family: 'Ubuntu' !important; }
 
   font-family: 'Ubuntu' !important; }
−
img.center {
+
img.right {
−
   display: block;
+
    float: right;
−
   margin: 0 auto; }
+
   }
−
 
+
img.center{
 +
display: block;
 +
   margin: 0 auto;  
 +
}
 
.bg-container {
 
.bg-container {
−
  overflow: hidden;
 
 
   position: relative;
 
   position: relative;
−
   background-image: url(https://static.igem.org/mediawiki/2017/3/34/T--CSMU_NCHU_Taiwan--long-model.png);
+
   max-height: 200vh; }
−
   background-repeat: repeat-y;
+
   .bg-container > img {
−
  background-size: 100%;
+
    width: 100%;
−
}
+
    margin-top: -45px; }
  
 
.my-main-container {
 
.my-main-container {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 
   width: 100%;
 
   width: 100%;
 +
  height: 100%;
 
   padding: 50px 7%;
 
   padding: 50px 7%;
−
}
+
  min-height: 200vh;
 +
}
  
 
.main-content {
 
.main-content {
Line 53: Line 59:
 
     margin-bottom: 1rem; }
 
     margin-bottom: 1rem; }
 
.m-text-area p {
 
.m-text-area p {
−
     font-size: 22px !important;
+
     font-size: 22px;
−
     font-family: 'Ubuntu' !important;
+
     margin-left:5px;
 
     font-weight: 500; }
 
     font-weight: 500; }
  
Line 98: Line 104:
 
#HQ_page .path .pathWord p {
 
#HQ_page .path .pathWord p {
 
       font-weight: 700;
 
       font-weight: 700;
−
       text-align: left !important;
+
       text-align: left !important;  
 
       font-size: 16px;
 
       font-size: 16px;
 
}
 
}
−
#HQ_page .text-area p {
+
#HQ_page .m-text-area p {
 
   font-size: 22px;
 
   font-size: 22px;
 
   font-family: 'Ubuntu';
 
   font-family: 'Ubuntu';
Line 109: Line 115:
 
   margin: 0 auto; }
 
   margin: 0 auto; }
  
−
  .text-area h2 {
+
  .m-text-area h2 {
 
     text-align: center;
 
     text-align: center;
 +
    font-size: 40px;
 +
    font-weight:700;
 
     margin-bottom: 2rem !important;
 
     margin-bottom: 2rem !important;
 
     margin-top: 2rem;
 
     margin-top: 2rem;
−
     color: black !important; }
+
     color: #603813 !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{
 
.path-tags{
 
   position: fixed;
 
   position: fixed;
−
   left: 15%;
+
   left: 1%;
−
   top: 200px;
+
   top: 270px;
 
}
 
}
 
.path-tags ul{
 
.path-tags ul{
−
   color: #385e66;
+
   color: #006837;
 
   list-style: none;
 
   list-style: none;
−
   font-size: 18px;
+
   font-size: 16px;
−
  font-family: 'Ubuntu' !important;
+
 
}
 
}
  
Line 146: Line 147:
 
     z-index: 1;
 
     z-index: 1;
 
     font-size: 20px;
 
     font-size: 20px;
 +
}
 +
.m-block span{
 +
  position: absolute;
 +
  bottom: 80px;
 +
  right: 350px;
 +
  background-color: #fadd3a;
 +
  padding: 1px 10px;
 +
  border-radius: 5px;
 +
  margin-left: 20px;
 +
  cursor: pointer;
 +
}
 +
 +
.m-block a,
 +
.m-block a:visited,
 +
.m-block a:hover,
 +
.m-block a:focus{
 +
    text-decoration: none;
 +
    color: #000;
 
}
 
}
 
.top {
 
.top {
Line 156: Line 175:
 
   .top img {
 
   .top img {
 
     width: 100%; }
 
     width: 100%; }
−
.m-text-area h3 {
+
.hp-bg-container {
−
    font-size: 28px;
+
−
    text-align: left;
+
−
    font-weight:700;
+
−
    margin-bottom: 2rem !important;
+
−
    margin-top: 1rem;
+
−
    color: #385e66 !important; }
+
−
.m-text-area p2 {
+
−
    font-size: 15px;
+
−
    }
+
−
.ul-style li{
+
−
list-style-type: disc;
+
−
font-size:28px;
+
−
}
+
  
−
.tag{
+
   position: relative;
−
   font-size:26px !important;
+
   max-height: 200vh;
−
   font-weight:bold;
+
   background-color: #fdf8e3; }
−
   color:#385e66 !important;
+
   .hp-bg-container > img {
−
   margin-top:5px;
+
    width: 100%;
−
   font-family: 'Ubuntu' !important;
+
    margin-top: -45px; }
 +
 
 +
.hp-main-container {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 50px 7%;
 +
   min-height: 100vh;
 
}
 
}
−
</style>
 
  
−
<body>
+
.hp-main-content {
−
    <div class="bg-container" style="max-height:none;">
+
  background-color: white;
−
      <!-- <img src="https://static.igem.org/mediawiki/2017/1/1b/T--CSMU_NCHU_Taiwan--modeling.png"> -->
+
  width: 80%;
−
      <div class="my-main-container">
+
  margin-left: 10%;
−
        <div class="main-content">
+
  margin-top:150px;
−
          <div class="m-text-area">
+
  padding: 0px;
−
            <h1>Parts model</h1>
+
  min-height: 0vh;
−
            <div id="model-intro" class="m-block" >
+
  z-index: 10; }
−
                <h2 class="m-subtitle">Overview</h2>
+
−
                <img src="https://static.igem.org/mediawiki/2017/0/06/Csmuxnchu_model_line_green.png" style="width: 60%; transform: translate(35%, -150%);">
+
  
−
                <p>This year,  our parts modeling focuses on predicting the result of the productivity of MSMEG_5998(BBa_K2382001) and Thioredoxin-MSMEG_5998 fusion protein(BBa_K2382009). Since our anti-aflatoxin protein could be used widely in many applications, such as antidote, and feed additive(see more in our human practice page), it is an indispensable important part to our project to have this data when we mass-produce our anti-aflatoxin protein in future work.<br></p>
+
.hp-title {
 +
  position: relative;
 +
  top: 20px;
 +
  text-align: center;
 +
  font-size: 60px;
 +
  font-weight: 700;
 +
  font-family: 'Arizonia' !important;
 +
  margin-bottom: 30px !important;
 +
}
  
 +
.pdf-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  height: 90vh;
  
−
            </div>
+
  }
−
            <div id="parts-Material" class="Material and Method" >
+
−
                <h2 class="m-subtitle">Material and Method</h2>
+
−
                <img src="https://static.igem.org/mediawiki/2017/0/06/Csmuxnchu_model_line_green.png" style="width: 60%; transform: translate(35%, -150%);">
+
−
                <p>We transformed the plasmids that contained MSMEG_5998(BBa_K2382001) and Thioredoxin-MSMEG_5998 fusion protein(BBa_K2382009) respectively into competent cell E.coli BL21. After cultured overnight, measure the ABS600 and diluting the LB medium to O.D.=0.1. Then incubate at 37℃, 150 rpm until the O.D. of the samples reach 0.4 to 0.6 . Add 80ul 100mM IPTG( final concentration : 0.4mM ) to 125 ml flask and return to 37°C. From then on, after measure the O.D. values, transfer 1 ml from the induced sample and centrifuge at maximum speed for 60 seconds at RT and remove supernatant at 0, 1, 2, 3, 4, 5, 6, 7, 8 hours and 0, 0.5, 1.0, 1.5, 2.0 ,2.5 , 3.0, 3.5, 4 hours.
+
−
Then we use Western Blot mehtod to amalyze the quantaty of MSMEG_5998 at each time spot.
+
−
<br></p>
+
  
 +
.ul-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  height: auto;
 +
  }
  
−
            </div>
+
.ul2-container {
−
            <div id="parts-Result" class="Result" >
+
  width: 100%;
−
                <h2 class="m-subtitle">Result</h2>
+
  text-align: center;
−
                <img src="https://static.igem.org/mediawiki/2017/0/06/Csmuxnchu_model_line_green.png" style="width: 60%; transform: translate(35%, -150%);">
+
  height: auto;
 +
display: none;
 +
  }
 +
.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;
 +
  font-family: 'Ubuntu';
 +
  padding: 20px 20px;
 +
  margin-top: -20px;
 +
  margin-left: 0;
 +
  border: #556b7e solid 2px;
 +
  font-size: 22px; }
 +
  .ul-container ul.ul-brown {
  
−
                <br>
+
    border: #603813 solid 2px; }
−
                <img src="https://static.igem.org/mediawiki/2017/5/50/T--CSMU_NCHU_Taiwan--MSMEG5998od0-4.png" alt="" style="width: 100%" >
+
  .ul-container ul li {
−
                <br><br>
+
margin-left: 30px;
 +
margin-top: 50px;
 +
margin-bottom: 20px;
 +
    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; }
  
−
              <p><strong>Fig. I</strong> The growth curve of BL21 induced by IPTG from 0 to 4 hours. The concentration of BL21 reached stationary phase at 4 hours.</p>
+
.pdfbtn {
−
                <br>
+
  width: 100%;
−
                <br>
+
  margin: 20px 0 10px 0;
−
                <img src="https://static.igem.org/mediawiki/2017/d/d0/T--CSMU_NCHU_Taiwan--MSMEG5998od0-8.png" alt="" style="width:100%" >
+
  padding: 10px 20px;
−
                <br>
+
  border-radius: 5px;
−
              <p><strong>Fig. II</strong> The growth curve of BL21 from 0 to 8 hr. The concentration of BL21 reached stationary phase at 4 hours and then declined slightly.</p>
+
  background-color: #556b7e;
−
                <br>
+
  color: white;
 +
text-align: left;
 +
  font-size:22px;
  
−
                <img src="https://static.igem.org/mediawiki/2017/a/a5/T--CSMU_NCHU_Taiwan--MSMEG5998western0-8.png" alt="" style="width:100%" >
+
  display: block;
−
                <br>
+
  position: relative; }
−
                <img src="https://static.igem.org/mediawiki/2017/c/c2/T--CSMU_NCHU_Taiwan--MSMEG5998western0-4.png" alt="" style="width:100%" >
+
.pdfbtn2 {
−
                <br>
+
  width: 100%;
−
              <p><strong>Fig. III</strong> Cell lysates from E. coli BL21 with Synthetic MSMEG5998 from 0 to 8 hours and 0 to 4 hours were analyzed by Western blot. The amount of Synthetic MSMEG5998 increased consistently with time.</p>
+
  margin: 20px 0 10px 0;
−
                <br>
+
  padding: 10px 20px;
 +
  border-radius: 5px;
 +
  background-color: #556b7e;
 +
  color: white;
 +
  font-size:22px;
 +
text-align: left;
 +
  display: block;
 +
  position: relative; }
 +
  .pdfbtn2 i {
 +
    position: absolute;
 +
    right: 50px;
 +
    top: 50%;
 +
    transform: translateY(-50%); }
 +
.pdfbtn p{
  
 +
color: white;
 +
margin: 0px auto;
  
 +
}
 +
.brown-btn {
 +
  background-color: #556b7e;
 +
  height:50px;
 +
}
  
 +
.img-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  }
 +
  .img-container img {
 +
    width: 100%; }
 +
.ul-roman-style{
 +
list-style-type :upper-roman;
 +
font-size:22px;
 +
}
  
 +
</style>
  
 +
<body>
 +
    <div class="hp-bg-container" style="max-height:none;">
 +
      <img src="https://static.igem.org/mediawiki/2017/0/00/T--CSMU_NCHU_Taiwan--LabBookBg2.png">
 +
      <div class="hp-main-container">
 +
        <h1 class="hp-title">Lab Book</h1>
 +
        <div class="hp-main-content">
 +
          <div class="pdf-area">
 +
            <span class="pdfbtn" id="">Lab book</span>                 
 +
                        <div class="img-container" id="lab-1">
 +
<embed src="https://static.igem.org/mediawiki/2017/1/1d/T--CSMU_NCHU_Taiwan--LabBook.pdf" style="width:100%; height:1000px" frameborder="0"></embed>
  
−
 
+
             </div></div>
−
 
+
−
 
+
−
 
+
−
             </div>
+
−
            <div id="parts-Discussion" class="Discussion" >
+
−
                <h2 class="m-subtitle">Discussion</h2>
+
−
                <img src="https://static.igem.org/mediawiki/2017/0/06/Csmuxnchu_model_line_green.png" style="width: 60%; transform: translate(35%, -150%);">
+
−
                <p>1. According to the data shown above, the growth curve of E.coli BL21 with Synthetic MSMEG_5998 reached the ceiling when the O.D. value was approximately at 2 while the  amount of Synthetic MSMEG_5998 were still increasing.</p>
+
−
                <p>2. Though the amount of Synthetic MSMEG_5998 increased consistently with time, we could not jump to conclusions that it was proper to incubate E.coli as long as possible. Another consideration was the time it would take. Just as our expected, it growed fast at the first 2.5 hours. That’s why we also chose 2.5hr after induced by IPTG when we  extracted Synthetic MSMEG_5998 from total cell lysate in other experiments.</p>
+
−
                <p>3. Based on previous experience, if the E.coli was incubated over 4 hours, the protein that it expressed may be degraded or mis-folded, leading to malfunction. As a result, it was also an important issue for this modeling. However, because of the lack of F420, we did not have the chance to check the enzyme activity of each time spot.  It was still unknown whether the titer of the Synthetic MSMEG_5998 would change or not and awaited further research.</p>
+
−
 
+
−
 
+
−
            </div>
+
−
 
+
−
 
+
  
  
  
 
           </div>
 
           </div>
−
        </div>
+
</div>
 
       </div>
 
       </div>
−
      <div class="path-tags">
 
−
        <ul>
 
−
          <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Model" style="color:black;font-size:18px">Structure & Docking Model</a>
 
−
          <br>
 
−
          <a href="https://2017.igem.org/Team:CSMU_NCHU_Taiwan/Model/Degradation" style="color:black;font-size:18px;margin-top:5px">Degradation Model</a>
 
−
          <br>
 
−
<p class="tag">Parts Model</p>
 
−
          <li id="intro-btn" class="tag-btn">- Overview</li>
 
−
          <li id="Material-btn" class="tag-btn">- Material and Method</li>
 
−
          <li id="Result-btn" class="tag-btn">- Result</li>
 
−
          <li id="Discussion-btn"class="tag-btn">- Discussion</li>
 
−
          <br>
 
  
−
        </ul>
+
 
−
      </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/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
Line 280: Line 357:
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 
       });
 
       });
 +
  });
 +
  $(document).ready(function(){
  
−
       $("ul>li#intro-btn").click(function() {
+
       for( var i = 1; i < 3; i++){
−
         $('html, body').animate({
+
         $('#figure-btn-' + i).click( toggleContainer(i) );
−
            scrollTop: $("#model-intro").offset().top
+
       }
−
        }, 500);
+
       for( var j = 1; j < 3; j++){
−
       });
+
         $('#question-btn-' + j).click( toggleContainer2(j) );
−
       $("#Material-btn").click(function() {
+
       }
−
         $('html, body').animate({
+
−
            scrollTop: $("#parts-Material").offset().top
+
−
        }, 500);
+
−
      });
+
−
      $("#Result-btn").click(function() {
+
−
        $('html, body').animate({
+
−
            scrollTop: $("#parts-Result").offset().top
+
−
        }, 500);
+
−
       });
+
  
−
       $("#Discussion-btn").click(function() {
+
       $('.top').on('click', function(){
−
        $('html, body').animate({
+
      $('html, body').animate({scrollTop: '0px'}, 500);
−
            scrollTop: $("#parts-Discussion").offset().top
+
    });
−
        }, 500);
+
−
      });
+
  
 +
});
  
−
  });
 
  
 +
function toggleContainer(i){
 +
  return function(){
 +
      if($('#figure-'+i).is(":visible")){
 +
        $('#figure-'+i).slideToggle(500);
 +
      }
 +
     
 +
      else{
 +
        $('.img-container:visible').slideToggle(500);
 +
        $('#figure-'+i).slideToggle(650);
 +
      }
 +
   
 +
      $('.hp-bg-container').css('max-height','none')
 +
      $('.main-content').css('min-height','200vh')
 +
  }
 +
}
 +
function toggleContainer2(j){
 +
  return function(){
 +
      if($('#question-'+j).is(":visible")){
 +
        $('#question-'+j).slideToggle(500);
 +
      }
 +
     
 +
      else{
 +
        $('.img-container:visible').slideToggle(500);
 +
        $('#question-'+j).slideToggle(500);
 +
      }
 +
   
 +
      $('.hp-bg-container').css('max-height','none')
 +
      $('.main-content').css('min-height','200vh')
 +
  }
 +
}
 
   </script>
 
   </script>
−
 
  
 
</html>
 
</html>

Revision as of 06:56, 11 September 2018

HOME
APP

Lab Book

Lab book