Difference between revisions of "Team:Peking"

 
(29 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<!DOCTYPE html>
+
<html lang="en">
  
{{Peking/css/hero-slider-style}}
 
{{Peking/font-awesome-4.5.0/css/font-awesome.min}}
 
{{Peking/css/bootstrap.min}}
 
{{Peking/css/magnific-popup}}
 
{{Peking/css/templatemo-style}}
 
 
<html>
 
 
<head>
 
<head>
    <meta charset="utf-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
  
     <title>Team:Peking</title>
+
     <style>
    <!-- load stylesheets -->
+
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> -->
+
    <!-- Google web font "Open Sans" -->
+
                                     
+
    <!-- Templatemo style -->
+
  
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
        <!--[if lt IE 9]>
 
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
          <![endif]-->
 
</head>
 
  
    <body>
+
         /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
          
+
        <!-- Content -->
+
        <div class="cd-hero">
+
  
            <!-- Navigation -->       
+
        /* Clear the default wiki settings */
            <div class="cd-slider-nav">
+
                <nav class="navbar">
+
                    <div class="tm-navbar-bg">
+
                       
+
                        <a class="navbar-brand" href="#"><i class="fa fa-send-o tm-brand-icon"></i>Peking</a>
+
  
                        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
+
        #home_logo, #sideMenu {
                            &#9776;
+
            display: none;
                        </button>
+
        }
                        <div class="collapse navbar-toggleable-md text-xs-center text-uppercase tm-navbar" id="tmNavbar">
+
                            <ul class="nav navbar-nav">
+
                                <li class="nav-item active selected">
+
                                    <a class="nav-link" href="#0" data-no="1">Home <span class="sr-only">(current)</span></a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="2">Team</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="3">Project</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="4">Parts</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="5">Safety</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="6">Practices</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="7">Awards</a>
+
                                </li>
+
                                <li class="nav-item">
+
                                    <a class="nav-link" href="#0" data-no="8">Judging Form</a>
+
                                </li>
+
                            </ul>
+
                        </div>                       
+
                    </div>
+
  
                </nav>
+
        #sideMenu, #top_title, .patrollink {
             </div>
+
             display: none;
 +
        }
  
             <ul class="cd-hero-slider">  <!-- autoplay -->
+
        #content {
                <li class="selected">
+
             width: 100%;
                    <div class="cd-full-width">
+
            padding: 0px;
                        <div class="container-fluid js-tm-page-content tm-page-1" data-page-no="1">
+
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
                           
+
        body {
                           
+
            background-color: #FAFAFA;
                                <div class="col-xs-12">
+
        !important;
                                    <div class="tm-2-col-container tm-bg-white-translucent">
+
        }
  
                                       
+
        #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
                                        <div class="row">
+
    </style>
                                           
+
                                                <div class="tm-textbox" >                                        To survive, living systems receive information from outside environment and adjust their own internal workings in response. This adjustment depends not only on processing a combination of environmental signal inputs, but on determining the system’s current state. In digital circuit theory, this operating mode is known as sequential logic whose outputs is a function of the present value of inputs and, more importantly, the sequence of past inputs.</p>
+
                               
+
                                   
+
                                                                <p class="tm-text">Nowadays, synthetically engineered genetic circuits constructed with combinational logic can perform a wide variety of tasks, but are not able to store a “state” and change from one state to another, which has limited their widespread implementation. This year, Peking iGEM is developing a Computer Aided Design (CAD) method for automatically designing genetic sequential logic circuits. By doing this, we are going to build asynchronous genetic sequential logic circuits in which the state of the system can change in response to changing inputs, and synchronous circuits in which the state of the system changes at discrete time in response to an intercellular clock signal.</p>   
+
                                           
+
                                        </div>
+
  
                                    </div>
+
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
                                </div>
+
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 +
action=raw&ctype=text/javascript"></script>
 +
    <link href="https://2017.igem.org/Template:Peking/mdl/component?action=raw&ctype=text/css" rel="stylesheet">
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/mdl/componentjs?action=raw&ctype=text/javascript"></script>
  
                            </div>
