Difference between revisions of "Team:NUDT CHINA"

Line 1: Line 1:
−
{{NUDT_CHINA}}
+
<!doctype html>
−
<html>
+
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>Team:NUDT_CHINA</title>
 +
<style type="text/css">
 +
.pure-g{
 +
letter-spacing:-.31em;text-rendering:optimizespeed;
 +
font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
 +
display:-webkit-box;
 +
display:-webkit-flex;
 +
display:-ms-flexbox;
 +
display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;
 +
align-content:flex-start}
 +
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}
 +
.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}
 +
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 +
.pure-g [class*=pure-u]{font-family:sans-serif}
 +
.pure-u-1-24{width:4.1667%}
 +
.pure-u-1-12,.pure-u-2-24{width:8.3333%}
 +
.pure-u-1-8,.pure-u-3-24{width:12.5%}
 +
.pure-u-1-6,.pure-u-4-24{width:16.6667%}
 +
.pure-u-1-5{width:20%}
 +
.pure-u-5-24{width:20.8333%}
 +
.pure-u-1-4,.pure-u-6-24{width:25%}
 +
.pure-u-7-24{width:29.1667%}
 +
.pure-u-1-3,.pure-u-8-24{width:33.3333%}
 +
.pure-u-3-8,.pure-u-9-24{width:37.5%}
 +
.pure-u-2-5{width:40%}
 +
.pure-u-10-24,.pure-u-5-12{width:41.6667%}
 +
.pure-u-11-24{width:45.8333%}
 +
.pure-u-1-2,.pure-u-12-24{width:50%}
 +
.pure-u-13-24{width:54.1667%}
 +
.pure-u-14-24,.pure-u-7-12{width:58.3333%}
 +
.pure-u-3-5{width:60%}
 +
.pure-u-15-24,.pure-u-5-8{width:62.5%}
 +
.pure-u-16-24,.pure-u-2-3{width:66.6667%}
 +
.pure-u-17-24{width:70.8333%}
 +
.pure-u-18-24,.pure-u-3-4{width:75%}
 +
.pure-u-19-24{width:79.1667%}
 +
.pure-u-4-5{width:80%}
 +
.pure-u-20-24,.pure-u-5-6{width:83.3333%}
 +
.pure-u-21-24,.pure-u-7-8{width:87.5%}
 +
.pure-u-11-12,.pure-u-22-24{width:91.6667%}
 +
.pure-u-23-24{width:95.8333%}
 +
.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
  
 +
</style>
 +
<!-- for the menu and all-->
 +
    <style type="text/css"><!--
  
−
<div class="column full_size" >
+
.pure-menu {
−
<img src="http://placehold.it/2000x300/d3d3d3/f2f2f2">
+
    box-sizing: border-box;
−
</div>
+
}
 +
.pure-menu-fixed {
 +
    position: fixed;
 +
    left: 0;
 +
    top: 0;
 +
    z-index: 3;
 +
}
 +
.pure-menu-list,
 +
.pure-menu-item {
 +
    position: relative;
 +
}
  
 +
.pure-menu-list {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
  
 +
.pure-menu-item {
 +
    padding: 0;
 +
    margin: 0;
 +
    height: 100%;
 +
}
  
−
<div class="column full_size" >
+
.pure-menu-link,
−
<h1> Welcome to iGEM 2017! </h1>
+
.pure-menu-heading {
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
    display: block;
−
</div>
+
    text-decoration: none;
 +
    white-space: nowrap;
 +
}
 +
.pure-menu-item .pure-menu-item {
 +
    display: block;
 +
}
 +
.pure-menu-heading {
 +
    text-transform: uppercase;
 +
    color: #565d64;
 +
}
 +
.pure-menu-link, {
 +
    color: #777;
 +
}
  
−
<div class="clear"></div>
+
.pure-menu-link,
 +
.pure-menu-heading {
 +
    padding: .5em 1em;
 +
}
 +
.pure-menu-active > .pure-menu-link,
 +
.pure-menu-link:hover,
 +
.pure-menu-link:focus {
 +
    background-color: #eee;
 +
}
 +
.pure-menu-selected .pure-menu-link,
 +
.pure-menu-selected .pure-menu-link:visited {
 +
    color: #000;
 +
}
  
−
<div class="column half_size" >
+
body {
−
<h5>Before you start: </h5>
+
    color: #777;
−
<p> Please read the following pages:</p>
+
}
−
<ul>
+
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
.pure-img-responsive {
−
<div class="highlight">
+
    max-width: 100%;
−
<h5> Project description </h5>
+
    height: auto;
−
<p>MicroRNAs (miRNAs) have been proven to play important roles on post-transcriptional regulation of the gene expression by direct base pairing to target sites within untranslated regions of messenger RNAs. However, the functions of most microRNAs remain to be discovered. Our project attempts to develop a novel sponge for miRNAs, which would knock down the abundance of target miRNA in the cells. Thus the sponge will be a miRNA inhibitor to be used to induce miRNA loss-of-function phenotypes or other further applications like small non-coding RNA-based diagnostic and therapeutic applications.</p>
+
}
−
</div>
+
−
</div>
+
  
−
<div class="column full_size" >
+
#layout,
−
<h5> Wiki template information </h5>
+
#menu,
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
.menu-link {
 +
    -webkit-transition: all 0.2s ease-out;
 +
    -moz-transition: all 0.2s ease-out;
 +
    -ms-transition: all 0.2s ease-out;
 +
    -o-transition: all 0.2s ease-out;
 +
    transition: all 0.2s ease-out;
 +
}
  
−
</div>
+
#layout {
 +
    position: relative;
 +
    left: 0;
 +
    padding-left: 0;
 +
}
 +
    #layout.active #menu {
 +
        left: 175px;
 +
        width: 175px;
 +
    }
  
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
  
 +
