Difference between revisions of "Team:BIT-China"

Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
 
     <meta charset="utf-8" />
 
     <meta charset="utf-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
     <title>iGEM</title>
 
     <title>iGEM</title>
 
     <style>
 
     <style>
−
        /*以下CSS用于解决iGEM官网坑爹样式问题*/
 
 
         body {
 
         body {
 
             height: 100%;
 
             height: 100%;
Line 28: Line 29:
 
             display: none;
 
             display: none;
 
         }
 
         }
−
    </style>
+
 
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&amp;ctype=text/css" />
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&amp;ctype=text/css" />
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&amp;ctype=text/css" />
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-template?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-template?action=raw&amp;ctype=text/css" />
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?action=raw&amp;ctype=text/css" />
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-nav-dot-style?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-nav-dot-style?action=raw&amp;ctype=text/css" />
 +
 
 
     <style>
 
     <style>
 
         .arr-style {
 
         .arr-style {
 
             cursor: pointer;
 
             cursor: pointer;
 
             position: absolute;
 
             position: absolute;
−
             right: 650px;
+
             left: calc(50vw - 50px);
−
             top: 480px;
+
             top: calc(100vh - 50px);
 
             width: 50px;
 
             width: 50px;
 
             height: 10px;
 
             height: 10px;
Line 48: Line 50:
 
             cursor: pointer;
 
             cursor: pointer;
 
             position: absolute;
 
             position: absolute;
−
             right: 50px;
+
             right: 20px;
−
             top: 550px;
+
             top: calc(100vh - 60px);
 
             width: 30px;
 
             width: 30px;
 
             height: 30px;
 
             height: 30px;
Line 62: Line 64:
 
             cursor: pointer;
 
             cursor: pointer;
 
             position: absolute;
 
             position: absolute;
−
             right: 50px;
+
             right: 20px;
−
             top: 550px;
+
             top: calc(100vh - 60px);
 
             width: 30px;
 
             width: 30px;
 
             height: 30px;
 
             height: 30px;
Line 71: Line 73:
 
             -moz-transition: all 1s;
 
             -moz-transition: all 1s;
 
             -ms-transition: all 1s;
 
             -ms-transition: all 1s;
−
        }
 
−
 
−
        .text1-old-pos {
 
−
            position: relative;
 
−
            left: -900px;
 
−
            top: -10px;
 
−
        }
 
−
 
−
        .text1-new-pos {
 
−
            position: relative;
 
−
            left: 900px;
 
−
            top: -10px;
 
−
            -webkit-transition: all 1s;
 
−
            -moz-transition: all 1s;
 
−
            -ms-transition: all 1s;
 
−
            transition: all 1s;
 
−
        }
 
−
 
−
        .text2-old-pos {
 
−
            position: relative;
 
−
            left: -300px;
 
−
            top: -70px;
 
−
        }
 
−
 
−
        .text2-new-pos {
 
−
            position: relative;
 
−
            left: 300px;
 
−
            top: -70px;
 
−
            -webkit-transition: all 1s;
 
−
            -moz-transition: all 1s;
 
−
            -ms-transition: all 1s;
 
−
            transition: all 1s;
 
 
         }
 
         }
  
Line 108: Line 78:
 
             z-index: 1;
 
             z-index: 1;
 
             position: absolute;
 
             position: absolute;
−
             /* right: -140px;
+
             left: calc(20vw + 350px);
−
             top: -165px; */
+
             top: calc(0vh + 200px);
−
            right: 140px;
+
−
            top: 165px;
+
  
 
             height: 380px;
 
             height: 380px;
Line 158: Line 126:
 
     <img id="imgA" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
 
     <img id="imgA" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
 
     <img id="imgA2" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
 
     <img id="imgA2" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
−
    <!-- end -->
 
  
 
     <div id="dowebok">
 
     <div id="dowebok">
 
         <div class="section" id="home_section_1">
 
         <div class="section" id="home_section_1">
−
             <div style="position: relative;display: block;">
+
             <img id="img1_2" style="z-index: 2;position: absolute;left: calc(63vw - 185px);top: 40px;height: 280px;width: 520px;display: block;"
