Difference between revisions of "Team:NCTU Formosa"

Line 1: Line 1:
−
{{NCTU_Formosa/mw-legacy.css}}
+
<html lang="en">
−
{{NCTU_Formosa/header}}
+
−
<html>
+
  
−
<body>
+
<head>
−
     <header id="headerbackground">
+
     <meta charset="UTF-8">
−
        <img src="https://static.igem.org/mediawiki/2021/7/7a/T--NCTU_Formosa--main_bg_400.svg" alt="Background"
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
            title="Background" id="Background">
+
    <link rel="preconnect" href="https://2021.igem.org">
−
         <img src="https://static.igem.org/mediawiki/2021/e/e8/T--NCTU_Formosa--next.svg" id="nextBtn" />
+
    <link type="text/css" rel="stylesheet"
−
     </header>
+
        href="https://2021.igem.org/wiki/index.php?title=Template:NCTU_Formosa/clearwikidefaultcss.css&action=raw&ctype=text/css" />
−
     <main>
+
    <link type="text/css" rel="stylesheet"
−
         <article id="firstpart">
+
         href="https://2021.igem.org/wiki/index.php?title=Template:NCTU_Formosa/modern-normalize.min.css&action=raw&ctype=text/css" />
−
            <h2 class="topic" id="topic1">
+
     <link type="text/css" rel="stylesheet"
−
                Background
+
        href="https://2021.igem.org/wiki/index.php?title=Template:NCTU_Formosa/font.css&action=raw&ctype=text/css" />
−
            </h2>
+
     <link type="text/css" rel="stylesheet"
−
            <section>
+
         href="https://2021.igem.org/wiki/index.php?title=Template:NCTU_Formosa/icon.css&amp;action=raw&amp;ctype=text/css" />
−
                After the Industrial Revolution, the widespread availability of sucrose and highly processed
+
    <script
−
                 foods.<br>Led to the caries rate skyrocketed.
+
        src="https://2021.igem.org/wiki/index.php?title=Template:NCTU_Formosa/jquery.min.css&action=raw&ctype=text/javascript">
−
             </section>
+
    </script>
−
            <img src="https://static.igem.org/mediawiki/2021/1/1c/T--NCTU_Formosa--factory.svg" class="images-b" id="food1"
+
    <script>
−
                 alt="food1" />
+
        var jq3 = jQuery.noConflict(true);
 +
        jq3(() => {
 +
            if (!(window.location.href.indexOf("Template") != -1)) {
 +
                 jq3('link[rel=stylesheet][href^="https://2021.igem.org/wiki/load.php?debug=false"]').remove();
 +
             }
 +
            jq3('p:empty').remove();
 +
            jq3('#mw-content-text').children('p')[0].style.margin = "5px 0";
 +
        });
 +
    </script>
 +
    <script src="https://2021.igem.org/common/MathJax-2.5-latest/MathJax.js">
 +
        MathJax.Hub.Config({
 +
            extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
 +
            jax: ["input/TeX", "output/HTML-CSS"],
 +
            tex2jax: {
 +
                inlineMath: [
 +
                    ['$', '$'],
 +
                    ["\\(", "\\)"]
 +
                 ],
 +
                displayMath: [
 +
                    ['$$', '$$'],
 +
                    ["\\[", "\\]"]
 +
                ],
 +
            },
 +
            "HTML-CSS": {
 +
                availableFonts: ["TeX"]
 +
            }
 +
        });
 +
    </script>
 +
    <style type="text/css">
 +
        ::selection {
 +
            background: RGB(253, 172, 83);
 +
            color: #fff;
 +
        }
  
−
            <section>
+
        ::-moz-selection {
−
                Bacteria entombed in the tartar on ancient teeth document the ensuing transition in microbial
+
             background: RGB(253, 172, 83);
−
                communities.
+
             color: #fff;
−
             </section>
+
        }
−
             <section>
+
−
                Processed foods are also softer and cleaner, setting up a perfect storm for caries: less chewing to
+
−
                cut the organic film and fewer dietary abrasives to wear away the nooks and crannies in teeth where
+
−
                Plague bacteria take refuge.
+
  
−
            </section>
+
        img::selection {
−
            <div class="food">
+
            background: transparent;
−
                <img src="https://static.igem.org/mediawiki/2021/a/a5/T--NCTU_Formosa--sugar.svg" class="food-images"
+
        }
−
                    id="food" alt="food" />
+
−
                <img src="https://static.igem.org/mediawiki/2021/2/2f/T--NCTU_Formosa--candy.svg" class="food-images"
+
−
                    id="food" alt="food" />
+
−
                <img src="https://static.igem.org/mediawiki/2021/0/05/T--NCTU_Formosa--cake.svg" class="food-images"
+
−
                    id="food" alt="food" />
+
−
            </div>
+
  
−
             <section>
