Difference between revisions of "Team:TCFSH Taiwan/Results"

(Prototype team page)
 
Line 1: Line 1:
 
{{TCFSH_Taiwan}}
 
{{TCFSH_Taiwan}}
 +
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  
−
<div class="column full_size" >
 
  
−
<h1>Results</h1>
+
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
  
−
<p>Here you can describe the results of your project and your future plans. </p>
 
  
−
<h5>What should this page contain?</h5>
+
html, body, div, span, applet, object, iframe,
−
<ul>
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
<li> Clearly and objectively describe the results of your work.</li>
+
a, abbr, acronym, address, big, cite, code,
−
<li> Future plans for the project. </li>
+
del, dfn, em, font, img, ins, kbd, q, s, samp,
−
<li> Considerations for replicating the experiments. </li>
+
small, strike, strong, sub, tt, var,
−
</ul>
+
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
  
−
<h5>You should also describe what your results mean: </h5>
+
}
  
−
<ul>
 
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
 
−
<li> Show data, but remember all measurement and characterization data must be on part pages in the Registry. </li>
 
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
 
−
</ul>
 
  
−
</div>
+
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
  
−
<div class="clear"></div>
+
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
  
−
<div class="column half_size" >
+
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:auto ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
    margin-top:10px;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 +
}
  
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
  
−
<h5> Project Achievements </h5>
+
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
}
  
−
<ul>
+
.line {
−
<li>A list of linked bullet points of the successful results during your project</li>
+
  position: absolute;
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
+
  width:1px;
−
</ul>
+
  height:705px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
  
−
</div>
+
}
  
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 15%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
  
−
<div class="column half_size" >
+
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
  
−
<h5>Inspiration</h5>
+
.node {
−
<p>See how other teams presented their results.</p>
+
  margin-left: 40px;/*調node間距*/
−
<ul>
+
  width: 20px;
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
  height: 20px;
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
  margin-top: 30px;
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
  position: relative;
−
</ul>
+
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
  
−
</div>
+
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
  
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:red;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
  
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
  
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    color:#ffd11a;
 +
    text-shadow:1px 1px 10px rgb(153, 153, 255);
 +
    border-left:3px solid rgb(153, 153, 255);
 +
    padding-left:10px !important; 
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
    font-weight:bold;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-left:40px;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
}
 +
 +
.content-image{
 +
    color:#F3F7F7 !important;
 +
    font-size:11pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
    width:50vw;
 +
    margin:auto;
 +
    padding-left:60px;
 +
}
 +
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
 +
 +
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 +
 +
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:20px;
 +
    padding-bottom:20px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:8vw;
 +
    width:80%;
 +
    padding-bottom:10px;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:17vw;
 +
    width:50%;
 +
    padding-bottom:10px;
 +
}
 +
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
 +
</style>
 +
</head>
 +
<body>
 +
<h1>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
      <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Experiment</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Background</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
         
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Overview</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div> 
 +
         
 +
 
 +
 +
    </nav>
 +
 +
 +
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2017/6/60/Resultstcfsh.jpeg" class="main-img" width="75%">
 +
  </div>
 +
 +
 +
 +
<!--wiki content-->
 +
 +
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Experiment</p>
 +
    <p class="content">Our product aims to reach a high quality of “long-term monitor”, which means considerably stable expression of color is needed. Thus, we choose chromoprotein as our reporter protein due to its steadily expression and low half-life degradation rate. (See more in <a href="https://2008.igem.org/Team:KULeuven/Data/GFP" style="color: orange">here</a>)</p>
 +
    </p>
 +
   
 +
 +
    <p class="content-1">cj-Blue/p>
 +
    <p class="content">We add a LVA tag to cjBlue in order to accelerate its degrade speed. (See more in <a href="https://2014.igem.org/Team:Edinburgh/project/degrons" style="color: orange">here</a>)</p>
 +
    </p>
 +
 +
    <img src="https://static.igem.org/mediawiki/2017/6/6a/Resulttcfsh1.png" class="bigphoto" width="50%">
 +
    <p class="content">Concentration simulation of cjBlue</p>
 +
 +
    <p class="content-1">Chromoprotein</p>
 +
    <p class="content">According to our model of chromoprotein</p>
 +
 +
    <img src="https://static.igem.org/mediawiki/2017/6/6f/Resulttcfsh2.png" class="bigphoto" width="50%">
 +
    <img src="https://static.igem.org/mediawiki/2017/c/c5/Resulttcfsh3.png" class="bigphoto" width="50%">
 +
 +
    <p class="title">Expression</p>
 +
    <p class="content-1">Temperature</p>
 +
    <p class="content">35ﾟC / 37ﾟC / 39ﾟC / 32ﾟC</p>
 +
 +
    <p class="content-1">Chromoprotein o.d. value</p>
 +
    <p class="content">(1)  RFP (E1010): 607nm<br>(2) BFP (k592009):588nm</br><br>(3) cjBlue (k592011):610nm</br></p>
 +
 +
    <p class="content-1">Culture Setting</p>
 +
    <p class="content">(1)  32ﾟC, 200rpm, culture12hr (15ml) *continue to log phase<br>(2) add (15ml) LB *re-culture</br><br>(3) TeﾟC, continue cultural</br><br>(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.</br></p>
 +
 +
 +
 +
 +
 +
    </div>
 +
</section>
 +
</h1>
 +
 +
 +
 +
<!--JS-->
 +
 +
<script>
 +
 +
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title' );
 +
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
 +
 +
var $nodes =  $( '.node' );
 +
 +
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
 +
 +
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
  $revealBar.height( totalWidth+25 );
 +
  }
 +
 +
})
 +
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)-70}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+500) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
 +
 +
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
 +
 +
 +
 +
$(document).ready(function(
 +
 +
){})
 +
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Revision as of 06:37, 1 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Experiment

Our product aims to reach a high quality of “long-term monitor”, which means considerably stable expression of color is needed. Thus, we choose chromoprotein as our reporter protein due to its steadily expression and low half-life degradation rate. (See more in here)

cj-Blue/p>

We add a LVA tag to cjBlue in order to accelerate its degrade speed. (See more in here)

Concentration simulation of cjBlue

Chromoprotein

According to our model of chromoprotein

Expression

Temperature

35ﾟC / 37ﾟC / 39ﾟC / 32ﾟC

Chromoprotein o.d. value

(1) RFP (E1010): 607nm
(2) BFP (k592009):588nm

(3) cjBlue (k592011):610nm

Culture Setting

(1) 32ﾟC, 200rpm, culture12hr (15ml) *continue to log phase
(2) add (15ml) LB *re-culture

(3) TeﾟC, continue cultural

(4) Take samples from the centrifuge tube per hour, and narrow the time range and improve the accuracy.