Difference between revisions of "Team:HFLS H2Z Hangzhou"

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

Revision as of 03:33, 24 June 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

Aquamade
What do we do
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.

How does Physijs work?

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.

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.
Members