Difference between revisions of "Team:NKU China/test"

 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{NKU_China/wiki}}
+
{{NKU_China/menubar}}
 
<html>
 
<html>
 
<head>
 
<head>
−
   
 
  
 
     <!--separatrix-->
 
     <!--separatrix-->
−
    <link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/wowslider/Home-team?action=raw&ctype=text/css">
 
−
    <link rel="stylesheet" href="css/style.css">
 
 
     <style>
 
     <style>
−
         main {
+
         .main#attributions {
−
             width: 98vw;
+
             padding: 0 10vw;
−
             height: calc(100vh - 18px);
+
             padding-bottom: 10vh;
−
             position: relative;
+
             font-size: 1.15rem;
 
         }
 
         }
  
−
         .window {
+
         .main div.h2 {
−
             width: 4vw;
+
             color: cyan;
−
             height: 4vw;
+
             text-align: left;
−
             position: absolute;
+
             font-size: 2rem;
 +
            padding-bottom: 1rem;
 
         }
 
         }
  
−
         #window1 ,#window4 .window-placeholder {
+
         article {
−
             left: 0;
+
             margin-bottom: 2.5rem;
−
            top: 0;
+
 
         }
 
         }
  
−
         #window2 ,#window3 .window-placeholder {
+
         #nutshell {
−
             right: 0;
+
             padding: 1rem 0;
−
            top: 0;
+
 
         }
 
         }
  
−
         #window3 ,#window2 .window-placeholder {
+
         #nutshell .article {
−
             left: 0;
+
             margin: 1rem 0.4rem;
−
             bottom: 0;
+
             line-height: 1.6rem;
 
         }
 
         }
  
−
         #window4 ,#window1 .window-placeholder {
+
         #nutshell .article div:first-child {
−
             right: 0;
+
             font-weight: bold;
−
             bottom: 0;
+
             color: cyan;
−
             /*height:calc(100vh - 18px - 8vw);*/
+
             text-indent: 0;
 
         }
 
         }
  
−
         .window > div {
+
         #details .p {
−
              
+
             line-height: 1.2;
−
        }
+
−
 
+
−
        .window-placeholder {
+
−
            width: 20px;
+
−
            height: 20px;
+
−
            position:absolute;
+
−
            z-index:15;
+
−
        }
+
−
 
+
−
        .window-placeholder img {
+
−
            width: 100%;
+
−
            height: 100%;
+
−
        }
+
−
 
+
−
        .window-content {
+
−
            width: 100%;
+
−
            height: 100%;
+
−
            display:none;
+
−
        }
+
−
 
+
−
        .window-content .p {
+
−
           
+
−
        }
+
−
 
+
−
        #wowslider-wrapper {
+
−
            margin: auto;
+
−
        }
+
−
 
+
−
        #wowslider-container1 {
+
−
            margin: 0;
+
 
         }
 
         }
 
     </style>
 
     </style>
 
     <script>
 
     <script>
−
         var vw = 0;
+
         $(function () {
−
        var vh = 0;
+
             //particles();
−
        function calibrate_ruler() {
+
         })
−
            vw = $('#ruler').width();
+
−
            vh = $('#ruler').height();
+
−
        };
+
−
 
+
−
        var exit_full_screen_png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNrsV+0NgyAQPS4dwAkau4Ej2clko7pBSRexh6XmQpGPivCHl1w0fLz3QJADgLBcoaN4UEzgQag+po2uN1odWOKLicnTcYkwEOQw8TFhiTtN8I6RBrwc3ARS3ezgGb8E5jlCOmI4ZhFooCh6XiBeIEIzEOIwkMR1F9biCY70DwOwJ65fkBHrAgnnYxNfdR0jeO5MWY4ZUNT/xgvQsYf7E0ff27sDU9dABozcBBYW/zFxqSDOTTQ0NDSASP0RZTqOt5MRCx7DzmMZC+cCLSFpCUlyQqIyCCqfCfSIS/O95MEFt8exmtAzMPhW6oHdEcMx1L+c1r6evwUYACKt3Vlo4XE8AAAAAElFTkSuQmCC';
