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

(Prototype team page)
 
 
(16 intermediate revisions by the same user not shown)
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 judges-will-not-evaluate">
+
<style type="text/css">
−
<h3>★  ALERT! </h3>
+
#sideMenu, #top_title {display:none;}
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
body {background-color:white; }
−
</div>
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
<div class="clear"></div>
+
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
  
  
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
  
 +
}
  
−
<div class="column full_size">
 
−
<h1>Attributions</h1>
 
  
−
<p> Each team must clearly attribute work done by the student team members on this page. The team must distinguish work done by the students from work done by others, including the host labs, advisors, instructors, and individuals not on the team roster.
+
* {
−
<br><br>
+
  font-family: 'Open Sans', sans-serif;
−
This is a bronze medal requirement. Please see the <a href="https://2017.igem.org/Judging/Medals">Medals requirements page</a> for more details.</p>
+
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
  
−
</div>
+
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:auto ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    margin-top: 40px;
 +
    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:15%;
 +
  margin: auto;
 +
}
  
−
<div class="clear"></div>
+
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
  
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
  
−
<div class="column half_size">
+
}
−
<h5> Why is this page needed? </h5>
+
−
<p>The Attribution requirement helps the judges know what you did yourselves and what you had help with. We don't mind if you get help with difficult or complex techniques, but you must report what work your team did and what work was done by others.</p>
+
−
<p>
+
−
For example, you might choose to work with an animal model during your project. Working with animals requires getting a license and applying far in advance to conduct certain experiments in many countries. This is difficult to achieve during the course of a summer, but much easier if you can work with a postdoc or PI who has the right licenses.</p>
+
−
</div>
+
  
 +
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:220px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:60%; /*line寬度*/
 +
  position:relative;
  
−
<div class="column half_size">
+
}
−
<h5> What should this page have?</h5>
+
  
−
<ul>
+
.line .blue {
−
<li>General Support</li>
+
  width: 1px;  /*line寬度*/
−
<li>Project support and advice</li>
+
  height: 43%;  /*調line長度*/
−
<li>Fundraising help and advice</li>
+
  position:relative;
−
<li>Lab support</li>
+
  left:51px;
−
<li>Difficult technique support</li>
+
−
<li>Project advisor support</li>
+
−
<li>Wiki support</li>
+
−
<li>Presentation coaching</li>
+
−
<li>Human Practices support</li>
+
−
<li> Thanks and acknowledgements for all other people involved in helping make a successful iGEM team</li>
+
−
</ul>
+
−
</div>
+
  
 +
}
 +
.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%;
 +
 +
}
  
−
<div class="clear"></div>
+
.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: 18px;
 +
  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 class="column half_size">
+
}
 +
.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%;
  
−
<div class="highlight">
+
}
−
<h5> Can we base our project on a previous one? </h5>
+
.node .active-circle .cover {
−
<p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b> </p>
+
  transform: translateZ(0px);
−
</div>
+
  width: 16px;
−
</div>
+
  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);
 +
}
  
−
<div class="column half_size">
+
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
  
−
<h5>Inspiration</h5>
+
/*left-topic*/
−
<p>Take a look at what other teams have done:</p>
+
−
<ul>
+
−
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Team">2011 Imperial College London</a> (scroll to the bottom)</li>
+
−
<li><a href="https://2014.igem.org/Team:Exeter/Attributions">2014 Exeter </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Melbourne/Attributions">2014 Melbourne </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Valencia_Biocampus/Attributions">2014 Valencia Biocampus</a></li>
+
−
</ul>
+
  
−
</div>
+
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:230px;
 +
    height:auto;
 +
    left:240px;
 +
    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:#ff3399;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px;
 +
    font-weight:400 !important;
 +
}
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size">
+
.content-image{
 +
    text-align:center !important;
 +
    color:#F3F7F7 !important;
 +
    font-size:12pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
}
  
−
<h5>Team training and Project start</h5>
 
−
<p>Tell us if your institution teaches an iGEM or synthetic biology class and when you started your project:</p>
 
−
<ul>
 
−
<li>Does your institution teach an iGEM or synthetic biology course?</li>
 
−
<li>When did you start this course?</li>
 
−
<li>Are the syllabus and course materials freely available online?</li>
 
−
<li>When did you start your brainstorming?</li>
 
