Difference between revisions of "Template:Tongji-software"

(Created page with "<html> <script> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////...")
 
 
(58 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<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>
 
  
  
Line 59: Line 15:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#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; }
 
#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;}
+
body{
 +
margin: 0;
 +
color:#685454;
 +
font-family: Helvetica, Arial, sans-serif;
 +
/* font-family: "Times New Roman", Cambria,  serif;*/
 +
background-color:#fff;
 +
}
  
 +
.icon {
 +
  position: fixed;
 +
  float: left;
 +
  top: 0px;
 +
  background-color: #592e2e;
 +
  margin-top:0px;
 +
  width: 10%;
 +
  height: 100%;
  
/**************************************************************************************************************************************************************************************************/
+
}
/* 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%;
 
}
 
  
 +
.icon ul{
 +
  position: fixed;
 +
  overflow:none;
 +
  display:inline-block;
 +
  vertical-align: middle;
 +
  width: 10%;
 +
  height: 100%;
 +
  /*background-color: #685454;*/
 +
  padding-left: 20px;
 +
  padding-top: 25px;
 +
  transition: 0.3s;
 +
}
  
.igem_2018_team_menu.displaying_menu{
+
.icon ul li{
display:block;
+
  display:inline-block;
}
+
  vertical-align: middle;
 +
  list-style: none;
 +
  transition: 0.3s;
 +
  margin-bottom: 15px;
 +
}
  
.igem_2018_team_menu  a {
+
.icon ul li img{
color: #484848;
+
  transition: 0.3s;
text-decoration:none;
+
}
}
+
  
.igem_2018_team_menu img {
+
.icon ul li img:hover  {
width:100%;
+
  transition: 0.3s;
}
+
  -webkit-filter: brightness(200%);
 +
filter: brightness(200%);
 +
transform: scale(1.2);
 +
}
  
 +
.line {
 +
  position: fixed;
 +
  float: left;
 +
  top: 0px;
 +
  left:10%;
 +
  background-color: #ffb6bc;
 +
  width: 1%;
 +
  height: 100%;
 +
  padding-right:-20px;
 +
  padding-top:10px;
 +
}
  
.igem_2018_team_menu .menu_item {
+
.left {
    background-color: #c4baba;
+
  position: fixed;
    border-bottom: 1px solid #928b8b;
+
  float: left;
    clear: both;
+
  top: 0px;
color: #484848;
+
  left:10%;
    cursor: pointer;
+
  background-color: #ffb6bc;
float: left;
+
  width: 11%;
    font-size: 120%;
+
  height: 100%;
    font-weight: bold;
+
  padding-right:-20px;
    padding: 15px 0px 15px 5%;
+
  padding-top:10px;  
  width: 100%;
+
}
}
+
  
.igem_2018_team_menu .menu_item.direct_link {
+
.left ul{
color: #484848;
+
  display:inline-block;
padding-left: 15%;
+
  text-align: center;
}
+
  padding-left: -5px;
.igem_2018_team_menu .menu_item:hover {
+
  margin-top: 20px;
background-color: #ecb656;
+
padding-right:-20px;
}
+
}
  
 +
.left ul a{
 +
  text-decoration:none;
 +
  color:#685454;
 +
  transition: 0.3s;
 +
}
  
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
.left ul li{
color: #484848;
+
  display:block;
float: left;
+
  color:#685454;
width: 10%;
+
  list-style: none;
}
+
  padding-bottom:20px;
 +
  margin-bottom:  15px;
 +
  padding-top:10px;
 +
  border-bottom: 0.5px solid #685454;
 +
  transition: 0.3s;
 +
  font-weight:bold;
 +
  font-size:18px;
 +
}
  
/* submenu icon "+"  "-"*/
+
.left ul li :hover{
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
  display: inline-block;
content: "+";  
+
  -webkit-filter: brightness(0%);
}
+
filter: brightness(0%);
 +
  transition:all 0.3s;
 +
  transform: scale(1.15);
 +
}
 +
.left li:before {
 +
  content: '';
 +
  height: 100%;
 +
  left: 0;
 +
  position: absolute;
 +
  top: 0;
 +
  -webkit-transition: width 0.2s ease-in;
 +
  transition: width 0.2s ease-in;
 +
  width: 3px;
 +
  z-index: -1;
 +
}
  
