Difference between revisions of "Team:DUT China B"

Line 1: Line 1:
 
{{DUT_China_B/test_style.css}}
 
{{DUT_China_B/test_style.css}}
−
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 6: Line 5:
 
<title>Document</title>
 
<title>Document</title>
 
<style>
 
<style>
−
.div1{
+
*{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
    html,body{
 +
position: absolute;
 +
height: 100%;
 +
width: 100%;
 +
}
 +
#banner{
 +
position: absolute;
 +
top: 0px;
 +
left: 0px;
 +
width: 100%;
 +
height: 100%;
  
−
            margin:20px auto;
+
}
−
 
+
#card{
−
            background: #555;
+
/*width: 100%;*/
−
 
+
height: 100%;
−
            width:500px;
+
/*float: right;*/
−
 
+
position: absolute;
−
            /*height:200px;*/
+
}
−
 
+
#bookmark{
−
            border:2px solid #000;
+
width: 13%;
−
 
+
height: 28%;
−
            border-radius:40px;
+
background-color: #FFEBC2;
−
 
+
border-radius: 15%;
−
            text-align: center;
+
position: absolute;
−
 
+
}
−
            line-height: 200px;
+
.re{
−
 
+
font-weight: bold;
−
         }
+
font-size: 20px;
−
     .div1 h1{
+
font-family:"微软雅黑";
−
     color: #fff;
+
color: #9587FA;
−
     font-size: 50px;
+
transform:rotate(270deg);
 +
         -ms-transform:rotate(270deg);
 +
        -moz-transform:rotate(270deg);
 +
        -webkit-transform:rotate(270deg);
 +
        -o-transform:rotate(270deg);
 +
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 +
        z-index: 100;
 +
    }
 +
     .occupy{
 +
     margin: 0;
 +
     padding: 0;
 +
    }
 +
    @keyframes card1{
 +
    from{left: 100%;}
 +
    to{left: 5%;}
 
     }
 
     }
