Difference between revisions of "Team:NCTU Formosa/test"

(Blanked the page)
 
(318 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
 
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
  
<link type='text/css' href="scroll.css" rel='stylesheet'>
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
 
 
 
 
<style>
 
.center_box{
 
height: 100px;
 
width: 120px;
 
}
 
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:auto; margin-top:-7px; margin-left:0px;}
 
 
 
 
 
* {
 
  font-family: 'Open Sans', sans-serif;
 
    font-weight: 300;
 
    font-style: normal;
 
}
 
body{
 
    margin:0;
 
    background-color:rgb(51,51,51);
 
}
 
/*大圖*/
 
.main-img{
 
    top: 0;
 
    bottom: 0;
 
    left: 0;
 
    right: 0;
 
    max-width: 100%;
 
    max-height: 100%;
 
    margin: auto;
 
    overflow: auto;
 
    z-index:999;
 
}
 
 
/*scroll navigaiton*/
 
nav {
 
  padding: 18px;
 
  position: fixed;
 
  height: 800px;
 
  left:1%;
 
  width: 250px;
 
  z-index: 9999;
 
  top:25%;
 
}
 
@media screen and (max-width: 768px){
 
    nav {
 
  padding: 18px;
 
  position: fixed;
 
  height: 800px;
 
  left:-30px;
 
  width: 250px;
 
  z-index: 9999;
 
  top:25%;
 
}
 
   
 
}
 
nav .wrapper {
 
  padding: 0;
 
  width:100%;
 
  height: 785px;
 
}
 
 
nav .nodes {
 
  position: relative;
 
  margin-top: 1px;
 
  margin-left: 1px;
 
 
}
 
 
.line {
 
  position: absolute;
 
  width:1px;
 
  height:705px;
 
  top: 13px;
 
}
 
.line .red {
 
  width:1px;    /*調line長度*/
 
  height:45%; /*line寬度*/
 
  position:relative;
 
 
}
 
 
.line .blue {
 
  width: 1px;  /*line寬度*/
 
  height: 20%;  /*調line長度*/
 
  position:relative;
 
  left:51px;
 
 
}
 
.line .red-container {
 
  position:relative;
 
  width: 4px;
 
}
 
.line .red {
 
  background-color: red;/*cover line color*/
 
  *zoom: 1;
 
  background-size: 100%;
 
}
 
.line .blue {
 
  background-color: white;/*line color*/
 
  *zoom: 1;
 
  background-size: 100%;
 
 
}
 
 
.node {
 
  margin-left: 40px;/*調node間距*/
 
  width: 20px;
 
  height: 20px;
 
  margin-top: 30px;
 
  position: relative;
 
}
 
.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;
 
 
}
 
.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: 2.15px;
 
}
 
 
.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);
 
}
 
 
/*topic*/
 
 
.topic{
 
    position:relative;
 
    margin-top:-18px;
 
    font-size:1em;
 
    width:200px;
 
    height:auto;
 
    left:210px;
 
    float:right;
 
    color:#F3F7F7;
 
}
 
.text_color{
 
    color:#F3F7F7;
 
   
 
}
 
/*content*/
 
.content_container{
 
    position:relative;
 
    margin-left:28%;
 
    width:60%;
 
    height:auto;
 
}
 
.title{
 
    font-size:1.8em;
 
    padding-top:10px;
 
    text-shadow:1px 1px 10px rgb(0, 206, 255);
 
    border-left:2px solid rgb(0, 206, 255);
 
    padding:10px;
 
    color:rgb(0, 206, 255);
 
}
 
.content{
 
    font-size:1.1em;
 
    text-align:justify;
 
    text-indent:2em;
 
    color:#F3F7F7;
 
    padding-left:30px;
 
}
 
/*second title*/
 
.content-1{
 
    font-size:1.5em;
 
    text-align:justify;
 
    color:#F3F7F7;
 
    font-weight: bold;
 
}
 
.appear{
 
    display:none;
 
   
 
}
 
.list{
 
    font-size:1.1em;
 
    text-align:justify;
 
    color:#F3F7F7;
 
}
 
.quote{
 
    font-size:1.3em;
 
    text-align:justify;
 
    color:#F3F7F7;
 
    text-indent:2em;
 
   
 
}
 
 
 
/*image*/
 
.web{
 
    position:fixed !important;
 
    width:30%;
 
    left:-6.5%;
 
    top:51%;
 
    display:block;
 
}
 
.right{
 
    position:fixed !important;
 
    width:30%;
 
    top:1%;
 
    left:85%;
 
}
 
/*.img-position{
 
    position:absolute;
 
    z-index:-1;
 
}*/
 
.box{
 
    width:100%;
 
    padding-top:10px;
 
    padding-bottom:10px;
 
}
 
.picture{
 
    position:relative;
 
    left:7vw;
 
    width:80%;
 
}
 
 
.picture-1{
 
    position:relative;
 
    left:15vw;
 
    width:50%;
 
}
 
 
</style>
 
