Difference between revisions of "Team:NEU China B/Design"

 
(24 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{NEU_China_B}}
 
{{NEU_China_B}}
 
<html>
 
<html>
 +
<div class="center-block" style="max-width:800px;">
  
<html>
+
<h1>
<script>
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
$(document).ready(function () {
+
 
+
$("#HQ_page").attr('id', '');
+
 
+
 
+
//highlight current page on the menu
+
highlight_current_page_menu();
+
 
+
//accessing submenus
+
$(".menu_item").click(function () {
+
$(".submenu_control_icon", this).toggleClass("open");
+
$(this).next(".submenu").fadeToggle(400);
+
});
+
 
+
//mobile menu access
+
$(".igem_2018_team_mobile_bar").click(function () {
+
$(this).next().toggleClass("displaying_menu");
+
});
+
 
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
 
+
var page_url = "https://2018.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='" + page_url + "']").children().addClass("current_page");
+
 
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if ($(".current_page").hasClass("submenu_item")) {
+
 
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
 
+
}
+
}
+
 
+
 
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
</script>
+
 
+
 
+
<style>
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* DEFAULT WIKI SETTINGS */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
#home_logo, #sideMenu { display:none; }
+
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
body {background-color:white; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
 
+
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* MENU */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*this wraps the whole of the menu*/
+
.igem_2018_team_menu {
+
background-color:#c4baba;
+
border-left: 1px solid #c4baba;
+
display:block;
+
float:right;
+
height:100vh;
+
max-width: 270px;
+
overflow-y: auto;
+
overflow-x: hidden;
+
padding:0px;
+
position:fixed;
+
right:0%;
+
text-align:left;
+
width: 15%;
+
}
+
 
+
 
+
.igem_2018_team_menu.displaying_menu{
+
display:block;
+
}
+
 
+
.igem_2018_team_menu  a {
+
color: #484848;
+
text-decoration:none;
+
}
+
 
+
.igem_2018_team_menu img {
+
width:100%;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item {
+
    background-color: #c4baba;
+
    border-bottom: 1px solid #928b8b;
+
    clear: both;
+
color: #484848;
+
    cursor: pointer;
+
float: left;
+
    font-size: 120%;
+
    font-weight: bold;
+
    padding: 15px 0px 15px 5%;
+
  width: 100%;
+
}
+
 
+
.igem_2018_team_menu .menu_item.direct_link {
+
color: #484848;
+
padding-left: 15%;
+
}
+
.igem_2018_team_menu .menu_item:hover {
+
background-color: #ecb656;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
color: #484848;
+
float: left;
+
width: 10%;
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
content: "+";
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
content: "-";
+
}
+
 
+
/*submenu wrapper*/
+
.igem_2018_team_menu .submenu{
+
background-color: #e4dede;
+
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
 
+
/*styling for a submenu item*/
+
.igem_2018_team_menu .submenu .submenu_item {
+
border-bottom: 1px solid #c4baba;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
 
+
.igem_2018_team_menu .submenu .submenu_item:hover {
+
background-color: #f3bd5d;
+
}
+
 
+
 
+
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.igem_2018_team_menu .menu_item.current_page,
+
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
background-color:#7acbd8;
+
}
+
 
+
 
+
 
+
/*mobile menu bar styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
.igem_2018_team_mobile_bar {
+
background-color:#e4dede;
+
border-bottom: 1px solid #c4baba;
+
cursor:pointer;
+
display:none;
+
float:left;
+
margin-top: 0;
+
padding: 5px 0;
+
position:fixed;
+
width:100%;
+
}
+
 
+
.igem_logo_mobile img {
+
width:70px;
+
}
+
 
+
.igem_logo_mobile {
+
float:left;
+
padding-left: 5%;
+
width: 30%;
+
}
+
 
+
.igem_menu_control_mobile img {
+
width:25px;
+
}
+
 
+
.igem_menu_control_mobile {
+
float:right;
+
padding-right:5%;
+
padding-top:5px;
+
text-align:right;
+
width: 30%;
+
}
+
 
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* CONTENT OF THE PAGE */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/* general wrapper for the content */
+
.igem_2018_team_content {
+
background-color:white;
+
display:block;
+
width: 87%;
+
}
+
 
+
/* subwrapper to center content */
+
.igem_2018_team_content .igem_2018_team_column_wrapper {
+
margin:auto;
+
max-width: 1400px;
+
width:90%;
+
}
+
 
+
 
+
 
+
/*general styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
+
 
+
 
+
/* styling for the titles h1, h2*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
+
border-bottom:0px;
+
color: #635d5d;
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 10px 0px;
+
}
+
 
+
/* styling for the titles h3, h3, h5, h6 */
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 {
+
border-bottom:0px;
+
color: #928b8b; 
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 5px 0px;
+
}
+
 
+
/* text */
+
.igem_2018_team_content .igem_2018_team_column_wrapper p {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding: 5px 0px;
+
text-align: left;
+
color: #484848;
+
}
+
 
+
/* Links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a {
+
color: #5bc7d8;
+
font-weight: bold;
+
text-decoration: underline;
+
text-decoration-color:#5bc7d8;
+
transition: all 0.4s ease;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a:hover {
+
color: #f8b732;
+
text-decoration:none;
+
}
+
 
+
 
+
/* Table */
+
.igem_2018_team_content .igem_2018_team_column_wrapper table {
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 130%;
+
width: 100%;
+
}
+
 
+
/* table cells */
+
.igem_2018_team_content .igem_2018_team_column_wrapper td {
+
border: 1px solid #c4baba;
+
border-collapse: collapse;
+
font-size: 105%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
/* table headers */
+
.igem_2018_team_content .igem_2018_team_column_wrapper th {
+
background-color:#c4baba;
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 110%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
 
+
 
+
/* non numbered lists */
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding:0px 20px;
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
 
+
 
+
 
+
/*layout classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*main layout class */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {
+
float:left;
+
margin: 1% 2%;
+
padding: 0px;
+
}
+
 
+
/* 100% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
+
 
+
/* 66% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
 
+
/* 33% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
+
 
+
 
+
 
+
 
+
/*styling for all images*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
+
margin-bottom: 15px;
+
width: 100%;
+
}
+
 
+
 
+
/* page break */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
+
clear:both;
+
}
+
/*add extra space to page break with clear class*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
+
height: 30px;
+
}
+
 
+
/* horizontal line to divide the page*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
+
    border-top: 1px solid #c4baba;
+
  margin: auto;
+
  width: 98%;
+
}
+
 
+
 
+
 
+
+
/*support classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/*Button  */
+
/************************************************/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
+
font-size: 130%;
+
margin: 30px auto;
+
text-align: center;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a  {
+
background-color: #5bc7d8;
+
color: #635d5d !important;
+
font-weight: bold;
+
margin: auto;
+
text-decoration: none !important;
+
padding: 10px 15px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
+
background-color: #f8b732 !important; 
+
}
+
 
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight {
+
padding: 15px 20px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
+
padding: 5px 15px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
+
background-color: #e4dede;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
+
    border-top: 4px solid #5bc7d8;
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
+
    border: 4px solid #5bc7d8;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
+
    border-top: 4px solid #f8b732
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
+
    border: 4px solid #f8b732;
+
}
+
 
+
 
+
 
+
 
+
/*mobile*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/* 1800px  */
+
/************************************************/
+
@media only screen and (max-width: 1800px) {
+
.igem_2018_team_content { width: 85%;}
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
/* 1400px  */
+
/************************************************/
+
@media only screen and (max-width: 1400px) {
+
.igem_2018_team_menu .menu_item { font-size:100%;}
+
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
@media only screen and (max-width: 1001px) {
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
/* 1000px  */
+
/************************************************/
+
@media only screen and (max-width: 1000px) {
+
.igem_2018_team_content {width:100%; margin-left:0px;}
+
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
+
.igem_2018_team_mobile_bar {display:block;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
+
 
+
}
+
 
+
 
+
@media only screen and (max-width: 500px) {
+
.igem_2018_team_menu {min-width:100%; width:100%; }
+
}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
 
+
 
+
 
+
</style>
+
 
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- THIS IS WHERE THE HTML BEGINS --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
<head>
+
 
+
<meta charset="utf-8">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<title>Title Page</title>
+
<!-- Bootstrap CSS -->
+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
+
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
</head>
+
 
+
 
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Menu --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
<div class="igem_2018_team_mobile_bar">
+
 
+
<div class="igem_logo_mobile">
+
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
+
</div>
+
 
+
 
+
<div class="igem_menu_control_mobile">
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
+
</div>
+
 
+
</div>
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Content of the page  --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<style>
+
.bs-docs-nav {
+
    background-color: #38c5e5;
+
    border-color: #e7e7e7;
+
    }
+
    .nav .navbar-nav>li .dropdown-menu {margin:0;}
+
    .nav .navbar-nav>li:hover .dropdown-menu{display:block;}
+
    .navbar .nav > li .dropdown-menu {margin: 0;} 
+
    .navbar .nav > li:hover .dropdown-menu {
+
display: block;
+
background-color: #38c5e5;
+
}
+
    .rightbottom{position:fixed;bottom:50px;right:50px;}
+
.nav>li>a {
+
    position: relative;
+
    display: block;
+
    color:#ffffff;
+
}
+
</style>
+
<header class="navbar navbar-static-top bs-docs-nav" style="margin-top: 15px" id="top">
+
<div class="container">
+
<div class="navbar-header">
+
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar"
+
aria-expanded="false">
+
<span class="sr-only">Toggle navigation</span>
+
<span class="icon-bar"></span>
+
<span class="icon-bar"></span>
+
<span class="icon-bar"></span>
+
</button>
+
<a href="https://2018.igem.org/Team:NEU_China_B" class="navbar-brand">NEU_China_B</a>
+
</div>
+
<nav id="bs-navbar" class="collapse navbar-collapse">
+
<ul class="nav navbar-nav navbar-right">
+
<li class="dropdown">
+
<a href="#">Project<span class="caret"></span></a>
+
<ul class="dropdown-menu">
+
<li><a href="https://2018.igem.org/Team:NEU_China_B/background">Background</a></li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Description">
+
Description
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Design">
+
Applied Design
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Results">
+
Results
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Improve">
+
Improve
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Model">
+
Models
+
</a>
+
</li>
+
</ul>
+
</li>
+
<li class="dropdown">
+
<a href="#">Lab<span class="caret"></span></a>
+
<ul class="dropdown-menu">
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/InterLab">
+
InterLab
+
</a>
+
</li>
+
<li><a href="https://2018.igem.org/Team:NEU_China_B/protocols">Protocols</a></li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Notebook">
+
Notebook
+
</a>
+
</li>
+
<li><a href="https://2018.igem.org/Team:NEU_China_B/Safety">Safety</a></li>
+
 
+
</ul>
+
</li>
+
<li class="dropdown">
+
<a href="#">Parts<span class="caret"></span></a>
+
<ul class="dropdown-menu">
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Basic_Part">
+
Basic Parts
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Composite_Part">
+
Composite Parts
+
</a>
+
</li>
+
</ul>
+
</li>
+
<li class="dropdown">
+
<a href="#">Human practice<span class="caret"></span></a>
+
<ul class="dropdown-menu">
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Human_Practices">
+
Human Practices
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Collaborations">
+
Collaborations
+
</a>
+
</li>
+
</ul>
+
</li>
+
<li class="dropdown">
+
<a href="#">Team<span class="caret"></span></a>
+
<ul class="dropdown-menu">
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Team">
+
Team Members
+
</a>
+
</li>
+
<li>
+
<a href="https://2018.igem.org/Team:NEU_China_B/Attributions">
+
Attributions
+
</a>
+
</li>
+
</ul>
+
</li>
+
</ul>
+
<ul class="nav navbar-nav navbar-right">
+
</ul>
+
</nav>
+
</div>
+
</header>
+
 
+
<div class="rightbottom">
+
<a class="btn btn-default" href="#top" role="button">got to top</a>
+
</div>
+
<div class="container" style="margin-top: 20px">
+
 
+
<canvas id="base_page" width="800" height="400" style="border:1px solid #c3c3c3;">
+
您的浏览器不支持 HTML5 canvas 标签。
+
</canvas>
+
<script>
+
var width = 800;
+
var height = 400;
+
 
+
var c = document.getElementById("base_page");
+
var ctx = c.getContext("2d");
+
var img = new Image();
+
img.src = "http://placehold.it/1080x320/c4baba/e4dede";
+
that = ctx;
+
var i = 0;
+
var pi = Math.PI;
+
var basex = 400;
+
var basey = 200;
+
var imgx;
+
var imgy;
+
 
+
img.onload = function () {
+
var timer = setInterval(function () {
+
// ctx.clearRect(0, 0, width, height);
+
i += 0.0001;
+
imgx = 400 * Math.cos(i * 180 * 2) + basex;
+
imgy = 200 * Math.sin(i * 180 * 4) + basey;
+
ctx.drawImage(img, imgx, imgy, 5, 5);
+
// if (y > 400) {
+
// clearInterval(timer);
+
// }
+
}, 1);
+
}
+
 
+
</script>
+
<h1>
+
 
Applied Design
 
Applied Design
 
</h1>
 
</h1>
Line 721: Line 9:
 
Inspiration
 
Inspiration
 
</h2>
 
</h2>
<p>
+
<div class="p">
Our inspiration came from the industrial fermentation. Among of fermentation bacteria Lactobacillus is the most
+
Our inspiration came from the industrial fermentation. Among of fermentation bacteria <i>Lactobacillus</i> is the most
 
well-known, which is mainly used in manufacturing yogurt and its derivatives. In modern life, yogurt has been
 
well-known, which is mainly used in manufacturing yogurt and its derivatives. In modern life, yogurt has been
 
considered as the indispensable food for your daily life.
 
considered as the indispensable food for your daily life.
Line 739: Line 27:
 
corrode human skin and epithelium. So we came up with the idea of making a real-time biophysical receptor to
 
corrode human skin and epithelium. So we came up with the idea of making a real-time biophysical receptor to
 
measure in real time whether the culture fluid in the fermenter need to be refilled.
 
measure in real time whether the culture fluid in the fermenter need to be refilled.
</p>
+
<div>
 
<h2>
 
<h2>
 
Current Methods
 
Current Methods
 
</h2>
 
</h2>
<p>
+
<div class="p">
 
<h3>
 
<h3>
1. pH value
+
1. pH value
 
</h3>
 
</h3>
 
Currently, the industrial companies commonly use the pH meter and pH paper to detect the concentration of lactate
 
Currently, the industrial companies commonly use the pH meter and pH paper to detect the concentration of lactate
Line 758: Line 46:
 
into pyruvate. In the similar situation, L-Lactate could be oxidized in the presence of L-Lactate Dehydrogenase
 
into pyruvate. In the similar situation, L-Lactate could be oxidized in the presence of L-Lactate Dehydrogenase
 
(L-LDH).
 
(L-LDH).
<img src="https://static.igem.org/mediawiki/2018/7/78/T--NEU_China_B--design_0.png">
+
<div>
 +
<img src="https://static.igem.org/mediawiki/2018/7/78/T--NEU_China_B--design_0.png">
 +
</div>
 
<br>
 
<br>
 
The reaction equilibrium depends on the amount of lactate. In the presence of L-glutamic acid (L-glutamate) in the
 
The reaction equilibrium depends on the amount of lactate. In the presence of L-glutamic acid (L-glutamate) in the
 
following reactions, the formation of pyruvate (pyruvate) and NADH are catalyzed by Glutamate Pyruvate Transaminase
 
following reactions, the formation of pyruvate (pyruvate) and NADH are catalyzed by Glutamate Pyruvate Transaminase
 
(GPT).
 
(GPT).
<img src="https://static.igem.org/mediawiki/2018/0/0b/T--NEU_China_B--design_1.png">
+
<div>
 +
<img src="https://static.igem.org/mediawiki/2018/0/0b/T--NEU_China_B--design_1.png">
 +
</div>
 
<br>
 
<br>
 
The amount of D-Lactate/L-Lactate and nicotinamide adenine dinucleotide (NADH) formed in the above reactions are
 
The amount of D-Lactate/L-Lactate and nicotinamide adenine dinucleotide (NADH) formed in the above reactions are
Line 793: Line 85:
 
have the chance to realize the cross disciplines and peer learning with different fields.
 
have the chance to realize the cross disciplines and peer learning with different fields.
 
<h3>Lactate Monitor Circuit</h3>
 
<h3>Lactate Monitor Circuit</h3>
<img src="https://static.igem.org/mediawiki/2018/3/30/T--NEU_China_B--design_2.png">
 
<br>We designed a lactate monitoring circuit to imitate the conditions that triggered Quorum Sensing of Escherichia
 
coli. By constructing a biophysical loop with the second Quorum Sensing system of Escherichia coli K12 strain, we
 
would be able to use optical fiber probe to detect Green Fluorescent Protein intensity.
 
<br>We have known that the second Quorum Sensing system of Escherichia coli k12 strain takes DPD (4, 5-dihydroxy-2,
 
3-pentanedione), which is expressed by LuxS gene, as its signal molecule [1]. The DPD can bind to the repressor
 
protein LsrR after methylation and phosphorylation. Next, the conformation of repressor protein changes and loses
 
its function, hence the Quorum Sensing system activates. We integrated the Green Fluorescent Protein(GFP) gene
 
behind the promoter LsrA which operates the Quorum Sensing (Fig.2). Forasmuch as the expression of GFP gene and the
 
concentration of lactate show a proportional relationship, detecting the intensity of GFP equals to determine the
 
concentration of lactate in the environment.
 
  
</p>
 
<img src="https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--design_3.png">
 
  
(Fig.1 QS System[2])
+
<div>
<img src="https://static.igem.org/mediawiki/2018/b/b8/T--NEU_China_B--design_4.png">
+
<div class="pull-right text-center">
(Fig.2 BBa_k2824007 )
+
<div>
 +
<img src="https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--design_3.png" style="width:400px">
 +
</div>
 +
(Fig.1 QS System[2])
 +
</div>
 +
<div class="p">
 +
We designed a lactate monitoring circuit to imitate the conditions that triggered Quorum Sensing of <i>Escherichia coli</i>. By constructing a biophysical loop with the second Quorum Sensing system of <i>Escherichia coli</i> K12 strain, we
 +
would be able to use optical fiber probe to detect Green Fluorescent Protein intensity.
 +
<div>
 +
<div class="p">
 +
We have known that the second Quorum Sensing system of <i>Escherichia coli </i> k12 strain takes DPD (4, 5-dihydroxy-2,
 +
3-pentanedione), which is expressed by LuxS gene, as its signal molecule <sup>[1]</sup>. The DPD can bind to the repressor
 +
protein LsrR after methylation and phosphorylation. Next, the conformation of repressor protein changes and loses
 +
its function, hence the Quorum Sensing system activates. We integrated the Green Fluorescent Protein(GFP) gene
 +
behind the promoter LsrA which operates the Quorum Sensing (Fig.2). Forasmuch as the expression of GFP gene and the
 +
concentration of lactate show a proportional relationship, detecting the intensity of GFP equals to determine the
 +
concentration of lactate in the environment.
 +
<div>
 +
 
 +
</div>
 +
 
 +
 
 +
<div>
 +
<div>
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2018/b/b8/T--NEU_China_B--design_4.png" height="100px">
 +
</div>
 +
(Fig.2 BBa_k2824007 )
 +
</div>
 +
 
  
 
<h2>
 
<h2>
 
Lactate Detector</h2>
 
Lactate Detector</h2>
<p>
+
<div class="p">
<br>The O1-O2 site (Fig.3) of LldPRD Operon is where the lactate spot and integrate [2]. The O1-O2 site would be
+
<br>The O1-O2 site (Fig.3) of lldPRD Operon is where the lactate spot and integrate<sup>[2]</sup>. The O1-O2 site would be
bound with the repressor protein LldR with no lactate exist. Showing as (Fig.4), we only keep two original
+
bound with the repressor protein lldR with no lactate exist. Showing as (Fig.4), we only keep two original
components of LldPRD Operon, the O1-O2 site and LldR gene. We deduced that the basal expression of LldP gene, which
+
components of lldPRD Operon, the O1-O2 site and lldR gene. We deduced that the basal expression of lldP gene, which
served as permease to mediate the uptake of lactate, is enough. And the LldD gene encodes the dehydrogenase [3].
+
served as permease to mediate the uptake of lactate, is enough. And the lldD gene encodes the dehydrogenase <sup>[3]</sup>.
<br>We jointed the LuxS gene to the O1-O2 site and integrated it into the vector (pCFDuet-1 plasmid). We attempted
+
<br>We jointed the LuxS gene to the O1-O2 site and integrated it into the vector (pCDFDuet-1 plasmid). We attempted
 
to obtain a large amount of LuxS gene expression under the suitable alarm molecule concentration, and then started
 
to obtain a large amount of LuxS gene expression under the suitable alarm molecule concentration, and then started
 
a simulated group effect system to express the GFP.
 
a simulated group effect system to express the GFP.
</p>
+
<div>
  
 +
<div class="row text-center">
 +
<div class="col-xs-6">
 +
<a href="#" class="thumbnail">
 +
<img src="https://static.igem.org/mediawiki/2018/c/cc/T--NEU_China_B--design_5.png" alt="">
 +
</a>
 +
(Fig.3 lldPRD OPERON)
 +
</div>
  
<img src="https://static.igem.org/mediawiki/2018/c/cc/T--NEU_China_B--design_5.png">
+
<div class="col-xs-6">
(Fig.3 LldPRD OPERON)
+
<a href="#" class="thumbnail">
<img src="https://static.igem.org/mediawiki/2018/d/d9/T--NEU_China_B--design_6.png">
+
<img src="https://static.igem.org/mediawiki/2018/d/d9/T--NEU_China_B--design_6.png" alt="">
(Fig.4 BBa_K2824009)
+
</a>
 +
(Fig.4 BBa_K2824009)
 +
</div>
 +
 
 +
</div>
  
 
<h2>Three Dimensional Model</h2>
 
<h2>Three Dimensional Model</h2>
<p>
+
<div>
We used 3D printing technology in the construction of the container model. We chose to use the photosensitive resin
+
<div class="p">
material.
+
We used 3D printing technology in the construction of the container model. We chose to use the photosensitive resin
<br>The reason why we used photosensitive resin is it has certain light cure property, in which a certain UV
+
material.
initiator or photosensitive agent is added. And the polymerization reaction is immediately arising under a constant
+
<div>
UV light irradiation. After the curing process is completed, the whole process of product molding is realized. It
+
<div class="p">
is well known that UV has a good bactericidal effect in the medical field. The utilization of photosensitive resin
+
The reason why we used photosensitive resin is it has certain light cure property, in which a certain UV
material can largely guarantee the sterile condition of the experimental device.
+
initiator or photosensitive agent is added. And the polymerization reaction is immediately arising under a constant
<br>In addition, the quality of photosensitive resin material printing is very high and elaborate. The container’s
+
UV light irradiation. After the curing process is completed, the whole process of product molding is realized. It
advantages include lightness, relatively high-temperature endurance (120 Celsius degree) and its convenience in
+
is well known that UV has a good bactericidal effect in the medical field. The utilization of photosensitive resin
sterilization. The last but the least, it has no adverse effect on the bacterium growth, which allows it to be a
+
material can largely guarantee the sterile condition of the experimental device.
suitable container.
+
<div>
<br>After discussion and research, we adapt the water droplet model built by 3D modeling software. A diameter of 2
+
<div>
mm hole was reserved in the top of the container in order to insert the Optical fiber. And in both of the left and
+
<div class="text-center" style="float:right;display: inline-block">
right sides by the apical hole, there would be two more holes in a diameter of 0.5 mm reserved to add the sample.
+
<div>
The container received special paint spray treatment to ensure the impermeability and avoid the early stimulation
+
<img src="https://static.igem.org/mediawiki/2018/3/30/T--NEU_China_B--design_7.png" height="200px">
of GFP.
+
</div>
</p>
+
(Fig. 5 3D container)
<img src="https://static.igem.org/mediawiki/2018/3/30/T--NEU_China_B--design_7.png">
+
</div>
(Fig. 6 3D container)
+
<!-- <div class="clearfix"></div> -->
 +
<div class="p">
 +
In addition, the quality of photosensitive resin material printing is very high and elaborate. The container’s
 +
advantages include lightness, relatively high-temperature endurance (120 Celsius degree) and its convenience in
 +
sterilization. The last but the least, it has no adverse effect on the bacterium growth, which allows it to be a
 +
suitable container.
 +
<div>
 +
 
 +
</div>
 +
 
 +
<div class="p">
 +
After discussion and research, we adapt the water droplet model built by 3D modeling software. A diameter of 2
 +
mm hole was reserved in the top of the container in order to insert the Optical fiber. And in both of the left and
 +
right sides by the apical hole, there would be two more holes in a diameter of 0.5 mm reserved to add the sample.
 +
The container received special paint spray treatment to ensure the impermeability and avoid the early stimulation
 +
of GFP.
 +
<div>
 +
</div>
 
<h3>Reference</h3>
 
<h3>Reference</h3>
<p>
+
 
 +
<i>
 
[1]: Xianxuan, Zhou, Baolin, Sun. Cell-Cell Communication and Signal Transduction in Escherichia coli[D]. Anhui,
 
[1]: Xianxuan, Zhou, Baolin, Sun. Cell-Cell Communication and Signal Transduction in Escherichia coli[D]. Anhui,
 
China: University of science and technology of China, 2008.
 
China: University of science and technology of China, 2008.
 
<br>[2]: Laura, Aguilera, Evangelina, Campos, Rosa, Gime´nez, Josefa, Badı´a, Juan, Aguilar, Laura, Baldoma. Dual
 
<br>[2]: Laura, Aguilera, Evangelina, Campos, Rosa, Gime´nez, Josefa, Badı´a, Juan, Aguilar, Laura, Baldoma. Dual
Role of LldR in Regulation of the lldPRD Operon, Involved in L-Lactate Metabolism in Escherichia coli[J]. JOURNAL
+
Role of LldR in Regulation of the lldPRD Operon, Involved in L-Lactate Metabolism in <i>Escherichia coli</i>[J]. JOURNAL
 
OF BACTERIOLOGY, 2008, 190(8): 2997-3005.
 
OF BACTERIOLOGY, 2008, 190(8): 2997-3005.
 
<br>[3]: Lisa, Goers, Catherine, Ainsworth, Cher, Hui, Goey, Cleo, Kontoravdi, Paul, S, Freemont, Karen, M,
 
<br>[3]: Lisa, Goers, Catherine, Ainsworth, Cher, Hui, Goey, Cleo, Kontoravdi, Paul, S, Freemont, Karen, M,
Polizzi. Whole-Cell Escherichia coli Lactate Biosensor for Monitoring Mammalian Cell Cultures During
+
Polizzi. Whole-Cell <i>Escherichia coli</i> Lactate Biosensor for Monitoring Mammalian Cell Cultures During
 
Biopharmaceutical Production[J]. Biotechnology and Bioengineering, 2017, 114(6): 1290-1300.
 
Biopharmaceutical Production[J]. Biotechnology and Bioengineering, 2017, 114(6): 1290-1300.
</p>
+
<i/>
 
</html>
 
</html>

Latest revision as of 03:46, 18 October 2018

Ruby - Responsive Corporate Tempalte

Applied Design

Inspiration

Our inspiration came from the industrial fermentation. Among of fermentation bacteria Lactobacillus is the most well-known, which is mainly used in manufacturing yogurt and its derivatives. In modern life, yogurt has been considered as the indispensable food for your daily life.
Speaking of the yogurt, there is an ancient story said that nomads living in the Anatolian (now Turkish) plateau had made and drank yogurt as early as 3000 B.C. The original yogurt may be made by chance. Goat milk often spoiled in stocks since the bacteria contaminated the milk. However, in one case, air born lactic bacteria accidentally entered into the milk and lead to the milk deterioration. Unexpectedly, the “deteriorated milk” became more sour and sweet palatable, this is the earliest yogurt. Shepherds found the yogurt so good to drink that they inoculated the sample into the uncontaminated milk in order to retrieving the yogurt. After a period of culture and fermentation, a new yogurt was obtained.
Although fermenter is a great place for microorganisms rapidly grow, reproduce, and accumulate metabolized organic matter, it also could generate many by-products. The excess lactate not only inhibited the growth of fermentation bacteria, but also reduced the quality of the product. Additionally, high concentration of industrial lactate may corrode human skin and epithelium. So we came up with the idea of making a real-time biophysical receptor to measure in real time whether the culture fluid in the fermenter need to be refilled.

Current Methods

1. pH value

Currently, the industrial companies commonly use the pH meter and pH paper to detect the concentration of lactate in the producing. But using the pH meter or pH paper require the nutrient fluid flow out from the fermenter first, which enhance the risk of getting polluted by microorganism. Also, as we all knew that using pH value to detect Lactate only allow the factories get a rough data since the nutrient fluid has other acidic molecules like formic acid. The current method is no deny that inefficient also because it requires hand operation of industrial workers.

2. lactate Detection Kit

With the presence of D-Lactate Dehydrogenase (D-LDH), D-Lactate was oxidized by nicotinamide dinucleotide (NAD) into pyruvate. In the similar situation, L-Lactate could be oxidized in the presence of L-Lactate Dehydrogenase (L-LDH).

The reaction equilibrium depends on the amount of lactate. In the presence of L-glutamic acid (L-glutamate) in the following reactions, the formation of pyruvate (pyruvate) and NADH are catalyzed by Glutamate Pyruvate Transaminase (GPT).

The amount of D-Lactate/L-Lactate and nicotinamide adenine dinucleotide (NADH) formed in the above reactions are chemical stoichiometry. And by measuring the absorbance of the generated NADH at the wavelength of 334/340/365 nm, the concentration of lactate can be determined.
Even though the data is accurate using the lactate detection Kit, this method is time consuming. Also, it requires equipment such as Ultraviolet(UV) spectrophometer in the procedure. Thus, from the aspects of convenience and industrial cost, we design a swifter and real-time lactate detect model with Bio-synthetic methods.
Optical Fiber Probe and Dial
Optical fiber is a sort of artificial fiber made from glasses or plastic, widely used in the light conducting. The principle of transmission is the overall reflection of light.
Optical fiber spectrometer is usually used as signal coupler, which is coupled to spectrometer for spectral analysis. Because of its convenience, we can set up spectrum acquisition system flexibly.
The Optical Fiber Probe works as a sensor which can transform the targets in the same or other phases into light signals as a feedback. The incident ray would be sent from the the fiber, in the meanwhile the targets capture the light source and reflect backward to fiber probe.
In our design proposal, the Optical Fiber Probe embodies one laser emitter which gives out the incident light source in the head. Along with it were the cladding glasses with lower refractive index which keep the light signal inside the core. And a thin plastic material surrounds outside the cladding is coating layer, usually used as protector of fiber.
The fiber linked with a spectrometer and a galvanometer(GALV) liked dial. Due to the stoichiometry between the light intensity and the concentration of Lactate, light signals would be processed in spectrometer. Later then the dial would be capable to outlet the scales of lactate. By mathematical calculation, we reprogrammed the dial scales into visualized scales of lactate concentration.
The optical fiber detector is mainly constructed by the students from Information Institution. By this way, we have the chance to realize the cross disciplines and peer learning with different fields.

Lactate Monitor Circuit

(Fig.1 QS System[2])
We designed a lactate monitoring circuit to imitate the conditions that triggered Quorum Sensing of Escherichia coli. By constructing a biophysical loop with the second Quorum Sensing system of Escherichia coli K12 strain, we would be able to use optical fiber probe to detect Green Fluorescent Protein intensity.
We have known that the second Quorum Sensing system of Escherichia coli k12 strain takes DPD (4, 5-dihydroxy-2, 3-pentanedione), which is expressed by LuxS gene, as its signal molecule [1]. The DPD can bind to the repressor protein LsrR after methylation and phosphorylation. Next, the conformation of repressor protein changes and loses its function, hence the Quorum Sensing system activates. We integrated the Green Fluorescent Protein(GFP) gene behind the promoter LsrA which operates the Quorum Sensing (Fig.2). Forasmuch as the expression of GFP gene and the concentration of lactate show a proportional relationship, detecting the intensity of GFP equals to determine the concentration of lactate in the environment.
(Fig.2 BBa_k2824007 )

Lactate Detector


The O1-O2 site (Fig.3) of lldPRD Operon is where the lactate spot and integrate[2]. The O1-O2 site would be bound with the repressor protein lldR with no lactate exist. Showing as (Fig.4), we only keep two original components of lldPRD Operon, the O1-O2 site and lldR gene. We deduced that the basal expression of lldP gene, which served as permease to mediate the uptake of lactate, is enough. And the lldD gene encodes the dehydrogenase [3].
We jointed the LuxS gene to the O1-O2 site and integrated it into the vector (pCDFDuet-1 plasmid). We attempted to obtain a large amount of LuxS gene expression under the suitable alarm molecule concentration, and then started a simulated group effect system to express the GFP.
(Fig.3 lldPRD OPERON)
(Fig.4 BBa_K2824009)

Three Dimensional Model

We used 3D printing technology in the construction of the container model. We chose to use the photosensitive resin material.
The reason why we used photosensitive resin is it has certain light cure property, in which a certain UV initiator or photosensitive agent is added. And the polymerization reaction is immediately arising under a constant UV light irradiation. After the curing process is completed, the whole process of product molding is realized. It is well known that UV has a good bactericidal effect in the medical field. The utilization of photosensitive resin material can largely guarantee the sterile condition of the experimental device.
(Fig. 5 3D container)
In addition, the quality of photosensitive resin material printing is very high and elaborate. The container’s advantages include lightness, relatively high-temperature endurance (120 Celsius degree) and its convenience in sterilization. The last but the least, it has no adverse effect on the bacterium growth, which allows it to be a suitable container.
After discussion and research, we adapt the water droplet model built by 3D modeling software. A diameter of 2 mm hole was reserved in the top of the container in order to insert the Optical fiber. And in both of the left and right sides by the apical hole, there would be two more holes in a diameter of 0.5 mm reserved to add the sample. The container received special paint spray treatment to ensure the impermeability and avoid the early stimulation of GFP.

Reference

[1]: Xianxuan, Zhou, Baolin, Sun. Cell-Cell Communication and Signal Transduction in Escherichia coli[D]. Anhui, China: University of science and technology of China, 2008.
[2]: Laura, Aguilera, Evangelina, Campos, Rosa, Gime´nez, Josefa, Badı´a, Juan, Aguilar, Laura, Baldoma. Dual Role of LldR in Regulation of the lldPRD Operon, Involved in L-Lactate Metabolism in Escherichia coli[J]. JOURNAL OF BACTERIOLOGY, 2008, 190(8): 2997-3005.
[3]: Lisa, Goers, Catherine, Ainsworth, Cher, Hui, Goey, Cleo, Kontoravdi, Paul, S, Freemont, Karen, M, Polizzi. Whole-Cell Escherichia coli Lactate Biosensor for Monitoring Mammalian Cell Cultures During Biopharmaceutical Production[J]. Biotechnology and Bioengineering, 2017, 114(6): 1290-1300.