|
|
| (25 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 {
| + | |
| − | padding:1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #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:10rem"> | + | |
| − | 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:10rem">
| + | |
| − | 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:10rem">
| + | |
| − | 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}} |