</head>
 
<body>
 
<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">Collaborations</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">Experience assistance</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">Mentoring a new team</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">Connect with iGEMer</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>
 
        <img src="human.png" class="main-img" width="100%">
 
  </div>
 
  <div>
 
    <img src='web.png' class="web img-position" id="web">
 
  </div>
 
  <div>
 
    <img src="right.png" class="right img-position" id="right">
 
  </div>
 
<!--content-->
 
<section class="content_container">
 
  <div>
 
    <p class="title">Collaborations<p>
 
    <p class="content">Collaborations among iGEM teams are one of the essential parts in Human Practices, for we have become companions with other iGEMers because of the reciprocal interactions. This year, we have done some collaborations including experience assistance, mentoring a new team.</p>
 
    </div>
 
 
  <div>
 
    <p class="title">Experience assistance</p>
 
    <p class="content-1">Distribution kit</p>
 
    <p class="content-1">NTHU_Taiwan iGEM team</p>
 
    <p class="content">We provided NTHU_Taiwan iGEM team with BBa_B0012.<br>(NTHU linker)</p>
 
    <p class="content-1">Mingdao</p>
 
    <p class="content">We sent the biobricks BBa_K1694002, BBa_K1694010, BBa_K1694035, BBa_K1694044 and BBa_K1694045, which was registry by 2015 NCTU_Formosa, to help them express the outer membrane protein.
 
<br>(Mingdao linker)</p>
 
    <p class="content-1">NCKU_Tainan</p>
 
    <p class="content">This year, it is the first time for NCKU_Tainan to participate in Giant Jamboree. Therefore, we provided them with the Part BBa_K861171, BBa_I712667, BBa_I712015, BBa_R0010, BBa_R0040, BBa_C0040, BBa_C0051, BBa_C0061, BBa_C0062, BBa_R0065, BBa_K592009 and BBa_R0052 to them.
 
