Line 1: | Line 1: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
+ | <!DOCTYPE html> | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <meta http-equiv="Pragma" content="no-cache"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | ||
− | < | + | <style>html { |
+ | overflow: hidden; | ||
+ | } | ||
− | + | a { | |
− | + | color: inherit !important; | |
+ | } | ||
− | + | a:hover { | |
+ | color: inherit !important; | ||
+ | } | ||
− | + | .main.view { | |
+ | position: fixed; | ||
+ | top: 0; left: 0; | ||
+ | width: 100%; height: 100%; | ||
− | + | font-size: 1rem; | |
− | + | ||
− | + | ||
+ | font-family: Brandon; | ||
+ | background: rgba(24, 24, 24, 1); | ||
− | + | -webkit-perspective: 1000px; | |
− | + | perspective: 1000px; | |
+ | } | ||
− | + | .main.menu { | |
− | + | position: fixed; | |
+ | background: none; | ||
− | + | left: 0; top: 0; | |
− | + | height: 100%; | |
− | + | width: 10em; | |
− | + | ||
− | + | ||
− | + | opacity: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | text-align: center; | |
− | + | ||
− | + | ||
+ | user-select: none; | ||
+ | -moz-user-select: none; | ||
− | + | transition: opacity 0.3s; | |
− | + | } | |
− | + | .main.menu .items { | |
− | + | margin-top: 6rem; | |
+ | } | ||
− | + | .main.menu .logo { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | width: 7em; | |
− | + | height: 7em; | |
− | + | line-height: 7em; | |
− | + | text-align: center; | |
− | + | margin-bottom: 2rem; | |
− | + | ||
− | + | border-radius: 50%; | |
− | + | ||
− | + | ||
− | + | background: white; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .main.menu .logo i { | |
− | + | line-height: 2em; | |
− | + | font-size: 3.5em; | |
− | + | } | |
− | + | ||
+ | .main.menu .item { | ||
+ | display: inline-block; | ||
− | + | width: auto; | |
+ | padding: 0 0.5rem; | ||
− | + | font-weight: bold; | |
+ | font-size: 1em; | ||
+ | color: rgba(240, 240, 240, 1); | ||
+ | margin-top: 2em; | ||
+ | -webkit-user-select: none; | ||
+ | user-select: none; | ||
+ | cursor: pointer; | ||
+ | border-left: 3px solid transparent; | ||
+ | border-right: 3px solid transparent; | ||
− | + | transition: border 0.2s; | |
+ | } | ||
+ | .main.menu .item a:visited { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .main.menu .item.selected, | ||
+ | .main.menu .item:hover { | ||
+ | border-left-color: #2980B9; | ||
+ | } | ||
− | + | .main.menu .sub-items { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | margin-top: 0.3rem; | ||
− | + | height: 0; | |
− | + | overflow: hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | transition: height 0.3s; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .main.menu .item:hover .sub-items { | ||
+ | height: auto; | ||
+ | } | ||
− | + | .main.menu .sub-item { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | margin-top: 0.7rem; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | font-weight: bold; | ||
+ | font-size: 0.9rem; | ||
− | . | + | padding: 0 0.5rem; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | color: rgba(240, 240, 240, 1); | |
− | + | ||
− | + | ||
+ | border-right: 3px solid transparent; | ||
+ | border-left: 3px solid transparent; | ||
− | . | + | transition: border 0.2s; |
− | + | } | |
− | + | ||
− | + | ||
− | + | .main.menu .sub-item:hover { | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .main.view.open-menu .main.menu { | |
− | + | opacity: 1; | |
− | + | transition: opacity 0.3s 0.3s; | |
− | + | } | |
− | + | ||
+ | .main.cont-wrap { | ||
+ | position: absolute; | ||
+ | top: 0; left: 0; | ||
+ | width: 100%; height: 100%; | ||
+ | background: rgba(253, 253, 253, 1); | ||
− | + | overflow: auto; | |
− | + | box-shadow: 0 0 20px rgba(0, 0, 0, 1); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .main.view.open-menu .main.cont-wrap { | |
− | + | overflow: hidden; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .main.view.open-menu .main.cont-wrap { | |
+ | left: 18em; | ||
+ | } | ||
− | + | .main.top-btn-set { | |
− | + | position: fixed; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | z-index: 10; | ||
− | + | left: 0.2rem; | |
+ | top: 1.2rem; | ||
− | + | font-size: 1.5rem; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | color: black; | ||
− | + | opacity: 0.8; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | user-select: none; | ||
+ | -moz-user-select: none; | ||
− | + | transition: opacity 0.2s; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .main.top-btn-set .btn { | |
− | + | display: inline-block; | |
− | + | margin-left: 1rem; | |
− | + | cursor: pointer; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | transition: opacity 0.2s; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .main.top-btn-set .show-on-menu.btn { | |
− | + | opacity: 0; | |
− | + | pointer-events: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | /* menu open! */ | |
− | + | .main.open-menu .main.top-btn-set { | |
− | + | color: white; | |
− | + | opacity: 1; | |
− | + | } | |
− | + | ||
− | + | .main.open-menu .main.top-btn-set .show-on-menu.btn { | |
− | + | opacity: 1; | |
− | + | pointer-events: auto; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .main.open-menu .menu-btn .fa:before { | |
− | + | content: "\f00d"; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* | |
− | + | .csstransforms3d .main.view.open-menu .main.cont-wrap { | |
− | + | -webkit-transform: translate3d(10em, 0, -200px); | |
− | + | transform: translate3d(10em, 0, -200px); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | */ | ||
+ | </style> | ||
+ | <style>.fullscr { | ||
+ | height: 100vh; | ||
+ | width: 100%; | ||
+ | } | ||
− | + | .img { | |
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: 50% 50%; | ||
+ | } | ||
− | + | .center { | |
− | + | width: auto !important; | |
− | + | } | |
− | + | </style> | |
− | + | <style>@charset "UTF-8"; | |
− | / | + | @font-face { |
− | + | font-family: Brandon; | |
− | + | src: url("https://static.igem.org/mediawiki/2017/b/b8/T--HFLS_H2Z_Hangzhou--font_brandon_regular_woff.woff") format("woff"), | |
− | } | + | url("https://static.igem.org/mediawiki/2017/0/0e/T--HFLS_H2Z_Hangzhou--font_brandon_regular_ttf.ttf") format("truetype"), |
+ | url("https://static.igem.org/mediawiki/2017/f/ff/T--HFLS_H2Z_Hangzhou--font_brandon_regular_eot.eot") format("embedded-opentype"), | ||
+ | url("https://static.igem.org/mediawiki/2017/1/17/T--HFLS_H2Z_Hangzhou--font_brandon_regular_svg.svg") format("svg"), | ||
+ | url("fallback.ttf") format("truetype"); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | </style> | ||
+ | <style>@charset "UTF-8"; | ||
− | / | + | @font-face { |
− | + | font-family: Veneer; | |
− | + | src: url("https://static.igem.org/mediawiki/2017/d/d7/T--HFLS_H2Z_Hangzhou--font_veneer_regular_woff.woff") format("woff"), | |
− | + | url("https://static.igem.org/mediawiki/2017/f/f1/T--HFLS_H2Z_Hangzhou--font_veneer_regular_ttf.ttf") format("truetype"), | |
− | } | + | url("https://static.igem.org/mediawiki/2017/6/60/T--HFLS_H2Z_Hangzhou--font_veneer_regular_eot.eot") format("embedded-opentype"), |
+ | url("https://static.igem.org/mediawiki/2017/b/bd/T--HFLS_H2Z_Hangzhou--font_veneer_regular_svg.svg") format("svg"), | ||
+ | url("https://static.igem.org/mediawiki/2017/0/0e/T--HFLS_H2Z_Hangzhou--font_veneer_regular_otf.otf") format("opentype"), | ||
+ | url("fallback.ttf") format("truetype"); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | </style> | ||
− | + | <script src='/Template:HFLS_H2Z_Hangzhou/src/main/js?action=raw&ctype=text/javascript'></script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <!-- porbably need to change these to static files --> | ||
+ | <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"> | ||
+ | <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css"> | ||
+ | <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script> | ||
+ | </head> | ||
+ | <style> | ||
+ | #top_menu_14:hover { | ||
+ | top: 0 !important; | ||
+ | } | ||
+ | </style> | ||
+ | <script> | ||
+ | window.ADEBUG = true; | ||
− | / | + | $(document).ready(function () { |
+ | // alert(Modernizr.csstransforms3d); | ||
+ | // if (Modernizr.csstransforms3d) { | ||
+ | // } | ||
− | + | var glob = window; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | // remove some weird components | ||
+ | (function () { | ||
+ | $("#sideMenu").remove(); | ||
− | + | $("#top_menu_14").css({ | |
− | + | top: "-20px", | |
− | + | "padding-bottom": "1rem", | |
− | + | transition: "top 0.3s" | |
− | + | }); | |
+ | var menu_trig = $("<div></div>"); | ||
+ | menu_trig.css({ | ||
+ | position: "fixed", | ||
+ | "z-index": "10", | ||
+ | height: "15px", | ||
+ | width: "100%", | ||
+ | top: "0", | ||
+ | left: "0" | ||
+ | }).mouseenter(function () { | ||
+ | $("#top_menu_14").css("top", "0"); | ||
+ | }).mouseleave(function () { | ||
+ | $("#top_menu_14").css("top", "-20px"); | ||
+ | }); | ||
+ | |||
+ | $("body").append(menu_trig); | ||
+ | })(); // hide the top bar | ||
− | + | // menu | |
− | + | (function () { | |
− | + | function setMenuPos() { | |
− | + | setTimeout(function () { | |
+ | $(".main.menu").width($(".main.cont-wrap").position().left); | ||
+ | }, 300); | ||
+ | } | ||
− | + | var open = false; | |
− | + | ||
− | + | ||
− | + | ||
− | + | function toggleMenu() { | |
− | + | $(".main.view").toggleClass("open-menu"); | |
− | + | setMenuPos(); | |
− | + | ||
+ | if ($(".main.view").hasClass("open-menu")) | ||
+ | setTimeout(function () { | ||
+ | $(".main.cont-wrap").click(closeMenu); | ||
+ | }); | ||
+ | } | ||
− | + | function closeMenu() { | |
− | + | $(".main.view").removeClass("open-menu"); | |
− | + | $(".main.cont-wrap").off("click", closeMenu); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | $(".main.menu-btn") | |
− | + | .click(toggleMenu) | |
− | + | .popup({ | |
− | + | content: "Menu", | |
− | + | position: "right center", | |
+ | on: "manual" | ||
+ | }).popup("show"); | ||
+ | setTimeout(function () { | ||
+ | $(".main.menu-btn").popup("hide"); | ||
+ | }, 3000); | ||
+ | glob.Aquamade = {}; | ||
+ | glob.Aquamade.menu = { | ||
+ | setBtnColor: function (color) { | ||
+ | $(".main.menu-btn").css("color", color); | ||
+ | }, | ||
+ | selectItem: function (name) { | ||
+ | $(".main.menu .selected").removeClass("selected"); | ||
+ | $(".main.menu .item.item-" + name).addClass("selected"); | ||
+ | }, | ||
− | / | + | toggle: function () { |
+ | toggleMenu(); | ||
+ | } | ||
+ | }; | ||
+ | })(); | ||
+ | }); | ||
+ | </script> | ||
− | /* | + | <script> |
− | + | /* just for debug */ | |
+ | if (ADEBUG) { | ||
+ | $(document).ready(function () { | ||
+ | $.ajax({ | ||
+ | url: "sub/home.html", | ||
+ | success: function (dat) { | ||
+ | $(".main.cont-wrap").append(dat); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | } | ||
+ | </script> | ||
− | + | <div class="main view"> | |
− | + | <div class="main menu"> | |
− | + | <div class="items"> | |
− | + | <div class="logo"><i class="fa fa-bath"></i></div><br> | |
− | + | <div style="text-align: center; display: inline-block; width: auto;"> | |
− | + | <div class="item item-home"> | |
− | + | <a href="/Team:HFLS_H2Z_Hangzhou">HOME</a> | |
− | + | </div><br> | |
+ | |||
+ | <div class="item item-project"> | ||
+ | <a href="/Team:HFLS_H2Z_Hangzhou/project">PROJECT</a><!-- <br> | ||
+ | <div class="sub-items"> | ||
+ | <div class="sub-item">OVERVIEW</div><br> | ||
+ | <div class="sub-item">RESULTS</div><br> | ||
+ | <div class="sub-item">PROFF</div> | ||
+ | </div> --> | ||
+ | </div><br> | ||
+ | |||
+ | <div class="item item-parts"> | ||
+ | <a href="/Team:HFLS_H2Z_Hangzhou/parts">PARTS</a> | ||
+ | </div><br> | ||
+ | |||
+ | <div class="item item-model"> | ||
+ | <a href="/Team:HFLS_H2Z_Hangzhou/model">MODELLING</a> | ||
+ | </div><br> | ||
+ | |||
+ | <div class="item item-hprac"> | ||
+ | <a href="/Team:HFLS_H2Z_Hangzhou/hp">HUMAN PRACTICES</a> | ||
+ | </div><br> | ||
− | + | <div class="item item-note"> | |
− | + | <a target="_blank" href="http://note.aquamade.wiki">NOTEBOOK</a> | |
+ | </div><br> | ||
+ | |||
+ | <div class="item item-team"> | ||
+ | <a href="/Team:HFLS_H2Z_Hangzhou/team">TEAM</a> | ||
+ | </div><br> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div class="main top-btn-set"> | |
− | + | <div class="main btn menu-btn"><i class="fa fa-bars"></i></div | |
− | + | ><div class="main btn info-btn show-on-menu"><i class="fa fa-question-circle"></i></div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="main cont-wrap"> | ||
− | + | <!-- Concat with content --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | </html> |
Revision as of 17:30, 31 July 2017
<!DOCTYPE html>
<!DOCTYPE html>