+
        img::-moz-selection {
−
                From an evolutionary perspective, there was not enough time for our teeth to adapt to the changes in
+
             background: transparent;
−
                our oral environment wrought by the introduction of table sugar and processed foods.
+
        }
 +
    </style>
 +
</head>
  
−
            </section>
+
<body>
−
             <img src="https://static.igem.org/mediawiki/2021/archive/3/3e/20210907103033%21T--NCTU_Formosa--time.svg"
+
    <!--↓↓↓loader↓↓↓-->
−
                class="images" id="time" alt="time" />
+
    <div id="loader-wrapper">
−
             <section>
+
        <div id="loader-bg">
−
                According to the World Health Organization estimate, oral diseases affect up to 3.5 billion people
+
             <img src="https://static.igem.org/mediawiki/2021/d/d5/T--NCTU_Formosa--homepage-flag.svg" id="headerimage">
−
                in the world.
+
             <h1>Loading...
−
             </section>
+
             </h1>
−
            <section>
+
        </div>
−
                The severe dental disease, periodontal (gum) disease even affected 47% of adults aged over 30 years.
+
    </div>
  
−
            </section>
+
    <!--↓↓↓navigation bar↓↓↓-->
−
            <div class="numberList">
+
    <div id="nav_dummy"></div>
−
                <div class="numberList-left">
+
    <nav id="navbar">
−
                    <h class="number">+<span class="animateNum" data-animatetarget="3500">0</span> million</h>
+
        <a href="https://2021.igem.org/Team:NCTU_Formosa" style="display:contents;">
−
                    <p class="oral number">Up to 3500 million people
+
            <div class="nav_brand">
−
                        have oral problem</p>
+
                <img id="Logo" src="https://static.igem.org/mediawiki/2021/7/71/T--NCTU_Formosa--logo.svg" alt="Logo">
−
                </div>
+
−
                <div class="numberList-right">
+
−
                    <h class="number">+<span class="animateNum" data-animatetarget="47">0</span> %</h>
+
−
                    <p class="number">47% of adults aged over 30 years
+
−
                        have some form of periodontal disease</p>
+
−
                </div>
+
 
             </div>
 
             </div>
−
         </article>
+
         </a>
−
         <article id="secondpart">
+
         <button id="navBtn">
−
             <h2 class="topic">Moreover, the most serious condition…</h2>
+
             <span class="navbar-toggler-icon"></span>
−
             <section>
+
        </button>
−
                 Severe periodontal disease was proved to be related to many chronic and cardiovascular diseases.
+
        <ul style="z-index: 10;">
−
             </section>
+
             <li id="home_btn">
−
             <img src="https://static.igem.org/mediawiki/2021/1/1a/T--NCTU_Formosa--process.svg" class="images" id="process"
+
                 <a href="https://2021.igem.org/Team:NCTU_Formosa"><span class="material-icons">home</span>Home</a>
−
                 alt="process" />
+
             </li>
−
             <section>
+
             <li class="dropdownwrapper" onclick="void(0)">
−
                 When there's a lack of proper cleanliness, food pieces, and other fragments will quickly precipitate,
+
                Project
−
                 forming a biofilm. Dental plaque is biofilm. The bacteria in the biofilm will trigger
+
                <ul class="dropdown">
−
                 the deterioration of the periodontal condition.
+
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Description">Description</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Design">Design</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Contribution">Contribution</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Engineering">Engineering</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Implementation">Implementation</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Graphic_Design">Graphic Design</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Safety">Safety</a></li>
 +
                </ul>
 +
            </li>
 +
            <li class="dropdownwrapper" onclick="void(0)">
 +
                 Results
 +
                <ul class="dropdown">
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Results">Experiment Results</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Proof_Of_Concept">Proof of Concept</a></li>
 +
                </ul>
 +
             </li>
 +
            <li>
 +
                 <a href="https://2021.igem.org/Team:NCTU_Formosa/Parts">Parts</a>
 +
            </li>
 +
            <li class="dropdownwrapper" onclick="void(0)">
 +
                 Model
 +
                <ul class="dropdown">
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Model">Overview</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Prediction_Model">Prediction Model</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Efficiency_Optimization_Model">Efficiency
 +
                            Optimization Model</a></li>
 +
                </ul>
 +
            </li>
 +
            <li class="dropdownwrapper" onclick="void(0)">
 +
                Human Practices
 +
                <ul class="dropdown">
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Human_Practices">Human Practices</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Communication">Communication</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Education">Education</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Excellence in Another Area">Excellence in
 +
                            Another Area</a></li>
 +
                 </ul>
 +
            </li>
 +
            <li class="dropdownwrapper" onclick="void(0)">
 +
                Team
 +
                <ul class="dropdown">
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Team">Team Introduction</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Attributions">Attributions</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Collaborations">Collaborations</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Partnership">Partnership</a></li>
 +
                </ul>
 +
            </li>
 +
            <li class="dropdownwrapper" onclick="void(0)">
 +
                Notebook
 +
                <ul class="dropdown">
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Experiments">Protocols</a></li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <!--<a href="https://2021.igem.org/Team:NCTU_Formosa/Criteria">Medal</a>-->
 +
            </li>
 +
        </ul>
 +
    </nav>
 +
    <button id="topBtn">Top</button>
 +