+
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
  
                        </div>
+
    <link rel="stylesheet" type="text/css"
                    </div> <!-- .cd-full-width -->
+
          href="https://2017.igem.org/Template:Peking/mdl/main?action=raw&ctype=text/css">
                </li>
+
    <!-- Fonts -->
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/fonts?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/icon?action=raw&ctype=text/css">
  
                <li>
+
</head>
                    <div class="cd-full-width">
+
  
                        <div class="container-fluid js-tm-page-content" data-page-no="2">
 
  
                           
+
<body>
                            <div class="row">
+
                                <div class="col-xs-12">
+
                                    <div class="tm-flex">
+
                           
+
                                        <div class="tm-bg-white-translucent tm-textbox-padding">
+
                                            <h2 class="tm-text-title">Lorem ipsum dolor</h2>
+
                                            <p class="tm-text">Nulla efficitur, ligula et imperdiet volutpat, lacus tortor tempus massa, eget tempus quam nibh vel nulla.</p>
+
                                            <p class="tm-text">Vivamus non molestie leo, non tincidunt diam. Mauris sagittis elit in velit ultricies aliquet sed in magna.</p>
+
                                            <p class="tm-text">Pellentesque semper, est nec consequat viverra, sem augue tincidunt nisi, a posuere nisi sapien sed sapien. Nulla facilisi.</p>
+
                                        </div>
+
  
                                        <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
 
                                            <h2 class="tm-text-title">Aliquam sem sem</h2>
 
                                            <p class="tm-text">Proin sagittis mauris dolor, vel efficitur lectus dictum nec. Sed ultrices placerat arcu, id malesuada metus cursus suscipit. Donex quis consectetur ligula. Proin accumsan eros id nisi porttitor, a facilisis quam cursus.</p>
 
                                            <p class="tm-text">Donec vitae bibendum est, et ultrices urna. Curabitur ac bibendum augue, a convallis mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris consequat metus hendrerit, tincidunt mi nec, euismod massa.</p>
 
                                        </div>
 
  
                                    </div>
+
<!-- Always shows a header, even in smaller screens. -->
                                </div>
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
                            </div>
+
    <header class="mdl-layout__header" style="position:fixed; margin-top: -9px; !important;">
                       
+
        <div class="mdl-layout__header-row">
                        </div>
+
            <!-- Title -->
                                               
+
            <a href="https://2017.igem.org/Team:Peking"><img
                    </div> <!-- .cd-full-width -->
+
                    src="https://static.igem.org/mediawiki/2017/c/cf/Peking_TeamLogoClassical.png" height="35"></a>
  
                </li>
+
            <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking"
                <!-- Page 3 -->
+
              style="color: #000000; font-size: x-large"><strong>Peking iGEM </strong> 2017</a>
                <li>
+
            <!-- Add spacer, to align navigation to the right -->
                   
+
            <div class="mdl-layout-spacer"></div>
                    <div class="cd-full-width">
+
            <!-- Navigation. We hide it in small screens. -->
 +
            <nav class="mdl-navigation mdl-layout--large-screen-only">
 +
                <style>
 +
                    a:link {
 +
                        text-decoration: none;
 +
                    }
  
                         <div class="container-fluid js-tm-page-content" data-page-no="3">
+
                    a:visited {
                           
+
                         text-decoration: none;
                       
+
                    }
                            <div class="tm-img-gallery-container">
+
  
                                <div class="tm-img-gallery gallery-one">
+
                    a:active {
                                <!-- Gallery One pop up connected with JS code below -->
+
                        text-decoration: none;
                                   
+
                    }
                                    <div class="tm-img-gallery-info-container">
+
                                   
+
                                        <h2 class="tm-text-title tm-gallery-title">Gallery One</h2>
+
                                        <p class="tm-text">Nulla efficitur, ligula et imperdiet volutpat, lacus tortor tempus massa, eget tempus quam
+
                                        nibh vel nulla. Maecenas purus sem, lobortis id odio in, ultrices scelerisque sapien.
+
                                        </p>                                   
+
                                   
+
                                    </div>
