Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
+ | <head> | ||
+ | <html> | ||
+ | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
Line 5: | Line 9: | ||
− | <title> | + | <title>Team:BGIC-Union/Practices-Design</title> |
<head> | <head> | ||
− | |||
− | |||
<!-- Bootstrap core CSS --> | <!-- Bootstrap core CSS --> | ||
Line 19: | Line 21: | ||
<link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet"> | ||
<link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet"> | <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet"> | ||
− | + | <!-- light --> | |
+ | <style type="text/css"> | ||
+ | /* fixed line holder */ | ||
+ | .timelineLight .timeline_line {c | ||
+ | margin-top:50px; | ||
+ | margin-bottom:10px; | ||
+ | width:900px; | ||
+ | } | ||
+ | .timelineLight | ||
+ | {color: #fff; | ||
+ | background: #ffe4e1;} | ||
+ | /* full (including months that are not shown) line holder */ | ||
+ | .timelineLight .t_line_holder { | ||
+ | height:80px; | ||
+ | background:url('https://static.igem.org/mediawiki/2017/3/35/Line.jpg') repeat-x 0px 39px; | ||
+ | } | ||
+ | |||
+ | /* 2 months are stored in one view */ | ||
+ | .timelineLight .t_line_view { | ||
+ | height:20px; | ||
+ | width:900px; | ||
+ | } | ||
+ | |||
+ | /* holder for year number */ | ||
+ | .timelineLight h3.t_line_year { | ||
+ | margin:0; | ||
+ | color:#545454; | ||
+ | } | ||
+ | |||
+ | /* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */ | ||
+ | .timelineLight .t_line_m { | ||
+ | margin-top:35px; | ||
+ | height:10px; | ||
+ | border-left:1px solid #545454; | ||
+ | border-right:1px solid #545454; | ||
+ | width:448px; | ||
+ | } | ||
+ | |||
+ | /* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */ | ||
+ | .timelineLight .t_line_m.right { | ||
+ | left:449px; | ||
+ | width:449px; | ||
+ | } | ||
+ | |||
+ | /* month caption */ | ||
+ | .timelineLight h4.t_line_month { | ||
+ | margin:-30px 0 0; | ||
+ | color:#545454; | ||
+ | } | ||
+ | |||
+ | /* used in responsive layout when only one month is shown (it is span containing year) */ | ||
+ | .t_line_month_year { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | /* node on the timeline */ | ||
+ | .timelineLight a.t_line_node { | ||
+ | text-decoration:none; | ||
+ | padding:38px 0 4px; | ||
+ | height:10px; | ||
+ | font-size:12px; | ||
+ | top:-25px; | ||
+ | background:url('https://static.igem.org/mediawiki/2017/2/2a/Dot.png') no-repeat center 24px; | ||
+ | color:#141817; | ||
+ | } | ||
+ | .timelineLight a.t_line_node:hover { | ||
+ | background:url('https://static.igem.org/mediawiki/2017/6/65/Dot-rollover.png') no-repeat center 24px; | ||
+ | } | ||
+ | .timelineLight a.t_line_node.active { | ||
+ | background:url('https://static.igem.org/mediawiki/2017/d/d7/Dot-selected.png') no-repeat center 24px; | ||
+ | } | ||
+ | |||
+ | /* node description */ | ||
+ | .timelineLight .t_node_desc { | ||
+ | background: rgba(26,134,172,0.9); | ||
+ | top:0; | ||
+ | color:#fff; | ||
+ | padding:1px 5px; | ||
+ | } | ||
+ | |||
+ | /* descriptions on right side go from right to left */ | ||
+ | .timelineLight .t_node_desc.pos_right { | ||
+ | right:0; | ||
+ | } | ||
+ | |||
+ | /* line arrow left */ | ||
+ | .timelineLight #t_line_left { | ||
+ | cursor:pointer; | ||
+ | left:-30px; | ||
+ | top:30px; | ||
+ | width:14px; | ||
+ | height:19px; | ||
+ | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left top; | ||
+ | } | ||
+ | |||
+ | .timelineLight #t_line_left:hover { | ||
+ | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left bottom; | ||
+ | } | ||
+ | |||
+ | /* line arrow right */ | ||
+ | .timelineLight #t_line_right { | ||
+ | cursor:pointer; | ||
+ | right:-30px; | ||
+ | top:30px; | ||
+ | width:14px; | ||
+ | height:19px; | ||
+ | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right top; | ||
+ | } | ||
+ | |||
+ | .timelineLight #t_line_right:hover { | ||
+ | background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right bottom; | ||
+ | } | ||
+ | .timelineLight { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | /* items container */ | ||
+ | .timelineLight .timeline_items { | ||
+ | padding:10px 0; | ||
+ | } | ||
+ | |||
+ | /* single item (margines set from javascript) */ | ||
+ | .timelineLight .item { | ||
+ | height:380px; | ||
+ | text-align:center; | ||
+ | |||
+ | color: #fff; | ||
+ | background: #f7dae7; | ||
+ | |||
+ | -moz-box-shadow: -3px 1px 6px rgba(0,0,0,0.4); | ||
+ | -webkit-box-shadow: -3px 1px 6px rgba(0,0,0,0.4); | ||
+ | box-shadow: -3px 1px 6px rgba(0,0,0,0.4); | ||
+ | width:200px; | ||
+ | } | ||
+ | |||
+ | /* ----- content - non-plugin elements ----- */ | ||
+ | .timelineLight .item img { | ||
+ | margin-top:0; | ||
+ | width:200px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .item span{ | ||
+ | display:block; | ||
+ | margin:0px 20px 10px; | ||
+ | height:150px; | ||
+ | } | ||
+ | .timelineLight .item .read_more { | ||
+ | padding:2px 8px 2px 10px; | ||
+ | font-family:Comic Sans MS; | ||
+ | font-size:20px; | ||
+ | float:right; | ||
+ | color:#ffffff; | ||
+ | background: rgba(0,0,0,0.35); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .timelineLight .item .read_more:hover { | ||
+ | background:rgb(26,134,172); | ||
+ | } | ||
+ | /* ----------------------------------------- */ | ||
+ | |||
+ | /* item details (margines set from javascript) */ | ||
+ | .timelineLight .item_open { | ||
+ | height:380px; | ||
+ | background:url('../images/timeline/light/background.jpg') repeat; | ||
+ | position:relative; | ||
+ | color:#545454; | ||
+ | z-index:2; | ||
+ | -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4); | ||
+ | -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.4); | ||
+ | box-shadow: 0px 0px 6px rgba(0,0,0,0.4); | ||
+ | width:490px; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* item details content wrapper (used for animation - shuld have same width as .item_open) */ | ||
+ | .timelineLight .item_open_cwrapper { | ||
+ | width:490px; | ||
+ | } | ||
+ | |||
+ | /* ----- content - non-plugin elements ----- */ | ||
+ | .timelineLight .timeline_open_content { | ||
+ | padding:20px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .item_open h2 { | ||
+ | margin-top:10px; | ||
+ | padding-top:0; | ||
+ | font-size:28px; | ||
+ | } | ||
+ | .timelineLight .item_open .t_close { | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | right:10px; | ||
+ | padding:2px 8px 2px 10px; | ||
+ | font-family: Comic Sans MS; | ||
+ | font-size:20px; | ||
+ | color:#ffffff; | ||
+ | background: rgba(0,0,0,0.25); | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .timelineLight .item_open .t_close:hover { | ||
+ | background:rgb(26,134,172); | ||
+ | } | ||
+ | /* ----------------------------------------- */ | ||
+ | |||
+ | /* left/right controles */ | ||
+ | .timelineLight .t_controles { | ||
+ | margin:10px auto; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .timelineLight .t_left, | ||
+ | .timelineLight .t_right { | ||
+ | display:inline-block; | ||
+ | height:50px; | ||
+ | width:29px; | ||
+ | margin:10px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .timelineLight .t_left, | ||
+ | .timelineLight .t_left:hover:active { | ||
+ | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left top; | ||
+ | } | ||
+ | .timelineLight .t_left:hover { | ||
+ | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left bottom; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_right, | ||
+ | .timelineLight .t_right:hover:active{ | ||
+ | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right top; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_right:hover { | ||
+ | background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right bottom; | ||
+ | } | ||
+ | |||
+ | /* -----------------------------------------------------------------------*/ | ||
+ | /* ------------------------------ RESPONSIVE -----------------------------*/ | ||
+ | /* -----------------------------------------------------------------------*/ | ||
+ | |||
+ | |||
+ | |||
+ | /* --- 768px --- */ | ||
+ | @media screen and (max-width:980px) { | ||
+ | |||
+ | .timelineLight .timeline_line { | ||
+ | width:680px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_view { | ||
+ | width:680px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_m { | ||
+ | width: 338px; | ||
+ | } | ||
+ | .timelineLight .t_line_m.right { | ||
+ | left: 339px; | ||
+ | width: 339px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /* --- 610px --- */ | ||
+ | @media screen and (max-width:767px) { | ||
+ | |||
+ | .timelineLight .timeline_line { | ||
+ | width:530px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_view { | ||
+ | width:1060px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_m { | ||
+ | width: 528px; | ||
+ | } | ||
+ | .timelineLight .t_line_m.right { | ||
+ | left: 530px; | ||
+ | width: 528px; | ||
+ | } | ||
+ | .timelineLight .t_line_year { | ||
+ | opacity:0; | ||
+ | filter:alpha(opacity=0) | ||
+ | } | ||
+ | .timelineLight .t_line_month_year { | ||
+ | display:inline; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_node span { | ||
+ | |||
+ | } | ||
+ | .timelineLight .t_node_desc { | ||
+ | font-size:8px; | ||
+ | } | ||
+ | .timelineLight .t_node_desc.pos_right { | ||
+ | right:auto; | ||
+ | left:0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /* --- 300px --- */ | ||
+ | @media screen and (max-width: | ||
+ | |||
+ | ) { | ||
+ | .timelineLight .timeline_line { | ||
+ | width:240px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_view { | ||
+ | width:480px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .t_line_m { | ||
+ | width: 238px; | ||
+ | } | ||
+ | .timelineLight .t_line_m.right { | ||
+ | left: 240px; | ||
+ | width: 238px; | ||
+ | } | ||
+ | |||
+ | .timelineLight .item_open { | ||
+ | width:280px; | ||
+ | height:390px; | ||
+ | } | ||
+ | .timelineLight .item_open_cwrapper { | ||
+ | width:280px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
<!-- main --> | <!-- main --> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | ||
#top_title,#sideMenu { display: none !important; } | #top_title,#sideMenu { display: none !important; } | ||
#content { | #content { | ||
Line 33: | Line 368: | ||
} | } | ||
− | + | #bodyContent | |
+ | { | ||
+ | margin-top:0px !important; | ||
+ | } | ||
Line 41: | Line 379: | ||
− | + | .mainstyle | |
+ | { | ||
+ | font-family: Comic Sans MS; | ||
+ | } | ||
html, body { | html, body { | ||
− | margin: 0 | + | margin: 0 ; |
− | padding: 0 | + | padding: 0 ; |
} | } | ||
body { | body { | ||
− | background-color: # | + | background-color: #ffa07a; |
− | + | ||
font-weight: 400; | font-weight: 400; | ||
font-size: 14px; | font-size: 14px; | ||
Line 59: | Line 400: | ||
/* Titles */ | /* Titles */ | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
− | font-family: | + | font-family: Comic Sans MS; |
font-weight: 700; | font-weight: 700; | ||
color: #333; | color: #333; | ||
Line 72: | Line 413: | ||
− | + | ||
p { | p { | ||
line-height: 28px; | line-height: 28px; | ||
margin-bottom: 25px; | margin-bottom: 25px; | ||
font-size: 16px; | font-size: 16px; | ||
+ | font-family: Comic Sans MS; | ||
} | } | ||
Line 134: | Line 476: | ||
.navbar-inverse { | .navbar-inverse { | ||
− | padding-bottom: | + | padding-bottom: 30px; |
− | padding-top: | + | padding-top: 0; |
} | } | ||
Line 145: | Line 487: | ||
.navbar-inverse .navbar-nav > li > a { | .navbar-inverse .navbar-nav > li > a { | ||
color: white; | color: white; | ||
+ | |||
} | } | ||
+ | |||
.navbar-inverse .navbar-nav > li > a:hover { | .navbar-inverse .navbar-nav > li > a:hover { | ||
Line 153: | Line 497: | ||
.navbar-brand { | .navbar-brand { | ||
font-weight: 700; | font-weight: 700; | ||
− | font-size: | + | font-size: 40px; |
letter-spacing: 2px; | letter-spacing: 2px; | ||
+ | backgroud: white; | ||
} | } | ||
.navbar-inverse .navbar-brand { | .navbar-inverse .navbar-brand { | ||
color: white; | color: white; | ||
+ | background-color: #FFA07A; | ||
+ | |||
} | } | ||
.navbar-inverse .navbar-toggle { | .navbar-inverse .navbar-toggle { | ||
border-color: transparent; | border-color: transparent; | ||
+ | font-size: 12px; | ||
} | } | ||
Line 200: | Line 548: | ||
#footer p { | #footer p { | ||
color: white; | color: white; | ||
+ | font-family: Comic Sans MS; | ||
} | } | ||
Line 286: | Line 635: | ||
</style> | </style> | ||
+ | <!-- script --> | ||
+ | <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | /* | ||
+ | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
+ | * | ||
+ | * Uses the built in easing capabilities added In jQuery 1.1 | ||
+ | * to offer multiple easing options | ||
+ | * | ||
+ | * TERMS OF USE - jQuery Easing | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright © 2008 George McGinley Smith | ||
+ | * All rights reserved. | ||
+ | * | ||
+ | * Redistribution and use in source and binary forms, with or without modification, | ||
+ | * are permitted provided that the following conditions are met: | ||
+ | * | ||
+ | * Redistributions of source code must retain the above copyright notice, this list of | ||
+ | * conditions and the following disclaimer. | ||
+ | * Redistributions in binary form must reproduce the above copyright notice, this list | ||
+ | * of conditions and the following disclaimer in the documentation and/or other materials | ||
+ | * provided with the distribution. | ||
+ | * | ||
+ | * Neither the name of the author nor the names of contributors may be used to endorse | ||
+ | * or promote products derived from this software without specific prior written permission. | ||
+ | * | ||
+ | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
+ | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
+ | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
+ | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
+ | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
+ | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
+ | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
+ | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
+ | * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
+ | * | ||
+ | */ | ||
+ | |||
+ | // t: current time, b: begInnIng value, c: change In value, d: duration | ||
+ | jQuery.easing['jswing'] = jQuery.easing['swing']; | ||
+ | |||
+ | jQuery.extend( jQuery.easing, | ||
+ | { | ||
+ | def: 'easeOutQuad', | ||
+ | swing: function (x, t, b, c, d) { | ||
+ | //alert(jQuery.easing.default); | ||
+ | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); | ||
+ | }, | ||
+ | easeInQuad: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t + b; | ||
+ | }, | ||
+ | easeOutQuad: function (x, t, b, c, d) { | ||
+ | return -c *(t/=d)*(t-2) + b; | ||
+ | }, | ||
+ | easeInOutQuad: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t + b; | ||
+ | return -c/2 * ((--t)*(t-2) - 1) + b; | ||
+ | }, | ||
+ | easeInCubic: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t + b; | ||
+ | }, | ||
+ | easeOutCubic: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutCubic: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInQuart: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuart: function (x, t, b, c, d) { | ||
+ | return -c * ((t=t/d-1)*t*t*t - 1) + b; | ||
+ | }, | ||
+ | easeInOutQuart: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; | ||
+ | return -c/2 * ((t-=2)*t*t*t - 2) + b; | ||
+ | }, | ||
+ | easeInQuint: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuint: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutQuint: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInSine: function (x, t, b, c, d) { | ||
+ | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; | ||
+ | }, | ||
+ | easeOutSine: function (x, t, b, c, d) { | ||
+ | return c * Math.sin(t/d * (Math.PI/2)) + b; | ||
+ | }, | ||
+ | easeInOutSine: function (x, t, b, c, d) { | ||
+ | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; | ||
+ | }, | ||
+ | easeInExpo: function (x, t, b, c, d) { | ||
+ | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; | ||
+ | }, | ||
+ | easeOutExpo: function (x, t, b, c, d) { | ||
+ | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; | ||
+ | }, | ||
+ | easeInOutExpo: function (x, t, b, c, d) { | ||
+ | if (t==0) return b; | ||
+ | if (t==d) return b+c; | ||
+ | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; | ||
+ | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; | ||
+ | }, | ||
+ | easeInCirc: function (x, t, b, c, d) { | ||
+ | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; | ||
+ | }, | ||
+ | easeOutCirc: function (x, t, b, c, d) { | ||
+ | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; | ||
+ | }, | ||
+ | easeInOutCirc: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; | ||
+ | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; | ||
+ | }, | ||
+ | easeInElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | }, | ||
+ | easeOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
+ | }, | ||
+ | easeInOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; | ||
+ | }, | ||
+ | easeInBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*(t/=d)*t*((s+1)*t - s) + b; | ||
+ | }, | ||
+ | easeOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | ||
+ | }, | ||
+ | easeInOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | ||
+ | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | ||
+ | }, | ||
+ | easeInBounce: function (x, t, b, c, d) { | ||
+ | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; | ||
+ | }, | ||
+ | easeOutBounce: function (x, t, b, c, d) { | ||
+ | if ((t/=d) < (1/2.75)) { | ||
+ | return c*(7.5625*t*t) + b; | ||
+ | } else if (t < (2/2.75)) { | ||
+ | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; | ||
+ | } else if (t < (2.5/2.75)) { | ||
+ | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; | ||
+ | } else { | ||
+ | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ||
+ | } | ||
+ | }, | ||
+ | easeInOutBounce: function (x, t, b, c, d) { | ||
+ | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; | ||
+ | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | /* | ||
+ | * | ||
+ | * TERMS OF USE - EASING EQUATIONS | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright © 2001 Robert Penner | ||
+ | * All rights reserved. | ||
+ | * | ||
+ | * Redistribution and use in source and binary forms, with or without modification, | ||
+ | * are permitted provided that the following conditions are met: | ||
+ | * | ||
+ | * Redistributions of source code must retain the above copyright notice, this list of | ||
+ | * conditions and the following disclaimer. | ||
+ | * Redistributions in binary form must reproduce the above copyright notice, this list | ||
+ | * of conditions and the following disclaimer in the documentation and/or other materials | ||
+ | * provided with the distribution. | ||
+ | * | ||
+ | * Neither the name of the author nor the names of contributors may be used to endorse | ||
+ | * or promote products derived from this software without specific prior written permission. | ||
+ | * | ||
+ | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
+ | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
+ | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
+ | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
+ | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
+ | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
+ | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
+ | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
+ | * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
+ | * | ||
+ | */ | ||
+ | </script> | ||
<script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&ctype=text/javascript"></script> | <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&ctype=text/javascript"></script> | ||
+ | <!-- SLIDER_TIMELINE --> | ||
+ | <script type="text/javascript" src="https://2017.igem.org/Template:BGIC-Union/timeline-js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(window).load(function() { | ||
+ | // dark | ||
+ | $('.timelineLight').timeline({ | ||
+ | openTriggerClass : '.read_more', | ||
+ | startItem : '15/08/2012' | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
<!-- hover --> | <!-- hover --> | ||
<script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&ctype=text/javascript"></script> | <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&ctype=text/javascript"></script> | <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&ctype=text/javascript"></script> | ||
</head> | </head> | ||
+ | |||
+ | |||
<body> | <body> | ||
<div class="column_full_size top1"> | <div class="column_full_size top1"> | ||
Line 311: | Line 882: | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li> | ||
− | + | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li> | ||
</ul> | </ul> | ||
Line 323: | Line 894: | ||
<ul class="dropdown-menu" > | <ul class="dropdown-menu" > | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li> | ||
− | <li><a href="https://2017.igem.org/Team:BGIC-Union/ | + | <li><a href="https://2017.igem.org/Team:BGIC-Union/Design">design</a></li> |
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li> | ||
− | + | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li> | ||
Line 334: | Line 905: | ||
<li class="dropdown "> <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a> | <li class="dropdown "> <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a> | ||
<ul class="dropdown-menu" role="menu"> | <ul class="dropdown-menu" role="menu"> | ||
− | <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments"> | + | <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">protocols</a></li> |
<li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul> | <li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul> | ||
Line 346: | Line 917: | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li> | ||
− | + | ||
</ul> | </ul> | ||
Line 354: | Line 925: | ||
<li class="dropdown "> <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a> | <li class="dropdown "> <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a> | ||
<ul class="dropdown-menu" role="menu"> | <ul class="dropdown-menu" role="menu"> | ||
− | + | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li> | ||
− | + | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li> | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li> | ||
Line 363: | Line 934: | ||
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li> | <li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li> | ||
</ul> | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown "> | ||
+ | <a href="https://2017.igem.org/Team:BGIC-Union/Model">Model </a> | ||
</li> | </li> | ||
<li class="dropdown "> | <li class="dropdown "> | ||
Line 374: | Line 948: | ||
</div> | </div> | ||
</nav> | </nav> | ||
+ | |||
+ | <!-- BEGIN TIMELINE --> | ||
+ | |||
+ | |||
+ | </div> <!-- /END TIMELINE --> | ||
+ | |||
+ | <!-- +++++ Projects Section +++++ --> | ||
+ | |||
<!-- +++++ Projects Section +++++ --> | <!-- +++++ Projects Section +++++ --> | ||
Line 429: | Line 1,011: | ||
</br></br><h3> 6 Safe shipment</h3></br> | </br></br><h3> 6 Safe shipment</h3></br> | ||
− | <div class=" | + | <div class=" row"> |
<img src="https://static.igem.org/mediawiki/2017/5/56/Safeshipmentbgic.jpg" height="600px"/> | <img src="https://static.igem.org/mediawiki/2017/5/56/Safeshipmentbgic.jpg" height="600px"/> | ||
</br></br><h3>7 References</h3> | </br></br><h3>7 References</h3> | ||
− | 1 WHO,<i> Laboratory Biosafety Manual – Third Edition</i>, </ | + | </br><a href="http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_CSR_LYO_2004_11/en/">1 WHO,<i> Laboratory Biosafety Manual – Third Edition</i>, </a> |
− | 2 WHO, <i>Biorisk Management: Laboratory Biosecurity Guidance</i>, September 2006 | + | <a href="http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_EPR_2006_6.pdf">2 WHO, <i>Biorisk Management: Laboratory Biosecurity Guidance</i>, September 2006</a> |
− | </ | + | <a href="http://www.doc88.com/p-9502338703955.html">3 <i>National Standard of The People’s Republic of China, Laboratories-General Requirements for Biosafety.</i> |
− | 3 <i>National Standard of The People’s Republic of China, Laboratories-General Requirements for Biosafety.</i> | + | </a> |
− | </ | + | |
</p> | </p> | ||
</div> | </div> | ||
Line 446: | Line 1,028: | ||
</body> | </body> | ||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 18:20, 1 November 2017
1 Introduction
We adhered to the requirements of “Safe project design, safe lab work and safe shipment” throughout the project and focused intensely on safe lab work. We submitted the safety form as required on time. We had a discussion with one of the member of the biosafety department at Shenzhen Beijing Genomics Institute to ensure the safety of our project design. In terms of lab safety, we collaborated with Shenzhen_SFLS to produce Biosafety level videos and created a video version of the “This is biosafety” from the IGEM safety hub. In addition, we also concluded all the lab practice mistakes we had made to give the next year’s IGEMers at BGI College a remainder.2 Safe lab work
This is biosafety!
BSL-1 lab is the lowest biosafety level, but that doesn’t mean we can be casual in our lab. The “This is biosafety” from safety hub pictures lab technicians who make themselves at home in their lab, and we shot this into a video and reversed all the mistakes in the picture by “freezing the time” and then fixing everything. Our muse comes from the manga Jojo’ s bizarre adventure.3 Biosafety
Biosafety and biosecurity are the top priorities to be considered in the IGEM competition. By definition, biosafety is “the containment principles, technologies and practices that are implemented to prevent unintentional exposure to pathogens and toxins, or their accidental release”1 We use DH5α and BL21 (DE3) E.coli strain, which are non-pathogenic to normal healthy individuals, for the cloning part of our project, and none of our parts are toxic or contain virulent factors. The single strand RNA used to guide dCas9 proteins are synthesized by ourselves from human cell line H2228; the split T7 polymerase switch and the T7 promoter come from the BL21(DE3) strain; Cas9 is originally a part of bacteria’s immune mechanism and is able to cleave invading DNA, but the split dCas9 does not possess the ability of cleaving DNA; the toxic level of the several signal outputs do not have any threats towards healthy human beings. And after all, the detection is in vitro. Here is the link to our safety forms:Safety spreadsheet-BGIC-Union We adhere to BSL-1 lab practices strictly, when handling bacterial samples. We did not test our design with blood samples containing ctDNA with our biosensor, so no threats come from this aspect.