</body>
  
−
            </section>
+
<!--nav style-->
−
            <img src="https://static.igem.org/mediawiki/2021/3/3a/T--NCTU_Formosa--dental_plaque_explain.svg" class="images"
+
−
                id="biofilm" alt="biofilm" />
+
−
            <section>
+
−
                When the condition worsens, tartar will form. If the condition keeps worsening, the potential of
+
−
                getting the periodontal disease will rise.
+
−
 
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/6/66/T--NCTU_Formosa--periodintal_disease_explain.svg"
+
−
                class="images" id="infection" alt="infection" />
+
−
            <section>
+
−
                The gingiva tissue will be damaged by bacteria in the biofilm. The common consequence includes:
+
−
 
+
−
            </section>
+
−
 
+
−
            <img src="https://static.igem.org/mediawiki/2021/9/98/T--NCTU_Formosa--consequence2.svg" class="images"
+
−
                id="consequence" alt="consequence" />
+
−
 
+
−
            <section>
+
−
                Bacteria will enter blood circulation through the wounds and may cause multiple organ infections.
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/6/6a/T--NCTU_Formosa--infected_organ.svg" class="images"
+
−
                id="InfectOrgan" alt="InfectOrgan" />
+
−
 
+
−
        </article>
+
−
        <article id="thirdpart">
+
−
            <h2 class="topic">Not only humans,</h2>
+
−
            <section>
+
−
                many animals, especially human rearing pets also face oral health problems, due to drastic changes
+
−
                in diet.
+
−
            </section>
+
−
            <section>Therefore, we decided to first focus on the oral health of our furry friend,
+
−
                dogs before we apply our solution to human beings!
+
−
            </section>
+
−
        </article>
+
−
        <article id="fourthpart">
+
−
            <h2 class="topic">Dogs' oral problem</h2>
+
−
            <section>
+
−
                Based on the research, by just three years of age, eighty percent of dogs have some form of periodontal
+
−
                disease. However, the consequences of periodontal disease are not limited to the oral cavity.
+
−
 
+
−
            </section>
+
−
            <div class="numberList">
+
−
                <div class="numberList-left">
+
−
                    <h class="number">+<span class="animateNum" data-animatetarget="3">0</span>years</h>
+
−
                    <p class="age">The dogs older than three years old</p>
+
−
                </div>
+
−
                <div class="numberList-right">
+
−
                    <h class="number">+<span class="animateNum" data-animatetarget="80">0</span>%</h>
+
−
                    <p class="DogPeriodontalRate">Up to 80% of dogs have some form of periodontal disease</p>
+
−
                </div>
+
−
            </div>
+
−
        </article>
+
−
        <article id="fourthpart">
+
−
            <h2 class="topic">Dogs' organ infections</h2>
+
−
 
+
−
            <section>
+
−
                Up to half of the dog patients that have periodontal disease have multiple organ infections.
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/6/6f/T--NCTU_Formosa--dogorgan.svg" class="images" id="DogOrgan"
+
−
                alt="DogOrgan" />
+
−
            <section>
+
−
                The bacteria that are found within the mouth of dogs with dental disease are the same as the bacteria
+
−
                that result in heart disease. Additionally, the presence of periodontal disease has been
+
−
                linked to the risk of heart disease in dogs.
+
−
 
+
−
            </section>
+
−
            <section>
+
−
                Infection and inflammation within the liver and kidneys can cause signs of systemic infection, and
+
−
                also, interfere with the function of these organs.
+
−
 
+
−
            </section>
+
−
            <section>
+
−
                According to the statistics of veterinary hospitals in Taipei in 2014s, over thirty seven percent of
+
−
                the deaths of dogs are related to multiple organ failure, cardiovascular disease and renal
+
−
                insufficiency,which probably result from periodontal disease.
+
−
            </section>
+
−
            <div class="pie animatePie" data-animatetarget="37">
+
−
                <div class="pieLeft">
+
−
                    <div class="pieLeftInner"></div>
+
−
                </div>
+
−
                <div class="pieRight">
+
−
                    <div class="pieRightInner"></div>
+
−
                </div>
+
−
                <div class="pieInner"><span></span>%</div>
+
−
            </div>
+
−
        </article>
+
−
        <article>
+
−
            <h2 class="topic">What is current solution?</h2>
+
−
            <section>
+
−
                Here is the comparison of teeth brushing, teeth cleaning and dental bone. First,
+
−
                brushing teeth is cheap but plaque and tartar are still ineradicable. And it is also difficult
+
−
                for owners to brush their dogs’ teeth every day.
+
−
 
+
−
                What about teeth cleaning?Although this is the most effective method, it costs