−
<li>When did you start in the lab?</li>
 
−
<li>When did you start working on  your project?</li>
 
  
−
</ul>
+
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    line-height:1.5;
 +
    padding-bottom:5px;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
  
−
</div>
 
  
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
  
  
  
−
</div>
+
 
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:10px;
 +
    padding-bottom:10px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:7vw;
 +
    width:80%;
 +
}
 +
 
 +
.picture-1{
 +
    position:relative;
 +
    left:15vw;
 +
    width:50%;
 +
}
 +
 
 +
 
 +
 
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
</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">PI</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">Professors</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">Others</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/c/cd/Attributiontcfsh.jpeg" width="100%">
 +
  </div>
 +
 
 +
<!--wiki content-->
 +
 
 +
<h1>
 +
<section class="content_container">
 +
 
 +
<!--PI-->
 +
<div >
 +
    <p class="title">PI</p>
 +
    <p class="content-1">Wei-Shin Chuang</p>
 +
    <p class="content">Provide us administrative help and deal with fundraising.</p>
 +
    <p class="content-1">Chun-Chi Huang</p>
 +
    <p class="content">Accompany us to the US to attend the Giant Jamboree.</p>
 +
    <p class="content-1">Hui-Chun Li</p>
 +
    <p class="content">Help us deal with our English problems, and edit our wiki.</p>
 +
    <p class="content-1">Yung-Jen Kung</p>
 +
    <p class="content">Provide us valuable suggestions with our experiments, biobrick concept, and take care of our difficulties.</p>
 +
 
 +
<!--professor-->
 +
    <p class="title">Professor</p>
 +
    <p class="content-1">Wen-Liang Chen</p>
 +
    <p class="content">Give us many ideas about the project, and help us with our collaboration.</p>
 +
    <p class="content-1">Lei Wan</p>
 +
    <p class="content">Help us with our experiments, lend us his laboratory.</p>
 +
    <p class="content-1">Cheng-Ming Chang</p>
 +
    <p class="content">Give us valuable information about temperature monitoring stickers that already exist and help us understand how low-temperature transport is carried out.</p>
 +
    <p class="content-1">Chien-Chih Yu</p>
 +
    <p class="content">Tell us how medicines are transported.</p>
 +
<!--others-->
 +
 
 +
    <p class="title">Others</p>
 +
    <p class="content-1">NCTU_Formosa</p>
 +
    <p class="content">Help us understand the iGEM competition, help with our experiments and teache us how to design a wiki page.</p>
 +
    <p class="content-1">VEDAN corporation</p>
 +
    <p class="content">Give us many data and directions for us to go, introduce food challenge test and UV light will cause the loss of nutrition of the refresh drinks.</p>
 +
    <p class="content-1">Mitsui O.S.K</p>
 +
    <p class="content">Give us some transporting information, and filled up the questionnaire for us.</p>
 +
    <p class="content-1">Polysciences INC</p>
 +
    <p class="content">Tell us how chemicals are delivered.</p>
 +
</section>
 +
  </div>
 +
</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: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]-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+10 );
 +
  }
 +
 
 +
})
 +
 
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-80}, 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+420) {
 +
        $('#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}}

Latest revision as of 03:58, 2 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

PI

Wei-Shin Chuang

Provide us administrative help and deal with fundraising.

Chun-Chi Huang

Accompany us to the US to attend the Giant Jamboree.

Hui-Chun Li

Help us deal with our English problems, and edit our wiki.

Yung-Jen Kung

Provide us valuable suggestions with our experiments, biobrick concept, and take care of our difficulties.

Professor

Wen-Liang Chen

Give us many ideas about the project, and help us with our collaboration.

Lei Wan

Help us with our experiments, lend us his laboratory.

Cheng-Ming Chang

Give us valuable information about temperature monitoring stickers that already exist and help us understand how low-temperature transport is carried out.

Chien-Chih Yu

Tell us how medicines are transported.

Others

NCTU_Formosa

Help us understand the iGEM competition, help with our experiments and teache us how to design a wiki page.

VEDAN corporation

Give us many data and directions for us to go, introduce food challenge test and UV light will cause the loss of nutrition of the refresh drinks.

Mitsui O.S.K

Give us some transporting information, and filled up the questionnaire for us.

Polysciences INC

Tell us how chemicals are delivered.