.content {
 +
    margin: 0 auto;
 +
    padding: 0 2em;
 +
    max-width: 800px;
 +
    margin-bottom: 50px;
 +
    line-height: 1.6em;
 +
}
  
 +
.header {
 +
    margin: 0;
 +
    color: #333;
 +
    text-align: center;
 +
    padding: 2.5em 2em 0;
 +
    border-bottom: 1px solid #eee;
 +
}
 +
    .header h1 {
 +
        margin: 0.2em 0;
 +
        font-size: 3em;
 +
        font-weight: 300;
 +
    }
 +
    .header h2 {
 +
        font-weight: 300;
 +
        color: #ccc;
 +
        padding: 0;
 +
        margin-top: 0;
 +
    }
  
−
<div class="column half_size" >
+
.content-subhead {
−
<h5> Editing your wiki </h5>
+
    margin: 50px 0 20px 0;
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
    font-weight: 300;
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
    color: #888;
 +
}
  
−
</div>
 
  
 +
#menu {
 +
    margin-left: -175px; /* "#menu" width */
 +
    width: 175px;
 +
    position: fixed;
 +
    top: 19px;
 +
    left: 0;
 +
    bottom: 0;
 +
    z-index: 1000; /* so the menu or its navicon stays above all content */
 +
    background: #000000;
 +
    overflow-y: auto;
 +
    -webkit-overflow-scrolling: touch;
 +
}
 +
    #menu a {
 +
        color: #999;
 +
        border: none;
 +
        padding: 0.6em 0 0.6em 0.6em;
 +
    }
  
−
<div class="column half_size" >
+
    /*
−
<h5>Tips</h5>
+
    Remove all background/borders, since we are applying them to #menu.
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
    */
−
<ul>
+
    #menu .pure-menu,
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    #menu .pure-menu ul {
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
        border: none;
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
        background: transparent;
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
    }
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
 +
    #menu .pure-menu ul,
 +
    #menu .pure-menu .menu-item-divided {
 +
        border-top: 1px solid #333;
 +
    }
 +
        /*
 +
        Change color of the anchor links on hover/focus.
 +
        */
 +
        #menu .pure-menu li a:hover,
 +
        #menu .pure-menu li a:focus {
 +
            background: #333;
 +
        }
 +
       
 +
    #menu .pure-menu-selected,
 +
    #menu .pure-menu-heading {
 +
        background: #1f8dd6;
 +
    }
 +
        #menu .pure-menu-selected a {
 +
            color: #fff;
 +
        }
  
−
<div class="column half_size" >
+
    #menu .pure-menu-heading {
−
<h5>Inspiration</h5>
+
        font-size: 110%;
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
        color: #fff;
−
<ul>
+
        margin: 0;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
    }
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
.menu-link {
−
<h5> Uploading pictures and files </h5>
+
    position: fixed;
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
    display: block; /* show this only on small screens */
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
    top: 19px;
 +
    left: 0; /* "#menu width" */
 +
    background: #000;
 +
    background: rgba(0,0,0,0.7);
 +
    font-size: 10px; /* change this value to increase/decrease button size */
 +
    z-index: 10;
 +
    width: 2em;
 +
    height: auto;
 +
    padding: 2.1em 1.6em;
 +
}
  
−
<a href="https://2017.igem.org/Special:Upload">
+
    .menu-link:hover,
−
UPLOAD FILES
+
    .menu-link:focus {
−
</a>
+
        background: #000;
−
</p>
+
    }
 +
 
 +
    .menu-link span {
 +
        position: relative;
 +
        display: block;
 +
    }
 +
 
 +
    .menu-link span,
 +
    .menu-link span:before,
 +
    .menu-link span:after {
 +
        background-color: #fff;
 +
        width: 100%;
 +
        height: 0.2em;
 +
    }
 +
 
 +
        .menu-link span:before,
 +
        .menu-link span:after {
 +
            position: absolute;
 +
            margin-top: -0.6em;
 +
            content: " ";
 +
        }
 +
 
 +
        .menu-link span:after {
 +
            margin-top: 0.6em;
 +
        }
 +