+
−
                nearly 400 US dollars, which is the most expensive method. And it needs general anesthesia to
+
−
                conduct. The prices and risks make some owners refuse to let their dog use it.
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/b/b9/T--NCTU_Formosa--expensive.svg" class="images" id="dollars"
+
−
                alt="dollars" />
+
−
            <section>
+
−
                For the dental bone,while it is inexpensive, convenient, and less harmful to
+
−
                dogs, it is less effective and efficient than the other methods above, due to the fact that most of
+
−
                the
+
−
                current dental bones are based on physical friction. This method can only remove the bacteria and
+
−
                food residue from the surface of tooth without adding any antibacterial intergredient.</p>
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/3/31/T--NCTU_Formosa--solutions_compare.svg" class="images"
+
−
                id="list" alt="list" />
+
−
 
+
−
            <h2 class="slogan">Because of above methods all have their major shortcomings, the owners' motivation to
+
−
                solve pet's oral problems will decreased.
+
−
            </h2>
+
−
            <h2 class="slogan">Let our lovely friend live long in panic!</h2>
+
−
            <img src="https://static.igem.org/mediawiki/2021/5/51/T--NCTU_Formosa--dogcry.svg" class="images-b" id="dog"
+
−
                alt="dog" style="padding-bottom: 5%;" />
+
−
        </article>
+
−
        <article id="fifthpart">
+
−
            <h2 class="topic">What is our solution to this problem?</h2>
+
−
            <section>We ameliorate and create a new type of dental bone, DenTeeth.
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/0/0b/T--NCTU_Formosa--product1.svg" class="images"
+
−
                id="DenteethProduct" alt="DenteethProduct" />
+
−
            <section>By using synthesis biology, the brand new method was born.
+
−
            </section>
+
−
            <img src="https://static.igem.org/mediawiki/2021/4/45/T--NCTU_Formosa--advantages_of_denteeth.svg"
+
−
                class="images" />
+
−
 
+
−
        </article>
+
−
 
+
−
        <article class="ProjectIntro">
+
−
            <h2>Detection</h2>
+
−
            <p class="ProjIntro-content">One of our main goals is the development of a detection that is based on
+
−
                machine learning.Customize the period of time feeding DenTeeth and improve the effect of DenTeeth by
+
−
                detecting the amount of bacteria in a single dog's mouth.
+
−
            </p>
+
−
            <h2>Sterilization</h2>
+
−
            <p class="ProjIntro-content">In DenTeeth, antimicrobial peptides are used to sterilize.We use antimicrobial
+
−
                peptide LL-37, which activates autophagy and leads to cell death.
+
−
            </p>
+
−
            <h2>Reduction of biofilm and odors</h2>
+
−
            <p class="ProjIntro-content">Based on previous studies, the bacteria on the teeth surface form biofilms
+
−
                which leads to the formation of tartar. In order to solve this problem, we introduce arginine into our
+
−
                project, which is able to reduce the formation of biofilms and reduce the odors as well.
+
−
            </p>
+
−
            <h2>Repair</h2>
+
−
            <p class="ProjIntro-content">Beside eliminating the main factor forming oral problems, repair of teeth and
+
−
                periodontal are also important.
+
−
            </p>
+
−
            <p class="ProjIntro-content">After the amount of bacteria is below a certain value,the mechanism of repair
+
−
                will open, several proteins which can repair damaged gingiva or tooth tissue would be expressed.
+
−
            </p>
+
−
        </article>
+
−
        <div class="home_btm">
+
−
            <video controls poster="https://static.igem.org/mediawiki/2021/a/a0/T--NCTU_Formosa--promotionvideo.jpg">
+
−
                <source src="https://static.igem.org/mediawiki/2021/d/df/T--NCTU_Formosa--promotion.mp4" type="video/mp4">
+
−
            </video>
+
−
            <div class="explanation"><svg class="icon" aria-hidden="true" data-prefix="fas" data-icon="arrow-circle-up"
+
−
                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+
−
                    <path fill="currentColor"
+
−
                        d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z">
+
−
                    </path>
+
−
                </svg> Team Promotion Video</div>
+
−
 
+
−
            <div class="dog-button">
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Result" class="dog-img">
+
−
                    <div class="dog-txt">Result</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/0/0b/T--NCTU_Formosa--result.svg" alt="Result">
+
−
                </a>
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Design" class="dog-img">
+
−
                    <div class="dog-txt txt-c">Design</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/d/d3/T--NCTU_Formosa--design.svg" alt="Design">
+
−
                </a>
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Model" class="dog-img">
+
−
                    <div class="dog-txt txt-c">Model</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/5/5e/T--NCTU_Formosa--model_img.svg" alt="Model">
+
−
                </a>
+
−
            </div>
+
−
            <div class="dog-button">
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Human_Practice" class="dog-img" id="img-link1">
+
−
                    <div class="dog-txt">Human Practice</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/5/55/T--NCTU_Formosa--human_practice.svg"