/* submenu icon "+"  "-"*/
+
.left li:hover:before {
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
  -webkit-transition: width 0.2s ease-in;
content: "-";  
+
  transition: width 0.2s ease-in;
}
+
  width: 100%;
 +
}
  
/*submenu wrapper*/
+
.left li.open:hover before {
.igem_2018_team_menu .submenu{
+
  -webkit-transition: width 0.2s ease-in;
background-color: #e4dede;
+
  transition: width 0.2s ease-in;
clear:both;
+
  width: 100%;
display:none;
+
}
float: left;
+
width:100%;
+
}
+
  
/*styling for a submenu item*/
+
.picture{
.igem_2018_team_menu .submenu .submenu_item {
+
position:absolute;
border-bottom: 1px solid #c4baba;
+
top:0px;
  color: #635d5d;
+
margin-top:-70px;
    height: 30px;
+
overflow:hidden;
  float: left;
+
z-index: -1;
    font-size: 110%;
+
}
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
  
.igem_2018_team_menu .submenu .submenu_item:hover {
+
.background{
background-color: #f3bd5d;
+
position:fixed;
}
+
top:0px;
 +
z-index: -1;
 +
}
  
  
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.title{
.igem_2018_team_menu .menu_item.current_page,
+
  position:absolute;
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
  float: left;
background-color:#7acbd8;
+
  top:25%;
}
+
  left:28%;
 +
  font-size: 48px;
 +
  color:#e5838f;
 +
  z-index: 2;
 +
  font-weight: bolder;
 +
}
  
 +
.content{
 +
  position:absolute;
 +
  float: left;
 +
  top:110%;
 +
  left:20%;
 +
  width:71%;
 +
  font-size: 18px;
 +
  z-index: 2;
 +
  margin-left:50px;
 +
line-height: 35px;
  
 +
}
  
/*mobile menu bar styling*/
+
.content .h1{
/**************************************************************************************************************************************************************************************************/
+
  margin-top: 20px;
 +
  font-size: 34px;
 +
  font-weight: bold;
 +
  color: #ffb6bc;
 +
}
  
 +
.content .top{
 +
  padding-top: 23px;
 +
  padding-left: 90px;
 +
  display: table-cell;
 +
  vertical-align:middle;
 +
  text-align:center;
 +
  font-weight:bold;
 +
  font-size: 25px;
 +
  color:#685454;
 +
  padding-bottom: 20px;
 +
}
  
.igem_2018_team_mobile_bar {
+
.content .detail{
background-color:#e4dede;  
+
  display: inline-block;
border-bottom: 1px solid #c4baba;
+
  text-indent:2em;
cursor:pointer;
+
  font-size: 18px;
display:none;
+
  padding-top: 10px;
float:left;
+
  padding-bottom: 10px;
margin-top: 0;
+
 
padding: 5px 0;
+
}
position:fixed;
+
width:100%;
+
}
+
  
.igem_logo_mobile img {
+
.content .question{
width:70px;
+
  display: inline-block;
}
+
  font-size: 20px;
 +
  padding-top: 10px;
 +
  padding-bottom: 10px;
 +
  color:#62acf9;
 +
  font-weight:bold;
 +
}
 +
.content img{
 +
  padding-left: 50px;
 +
  display: table-cell;
 +
  vertical-align:middle;
 +
}
  
.igem_logo_mobile {
 
float:left;
 
padding-left: 5%;
 
width: 30%;
 
}
 
  
.igem_menu_control_mobile img {
+
#btn{
width:25px;
+
display: none;
}
+
position: fixed;
 
