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

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 150: Line 73:
 
             display:block;
 
             display:block;
 
             margin:0 auto;
 
             margin:0 auto;
−
        }
 
−
        .pointer1{
 
−
            position: absolute;
 
−
            top: 37.5%;
 
−
            left: 5%;
 
−
            z-index: 100;
 
−
        }
 
−
        .pointer2{
 
−
            position: absolute;
 
−
            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;
 
 
         }
 
         }
  
Line 179: Line 78:
 
     </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/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 class="article">

Revision as of 16:03, 18 October 2016

design

Demonstration

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. To know more information about our device please watch the video.

Highlights:

1.Huge bulk

2.Sterilizing function

3.Real-time picture capturing

4.Precise light projecting

5.Temperature controlling and measuring

6.Real-time communication between computer and bacteria


We shot a video for showing the device work in our real world!