+
−
                        alt="Human Practice">
+
−
                </a>
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Team" class="dog-img" id="img-link2">
+
−
                    <div class="dog-txt txt-c">Team</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/c/c8/T--NCTU_Formosa--team-.svg" alt="Team">
+
−
                </a>
+
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Graphic_Design" class="dog-img">
+
−
                    <div class="dog-txt txt-b">Graphic Design</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/0/03/T--NCTU_Formosa--graphic.svg" alt="graphic">
+
−
                </a>
+
−
            </div>
+
−
            <div class="future">
+
−
                <p id="future">Next, our goal is to solve the oral health problem in humans.</p>
+
−
            </div>
+
−
        </div>
+
−
    </main>
+
−
</body>
+
 
<style>
 
<style>
−
     #headerbackground {
+
     #top_menu_inside {
−
         /* width: 90vw; */
+
         font-size: 12px;
−
        display: block;
+
−
        margin-left: auto;
+
−
        margin-right: auto;
+
 
     }
 
     }
  
−
     #Background {
+
     #top_menu_inside * {
−
         width: 80vw;
+
         font-size: 1em;
−
        display: block;
+
−
        margin-left: auto;
+
−
        margin-right: auto;
+
−
        padding: 5% 0;
+
 
     }
 
     }
  
−
     #nextBtn {
+
     #globalWrapper {
−
         display: block;
+
         padding: 0;
−
        margin-left: auto;
+
−
        margin-right: auto;
+
−
        margin-top: -6%;
+
−
        margin-bottom: 5%;
+
−
        width: 5%;
+
−
        animation: floating 3s ease-in-out infinite;
+
−
        cursor: pointer;
+
 
     }
 
     }
  
−
     @keyframes floating {
+
     #content {
−
         0% {
+
         position: relative;
−
            transform: translatey(0px);
+
        min-height: calc(100vh - 15px);
−
        }
+
    }
  
−
        50% {
+
    #bodyContent {
−
            transform: translatey(-20px);
+
         /* footer padding */
−
         }
+
         padding-bottom: calc(100%*300/1366);
−
 
+
−
         100% {
+
−
            transform: translatey(0px);
+
−
        }
+
 
     }
 
     }
  
−
     #nextBtn:hover {
+
     #nav_dummy {
−
         transform: scale(1.2);
+
         width: 100%;
−
         transition: .3s;
+
         height: 4rem;
 
     }
 
     }
  
−
     .dog-button {
+
     #navbar {
 +
        position: fixed;
 +
        top: 16px;
 +
        width: 100%;
 +
        height: 4rem;
 
         display: flex;
 
         display: flex;
−
         width: 100%;
+
         align-items: center;
 
         justify-content: space-between;
 
         justify-content: space-between;
−
         justify-content: center;
+
         color: black;
−
         margin-left: auto;
+
        background-color: rgb(83, 164, 253);
−
         margin-right: auto;
+
         font-family: 'OtomanopeeOne';
 +
         z-index: 10;
 
     }
 
     }
  
−
     .dog-img {
+
     #navbar a {
−
         flex: 1 1 auto;
+
         text-decoration: none;
−
         position: relative;
+
         color: black;
−
         width: 33%;
+
         display: inherit;
−
 
+
        font-size: inherit;
 
     }
 
     }
  
−
     .dog-txt {
+
     #navbar a:hover,
−
        position: absolute;
+
     #navbar li.dropdownwrapper:hover {
−
        top: 45%;
+
         color: white;
−
        left: 30%;
+
−
        line-height: 3vw;
+
−
        color: whitesmoke;
+
−
        margin-left: auto;
+
−
        margin-right: auto;
+
−
        font-size: 3vw;
+
−
        font-family: 'OtomanopeeOne', sans-serif;
+
−
    }
+
−
 
+
−
     .txt-b {
+
−
        left: 33%;
+
−
    }
+
−
 
+
−
    .txt-c {
+
−
        left: 35%;
+
−
    }
+
−
 
+
−
    .dog-img img {
+
−
        width: 100%;
+
−
    }
+
−
 
+
−
    .dog-img:hover {
+
−
         opacity: 0.5;
+
 
         transition: 0.3s;
 
         transition: 0.3s;
 
     }
 
     }
  
−
     .images {
+
     .nav_brand {
−
         display: block;
+
         height: 90%;
−
         margin: auto;
+
         padding-left: 1vw;
−
        width: 50%;
+
 
     }
 
     }
  
−
     .images-r {
+
     .nav_brand img {
−
         display: block;
+
         height: 100%;
−
        margin: auto;
+
−
        padding-left: 10%;
+
−
        width: 50%;
+
 
     }
 
     }
  
−
     .images-b {
+
     #navbar ul {
−
         display: block;
+
         right: 0;
−
         margin: auto;
+
         margin: 0;
−
         width: 30%;
+
         padding: 0;
−
    }