+
  
                                   
+
                    a:hover {
                                                                 
+
                    }
                                </div>
+
                </style>
                               
+
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking"
                            </div> <!-- .tm-img-gallery-container -->
+
                  style="color: #000; font-weight: 500;">Home</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Project#Introduction">Project</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Model#Overview">Modelling</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Software">Software</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Hardware">Hardware</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Lab">Lab</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/HP">Practices</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Parts#Overview">Parts</a>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking/Team">Team</a>
 +
            </nav>
 +
        </div>
 +
    </header>
  
                        </div> <!-- .container-fluid -->
+
</div>
                                                   
+
                    </div> <!-- .cd-full-width -->
+
                   
+
                </li>
+
  
                <!-- Page 4 -->
+
<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600"
                <li>
+
      style="width: 100%; padding-bottom: 0px; background-color: #FAFAFA;">
                   
+
    <!-- Wide card with share menu button -->
                    <div class="cd-full-width">
+
    <style>
  
                        <div class="container-fluid js-tm-page-content" data-page-no="4">
+
        a:link {
 +
            text-decoration: none;
 +
        }
  
                           
+
        a:visited {
                           
+
            text-decoration: none;
                            <div class="tm-img-gallery-container">
+
        }
  
                                <div class="tm-img-gallery gallery-two">
+
        a:active {
                                <!-- Gallery Two pop up connected with JS code below -->
+
            text-decoration: none;
                                   
+
        }
                                    <div class="tm-img-gallery-info-container">
+
                                   
+
                                        <h2 class="tm-text-title tm-gallery-title"><span class="tm-white">Gallery Two</span></h2>
+
                                        <p class="tm-text"><span class="tm-white">Nulla efficitur, ligula et imperdiet volutpat, lacus tortor tempus massa, eget tempus quam nibh vel nulla. Maecenas purus sem, lobortis id odio in, ultrices scelerisque sapien.</span>
+
                                        </p>                                   
+
                                   
+
                                    </div>
+
  
                                   
+
        a:hover {
                                   
+
            text-decoration: none;
                                                                   
+
        }
                                </div>
+
                               
+
                            </div> <!-- .tm-img-gallery-container -->
+
  
                        </div> <!-- .container-fluid -->
+
        .demo-card-wide.mdl-card {
                                                   
+
            margin-left: 50px;
                    </div> <!-- .cd-full-width -->
+
            margin-right: 50px;
                   
+
            margin-top: 120px;
                </li>
+
            margin-bottom: 100px;
 +
            width: auto;
 +
            height: 500px;
 +
        }
  
                <li>
+
        .demo-card-wide > .mdl-card__title {
 +
            padding-left: 50px;
 +
            color: #fff;
 +
            height: 300px;
 +
        }
  
                    <div class="cd-full-width">
+
        .demo-card-wide > .mdl-card__menu {
                        <div class="container-fluid js-tm-page-content" data-page-no="5">
+
            color: #fff;
                       
+
        }
                         
+
  
                            <div class="row">
+
    </style>
                               
+
                                <div class="col-xs-12">
+
                                    <div class="tm-flex tm-3-col-container">
+
                                       
+
                                            <div class="tm-3-col-textbox tm-bg-white-translucent">
+
                                                <div class="text-xs-left tm-textbox tm-textbox-padding">
+
  
                                                    <h2 class="tm-text-title">Testimonial One</h2>                                         
+
    <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="margin-bottom: 30px">
                                                    <p class="tm-text">Etiam vitae imperdiet magna. Vestibulum blandit vehicula metus, ac ornare eros elementum et. Pellentesque habitant morbi tristique senectus et ntus et malesuada fames ac turpis egestas.</p>
+
        <div class="mdl-card__title"
 +
            style="background: url('https://static.igem.org/mediawiki/2017/f/fb/Peking_banner_final.png') center / cover; height : 100%; width: 100%" >
  
                                                    <p class="tm-text">Mauris lobortis lorem nulla, non tristique enim sollicitudin eu. Praesent tempus dapibus odio nec elementum.</p>
+
        </div>
 +
    </div>
  
                                                </div>
