Difference between revisions of "Team:DLUT China B"

(顶部使用轮播图，增加浏览器版本提示，为六个圈预留位置，解决onscroll覆盖问题。)
m
 
(13 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css">
−
    <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/slideshow.css&action=raw&ctype=text/css">
 
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css">
−
 
−
    <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/slideshow.js&action=raw&ctype=text/javascript"></script>
 
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script>
  
 
     <script>
 
     <script>
 
         function check() {
 
         function check() {
−
             if ((navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1) || (navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf("rv:11.0") > -1))
+
            let a = false, b = false;
 +
             if (navigator.userAgent.indexOf("compatible") > -1)
 +
                if (navigator.userAgent.indexOf("MSIE") > -1)
 +
                    a = true;
 +
            if (navigator.userAgent.indexOf('Trident') > -1)
 +
                if (navigator.userAgent.indexOf("rv:11.0") > -1)
 +
                    b = true;
 +
            if (a || b)
 
                 alert('We are sorry but Microsoft Internet Explorer may be too old to display this page correctly.\nIt is recommended to update your browser, otherwise your experience may suffer.');
 
                 alert('We are sorry but Microsoft Internet Explorer may be too old to display this page correctly.\nIt is recommended to update your browser, otherwise your experience may suffer.');
 
         }
 
         }
Line 23: Line 27:
 
<div id="dlutb">
 
<div id="dlutb">
 
     <div id="header">
 
     <div id="header">
 +
        <div id="team">DLUT_China_B</div>
 +
        <div id="nav"></div>
 
         <div id="box">
 
         <div id="box">
−
             <div id="box_img">
+
             <img src="https://static.igem.org/mediawiki/2018/4/47/T--DLUT_China_B--Top1.png">
−
                 <ul></ul>
+
            <div>
 +
                 <h2>Dr. Familict</h2>
 +
                <p>Hello! I’m a lovely Kidney baby, an essential organ in your body. Can you see those sparkling items
 +
                    pointed by my hand? Right! This is a wonderful liquid crystal show caused by the combination of
 +
                    β<sub>2</sub>-MG and nanobodies. What’s more, the different concentrations of β<sub>2</sub>-MG make
 +
                    the different degree of brightness showed by liquid crystal. We can make use of this phenomenon to
 +
                    achieve early detection of CKD caused mostly by diabetes and high blood pressure according to the
 +
                    brightness displayed by the detector confidently. Such an amazing idea, right?</p>
 
             </div>
 
             </div>
−
            <div id="word">
 
−
                <ul></ul>
 
−
            </div>
 
−
            <div id="controller">
 
−
                <div id="backward"><i class="fas fa-angle-left"></i></div>
 
−
                <div id="forward"><i class="fas fa-angle-right"></i></div>
 
−
            </div>
 
−
            <script>
 
−
                let data = [
 
−
                    {
 
−
                        "src": "https://static.igem.org/mediawiki/2018/2/29/T--DLUT_China_B--logo.png",
 
−
                        "title": "DLUT China B Logo",
 
−
                        "description": "DLUT China B Logo",
 
−
                    },
 
−
                    {
 
−
                        "src": "https://static.igem.org/mediawiki/2018/9/96/T--DLUT_China_B--laboratory.jpg",
 
−
                        "title": "Laboratory",
 
−
                        "description": "Laboratory.",
 
−
                    },
 
−
                    {
 
−
                        "src": "https://static.igem.org/mediawiki/2018/b/b6/T--DLUT_China_B--Clean_Bench.jpg",
 
−
                        "title": "Clean Bench",
 
−
                        "description": "Clean Bench.",
 
−
                    }
 
−
                ];
 
−
                $(document).ready(slideshow(data));
 
−
            </script>
 
 
         </div>
 
         </div>
−
 
−
        <div id="nav"></div>
 
 
         <br>
 
         <br>
 
     </div>
 
     </div>
  
−
    <h2 class="title">Circles</h2>
 
 
     <div id="circle">
 
     <div id="circle">
 
         <div class="tr">
 
         <div class="tr">
−
             <div class="td">a</div>
+
             <div class="td">
−
             <div class="td">b</div>
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Description">
−
             <div class="td">c</div>
+
                    <img src="https://static.igem.org/mediawiki/2018/b/b8/T--DLUT_China_B--Circle1.png" width="250">
 +
                    <div>Project</div>
 +
                </a>
 +
            </div>
 +
             <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/Parts">
 +
                    <img src="https://static.igem.org/mediawiki/2018/f/f0/T--DLUT_China_B--Circle2.png" width="250">
 +
                    <div>Parts</div>
 +
                </a>
 +
            </div>
 +
             <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel">
 +
                    <img src="https://static.igem.org/mediawiki/2018/c/c6/T--DLUT_China_B--Circle3.png" width="250">
 +
                    <div>Model</div>
 +
                </a>
 +
            </div>
 
         </div>
 
         </div>
 
         <div class="tr">
 
         <div class="tr">
−
             <div class="td">d</div>
+
             <div class="td">
−
             <div class="td">e</div>
+
                <a href="https://2018.igem.org/Team:DLUT_China_B/Applied_Design">
−
             <div class="td">f</div>
+
                    <img src="https://static.igem.org/mediawiki/2018/7/71/T--DLUT_China_B--Circle4.png" width="250">
 +
                    <div>Awards</div>
 +
                </a>
 +
            </div>
 +
             <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/Human_Practices">
 +
                    <img src="https://static.igem.org/mediawiki/2018/6/63/T--DLUT_China_B--Circle5.png" width="250">
 +
                    <div id="humanPracticesCircle"><p>Human<br>Practices</p></div>
 +
                </a>
 +
            </div>
 +
             <div class="td">
 +
                <a href="https://2018.igem.org/Team:DLUT_China_B/TeamMembers">
 +
                    <img src="https://static.igem.org/mediawiki/2018/0/06/T--DLUT_China_B--Circle6.png" width="250">
 +
                    <div>Team</div>
 +
                </a>
 +
            </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
  
 
     <div>
 
     <div>
−
         <h2 class="title">Chat Bubbles</h2>
+
         <h2 class="title">Click bubbles to chat with me</h2>
 
         <div id="chatBubbles"></div>
 
         <div id="chatBubbles"></div>
 
     </div>
 
     </div>
Line 122: Line 135:
 
                     "We have a lot of significant updates.（Of course we cannot make it as cool as  the Apple launch update)",
 
                     "We have a lot of significant updates.（Of course we cannot make it as cool as  the Apple launch update)",
 
                     "As an old friend, let me open the VIP channel for you.",
 
                     "As an old friend, let me open the VIP channel for you.",
−
                     'Click "Skip", then you will skip the project Introduction section.',
+
                     'Click "Skip", then you will skip the Project Introduction section.',
 
                     'Click "Listen", then you will acknowledge more details about our story.'
 
                     'Click "Listen", then you will acknowledge more details about our story.'
 
                 ],
 
                 ],