@media (min-width: 58em) {
 +
 
 +
    .header,
 +
    .content {
 +
        padding-left: 2em;
 +
        padding-right: 2em;
 +
    }
 +
 
 +
    #layout {
 +
        padding-left: 175px; /* left col width "#menu" */
 +
        left: 0;
 +
    }
 +
    #menu {
 +
        left: 175px;
 +
    }
 +
 
 +
    .menu-link {
 +
        position: fixed;
 +
        left: 175px;
 +
        display: none;
 +
    }
 +
 
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
 +
}
 +
 
 +
@media (max-width: 58em) {
 +
    #layout.active {
 +
        position: relative;
 +
        left: 175px;
 +
    }
 +
}
 +
.pure-menu-item .pure-menu-item{display:block;background-color:#cccccc}
 +
.pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3}
 +
.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative}
 +
.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}
 +
 
 +
-->
 +
    </style>
 +
 
 +
</head>
 +
<body>
 +
 
 +
  <div id="layout">
 +
        <a href="#menu" id="menuLink" class="menu-link">
 +
            <span></span>
 +
        </a>
 +
        <div id="menu">
 +
        <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=150px height=120px alt="">
 +
          <ul class="pure-menu-list">
 +
            <li class="pure-menu-item"><a class="pure-menu-heading" href="#" class="pure-menu-link">Home</a></li>             
 +
         
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 +
              <ul class="pure-menu-children" id="team_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Team</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Collaborations</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 +
              <ul class="pure-menu-children" id="project_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Description</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Design</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Experiment</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Notebook</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contribution</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Results</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Demonstrate</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Improve</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Attributions</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 +
              <ul class="pure-menu-children" id="part_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Basic Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Composite Parts</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Part Collection</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">SAFETY</a></li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 +
              <ul class="pure-menu-children" id="HP_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sliver HP</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Integrated and Gold</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Public Engagement</a></li>
 +
            </ul>
 +
            </li>
 +
            <li class="pure-menu-item pure-menu-has-children">
 +
              <a href="#"  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 +
              <ul class="pure-menu-children" id="award_show">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Applied Design</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Enterpreneurship</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Hardware</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Measurement</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Plant</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Software</a></li>
 +
            </ul>
 +
            </li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">JUDGINF FORM</a></li>
 +
         
 +
            </ul>
 +
        </div> 
 +
        </div>
 +
 
 +
 
 +
    <div id="main">
 +
        <div class="header">
 +
            <h1>Page Title</h1>
 +
            <h2>A subtitle for your page goes here</h2>
 +
        </div>
 +
 
 +
        <div class="content">
 +
            <h2 class="content-subhead">SubTitle</h2>
 +
            <p>
 +
                content
 +
            </p>
 +
 
 +
            <h2 class="content-subhead">Pics</h2>
 +
            <p>
 +
            some pics
 +
            </p>
 +
 
 +
            <div class="pure-g">
 +
                <div class="pure-u-1-4">
 +
                    <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
 +
                </div>
 +
                <div class="pure-u-1-4">
 +
                    <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
 +
                </div>
 +
                <div class="pure-u-1-4">
 +
                    <img class="pure-img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
 +
                </div>
 +
                <div class="pure-u-1-4">
 +
                    <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
 +
<script type="text/javascript">
 +
(function (window, document) {
 +
 +
    var layout  = document.getElementById('layout'),
 +
        menu    = document.getElementById('menu'),
 +
        menuLink = document.getElementById('menuLink'),
 +
        content  = document.getElementById('main');
 +
 +
    function toggleClass(element, className) {
 +
        var classes = element.className.split(/\s+/),
 +
            length = classes.length,
 +
            i = 0;
 +
 +
        for(; i < length; i++) {
 +
          if (classes[i] === className) {
 +
            classes.splice(i, 1);
 +
            break;
 +
          }
 +
        }
 +
        // The className is not found
 +
        if (length === classes.length) {
 +
            classes.push(className);
 +
        }
  
 +
        element.className = classes.join(' ');
 +
    }
  
 +
    function toggleAll(e) {
 +
        var active = 'active';
  
 +
        e.preventDefault();
 +
        toggleClass(layout, active);
 +
        toggleClass(menu, active);
 +
        toggleClass(menuLink, active);
 +
    }
  
 +
    menuLink.onclick = function (e) {
 +
        toggleAll(e);
 +
    };
  
 +
    content.onclick = function(e) {
 +
        if (menu.className.indexOf('active') !== -1) {
 +
            toggleAll(e);
 +
        }
 +
    };
  
 +
}(this, this.document));
 +
</script>
  
 +
<script type="text/javascript" >
 +
    function Show(tagId) {
 +
    if (document.getElementById(tagId).style.display=="none") {
 +
    document.getElementById(tagId).style.display="block";
 +
   
 +
    }
 +
    else {
 +
    document.getElementById(tagId).style.display="none";
 +
    }
 +
    }
 +
</script>
 +
</body>
 
</html>
 
</html>

Revision as of 12:59, 12 September 2017

<!doctype html> Team:NUDT_CHINA