+
−
 
+
−
    .food {
+
 
         display: flex;
 
         display: flex;
−
         width: 78%;
+
         align-items: center;
−
        justify-content: center;
+
         list-style: none;
−
         margin-left: auto;
+
−
        margin-right: auto;
+
 
     }
 
     }
  
−
     .food-images {
+
     #navbar li {
−
         flex: none;
+
         font-size: 1.2rem;
−
         width: 20%;
+
         margin: 0 .5rem;
−
         padding: 3%;
+
         position: relative;
 +
        white-space: nowrap;
 
     }
 
     }
  
−
     #firstpart {
+
     #navbar li ul {
−
         padding-bottom: 5%;
+
         position: absolute;
 +
        width: fit-content;
 +
        margin: 0;
 +
        left: 0;
 +
        margin-top: .5rem;
 +
        background: wheat;
 
     }
 
     }
  
−
     #secondpart {
+
     #navbar li ul li {
−
         padding-bottom: 5%;
+
         position: unset;
 +
        margin: 0;
 +
        width: auto;
 
     }
 
     }
  
−
     #fourthpart {
+
     #navbar ul.dropdown {
−
         padding-bottom: 5%;
+
         display: none;
 +
        background-color: RGB(0, 107, 237);
 
     }
 
     }
  
−
     #fifthpart {
+
     #topBtn {
−
         background-color: #DEF2FF;
+
         position: fixed;
−
         color: #53A4FD;
+
        right: 3vw;
 +
        bottom: 5vh;
 +
        padding: 1vw;
 +
        z-index: 1000;
 +
        border-style: none;
 +
        color: rgb(83, 102, 253);
 +
         background-color: transparent;
 +
        text-transform: uppercase;
 +
        font-size: 1.8rem;
 +
        display: none;
 +
        font-family: 'OtomanopeeOne', sans-serif;
 
     }
 
     }
  
−
     .topic {
+
     .dropdown {
−
         margin-left: auto;
+
         border-radius: 8px;
−
        margin-right: auto;
+
−
        padding-top: 5%;
+
−
        text-align: center;
+
−
        font-size: 3.5vw;
+
−
        padding: 50px;
+
−
        color: RGB(83, 164, 253);
+
−
        font-family: "OtomanopeeOne" !important;
+
 
     }
 
     }
  
−
     .slogan {
+
     .dropdownwrapper {
−
         margin-left: auto;
+
         cursor: pointer;
−
        margin-right: auto;
+
−
        text-align: center;
+
−
        font-size: 3vw;
+
−
        padding: 50px;
+
−
        line-height: 50px;
+
−
        color: rgb(33, 102, 204);
+
 
     }
 
     }
  
−
     section {
+
     .material-icons {
−
         width: 60%;
+
         vertical-align: text-bottom;
−
        padding: 30px;
+
−
        margin-left: auto;
+
−
        margin-right: auto;
+
−
        /*text-align: center;*/
+
−
        justify-content: center;
+
−
        font-size: 2.5vw;
+
−
        line-height: 45px;
+
 
     }
 
     }
  
−
     .numberList {
+
     @media (hover: hover) {
−
         width: 55%;
+
         #topBtn:hover {
−
        display: flex;
+
            background-color: rgb(33, 102, 204);
−
        text-align: center;
+
            color: white;
−
        justify-content: center;
+
            border-style: none;
−
        align-items: center;
+
            border-radius: 50%;
−
        margin-left: auto;
+
            cursor: pointer;
−
        margin-right: auto;
+
         }
−
         padding-left: 10px;
+
−
        margin-top: 3%;
+
 
     }
 
     }
  
−
     .numberList-left {
+
     #navBtn {
−
         flex: 1 1 auto;
+
        display: none;
−
         text-align: center;
+
        padding: .25rem .75rem;
−
         width: 25%;
+
        font-size: 1.25rem;
 +
         line-height: 1;
 +
         color: rgba(255, 255, 255, .5);
 +
        background-color: transparent;
 +
         border: 1px solid rgba(255, 255, 255, .1);
 +
        border-radius: .25rem;
 
     }
 
     }
  
−
     .numberList-right {
+
     #navBtn .navbar-toggler-icon {
−
         flex: 1 1 auto;
+
         display: inline-block;
−
         text-align: center;
+
        width: 1.5em;
−
         width: 25%;
+
        height: 1.5em;
 +
         vertical-align: middle;
 +
        content: "";
 +
        background: no-repeat center center;
 +
         background-size: 100% 100%;
 +
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 
     }
 
     }
  
−
     .number span {
+
     @media screen and (max-width: 800px) {
−
         font-size: 4vw;
+
         #navBtn {
−
        font-family: "OtomanopeeOne";
+
            display: unset;
−
         color: RGB(253, 172, 83);
+
         }
−
    }
+
  