−
     .div2{
+
     @keyframes card2{
 +
    from{left: 100%;}
 +
    to{left: 10%;}
 +
    }
 +
    @keyframes card3{
 +
    from{left: 100%;}
 +
    to{left: 15%;}
 +
    }
 +
    @keyframes card4{
 +
    from{left: 100%;}
 +
    to{left: 20%;}
 +
    }
 +
    @keyframes card5{
 +
    from{left: 100%;}
 +
    to{left: 25%;}
 +
    }
 +
    @keyframes card6{
 +
    from{left: 100%;}
 +
    to{left: 30%;}
 +
    }
 +
    @keyframes bookmark1{
 +
    from{left: 100%;}
 +
    to{left: 1%;}
 +
    }
 +
    @keyframes bookmark2{
 +
    from{left: 100%;}
 +
    to{left: 6%;}
 +
    }
 +
    @keyframes bookmark3{
 +
    from{left: 100%;}
 +
    to{left: 11%;}
 +
    }
 +
    @keyframes bookmark4{
 +
    from{left: 100%;}
 +
    to{left: 16%;}
 +
    }
 +
    @keyframes bookmark5{
 +
    from{left: 100%;}
 +
    to{left: 21%;}
 +
    }
 +
    @keyframes bookmark6{
 +
    from{left: 100%;}
 +
    to{left: 26%;}
 +
    }
 +
   
 +
</style>
 +
</head>
 +
<body>
 +
<div id="banner">
  
−
            margin:20px auto;
+
<div id="card" style="background-color: #CC86E9;width: 100%;z-index: 0;"></div>
 +
<div id="bookmark" style="z-index: 1;left: 100%;top: 72%;animation: bookmark1;animation-duration:1s;animation-delay:1s;animation-fill-mode : forwards;">
 +
<div class="occupy" style="width: 100%;height: 60%;"></div>
 +
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
 +
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
 +
<div class="re" style="width: 25%;float: left;">AWARDS</div>
 +
</div>
  
−
            padding: 15px;
+
<div id="card" style="background-color: #9587FA;width: 95%;z-index: 1;left: 100%;animation: card1;animation-duration:1s;animation-delay:1s;animation-fill-mode : forwards;"></div>
 +
<div id="bookmark" style="z-index: 2;left: 100%;top: 57%;animation: bookmark2;animation-duration:1s;animation-delay:2s;animation-fill-mode : forwards;">
 +
<div class="occupy" style="width: 100%;height: 50%;"></div>
 +
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
 +
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
 +
<div class="re" style="width: 25%;float: left;">TEAM</div>
 +
</div>
  
−
            background: #777;
+
<div id="card" style="background-color: #A5CEFF;width: 90%;z-index: 2;left: 100%;animation: card2;animation-duration:1s;animation-delay:2s;animation-fill-mode : forwards;"></div>
 +
<div id="bookmark" style="z-index: 3;left: 100%;top: 43%;animation: bookmark3;animation-duration:1s;animation-delay:3s;animation-fill-mode : forwards;">
 +
<div class="occupy" style="width: 100%;height: 65%;"></div>
 +
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
 +
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
 +
<div class="re" style="width: 25%;float: left;">OUTREACH</div>
 +
</div>
  
−
            width:700px;
+
<div id="card" style="background-color: #ADF1EB;width: 85%;z-index: 3;left: 100%;animation: card3;animation-duration:1s;animation-delay:3s;animation-fill-mode : forwards;"></div>
 +
<div id="bookmark" style="z-index: 4;left: 100%;top: 28%;animation: bookmark4;animation-duration:1s;animation-delay:4s;animation-fill-mode : forwards;">
 +
<div class="occupy" style="width: 100%;height: 50%;"></div>
 +
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
 +
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
 +
<div class="re" style="width: 25%;float: left;">MODEL</div>
 +
</div>
  
−
            /*height:250px;*/
+
<div id="card" style="background-color: #D9FFE0;width: 80%;z-index: 4;left: 100%;animation: card4;animation-duration:1s;animation-delay:4s;animation-fill-mode : forwards;"></div>
 +
<div id="bookmark" style="z-index: 5;left: 100%;top: 14%;animation: bookmark5;animation-duration:1s;animation-delay:5s;animation-fill-mode : forwards;">
 +
<div class="occupy" style="width: 100%;height: 55%;"></div>
 +
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
 +
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
 +
<div class="re" style="width: 25%;float: left;">WET&nbspLAB</div>
 +
</div>
  
−
            border:2px solid #000;
+
<div id="card" style="background-color: #FFC5CA;width: 75%;z-index: 5;left: 100%;animation: card5;animation-duration:1s;animation-delay:5s;animation-fill-mode : forwards;"></div>
−
 
+
<div id="bookmark" style="z-index: 5;left: 100%;top: 0%;animation: bookmark6;animation-duration:1s;animation-delay:6s;animation-fill-mode : forwards;">
−
            border-radius:30px;
+
<div class="occupy" style="width: 100%;height: 55%;"></div>
−
 
+
<div class="occupy" style="width: 6%; height: 90%; float: left;"></div>
−
            text-align: center;
+
<!-- <div class="re" style="float: left;">A<br>W<br>A<br>R<br>D<br>S</div> -->
−
 
+
<div class="re" style="width: 25%;float: left;">PROJECT</div>
−
            /*line-height: 200px;*/
+
−
 
+
−
        }
+
−
    #occup{
+
−
    width: 10px;
+
−
height: 80px;
+
−
float: left;
+
−
clear: both;
+
−
background-color: #777;
+
−
    }
+
−
    #occup2{
+
−
    width: 10px;
+
−
height: 45px;
+
−
float: left;
+
−
clear: both;
+
−
background-color: #777;
+
−
    }
+
−
    #container1{
