Difference between revisions of "Template:HFLS H2Z Hangzhou"

 
(52 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{Template:HFLS_H2Z_Hangzhou}}<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
−
<script>/* isocity generator by Nicolas Barradeau in pen at https://codepen.io/nicoptere/pen/awzbQW */
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<meta http-equiv="Pragma" content="no-cache">
 +
<meta name="viewport" content="">
  
−
;(function () {
+
<style>html {
 +
overflow: hidden;
 +
}
  
−
window.Isocity = function (cont) {
+
a {
−
cont = $(cont);
+
color: inherit !important;
 +
}
  
−
var w = cont.width();
+
a:hover {
−
var h = cont.height();
+
color: inherit !important;
 +
}
  
−
function getContext(w, h) {
+
.main.view {
−
var canvas = $(document.createElement("canvas"));
+
position: fixed;
 +
top: 0; left: 0;
 +
width: 100%; height: 100%;
  
−
cont.append(canvas);
+
font-size: 1rem;
−
canvas.css("height", "100%").css("width", "100%");
+
  
−
return canvas[0].getContext("2d");
+
font-family: Brandon;
−
}
+
  
−
var ctx = getContext(w, h);
+
background: rgba(24, 24, 24, 1);
  
−
var seed = Math.random() * 100;
+
-webkit-perspective: 1000px;
 +
perspective: 1000px;
 +
}
  
−
function reset() {
+
.main.cont-wrap {
−
PRNG.setSeed(seed++);
+
position: absolute;
 +
top: 0; left: 0;
 +
width: 100%; height: 100%;
 +
background: transparent;
  
−
w = window.innerWidth;
+
overflow: auto;
−
h = window.innerHeight;
+
box-shadow: 0 0 20px rgba(0, 0, 0, 1);
−
ctx.canvas.width = w;
+
−
ctx.canvas.height = h;
+
−
var c = new Point();
+
−
c.radius = h / 1.5;
+
−
ctx.fillStyle = "#FFF";
+
−
ctx.fillRect(0, 0, w, h);
+
−
ctx.fillStyle = "#000";
+
−
ctx.globalAlpha = 0.25;
+
  
−
var quads = [];
+
transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1);
−
var q = new Q(c.x - c.radius, c.y - c.radius, c.radius * 2, c.radius * 2);
+
}
−
var qs = q.split();
+
−
qs.forEach(function(q) {
+
−
var qs = q.split();
+
−
qs[1].glow = true;
+
−
qs.forEach(function(q) {
+
−
var glow = q.glow != null;
+
−
var qs = q.split();
+
−
qs.forEach(function(q) {
+
−
var qs = q.split();
+
−
qs.forEach(function(q) {
+
−
q.glow = Boolean(glow); // && PRNG.random()>.5;
+
−
quads.push(q);
+
−
});
+
−
});
+
−
});
+
−
});
+
  
−
var s = 1 + PRNG.random() * 2;
+
.main.top-btn-set {
−
ctx.save();
+
position: fixed;
−
ctx.translate(w / 2, h / 2);
+
−
ctx.scale(1 * s, 0.62 * s);
+
−
ctx.rotate(Math.PI / 4);
+
  
−
var stairs = [];
+
z-index: 10;
−
var landuse = [];
+
−
var buildings = [];
+
  
−
ctx.beginPath();
+
left: 0.2rem;
−
quads.forEach(function(q, i) {
+
top: 1.2rem;
−
var cq = new Point(q.x + q.w / 2, q.y + q.h / 2);
+
  
−
if (!circleContainsPoint(cq, c)) return;
+
font-size: 1.5rem;
  
−
if (PRNG.random() > (1 - distance(cq, c) / c.radius) * 2) return;
+
color: black;
  
−
var offset = 4;
+
opacity: 0.8;
−
if (q.area < Math.pow(h / 30, 2)) {
+
−
q.split().forEach(function(q) {
+
−
ps = offsetPolygon(q.points.concat(), offset); //q.points;//
+
−
q.points = ps;
+
−
ctx.moveTo(ps[0].x, ps[0].y);
+
−
ctx.lineTo(ps[1].x, ps[1].y);
+
−
ctx.lineTo(ps[2].x, ps[2].y);
+
−
ctx.lineTo(ps[3].x, ps[3].y);
+
−
ctx.lineTo(ps[0].x, ps[0].y);
+
−
buildings.push(q);
+
−
});
+
−
return;
+
−
}
+
  
−
if (q.area < Math.pow(h / 9, 2)) {
+
user-select: none;
−
q.split().forEach(function(q) {
+
-moz-user-select: none;
−
ps = offsetPolygon(q.points.concat(), offset);
+
−
q.points = ps;
+
−
ctx.moveTo(ps[0].x, ps[0].y);
+
−
ctx.lineTo(ps[1].x, ps[1].y);
+
−
ctx.lineTo(ps[2].x, ps[2].y);
+
−
ctx.lineTo(ps[3].x, ps[3].y);
+
−
ctx.lineTo(ps[0].x, ps[0].y);
+
−
landuse.push(q);
+
−
});
+
−
return;
+
−
}
+
  
−
if (q.area < Math.pow(h / 8, 2)) {
+
transition: opacity 0.2s;
−
q.split().forEach(function(q) {
+
}
−
var ps = offsetPolygon(q.points.concat(), offset);
+
−
q.points = ps;
+
−
stairs.push(q);
+
  
−
ctx.moveTo(ps[0].x, ps[0].y);
+
.main.top-btn-set .btn {
−
ctx.lineTo(ps[1].x, ps[1].y);
+
display: inline-block;
−
ctx.lineTo(ps[2].x, ps[2].y);
+
margin-left: 1rem;
−
ctx.lineTo(ps[3].x, ps[3].y);
+
cursor: pointer;
−
ctx.lineTo(ps[0].x, ps[0].y);
+
−
});
+
−
} else {
+
−
var ps = offsetPolygon(q.points.concat(), offset);
+
−
q.points = ps;
+
−
landuse.push(q);
+
  
−
ctx.moveTo(ps[0].x, ps[0].y);
+
transition: opacity 0.2s;
−
ctx.lineTo(ps[1].x, ps[1].y);
+
}
−
ctx.lineTo(ps[2].x, ps[2].y);
+
−
ctx.lineTo(ps[3].x, ps[3].y);
+
−
ctx.lineTo(ps[0].x, ps[0].y);
+
−
}
+
−
});
+
−
ctx.closePath();
+
−
ctx.stroke();
+
  
−
ctx.save();
+
.main.top-btn-set .show-on-menu.btn {
 +
opacity: 0;
 +
pointer-events: none;
 +
}
  
−
ctx.clip();
+
.bg-layer {
−
ctx.shadowBlur = 25;
+
position: absolute;
−
ctx.shadowColor = "#FFF";
+
−
ctx.fillRect(-w, -h, w * 2, h * 2);
+
left: 0; top: 0;
−
stairs.forEach(function(r, i) {
+
height: 100%;
−
r.stairs(ctx, i);
+
width: 100%;
−
});
+
−
ctx.restore();
+
background: rgb(253, 253, 253);
 +
 +
transition: left 0.3s cubic-bezier(0.2, 1, 0.2, 1);
 +
}
  
−
landuse.forEach(function(q, id) {
+
.main.nav {
−
var i;
+
z-index: 102;
−
var inc = 10;
+
position: fixed;
−
var tot = 10;
+
padding: 3em;
−
if (id % 3 == 0) {
+
width: 100%;
−
ctx.save();
+
−
q.draw(ctx);
+
color: white;
−
ctx.clip();
+
−
ctx.fillStyle = "#000";
+
display: -webkit-flex;
−
for (i = 0; i < tot; i++) {
+
display: flex;
−
ctx.translate(inc, inc);
+
−
ctx.globalAlpha = 1 - i / tot;
+
-webkit-box-align: center;
−
q.draw(ctx);
+
-ms-flex-align: center;
−
ctx.fill();
+
align-items: center;
−
}
+
−
ctx.restore();
+
font-weight: bold;
−
return;
+
white-space: nowrap;
−
}
+
 +
text-transform: uppercase;
 +
 +
transition: padding 0.3s, background 0.15s;
 +
}
  
−
ctx.globalAlpha = 1;
+
.main.nav .logo-name {
−
ctx.globalAlpha = 0.15;
+
cursor: pointer;
−
ctx.fillStyle = "#fFF";
+
 +
vertical-align: middle;
 +
 +
font-size: 1.5em;
 +
}
  
−
inc = 2 + Math.sqrt(Math.sqrt(q.area));
+
.main.nav .link-set {
−
ctx.shadowBlur = 1;
+
vertical-align: middle;
−
ctx.shadowColor = "#CCC";
+
margin-left: 3em;
−
ctx.save();
+
 +
white-space: nowrap;
 +
 +
-webkit-box-flex: 1;
 +
-ms-flex: 1;
 +
flex: 1;
 +
 +
transition: margin 0.3s;
 +
}
  
−
ctx.globalAlpha = 1;
+
.main.nav .link-set .link-item {
−
ctx.translate(-inc, -inc);
+
position: relative;
−
q.draw(ctx);
+
−
ctx.fill();
+
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;
 +
}
  
−
if (PRNG.random() < 0.1) {
+
.main.nav .link-set .link-item:hover,
−
var s = Math.min(20, Math.min(q.w, q.h) / 2);
+
.main.nav .link-set .link-item.selected {
−
var ps = offsetPolygon(q.points, s);
+
border-color: white;
 +
background: white;
 +
color: black !important;
 +
}
  
−
ctx.globalAlpha = 1;
+
.main.nav .link-set .link-item .expand-item-set-cont {
−
drawPath(ctx, ps);
+
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;
 +
}
  
−
ctx.strokeStyle = "#FFF";
+
.main.nav .link-set .link-item:hover .expand-item-set-cont {
−
if (PRNG.random() < 0.5) {
+
pointer-events: auto;
−
ctx.fillStyle = ctx.shadowColor = "#F06";
+
opacity: 1;
−
} else {
+
−
ctx.fillStyle = ctx.shadowColor = "#0FC";
+
margin-top: 0;
−
}
+
left: -2px; /* 10 + 2 */
−
if (q.area > Math.pow(h / 20, 2)) {
+
}
−
ctx.fillStyle = ctx.shadowColor = "#FC0";
+
−
}
+
  
−
ctx.shadowBlur = 10;
+
.main.nav .link-set .link-item .expand-item-set {
−
ctx.globalAlpha = 0.75;
+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
−
ctx.lineWidth = 2;
+
border: 1px solid rgba(0, 0, 0, 0.08);
−
ctx.fill();
+
border-radius: 3px;
−
}
+
overflow: hidden;
 +
}
  
−
ctx.restore();
+
.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>/* 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
 
});
 
});
  
−
buildings.forEach(function(q) {
+
window.contWrap = $(resp.responseText);
−
ctx.globalAlpha = 1;
+
 
−
ctx.globalAlpha = 0.15;
+
$(function () {
−
ctx.fillStyle = "#FFF";
+
$(".main.cont-wrap").append(window.contWrap);
−
ctx.shadowBlur = 1;
+
−
ctx.shadowColor = "#AAA";
+
−
var inc = 1;
+
−
var tot = 20 + PRNG.random() * 30 * 10;
+
−
ctx.save();
+
−
for (var i = 0; i < tot; i += inc) {
+
−
ctx.translate(-inc, -inc);
+
−
ctx.globalAlpha = Math.pow(i / tot * 0.75, 2);
+
−
// ctx.shadowColor = i%10 == 0 ? "#000" : "#DDD";
+
−
q.draw(ctx);
+
−
ctx.stroke();
+
−
}
+
−
ctx.restore();
+
−
ctx.globalAlpha = 0.15;
+
−
ctx.stroke();
+
 
});
 
});
  
−
var imgData = ctx.getImageData(0, 0, w, h);
+
window.onhashchange = function () {
−
imgData.data = noise(32, imgData.data, w, h);
+
window.location.reload(true);
−
ctx.putImageData(imgData, 0, 0);
+
};
 +
}
 +
</script>
  
−
landuse.forEach(function(q, id) {
+
<script>
−
if (!Boolean(q.glow)) return;
+
// delete #HQ_page .button
−
if (id % 3 == 0) {
+
$(function () {
−
ctx.save();
+
if (ADEBUG) return;
−
q.draw(ctx);
+
 
−
ctx.clip();
+
var styles = document.styleSheets;
 +
 
 +
if (styles) {
 +
styles = styles[0];
  
−
for (var i = 0; i < 10; i += 1) {
+
for (var i = 0; i < styles.cssRules.length; i++) {
−
ctx.translate(10, 10);
+
if (styles.cssRules[i].selectorText == "#HQ_page .button" ||
−
ctx.lineWidth = 3;
+
styles.cssRules[i].selectorText == "#HQ_page .button:hover") {
−
ctx.shadowBlur = 10;
+
// delete styles.cssRules[i];
−
ctx.globalCompositeOperation = "lighten";
+
styles.deleteRule(i);
−
ctx.shadowColor = ctx.strokeStyle = ctx.fillStyle = "#0AF";
+
i--;
−
ctx.globalAlpha = 0.8 - i / 10;
+
−
q.draw(ctx);
+
−
ctx.stroke();
+
 
}
 
}
−
ctx.restore();
+
}
 +
}
 +
});
 +
</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({});
 
}
 
}
 
});
 
});
  
−
ctx.restore();
+
$(".fake-link").each(function (i, dom) {
−
ctx.globalAlpha = 1;
+
dom = $(dom);
−
}
+
  
−
function drawPath(ctx, pts) {
+
dom.css("cursor", "pointer");
−
ctx.beginPath();
+
dom.click(function () {
−
pts.forEach(function(p) {
+
if (dom.data("href")) {
−
ctx.lineTo(p.x, p.y);
+
window.location = dom.data("href");
 +
}
 +
});
 
});
 
});
−
ctx.closePath();
 
−
}
 
  
−
//////////////////////////////////////////////////////////////
+
$(".main.cont-wrap").append($(".main.bottom-bar"));
  
−
var Q = function(x, y, w, h) {
+
var wrap;
−
this.x = x;
+
−
this.y = y;
+
−
this.w = w;
+
−
this.h = h;
+
−
this.points = [
+
−
new Point(this.x, this.y),
+
−
new Point(this.x + this.w, this.y),
+
−
new Point(this.x + this.w, this.y + this.h),
+
−
new Point(this.x, this.y + this.h)
+
−
];
+
−
this.area = this.w * this.h;
+
−
};
+
  
−
Q.prototype = {
+
if (ADEBUG) {
−
draw: function(ctx) {
+
wrap = window.contWrap;
−
ctx.beginPath();
+
} else {
−
ctx.moveTo(this.x, this.y);
+
wrap = $(".main.cont-wrap");
−
ctx.lineTo(this.x + this.w, this.y);
+
}
−
ctx.lineTo(this.x + this.w, this.y + this.h);
+
−
ctx.lineTo(this.x, this.y + this.h);
+
−
ctx.closePath();
+
−
},
+
−
split: function() {
+
−
if (this.w * this.h < 100) return [];
+
−
var ratio = Math.max(this.w, this.h) / Math.min(this.w, this.h);
+
−
if (ratio < 0.25 || ratio > 5) return [];
+
  
−
var x = this.x;
+
window.imgview = {};
−
var y = this.y;
+
imgview.refresh = function (init) {
 +
// image viewer
 +
wrap.find("img").not(".no-imgview").each(function (i, dom) {
 +
dom = $(dom);
  
−
var t0 = 0.5 + (PRNG.random() - 0.5) * 0.5;
+
var src = dom.attr("src");
−
var t1 = 0.5 + (PRNG.random() - 0.5) * 0.5;
+
  
−
var w = this.w * t0;
+
var img = new Image();
−
var h = this.h * t1;
+
−
var w2 = this.w * (1 - t0);
+
−
var h2 = this.h * (1 - t1);
+
  
−
return [
+
img.src = src;
−
new Q(x, y, w, h),
+
img.onload = function () {
−
new Q(x + w, y, w2, h),
+
if (init) {
−
new Q(x, y + h, w, h2),
+
var imgwrap = $("<div class='imgview'> \
−
new Q(x + w, y + h, w2, h2)
+
<div class='shade'> \
−
];
+
<div class='view-btn'>View</div> \
−
},
+
</div> \
−
stairs: function(ctx) {
+
</div>");
−
ctx.fillStyle = "#000";
+
  
−
var p0, p1, p2;
+
var modal = $("<div class='ui modal imgview-modal'> \
−
var id = PRNG.random() > 0.5 ? 0 : 1;
+
<div class='wrap'> \
−
p0 = this.points[0];
+
<img></img> \
−
p1 = this.points[1];
+
<div class='close-btn'><i class='cancel icon'></i></div> \
−
p2 = this.points[3];
+
</div> \
 +
</div>");
  
−
var a = 0;
+
var shade = imgwrap.find(".shade");
−
var w = this.w;
+
−
var step = 10 / this.h;
+
−
var x0 = p0.x, y0 = p0.y, y1;
+
  
−
for (var i = 0; i < 1; i += step) {
+
dom.after(imgwrap);
−
x0 += 3;
+
imgwrap.prepend(dom);
−
if (id == 0) {
+
−
y0 = lerp(i, p0.y, p2.y);
+
−
y1 = lerp(i + step, p0.y, p2.y);
+
−
} else {
+
−
y0 = lerp(1 - i, p0.y, p2.y);
+
−
y1 = lerp(1 - i + step, p0.y, p2.y);
+
−
}
+
−
a += 0.15;
+
−
ctx.globalAlpha = a;
+
  
−
ctx.beginPath();
+
modal.find(".close-btn").click(function () {
−
ctx.moveTo(x0, y0);
+
modal.modal("hide");
−
ctx.lineTo(p1.x, y0);
+
});
−
ctx.lineTo(p1.x, y1);
+
−
ctx.lineTo(x0, y1);
+
−
ctx.stroke();
+
−
ctx.fill();
+
  
−
ctx.translate(0, step * 0.5);
+
imgwrap.click(function () {
−
}
+
var bigimg = modal.find("img");
−
}
+
−
};
+
  
−
//////////////////////////////////////////////////////////////
+
bigimg.attr("src", src);
  
−
var Point = function(x, y) {
+
modal.modal("show");
−
this.x = x || 0;
+
});
−
this.y = y || 0;
+
} else {
−
return this;
+
var shade = dom.siblings(".shade");
−
};
+
}
−
Point.prototype = {
+
−
add: function(p) {
+
−
this.x += p.x;
+
−
this.y += p.y;
+
−
return this;
+
−
},
+
−
sub: function(p) {
+
−
this.x -= p.x;
+
−
this.y -= p.y;
+
−
return this;
+
−
},
+
−
clone: function() {
+
−
return new Point(this.x, this.y);
+
−
},
+
−
copy: function(p) {
+
−
this.x = p.x;
+
−
this.y = p.y;
+
−
return this;
+
−
},
+
−
set: function(x, y) {
+
−
this.x = x;
+
−
this.y = y;
+
−
return this;
+
−
},
+
−
length: function() {
+
−
return Math.sqrt(this.x * this.x + this.y * this.y);
+
−
},
+
−
normalize: function(value) {
+
−
var l = this.length();
+
−
this.x /= l;
+
−
this.y /= l;
+
−
if (value != null) this.multiplyScalar(value);
+
−
return this;
+
−
},
+
−
multiplyScalar: function(value) {
+
−
this.x *= value;
+
−
this.y *= value;
+
−
return this;
+
−
},
+
−
direction: function(other) {
+
−
return other.clone().sub(this).normalize();
+
−
},
+
−
negate: function() {
+
−
this.x *= -1;
+
−
this.y *= -1;
+
−
return this;
+
−
},
+
−
dot: function(p) {
+
−
return this.x * p.x + this.y * p.y;
+
−
},
+
−
equals: function(other) {
+
−
return this.x == other.x && this.y == other.y;
+
−
},
+
−
midpoint: function(other) {
+
−
return new Point((this.x + other.x) / 2, (this.y + other.y) / 2);
+
−
}
+
−
};
+
  
−
//////////////////////////////////////////////////////////////
+
shade.css({
 +
display: dom.css("display"),
 +
margin: dom.css("margin"),
 +
height: dom.css("height"),
 +
width: dom.css("width"),
 +
"line-height": dom.css("height"),
 +
});
 +
};
 +
});
 +
};
  
−
function noise(amount, data, w, h) {
+
imgview.refresh(true);
−
for (var y = 0; y < h; y++) {
+
−
for (var x = 0; x < w; x++) {
+
−
var id = (y * w + x) * 4;
+
−
var noise = ~~((PRNG.random() - 0.5) * amount);
+
−
data[id] += noise;
+
−
data[id + 1] += noise;
+
−
data[id + 2] += noise;
+
−
}
+
−
}
+
−
return data;
+
−
}
+
−
function squareDistance(x0, y0, x1, y1) {
+
−
return (x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1);
+
−
}
+
−
function distance(p0, p1) {
+
−
return Math.sqrt(squareDistance(p0.x, p0.y, p1.x, p1.y));
+
−
}
+
−
function circleContainsPoint(p, circle) {
+
−
return distance(circle, p) < circle.radius;
+
−
}
+
−
function offsetPolygon(points, offset) {
+
−
var tmp = [];
+
−
var count = points.length;
+
−
for (var j = 0; j < count; j++) {
+
−
// finds the previous, current and next point
+
−
var i = j - 1;
+
−
if (i < 0) i += count;
+
−
var k = (j + 1) % count;
+
  
−
var pre = points[i];
+
$(window).resize(function () {
−
var cur = points[j];
+
imgview.refresh();
−
var nex = points[k];
+
});
  
−
//create 2 lines, parallel to both edges at a given distance 'offset'
+
var scrollToTop = window.gradScroll = (function () {
 +
var a = 3;
 +
var p = 2;
 +
var delta = 1;
  
−
//computes a normal vector to the direction of the: prev -> current edge of length offset
+
return function (target) {
−
var l1 = distance(cur, pre);
+
var target = target || 0;
−
var n1 = new Point(
+
−
-((cur.y - pre.y) / l1) * offset,
+
−
(cur.x - pre.x) / l1 * offset
+
−
);
+
  
−
//does the same for the : current -> next edge
+
var top = $(".main.cont-wrap").scrollTop();
−
var l2 = distance(cur, nex);
+
−
var n2 = new Point(
+
−
-((nex.y - cur.y) / l2) * offset,
+
−
(nex.x - cur.x) / l2 * offset
+
−
);
+
  
−
//and create 2 points at both ends of the edge to obtain a parallel line
+
if (top < target || target < 0) return;
−
var p1 = new Point(pre.x + n1.x, pre.y + n1.y);
+
−
var p2 = new Point(cur.x + n1.x, cur.y + n1.y);
+
−
var p3 = new Point(cur.x + n2.x, cur.y + n2.y);
+
−
var p4 = new Point(nex.x + n2.x, nex.y + n2.y);
+
  
−
var ip = lineIntersectLine(p1, p2, p3, p4);
+
if (Math.abs(top - target) <= 3) {
−
if (ip != null) {
+
$(".main.cont-wrap").scrollTop(target);
−
tmp.push(ip);
+
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");
 
}
 
}
−
}
 
−
return tmp;
 
−
}
 
−
function lineIntersectLine(A, B, E, F, ABasSeg, EFasSeg) {
 
−
var a1, a2, b1, b2, c1, c2;
 
  
−
a1 = B.y - A.y;
+
if (top > 500) {
−
b1 = A.x - B.x;
+
$(".main.scroll-top-btn").addClass("show");
−
a2 = F.y - E.y;
+
} else {
−
b2 = E.x - F.x;
+
$(".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 denom = a1 * b2 - a2 * b1;
+
var glob = window;
−
if (denom == 0) {
+
−
return null;
+
−
}
+
  
−
c1 = B.x * A.y - A.x * B.y;
+
// remove some weird components
−
c2 = F.x * E.y - E.x * F.y;
+
(function () {
 +
$("#sideMenu").remove();
  
−
ip = new Point();
+
$("#top_menu_14").css({
−
ip.x = (b1 * c2 - b2 * c1) / denom;
+
top: "-20px",
−
ip.y = (a2 * c1 - a1 * c2) / denom;
+
"padding-bottom": "1rem",
 +
transition: "top 0.3s"
 +
});
  
−
if (A.x == B.x) ip.x = A.x;
+
var menu_trig = $("<div></div>");
−
else if (E.x == F.x) ip.x = E.x;
+
menu_trig.css({
−
if (A.y == B.y) ip.y = A.y;
+
position: "fixed",
−
else if (E.y == F.y) ip.y = E.y;
+
"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
  
−
if (ABasSeg) {
+
// menu
−
if (A.x < B.x ? ip.x < A.x || ip.x > B.x : ip.x > A.x || ip.x < B.x)
+
(function () {
−
return null;
+
function setMenuPos() {
−
if (A.y < B.y ? ip.y < A.y || ip.y > B.y : ip.y > A.y || ip.y < B.y)
+
setTimeout(function () {
−
return null;
+
$(".main.menu").width($(".main.cont-wrap").position().left);
−
}
+
}, 300);
−
if (EFasSeg) {
+
}
−
if (E.x < F.x ? ip.x < E.x || ip.x > F.x : ip.x > E.x || ip.x < F.x)
+
−
return null;
+
−
if (E.y < F.y ? ip.y < E.y || ip.y > F.y : ip.y > E.y || ip.y < F.y)
+
−
return null;
+
−
}
+
−
return ip;
+
−
}
+
  
−
function lerp(t, a, b) {
+
var open = false;
−
return a * (1 - t) + b * t;
+
−
}
+
  
−
var PRNG = {
+
function toggleMenu() {
−
a: 16807 /* multiplier */,
+
$(".main.view").toggleClass("open-menu");
−
m: 0x7fffffff /* 2**31 - 1 */,
+
setMenuPos();
−
randomnum: 1,
+
 
−
div: 1 / 0x7fffffff,
+
if ($(".main.view").hasClass("open-menu"))
−
nextlongrand: function(seed) {
+
setTimeout(function () {
−
var lo, hi;
+
$(".main.cont-wrap").click(closeMenu);
−
lo = this.a * (seed & 0xffff);
+
});
−
hi = this.a * (seed >> 16);
+
−
lo += (hi & 0x7fff) << 16;
+
−
if (lo > this.m) {
+
−
lo &= this.m;
+
−
++lo;
+
 
}
 
}
−
lo += hi >> 15;
+
 
−
if (lo > this.m) {
+
function closeMenu() {
−
lo &= this.m;
+
$(".main.view").removeClass("open-menu");
−
++lo;
+
$(".main.cont-wrap").off("click", closeMenu);
 
}
 
}
−
return lo;
 
−
},
 
−
random: function() /* return next random number */ {
 
−
this.randomnum = this.nextlongrand(this.randomnum);
 
−
return this.randomnum * this.div;
 
−
},
 
−
setSeed: function(value) {
 
−
this.randomnum = value <= 0 ? 1 : value;
 
−
}
 
−
};
 
  
−
//////////////////////////////////////////////////////////////
+
$(".main.menu-btn")
 +
.click(toggleMenu)
 +
.popup({
 +
content: "Menu",
 +
position: "right center",
 +
on: "manual"
 +
}).popup("show");
  
−
return {
+
setTimeout(function () {
−
gen: function () {
+
$(".main.menu-btn").popup("hide");
−
reset();
+
}, 3000);
−
}
+
−
};
+
−
};
+
−
})();
+
−
</script>
+
−
</head>
+
  
