(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/7/71/T-NUDT_CHINA-bigheader-Results.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 href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li> | ||
+ | <li class="pure-menu-item"><a class="pure-menu-heading" 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">Results</span></h1> | ||
+ | </div> | ||
+ | |||
− | <div class=" | + | <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, " "); | ||
+ | } | ||
+ | }; | ||
+ | } | ||
− | < | + | </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'); | |
− | + | ||
− | + | ||
− | + | 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(' '); | |
+ | } | ||
− | + | function toggleAll(e) { | |
+ | var active = 'active'; | ||
− | + | 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:10, 28 October 2017