Matt Gerrard (Talk | contribs) |
Matt Gerrard (Talk | contribs) |
||
(13 intermediate revisions by the same user not shown) | |||
Line 223: | Line 223: | ||
background: rgb(70, 70, 70); | background: rgb(70, 70, 70); | ||
color: white !important; | 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> | ||
Line 288: | Line 381: | ||
padding: 0 !important; | padding: 0 !important; | ||
border: 0 !important; | border: 0 !important; | ||
+ | } | ||
+ | |||
+ | table.ref-table td { | ||
+ | min-width: 2em; | ||
+ | vertical-align: top; | ||
} | } | ||
Line 305: | Line 403: | ||
max-width: 100%; | max-width: 100%; | ||
text-align: left; | text-align: left; | ||
+ | |||
+ | padding: 0 1rem; | ||
} | } | ||
.wide.article { | .wide.article { | ||
width: 70rem; | width: 70rem; | ||
+ | } | ||
+ | |||
+ | .medium.article { | ||
+ | width: 60rem; | ||
} | } | ||
Line 319: | Line 423: | ||
.white-bg { | .white-bg { | ||
background: rgb(253, 253, 253); | background: rgb(253, 253, 253); | ||
+ | } | ||
+ | |||
+ | .black-bg { | ||
+ | background: rgb(30, 30, 30); | ||
} | } | ||
Line 380: | Line 488: | ||
display: inline-block; | display: inline-block; | ||
− | padding: 0.6em | + | padding: 0.6em 1.2em; |
border-radius: 3px; | border-radius: 3px; | ||
border: 2px solid rgb(253, 253, 253); | border: 2px solid rgb(253, 253, 253); | ||
Line 405: | Line 513: | ||
text-align: center; | text-align: center; | ||
+ | border-radius: 5px; | ||
height: 100%; | height: 100%; | ||
Line 432: | Line 541: | ||
position: absolute; | position: absolute; | ||
− | top: - | + | top: -7px; |
− | right: - | + | right: -7px; |
width: 30px; | width: 30px; | ||
Line 463: | Line 572: | ||
.imgview-modal .close-btn .icon { | .imgview-modal .close-btn .icon { | ||
margin-right: 0 !important; | 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>/* 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> | ||
Line 494: | Line 691: | ||
<script src='/Template:HFLS_H2Z_Hangzhou//home/rodlin/Desktop/aquamade/src/main/js?action=raw&ctype=text/javascript'></script> | <script src='/Template:HFLS_H2Z_Hangzhou//home/rodlin/Desktop/aquamade/src/main/js?action=raw&ctype=text/javascript'></script> | ||
+ | |||
Line 504: | Line 702: | ||
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script> | <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script> | ||
+ | |||
+ | |||
</head> | </head> | ||
Line 546: | Line 746: | ||
}; | }; | ||
} | } | ||
+ | </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> | ||
Line 553: | Line 775: | ||
// if (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; | var wrap; | ||
Line 562: | Line 806: | ||
} | } | ||
− | // image viewer | + | 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 () { | $(".main.cont-wrap").scroll(function () { | ||
− | + | var top = $(".main.cont-wrap").scrollTop(); | |
+ | |||
+ | if (top > 5) { | ||
$(".main.nav").addClass("floated"); | $(".main.nav").addClass("floated"); | ||
} else { | } else { | ||
$(".main.nav").removeClass("floated"); | $(".main.nav").removeClass("floated"); | ||
+ | } | ||
+ | |||
+ | if (top > 500) { | ||
+ | $(".main.scroll-top-btn").addClass("show"); | ||
+ | } else { | ||
+ | $(".main.scroll-top-btn").removeClass("show"); | ||
} | } | ||
}); | }); | ||
Line 724: | Line 1,024: | ||
<div class="main view"> | <div class="main view"> | ||
<div class="main nav"> | <div class="main nav"> | ||
− | <a class="logo-name">Aquamade</a> | + | <a class="logo-name trex-go">Aquamade</a> |
<span class="link-set"> | <span class="link-set"> | ||
<a href='/Team:HFLS_H2Z_Hangzhou' class="nav link-item home">Home</a> | <a href='/Team:HFLS_H2Z_Hangzhou' class="nav link-item home">Home</a> | ||
Line 746: | Line 1,046: | ||
<a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/Applied_Design'>Design</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/enzyme'>Enzyme</a> | ||
− | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/genecirc'> | + | <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/Demonstrate'>Performance</a> | ||
+ | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/sub/chassis'>Chassis Selection</a> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 762: | Line 1,063: | ||
</span> | </span> | ||
− | <a | + | <a href='/Team:HFLS_H2Z_Hangzhou/Safety' class="nav link-item safety">Safety</a> |
<span class="nav link-item team"> | <span class="nav link-item team"> | ||
Line 778: | Line 1,079: | ||
<div class="expand-item-set-cont"> | <div class="expand-item-set-cont"> | ||
<div class="expand-item-set"> | <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/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/sub/protocol'>Protocols</a> | ||
<a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/InterLab'>Interlab</a> | <a class="sub-link-item" href='/Team:HFLS_H2Z_Hangzhou/InterLab'>Interlab</a> | ||
Line 795: | Line 1,096: | ||
</span> | </span> | ||
</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 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> | ||
<div class="bg-layer"></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"> | <div class="main cont-wrap"> | ||
Latest revision as of 14:17, 15 December 2017
Template loop detected: Template:HFLS H2Z Hangzhou<!DOCTYPE html>