+
    <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="margin-top: 20px; margin-bottom: 30px">
                                            </div>
+
  
                                            <div class="tm-3-col-textbox tm-bg-white-translucent">
+
        <div class="mdl-card__supporting-text"
                                                <div class="text-xs-left tm-textbox tm-textbox-padding">
+
            style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 50px; padding-top: 50px; padding-bottom:50px">
 +
            <h1>Why sequential logic?</h1><br>
 +
            Cells respond to a myriad signals under most conditions and adjust their own internal mechanisms
 +
            to survive. This adjustment depends not only on processing a combination of current environmental
 +
            input signals, but also on determining the cell’s current state, which is a result of a series of past
 +
            inputs. In digital circuit theory, this operating mode is known as <b>sequential logic</b>. Nowadays, a
 +
            wide variety of tasks can be performed by synthetically engineered genetic circuits, mostly constructed
 +
            using combinational logic. Contrast to sequential logic, its output is a function of the present input
 +
            only. It is difficult to perform functions in a specific order, which has limited the widespread
 +
            implementation of such systems. The ability of sequential logic circuits to store modest amounts of
 +
            information within living systems and to act upon them would enable new approaches to the study and
 +
            control of biological processes . A cell can be designed to do more complex work if it has more
 +
            states. In other words, we can unfold a new dimensionality in designing synthetic life – <b>time</b>.
 +
        </div>
 +
    </div>
  
                                                    <h2 class="tm-text-title">Testimonial Two</h2>
+
    <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="margin-top: 20px; margin-bottom: 30px">
  
                                                    <p class="tm-text">Curabitur sodales, est auctor congue vulputate, nisl tellus finibus nunc, vitae consectetur enim erat vitae quam.</p>
+
        <div class="mdl-card__supporting-text"
 +
            style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 50px; padding-top: 50px; padding-bottom:50px">
 +
            <h1>What did we do?</h1><br>
 +
            This year, the Peking iGEM team is attempting to develop a framework of biological sequential circuits that
 +
            are programmable. The envisioned circuit is capable of both storing states in DNA and automatically
 +
            running a series of instructions in a specific order. More specifically, the sequential logic that
 +
            consists of a <b>clock</b>, <b>flip flop</b> and <b>control unit</b> in bacteria. The <b>clock</b> is an
 +
            oscillator with a repeated signal cycle that serves as a "metronome" to trigger actions of
 +
            sequential logic circuits. <b>Flip-flop</b> is a memory device that can remember states. Paired with a
 +
            clock signal, it can realize state transition. The <b>control unit</b> is a functional part which can
 +
            convert a signal from flip-flop into complex functions. With such a design, historical events are
 +
            recorded and influence current cell behavior.
 +
            This work tries to point the way toward building large computational sys-tems from modular biological
 +
            parts—basic sequential computing devices in living cells—and ultimately, programming complex biological
 +
            functions. Computers have thus become "alive". A unicellular organism itself cannot pack much computational
 +
            power, but considered as a modular building block, its potential is impressive.</p>
 +
        </div>
 +
    </div>
  
                                                    <p class="tm-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae tempor turpis.</p>
+
    <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="margin-bottom: 30px;  height: auto; width:auto" >
                                                </div>         
+
        <div class="mdl-card__title"
                                            </div>
+
            style="background: url('https://static.igem.org/mediawiki/2017/c/cd/Peking_figure1.png') center / cover; height: 600px; width: 1100px">
  
                                            <div class="tm-3-col-textbox tm-bg-white-translucent">
+
        </div>
                                                <div class="text-xs-left tm-textbox tm-textbox-padding">
+
    </div>
  
                                                    <h2 class="tm-text-title">Testimonial Three</h2>
 
  
                                                    <p class="tm-text">Mauris lobortis lorem nulla, non tristique enim sollicitudin eu. Praesent tempus dapibus odio nec elementum.</p>