+
−
width: 300px;
+
−
height: 250px;
+
−
margin: 100px auto;
+
−
}
+
−
.box{
+
−
float: left;
+
−
margin: 10px;
+
−
width: 200px;
+
−
height: 200px;
+
−
border: 3px solid #ccc;
+
−
transform-style: preserve-3d;
+
−
transition: 1.5s;
+
−
position: relative;
+
−
clear: left;
+
−
}
+
−
.box:hover{
+
−
transform:rotateY(180deg);
+
−
}
+
−
.face{
+
−
width: 200px;
+
−
height: 200px;
+
−
position: absolute;
+
−
}
+
−
.front{
+
−
border: 2px solid #aaa;
+
−
}
+
−
.back{
+
−
transform: rotateY(180deg);
+
−
background-color: #aaa;
+
−
border: 2px solid #fff;
+
−
}
+
−
.back h3{
+
−
color: white;
+
−
text-align: center;
+
−
}
+
−
img{
+
−
width: 196px;
+
−
}
+
−
#container2{
+
−
width: 200px;
+
−
height: 250px;
+
−
margin: 100px auto;
+
−
}
+
−
.box2{
+
−
float: left;
+
−
margin: 10px;
+
−
width: 140px;
+
−
height: 200px;
+
−
border: 3px solid #ccc;
+
−
transform-style: preserve-3d;
+
−
transition: 1.5s;
+
−
position: relative;
+
−
clear: left;
+
−
 
+
−
}
+
−
.box2:hover{
+
−
transform:rotateY(180deg);
+
−
}
+
−
.face2{
+
−
width: 140px;
+
−
height: 200px;
+
−
position: absolute;
+
−
}
+
−
.front2{
+
−
border: 2px solid #aaa;
+
−
}
+
−
.front2 img{
+
−
width: 137px;
+
−
}
+
−
.back2{
+
−
transform: rotateY(180deg);
+
−
background-color: #aaa;
+
−
border: 2px solid #fff;
+
−
}
+
−
.back2 h3{
+
−
color: white;
+
−
text-align: center;
+
−
}
+
−
 
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<div>
+
−
<div class="div1"><font size="7" style="color: #eee">DUT_China_B</font></div>
+
−
<div class="div2">
+
−
<div id="occup"></div>
+
−
<div class="container2">
+
−
<div class="box2">
+
−
<div class="face2 front2"><img src="https://static.igem.org/mediawiki/2019/8/8d/T--DUT_China_B--description.jpg" alt="无法显示"></div>
+
−
<div class="face2 back2">
+
−
<h3 style="color: #eee">description</h3>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<font size="5" style="color: #eee">Description</font>
+
−
<ul>
+
−
<li style="color: #eee">
+
−
<h3 style="color: #eee;font-size:18px">Design of DIP micro-system</h3>
+
−
<p style="color: #eee;font-size:15px">Through the review of the related properties of microalgae, we learn the advantages of Chlamydomonas reinhardtii in photoautotrophy, secretion, and movement over traditional chassis organisms, and we also learn that in the field of chassis microorganism, related development is incomplete. As above two reasons, we want to use the C. reinhardtii to construct a “Real-time detection、Induced expression-separation and Purification”(DIP )micro-system, and we also want to transform  C. reinhardtii into a chassis organism, to make more contributions to the development of synthetic biology research tools.
+
−
</p>
+
−
<p style="color: #eee;font-size:15px">This device in the left reflects our initial vision for a separation and purification system. Through the regulation of the upper valve, we can supplement the inorganic nutrients and water in the algae culture area; by adjusting the intermediate valve, we can realize functions of cleaning, adsorbing, washing, eluting before separation, and finally keep the eluent in the bottom tank for storage.</p>
+
−
<p style="color: #eee;font-size:15px">
+
−
Our microsystem consists of three parts: one is real-time monitoring, the other is to induce expression, and the third is to achieve separation and purification. We plan to construct different fluorescent response monomers in fluorescent fiber hydrogels to detect different substances[2]; We design the fluorescent signal of hydrogel fibers that algae can respond to and express the target protein. The target protein is secreted into the surrounding liquid environment and enters the separation and purification system. After absorbed by the gel beads, washed and eluted in the micro device, the purified protein can be stored in a storage tank [3]. Based on the construction of the DIP micro-system, we intend to construct a stable light-inducing system in Chlamydomonas.
+
−
</p>
+
−
                                <p style="color: #eee;font-size:15px">