+
−
        var full_screen_png = 'data:image/png;base64,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'
+
−
 
+
−
        function window_after(win) {
+
−
             function window1_after() {
+
−
 
+
−
            };
+
−
            function window2_after() {
+
−
 
+
−
            };
+
−
            function window3_after() {
+
−
 
+
−
            };
+
−
            function window4_after() {
+
−
                var window_content = win.children('.window-content');
+
−
                if (window_content.width() / window_content.height() > 4 / 3) {
+
−
                    $('#wowslider-wrapper').height(window_content.height())
+
−
                    $('#wowslider-wrapper').width(window_content.height() / 3 * 4)
+
−
                }
+
−
                else {
+
−
                    $('#wowslider-wrapper').width(window_content.width())
+
−
                    $('#wowslider-wrapper').height(window_content.width() / 4 * 3)
+
−
                }
+
−
 
+
−
            };
+
−
 
+
−
            switch(win.attr('id')) {
+
−
                case "window1": window1_after();
+
−
                    break;
+
−
                case "window2": window2_after();
+
−
                    break;
+
−
                case "window3": window3_after();
+
−
                    break;
+
−
                case "window4": window4_after();
+
−
                    break;
+
−
            }
+
−
         };
+
−
 
+
−
        function log(message) {
+
−
            console.log(message);
+
−
        }
+
−
 
+
 
     </script>
 
     </script>
 +
</head>
 +
<body id="dongzhuoer">
 +
    <div id="particles-js"></div>
 
     <script>
 
     <script>
 +
        particlesJS('particles-js',
 +
  {
 +
      "particles": {
 +
          "number": {
 +
              "value": 100,
 +
              "density": {
 +
                  "enable": true,
 +
                  "value_area": 800
 +
              }
 +
          },
 +
          "color": {
 +
              "value": "#0ff"
 +
          },
 +
          "shape": {
 +
              "type": "circle",
 +
              "stroke": {
 +
                  "width": 0,
 +
                  "color": "#000000"
 +
              },
 +
              "polygon": {
 +
                  "nb_sides": 5
 +
              },
 +
              "image": {
 +
                  "src": "img/github.svg",
 +
                  "width": 100,
 +
                  "height": 100
 +
              }
 +
          },
 +
          "opacity": {
 +
              "value": 0.4,
 +
              "random": false,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 1,
 +
                  "opacity_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "size": {
 +
              "value": 5,
 +
              "random": true,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 40,
 +
                  "size_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "line_linked": {
 +
              "enable": true,
 +
              "distance": 150,
 +
              "color": "#ff0",
 +
              "opacity": 0.4,
 +
              "width": 1
 +
          },
 +
          "move": {
 +
              "enable": true,
 +
              "speed": 6,
 +
              "direction": "none",
 +
              "random": false,
 +
              "straight": false,
 +
              "out_mode": "out",
 +
              "attract": {
 +
                  "enable": true,
 +
                  "rotateX": 600,
 +
                  "rotateY": 1200
 +
              }
 +
          }
 +
      },
 +
      "interactivity": {
 +
          "detect_on": "canvas",
 +
          "events": {
 +
              "onhover": {
 +
                  "enable": true,
 +
                  "mode": ["grab", "bubble"]
 +
              },
 +
              "onclick": {
 +
                  "enable": true,
 +
                  "mode": ["push", "repulse"]
 +
              },
 +
              "resize": true
 +
          },
 +
          "modes": {
 +
              "grab": {
 +
                  "distance": 100,
 +
                  "line_linked": {
 +
                      "opacity": 0.75
 +
                  }
 +
              },
 +
              "bubble": {
 +
                  "distance": 100,
 +
                  "size": 4,
 +
                  "duration": 2,
 +
                  "opacity": 8,
 +
                  "speed": 5
 +
              },
 +
              "repulse": {
 +
                  "distance": 200
 +
              },
 +
              "push": {
 +
                  "particles_nb": 4
 +
              },
 +
              "remove": {
 +
                  "particles_nb": 2
 +
              }
 +
          }
 +
      },
 +
      "retina_detect": true,
 +
      "config_demo": {
 +
          "hide_card": false,
 +
          "background_color": "#b61924",
 +
          "background_image": "",
 +
          "background_position": "50% 50%",
 +
          "background_repeat": "no-repeat",
 +
          "background_size": "cover"
 +
      }
 +
  }
  
−
        $(function () {
+
);
−
            $('.window-placeholder img').attr('src', full_screen_png);
+
−
 
+
−
            calibrate_ruler();
+
−
            $(window).resize(calibrate_ruler)
+
−
 
+
−
            function open(win) {
+
−
                win.children('.window-placeholder').children('img').attr('src', exit_full_screen_png);
+
−
                win.children('.window-content').show();
+
−
                win.css('opacity', 0);
+
−
                win.animate({
+
−
                    width: '94vw',
+
−
                    height: 100*vh-4*vw-18,
+
−
                    opacity:1,
+
−
                }, 2000, function () {
+
−
                    window_after(win);
+
−
                });
+
−
            }
+
−
            function close(win) {
+
−
                win.animate({
+
−
                    width: '4vw',
+
−
                    height: '4vw',
+
−
                    opacity: 0,
+
−
                }, 2000, function () {
+
−
                    win.children('.window-placeholder').children('img').attr('src', full_screen_png);
+
−
                    win.children('.window-content').hide();
+
−
                    win.css('opacity', 1);
+
−
                });
+
−
               
+
−
            }
+
−
 
+
−
            open($('#window1'))
+
−
            close($('#window1'))
+
−
            setTimeout(function () { open($('#window2')); close($('#window2')) }, 4000)
+
−
            setTimeout(function () { open($('#window3')); close($('#window3')) }, 8000)
+
−
            setTimeout(function () { open($('#window4')); close($('#window4')) }, 12000)
+
−
            setTimeout(function () { open($('#window4')) }, 17000)
+
−
 
+
−
            $('.window-placeholder img').each(function (index, value) {
+
−
                $(value).click(function () {
+
−
                   
+
−
                    if($(value).attr('src') == full_screen_png )
+
−
                        open($('#window' + (index+1)))
+
−
                    else
+
−
                        close($('#window' + (index + 1)))
+
−
                })
+
−
               
+
−
 
+
−
            })
+
−
 
+
−
 
+
−
        })
