Matt Gerrard (Talk | contribs) |
Matt Gerrard (Talk | contribs) |
||
(91 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | {{Template:HFLS_H2Z_Hangzhou}}<!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=""> | ||
+ | <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.cont-wrap { | |
− | + | position: absolute; | |
+ | top: 0; left: 0; | ||
+ | width: 100%; height: 100%; | ||
+ | background: transparent; | ||
− | + | overflow: auto; | |
− | + | box-shadow: 0 0 20px rgba(0, 0, 0, 1); | |
− | + | transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .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; | ||
+ | } | ||
+ | |||
+ | .bg-layer { | ||
+ | position: absolute; | ||
− | + | left: 0; top: 0; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | ||
+ | background: rgb(253, 253, 253); | ||
+ | |||
+ | transition: left 0.3s cubic-bezier(0.2, 1, 0.2, 1); | ||
+ | } | ||
− | + | .main.nav { | |
− | + | z-index: 102; | |
+ | position: fixed; | ||
+ | padding: 3em; | ||
+ | width: 100%; | ||
+ | |||
+ | color: white; | ||
+ | |||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | |||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | |||
+ | font-weight: bold; | ||
+ | white-space: nowrap; | ||
+ | |||
+ | text-transform: uppercase; | ||
+ | |||
+ | transition: padding 0.3s, background 0.15s; | ||
+ | } | ||
− | + | .main.nav .logo-name { | |
− | + | cursor: pointer; | |
− | + | ||
+ | vertical-align: middle; | ||
+ | |||
+ | font-size: 1.5em; | ||
+ | } | ||
− | + | .main.nav .link-set { | |
− | + | vertical-align: middle; | |
− | + | margin-left: 3em; | |
− | + | ||
+ | white-space: nowrap; | ||
+ | |||
+ | -webkit-box-flex: 1; | ||
+ | -ms-flex: 1; | ||
+ | flex: 1; | ||
+ | |||
+ | transition: margin 0.3s; | ||
+ | } | ||
− | + | .main.nav .link-set .link-item { | |
− | + | position: relative; | |
− | + | ||
− | + | margin-right: 0.5em; | |
− | + | padding: 0.7em 1em; | |
+ | cursor: pointer; | ||
+ | |||
+ | border: 2px solid transparent; | ||
+ | background: transparent; | ||
+ | |||
+ | white-space: nowrap; | ||
+ | |||
+ | transition: border-color 0.3s, background 0.3s 0.2s, color 0.3s 0.2s, padding 0.3s; | ||
+ | } | ||
+ | .main.nav .link-set .link-item:hover, | ||
+ | .main.nav .link-set .link-item.selected { | ||
+ | border-color: white; | ||
+ | background: white; | ||
+ | color: black !important; | ||
+ | } | ||
− | + | .main.nav .link-set .link-item .expand-item-set-cont { | |
+ | position: absolute; | ||
+ | display: block; | ||
+ | |||
+ | margin-top: 5px; | ||
+ | left: -7px; /* 5 + 2 */ | ||
+ | top: 100%; | ||
+ | |||
+ | padding-top: 1em; | ||
+ | |||
+ | pointer-events: none; | ||
+ | opacity: 0; | ||
+ | |||
+ | transition: opacity 0.3s, margin-top 0.3s, left 0.3s; | ||
+ | } | ||
+ | .main.nav .link-set .link-item:hover .expand-item-set-cont { | ||
+ | pointer-events: auto; | ||
+ | opacity: 1; | ||
+ | |||
+ | margin-top: 0; | ||
+ | left: -2px; /* 10 + 2 */ | ||
+ | } | ||
− | + | .main.nav .link-set .link-item .expand-item-set { | |
+ | box-shadow: 0 0 15px rgba(0, 0, 0, 0.04); | ||
+ | border: 1px solid rgba(0, 0, 0, 0.08); | ||
+ | border-radius: 3px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .main.nav .link-set .link-item .expand-item-set .sub-link-item { | ||
+ | display: block; | ||
+ | padding: 1em 1em; | ||
+ | color: rgb(70, 70, 70) !important; | ||
+ | background: rgb(253, 253, 253); | ||
+ | |||
+ | transition: color 0.3s, background 0.3s; | ||
+ | } | ||
+ | .main.nav .link-set .link-item:hover .expand-item-set .sub-link-item:hover { | ||
+ | color: rgb(253, 253, 253) !important; | ||
+ | background: rgb(70, 70, 70); | ||
+ | } | ||
+ | .main.nav.floated { | ||
+ | padding: 2em; | ||
+ | background: white; | ||
+ | box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); | ||
+ | } | ||
+ | .main.nav.floated .link-set { | ||
+ | margin-left: 2em; | ||
+ | } | ||
− | + | .main.nav.floated, | |
+ | .main.nav.reversed { | ||
+ | color: rgb(70, 70, 70); | ||
+ | } | ||
+ | .main.nav.floated .link-set .link-item:hover, | ||
+ | .main.nav.floated .link-set .link-item.selected, | ||
+ | .main.nav.reversed .link-set .link-item:hover, | ||
+ | .main.nav.reversed .link-set .link-item.selected { | ||
+ | border-color: rgb(70, 70, 70); | ||
+ | background: rgb(70, 70, 70); | ||
+ | color: white !important; | ||
+ | } | ||
+ | .main.scroll-top-btn { | ||
+ | position: fixed; | ||
+ | bottom: 2rem; | ||
+ | left: 2rem; | ||
− | + | z-index: 102; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | width: 3em; | |
− | + | height: 3em; | |
− | + | line-height: 2.8em; | |
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | border: 1px solid rgba(0, 0, 0, 0.08); | |
− | . | + | background: rgb(100, 100, 100); |
− | + | color: rgb(253, 253, 253); | |
− | } | + | |
+ | border-radius: 4px; | ||
+ | |||
+ | box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1); | ||
+ | |||
+ | cursor: pointer; | ||
+ | |||
+ | opacity: 0; | ||
+ | pointer-events: none; | ||
+ | |||
+ | transition: box-shadow 0.3s, opacity 0.3s; | ||
+ | } | ||
+ | |||
+ | .main.scroll-top-btn.show { | ||
+ | opacity: 1; | ||
+ | pointer-events: auto; | ||
+ | } | ||
+ | |||
+ | .main.scroll-top-btn:hover { | ||
+ | box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3); | ||
+ | } | ||
+ | |||
+ | .main.scroll-top-btn:active { | ||
+ | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | ||
+ | } | ||
+ | |||
+ | .main.bottom-bar .block { | ||
+ | padding: 6rem 0; | ||
+ | box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); | ||
+ | } | ||
+ | |||
+ | .main.bottom-bar .member-badge { | ||
+ | display: inline-block; | ||
+ | margin-right: 1rem; | ||
+ | |||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .main.bottom-bar .member-badge .tiny-avatar { | ||
+ | display: inline-block; | ||
+ | |||
+ | width: 1.5rem; | ||
+ | height: 1.5rem; | ||
+ | margin-right: 0.3rem; | ||
+ | |||
+ | border-radius: 4px; | ||
+ | |||
+ | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | ||
+ | |||
+ | background-color: rgb(253, 253, 253); | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .main.bottom-bar .sponsor-link { | ||
+ | display: inline-block; | ||
− | + | width: 10rem; | |
− | + | height: 6rem; | |
− | + | margin-right: 0.3rem; | |
− | + | ||
− | + | ||
+ | border-radius: 4px; | ||
− | + | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | |
− | + | ||
− | + | ||
− | + | ||
− | + | background-color: rgb(253, 253, 253); | |
− | + | background-size: contain; | |
− | + | background-position: center; | |
− | + | background-repeat: no-repeat; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | cursor: pointer; | ||
+ | |||
+ | vertical-align: middle; | ||
+ | } | ||
+ | </style> | ||
+ | <style>a { | ||
+ | text-decoration: none !important; | ||
+ | } | ||
− | + | h1, h2, h3, h4, h5 { | |
− | + | font-family: Veneer !important; | |
− | + | font-weight: normal !important; | |
− | + | } | |
− | + | ||
− | + | .fullscr { | |
− | + | height: 100vh; | |
− | + | width: 100%; | |
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: 50% 50%; | ||
+ | } | ||
− | + | .img { | |
− | + | background-repeat: no-repeat; | |
− | + | background-size: cover; | |
− | } | + | background-position: 50% 50%; |
+ | } | ||
− | + | .img.framed { | |
− | + | width: 100%; | |
− | + | ||
− | + | background: rgb(250, 250, 250); | |
− | + | ||
− | + | ||
+ | border-radius: 5px; | ||
+ | border: 1px solid rgba(0, 0, 0, 0.08); | ||
+ | overflow: hidden; | ||
+ | box-shadow: 0 0 15px rgba(0, 0, 0, 0.04); | ||
+ | outline: none; | ||
− | + | margin: 1rem 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .img.figure { | |
− | + | margin: 1rem 0; | |
− | + | max-width: 100%; | |
− | + | border-radius: 5px; | |
− | } | + | border: 1px solid rgba(0, 0, 0, 0.08); |
+ | } | ||
+ | .code-block { | ||
+ | padding: 2rem; | ||
− | + | font-family: Consolas, Ubuntu Mono, monospace; | |
− | + | border-radius: 5px; | |
− | + | border: 1px solid rgba(0, 0, 0, 0.08); | |
− | + | background: white; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | table.frameless { | |
− | + | background: transparent !important; | |
− | + | border: 0 !important; | |
− | } | + | } |
− | + | table.frameless td { | |
− | + | padding: 0 !important; | |
− | + | border: 0 !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | table.ref-table td { | |
+ | min-width: 2em; | ||
+ | vertical-align: top; | ||
+ | } | ||
− | + | .center { | |
− | + | width: auto !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .block { | ||
+ | padding: 3rem 0; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | .article { | |
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | width: 50rem; | ||
+ | max-width: 100%; | ||
+ | text-align: left; | ||
− | + | padding: 0 1rem; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .wide.article { | ||
+ | width: 70rem; | ||
+ | } | ||
− | + | .medium.article { | |
− | + | width: 60rem; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | .article-font { | ||
+ | font-family: Brandon; | ||
+ | line-height: 1.6; | ||
+ | font-size: 1.3em; | ||
+ | } | ||
− | + | .white-bg { | |
− | + | background: rgb(253, 253, 253); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .black-bg { | |
− | + | background: rgb(30, 30, 30); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .line-sep { | |
− | + | display: block; | |
− | + | height: 1px; | |
− | + | background: rgba(0, 0, 0, 0.08); | |
− | } | + | } |
− | + | .blue { | |
− | + | color: #3498DB; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .green { | |
− | + | color: #2ECC71; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .quick-link { | |
− | + | display: inline-block; | |
− | + | ||
− | + | border-radius: 4px; | |
− | + | height: 7rem; | |
− | + | width: 14rem; | |
− | + | overflow: hidden; | |
+ | |||
+ | line-height: 7rem; | ||
+ | text-align: center; | ||
+ | |||
+ | font-size: 2rem; | ||
+ | |||
+ | color: white; | ||
+ | |||
+ | cursor: pointer; | ||
+ | |||
+ | border: 1px solid rgba(0, 0, 0, 0.08); | ||
+ | margin: 0 1rem 1rem 0; | ||
+ | |||
+ | background-color: rgb(250, 250, 250); | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
− | + | box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); | |
− | + | ||
− | + | transition: box-shadow 0.3s; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .quick-link:hover { | |
− | + | box-shadow: 0 0 15px rgba(0, 0, 0, 0.22); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .imgview { | ||
+ | position: relative; | ||
+ | cursor: pointer; | ||
− | + | border-radius: 5px; | |
+ | overflow: hidden; | ||
+ | } | ||
− | + | .imgview .view-btn { | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | padding: 0.6em 1.2em; | |
− | + | border-radius: 3px; | |
− | + | border: 2px solid rgb(253, 253, 253); | |
− | + | color: rgb(253, 253, 253); | |
− | + | font-size: 1rem; | |
− | + | font-weight: bold; | |
− | + | ||
− | + | ||
− | + | ||
− | + | cursor: pointer; | |
− | + | line-height: 1; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | transition: color 0.2s, background 0.2s; | ||
+ | } | ||
+ | .imgview .view-btn:hover { | ||
+ | color: rgb(70, 70, 70); | ||
+ | background: rgb(253, 253, 253); | ||
+ | } | ||
+ | .imgview .shade { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
− | + | text-align: center; | |
+ | border-radius: 5px; | ||
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | background: rgba(0, 0, 0, 0.3); | |
− | + | opacity: 0; | |
− | + | transition: opacity 0.3s; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .imgview:hover .shade { | ||
+ | opacity: 1; | ||
+ | } | ||
− | + | .imgview-modal .wrap { | |
− | + | position: relative; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | } | + | } |
+ | .imgview-modal img { | ||
+ | display: block; | ||
+ | border-radius: 3px; | ||
+ | width: 100%; | ||
+ | } | ||
− | + | .imgview-modal .close-btn { | |
− | + | position: absolute; | |
− | + | ||
− | + | ||
− | + | top: -7px; | |
− | + | right: -7px; | |
− | + | ||
− | + | ||
− | + | width: 30px; | |
− | + | height: 30px; | |
− | + | ||
− | + | ||
+ | line-height: 28px; | ||
+ | text-align: center; | ||
− | + | border-radius: 3px; | |
− | + | cursor: pointer; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | color: white; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | background: #E74C3C; | ||
+ | box-shadow: 0 0 3px #E74C3C; | ||
+ | transition: background 0.2s; | ||
+ | } | ||
− | + | .imgview-modal .close-btn:hover { | |
+ | background: rgb(230, 91, 78); | ||
+ | } | ||
− | + | .imgview-modal .close-btn:active { | |
− | + | background: #C0392B; | |
+ | } | ||
− | + | .imgview-modal .close-btn .icon { | |
− | + | margin-right: 0 !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .ref-table td { | |
− | + | min-width: 2em; | |
+ | vertical-align: top; | ||
+ | } | ||
− | + | .img-name { | |
− | + | position: relative; | |
− | + | text-align: center; | |
− | + | color: rgb(100, 100, 100); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | margin-top: -1rem; | ||
+ | margin-bottom: 1rem; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | .active-img { | ||
+ | position: relative; | ||
+ | |||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .active-img img { | ||
+ | width: 100%; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .active-img .white-shade { | ||
+ | position: absolute; | ||
+ | top: 0; left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | |||
+ | border-radius: 5px; | ||
+ | |||
+ | box-shadow: 0 0 10px white inset; | ||
+ | } | ||
+ | |||
+ | .active-img .control-layer { | ||
+ | position: absolute; | ||
− | + | top: 0; left: 0; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | } | |
− | + | ||
− | + | .active-img .control { | |
− | + | position: absolute; | |
− | + | } | |
− | + | ||
</style> | </style> | ||
+ | <style>/* T-Rex */ | ||
+ | .com-trex { | ||
+ | transition: -webkit-filter 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), | ||
+ | -moz-filter 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), | ||
+ | -ms-filter 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), | ||
+ | -o-filter 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), | ||
+ | filter 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), | ||
+ | background-color 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); | ||
+ | } | ||
− | + | .com-trex.inverted { | |
+ | -webkit-filter: invert(100%); | ||
+ | -moz-filter: invert(100%); | ||
+ | -ms-filter: invert(100%); | ||
+ | -o-filter: invert(100%); | ||
+ | filter: invert(100%); | ||
+ | background: white; | ||
+ | } | ||
+ | .com-trex-modal .copyright { | ||
+ | padding: 1rem; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | font-size: 0.8rem; | ||
+ | border-bottom: 1px solid rgba(0, 0, 0, 0.08); | ||
+ | } | ||
− | + | .com-trex-modal .copyright a { | |
+ | color: #2980B9 !important; | ||
+ | } | ||
− | + | .com-trex-modal .copyright a:hover { | |
− | < | + | color: #3498DB !important; |
+ | } | ||
+ | </style> | ||
+ | <style>@charset "UTF-8"; | ||
− | </ | + | @font-face { |
+ | font-family: Brandon; | ||
+ | src: url("/wiki/images/b/b8/T--HFLS_H2Z_Hangzhou--font_brandon_regular_woff.woff") format("woff"), | ||
+ | url("/wiki/images/0/0e/T--HFLS_H2Z_Hangzhou--font_brandon_regular_ttf.ttf") format("truetype"), | ||
+ | url("/wiki/images/f/ff/T--HFLS_H2Z_Hangzhou--font_brandon_regular_eot.eot") format("embedded-opentype"), | ||
+ | url("/wiki/images/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("/wiki/images/d/d7/T--HFLS_H2Z_Hangzhou--font_veneer_regular_woff.woff") format("woff"), | ||
+ | url("/wiki/images/f/f1/T--HFLS_H2Z_Hangzhou--font_veneer_regular_ttf.ttf") format("truetype"), | ||
+ | url("/wiki/images/6/60/T--HFLS_H2Z_Hangzhou--font_veneer_regular_eot.eot") format("embedded-opentype"), | ||
+ | url("/wiki/images/b/bd/T--HFLS_H2Z_Hangzhou--font_veneer_regular_svg.svg") format("svg"), | ||
+ | url("/wiki/images/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//home/rodlin/Desktop/aquamade/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> | ||
+ | |||
+ | <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script> | ||
+ | |||
+ | |||
+ | |||
+ | </head> | ||
+ | <style> | ||
+ | #top_menu_14:hover { | ||
+ | top: 0 !important; | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | line-height: 1 !important; | ||
+ | font-size: 14px !important; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size: 100% !important; | ||
+ | } | ||
+ | </style> | ||
− | < | + | <script> |
− | + | window.ADEBUG = window.location.hostname == "localhost"; | |
− | + | </script> | |
+ | |||
+ | <script> | ||
+ | /* just for debug */ | ||
+ | if (ADEBUG) { | ||
+ | var hash = window.location.hash.substring(1); | ||
+ | |||
+ | var resp = $.ajax({ | ||
+ | url: hash ? "sub/" + hash + ".html" : "sub/home.html", | ||
+ | async: false | ||
+ | }); | ||
+ | window.contWrap = $(resp.responseText); | ||
− | + | $(function () { | |
− | + | $(".main.cont-wrap").append(window.contWrap); | |
− | + | }); | |
− | + | ||
− | + | window.onhashchange = function () { | |
− | + | window.location.reload(true); | |
+ | }; | ||
+ | } | ||
+ | </script> | ||
+ | <script> | ||
+ | // delete #HQ_page .button | ||
+ | $(function () { | ||
+ | if (ADEBUG) return; | ||
+ | var styles = document.styleSheets; | ||
− | + | if (styles) { | |
− | + | styles = styles[0]; | |
− | + | ||
− | + | ||
− | + | ||
+ | for (var i = 0; i < styles.cssRules.length; i++) { | ||
+ | if (styles.cssRules[i].selectorText == "#HQ_page .button" || | ||
+ | styles.cssRules[i].selectorText == "#HQ_page .button:hover") { | ||
+ | // delete styles.cssRules[i]; | ||
+ | styles.deleteRule(i); | ||
+ | i--; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | $(function () { | ||
+ | // alert(Modernizr.csstransforms3d); | ||
+ | // if (Modernizr.csstransforms3d) { | ||
+ | // } | ||
− | + | var click_count = 0; | |
− | + | ||
− | + | ||
− | + | $(".trex-go").click(function () { | |
− | + | if (++click_count >= 3) { | |
− | + | click_count = 0; | |
− | + | trex.modal({}); | |
− | + | } | |
− | + | }); | |
− | + | ||
− | + | $(".fake-link").each(function (i, dom) { | |
− | + | dom = $(dom); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | dom.css("cursor", "pointer"); | ||
+ | dom.click(function () { | ||
+ | if (dom.data("href")) { | ||
+ | window.location = dom.data("href"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
− | + | $(".main.cont-wrap").append($(".main.bottom-bar")); | |
− | + | ||
− | + | var wrap; | |
− | + | ||
− | + | ||
− | + | if (ADEBUG) { | |
− | + | wrap = window.contWrap; | |
− | + | } else { | |
− | + | wrap = $(".main.cont-wrap"); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | window.imgview = {}; | |
− | + | imgview.refresh = function (init) { | |
− | + | // image viewer | |
− | + | wrap.find("img").not(".no-imgview").each(function (i, dom) { | |
− | + | dom = $(dom); | |
− | + | var src = dom.attr("src"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | var img = new Image(); | ||
− | + | img.src = src; | |
− | + | img.onload = function () { | |
− | + | if (init) { | |
− | + | var imgwrap = $("<div class='imgview'> \ | |
− | + | <div class='shade'> \ | |
+ | <div class='view-btn'>View</div> \ | ||
+ | </div> \ | ||
+ | </div>"); | ||
− | + | var modal = $("<div class='ui modal imgview-modal'> \ | |
− | + | <div class='wrap'> \ | |
− | + | <img></img> \ | |
− | + | <div class='close-btn'><i class='cancel icon'></i></div> \ | |
− | + | </div> \ | |
+ | </div>"); | ||
− | + | var shade = imgwrap.find(".shade"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | dom.after(imgwrap); | |
− | + | imgwrap.prepend(dom); | |
− | + | ||
− | + | ||
− | + | ||
− | + | modal.find(".close-btn").click(function () { | |
− | + | modal.modal("hide"); | |
− | + | }); | |
− | + | ||
− | + | ||
+ | imgwrap.click(function () { | ||
+ | var bigimg = modal.find("img"); | ||
− | + | bigimg.attr("src", src); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | modal.modal("show"); | |
− | + | }); | |
− | + | } else { | |
− | + | var shade = dom.siblings(".shade"); | |
− | + | } | |
− | + | shade.css({ | |
− | + | display: dom.css("display"), | |
− | + | margin: dom.css("margin"), | |
− | + | height: dom.css("height"), | |
− | + | width: dom.css("width"), | |
+ | "line-height": dom.css("height"), | ||
+ | }); | ||
+ | }; | ||
+ | }); | ||
+ | }; | ||
− | + | imgview.refresh(true); | |
− | + | $(window).resize(function () { | |
− | + | imgview.refresh(); | |
− | + | }); | |
− | + | ||
− | + | var scrollToTop = window.gradScroll = (function () { | |
− | + | var a = 3; | |
− | + | var p = 2; | |
− | + | var delta = 1; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | return function (target) { | |
− | + | var target = target || 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | var top = $(".main.cont-wrap").scrollTop(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | if (top < target || target < 0) return; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | if (Math.abs(top - target) <= 3) { | |
− | + | $(".main.cont-wrap").scrollTop(target); | |
− | + | return; | |
− | + | } | |
− | + | var x = Math.pow((top - target) / a, 1 / p); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | var next = Math.abs(a * Math.pow(x - delta, p)) + target; | ||
+ | $(".main.cont-wrap").scrollTop(next); | ||
+ | |||
+ | setTimeout(function () { | ||
+ | scrollToTop(target); | ||
+ | }, 24); | ||
+ | }; | ||
+ | })(); | ||
+ | $(".main.scroll-top-btn").click(function () { | ||
+ | scrollToTop(); | ||
+ | }); | ||
+ | |||
+ | $(".main.cont-wrap").scroll(function () { | ||
+ | var top = $(".main.cont-wrap").scrollTop(); | ||
+ | if (top > 5) { | ||
+ | $(".main.nav").addClass("floated"); | ||
+ | } else { | ||
+ | $(".main.nav").removeClass("floated"); | ||
+ | } | ||
+ | if (top > 500) { | ||
+ | $(".main.scroll-top-btn").addClass("show"); | ||
+ | } else { | ||
+ | $(".main.scroll-top-btn").removeClass("show"); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | window.menu = {}; | ||
+ | |||
+ | window.menu.setItem = function (name) { | ||
+ | $(".main.nav .link-item.selected").removeClass("selected"); | ||
+ | $(".main.nav .link-item." + name).addClass("selected"); | ||
+ | }; | ||
+ | |||
+ | window.menu.reverse = function () { | ||
+ | $(".main.nav").addClass("always reversed"); | ||
+ | }; | ||
+ | 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": "103", | |
− | + | 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(); | |
− | + | } | |
− | + | }; | |
− | + | })(); | |
+ | |||
+ | var bgeff = new BGEffect(".bg-layer"); | ||
+ | |||
+ | // if (ADEBUG) | ||
+ | // bgeff.oneFrame(); | ||
+ | // else | ||
+ | |||
+ | bgeff.start(); | ||
+ | }); | ||
+ | </script> | ||
− | <a | + | <div class="main view"> |
− | <div class=" | + | <div class="main nav"> |
− | + | <a class="logo-name trex-go">Aquamade</a> | |
− | </div> | + | <span class="link-set"> |
− | + | <a href='/Team:HFLS_H2Z_Hangzhou' class="nav link-item home">Home</a> | |
+ | |||
+ | <span class="nav link-item achiev"> | ||
+ | <i class="angle down icon"></i>Achievement | ||
+ | <div class="expand-item-set-cont"> | ||
+ | <div class="expand-item-set"> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/parts'>Parts</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Collaborations'>Collaborations</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | |||
+ | <span class="nav link-item project"> | ||
+ | <i class="angle down icon"></i>Project | ||
+ | <div class="expand-item-set-cont"> | ||
+ | <div class="expand-item-set"> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/overview'>Overview</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/backg'>Background</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Applied_Design'>Design</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/enzyme'>Enzyme</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/genecirc'>Genetic Circuits</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Demonstrate'>Performance</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/chassis'>Chassis Selection</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
− | + | <span class="nav link-item model"> | |
− | <div class=" | + | <i class="angle down icon"></i>Modeling |
− | + | <div class="expand-item-set-cont"> | |
− | </div> | + | <div class="expand-item-set"> |
− | + | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Model'>Models</a> | |
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Software'>Software</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | |||
+ | <a href='/Team:HFLS_H2Z_Hangzhou/Safety' class="nav link-item safety">Safety</a> | ||
+ | |||
+ | <span class="nav link-item team"> | ||
+ | <i class="angle down icon"></i>Team | ||
+ | <div class="expand-item-set-cont"> | ||
+ | <div class="expand-item-set"> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/member'>Member</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Attributions'>Attribution</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | |||
+ | <span class="nav link-item note"> | ||
+ | <i class="angle down icon"></i>Notebook | ||
+ | <div class="expand-item-set-cont"> | ||
+ | <div class="expand-item-set"> | ||
+ | <!-- <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/experim'>Experiments</a> --> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/protocol'>Protocols</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/InterLab'>Interlab</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | |||
+ | <span class="nav link-item hp"> | ||
+ | <i class="angle down icon"></i>Human Practices | ||
+ | <div class="expand-item-set-cont"> | ||
+ | <div class="expand-item-set"> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/HP/Silver'>Public Outreach</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/HP/Gold_Integrated'>Integrated</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | </span> | ||
+ | </div> | ||
− | < | + | <div class="main bottom-bar"> |
− | + | <div class="line-sep"></div> | |
− | + | <div class="block black-bg"> | |
− | + | <div class="wide article article-font" style="color: rgb(253, 253, 253);"> | |
− | + | <h2 style="color: rgb(253, 253, 253);"><i data-href='/Team:HFLS_H2Z_Hangzhou/sub/member' class="fake-link linkify icon"></i>Team Members</h2> | |
+ | <div style="font-family: Veneer;"> | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/b/b5/T--HFLS_H2Z_Hangzhou--img_member_canal.jpg');"></div> | ||
+ | Jianan Li | ||
+ | </div> | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/d/d8/T--HFLS_H2Z_Hangzhou--img_member_sunny.jpg');"></div> | ||
+ | Qingrui Sun | ||
+ | </div> | ||
− | + | <div class="member-badge"> | |
− | + | <div class="tiny-avatar" style="background-image: url('/wiki/images/9/9d/T--HFLS_H2Z_Hangzhou--img_member_yiming.jpg');"></div> | |
− | + | Yiming Rong | |
− | + | </div> | |
− | + | ||
− | + | <div class="member-badge"> | |
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/4/4a/T--HFLS_H2Z_Hangzhou--img_member_jiayue.jpg');"></div> | ||
+ | Jiayue Guo | ||
+ | </div> | ||
− | + | <div class="member-badge"> | |
− | + | <div class="tiny-avatar" style="background-image: url('/wiki/images/5/58/T--HFLS_H2Z_Hangzhou--img_member_annie.jpg');"></div> | |
− | + | Zhiyuan Lu | |
− | + | </div> | |
− | + | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/9/96/T--HFLS_H2Z_Hangzhou--img_member_meiqi.jpg');"></div> | ||
+ | Meiqi Yuan | ||
+ | </div> | ||
− | + | <div class="member-badge"> | |
− | + | <div class="tiny-avatar" style="background-image: url('/wiki/images/b/bf/T--HFLS_H2Z_Hangzhou--img_member_rod.jpg');"></div> | |
− | + | Zhengyao Lin | |
− | + | </div> | |
− | + | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/7/70/T--HFLS_H2Z_Hangzhou--img_member_eva.jpg');"></div> | ||
+ | Caiyi Feng | ||
+ | </div> | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/e/eb/T--HFLS_H2Z_Hangzhou--img_member_shuyun.jpg');"></div> | ||
+ | Shuyun Zhang | ||
+ | </div> | ||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/9/9d/T--HFLS_H2Z_Hangzhou--img_member_daniel.jpg');"></div> | ||
+ | Tenghao Huang | ||
+ | </div> | ||
− | </div> | + | <div class="member-badge"> |
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/6/63/T--HFLS_H2Z_Hangzhou--img_member_sam.jpg');"></div> | ||
+ | Yining Huang | ||
+ | </div> | ||
+ | |||
+ | <div class="member-badge"> | ||
+ | <div class="tiny-avatar" style="background-image: url('/wiki/images/3/39/T--HFLS_H2Z_Hangzhou--img_member_yanyue.jpg');"></div> | ||
+ | Yanyue Zhu | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | <h2 style="color: rgb(253, 253, 253);"><i data-href='/Team:HFLS_H2Z_Hangzhou/Attributions' class="fake-link linkify icon"></i>Sponsors</h2> | ||
+ | <div> | ||
+ | <div class="sponsor-link fake-link" data-href="" style="background-image: url('/wiki/images/9/99/T--HFLS_H2Z_Hangzhou--img_attrib_logo1.jpg');"></div> | ||
+ | <div class="sponsor-link fake-link" data-href="" style="background-image: url('/wiki/images/e/e2/T--HFLS_H2Z_Hangzhou--img_attrib_logo2.jpg');"></div> | ||
+ | <div class="sponsor-link fake-link" data-href="" style="background-image: url('/wiki/images/1/1b/T--HFLS_H2Z_Hangzhou--img_attrib_logo3.jpg');"></div> | ||
+ | <div class="sponsor-link fake-link" data-href="" style="background-image: url('/wiki/images/0/0b/T--HFLS_H2Z_Hangzhou--img_attrib_logo4.jpg');"></div> | ||
+ | <div class="sponsor-link fake-link" data-href="" style="background-image: url('/wiki/images/5/5f/T--HFLS_H2Z_Hangzhou--img_attrib_logo5.jpg');"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="bg-layer"></div> | ||
+ | |||
+ | <div class="main scroll-top-btn"><i class="fitted chevron up icon"></i></div> | ||
+ | <div class="main cont-wrap"> | ||
+ | <!-- Concat with content --> | ||
− | + | </html> | |
− | + | ||
− | + |
Latest revision as of 14:17, 15 December 2017
Template loop detected: Template:HFLS H2Z Hangzhou<!DOCTYPE html>