Team:NUDT CHINA/HP/Gold Integrated

<style>

html, body {

 padding: 0; margin: 0;
 height: 100%;

}

.contain{

 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 height: 100%;}
 

.contain .box {

    height: 50%;
    width: 33.333%;
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: 50% 50%;
    -webkit-transition: background-size 0.275s ease-in-out;
    transition: background-size 0.275s ease-in-out;
    flex-grow: 1;
    cursor: pointer;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;   

} .contain .box:hover{

      background-size: 100%;
    }
    
   .box-info {
      background: rgba( 35, 35, 35, 0.7 );
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      -webkit-transition: opacity 0.45s ease-in-out;
    transition: opacity 0.45s ease-in-out;
      
      text-align: center;
      padding-bottom: 40%;
      padding-top: 40%;
      font-weight: 900;
      font-size: 30px;
      font-family: "Lato", Helvetica, Arial, sans-serif;
      color: #fff;
      
      
      opacity: 0;
 }     
      .box-info:hover{
        opacity: 1;
      }
      .box-info a{color: white; width: 100%;}
      
    }
    
  }
 

} </style>

     <a>Design</a>

     <a>Marcket Demand</a>

     <a>Application prospect</a>

     <a>Safety</a>

     <a>Policy</a>

     <a>Idea Exchanging</a>

     <a>Science Popularization</a>

     <a>Education</a>

</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>