+
left: 90%;
.igem_menu_control_mobile {
+
bottom: 40px;
float:right;  
+
height:80px;
padding-right:5%;  
+
width: 80px;
padding-top:5px;
+
background: url(https://static.igem.org/mediawiki/2018/9/9d/T--Tongji-Software--logo4.png) no-repeat left top;
text-align:right;  
+
background-size:100% auto;
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>
 
</style>
 +
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/css/style.css&action=raw&ctype=text/css">
  
 +
<body>
 +
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<div class="icon">
<!--- THIS IS WHERE THE HTML BEGINS --->
+
    <ul>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
    <a href="https://2018.igem.org/Team:Tongji-Software" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/f/fa/T--Tongji-Software--logo.svg" width="55%"  ></li></a>
  
<head>  
+
    <a href="https://2018.igem.org/Team:Tongji-Software/Project" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/e/ed/T--Tongji-Software--Pro.svg" width="30%" ></li></a>
  
<!-- This tells the browser that your page is responsive -->
+
    <a href="https://2018.igem.org/Team:Tongji-Software/Team" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/1/1f/T--Tongji-Software--Tea.svg" width="30%" ></li></a>
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
  
</head>
+
    <a href="https://2018.igem.org/Team:Tongji-Software/Attributions" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/8/86/T--Tongji-Software--Att.svg" width="30%" ></li></a>
  
 +
    <a href="https://2018.igem.org/Team:Tongji-Software/Model" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/7/77/T--Tongji-Software--Mod.svg" width="30%" ></li></a>
  
 +
    <a href="https://2018.igem.org/Team:Tongji-Software/Collaborations" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tongji-Software--Col.svg" width="30%" ></li></a>
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
    <a href="https://2018.igem.org/Team:Tongji-Software/Requirements" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/5/5f/T--Tongji-Software--Req.svg" width="30%" ></li></a>
<!--- Menu --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
  
 +
    <a href="https://2018.igem.org/Team:Tongji-Software/Human_Practices" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/c/cc/T--Tongji-Software--Hum.svg" width="30%" ></li></a>
  
 +
    <a href="https://2018.igem.org/Team:Tongji-Software/Measurement" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tongji-Software--Med.svg" width="30%" ></li></a>
 +
  </ul>
 +
  </div>
  
 
+
<div class="line">
<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>
 
</div>
  
 +
<div><a href="javascript:;" id="btn" title="Return to Top"></a></div>
  
 +
<div id = "wrapper">
 +
<div class="left"  id = "sidebar-wrapper">
 +
    <ul>
 +
      <li><a href="#Contribution">Contribution</a></li>
 +
      <li><a href="#Demonstration">Demonstration</a></li>
 +
      <li><a href="#Safety">Safety</a></li>
 +
    </ul>
  
 +
</div>
 +
 
 +
<div class="picture">
 +
    <img src="https://static.igem.org/mediawiki/2018/0/0e/T--Tongji-Software--requirement-background.jpeg"  width="100%" >
 +
  </div>
  
<div class="igem_2018_team_menu displaying_menu">
+
  <div class="title">
 +
    <span>Requirements</span>
 +
  </div>
  
 +
<div class="content" id="con">
 +
<span class="h1" name='con' id="Contribution">
 +
            Contribution</br>
 +
          </span>
  
<a href="https://2018.igem.org/Team:Tongji-Software">
+
<span class="detail">Alpha Ant is a convenient and efficient pathway design tool. More importantly, it is reliable. Check it in <a href="https://2018.igem.org/Team:Tongji-Software/Validation">Validation</a>. We provide users with enzyme gene information of Biobricks, including sequence information and physiochemical characteristics. The core idea is to design proper and efficient pathway and recommend Biobricks (mainly enzyme gene) for users’ need.</span></br>  
<img src="http://placehold.it/350x150/e4dede/c4baba">
+
(这里放我们软件的截图)
</a>
+
<span class="detail">There are three main contribution to synthetic biology:</span></br>  
  
 +
<span class="detail"> First one is that we offer more possibilities. We collect 7 reliable online databases and create our own data structure, including KEGG, MetaCyc, BRENDA and so on. Users can find several possible pathways consist of different enzyme-encoding genes. Those genes could be from any organism in nature. Consequently, many possible options are given to the user. Check users’ guide in <a href ="https://2018.igem.org/Team:Tongji-Software/Requirements#Demonstration">Demonstration</a>.</span></br>
  
 +
<span class="detail">Second one is that more information is provided including Physiochemical characteristics of compounds and enzymes, gene information and FBA data. Especially the physiochemical data, changes in each one of the chassis cell system could contribute to inefficiency or failure of a pathway. So we want to provide information as much as possible. What we are doing right now is for everyone who is engaged in synthetic biology and for their consideration.</span></br>
  
<a href="https://2018.igem.org/Team:Tongji-Software">
+
<span class="detail">Third one is that we offer some very useful functions other than pathway design, which are microorganism recommendation, SMILES comparison and FBA. Actually, we are trying to meet every experimenters need as much as possible. Details can be found in <a href="https://2018.igem.org/Team:Tongji-Software/Project">Project</a> and <a href = "https://2018.igem.org/Team:Tongji-Software/Model">model</a>.</span></br>
<div class="menu_item direct_link">
+
HOME
+
</div>  
+
</a>
+
  
<!-- Team -->
 
<div class="menu_item">
 
<div class="submenu_control_icon"> </div>
 
TEAM
 
</div>
 
<div class="submenu">
 
 
<a href="https://2018.igem.org/Team:Tongji-Software/Team">
 
<div class="submenu_item">
 
Team Members
 
</div>
 
</a>
 
  
<a href="https://2018.igem.org/Team:Tongji-Software/Collaborations">
+
<span class="h1" id="Demonstration">  
<div class="submenu_item">
+
            Demonstration</br>  
Collaborations
+
          </span>
</div>
+
</a>
+
</div>
+
  
 +
<span class="h1" id="Safety">
 +
            Safety</br>
 +
          </span>
 +
<span class="question">Q1: Who will use your software? What will the user concern about?</span></br>
 +
<b>Alpha Ant:</b></br>
 +
<span class="detail">1. For synthetic biologist</span></br>
 +
<span class="detail">Pathway engineering: design proper metabolic pathways while taking into account several criteria such as thermodynamic feasibility, material competition of heterologous reactions, atom conservation, toxicity of intermediates. </span></br>
  
<!-- Project -->
+
<span class="detail">2. For environmentalist</span></br>
<div class="menu_item">
+
<span class="detail">Find proper Microorganism to make some harmful substances degrade. The purpose is to be helpful to improve the environment.</span></br>
<div class="submenu_control_icon"> </div>
+
PROJECT
+
</div>  
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:Tongji-Software/Description">
+
<div class="submenu_item">
+
Description
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:Tongji-Software/Design">
+
<span class="detail">3. For chemist</span></br>
<div class="submenu_item">
+
<span class="detail">Find more reliable and convenient path to synthesis target compound (cell-free synthetic biology)</span></br>
Design
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:Tongji-Software/Experiments">
+
<span class="detail">4. For drug researcher</span></br>
<div class="submenu_item">
+
<span class="detail">By using our software, researchers can study the small molecular drug and explore new pathway to synthesize it</span></br>
Experiments
+
</div>
+
</a>
+
  
 +
To be continued ...</br></br>
 +
<span class="question">Q2: Are there any safety problem of biobricks in Alpha Ant we need to concern about?</span></br>
 +
Alpha Ant:
 +
<span class="detail">We provide users with enzyme gene information of Biobricks, including sequence information and physiochemical characteristics. The core idea is to design proper and efficient pathway and recommend mainly enzyme gene for users’ need. Consequently, users can get gene information. After that, they can design new biobricks or search existing one by their own. </span></br>
  
<a href="https://2018.igem.org/Team:Tongji-Software/Notebook">
 
<div class="submenu_item">
 
Notebook
 
</div>
 
</a>
 
  
<a href="https://2018.igem.org/Team:Tongji-Software/InterLab">
+
</br>
<div class="submenu_item">
+
<span class="question">Q3: What about chassis cell? Since your software can recommend chassis cell for users, have you ever think about safety of your chassis cell?</span></br>
InterLab
+
Alpha Ant: 
</div>
+
<span class="detail">In our microorganism recommendation system, we only recommend common used organism in iGEM and organisms in iGEM white list(link). We want ensure the biosafety of our project and people who use our software.</span></br></br>
</a>
+
  
 +
<span class="question">Q4:  How many compounds and enzyme genes do you have in your software project?</span></br>
 +
Alpha Ant:  7689 compounds  10865 reactions  6385 gibbs  630275 genes
 +
KEGG: 21831          10865 reaction
 +
Gil:  6160 compounds    7164 reactions
  
<a href="https://2018.igem.org/Team:Tongji-Software/Model">
+
</br>
<div class="submenu_item">
+
<span class="question">Q5: Do users have any way to access your data, or change data without any limitations?</span></br>
Model
+
Alpha Ant: 
</div>
+
<span class="detail">Our data has a very neat format, mostly dictionary format. They are all stored in excel files. Users can simply search metabolic pathway in the browser and don’t need to download any files to use our software. So it’s quite convenient for them. Generally, users can not change our data in web client. But they can contact us and exchange suggestions. By the way, full data can be downloaded in github(link).</span></br>
</a>
+
  
<a href="https://2018.igem.org/Team:Tongji-Software/Results">
 
<div class="submenu_item">
 
Results
 
</div>
 
</a>
 
  
  
<a href="https://2018.igem.org/Team:Tongji-Software/Demonstrate">
+
</div>
<div class="submenu_item">
+
</div>
Demonstrate
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:Tongji-Software/Improve">
 
<div class="submenu_item">
 
Improve
 
</div>
 
</a>
 
  
<a href="https://2018.igem.org/Team:Tongji-Software/Attributions">
+
<script src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/js/jquery-1.8.3.min.js&action=raw&ctype=text/javascript"></script>
<div class="submenu_item">
+
<script src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/js/bootstrap.min.js&action=raw&ctype=text/javascript"></script>
Attributions
+
<script type="text/javascript">
</div>
+
$(document).ready(function () {
</a>
+
  var trigger = $('.icon'),
 +
    slide = $('.left'),
 +
isClosed = true;
  
</div>
+
trigger.mouseover(function () {
 +
  cross_out();     
 +
});
 +
slide.mouseleave(function () {
 +
  cross_in();     
 +
});
  
 
+
function cross_out() {
<div class="menu_item">
+
  if (isClosed == true) {
<div class="submenu_control_icon"> </div>
+
trigger.removeClass('is-open');
PARTS
+
trigger.addClass('is-closed');
</div>
+
<div class="submenu">
+
 
 
<a href="https://2018.igem.org/Team:Tongji-Software/Parts">
+
$('#wrapper').toggleClass('toggled');
<div class="submenu_item">
+
isClosed = false;
Parts Overview
+
  }
</div>
+
}
</a>
+
function cross_in() {
 +
  if (isClosed == false) {
 +
trigger.removeClass('is-closed');
 +
trigger.addClass('is-open');
 +
 +
$('#wrapper').toggleClass('toggled');
 +
isClosed = true;
 +
  }
 +
  }
 +
});
 +
</script>
  
<a href="https://2018.igem.org/Team:Tongji-Software/Basic_Part">
+
<script>
<div class="submenu_item">
+
window.onload = function(){
Basic Parts
+
                //获取相关
</div>
+
                var mybtn = document.getElementById("btn");
</a>
+
                var Time1 = null;
 +
                var isTop = true;
  
<a href="https://2018.igem.org/Team:Tongji-Software/Composite_Part">
+
                mybtn.onclick = function(){
<div class="submenu_item">
+
                    //设置定时器
Composite Parts
+
                    Time1 = setInterval(function(){
</div>
+
                        var osTop = document.body.scrollTop||document.documentElement.scrollTop;
</a>
+
                        //ceil向上取整,floor向下取整
 +
                        var speed = Math.ceil(osTop/2);
 +
                        //做一个变换速度的回到顶部效果
 +
                        document.body.scrollTop = document.documentElement.scrollTop = osTop - speed;
 +
                        if(osTop <= 0){
 +
                            //清除定时器
 +
                            clearInterval(Time1);
 +
                        }
 +
                        isTop = true ;
 +
                    },100)
 +
                }
 +
               
 +
                //页面滚动自动触发:
 +
                window.onscroll = function(){
 +
                    //获取页面可视区高度和滚动高度
 +
                    var osTop = document.body.scrollTop||document.documentElement.scrollTop;
 +
                    //这两个获取滚动的方法可以兼容多种浏览器
 +
                    var clientHeight = document.documentElement.clientHeight;
 +
                    //对回到顶部的隐藏和显示,在css中一开始可以设置为隐藏
 +
                    if (osTop>clientHeight) {
 +
                        mybtn.style.display = "block"
 +
                    }
 +
                    else{
 +
                        mybtn.style.display = "none"
 +
                    }
 +
                    if (!isTop) {
 +
                        clearInterval(Time1);
 +
                    }
 +
                    isTop = false;
 +
                }
 +
            }
  
<a href="https://2018.igem.org/Team:Tongji-Software/Part_Collection">
+
</script>
<div class="submenu_item">
+
Part Collection
+
</div>
+
</a>
+
</div>  
+
  
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/js/a.js&action=raw&ctype=text/javascript" color="102,185,255" zIndex="10" opacity="50" count="300" position="fixed" >
+
</script>
+
<canvas id="c_n6" width="819" height="662" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"></canvas>
+
</body>
 
+
</html>
<a href="https://2018.igem.org/Team:Tongji-Software/Safety">
+
<div class="menu_item direct_link">
+
SAFETY
+
</div>
+
</a>
+
 
+
 
+
 
+
 
+
 
+
 
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
HUMAN PRACTICES
+
</div>
+
 
+
<div class="submenu">
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Human_Practices">
+
<div class="submenu_item">
+
Human Practices
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Public_Engagement">
+
<div class="submenu_item">
+
Education & Engagement
+
</div>
+
</a>
+
 
+
</div>
+
 
+
 
+
 
+
 
+
 
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
AWARDS
+
</div>
+
 
+
<div class="submenu">
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Applied_Design">
+
<div class="submenu_item">
+
Applied Design
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Entrepreneurship">
+
<div class="submenu_item">
+
Entrepreneurship
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Hardware">
+
<div class="submenu_item">
+
Hardware
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Measurement">
+
<div class="submenu_item">
+
Measurement
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Model">
+
<div class="submenu_item">
+
Model
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Plant">
+
<div class="submenu_item">
+
Plant
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:Tongji-Software/Software">
+
<div class="submenu_item">
+
Software
+
</div>
+
</a>
+
 
+
</div>
+
 
+
 
+
 
+
<a href="https://igem.org/2018_Judging_Form?team=Tongji-Software">
+
<div class="menu_item direct_link">
+
JUDGING FORM ⇗
+
</div>  
+
</a>
+
 
+
 
+
 
+
 
+
 
+
 
+
</div>
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Content of the page  --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+

Latest revision as of 07:18, 17 October 2018

Requirements
Contribution
Alpha Ant is a convenient and efficient pathway design tool. More importantly, it is reliable. Check it in Validation. We provide users with enzyme gene information of Biobricks, including sequence information and physiochemical characteristics. The core idea is to design proper and efficient pathway and recommend Biobricks (mainly enzyme gene) for users’ need.
(这里放我们软件的截图) There are three main contribution to synthetic biology:
First one is that we offer more possibilities. We collect 7 reliable online databases and create our own data structure, including KEGG, MetaCyc, BRENDA and so on. Users can find several possible pathways consist of different enzyme-encoding genes. Those genes could be from any organism in nature. Consequently, many possible options are given to the user. Check users’ guide in Demonstration.
Second one is that more information is provided including Physiochemical characteristics of compounds and enzymes, gene information and FBA data. Especially the physiochemical data, changes in each one of the chassis cell system could contribute to inefficiency or failure of a pathway. So we want to provide information as much as possible. What we are doing right now is for everyone who is engaged in synthetic biology and for their consideration.
Third one is that we offer some very useful functions other than pathway design, which are microorganism recommendation, SMILES comparison and FBA. Actually, we are trying to meet every experimenters need as much as possible. Details can be found in Project and model.
Demonstration
Safety
Q1: Who will use your software? What will the user concern about?
Alpha Ant:
1. For synthetic biologist
Pathway engineering: design proper metabolic pathways while taking into account several criteria such as thermodynamic feasibility, material competition of heterologous reactions, atom conservation, toxicity of intermediates.
2. For environmentalist
Find proper Microorganism to make some harmful substances degrade. The purpose is to be helpful to improve the environment.
3. For chemist
Find more reliable and convenient path to synthesis target compound (cell-free synthetic biology)
4. For drug researcher
By using our software, researchers can study the small molecular drug and explore new pathway to synthesize it
To be continued ...

Q2: Are there any safety problem of biobricks in Alpha Ant we need to concern about?
Alpha Ant: We provide users with enzyme gene information of Biobricks, including sequence information and physiochemical characteristics. The core idea is to design proper and efficient pathway and recommend mainly enzyme gene for users’ need. Consequently, users can get gene information. After that, they can design new biobricks or search existing one by their own.

Q3: What about chassis cell? Since your software can recommend chassis cell for users, have you ever think about safety of your chassis cell?
Alpha Ant: In our microorganism recommendation system, we only recommend common used organism in iGEM and organisms in iGEM white list(link). We want ensure the biosafety of our project and people who use our software.

Q4: How many compounds and enzyme genes do you have in your software project?
Alpha Ant: 7689 compounds 10865 reactions 6385 gibbs 630275 genes KEGG: 21831 10865 reaction Gil: 6160 compounds 7164 reactions
Q5: Do users have any way to access your data, or change data without any limitations?
Alpha Ant: Our data has a very neat format, mostly dictionary format. They are all stored in excel files. Users can simply search metabolic pathway in the browser and don’t need to download any files to use our software. So it’s quite convenient for them. Generally, users can not change our data in web client. But they can contact us and exchange suggestions. By the way, full data can be downloaded in github(link).