+
    <div class="mdl-grid mdl-grid--no-spacing" style="margin: 0px">
 +
        <div class="mdl-cell mdl-cell--6-col">
 +
            <div class="demo-card-wide mdl-card mdl-shadow--2dp"
 +
                style="margin-left: 50px; margin-right: 30px; margin-top: 20px; margin-bottom: 20px">
 +
                <div class="mdl-card__title"
 +
                    style="background: url('https://static.igem.org/mediawiki/2017/9/96/Peking_MP_Clock.jpeg') center / cover;">
 +
                    <h1 class="mdl-card__title-text" style="text-shadow:2px 2px 8px #070707; font-size: xx-large">
 +
                        <strong>Clock</strong></h1>
 +
                </div>
 +
                <div class="mdl-card__supporting-text"
 +
                    style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 30px; padding-right: 10px; padding-top: 30px; padding-bottom:30px">
 +
                    A metronome that triggers actions of sequential logic circuits.<br><br>
  
                                                    <p class="tm-text">Sed elementum est quis tortor faucibus, et molestie nibh finibus. Mauris condimentum ex vestibulum fringilla consectetur.</p>
+
                    <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
                                                </div>         
+
                      href="https://2017.igem.org/Team:Peking/Project#Clock" target="_blank"
                                            </div>
+
                      style="background-color: #E44043; color: white; position: absolute">
                                       
+
                        Read More
                                    </div>
+
                    </a>
                                </div>
+
                </div>
  
                            </div>
 
  
                        </div>         
+
            </div>
                     </div>                                      
+
         </div>
 +
        <div class="mdl-cell mdl-cell--6-col">
 +
            <div class="demo-card-wide mdl-card mdl-shadow--2dp"
 +
                style="margin-right: 50px; margin-left: 30px; margin-top: 20px; margin-bottom: 20px">
 +
                <div class="mdl-card__title"
 +
                    style="background: url('https://static.igem.org/mediawiki/2017/3/37/Peking_flipteethpeer.jpeg') center / cover;">
 +
                     <h1 class="mdl-card__title-text" style="text-shadow:2px 2px 8px #070707; font-size: xx-large">
 +
                        <strong>Flip-flop</strong></h1>
 +
                </div>
 +
                <div class="mdl-card__supporting-text"
 +
                    style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 30px; padding-right: 40px; padding-top: 30px; padding-bottom:30px">
  
                </li>
+
                    A memory device that can remember states.
  
                <li>
+
                    <br><br>
                     <div class="cd-full-width">
+
                     <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
 +
                      href="https://2017.igem.org/Team:Peking/Project#Flip-flop" target="_blank"
 +
                      style="background-color: #E44043; color: white;">
 +
                        Read More
 +
                    </a>
 +
                </div>
  
                        <div class="container-fluid js-tm-page-content" data-page-no="6">
 
  
                       
+
            </div>
                           
+
        </div>
                            <div class="tm-contact-page">
+
    </div>
                               
+
                                <div class="row">
+
  
                                    <div class="col-xs-12">
+
    <div class="mdl-grid mdl-grid--no-spacing" style="margin: 0px">
 +
        <div class="mdl-cell mdl-cell--6-col">
 +
            <div class="demo-card-wide mdl-card mdl-shadow--2dp"
 +
                style="margin-left: 50px; margin-right: 30px; margin-top: 20px">
 +
                <div class="mdl-card__title"
 +
                    style="background: url('https://static.igem.org/mediawiki/2017/7/7a/Peking_pad_slides.jpeg') center / cover;">
 +
                    <h1 class="mdl-card__title-text" style="text-shadow:2px 2px 8px #070707; font-size: xx-large">
 +
                        <strong>Controller</strong></h1>
 +
                </div>
 +
                <div class="mdl-card__supporting-text"
 +
                    style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 30px; padding-right: 10px; padding-top: 30px; padding-bottom:30px">
 +
                    A module converting repeating signals to complex functions.
 +
                    <br><br>
 +
                    <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
 +
                      href="https://2017.igem.org/Team:Peking/Project#Controller" target="_blank"
 +
                      style="background-color: #E44043; color: white;">
 +
                        Read More
 +
                    </a>
 +
                </div>
  
                                        <div class="tm-flex tm-contact-container">
 
                               
 
                                            <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">
 
                                                <p class="tm-text">Praesent tempus dapibus odio nec elementum. Sed elementum est quis tortor faucibus, et molestie nibh finibus. Mauris condimentum ex vestibulum fringilla consectetur.</p>                                               
 
                                               
 
                                                <!-- contact form -->
 
                                                <form action="index.html" method="post" class="tm-contact-form">
 
  
                                                    <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