<br>(NCKU_Tainan linker)</p>
 
    <p class="content-1">Provided larvae by NYMU-Taipei</p>
 
    <p class="content">We are thankful to NYMU iGEM team for providing us the eggs of tobacco cutworms. For our insect test, we needed a great number of larvae to do the experiment. Additionally, they introduce the professor Hwang, who majors in agricultural science, and gave us advice in our insect test. We really appreciate the help of NTMU-Taipei.</p>
 
  </div>
 
 
  <div>
 
    <p class="title">Mentoring a new team</p>
 
    <img src="">
 
    <div class="box">
 
        <img  src="1.jpg" class="picture">
 
    </div>
 
   
 
    <p class="content-1">National Taichung First Senior High School</p>
 
    <li class="list">Learning about iGEM Competition</li>
 
    <li class="list">Concept of Synthetic Biology</li>
 
    <li class="list">Basic knowledge of Synthetic Biology</li>
 
    <li class="list">Basic Mathematical Modelling</li>
 
    <li class="list">Laboratory Practice</li>
 
    <li class="list">Project Brainstorming</li>
 
    <li class="list">Presentation Skill Guidance</li>
 
    <p class="content">This summer, fourteen high school students in science class from National Taichung First Senior High School came to National Chiao Tung University to learn about iGEM. In the two-weeks workshop, they have learned a lot of basic concepts of synthetic biology associated with laboratory practices. Furthermore, they were grouped into two teams and assigned to acquire ideas and knowledge from 2015 high school team’s wikis. It not only broadened their horizons but sorted out their thoughts through the presentation. </p> 
 
    <div class="box">
 
        <img  src="2.jpg" class="picture">
 
        <p style="text-align:center;color:#F3F7F7;">See Education for the workshop we are planning on.</p>
 
    </div>
 
   
 
    <p class="content">On the last day of the workshop, each group presented their own project, which contained brainstorming, principles, and experimental designs. Their projects were creative, and yet there is still room for the more rigorous thinking. Through a series of compact training, we believe that they will be a competent high school team in the future iGEM competition.</p>
 
    <p class="content-1">National Chung Cheng University</p>
 
    <li class="list">Experience sharing of founding an iGEM team</li>
 
    <li class="list">Teaching Demonstration</li>
 
    <li class="list">How do Write Biobrick Sequences</li>
 
    <li class="list">Details of Biobrick construction</li>
 
    <p class="content">This year, the student leader of National Chung Cheng University came to National Chiao Tung University to learn about the experience of establishing a new team. We exchanged the experience of team operation and academic advice. Besides, she also joined the two-week workshop with students from National Taichung First Senior High School. National Chung Cheng University will establish its first team next year. We are glad to have another companion in Taiwan.</p>
 
   
 
    <div>
 
        <img  src="3.jpg" class="picture">
 
    </div>
 
   
 
  </div>
 
 
  <div>
 
    <p class="title">Meetups</p>
 
    <p class="content-1">Central China Conference (July 7~July9)</p>
 
    <p class="content">Invited by HUST-China team, we participated in the Central China Conference in Wuhan. In the conference, we shared our project idea with other team members, including Jilin_China, Nanjing-China, WHU-iGEM, HZAU-China, ShanghaiTechChina_B and NUDT_CHINA iGEM team. Through the discussion, we came up with fresh new points and solutions for the projects. Obviously, all of us got great suggestions to improve projects further for the Giant Jamboree.</p>
 
    <p class="content-1">2016 NCTU Meetup(July 31)</p>
 
   
 
    <div>
 
        <img src="4.jpg" class="picture">
 
    </div>
 
   
 
    <p class="content">This summer, we invited three iGEM teams in Taiwan. They were Mingdao, NTHU_Taiwan, and CGU_Taiwan. As a warm-up for Asia-Pacific Conference, the meetup set up as a stage for each team to present their progress of the project in this summer and exchange ideas and experiences.</p>
 
   
 
    <div>
 
        <img src="5.jpg" class="picture">
 
    </div>
 
   
 
    <p class="content">Additionally, we arranged some other activities, including campus guide and playing the simulative board game. Also, NTHU_Taiwan guided all of us to enjoy the beauty of National Tsing Hua University as well for the two schools are adjacent.All of us have established friendships among teams, and we all had an exciting and fruitful day in NCTU.</p> 
 
    <p class="content-1">Conversation with iGEM Aachen(August 3)</p>
 
    <p class="content">NCTU_Formosa and iGEM Aachen had a Skype video chat. In the online chat, we grasped the project bilaterally and exchanged opinions. Apart from exchanging academic opinion, we had a great conversation in the history of the team, habits and also the simulative board game we designed “Pest Crisis’’. In the conversation, we gained better understandings of each other in science and culture.</p>
 
    <p class="content-1">2016 NYMU Meetup(August 6)</p>
 
    <p class="content">We went to National Yang Ming University to attend the meetup with six other schools including NYMU, NCTU, NTHU, CGU, Tongji University, CCU, and TAS. In the meeting, we grasped the projects of every university. Most of the projects were about Environment & Health and Medicine. Every project is creative and has their merits, and all the pros and cons make us go forward.</p>
 
   
 
    <div>
 
    <img src="6.jpg" class="picture">
 
    </div>
 
   
 
    <p class="content-1">2016 iGEM Asia-Pacific Conference(August 8~August 14)</p>
 
    <p class="content">iGEM teams from all over Asia (including China, Hong Kong, and Taiwan) gathered to participate in the conference held by NCKU_Tainan. Five days of the exhausting yet exciting journey then began. Every morning, selected teams are scheduled to present their project. Later in the afternoon, well-designed activities such as round table, and experience workshop were held. Experience workshop offers iGEMers from different teams to share mutual experiences and pass on good ideas. Furthermore, NCKU invited many experts in the biological industry to discuss with us, letting us understand more about the current development in biotech industry. During the poster time, we exchange ideas and seek to improve projects through discussion.</p>
 
   
 
   
 
    <div>
 
        <img src="7.jpg" class="picture">
 
    </div>
 
   
 
    <p class="content-1">University of Auckland iGEM Team(July 11)</p>
 
    <p class="content">The University of Auckland iGEM Team’s student leader, Jessia Chiang, came to visit us in our school. We exchanged some experience with our project. We are surprised that the two teams both dedicate to tackle the long-lasting problem in the environment and improve the human health quality for future generation.</p>
 
   
 
    <div>
 
    <img  src="8.jpg" class="picture-1">
 
    </div>
 
    <p class="content-1">South University of Science and Technology of China</p>
 
    <p class="content">Team members from SUSTC visited us for a two-day trip. The first day, we took them to the famous scenery in Hsinchu and ate some local food. The next day, we introduced National Chiao Tung University campus, meeting room, photo wall and a small greenhouse. Simultaneously, we shared our exciting board game "Gene Armageddon _ Pest Crisis". In these two days, we exchange different customs and cultural from our hometown. Thanks very much for SUSTC that they gave us the opportunity to make friend with a different country.</p>
 
    <div>
 
        <img  src="9.jpg" class="picture-1">
 
    </div>
 
</section>
 
  </div>
 
 
<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:not(".main")' );
 
 
// 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]-60) {
 
      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+10 );
 
  }
 
 
})
 
 
// Clicking the nodes... again, nothing special ;)
 
$nodes.each( function( index ) {
 
  var $node = $( this );
 
  $node.click( function() {
 
    $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-60}, 1000 );
 
  });
 
})
 
//scroll_relocate
 
function sticky_relocate() {
 
    var window_top = $(window).scrollTop();
 
    var div_top = window.innerHeight-100;
 
    if (window_top > div_top) {
 
        $('#scroll').removeClass('appear');
 
    } else {
 
        $('#scroll').addClass('appear');
 
    };
 
    if(window_top > div_top) {
 
        $('#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>
 

Latest revision as of 12:37, 12 October 2016