−
                <img id="img1_1" style="z-index: 1;position: absolute;left: 280px;top: 30px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
+
                src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
−
                <img id="img1_2" style="z-index: 2;position: relative;right: -680px;top: -65px;height: 280px;width: 520px;display: block;"
+
            <img id="img1_1" style="z-index: 1;position: absolute;left:calc(63vw - 600px);top: 135px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
−
                    src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
+
 
−
                <div id="text1" class="text1-old-pos">
+
            <div style="position: absolute;left:calc(63vw + 20px);top:400px;">
 +
                <div id="text1">
 
                     <a class="a_style">
 
                     <a class="a_style">
 
                         BIO-DETECTOR OF ANTIOXIDANTS
 
                         BIO-DETECTOR OF ANTIOXIDANTS
Line 176: Line 144:
 
                     </p>
 
                     </p>
 
                 </div>
 
                 </div>
−
                <img onclick="arr_down()" class="arr-style" src="https://static.igem.org/mediawiki/2018/8/81/T--BIT-China--iGEM2018-arr_img.png">
 
 
             </div>
 
             </div>
 +
 +
            <img onclick="arr_down()" class="arr-style" src="https://static.igem.org/mediawiki/2018/8/81/T--BIT-China--iGEM2018-arr_img.png">
 
         </div>
 
         </div>
  
 
         <div class="section" id="home_section_2">
 
         <div class="section" id="home_section_2">
−
             <div style="position: relative;display: block;">
+
             <img id="img2_2" style="z-index: 2;position: absolute;left: 20vw;top: 0vh;height: 500px;width: 500px; transform:rotate(1deg);"
−
                 <img id="img2_1" class="img2_1-old-pos" src="https://static.igem.org/mediawiki/2018/a/a6/T--BIT-China--iGEM2018-img_home_3.png">
+
                 src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
−
                <img id="img2_2" style="z-index: 1;position: relative;right: -300px;top: -35px;height: 500px;width: 500px; transform:rotate(1deg);"
+
            <img id="img2_1" class="img2_1-old-pos" src="https://static.igem.org/mediawiki/2018/a/a6/T--BIT-China--iGEM2018-img_home_3.png">
−
                    src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
+
 
−
                <div id="text2" class="text2-old-pos">
+
 
 +
            <div style="position: absolute;left:calc(20vw + 40px);top:calc(0vh + 480px);">
 +
                <div id="text2">
 
                     <a class="a_style">
 
                     <a class="a_style">
 
                         WHAT’S SPECIAL
 
                         WHAT’S SPECIAL
Line 196: Line 167:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
 
         <div class="section" id="home_section_3">
 
         <div class="section" id="home_section_3">
 
         </div>
 
         </div>
 +
 
         <div class="section" id="home_section_4">
 
         <div class="section" id="home_section_4">
 
         </div>
 
         </div>
Line 210: Line 183:
 
     </div>
 
     </div>
  
−
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&ctype=text/javascript"></script>
+
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&amp;ctype=text/javascript"></script>
−
 
+
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&amp;ctype=text/javascript"></script>
−
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
+
 
     <script>
 
     <script>
 
         var left_side = document.getElementById('left-side'),
 
         var left_side = document.getElementById('left-side'),
Line 235: Line 207:
 
                 'navigation': true,  
 
                 'navigation': true,  
 
                 'anchors': [],  
 
                 'anchors': [],  
−
                 'afterRender': function () {  
+
                 'afterRender': function () {
−
                    text1.className = 'text1-new-pos';
+
−
 
+
 
                     left_side.classList.add('nope');
 
                     left_side.classList.add('nope');
  
Line 245: Line 215:
  
 
                     top_img.classList.add('top-old-style');
 
                     top_img.classList.add('top-old-style');
 +
 +
                    text1.classList.add('sleepyEyes');
 
                 },
 
                 },