−
    /* .p4sec19 {
+
        #navbar {
−
        padding: 20px;
+
            flex-wrap: wrap;
−
         font-size: 2.5vw !important;
+
         }
−
    } */
+
  
−
    table {
+
        #navbar ul {
−
        margin-left: auto !important;
+
            flex-direction: column;
−
        margin-right: auto !important;
+
            align-items: flex-start;
−
        background-color: white;
+
            flex-basis: 100%;
−
    }
+
            background: cornflowerblue;
 +
            display: none;
 +
        }
  
−
    .pie {
+
        #navbar li ul {
−
        margin-left: auto;
+
            position: unset;
−
         margin-right: auto;
+
         }
−
    }
+
  
−
    .ProjectIntro {
+
        #topBtn {
−
        background-color: RGB(83, 164, 253);
+
            font-size: 1.5rem;
−
         padding: 80px;
+
         }
−
    }
+
  
−
    .ProjectIntro h2 {
+
        .reference ol {
−
        margin-left: auto;
+
            margin: 0;
−
        margin-right: auto;
+
            padding: 0 5vw;
−
        margin-top: 7%;
+
         }
−
        text-align: center;
+
−
        font-size: 3.5vw;
+
−
         padding: 30px;
+
−
        color: whitesmoke;
+
−
    }
+
  
−
    .ProjectIntro p {
+
        .reference li {
−
        margin-left: auto;
+
            line-break: anywhere;
−
         margin-right: auto;
+
         }
−
        text-align: center !important;
+
−
        font-size: 2.5vw !important;
+
−
        color: white;
+
 
     }
 
     }
  
−
     .ProjIntro-content {
+
     #home_btn span.material-icons.night {
−
         padding: 30px;
+
         color: unset !important;
 +
        background-color: unset !important;
 
     }
 
     }
  
−
     .home_btm {
+
     @media screen and (max-width: 415px) {}
−
        width: 100%;
+
</style>
−
        background-color: rgb(29, 78, 172);
+
  
 +
<!--loader style-->
 +
<style>
 +
    #loader-wrapper {
 +
        display: flex;
 +
        align-items: center;
 +
        justify-content: center;
 +
        height: 100vh;
 +
        width: 100vw;
 +
        z-index: 9999;
 +
        position: fixed;
 +
        pointer-events: none;
 
     }
 
     }
  
−
     .future {
+
     #loader-bg {
−
         padding: 10% 100px;
+
         position: fixed;
 +
        height: 200vw;
 +
        width: 200vw;
 +
        transform: translateY(0);
 +
        background-color: #fafafc;
 +
        transition-property: height, width, border-radius, transform;
 +
        transition-duration: 0.5s;
 +
        transition-timing-function: cubic-bezier(.99, .05, .51, 1.01);
 +
        transition-delay: 0s, 0s, 0s, 0.6s;
 +
        border-radius: 0%;
 +
        -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 +
        -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 +
        box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 +
        justify-content: center;
 +
        align-items: center;
 +
        display: flex;
 +
        flex-direction: column;
 +
        overflow: hidden;
 
     }
 
     }
  
−
     video {
+
     #loader-wrapper img {
−
         width: 70%;
+
         width: 80vw;
−
        display: block;
+
−
        margin-left: auto;
+
−
        margin-right: auto;
+
−
        padding-top: 8%;
+
 
     }
 
     }
  
−
     #future {
+
     #loader-wrapper h1 {
−
         font-size: 2.5vw !important;
+
         color: #121212;
−
         text-align: center !important;
+
         text-transform: uppercase;
−
         color: white;
+
         position: absolute;
−
         font-family: "OtomanopeeOne" !important;
+
        transform: translateY(15vh);
 +
         font-size: 3rem;
 +
        opacity: 100%;
 
     }
 
     }
  
−
     .explanation {
+
     #loader-bg.loaded {
−
         font-size: 1.3vw;
+
         height: 60vh;
−
         text-align: center;
+
         width: 60vh;
−
         margin: 10px 0 10%;
+
         border-radius: 100%;
−
         color: #C0C0C0;
+
         transform: translateY(2000px);
 
     }
 
     }
 +
</style>
  
−
     .icon {
+
<script>
−
         width: 1.5vw;
+
     const dropdowns = document.getElementsByClassName("dropdown");
 +
    const loader = document.getElementById('loader-bg');
 +
 
 +
    let hidedropdowns = () => {
 +
         Array.from(dropdowns).forEach(el => {
 +
            el.removeAttribute("style");
 +
        });
 
     }
 
     }
  
−
    @media screen and (max-width:450px) {
 
−
        #Background {
 
−
            width: 100vw;
 
−
        }
 
  
