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

Line 1: Line 1:
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
 +
<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/4/4c/T-NUDT_CHINA-bigheader-Public.jpg');}
  
−
<html>
+
    </style>
−
<h3>★ ALERT! </h3>
+
</head>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
  <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/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>
 +
            </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/Attributions" class="pure-menu-link">Attributions</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/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 & 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>
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
        <div id="main">
 +
        <div id="large-header" class="large-header">
 +
                    <canvas id="demo-canvas"></canvas>
 +
                    <h1 class="main-title">Engagement</span></h1>
 +
                </div>
 +
       
 +
 
 +
        <div class="content" style="width: 74%">
 +
       
 
</div>
 
</div>
−
<div class="clear"></div>
+
</div></div>
  
−
<div class="column half_size">
+
<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, " ");
 +
    }
 +
};
 +
}
  
−
<h1>Education and Public Engagement</h1>
+
</script>
−
<h3>Best Education and Public Engagement Special Prize</h3>
+
<script type="text/javascript">
−
<p>Over the last few years, we have seen teams produce some truly outstanding work in the areas of education and public engagement. Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices/views outside the lab.
+
( function(window,document){
  
−
<br><br>
+
    var layout  = document.getElementById('layout'),
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Education and Public Engagement prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
        menu    = document.getElementById('menu'),
−
<br><br>
+
        menuLink = document.getElementById('menuLink'),
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
        content  = document.getElementById('main');
−
</p>
+
−
</div>
+
  
 +
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
  
 +
        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);
 +
        }
  
 +
        element.className = classes.join(' ');
 +
    }
  
−
<div class="column half_size">
+
    function toggleAll(e) {
−
<h5>Inspiration</h5>
+
        var active = 'active';
−
<p>Here are a few examples of excellent Education and Public Engagement work:</p>
+
−
<ul>
+
−
<li><a href="https://2016.igem.org/Team:SCAU-China/Engagement">2016 SCAU-China</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">2016 Imperial College</a></li>
+
−
<li><a href="https://2015.igem.org/Team:UFMG_Brazil/Public_Engagement">2015 UFMG Brazil</a></li>
+
−
<li><a href="https://2015.igem.org/Team:William_and_Mary/Practices"> 2015 William and Mary</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();
 +
        };
 +
    }
  
−
<div class="clear"></div>
+
})();
 +
</script>
 +
</body>
 
</html>
 
</html>

Revision as of 17:08, 30 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