Team:Hong Kong-CUHK
From 2014.igem.org
(Difference between revisions)
(Prototype team page) |
m |
||
(11 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
<html> | <html> | ||
- | < | + | <head> |
- | < | + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
- | + | <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet"> | |
- | + | <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/common.css?action=raw&ctype=text/css" rel="stylesheet"> | |
- | + | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/bootstrap.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/common.js?action=raw&ctype=text/javascript"></script> | |
- | + | </head> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | <style type="text/css"> |
- | </ | + | .navbar-default { |
+ | background-color: #40AECC; | ||
+ | border-color: #FFFFFF; | ||
+ | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4); | ||
+ | } | ||
+ | .navbar-default .navbar-brand { | ||
+ | color: #FFF; | ||
+ | border-right: 1px solid rgba(255, 255, 255, 0.1); | ||
+ | } | ||
+ | .navbar>.container .navbar-brand, | ||
+ | .navbar>.container-fluid .navbar-brand { | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | .navbar-default .navbar-nav>li>a { | ||
+ | color: #FFF; | ||
+ | border-right: 1px solid rgba(255, 255, 255, 0.1); | ||
+ | } | ||
+ | .dropdown-menu .sub-menu { | ||
+ | left: 100%; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | visibility: hidden; | ||
+ | margin-top: -1px; | ||
+ | } | ||
+ | .dropdown-menu li:hover .sub-menu { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | .dropdown:hover .dropdown-menu { | ||
+ | display: block; | ||
+ | } | ||
+ | #board { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/3/3a/Railbg.png'); | ||
+ | background-size: 100% 100%; | ||
+ | width: 1000px; | ||
+ | height: 550px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .chess { | ||
+ | background-size: 100% 100%; | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | position: absolute; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .profile-pic { | ||
+ | background-size: 100% 100%; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .member-wrapper:hover > .profile-dialog { | ||
+ | display: block; | ||
+ | background: rgba(255, 255, 255, 1); | ||
+ | padding: 12px; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | .profile-dialog { | ||
+ | position: absolute; | ||
+ | box-shadow: 1px 1px 10px 0 #ccc; | ||
+ | background: rgba(255, 255, 255, 0.7); | ||
+ | padding: 8px; | ||
+ | font-size: 20px; | ||
+ | display: block; | ||
+ | } | ||
+ | #train { | ||
+ | width: 620px; | ||
+ | height: 430px; | ||
+ | position: absolute; | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/6/69/Train-index.png'); | ||
+ | } | ||
+ | body { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/5/53/Trainstationbg.jpg'); | ||
+ | } | ||
+ | #footer-box { | ||
+ | opacity: 0.3; | ||
+ | filter: alpha(opacity=30); | ||
+ | /* For IE8 and earlier */ | ||
+ | |||
+ | bottom: -580px; | ||
+ | } | ||
+ | #footer-box:hover { | ||
+ | opacity: 1; | ||
+ | filter: alpha(opacity=100); | ||
+ | /* For IE8 and earlier */ | ||
+ | } | ||
+ | </style> | ||
+ | <nav class="navbar navbar-default navbar-static-top" role="navigation"> | ||
+ | <div class="container"> | ||
+ | <div class="navbar-header"> | ||
+ | <a href="https://2014.igem.org/Main_Page"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" height="50px"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="navbar-header"> | ||
+ | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> | ||
+ | <span class="sr-only">Toggle navigation</span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="https://2014.igem.org/Team:Hong_Kong-CUHK">CUHK iGEM 2014</a> | ||
+ | </div> | ||
+ | <div class="navbar-collapse collapse"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="dropdown"> | ||
+ | <a href="team" class="dropdown-toggle" data-toggle="dropdown">Team</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://igem.org/Team.cgi?id=1314">Official Team Page</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-team">Our Team</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-team">Instructor and advisor</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="project" class="dropdown-toggle" data-toggle="dropdown">Project</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-project">Start your A.V. adventure here!</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Biobrick</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-biobricks#T7expression">Nitrogen-repressible T7 expression system</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-biobricks#sclcd">ScLCD- Saccharomyces cerevisiae Liquid Chip Display</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-modelling" class="dropdown-toggle" data-toggle="dropdown">Modelling</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-modelling">Nitrogen-repressible T7 expression system</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="human-practice" class="dropdown-toggle" data-toggle="dropdown">Human Practice</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-human-practice">What have we done</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/collaboration.html">Collaboration</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="safety" class="dropdown-toggle" data-toggle="dropdown">Safety</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-safety">Training</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-safety#group-local-rules">Local Rules and Regulations</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-safety#group-organisms-and-parts-used">Organisms and Parts</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-safety#group-risks-now">Risk</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-documentation">Protocol</a> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-documentation#notebook">Notebook</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Acknowledgement</a> | ||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-acknowledgement">Sponsor and Thank you</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!--/.nav-collapse --> | ||
+ | </div> | ||
+ | </nav> | ||
- | |||
- | |||
+ | <body> | ||
+ | <!-- | ||
+ | <div class="video" style="height: 100vh;"> | ||
+ | <div id="bgVideo" class="background"> | ||
+ | <video id="video_background" preload="auto" autoplay="autoplay" loop="loop" style="top: -230px; left: 0px; bottom: 0px; right: 0px; z-index: -100; width: 1347px; height: 757.886524822695px;"> | ||
+ | <source src="background.mp4" type="video/mp4"> | ||
+ | <source src="background.ogg" type="video/ogg"> | ||
+ | <source src="background.webm" type="video/webm">bgvideo</video> | ||
+ | </div> | ||
+ | </div>--> | ||
+ | <div class="row"> | ||
+ | <div id="board" class="center-block"> | ||
+ | <div id="train"></div> | ||
+ | </div> | ||
+ | <div id="top-bar"></div> | ||
+ | </div> | ||
+ | </body> | ||
- | < | + | <script type="text/javascript"> |
- | + | var content = { | |
+ | menuItems: [{ | ||
+ | info: { | ||
+ | about: "Project", | ||
+ | background: "https://static.igem.org/mediawiki/2014/b/bc/Cuhkproject.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/4/44/Cuhkproject-hover.png", | ||
+ | link: "project" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 100, | ||
+ | left: 550 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: -20, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Team", | ||
+ | background: "https://static.igem.org/mediawiki/2014/e/e2/CuhkTeam.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/6/63/CuhkTeam-hover.png", | ||
+ | link: "team" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 10, | ||
+ | left: 350 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Biobricks", | ||
+ | background: "https://static.igem.org/mediawiki/2014/thumb/7/70/Cuhk-Biobricks.png/599px-Cuhk-Biobricks.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/c/cb/CuhkBiobricks-hover.png", | ||
+ | link: "biobricks" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 350, | ||
+ | left: 180 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Modelling", | ||
+ | background: "https://static.igem.org/mediawiki/2014/7/74/CuhkModelling.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/3/36/CuhkModelling-hover.png", | ||
+ | link: "modelling" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 180, | ||
+ | left: 300 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 50, | ||
+ | left: 140 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Documentation", | ||
+ | background: "https://static.igem.org/mediawiki/2014/thumb/0/03/CuhkDocumentation.png/600px-CuhkDocumentation.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/a/a7/CuhkDocumentation-hover.png", | ||
+ | link: "documentation" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 400, | ||
+ | left: 400 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 50, | ||
+ | left: 120 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Human Practice", | ||
+ | background: "https://static.igem.org/mediawiki/2014/thumb/8/85/CuhkHuman-practice.png/600px-CuhkHuman-practice.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/b/bc/CuhkHuman-practice-hover.png", | ||
+ | link: "human-practice" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 130, | ||
+ | left: 800 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: -60, | ||
+ | left: 50 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Safety", | ||
+ | background: "https://static.igem.org/mediawiki/2014/c/c6/Cuhksafety.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/a/a8/Cuhksafety-hover.png", | ||
+ | link: "safety" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 240, | ||
+ | left: 630 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 50, | ||
+ | left: 120 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Acknowledgement", | ||
+ | background: "https://static.igem.org/mediawiki/2014/thumb/0/0a/Cuhk-Acknowledgement.png/600px-Cuhk-Acknowledgement.png", | ||
+ | backgroundHover: "https://static.igem.org/mediawiki/2014/b/b0/Cuhk-Acknowledgement-hover.png", | ||
+ | link: "acknowledgement" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 425, | ||
+ | left: 700 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 50, | ||
+ | left: 140 | ||
+ | } | ||
+ | } | ||
+ | }] | ||
+ | }; | ||
- | + | $(document).ready(function() { | |
- | + | ||
- | + | ||
- | + | ||
- | + | $.each(content.menuItems, function(index, value) { | |
- | + | var wrapper = $('<div></div>') | |
- | + | .addClass('member-wrapper') | |
- | + | .css('position', 'relative') | |
- | + | .offset(value.offset); | |
- | + | ||
- | + | ||
- | < | + | var dialog = $('<div></div>') |
- | + | .addClass('profile-dialog') | |
+ | .css('font-size', '18') | ||
+ | //.css('background', value.dialog.background) | ||
+ | .text(value.info.about) | ||
+ | .offset(value.dialog.offset); | ||
- | < | + | var chess = $('<div></div>') |
- | + | .addClass('chess') | |
+ | .data("index", index) | ||
+ | .css('background', "0px 0px/100% 100% url('" + value.info.background + "')") | ||
+ | .hover(function() { | ||
+ | $(this).css('background', "0px 0px/100% 100% url('" + value.info.backgroundHover + "')"); | ||
+ | }, function() { | ||
+ | $(this).css('background', "0px 0px/100% 100% url('" + value.info.background + "')"); | ||
+ | }) | ||
+ | .click(function() { | ||
+ | location.href = 'https://2014.igem.org/Team:Hong_Kong-CUHK/home.html?page=link-' + value['info']['link']; | ||
+ | }); | ||
- | + | wrapper.append(chess); | |
+ | wrapper.append(dialog); | ||
+ | $("#board").append(wrapper); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
- | + | </html> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Latest revision as of 18:27, 4 January 2015