Difference between revisions of "Team:HZAU-China/Demonstrate"

m
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{HZAU-China}}
 
{{HZAU-China}}
−
<html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
−
     <title>body</title>
+
     <title>design</title>
 
     <style>
 
     <style>
 
         *{margin: 0;padding: 0;}
 
         *{margin: 0;padding: 0;}
Line 20: Line 19:
 
         }
 
         }
 
         .article{
 
         .article{
−
             width: 60%;
+
             width: 75%;
 
             height: auto;
 
             height: auto;
 
             position: absolute;
 
             position: absolute;
Line 28: Line 27:
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
−
              .content_part{
+
 
−
            width: 20%;
+
−
            height: auto;
+
−
            position: fixed;
+
−
            right: 0%;
+
−
            background-color:white;
+
−
            border-radius: 50%;
+
−
        }
+
−
        .content_part>a{
+
−
            text-decoration: none;
+
−
            color: white;
+
−
            font-weight: bold;
+
−
            font-size: 20px;
+
−
            display: block;
+
−
            padding-left: 10% ;
+
−
            padding-top: 5px;
+
−
            height: 25px;
+
−
            width: 70%;
+
−
            background-color: #0e5386;
+
−
            float: left;
+
−
            margin-bottom: 5px;
+
−
            transition: 0.3s;
+
−
        }
+
−
        .menutitle{
+
−
            height: 25px;
+
−
            background-color: #0e5386;
+
−
            cursor:pointer;
+
−
            padding-top: 5px;
+
−
            margin-bottom: 5px;
+
−
            width:20%;
+
−
            color: white;
+
−
            float: right;
+
−
        }
+
−
        .little{
+
−
            content: "";
+
−
            float: left;
+
−
            margin-top: 6px;
+
−
            margin-left: 18px;
+
−
            border-left: 6px solid transparent;
+
−
            border-right: 6px solid transparent;
+
−
            border-bottom: 6px solid #fff955;
+
−
            opacity: 1;
+
−
        }
+
−
        .my_submenu{
+
−
            margin:0 !important;
+
−
            padding:0;
+
−
            border:0;
+
−
            margin-bottom: 0.5em;
+
−
            text-align: center;
+
−
            list-style: none;
+
−
        }
+
−
        .my_submenu a{
+
−
            display: block;
+
−
            padding-left: 10%;
+
−
            background-image: linear-gradient(white, #efefef);
+
−
            text-decoration: none;
+
−
            background-color:white;
+
−
            font-size: 20px;
+
−
            color: #4b4a5e;
+
−
        }
+
−
        .menutitle:hover {
+
−
            opacity: 0.2;
+
−
        }
+
−
        .content_part >a:hover{
+
−
            background-color: rgba(14, 83, 134, 0.38);
+
−
            color: #0e5386;
+
−
        }
+
−
        .my_submenu a:hover{
+
−
            color: #e7376d;
+
−
        }
+
−
        .random{
+
−
            position: relative ;
+
−
        }
+
−
        .random a{
+
−
            position: absolute;
+
−
            top: -88px;
+
−
        }
+
 
         .article p{
 
         .article p{
 
             text-align:justify;
 
             text-align:justify;
Line 134: Line 57:
 
             font-family: Calibri;
 
             font-family: Calibri;
 
             color: #0f9ad6;
 
             color: #0f9ad6;
 +
        }
 +
        .article h5{
 +
            display: block;
 +
            padding-top: 16px;
 +
            background-color: white;
 +
            font-size:18px;
 +
            font-family: Arial;
 +
            color:#3c7ab1;
 +
 
         }
 
         }
 
         .article img{
 
         .article img{
Line 143: Line 75:
 
             margin:0 auto;
 
             margin:0 auto;
 
         }
 
         }
−
        .pointer1{
+
.article ti{
−
            position: absolute;
+
display: block;
−
             top: 37.5%;
+
             padding-top: 18px;
−
             left: 5%;
+
             background-color: white;
−
            z-index: 100;
+
             font-size: 30px;
−
        }
+
             font-family: Calibri;
−
        .pointer2{
+
             color: #0f9ad6;
−
            position: absolute;
+
text-align:center
−
            top: 68%;
+
}
−
            left: 5%;
+
−
             z-index: 100;
+
−
        }
+
−
        .pointer3{
+
−
             position: absolute;
+
−
            top: 77%;
+
−
            left: 5%;
+
−
            z-index: 100;
+
−
        }
+
−
        .pointer4{
+
−
             position: absolute;
+
−
            top: 84.5%;
+
−
            left: 5%;
+
−
            z-index: 100;
+
−
        }
+
−
    </style>
+
  
−
    <script type="text/javascript"
 
−
            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
−
    </script>
 
  
−
     <script type="text/javascript">
+
     </style>
−
        if (document.getElementById){
+
−
            document.write('<style type="text/css">\n')
+
−
            document.write('.my_submenu{display: block;}\n')
+
−
            document.write('</style>\n')
+
−
        }
+
  
−
        function SwitchMenu(obj){
 
−
            if(document.getElementById){
 
−
                var el = document.getElementById(obj);
 
−
                var ar = document.getElementById("masterdiv").getElementsByTagName("span");
 
−
                if(el.style.display != "block"){
 
−
                    for (var i=0; i<ar.length; i++){
 
−
                        if (ar[i].className=="my_submenu") //DynamicDrive.com change
 
−
                            ar[i].style.display = "none";
 
−
                    }
 
−
                    el.style.display = "block";
 
−
                }else{
 
−
                    el.style.display = "none";
 
−
                }
 
−
            }
 
−
        }
 
−
    </script>
 
 
</head>
 
</head>
 +
  
  
 
<body>
 
<body>
 +
 
<div class="content_wrapper">
 
<div class="content_wrapper">
  
−
     <div class="content_part" id="masterdiv">
+
     <div class="main_part">
−
         <a href="#A1">motility dynamic model</a>
+
         <img src="https://static.igem.org/mediawiki/2016/2/28/T--HZAU-China--veriticalbarproject1.png" width="168px">
−
        <div class="menutitle" onclick="SwitchMenu('sub1')">
+
     
−
            <div class="little"></div>
+
−
        </div>
+
−
        <ul class="my_submenu" id="sub1" style="display: block">
+
−
            <li><a href="#A11">Optogenetics</a></li>
+
−
            <li><a href="#A12">Motility</a></li>
+
−
            <li><a href="#A13">Riboswitch</a></li>
+
−
            <li><a href="#A14">Gene knockout</a></li>
+
−
        </ul>
+
  
−
        <a href="#A2">Multiply model</a>
+
         <div class="article">
−
         <div class="menutitle" onclick="SwitchMenu('sub2')">
+
             <h2>Demonstration</h2>
−
             <div class="little"></div>
+
             <p>After validating our biological devices, to demonstrate the feasibility of establishing an AR system for bio-pattern formation, we constructed an industrial level device which can create a virtual space overlapping with a real environment (a LB culture plate, here). It can mislead the bacteria to form an heterogeneous pattern on a homogeneous swimming plate.
−
        </div>
+
              To know more about our device, please watch the following video.</p>
−
        <ul class="my_submenu" id="sub2" style="display: block">
+
−
             <li><a href="#A21">models</a></li>
+
−
            <li><a href="#A22">Software</a></li>
+
−
            <li><a href="#A23">Hardware</a></li>
+
−
        </ul>
+
  
−
        <a href="#A3">Human Practice</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub3')" >
 
−
            <div class="little"></div>
 
−
        </div>
 
  
 +
            <h5>Highlights:</h5>
 +
            <p>1. Huge bulk.</p>
 +
            <p>2. Sterilizing function.</p>
 +
            <p>3. Real-time picture capturing.</p>
 +
            <p>4. Precise light projecting.</p>
 +
            <p>5. Temperature measuring and controlling.</p>
 +
            <p>6. Real-time communication between computer and bacteria.</p><br/>
 +
</br></br>
  
−
        <a href="#A4">Art Designer</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub4')">
 
−
            <div class="little"></div>
 
−
        </div>
 
  
−
 
+
         
−
        <a href="#A5">Acknowledgement</a>
+
  <ti>We shot a video to show the device working in our real world!</ti>
−
        <div class="menutitle" onclick="SwitchMenu('sub5')">
+
</br>
−
            <div class="little"></div>
+
 
 +
  <video src="https://static.igem.org/mediawiki/2016/e/ec/T--HZAU-China--hardware_demo.mp4" controls width="750"></video>
 +
          </br></br>
 +
          <ti><a href="https://2016.igem.org/Team:HZAU-China/Hardware">Find out more details in the Hardware part.</a></ti>
 +
         
 +
         
 +
         
 
         </div>
 
         </div>
  
 
     </div>
 
     </div>
  
−
    <div class="main_part">
 
−
        <img src="https://static.igem.org/mediawiki/2016/2/2b/Hzau16_team_paper_main_picture.png"  width="168px" height="2503px">
 
−
        <div class="pointer1"> <img src="pointer3.png"></div>
 
−
        <div class="pointer2"> <img src="pointer2.png"></div>
 
−
        <div class="pointer3"> <img src="pointer4.png"></div>
 
−
        <div class="pointer4"> <img src="pointer1.png"></div>
 
−
 
−
        <div class="article">
 
−
           
 
−
    </div>
 
 
</div>
 
</div>
−
 
 
</body>
 
</body>
−
 
−
 
−
 
  
 
</html>
 
</html>

Latest revision as of 03:12, 20 October 2016

design

Demonstration

After validating our biological devices, to demonstrate the feasibility of establishing an AR system for bio-pattern formation, we constructed an industrial level device which can create a virtual space overlapping with a real environment (a LB culture plate, here). It can mislead the bacteria to form an heterogeneous pattern on a homogeneous swimming plate. To know more about our device, please watch the following video.

Highlights:

1. Huge bulk.

2. Sterilizing function.

3. Real-time picture capturing.

4. Precise light projecting.

5. Temperature measuring and controlling.

6. Real-time communication between computer and bacteria.




We shot a video to show the device working in our real world!


Find out more details in the Hardware part.