|
|
| Line 1: |
Line 1: |
| − | <!DOCTYPE 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;
| |
| − | }
| |
| − |
| |
| − | .fa-bars .fa{
| |
| − | display: hidden;
| |
| − | }
| |
| − |
| |
| − | .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>
| |
