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

(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://2017.igem.org/File:T-NUDT_CHINA-bigheader-Notebook.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 class="pure-menu-heading" 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">Notebook</span></h1>
 +
                </div>
 +
       
  
−
<div class="column full_size">
+
        <div class="content" style="width: 74%">
 +
       
 +
</div>
 +
</div></div>
  
−
<h1>Notebook</h1>
+
<script type="text/javascript">
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
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>
+
</script>
−
<div class="clear"></div>
+
<script type="text/javascript">
 +
( function(window,document){
  
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
  
−
<div class="column half_size">
+
    function toggleClass(element, className) {
−
<h5>What should this page have?</h5>
+
        var classes = element.className.split(/\s+/),
−
<ul>
+
            length = classes.length,
−
<li>Chronological notes of what your team is doing.</li>
+
            i = 0;
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
+
        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 class="column half_size">
+
        element.className = classes.join(' ');
−
<h5>Inspiration</h5>
+
    }
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>
+
    function toggleAll(e) {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
        var active = 'active';
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
−
</ul>
+
  
−
</div>
+
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
 +
 
 +
    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 02:04, 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