−
<style>
+
glob.Aquamade = {};
−
.page-home {
+
glob.Aquamade.menu = {
−
font-family: Veneer;
+
setBtnColor: function (color) {
−
}
+
$(".main.menu-btn").css("color", color);
−
+
},
−
.page-home .block {
+
−
padding: 7rem;
+
−
text-align: center;
+
−
}
+
  
−
.page-home .pad {
+
selectItem: function (name) {
−
padding: 2rem;
+
$(".main.menu .selected").removeClass("selected");
−
}
+
$(".main.menu .item.item-" + name).addClass("selected");
 +
},
  
−
.page-home .no-pad {
+
toggle: function () {
−
padding: 0;
+
toggleMenu();
−
}
+
}
 +
};
 +
})();
 +
 +
var bgeff = new BGEffect(".bg-layer");
 +
 +
// if (ADEBUG)
 +
// bgeff.oneFrame();
 +
// else
 +
 +
bgeff.start();
 +
});
 +
</script>
  
−
.page-home .title {
+
<div class="main view">
−
padding: 2rem 0;
+
<div class="main nav">
−
font-size: 3rem;
+
<a class="logo-name trex-go">Aquamade</a>
−
text-align: center;
+
<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>
  
−
.page-home .member {
+
<span class="nav link-item model">
−
display: inline-block;
+
<i class="angle down icon"></i>Modeling
−
margin: 1rem;
+
<div class="expand-item-set-cont">
−
width: 15rem;
+
<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>
  
−
.page-home .member .img {
+
<div class="main bottom-bar">
−
height: 15rem;
+
<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>
  
−
.page-home .main-title {
+
<div class="member-badge">
−
font-size: 9rem;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/d/d8/T--HFLS_H2Z_Hangzhou--img_member_sunny.jpg');"></div>
−
text-align: center;
+
Qingrui Sun
−
}
+
</div>
  
−
.page-home .blue {
+
<div class="member-badge">
−
color: #3498DB;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/9/9d/T--HFLS_H2Z_Hangzhou--img_member_yiming.jpg');"></div>
−
}
+
Yiming Rong
 +
</div>
  
−
.page-home .article {
+
<div class="member-badge">
−
display: inline-block;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/4/4a/T--HFLS_H2Z_Hangzhou--img_member_jiayue.jpg');"></div>
 +
Jiayue Guo
 +
</div>
  
−
text-align: left;
+
<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>
  
−
max-width: 50rem;
+
<div class="member-badge">
−
line-height: 1.2;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/9/96/T--HFLS_H2Z_Hangzhou--img_member_meiqi.jpg');"></div>
 +
Meiqi Yuan
 +
</div>
  
−
color: rgba(80, 80, 80, 1);
+
<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>
  
−
font-size: 1.5rem;
+
<div class="member-badge">
−
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/7/70/T--HFLS_H2Z_Hangzhou--img_member_eva.jpg');"></div>
−
}
+
Caiyi Feng
 +
</div>
  
−
.page-home .isocity {
+
<div class="member-badge">
−
position: absolute;
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/e/eb/T--HFLS_H2Z_Hangzhou--img_member_shuyun.jpg');"></div>
−
top: 0; left: 0;
+
Shuyun Zhang
−
opacity: 0.3;
+
</div>
−
width: 100%;
+
−
height: 100%;
+
−
}
+
−
</style>
+
  
−
<div class="page-home">
+
<div class="member-badge">
−
<div class="main-block fullscr no-pad block main-title">
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/9/9d/T--HFLS_H2Z_Hangzhou--img_member_daniel.jpg');"></div>
−
<div class="isocity"></div>
+
Tenghao Huang
−
<div class="main-effect"></div>
+
</div>
−
<div class="vcenter">
+
−
<span>A<span class="blue">q</span>uamade</span>
+
−
</div>
+
−
</div>
+
−
<div class="block">
+
−
<div class="title">What do we do</div>
+
−
<div class="article">
+
−
Physijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics newbies to get into 3D programming. Physijs takes that philosophy to heart and makes physics simulations just as easy to run. In fact, there are just five easy steps that must be taken to make a 3D scene come alive.
+
−
<br><br>
+
−
How does Physijs work?
+
−
<br><br>
+
−
Physijs is built on top of ammo.js (although there is also a cannon.js branch) and runs the physics simulation in a separate thread (via web worker) to avoid impacting in your application's performance and taking up your 3D rendering time.
+
−
<br><br>
+
−
A lot of effort has been made to keep the style of code the same when using Physijs. Apart from updating an object's position, all of the normal three.js conventions remain the same. If you are used to three.js, you already know how to use the Physijs plugin.
+
−
</div>
+
−
</div>
+
−
<div class="block" style="background: rgba(250, 250, 250, 1);">
+
−
<div class="title">Members</div>
+
−
<div class="pad member-box" style="text-align: center;"></div>
+
−
</div>
+
−
</div>
+
  
−
<script>
+
<div class="member-badge">
−
$(".page-home").ready(function () {
+
<div class="tiny-avatar" style="background-image: url('/wiki/images/6/63/T--HFLS_H2Z_Hangzhou--img_member_sam.jpg');"></div>
−
Aquamade.menu.selectItem("home");
+
Yining Huang
 +
</div>
  
−
var main = $(this);
+
<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>
  
−
var iso = Isocity(main.find(".isocity"));
+
<br>
  
−
setTimeout(iso.gen, 0);
+
<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>
  
−
function genMember(pic, name, descr) {
+
<div class="bg-layer"></div>
−
var mem = $('<div class="ui card member"> \
+
−
<div class="image"> \
+
<div class="main scroll-top-btn"><i class="fitted chevron up icon"></i></div>
−
<div class="img" style="background-image: url(\'' + pic + '\');"></div> \
+
−
</div> \
+
−
<div class="content"> \
+
−
<div class="header">' + name + '</div> \
+
−
<div class="meta"> \
+
−
<a>' + descr + '</a> \
+
−
</div> \
+
−
</div> \
+
−
</div>');
+
  
−
return mem;
+
<div class="main cont-wrap">
−
}
+
  
−
main.find(".member-box").append(genMember("/img/elliot.jpg", "Canal", "Beautiful"));
+
<!-- Concat with content -->
−
main.find(".member-box").append(genMember("/img/matt.jpg", "Sam", "Gorgeous"));
+
−
main.find(".member-box").append(genMember("/img/stevie.jpg", "Daniel", "Cool"));
+
−
});
+
  
−
</script>
 
 
</html>
 
</html>

Latest revision as of 14:17, 15 December 2017

Template loop detected: Template:HFLS H2Z Hangzhou<!DOCTYPE html>

Aquamade Home Achievement
Parts Collaborations
Project
Overview Background Design Enzyme Genetic Circuits Performance Chassis Selection
Modeling
Models Software
Safety Team
Member Attribution
Notebook
Protocols Interlab
Human Practices
Public Outreach Integrated

Team Members

Jianan Li
Qingrui Sun
Yiming Rong
Jiayue Guo
Zhiyuan Lu
Meiqi Yuan
Zhengyao Lin
Caiyi Feng
Shuyun Zhang
Tenghao Huang
Yining Huang
Yanyue Zhu

Sponsors

<!DOCTYPE html>
Aquamade Home Achievement
Parts Collaborations
Project
Overview Background Design Enzyme Genetic Circuits Performance Chassis Selection
Modeling
Models Software
Safety Team
Member Attribution
Notebook
Protocols Interlab
Human Practices
Public Outreach Integrated

Team Members

Jianan Li
Qingrui Sun
Yiming Rong
Jiayue Guo
Zhiyuan Lu
Meiqi Yuan
Zhengyao Lin
Caiyi Feng
Shuyun Zhang
Tenghao Huang
Yining Huang
Yanyue Zhu

Sponsors