Team:BNU-China
From 2014.igem.org
(Difference between revisions)
(56 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | {{Team:BNU-China/CSS/ | + | {{Team:BNU-China/CSS/bootstrap.min.css}} |
- | {{Team:BNU-China/CSS/ | + | {{Team:BNU-China/CSS/main_new.css}} |
- | + | ||
<html> | <html> | ||
- | + | <head> | |
- | < | + | <meta name="description" content="BNU-China, 2014,igem"> |
- | < | + | <meta name="keywords" content="BNU,BNU-China,igem,ModA,chemotaxis,peanut"> |
- | < | + | <meta name="author" content="刘兵LiuBing"> |
- | + | <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" /> | |
- | + | <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":5000 | |
- | + | } | |
- | + | ); | |
- | + | ||
- | + | $('.carousel').on('slide.bs.carousel', function (event) { | |
- | + | var tag = $(event.relatedTarget).attr("tag"); | |
- | + | var progress = $(event.relatedTarget).attr("progress"); | |
- | + | $('#img_home').attr("src", "https://static.igem.org/mediawiki/2014/9/92/Bnu_home.png"); | |
- | + | $('#img_intro').attr("src", "https://static.igem.org/mediawiki/2014/6/6a/Bnu_intro.png"); | |
- | + | $('#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"); | |
- | + | //$('#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> | ||
+ | <!--[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> | ||
+ | <body> | ||
+ | <!--<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? <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 <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 <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 <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> | </div> | ||
+ | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> | ||
- |
Latest revision as of 16:57, 17 October 2014