|
|
| (14 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!-- This document, originally from getmdl.io, was modified -->
| + | <html> |
| − | | + | |
| − | <!--
| + | |
| − | Material Design Lite
| + | |
| − | Copyright 2015 Google Inc. All rights reserved.
| + | |
| − | | + | |
| − | Licensed under the Apache License, Version 2.0 (the "License");
| + | |
| − | you may not use this file except in compliance with the License.
| + | |
| − | You may obtain a copy of the License at
| + | |
| − | | + | |
| − | https://www.apache.org/licenses/LICENSE-2.0
| + | |
| − | | + | |
| − | Unless required by applicable law or agreed to in writing, software
| + | |
| − | distributed under the License is distributed on an "AS IS" BASIS,
| + | |
| − | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
| + | |
| − | See the License for the specific language governing permissions and
| + | |
| − | limitations under the License
| + | |
| − | -->
| + | |
| − | | + | |
| − | <html lang="en"> | + | |
| | <head> | | <head> |
| | <meta charset="utf-8"> | | <meta charset="utf-8"> |
| Line 24: |
Line 5: |
| | <meta name="description" content="2017 Tongji iGEM team wiki"> | | <meta name="description" content="2017 Tongji iGEM team wiki"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> |
| − | <title>Tongji iGEM</title>
| |
| | | | |
| − | <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − | <!-- Page styles -->
| |
| − | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS?action=raw&ctype=text/css">
| |
| − | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS_2?action=raw&ctype=text/css">
| |
| − | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Tongji_China/CSS_3?action=raw&ctype=text/css">
| |
| | <style> | | <style> |
| − | #view-source {
| |
| − | position: fixed;
| |
| − | display: block;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | margin-right: 40px;
| |
| − | margin-bottom: 40px;
| |
| − | z-index: 900;
| |
| − | }
| |
| | | | |
| | .main.view { | | .main.view { |
| | position: fixed; | | position: fixed; |
| − | top: 20px; | + | top: 18px; |
| | left: 0; | | left: 0; |
| | + | bottom: 0; |
| | + | right: 0; |
| | width: 100%; | | width: 100%; |
| | height: 100%; | | height: 100%; |
| | background: rgba(255, 255, 255, 1); | | background: rgba(255, 255, 255, 1); |
| | + | } |
| | + | |
| | + | .main.cont-wrap { |
| | + | position: absolute; |
| | + | top: 0; |
| | + | left: 0; |
| | + | width: 100%; height: 100%; |
| | + | background: rgba(253, 253, 253, 1); |
| | + | overflow: auto; |
| | + | box-shadow: 0 0 20px rgba(0, 0, 0, 1); |
| | + | transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1); |
| | + | } |
| | + | a { |
| | + | text-decoration: none !important; |
| | + | } |
| | + | /* unvisited link */ |
| | + | a:link { |
| | + | color: green; |
| | + | } |
| | + | |
| | + | /* visited link */ |
| | + | a:visited { |
| | + | color: DarkGreen; |
| | + | } |
| | + | |
| | + | /* mouse over link */ |
| | + | a:hover { |
| | + | color: red; |
| | + | } |
| | + | |
| | + | /* selected link */ |
| | + | a:active { |
| | + | color: blue; |
| | } | | } |
| | | | |
| Line 55: |
Line 55: |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| | | | |
| − | // Try to remove weird iGEM side menu | + | // Try to remove weird iGEM side menu and resize the remaining things |
| | // var menuToRemove = document.getElementById('sideMenu').style.display = "none"; | | // var menuToRemove = document.getElementById('sideMenu').style.display = "none"; |
| | | | |
| Line 61: |
Line 61: |
| | document.getElementById("sideMenu").style.display = "none"; | | document.getElementById("sideMenu").style.display = "none"; |
| | bars_box_active = false; | | bars_box_active = false; |
| | + | |
| | + | document.getElementById('content').setAttribute("style","display:block;width:100%"); |
| | + | document.getElementById('content').style.width='100%'; |
| | } | | } |
| | window.setTimeout(closeMenuDiv,50); | | window.setTimeout(closeMenuDiv,50); |
| | window.setTimeout(closeMenuDiv,100); | | window.setTimeout(closeMenuDiv,100); |
| | + | window.setTimeout(closeMenuDiv,500); |
| | + | window.setTimeout(closeMenuDiv,1000); |
| | + | window.setTimeout(closeMenuDiv,10000); |
| | | | |
| | </script> | | </script> |
| − | </head>
| + | </head> |
| − | <body>
| + | <div class="main view"> |
| − | <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> | + | |
| − | | + | |
| − | <div class="android-header mdl-layout__header mdl-layout__header--waterfall"> | + | |
| − | <div class="mdl-layout__header-row">
| + | |
| − | <span class="android-title mdl-layout-title">
| + | |
| − | <div class="logo-font">TongJi iGEM</div>
| + | |
| − | <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
| + | |
| − | </span>
| + | |
| − | <!-- Add spacer, to align navigation to the right in desktop -->
| + | |
| − | <div class="android-header-spacer mdl-layout-spacer"></div>
| + | |
| − | <!-- <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
| + | |
| − | <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
| + | |
| − | <i class="material-icons">search</i>
| + | |
| − | </label>
| + | |
| − | <div class="mdl-textfield__expandable-holder">
| + | |
| − | <input class="mdl-textfield__input" type="text" id="search-field">
| + | |
| − | </div>
| + | |
| − | </div> -->
| + | |
| − | <!-- Navigation -->
| + | |
| − | <div class="android-navigation-container">
| + | |
| − | <nav class="android-navigation mdl-navigation">
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_index.html">Home</a>
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_team.html">Team</a>
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_results.html">Results</a>
| + | |
| − | <!-- <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Auto</a>
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
| + | |
| − | <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
| + | |
| − | </nav>
| + | |
| − | </div>
| + | |
| − | <span class="android-mobile-title mdl-layout-title">
| + | |
| − | <div class="logo-font">TongJi iGEM</div>
| + | |
| − | <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
| + | |
| − | </span>
| + | |
| − | <!-- <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
| + | |
| − | <i class="material-icons">more_vert</i>
| + | |
| − | </button>
| + | |
| − | <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
| + | |
| − | <li disabled class="mdl-menu__item">Design</li>
| + | |
| − | <li disabled class="mdl-menu__item">Experiments</li>
| + | |
| − | <li disabled class="mdl-menu__item">Notebook</li>
| + | |
| − | <li disabled class="mdl-menu__item">Parts</li>
| + | |
| − | </ul> -->
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="android-drawer mdl-layout__drawer">
| + | |
| − | <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
| + | |
| − | <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
| + | |
| − | </span> -->
| + | |
| − | <nav class="mdl-navigation">
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
| + | |
| − | <!-- <a class="mdl-navigation__link" href="">Auto</a>
| + | |
| − | <a class="mdl-navigation__link" href="">One</a>
| + | |
| − | <a class="mdl-navigation__link" href="">Play</a> -->
| + | |
| − | <div class="android-drawer-separator"></div>
| + | |
| − | <span class="mdl-navigation__link" href="">Methods</span>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_design.html">Design</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_experiments.html">Experiments</a>
| + | |
| − | <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_demonstrate.html">Demonstrate</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
| + | |
| − | <div class="android-drawer-separator"></div>
| + | |
| − | <span class="mdl-navigation__link" href="">Resources</span>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
| + | |
| − | <div class="android-drawer-separator"></div>
| + | |
| − | <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
| + | |
| − | </nav>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="android-content mdl-layout__content">
| + | |
| − | <a name="top"></a>
| + | |
| − | <div class="android-be-together-section mdl-typography--text-center">
| + | |
| − | <div class="logo-font android-slogan" style="color:#ffffff;">2017 Tongji iGEM Team</div>
| + | |
| − | <div class="logo-font android-sub-slogan" style="color:#ffffff;">welcome to our wiki, here you'll find all the info you need on our project</div>
| + | |
| − | <!-- <div class="logo-font android-create-character">
| + | |
| − | <a href=""><img src="2017tongji_images/andy.png"> discover more</a>
| + | |
| − | </div> -->
| + | |
| − | | + | |
| − | <a href="#screens">
| + | |
| − | <button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
| + | |
| − | <i class="material-icons">expand_more</i>
| + | |
| − | </button>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | <div class="android-screen-section mdl-typography--text-center">
| + | |
| − | <a name="screens"></a>
| + | |
| − | <div class="mdl-typography--display-1-color-contrast">This website should work on any device!</div>
| + | |
| − | <div class="android-screens">
| + | |
| − | <div class="android-wear android-screen">
| + | |
| − | <a class="android-image-link" href="">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/wear-silver-on.png">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/wear-black-on.png">
| + | |
| − | </a>
| + | |
| − | <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Home</a>
| + | |
| − | </div>
| + | |
| − | <div class="android-phone android-screen">
| + | |
| − | <a class="android-image-link" href="">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/nexus6-on.jpg">
| + | |
| − | </a>
| + | |
| − | <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Project</a>
| + | |
| − | </div>
| + | |
| − | <div class="android-tablet android-screen">
| + | |
| − | <a class="android-image-link" href="">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/nexus9-on.jpg">
| + | |
| − | </a>
| + | |
| − | <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Outreach</a>
| + | |
| − | </div>
| + | |
| − | <div class="android-tv android-screen">
| + | |
| − | <a class="android-image-link" href="">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/tv-on.jpg">
| + | |
| − | </a>
| + | |
| − | <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase" href="">Safety</a>
| + | |
| − | </div>
| + | |
| − | <div class="android-auto android-screen">
| + | |
| − | <a class="android-image-link" href="">
| + | |
| − | <img class="android-screen-image" src="2017tongji_images/auto-on.jpg">
| + | |
| − | </a>
| + | |
| − | <a class="android-link mdl-typography--font-regular mdl-typography--text-uppercase mdl-typography--text-left" href="">More...</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="android-wear-section">
| + | |
| − | <div class="android-wear-band">
| + | |
| − | <div class="android-wear-band-text">
| + | |
| − | <div class="mdl-typography--display-2 mdl-typography--font-thin">Our team worked on </div>
| + | |
| − | <p class="mdl-typography--headline mdl-typography--font-thin">
| + | |
| − | pictures that are alive, litteraly.
| + | |
| − | </p>
| + | |
| − | <p>
| + | |
| − | <a class="mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link" href="">
| + | |
| − | See how we did it <i class="material-icons">chevron_right</i>
| + | |
| − | </a>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="android-customized-section">
| + | |
| − | <div class="android-customized-section-text">
| + | |
| − | <div class="mdl-typography--font-light mdl-typography--display-1-color-contrast">We would like to thanks those who helped us</div>
| + | |
| − | <p class="mdl-typography--font-light">
| + | |
| − | Like our fantastic advisors, some other people and maybe even a couple of companies!
| + | |
| − | <br>
| + | |
| − | <a href="" class="android-link mdl-typography--font-light">Find out about our team and our friends</a>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | <div class="android-customized-section-image"></div>
| + | |
| − | </div>
| + | |
| − | <div class="android-more-section">
| + | |
| − | <div class="android-section-title mdl-typography--display-1-color-contrast">Here are the most important links</div>
| + | |
| − | <div class="android-card-container mdl-grid">
| + | |
| − | <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
| + | |
| − | <div class="mdl-card__media">
| + | |
| − | <img src="2017tongji_images/more-from-1.png">
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__title">
| + | |
| − | <h4 class="mdl-card__title-text">Some kind of page 1</h4>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__supporting-text">
| + | |
| − | <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 1</span>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__actions">
| + | |
| − | <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
| + | |
| − | Call to action 1
| + | |
| − | <i class="material-icons">chevron_right</i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
| + | |
| − | <div class="mdl-card__media">
| + | |
| − | <img src="2017tongji_images/more-from-4.png">
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__title">
| + | |
| − | <h4 class="mdl-card__title-text">Some kind of page 2</h4>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__supporting-text">
| + | |
| − | <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 2</span>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__actions">
| + | |
| − | <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
| + | |
| − | Call to action 2
| + | |
| − | <i class="material-icons">chevron_right</i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
| + | |
| − | <div class="mdl-card__media">
| + | |
| − | <img src="2017tongji_images/more-from-2.png">
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__title">
| + | |
| − | <h4 class="mdl-card__title-text">Some kind of page 3</h4>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__supporting-text">
| + | |
| − | <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 3</span>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__actions">
| + | |
| − | <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
| + | |
| − | Call to action 3
| + | |
| − | <i class="material-icons">chevron_right</i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
| + | |
| − | <div class="mdl-card__media">
| + | |
| − | <img src="2017tongji_images/more-from-3.png">
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__title">
| + | |
| − | <h4 class="mdl-card__title-text">Some kind of page 4</h4>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__supporting-text">
| + | |
| − | <span class="mdl-typography--font-light mdl-typography--subhead">Description of the page 4</span>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-card__actions">
| + | |
| − | <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
| + | |
| − | Call to action 3
| + | |
| − | <i class="material-icons">chevron_right</i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <footer class="android-footer mdl-mega-footer">
| + | |
| − | <div class="mdl-mega-footer--top-section">
| + | |
| − | <div class="mdl-mega-footer--left-section">
| + | |
| − | <button class="mdl-mega-footer--social-btn"></button>
| + | |
| − |
| + | |
| − | <button class="mdl-mega-footer--social-btn"></button>
| + | |
| − |
| + | |
| − | <button class="mdl-mega-footer--social-btn"></button>
| + | |
| − | </div>
| + | |
| − | <div class="mdl-mega-footer--right-section">
| + | |
| − | <a class="mdl-typography--font-light" href="#top">
| + | |
| − | Back to Top
| + | |
| − | <i class="material-icons">expand_less</i>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mdl-mega-footer--middle-section">
| + | |
| − | <p class="mdl-typography--font-light">The empty squares above are for social media links</p>
| + | |
| − | <p class="mdl-typography--font-light">Some kind of footer message</p>
| + | |
| − | </div>
| + | |
| | | | |
| − | <div class="mdl-mega-footer--bottom-section">
| + | <!-- Concat with content --> |
| − | <a class="android-link android-link-menu mdl-typography--font-light" id="version-dropdown">
| + | |
| − | Look! It expands!
| + | |
| − | <i class="material-icons">arrow_drop_up</i>
| + | |
| − | </a>
| + | |
| − | <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="version-dropdown">
| + | |
| − | <li class="mdl-menu__item">First expanded option</li>
| + | |
| − | <li class="mdl-menu__item">more</li>
| + | |
| − | <li class="mdl-menu__item">even more</li>
| + | |
| − | <li class="mdl-menu__item">even even more</li>
| + | |
| − | </ul>
| + | |
| − | <a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown">
| + | |
| − | Another expandable
| + | |
| − | <i class="material-icons">arrow_drop_up</i>
| + | |
| − | </a>
| + | |
| − | <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="developers-dropdown">
| + | |
| − | <li class="mdl-menu__item">Info</li>
| + | |
| − | <li class="mdl-menu__item">Info 2</li>
| + | |
| − | <li class="mdl-menu__item">More</li>
| + | |
| − | <li class="mdl-menu__item">More2</li>
| + | |
| − | </ul>
| + | |
| − | <a class="android-link mdl-typography--font-light" href="">Blog</a>
| + | |
| − | <a class="android-link mdl-typography--font-light" href="">Privacy Policy</a>
| + | |
| − | </div>
| + | |
| | | | |
| − | </footer>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- <a href="http://LINK_TO_PROJECT" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Project</a> -->
| |
| − | <script src="https://2017.igem.org/Template:Tongji_China/Javascript?action=raw&ctype=text/javascript"></script>
| |
| − | </body>
| |
| | </html> | | </html> |