−
                 'onLeave': function (index, nextIndex, direction) {
+
                 'onLeave': function (index, nextIndex, direction) {
 
                     if (nextIndex == 1) {
 
                     if (nextIndex == 1) {
−
                        text1.className = 'text1-old-pos';
 
−
 
 
                         left_side.classList.add('nope');
 
                         left_side.classList.add('nope');
  
Line 262: Line 232:
 
                         top_img.classList.remove('top-new-style');
 
                         top_img.classList.remove('top-new-style');
 
                         top_img.classList.add('top-old-style');
 
                         top_img.classList.add('top-old-style');
 +
 +
                        text1.classList.add('sleepyEyes');
 
                     }
 
                     }
 
                     if (nextIndex == 2) {
 
                     if (nextIndex == 2) {
−
 
 
                         img2_1.classList.remove('img2_1-new-pos');
 
                         img2_1.classList.remove('img2_1-new-pos');
 
                         img2_1.style.opacity = 0;
 
                         img2_1.style.opacity = 0;
  
−
                         text2.className = 'text2-old-pos';
+
                         text2.classList.add('glaucoma');
 
                     }
 
                     }
 +
 
                     if (index == 1) {
 
                     if (index == 1) {
 +
                        left_side.classList.remove('nope');
 +
                        text1.classList.remove('sleepyEyes');
 +
 
                         imgA.classList.remove('move-imgA');
 
                         imgA.classList.remove('move-imgA');
 
                         imgA2.classList.remove('move2-imgA');
 
                         imgA2.classList.remove('move2-imgA');
−
 
 
                         imgA.classList.add('imgA-move');
 
                         imgA.classList.add('imgA-move');
 
                         imgA.style.opacity = 0;
 
                         imgA.style.opacity = 0;
 
                         imgA.classList.add('imgA-new-pos');
 
                         imgA.classList.add('imgA-new-pos');
−
 
 
                         imgA2.classList.add('imgA-move2');
 
                         imgA2.classList.add('imgA-move2');
 
                         imgA2.classList.add('imgA-new-pos');
 
                         imgA2.classList.add('imgA-new-pos');
 
                         imgA2.style.opacity = 1;
 
                         imgA2.style.opacity = 1;
 +
 
                         top_img.classList.remove('top-old-style');
 
                         top_img.classList.remove('top-old-style');
 
                         top_img.classList.add('top-new-style');
 
                         top_img.classList.add('top-new-style');
Line 287: Line 261:
 
                         img2_1.classList.add('img2_1-new-pos');
 
                         img2_1.classList.add('img2_1-new-pos');
 
                         img2_1.classList.remove('gettinLifted');
 
                         img2_1.classList.remove('gettinLifted');
 +
 +
                        text2.classList.remove('glaucoma');
 
                     }
 
                     }
 
                 },
 
                 },
−
                 'afterLoad': function (anchorLink, index) {  
+
                 'afterLoad': function (anchorLink, index) {
−
                    if (index != 1) {
+
−
                        left_side.classList.remove('nope');
+
−
                    }
+
 
                     if (index == 1) {
 
                     if (index == 1) {
 
                         imgA2.style.opacity = 0;
 
                         imgA2.style.opacity = 0;
 
                         imgA.style.opacity = 1;
 
                         imgA.style.opacity = 1;
−
 
−
                        text1.className = 'text1-new-pos';
 
 
                     }
 
                     }
 
                     if (index == 2) {
 
                     if (index == 2) {
 
                         img2_1.classList.add('gettinLifted');
 
                         img2_1.classList.add('gettinLifted');
 
                         img2_1.style.opacity = 1;
 
                         img2_1.style.opacity = 1;
−
 
−
                        text2.className = 'text2-new-pos';
 
 
                     }
 
                     }
 
                 },
 
                 },

Revision as of 09:17, 21 August 2018

iGEM

  • PROJECT
  • EXPERIMENT
  • MODELING
  • HP
  • NOTEBOOK
  • ACHIEVEMENTS
  • TEAM
BIO-DETECTOR OF ANTIOXIDANTS

ROS plays a complicated roll in our daily life. It is a
crucial signal in living cells and it causes senescence,
thus it arouses great concerns of the public.

WHAT’S SPECIAL

There are many products that claim to have
the function of removing ROS for anti-aging.