Line 160: Line 173:
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Human Practice",
+
                         question: "Human Practices",
−
                         answer: "humanPractice"
+
                         answer: "humanPractices"
 
                     },
 
                     },
 
                     {
 
                     {
Line 172: Line 185:
 
                 says: [
 
                 says: [
 
                     "Here is iGEM_DLUT_China_B.",
 
                     "Here is iGEM_DLUT_China_B.",
−
                     "I'll introduce our project for you.",
+
                     "I`ll introduce our project to you.",
−
                     "We know that there are many diseases in the world that can be predicted and cured,",
+
                     "Many diseases in the world severely threaten human health, but some of them can be predicted and cured.",
−
                     "and to achieve that, the first step is to understand the group of people which this disease prefers.",
+
                     "The first step to prevent disease is to figure out what kind of population may face higher risk.",
−
                     "For example, diabetic and hypertensive patients may suffer from chronic kidney disease.",
+
                     "For example, diabetic and hypertensive patients are more likely to suffer from chronic kidney disease.",
−
                     "Older people over the age of 60 may be suffering from Alzheimer's disease."
+
                     "People older than 60 are more likely to develop Alzheimer`s disease."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
Line 186: Line 199:
 
             },
 
             },
 
             "listen2": {
 
             "listen2": {
−
                 says: ["The second step is to have regular medical examination to intervene disease early to prevent its progression."],
+
                 says: ["The second step is to monitor regularly to intervene the occurrence and development of diseases timely."],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Yes, it makes sense, but how can that be achieved?",
+
                         question: "Yes, it makes sense. But how can it be achieved?",
 
                         answer: "listen3"
 
                         answer: "listen3"
 
                     }
 
                     }
Line 197: Line 210:
 
                 says: [
 
                 says: [
 
                     "You may not believe that",
 
                     "You may not believe that",
−
                     "we can know our physical condition through the urine.",
+
                     "we can know our current physical condition through urine.",
−
                     "Urine is regard as \"gold mine\" for the identification of disease markers."
+
                     "Urine is considered to be \"gold mine\" for the identification of disease markers."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
Line 209: Line 222:
 
             "listen4": {
 
             "listen4": {
 
                 says: [
 
                 says: [
−
                     "Absolutely, it's like a mirror that reflects one's health.",
+
                     "Absolutely. It`s like a mirror that reflects one`s health.",
−
                     "In the early stages of the disease, we can use the protein markers in the urine to screen the disease."
+
                     "In the early stages of a disease, we can use the protein markers in the urine to screen the disease."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "But how do you test it?",
+
                         question: "But how do you screen it?",
 
                         answer: "listen5"
 
                         answer: "listen5"
 
                     }
 
                     }
Line 220: Line 233:
 
             },
 
             },
 
             "listen5": {
 
             "listen5": {
−
                 says: ["To be honest, we use a very tiny nano-antibody, and liquid crystal sensor to show reaction results for us."],
+
                 says: ["We use nano-antibody combining with liquid crystal sensor to show the results for us."],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
Line 230: Line 243:
 
             "listen6": {
 
             "listen6": {
 
                 says: [
 
                 says: [
−
                     "In our daily life, we usually see the LCD screen is black. However, it becomes colorful as it works.",
+
                     "In our daily life, we usually find the LCD screen black. However, it becomes colorful when it works.",
−
                     "Our products are similar in principle.",
+
                     "Our products are similar to it in principle.",
−
                     "The combination of the nano-antibody and the protein in the urine resulted in a slight change in the liquid crystalline substrate.",
+
                     "The combination of the nano-antibody and the marked protein in urine will result in a slight change in the liquid crystalline substrate.",
−
                     "Changes in the brightness and color of the liquid crystal film,",
+
                     "It also causes changes in the brightness and color of the liquid crystal film.",
−
                     "so the liquid crystal brightness can directly reflect the antigen concentration."
+
                     "So the liquid crystal brightness can reflect the antigen concentration directly."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "That means we can see directly how we are physically in the state.",
+
                         question: "That means we can know whether we are sick and what extent the disease has progressed to.",
 
                         answer: "listen7"
 
                         answer: "listen7"
 
                     }
 
                     }
Line 246: Line 259:
 
                 says: [
 
                 says: [
 
                     "Yes, but we need to do a more accurate quantitative analysis.",
 
                     "Yes, but we need to do a more accurate quantitative analysis.",
−
                     "We take photos, and then grayscale processing and analysis of the average gray value.",
+
                     "We take photos, then perform greyscale processing and analyze the average greyscale.",
−
                     "This can correspond to the concentration-gray curve that we have reached, thus we can accurately obtain the content of the marker."
+
                     "In contrast to the concentration-gray curve we have obtained, we can obtain the concentration of the antigen accurately."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "You did something amazing!",
+
                         question: "You guys did something amazing!",
 
                         answer: "last"
 
                         answer: "last"
 
                     }
 
                     }
Line 283: Line 296:
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "Human Practice",
+
                         question: "Human Practices",
−
                         answer: "humanPractice"
+
                         answer: "humanPractices"
 
                     },
 
                     },
 
                     {
 
                     {
Line 294: Line 307:
 
             "projectIntroduction": {
 
             "projectIntroduction": {
 
                 says: [
 
                 says: [
−
                     "Wow, you chose the project as the destination.",
+
                     "Wow, you selected Project as the destination.",
 
                     "Are you ready to go?"
 
                     "Are you ready to go?"
 
                 ],
 
                 ],
Line 310: Line 323:
 
             "parts": {
 
             "parts": {
 
                 says: [
 
                 says: [
−
                     "Didi, you are about to reach parts.",
+
                     "Didi, you are about to reach Parts.",
 
                     "You will learn about the main components we use such as messages."
 
                     "You will learn about the main components we use such as messages."
 
                 ],
 
                 ],
Line 326: Line 339:
 
             "model": {
 
             "model": {
 
                 says: [
 
                 says: [
−
                     "Do you make the model as your destination?",
+
                     "Have you decided to make Model as your destination?",
 
                     "Project optimization and results will be exhibited here."
 
                     "Project optimization and results will be exhibited here."
 
                 ],
 
                 ],
Line 335: Line 348:
 
                     },
 
                     },
 
                     {
 
                     {
−
                         question: "I want a different destination.",
+
                         question: "I want another destination.",
 
                         answer: "dest"
 
                         answer: "dest"
 
                     }
 
                     }
Line 342: Line 355:
 
             "awards": {
 
             "awards": {
 
                 says: [
 
                 says: [
−
                     "You will find the treasures of application designing at the awards office."
+
                     "You will find the treasures of application design at Awards office."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
−
                         question: "Departure. (￣) ￣) ↗",
+
                         question: "Go. (￣) ￣) ↗",
 
                         answer: "goAwards"
 
                         answer: "goAwards"
 
                     },
 
                     },
Line 355: Line 368:
 
                 ]
 
                 ]
 
             },
 
             },
−
             "humanPractice": {
+
             "humanPractices": {
 
                 says: [
 
                 says: [
 
                     "We are committed to education and publicity.",
 
                     "We are committed to education and publicity.",
−
                     "Choose \"Learn more\" and will arrive at the human practice.",
+
                     "Choose \"Learn more\" and you will arrive at Human Practices.",
−
                     "Choose \"Back\", you can re-select the destination."
+
                     "Choose \"Back\", the destination will be reset."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
 
                     {
 
                     {
 
                         question: "Learn more",
 
                         question: "Learn more",
−
                         answer: "goHumanPractice"
+
                         answer: "goHumanPractices"
 
                     },
 
                     },
 
                     {
 
                     {
Line 374: Line 387:
 
             "teamworkAndCooperation": {
 
             "teamworkAndCooperation": {
 
                 says: [
 
                 says: [
−
                     "Choose \"Learn more\" will lead to team introduction,",
+
                     "Choose \"Learn more\", you will arrive at Team Introduction,",
−
                     "and learn about team members and collaboration between teams.",
+
                     "and learn about our team members and our collaborations with other teams.",
−
                     "Choose \"Back\", you can re-select the destination."
+
                     "Choose \"Back\", the destination will be reset."
 
                 ],
 
                 ],
 
                 reply: [
 
                 reply: [
Line 406: Line 419:
 
         };
 
         };
 
         goParts = function () {
 
         goParts = function () {
−
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/PartsOverview";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Parts";
 
         };
 
         };
 
         goModel = function () {
 
         goModel = function () {
−
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/ConditionOptimization";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel";
 
         };
 
         };
 
         goAwards = function () {
 
         goAwards = function () {
−
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/AppliedDesign";
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Applied_Design";
 
         };
 
         };
−
         goHumanPractice = function () {
+
         goHumanPractices = function () {
−
            console.log('aa');
+
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Human_Practices";
−
             window.location.href = "https://2018.igem.org/Team:DLUT_China_B/HumanPractice";
+
 
         };
 
         };
 
         goTeamworkAndCooperation = function () {
 
         goTeamworkAndCooperation = function () {
Line 425: Line 437:
 
             let winH = $(window).height(), /*获取窗口高度*/
 
             let winH = $(window).height(), /*获取窗口高度*/
 
                 scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/
 
                 scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/
−
                 top = $el.offsetTop;
+
                 top = $el.offsetTop; /*获取元素距离窗口顶部偏移高度*/
−
            /*获取元素距离窗口顶部偏移高度*/
+
 
             return top < scrollH + winH;
 
             return top < scrollH + winH;
 
         }
 
         }
Line 433: Line 444:
  
 
         function lazyLoad() {
 
         function lazyLoad() {
−
             if (document.getElementById("chat") == null && isShow(document.getElementById("chatBubbles"))) {
+
             if (document.getElementById("chat") == null)
−
                let chat = document.createElement("div");
+
                if (isShow(document.getElementById("chatBubbles"))) {
−
                chat.setAttribute("id", "chat");
+
                    let chat = document.createElement("div");
−
                document.getElementById("chatBubbles").appendChild(chat);
+
                    chat.setAttribute("id", "chat");
−
                chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
+
                    document.getElementById("chatBubbles").appendChild(chat);
−
                chatWindow.talk(conversation);
+
                    chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow");
−
            }
+
                    chatWindow.talk(conversation);
 +
                }
 
         }
 
         }
  

Latest revision as of 02:42, 18 October 2018

2018 iGEM_DLUT_B

Click bubbles to chat with me