+
 
     </script>
 
     </script>
−
</head>
+
     <div class="main" id="attributions">
−
<body>
+
         <div class="p">
−
     <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
+
             haha
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <div>haha</div>
+
−
    <main>
+
−
         <div id="window1" class="window">
+
−
            <div class="window-placeholder"><img src=""></div>         
+
−
            <div class="window-content" style="background-color:aqua">
+
−
                <div class="p" style="font-size:3rem">
+
−
                    Project
+
−
                </div>
+
−
               
+
−
             </div>
+
 
         </div>
 
         </div>
−
        <div id="window2" class="window">
+
    </div>
−
            <div class="window-placeholder"><img src=""></div>
+
−
            <div class="window-content" style="background-color:blue">
+
−
                <div class="p" style="font-size:3rem">
+
−
                    Human Pratice
+
−
                </div>
+
−
               
+
−
            </div>
+
−
        </div>
+
−
        <div id="window3" class="window">
+
−
            <div class="window-placeholder"><img src=""></div>
+
−
            <div class="window-content" style="background-color:cyan">
+
−
                <div class="p" style="font-size:3rem">
+
−
                    Results
+
−
                </div>
+
−
               
+
−
            </div>
+
−
        </div>
+
−
        <div id="window4" class="window">
+
−
            <div class="window-placeholder"><img src=""></div>
+
−
            <div class="window-content">
+
−
                <div id="wowslider-wrapper">
+
−
                    <div id="wowslider-container1">
+
−
                        <div class="ws_images">