−
         section {
+
    jq3(window).on("click", event => {
−
             width: 85%;
+
         if (event.type == "touchstart") {
−
            padding: 10% 0;
+
             $(this).off('click')
−
            font-size: 6vw !important;
+
 
         }
 
         }
−
 
+
        let target = event.target;
−
         .topic {
+
         if (target.matches('.dropdownwrapper')) {
−
             font-size: 9vw !important;
+
             //target.querySelector('ul.dropdown').style.display = "block";
−
             line-height: 45px;
+
             jq3(target.querySelector('ul.dropdown')).slideToggle();
−
             padding: 20px;
+
        } else {
 +
             hidedropdowns();
 
         }
 
         }
 +
    });
  
−
         #nextBtn {
+
    if (window.location.href == "https://2021.igem.org/Team:NCTU_Formosa") {
−
             display: none;
+
         jq3(window).on("load", () => {
−
         }
+
             setTimeout(() => {
 +
                loader.classList.add('loaded')
 +
            }, 200);
 +
         });
 +
    } else {
 +
        loader.classList.add('loaded')
 +
    }
  
−
        .images {
 
−
            width: 70%;
 
−
        }
 
  
−
        .images-r {
+
    jq3("#navBtn").click(() => {
−
            width: 80%;
+
        jq3("#navbar ul").slideToggle();
−
        }
+
    });
  
−
         .food {
+
    window.onresize = () => {
−
             width: 99%;
+
         if (jq3(window).width() > 800) {
 +
             jq3("#navbar ul").css("display", "");
 
         }
 
         }
 +
    }
  
−
         .food-images {
+
    jq3('#topBtn').click(() => {
−
             width: 30%;
+
         jq3("html, body").animate({
−
            padding: 3%;
+
             scrollTop: 0
−
        }
+
        }, 500);
 +
    });
  
−
         .numberList {
+
    let currentScrollPos = window.pageYOffset
−
             width: 80%;
+
    let prevScrollpos = currentScrollPos
−
             justify-content: space-between;
+
    jq3(window).scroll(() => {
 +
         if ($(this).scrollTop() > 400) {
 +
             $('#topBtn').fadeIn();
 +
        } else {
 +
             $('#topBtn').fadeOut();
 
         }
 
         }
  
−
         .numberList-left {
+
         //common variable
−
             padding: 5%;
+
        currentScrollPos = window.pageYOffset
 +
        //scroll down hide navbar
 +
        if (prevScrollpos > currentScrollPos) {
 +
             jq3('#navbar').css('visibility', 'visible');
 +
        } else {
 +
            jq3('#navbar').css('visibility', 'hidden');
 
         }
 
         }
−
 
+
         prevScrollpos = currentScrollPos
−
         .numberList-right {
+
     });
−
            padding: 5%;
+
−
        }
+
−
 
+
−
        .number span {
+
−
            font-size: 7vw;
+
−
        }
+
−
 
+
−
        /* .p4sec19 {
+
−
            padding: 20px;
+
−
            font-size: 6vw !important;
+
−
        } */
+
−
 
+
−
        .slogan {
+
−
            font-size: 8vw;
+
−
            padding: 40px 10px 30px;
+
−
            line-height: 55px;
+
−
        }
+
−
 
+
−
        .ProjectIntro {
+
−
            background-color: RGB(83, 164, 253);
+
−
            padding: 10px;
+
−
        }
+
−
 
+
−
        .ProjectIntro h2 {
+
−
            font-size: 8vw;
+
−
            padding: 30px;
+
−
            line-height: 45px;
+
−
        }
+
−
 
+
−
        .ProjectIntro p {
+
−
            font-size: 6vw !important;
+
−
            color: white;
+
−
        }
+
−
 
+
−
        .ProjIntro-content {
+
−
            padding: 30px;
+
−
        }
+
−
 
+
−
        #future {
+
−
            font-size: 6vw !important;
+
−
        }
+
−
     }
+
−
 
+
−
    @media screen and (max-width: 992px) {
+
−
        video {
+
−
            width: 80%;
+
−
            display: block;
+
−
            margin-left: auto;
+
−
            margin-right: auto;
+
−
        }
+
−
    }
+
−
</style>
+
−
<link rel="stylesheet"
+
−
    href="https://2021.igem.org/wiki/index.php?title= Template:NCTU_Formosa/runing.css &amp;action=raw&amp;ctype=text/css">
+
−
<script type="text/javascript"
+
−
    src="https://2021.igem.org/wiki/index.php?title=%20Template:NCTU_Formosa/runing.js%20&amp;action=raw&amp;ctype=text/javascript">
+
 
</script>
 
</script>
  
−
<script type="text/javascript">
 
−
    jq3("document").ready(function () {
 
−
        jq3("#nextBtn").click(function () {
 
−
            jq3("html,body").animate({
 
−
                scrollTop: jq3("#topic1").offset().top
 
−
            }, 800)
 
−
        });
 
−
    })
 
−
    jq3(function () {
 
−
        jq3('body').running();
 
−
    })
 
−
</script>
 
  
 
</html>
 
</html>
−
{{NCTU_Formosa/footer}}
 

Revision as of 20:28, 21 October 2021

Loading...