+
            </div>
                                                        <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
+
        </div>
                                                    </div>
+
        <div class="mdl-cell mdl-cell--6-col">
                                       
+
            <div class="demo-card-wide mdl-card mdl-shadow--2dp"
                                                    <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">                                                      
+
                style="margin-right: 50px; margin-left: 30px; margin-top: 20px;">
                                                        <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
+
                <div class="mdl-card__title"
                                                    </div>
+
                    style="background: url('https://static.igem.org/mediawiki/2017/d/dd/Peking_HP_SynBioWiki.png') center / cover;">
                                                                                                           
+
                    <h1 class="mdl-card__title-text" style="text-shadow:2px 2px 8px #070707; font-size: xx-large">
                                                    <div class="form-group">
+
                        <strong>SynBioWiki</strong></h1>
                                                        <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required/>
+
                </div>
                                                    </div>
+
                <div class="mdl-card__supporting-text"
                                                   
+
                    style="line-height: 2em;text-align: justify; color: #3A3A3A; padding-left: 30px; padding-right: 40px; padding-top: 30px; padding-bottom:30px">
                                                    <div class="form-group">
+
                                                        <textarea id="contact_message" name="contact_message" class="form-control" rows="5" placeholder="Your message" required></textarea>
+
                                                    </div>  
+
  
                                                    <button type="submit" class="pull-xs-right tm-submit-btn">Send</button> 
+
                    A wiki-based encyclopedia exclusive for synthetic biology.
                                               
+
                                                </form> 
+
                                            </div>
+
  
                                            <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">
+
                    <br><br>
                                                <h2 class="tm-contact-info">123 New Street 11000, San Francisco, CA</h2>
+
                    <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
                                                <!-- google map goes here -->
+
                      href="https://2017.igem.org/Team:Peking/Engagement#p1 " target="_blank"
                                                <div id="">map</div>
+
                      style="background-color: #E44043; color: white;">
                                            </div>
+
                        Read More
 
+
                     </a>
                                        </div>
+
 
+
                                    </div>
+
 
+
                                </div>
+
 
+
                            </div>   
+
 
+
                        </div>
+
                       
+
                    </div> <!-- .cd-full-width -->
+
                </li>
+
            </ul> <!-- .cd-hero-slider -->
+
           
+
            <footer class="tm-footer">
+
           
+
                <div class="tm-social-icons-container text-xs-center">
+
                    <a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
+
                    <a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
+
                    <a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
+
                    <a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
+
                     <a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
+
 
                 </div>
 
                 </div>
               
 
                <!--<p class="tm-copyright-text">Copyright &copy; 2016 Your Company
 
               
 
                - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>-->
 
 
            </footer>
 
                   
 
        </div> <!-- .cd-hero -->
 
       
 
  
        <!-- Preloader, https://ihatetomatoes.net/create-custom-preloading-screen/ -->
 
        <div id="loader-wrapper">
 
           
 
            <div id="loader"></div>
 
            <div class="loader-section section-left"></div>
 
            <div class="loader-section section-right"></div>
 
  
 +
            </div>
 
         </div>
 
         </div>
       
+
    </div>
        <!-- load JS files -->
+
  
        <script type="text/javascript" src="https://2017.igem.org/Template:Peking/js/jquery-1.11.3.min?
 
action=raw&ctype=text/javascript"></script>
 
  
  
        <script type="text/javascript" src="https://2017.igem.org/Template:Peking/js/tether.min?
 
action=raw&ctype=text/javascript"></script>        <!-- jQuery (https://jquery.com/download/) -->
 
  
  
        <script type="text/javascript" src="https://2017.igem.org/Template:Peking/js/bootstrap.min?
+
    <section class="docs-text-styling download mdl-color--grey-800" style="height: 1px"></section>
