Difference between revisions of "Team:HFUT-China"

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

<title>HFUT-China</title>

<link rel="stylesheet" type="text/css" href="css/index.css">

<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/ghcss?action=raw&ctype=text/css">

<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/bootstrapcss?action=raw&ctype=text/css">

<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/onepagecss?action=raw&ctype=text/css" >

<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/jqjs?

<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/btsjs?

<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/onepagejs?

<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/snapsvg?

<script>

      if($('.firstHeading'))$('.firstHeading').remove();

<style>

#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/

 

#globalWrapper, #content { /*-- changes default wiki settings --*/

width: 100%;  

height: 100%;

border: 0px;

background-color: transparent;

margin: 0px;

padding: 0px;

}

/* disable IGEM's style */

/*

#bodyContent{

width: 100%;

height: 100%;

}*/

/*

 

</style>

<nav id="globalheader" class="globalheader" role="navigation" aria-label="Global Navigation">

                                <img src="https://static.igem.org/mediawiki/2015/e/eb/Logo_white_small.png" alt="35x35" class="img-rounded" style="width: 35px;height: 35px;">

<li class="gh-tab"><a href="#" class="gh-tab-link">Design</a></li>

<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Description" class="gh-tab-link">Description</a></li>

<li class="gh-tab"><a href="#" class="gh-tab-link">Documents</a></li>

<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Practices" class="gh-tab-link">Human Practices</a></li>

<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Collaborations" class="gh-tab-link">Collaborations</a></li>

<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Team" class="gh-tab-link">Team</a></li>

<li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Attributions" class="gh-tab-link">Attributors</a></li>

             </ul> <!-- ul.gh-nav-list -->

         </div> <!-- div#gh-content -->

     </nav> <!-- nav#globalheader -->

<div class="container main">

<section class="intro brief">

<figure class="title-logo"></figure>  

<div class="title">BioDesigner</div>

<div class="slogn">All you want, right here</div>

<div class="presentation box inline-box">

<div class="left-trigger"><button id="left"></button></div>

<div class="big-img">

<figure class="project">

</figure>

</div>

<div class="right-trigger"><button id="right"></button></div>

</div>

</section>

<section class="intro desc">

<div class="desc jumbotron">

<div class="desc-title">What is BioDesigner</div>

<p class="desc-words">BioDesigner is a smart assistant tool for Synthetic Biology design. Helping Synthetic Biologist make more creative products is BioDesigner's final purpose. With this idea, BioDesigner presents all valuable informations to the user. Also by improving the BioBrick searching process and providing practical BioBrick during the design process, BioDesigner leads Synthetic Biology design to a new level. </p>

</div>

<div class="img-logo">

<svg id="test" width="100%" height="100%" viewBox="0 0 200 200"></svg>

</div>

</section>

<section class="intro search">

<div class="search-anim">

<svg id="search" width="100%" height="100%" viewBox="0 0 500 500">

</svg>

</div>

<div class="func-desc jumbotron">

<div class="func-title">Search</div>

<div class="func-subtitle">Search BioBricks, but more than BioBricks</div>

<p class="func-words">Searching for a part is the most fundamental step in Synthetic Biolody. With BioDesigner's powerful search tool, you can search parts by typing what you what, and the costum-built result will be presented to you. But what BioDesigner can do is more than that. Lots of valuable information will also be presented to the user, like some basic information, and most important one, is a parts' related papers. By collecting lots of information together, user can get more than BioBricks.</p>

</div>

</section>

<section class="intro recommend">

<div class="recommend-anim">

<svg id="recommend" width="100%" height="100%" viewBox="0 0 500 500">

</svg>

</div>

<div class="func-desc jumbotron">

<div class="func-title">Recommendation</div>

<div class="func-subtitle">Select in selection, not Search in ocean</div>

<p class="func-words">The decision of a part is always a pain point to every Synthetic Biology researcher. BioDesigner is the assistant which can help users make that decision. By analyzing users' design with lots of datas, BioDesigner can provide useful parts as a recommendation to the user. Also, by lots of data analyze of part's function, the recommendation will adjust to your design. BioDesigner can also show you relations between different proteins and genes. With lots of hard working, by providing all those valuable informations, the decision of part won't be that hard.</p>

</div>

</section>

<section class="intro simulation">

<div class="simu-anim">

<svg id="simulation" width="100%" height="100%" viewBox="0 0 500 500">

</svg>

</div>

<div class="func-desc jumbotron">

<div class="func-title">Simulation</div>

<div class="func-subtitle">Tell how it works, before you do your works</div>

<p class="func-words">Traditionally, the test of a Synthetic Biology design is by doing lots of experiments, which can be a extremely time-consuming process. By using SSA algorithm, BioDesigner can show a glance of how the design will performed to the user. With BioDesigner's interactive simulator, user can check amount of a certain compound at any time, or during any time period.</p>

</div>

</section>

</div><!-- div.container-fluid -->

<script type="text/javascript">

window.image_index = 0;

window.total_image = 3;

</script>

<script type="text/javascript">

$(document).ready(function(){

$('.main').onepage_scroll({

sectionContainer: "section",

easing: "ease",

animationTime: 1000,

pagination: true,

afterMove: function(index) {

drawContent(index);

},

loop: false,

keyboard: true,

direction: "vertical"

})

});

</script>

<script type="text/javascript">

$(document).on({

click:function(){

window.image_index -= 1;

if (window.image_index < 0){

window.image_index = window.total_image - 1;

}

var image_width = $('figure.project').width();

var new_width = image_width * window.image_index;

var pos_str = '-' + new_width + 'px 0px';

console.log(pos_str);

$('figure.project').css('background-position', pos_str);

}

},'button#left');

</script>

<script type="text/javascript">

$(document).on({

click:function(){

window.image_index += 1;

if (window.image_index >= window.total_image){

window.image_index = 0;

}

var image_width = $('figure.project').width();

var new_width = image_width * window.image_index;

var pos_str = '-' + new_width + 'px 0px';

console.log(pos_str);

$('figure.project').css('background-position', pos_str);

}

},'button#right');

</script>

<script type="text/javascript">

function drawContent(index){

if (index == 1){

}else if(index ==2){

drawLogo();

}else if(index == 3){

animate_search();

}else if(index == 4){

animate_recommendation();

}else if (index == 5){

animate_simulate();

}

}

</script>

<script type="text/javascript">

function drawSearch(){

    fill: "none",

    stroke: "#000",

    strokeMiterLimit: "10",

    strokeDasharray: "9 9",

    strokeDashOffset: "988.01"

});

path1.attr({

stroke: '#000',

    "stroke-dasharray": len1 + " " + len1,

  path1.animate({fill:'#000'}, 1000);

<script type="text/javascript">

var first_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', 250, 500, 99, 174);

var second_image = ss.image('https://static.igem.org/mediawiki/2015/2/20/Blue_biobrick.png', -130, 184, 99, 174);

<script type="text/javascript">

name_image.animate({'opacity':1, x:230, y:150, width:65, height:65},1000);

<script type="text/javascript">

var linex = ss.path('M395.667,349.333L416.501,357.666L395.5,366.625L395.5,359.5L73,359.5').attr({

stroke:'#FFFFFF',

strokeDasharray: "9 9",

stroke:'#FFFFFF',

strokeDasharray: "9 9",

    strokeDashOffset: "988.01"

'stroke-miterlimit':10,

strokeDasharray: "9 9",

'stroke-miterlimit':10,

strokeDasharray: "9 9",

    strokeDashOffset: "988.01"

});

linex.attr({

stroke: '#fff',

strokeWidth: 5,

    // Draw Path

    "stroke-dasharray": lenx + " " + lenx,

    "stroke-dashoffset": lenx

}).animate({"stroke-dashoffset": 10}, 2000,mina.easeout, function(){

liney.attr({

stroke: '#fff',

strokeWidth: 5,

    // Draw Path

    "stroke-dasharray": leny + " " + leny,

    "stroke-dashoffset": leny

}).animate({"stroke-dashoffset": 10}, 2000,mina.easeout, function(){

}).animate({"stroke-dashoffset" : 10}, 2000, mina.easeout, function(){

line2.attr({

stroke: '#2FCE71',

strokeWidth: 7,

    // Draw Path

    "stroke-dasharray": len2 + " " + len2,

    "stroke-dashoffset": len2

}).animate({"stroke-dashoffset" : 10}, 2000, mina.easeout)

});

});

}

</script>