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

(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/a/a5/T-NUDT_CHINA-bigheader-Description.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 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 class="pure-menu-heading"  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">Description</span></h1>
 +
                </div>
 +
       
  
 +
        <div class="content" style="width: 74%">
 +
       
 +
</div>
 +
</div></div>
  
−
<div class="column full_size">
+
<script type="text/javascript">
−
<h1>Description</h1>
+
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, " ");
 +
    }
 +
};
 +
}
  
−
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
+
</script>
 +
<script type="text/javascript">
 +
( function(window,document){
  
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
  
−
<h5>What should this page contain?</h5>
+
    function toggleClass(element, className) {
−
<ul>
+
        var classes = element.className.split(/\s+/),
−
<li> A clear and concise description of your project.</li>
+
            length = classes.length,
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
+
            i = 0;
−
<li>References and sources to document your research.</li>
+
−
<li>Use illustrations and other visual resources to explain your project.</li>
+
−
</ul>
+
  
 +
        for(; i < length; i++) {
 +
          if (classes[i] === className) {
 +
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
  
−
</div>
+
        element.className = classes.join(' ');
 +
    }
  
−
<div class="column full_size" >
+
    function toggleAll(e) {
 +
        var active = 'active';
  
−
<h5>Advice on writing your Project Description</h5>
+
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
  
−
<p>
+
    menuLink.onclick = function (e) {
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.
+
        toggleAll(e);
−
</p>
+
    };
  
−
<p>
+
    content.onclick = function(e) {
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
        if (menu.className.indexOf('active') !== -1) {
−
</p>
+
            toggleAll(e);
 +
        }
 +
    };
  
−
</div>
+
}(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() {
  
−
<div class="column half_size" >
+
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
  
−
<h5>References</h5>
+
    // Main
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
+
    initHeader();
 +
    addListeners();
  
−
</div>
+
    function initHeader() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        target = {x: 0, y: height};
  
 +
        largeHeader = document.getElementById('large-header');
 +
        largeHeader.style.height = height+'px';
  
−
<div class="column half_size" >
+
        canvas = document.getElementById('demo-canvas');
−
<h5>Inspiration</h5>
+
        canvas.width = width;
−
<p>See how other teams have described and presented their projects: </p>
+
        canvas.height = height;
 +
        ctx = canvas.getContext('2d');
  
−
<ul>
+
        // create particles
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Description">2016 Imperial College</a></li>
+
        circles = [];
−
<li><a href="https://2016.igem.org/Team:Wageningen_UR/Description">2016 Wageningen UR</a></li>
+
        for(var x = 0; x < width*0.5; x++) {
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> 2014 UC Davis</a></li>
+
            var c = new Circle();
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">2014 SYSU Software</a></li>
+
            circles.push(c);
−
</ul>
+
        }
−
</div>
+
        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:55, 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