action=raw&ctype=text/javascript"></script>         <!-- jQuery (https://jquery.com/download/) -->
+
    <footer class="mdl-mega-footer" style="height: 260px; margin-bottom: 0px;">
 +
        <div class="mdl-mega-footer__middle-section">
  
 +
            <div class="mdl-mega-footer__drop-down-section">
 +
                <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
 +
                <h1 class="mdl-mega-footer__heading">Acknowledgement</h1>
 +
                <ul class="mdl-mega-footer__link-list" style="margin-left: 0px;>
 +
                    <li><a href=" http:
 +
                //dean.pku.edu.cn/pkudean/"> </li>
 +
                <li><a href="http://dean.pku.edu.cn/pkudean/"><img
 +
                        src="https://static.igem.org/mediawiki/2017/9/99/Peking_footer_logo_admin.png" height="50px"/></a>
 +
                </li>
 +
                <li><a href="http://www.bio.pku.edu.cn/en/"> <img
 +
                        src="https://static.igem.org/mediawiki/2017/a/ab/Peking_footer_logo_slslogo.png" height="50px"/> </a>
 +
                </li>
 +
                <li><a href="http://cqb.pku.edu.cn/en/"> <img
 +
                        src="https://static.igem.org/mediawiki/2017/9/9a/Peking_footer_logo_cqb.png" height="48px"/> </a></li>
  
<script type="text/javascript" src="https://2017.igem.org/Template:Peking/js/hero-slider-main?
+
                </ul>
action=raw&ctype=text/javascript"></script>        <!-- jQuery (https://jquery.com/download/) -->
+
            </div>
  
 +
            <div class="mdl-mega-footer__drop-down-section">
 +
                <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
 +
                <h1 class="mdl-mega-footer__heading">Connection</h1>
 +
                <ul class="mdl-mega-footer__link-list" style="margin-left: 0px;>
 +
                    <li><a href=" https:
 +
                //www.facebook.com/pekingigem"></a></li>
 +
                <li><a href="https://www.facebook.com/pekingigem">Facebook</a></li>
 +
                <li><a href="https://www.youtube.com/channel/UCefEYVCVqKJLmoJrSxivgZQ">Youtube</a></li>
 +
                <li><a href="https://twitter.com/iGEM_Peking">Twitter</a></li>
 +
                <li><a href="https://github.com/PekingiGEM2017">Github</a></li>
 +
                </ul>
 +
            </div>
  
 +
            <div class="mdl-mega-footer__drop-down-section">
 +
                <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
 +
                <h1 class="mdl-mega-footer__heading">Contact</h1>
 +
                <ul class="mdl-mega-footer__link-list" style="margin-left: 0px;>
 +
                    <li><a href=" http:
 +
                //www.synbiowiki.com"> </a></li>
 +
                <li><a href="http://www.synbiowiki.com">SynBioWiki.com</a></li>
 +
                <li><a href="mailto:PekingIGEM@gmail.com">Mail</a></li>
 +
                </ul>
 +
            </div>
  
<script type="text/javascript" src="https://2017.igem.org/Template:Peking/js/jquery.magnific-popup.min?
+
            <div class="mdl-mega-footer__drop-down-section">
action=raw&ctype=text/javascript"></script>         <!-- jQuery (https://jquery.com/download/) -->
+
                <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
 +
                <h2 style="color: white; "><strong>Peking iGEM</strong> 2017</h2>
 +
                <ul class="mdl-mega-footer__link-list" style="margin-left: 0px;">
 +
                    <li style="color: white; line-height: 1.88em;">Peking University,<br> No.5 Yiheyuan Road Haidian
 +
                        District, Beijing, P.R.China<br>100871
 +
                    </li>
 +
                </ul>
 +
            </div>
  
         <script>
+
         </div>
 