+
−
                            <ul>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--whole-group-4-3-1366.jpg" alt="Team" title="Team" id="wows1_0" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/f/fc/T--NKU_China--xiongyuxiu-4-3-1366.jpg" alt="Yuxiu Xiong" title="Yuxiu Xiong" id="wows1_1" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/1/19/T--NKU_China--chenchen-1366.jpg" alt="Chen Chen" title="Chen Chen" id="wows1_2" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/3/3a/T--NKU_China--liuxiao-4-3-1366.jpg" alt="Xiao Liu" title="Xiao Liu" id="wows1_3" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/b/be/T--NKU_China--dailiangti-1366.jpg" alt="Liangti Dai" title="Liangti Dai" id="wows1_4" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/a/a6/T--NKU_China--dongzhuoer-1366.jpg" alt="Zhuoer Dong" title="Zhuoer Dong" id="wows1_5" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NKU_China--zhaoxianglin-1366.jpg" alt="Xianglin Zhao" title="Xianglin Zhao" id="wows1_6" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/4/44/T--NKU_China--mengfankang-1366.jpg" alt="Fankang Meng" title="Fankang Meng" id="wows1_7" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/f/f0/T--NKU_China--songcunjiang-1366.jpg" alt="Cunjiang Song" title="Cunjiang Song" id="wows1_8" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/4/4c/T--NKU_China--zhangmengxian-1366.jpg" alt="Mengxian Zhang" title="Mengxian Zhang" id="wows1_9" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/6/68/T--NKU_China--songxinghao-1366.jpg" alt="Xinhao Song" title="Xinhao Song" id="wows1_10" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--zhangzhaoran-4-3-1366.jpg" alt="Zhaoran Zhang" title="Zhaoran Zhang" id="wows1_11" /></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/c/ca/T--NKU_China--maxinyu-1366.jpg" alt="Ma Xinyu" title="Ma Xinyu" id="wows1_12" /></li>
+
−
                                <li><a href="http://wowslider.com"><img src="https://static.igem.org/mediawiki/2016/1/10/T--NKU_China--qiaomingqiang-4-3-1366.jpg" alt="wowslider" title="Mingqiang Qiao" id="wows1_13" /></a></li>
+
−
                                <li><img src="https://static.igem.org/mediawiki/2016/1/1f/T--NKU_China--shifuchen-1366.jpg" alt="Fuchen Shi" title="Fuchen Shi" id="wows1_14" /></li>
+
−
                            </ul>
+
−
                        </div>
+
−
                        <div class="ws_bullets">
+
−
                            <div>
+
−
                                <a href="#" title="Team"><span>1</span></a>
+
−
                                <a href="#" title="Yuxiu Xiong"><span>2</span></a>
+
−
                                <a href="#" title="Chen Chen"><span>3</span></a>
+
−
                                <a href="#" title="Xiao Liu"><span>4</span></a>
+
−
                                <a href="#" title="Liangti Dai"><span>5</span></a>
+
−
                                <a href="#" title="Zhuoer Dong"><span>6</span></a>
+
−
                                <a href="#" title="Xianglin Zhao"><span>7</span></a>
+
−
                                <a href="#" title="Fankang Meng"><span>8</span></a>
+
−
                                <a href="#" title="Cunjiang Song"><span>9</span></a>
+
−
                                <a href="#" title="Mengxian Zhang"><span>10</span></a>
+
−
                                <a href="#" title="Xinhao Song"><span>11</span></a>
+
−
                                <a href="#" title="Zhaoran Zhang"><span>12</span></a>
+
−
                                <a href="#" title="Ma Xinyu"><span>13</span></a>
+
−
                                <a href="#" title="Mingqiang Qiao"><span>14</span></a>
+
−
                                <a href="#" title="Fuchen Shi"><span>15</span></a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="ws_shadow"></div>
+
−
                    </div>
+
−
                    <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/wowslider?action=raw&ctype=text/javascript"></script>
+
−
                    <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
    </main>
+
−
 
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{NKU_China/footer}}

Latest revision as of 08:07, 7 October 2016

haha