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

m
 
(11 intermediate revisions by 3 users not shown)
Line 19: Line 19:
 
         }
 
         }
 
         .article{
 
         .article{
−
             width: 60%;
+
             width: 75%;
 
             height: auto;
 
             height: auto;
 
             position: absolute;
 
             position: absolute;
Line 27: 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-family: Arial;
+
−
            font-size: 16px;
+
−
            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;
+
−
            background-image: linear-gradient(white, #efefef);
+
−
            text-decoration: none;
+
−
            background-color:white;
+
−
            padding: 5px;
+
−
            font-size: 14px;
+
−
            font-family: Arial;
+
−
            color: #3d42e8;
+
−
        }
+
−
        .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 142: Line 65:
 
             font-family: Arial;
 
             font-family: Arial;
 
             color:#3c7ab1;
 
             color:#3c7ab1;
 +
 
         }
 
         }
 
         .article img{
 
         .article img{
Line 151: 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>
 
     </style>
  
 +
</head>
  
−
    <script type="text/javascript">
 
−
        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>
 
  
 +
<body>
  
−
 
−
</head>
 
−
 
−
 
−
<body>
 
 
<div class="content_wrapper">
 
<div class="content_wrapper">
−
 
−
    <div class="content_part" id="masterdiv">
 
−
        <a href="#A1">Overall Design</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub1')">
 
−
        </div>
 
−
 
−
        <a href="#A2">Design on genetic circuit</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub2')">
 
−
            <div class="little"></div>
 
−
        </div>
 
−
        <ul class="my_submenu" id="sub2" style="display: block">
 
−
            <li><a href="#A21">2.1 Light sensing part</a></li>
 
−
            <li><a href="#A22">2.2 Bacterial motility</a></li>
 
−
            <li><a href="#A23">2.3 Chassis integration</a></li>
 
−
            <li><a href="#A24">2.4 Riboswitch</a></li>
 
−
        </ul>
 
−
 
−
        <a href="#A3">Software</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub3')" >
 
−
        </div>
 
−
 
−
        <a href="#A4"> Hardware</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub4')">
 
−
        </div>
 
−
 
−
 
−
        <a href="#A5">Reference：</a>
 
−
        <div class="menutitle" onclick="SwitchMenu('sub5')">
 
−
        </div>
 
−
 
−
 
−
    </div>
 
  
 
     <div class="main_part">
 
     <div class="main_part">
−
         <img src="https://static.igem.org/mediawiki/2016/2/2b/Hzau16_team_paper_main_picture.png"  width="168px" height="2503px">
+
         <img src="https://static.igem.org/mediawiki/2016/2/28/T--HZAU-China--veriticalbarproject1.png"  width="168px">
−
        <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 class="article">
 
             <h2>Demonstration</h2>
 
             <h2>Demonstration</h2>
−
             <p>After proving the validation of our biological devices, to fulfill our feasibility of establishing the AR system for bacteria, we constructed an industrial level device which can create a virtual environment overlapping with the reality, a LB plate. It can mislead the bacteria to form an heterogeneous pattern on the homogeneous swarming plate.
+
             <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.
−
                To know more information about our device please watch the video.</p>
+
              To know more about our device, please watch the following video.</p>
  
  
 
             <h5>Highlights:</h5>
 
             <h5>Highlights:</h5>
−
             <p>1.Huge bulk</p>
+
             <p>1. Huge bulk.</p>
−
             <p>2.Sterilizing function</p>
+
             <p>2. Sterilizing function.</p>
−
             <p>3.Real-time picture capturing</p>
+
             <p>3. Real-time picture capturing.</p>
−
             <p>4.Precise light projecting</p>
+
             <p>4. Precise light projecting.</p>
−
             <p>5.Temperature controlling and measuring</p>
+
             <p>5. Temperature measuring and controlling.</p>
−
             <p>6.Real-time communication between computer and bacteria</p><br/>
+
             <p>6. Real-time communication between computer and bacteria.</p><br/>
 +
</br></br>
  
  
−
            <p>We shot a video for showing the device work in our real world!</p>
+
         
−
            <video src="#" controls="controls"></video>
+
  <ti>We shot a video to show the device working in our real world!</ti>
 +
</br>
 +
 
 +
  <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>
  

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.