Difference between revisions of "Team:NUDT CHINA/Design"

(Prototype team page)
 
Line 1: Line 1:
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
−
<html>
+
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <link rel="stylesheet" href="basic.css">
 +
    <style type="text/css">
 +
p {font-variant: stacked-fractions;
 +
font-size: large;}
 +
.pure-g p{font-variant: stacked-fractions;
 +
font-size: large;}
 +
.main-title{padding-top:50%; padding-bottom:50%;width:100%;}
 +
.main{width:90%;}
 +
.main-title::before {
 +
content: '';
 +
width: 20vw;
 +
height: 20vw;
 +
min-width: 3.5em;
 +
min-height: 3.5em;
 +
background: url(https://static.igem.org/mediawiki/2017/f/fe/T-NUDT_CHINA-BigTitle.svg) no-repeat center center;
 +
background-size: cover;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
border-radius: 50%;
 +
z-index: 3;
 +
-webkit-transform: translate3d(-50%,-50%,0);
 +
transform: translate3d(-50%,-50%,0);}
 +
.large-header {
 +
background-image: url('https://static.igem.org/mediawiki/2017/2/2d/T-NUDT_CHINA-bigheader-Design.jpg');}
  
 +
    </style>
 +
</head>
 +
 
 +
  <div id="layout">
 +
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
        <div id="menu">
 +
        <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a class="pure-menu-heading"  href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Sliver HP</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated and Gold</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 +
              <ul class="pure-menu-children" id="award_show">
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
            </ul>
 +
            </li>
 +
               
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="main">
 +
        <div id="large-header" class="large-header">
 +
                    <canvas id="demo-canvas"></canvas>
 +
                    <h1 class="main-title">Design</span></h1>
 +
                </div>
 +
       
  
 +
        <div class="content" style="width: 74%">
 +
       
 +
</div>
 +
</div></div>
  
 +
<script type="text/javascript">
 +
function send(num) {
 +
  var openClass = 'is-open';
 +
var add1=document.getElementById(num);
 +
var add2=document.getElementById('Lay'+num);
 +
addClass(add1,openClass);
 +
addClass(add2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
function addClass(element,csName){
 +
　　　　　　　if(!hasClass(element,csName)){
 +
 +
　　　　　　　　　element.className+=' '+csName;
 +
 +
　　　　　　}
 +
};}
 +
function show(num) {
 +
var openClass = 'is-open';
 +
var remove1=document.getElementById(num);
 +
var remove2=document.getElementById('Lay'+num);
 +
deleteClass(remove1,openClass);
 +
deleteClass(remove2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
　 function deleteClass(element,csName){   
 +
if (hasClass(element,csName)) {
 +
        var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)");
 +
        element.className = element.className.replace(reg, " ");
 +
    }
 +
};
 +
}
  
−
<div class="column full_size">
+
</script>
−
<h1>Design</h1>
+
<script type="text/javascript">
−
<p>
+
( function(window,document){
−
Design is the first step in the design-build-test cycle in engineering and synthetic biology. Use this page to describe the process that you used in the design of your parts. You should clearly explain the engineering principles used to design your project.
+
−
</p>
+
  
−
<p>
+
    var layout  = document.getElementById('layout'),
−
This page is different to the "Applied Design Award" page. Please see the <a href="https://2017.igem.org/Team:NUDT_CHINA/Applied_Design">Applied Design</a> page for more information on how to compete for that award.
+
        menu    = document.getElementById('menu'),
−
</p>
+
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
  
−
</div>
+
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
  
−
<div class="column half_size">
+
        for(; i < length; i++) {
−
<h5>What should this page contain?</h5>
+
          if (classes[i] === className) {
−
<ul>
+
            classes.splice(i, 1);
−
<li>Explanation of the engineering principles your team used in your design</li>
+
            break;
−
<li>Discussion of the design iterations your team went through</li>
+
          }
−
<li>Experimental plan to test your designs</li>
+
        }
−
</ul>
+
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
  
−
</div>
+
        element.className = classes.join(' ');
 +
    }
  
−
<div class="column half_size">
+
    function toggleAll(e) {
−
<h5>Inspiration</h5>
+
        var active = 'active';
−
<ul>
+
 
−
<li><a href="https://2016.igem.org/Team:MIT/Experiments/Promoters">2016 MIT</a></li>
+
        e.preventDefault();
−
<li><a href="https://2016.igem.org/Team:BostonU/Proof">2016 BostonU</a></li>
+
        toggleClass(layout, active);
−
<li><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">2016 NCTU Formosa</a></li>
+
        toggleClass(menu, active);
−
</ul>
+
        toggleClass(menuLink, active);
−
</div>
+
    }
 +
 
 +
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
 +
 
 +
    content.onclick = function(e) {
 +
        if (menu.className.indexOf('active') !== -1) {
 +
            toggleAll(e);
 +
        }
 +
    };
 +
 
 +
}(this, this.document));
 +
</script>
 +
 
 +
<script type="text/javascript" >
 +
    function Show(tagId) {
 +
    if (document.getElementById(tagId).style.display=="none") {
 +
    document.getElementById(tagId).style.display="block";
 +
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
<script type="text/javascript" >
 +
(function() {
 +
 
 +
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
 +
 
 +
    // Main
 +
    initHeader();
 +
    addListeners();
 +
 
 +
    function initHeader() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        target = {x: 0, y: height};
 +
 
 +
        largeHeader = document.getElementById('large-header');
 +
        largeHeader.style.height = height+'px';
 +
 
 +
        canvas = document.getElementById('demo-canvas');
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
        ctx = canvas.getContext('2d');
 +
 
 +
        // create particles
 +
        circles = [];
 +
        for(var x = 0; x < width*0.5; x++) {
 +
            var c = new Circle();
 +
            circles.push(c);
 +
        }
 +
        animate();
 +
    }
 +
 
 +
    // Event handling
 +
    function addListeners() {
 +
        window.addEventListener('scroll', scrollCheck);
 +
        window.addEventListener('resize', resize);
 +
    }
 +
 
 +
    function scrollCheck() {
 +
        if(document.body.scrollTop > height) animateHeader = false;
 +
        else animateHeader = true;
 +
    }
 +
 
 +
    function resize() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        largeHeader.style.height = height+'px';
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
    }
 +
 
 +
    function animate() {
 +
        if(animateHeader) {
 +
            ctx.clearRect(0,0,width,height);
 +
            for(var i in circles) {
 +
                circles[i].draw();
 +
            }
 +
        }
 +
        requestAnimationFrame(animate);
 +
    }
 +
 
 +
    // Canvas manipulation
 +
    function Circle() {
 +
        var _this = this;
 +
 
 +
        // constructor
 +
        (function() {
 +
            _this.pos = {};
 +
            init();
 +
            console.log(_this);
 +
        })();
  
 +
        function init() {
 +
            _this.pos.x = Math.random()*width;
 +
            _this.pos.y = height+Math.random()*100;
 +
            _this.alpha = 0.1+Math.random()*0.3;
 +
            _this.scale = 0.1+Math.random()*0.3;
 +
            _this.velocity = Math.random();
 +
        }
  
 +
        this.draw = function() {
 +
            if(_this.alpha <= 0) {
 +
                init();
 +
            }
 +
            _this.pos.y -= _this.velocity;
 +
            _this.alpha -= 0.0005;
 +
            ctx.beginPath();
 +
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
 +
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
 +
            ctx.fill();
 +
        };
 +
    }
  
 +
})();
 +
</script>
 +
</body>
 
</html>
 
</html>

Revision as of 01:59, 28 October 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM