Team:BNU-China

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
    <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" type="image/x-icon" />
 +
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png"sizes="32x32" />
 +
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" sizes="64x64" />
 +
    <link rel="icon" href="https://static.igem.org/mediawiki/2014/6/6a/Bnu_bktn2.png" sizes="128x128" />
 +
    <link href="css/bootstrap.min.css" rel="stylesheet">
 +
<link href="css/main_new.css" rel="stylesheet">
 +
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery-1.10.2.min.js?action=raw"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/bootstrap.min.js?action=raw"></script>
 +
<script>
 +
//var loginFlag = false;
 +
//var loginHelper = null;
 +
$(document).ready(function(){
 +
$('.carousel').carousel(
 +
{
 +
"pause":"false",
 +
"interval":20000
 +
}
 +
);
 +
 +
$('.carousel').on('slide.bs.carousel', function (event) {
 +
var tag = $(event.relatedTarget).attr("tag");
 +
var progress = $(event.relatedTarget).attr("progress");
 +
 +
$('#img_home').attr("src", "images/home.png");//��������ʾΪȦ
 +
$('#img_intro').attr("src", "images/intro.png");
 +
$('#img_gift').attr("src", "images/gift.png");
 +
$('#img_feedback').attr("src", "images/feedback.png");
 +
$('#img_related').attr("src", "images/related.png");
 +
 +
$('#img_' + tag).attr("src", "images/" + tag + "_selected.png");
 +
 +
//$("#progress").width(progress + "px");
 +
//$("#progress").css('left', (progress / 2) - 400 + "px");
 +
$("#progress").animate({width: progress, left: (progress / 2) - 400}, 500);
 +
playAnimation(tag);
 +
});
 +
 +
$("body,html").animate({
 +
              scrollTop:($("#page_home .splash-container").offset().top)
 +
            },10);
 +
 +
playAnimation("home");
 +
 +
});
 +
 +
function switchPage(pageIndex){
 +
$('.carousel').carousel(pageIndex);
 +
}
 +
 +
function playAnimation(tag){
 +
var ani1 = $("#page_" + tag + " .ani_step_1");
 +
var ani2 = $("#page_" + tag + " .ani_step_2");
 +
var ani3 = $("#page_" + tag + " .ani_step_3");
 +
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>
<style>
<style>
/*clean the default css*/
/*clean the default css*/
Line 56: Line 131:
</head>
</head>
<body>
<body>
-
<p align="center">Debugging</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="images/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" target="_blank" id="splash_download_button" class="download-button">
 +
                                    <div class="download-title">
 +
                                    <img class="qrcode" src="./images/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="images/intro_splash.jpg" alt="E.coli Prometheus feels so bad when he saw the Bad growth of peanuts" width="70%"/>
 +
</div>
 +
                   
 +
                    <a href="#" target="_blank" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
What happened to the peanut?&nbsp;&nbsp;<img src="images/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="images/gift_splash.gif" alt="E.coli Prometheus transformed by BNU-iGEM" width="70%"/>
 +
</div>                   
 +
<a href="#" target="_blank" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
How we did this&nbsp;&nbsp;<img src="images/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="images/delivery.gif" alt="deliver the Mo to peanut" width="70%"/>
 +
</div>
 +
<a href="#" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
The delivery system&nbsp;&nbsp;<img src="images/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="images/safety.gif" alt="E.coli Prometheus died for safety after deliver Mo to peanut" width="70%"/>
 +
</div>
 +
                    <a href="#" id="splash_download_button" class="download-button ani_step_1">
 +
<div class="download-title">
 +
The Safety system&nbsp;&nbsp;<img src="images/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="images/home_selected.png" alt="0">
 +
<div>Prometheus</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(1)">
 +
<img id="img_intro" src="images/intro.png" alt="1">
 +
<div>Peanut</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(2)">
 +
<img id="img_gift" src="images/gift.png" alt="2">
 +
<div>Armed</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(3)">
 +
<img id="img_feedback" src="images/feedback.png" alt="3">
 +
<div>Delivery</div>
 +
</a>
 +
</div>
 +
<div class="navbtn">
 +
<a href="javascript:switchPage(4)">
 +
<img id="img_related" src="images/related.png" alt="4">
 +
<div>Safety</div>
 +
</a>
 +
</div>
 +
</div>
 +
    </div>
 +
</div>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 03:35, 28 September 2014

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