+
−
We envisage that this system can be integrated into a micro-patch, in addition to being applied to artificial pancreas that is continuously supplied with insulin, and can also be used in various application scenarios such as Real-time detection and treatment of plant diseases and pests, patch treatment of small wounds, and so on.  All in all, our micro-systems offer new problem-solving ideas for portable detection and treatment.
+
−
</p>
+
−
</li>
+
−
<li style="color: #eee">
+
−
<h3 style="color: #eee;font-size:18px">Advantages of the DIP system</h3>
+
−
<p style="color: #eee;font-size:16px">This system has following advantages:</p>
+
−
<ol>
+
−
<li style="color: #eee;font-size:15px">Chlamydomonas reinhardtii is a photosynthetic autotrophic organism, avoiding the issues of continuously adding organic carbon sources. It can continuously secreting proteins in the presence of light and inorganic nutrients;</li>
+
−
<li style="color: #eee;font-size:15px">  The DIP system simplifies the complicated process and reduces the costing of traditional protein separation purification；</li>
+
−
<li style="color: #eee;font-size:15px">Our system can detect different substances and realize the real-time detection and simultaneously give feedback of conditions changes in different scenarios.
+
−
                              </li>
+
−
</ol>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
<div class="div2">
+
−
<div id="occup2"></div>
+
−
<div class="container1">
+
−
<div class="box">
+
−
<div class="face front"><img src="https://static.igem.org/mediawiki/2019/0/0f/T--DUT_China_B--coffee.jpg" alt="无法显示"></div>
+
−
<div class="face back">
+
−
<h3 style="color: #eee">inspiration</h3>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<font size="5" style="color: #eee">Inspiration</font>
+
−
<p style="color: #eee;font-size:15px">
+
−
As a photosynthetic autotrophic microorganism, C. reinhardtii is a new synthetic biology chassis organism with great potential, which has aroused our interest greatly. From the research of the related aspects on the synthetic biology of Chlamydomonas, we know that there is little content about the induction system in the synthetic biology research of Chlamydomonas, while the induction system is essential for the construction of logic gates in synthetic biology. Therefore, we hope to construct a light-induced system in Chlamydomonas. In the search for practical applications of light-inducing systems, we have noticed that the secretory system is one of the most studied problems in Chlamydomonas. Inspired by our test project (DLUT_CHINA_B) [1] in the last year, we naturally thought of to constructing a system that can detect, secret and give feedbacks at the same time, so our system prototype was born.
+
−
</p>
+
−
</div>
+
−
<div class="div2">
+
−
<font size="5" style="color: #eee">Reference</font>
+
−
<p style="color: #eee;font-size:12px;text-align:left">
+
−
[1] CROZET P, NAVARRO F J, WILLMUND F, et al. Birth of a Photosynthetic Chassis: A MoClo Toolkit Enabling Synthetic Biology in the Microalga Chlamydomonas reinhardtii [J]. ACS Synthetic Biology, 2018, 7(9): 2074-86.
+
−
</p>
+
−
<p style="color: #eee;font-size:12px;text-align:left">
+
−
[2] Francisco J. Navarro, David C. Baulcombe. miRNA-Mediated Regulation of Synthetic Gene Circuits in the Green Alga Chlamydomonas reinhardtii. ACS Synthetic Biology 2019, 8 (2) , 358-370. DOI: 10.1021/acssynbio.8b00393.
+
−
</p>
+
−
<p style="color: #eee;font-size:12px;text-align:left">
+
−
[3] MURPHY T W, SHENG J, NALER L B, et al. On-chip manufacturing of synthetic proteins for point-of-care therapeutics [J]. Microsystems & Nanoengineering, 2019, 5(1): 13.
+
−
</p>
+
−
<p style="color: #eee;font-size:12px;text-align:left">
+
−
[4] https://2018.igem.org/Team:DLUT_China_B
+
−
</p>
+
 
</div>
 
</div>
 +
 +
<div id="card" style="background:linear-gradient(#9688F9,#FEB1B9);width: 75%;z-index: 5;left: 100%;animation: card6;animation-duration:1s;animation-delay:6s;animation-fill-mode : forwards;"></div>
 
</div>
 
</div>
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 13:18, 6 October 2019

Document