+
            function adjustHeightOfPage(pageNo) {
+
 
+
                var offset = 80;
+
                var pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height();
+
 
+
                if($(window).width() >= 992) { offset = 120; }
+
                else if($(window).width() < 480) { offset = 40; }
+
             
+
                // Get the page height
+
                var totalPageHeight = 15 + $('.cd-slider-nav').height()
+
                                        + pageContentHeight + offset
+
                                        + $('.tm-footer').height();
+
 
+
                // Adjust layout based on page height and window height
+
                if(totalPageHeight > $(window).height())
+
                {
+
                    $('.cd-hero-slider').addClass('small-screen');
+
                    $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
+
                }
+
                else
+
                {
+
                    $('.cd-hero-slider').removeClass('small-screen');
+
                    $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
+
                }
+
            }
+
 
+
            /*
+
                Everything is loaded including images.
+
            */
+
            $(window).load(function(){
+
 
+
                adjustHeightOfPage(1); // Adjust page height
+
 
+
                /* Gallery One pop up
+
                -----------------------------------------*/
+
                $('.gallery-one').magnificPopup({
+
                    delegate: 'a', // child items selector, by clicking on it popup will open
+
                    type: 'image',
+
                    gallery:{enabled:true}               
+
                });
+
+
/* Gallery Two pop up
+
                -----------------------------------------*/
+
$('.gallery-two').magnificPopup({
+
                    delegate: 'a',
+
                    type: 'image',
+
                    gallery:{enabled:true}               
+
                });
+
 
+
                /* Collapse menu after click
+
                -----------------------------------------*/
+
                $('#tmNavbar a').click(function(){
+
                    $('#tmNavbar').collapse('hide');
+
  
                    adjustHeightOfPage($(this).data("no")); // Adjust page height     
 
                });
 
  
                /* Browser resized
+
    </footer>
                -----------------------------------------*/
+
                $( window ).resize(function() {
+
                    var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
+
                   
+
                    // wait 3 seconds
+
                    setTimeout(function() {
+
                        adjustHeightOfPage( currentPageNo );
+
                    }, 1000);
+
                   
+
                });
+
       
+
                // Remove preloader (https://ihatetomatoes.net/create-custom-preloading-screen/)
+
                $('body').addClass('loaded');
+
                         
+
            });
+
  
         
+
</main>
       
+
         
+
  
        </script>           
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:49, 16 December 2017

Peking iGEM 2017

Why sequential logic?


Cells respond to a myriad signals under most conditions and adjust their own internal mechanisms to survive. This adjustment depends not only on processing a combination of current environmental input signals, but also on determining the cell’s current state, which is a result of a series of past inputs. In digital circuit theory, this operating mode is known as sequential logic. Nowadays, a wide variety of tasks can be performed by synthetically engineered genetic circuits, mostly constructed using combinational logic. Contrast to sequential logic, its output is a function of the present input only. It is difficult to perform functions in a specific order, which has limited the widespread implementation of such systems. The ability of sequential logic circuits to store modest amounts of information within living systems and to act upon them would enable new approaches to the study and control of biological processes . A cell can be designed to do more complex work if it has more states. In other words, we can unfold a new dimensionality in designing synthetic life – time.

What did we do?


This year, the Peking iGEM team is attempting to develop a framework of biological sequential circuits that are programmable. The envisioned circuit is capable of both storing states in DNA and automatically running a series of instructions in a specific order. More specifically, the sequential logic that consists of a clock, flip flop and control unit in bacteria. The clock is an oscillator with a repeated signal cycle that serves as a "metronome" to trigger actions of sequential logic circuits. Flip-flop is a memory device that can remember states. Paired with a clock signal, it can realize state transition. The control unit is a functional part which can convert a signal from flip-flop into complex functions. With such a design, historical events are recorded and influence current cell behavior. This work tries to point the way toward building large computational sys-tems from modular biological parts—basic sequential computing devices in living cells—and ultimately, programming complex biological functions. Computers have thus become "alive". A unicellular organism itself cannot pack much computational power, but considered as a modular building block, its potential is impressive.

Clock

A metronome that triggers actions of sequential logic circuits.

Read More

Flip-flop

A memory device that can remember states.

Read More

Controller

A module converting repeating signals to complex functions.

Read More

SynBioWiki

A wiki-based encyclopedia exclusive for synthetic biology.

Read More