Team:BNU-China

From 2014.igem.org

(Difference between revisions)
 
(41 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:BNU-China/CSS/bootstrap.min.css}}
 +
{{Team:BNU-China/CSS/main_new.css}}
<html>
<html>
<head>
<head>
-
<style>
+
    <meta name="description" content="BNU-China, 2014,igem">
-
/*clean the default css*/
+
    <meta name="keywords" content="BNU,BNU-China,igem,ModA,chemotaxis,peanut">
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear, .center {display: none;} /*-- hides default wiki settings --*/
+
    <meta name="author" content="刘兵LiuBing">
-
#top-section {
+
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
border: 0 none;
+
    <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" type="image/x-icon" />
-
height: 14px;
+
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png"sizes="32x32" />
-
z-index: 100;
+
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" sizes="64x64" />
-
top: 0;
+
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" sizes="128x128" />
-
position: fixed;
+
    <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery-1.10.2.min.js?action=raw"></script>
-
width: 975px;  
+
    <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/bootstrap.min.js?action=raw"></script>
-
left: 50%;  
+
    <script>
-
margin-left: -487px;
+
//var loginFlag = false;
-
}
+
//var loginHelper = null;
-
 
+
$(document).ready(function(){
-
#globalWrapper, #content {
+
$('.carousel').carousel(
-
width: 100%;  
+
{
-
height: 100%;
+
"pause":"false",
-
border: 0px;
+
"interval":5000
-
background-color: transparent;
+
}
-
margin: 0px;
+
        );
-
padding: 0px;
+
-
}
+
$('.carousel').on('slide.bs.carousel', function (event) {
-
 
+
var tag = $(event.relatedTarget).attr("tag");
-
html, body, .wrapper {  
+
var progress = $(event.relatedTarget).attr("progress");
-
width: 100%;
+
$('#img_home').attr("src", "https://static.igem.org/mediawiki/2014/9/92/Bnu_home.png");
-
height: 100%;  
+
$('#img_intro').attr("src", "https://static.igem.org/mediawiki/2014/6/6a/Bnu_intro.png");
-
background-color: transparent;
+
$('#img_gift').attr("src", "https://static.igem.org/mediawiki/2014/e/e7/Bnu_gift.png");
-
}
+
$('#img_feedback').attr("src", "https://static.igem.org/mediawiki/2014/f/fb/Bnu_feedback.png");
-
 
+
$('#img_related').attr("src", "https://static.igem.org/mediawiki/2014/7/76/Bnu_related.png");
-
#menubar ul{
+
//$('#img_' + tag).attr("src", "images/" + tag + "_selected.png");
-
        visibility: hidden;}
+
-
#menubar:hover ul{
+
//$("#progress").width(progress + "px");
-
        visibility: visible;
+
//$("#progress").css('left', (progress / 2) - 400 + "px");
-
}
+
$("#progress").animate({width: progress, left: (progress / 2) - 400}, 500);
-
 
+
playAnimation(tag);
-
 
+
});
-
/*low_version*/
+
$("body,html").animate({
-
.low_version{
+
              scrollTop:($("#page_home .splash-container").offset().top)
-
z-index:-1;
+
            },10);
-
        animation:show 30s;
+
-
        -moz-animation:show 30s; /* Firefox */
+
playAnimation("home");
-
        -webkit-animation:show 30s; /* Safari and Chrome */
+
-
        -o-animation:show 30s; /* Opera */
+
});
-
}
+
-
@keyframes show
+
function switchPage(pageIndex){
-
{
+
$('.carousel').carousel(pageIndex);
-
from {color:black;}
+
}
-
to {color:#F00;}
+
-
}
+
function playAnimation(tag){
-
.low_version p{
+
var ani1 = $("#page_" + tag + " .ani_step_1");
-
font-size:15px;
+
var ani2 = $("#page_" + tag + " .ani_step_2");
-
}
+
var ani3 = $("#page_" + tag + " .ani_step_3");
-
</style>
+
var pre_start = ((tag == "home") ? 0 : 300);
 +
if(ani1 != null){
 +
ani1.css("opacity", 0);
 +
setTimeout(function(){
 +
ani1.animate({opacity: 1}, 1000);
 +
}, 10 + pre_start);
 +
}
 +
if(ani2 != null){
 +
ani2.css("opacity", 0);
 +
setTimeout(function(){
 +
ani2.animate({opacity: 1}, 1000);
 +
}, 1500 + pre_start);
 +
}
 +
if(ani3 != null){
 +
ani3.css("opacity", 0);
 +
setTimeout(function(){
 +
$("#page_" + tag + " .ani_step_3").animate({opacity: 1}, 1000);
 +
}, 3000 + pre_start);
 +
}
 +
}
 +
</script>
 +
<!--[if ls IE 7]>
 +
<h2>Please make sure that JavaScript has to be activated for the page to display properly or you should update/change your browser.</h2>
 +
<![endif]-->
</head>
</head>
<body>
<body>
-
Debugging
+
<!--<p align="center" style="color: blue;">Coming soon ...</p>-->
 +
<div id="carousel_container" class="carousel slide full_height">
 +
<div class="carousel-inner full_height">
 +
<div id="page_home" class="page item active" tag="home" progress="150">
 +
<div id="main">
 +
<div id="splash">
 +
<div class="container splash-container">
 +
<img src="https://static.igem.org/mediawiki/2014/7/70/Bnu_title.png" alt="E.coli Prometheus" class="ani_step_1"/>
 +
<div id="download_btn_group" class="container ani_step_1">
 +
<div id="download_place_holder" class="horizental-item" ></div>
 +
<div class="horizental-item">
 +
<a href="https://2014.igem.org/Team:BNU-China/home.html" id="splash_download_button" class="download-button">
 +
                                    <div class="download-title">
 +
                                    <img class="qrcode" src="https://static.igem.org/mediawiki/2014/1/18/Bnu_qrcode.png" alt="E.coli Prometheus" width="180px" height="180px"><br>
 +
<span>Skip the Navigation</span>
 +
</div>
 +
<div class="download-subtitle">
 +
I'll take you to Wiki Main Page Directly!
 +
</div>
 +
</a>
 +
</div>
 +
                           
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="page_intro" class="page item" tag="intro" progress="300">
 +
<div id="main">
 +
<div id="splash" class="ani_step_1">
 +
<div class="container splash-container">
 +
<img src="https://static.igem.org/mediawiki/2014/a/a1/Bnu_intro_splash.jpg" alt="E.coli Prometheus feels so bad when he saw the Bad growth of peanuts" width="70%"/>
 +
</div>
 +
                   
 +
                    <a href="https://2014.igem.org/Team:BNU-China/pp_overview.html" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
What happened to the peanut?&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2014/9/94/Bnu_arrow_feedback.png" alt="To check out what happened to peanuts">
 +
</div>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="page_gift" class="page item" tag="gift" progress="450">
 +
<div id="main">
 +
<div id="splash">
 +
<div class="container splash-container ani_step_1">
 +
<img src="https://static.igem.org/mediawiki/2014/d/d6/Bnu_gift_splash.gif" alt="E.coli Prometheus transformed by BNU-iGEM" width="70%"/>
 +
</div>                   
 +
<a href="https://2014.igem.org/Team:BNU-China/overview.html" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
How we did this&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2014/8/87/Bnu_arrow_gift.png" alt="To check out hao we transform the e.coli">
 +
</div>
 +
</a>                   
 +
</div>
 +
</div>
 +
</div>
 +
<div id="page_feedback" class="page item" tag="feedback" progress="600">
 +
<div id="main">
 +
<div id="splash">
 +
<div class="container splash-container ani_step_1">
 +
<img src="https://static.igem.org/mediawiki/2014/a/a8/Bnu_delivery.gif" alt="deliver the Mo to peanut" width="70%"/>
 +
</div>
 +
<a href="https://2014.igem.org/Team:BNU-China/Chemotaxis.html" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
The delivery system&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2014/9/94/Bnu_arrow_feedback.png" alt="To check out how the delivery system works">
 +
</div>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="page_related" class="page item" tag="related" progress="750">
 +
<div id="main">
 +
<div id="splash">
 +
<div class="container splash-container">
 +
<img src="https://static.igem.org/mediawiki/2014/0/05/Bnu_safety.gif" alt="E.coli Prometheus died for safety after deliver Mo to peanut" width="70%"/>
 +
</div>
 +
                    <a href="https://2014.igem.org/Team:BNU-China/safety-overview" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
The Safety system&nbsp;&nbsp;<img src="https://static.igem.org/mediawiki/2014/9/94/Bnu_arrow_feedback.png" alt="To check out how the safety system works">
 +
</div>
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="footer" >
 +
    <div id="navbar">
 +
<div id="dash" ></div>
 +
<div id="progress"></div>
 +
<div id="navbtns" class="container" >
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(0)">
 +
<img id="img_home" src="https://static.igem.org/mediawiki/2014/1/1c/Bnu_home_selected.png" alt="0">
 +
<div>Prometheus</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(1)">
 +
<img id="img_intro" src="https://static.igem.org/mediawiki/2014/6/6a/Bnu_intro.png" alt="1">
 +
<div>Peanut</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(2)">
 +
<img id="img_gift" src="https://static.igem.org/mediawiki/2014/e/e7/Bnu_gift.png" alt="2">
 +
<div>Armed</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(3)">
 +
<img id="img_feedback" src="https://static.igem.org/mediawiki/2014/f/fb/Bnu_feedback.png" alt="3">
 +
<div>Delivery</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(4)">
 +
<img id="img_related" src="https://static.igem.org/mediawiki/2014/7/76/Bnu_related.png" alt="4">
 +
<div>Safety</div>
 +
</a>
 +
</div>
 +
</div>
 +
    </div>
 +
</div>
 +
 
</body>
</body>
</html>
</html>

Latest revision as of 16:57, 17 October 2014

Retrieved from "http://2014.igem.org/Team:BNU-China"