Difference between revisions of "Team:NCKU Tainan/Safety"

(Prototype team page)
 
Line 1: Line 1:
−
{{NCKU_Tainan}}
+
{{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}}
−
<html>
+
  
 +
<html>
 +
<head>
 +
        <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/human_practice?action=raw&ctype=text/css">
 +
    </head>
 +
<body>
  
−
<div class="column full_size">
+
<header>
 +
    <div class="carousel-inner" role="listbox">
 +
      <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
 +
      </div>
 +
    </div>
 +
</header>
  
−
<h1> Safety </h1>
+
  <!--Page_Content-->
−
<p>Please visit the <a href="https://2018.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
+
  <div class="container content">
 +
    <div class="navbar-example">
 +
      <div class="row">
 +
        <div class="col-10">
 +
          <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
 +
            <div class="container">
 +
              <div id="list-item-1">
 +
                <h3>Arduino</h3>
 +
                <h10>We use temperature sensor(DS18B20)�BpH meter and CO2 sensor(MG811) to monitor our
 +
                  device. Besides, we use LCD to print datum and use Wi-Fi sensor(ESP8266) to upload
 +
                  our records to database as well.</h10>
 +
                <img class="contentimg" src="http://placehold.it/1900x1080">
 +
              </div>
 +
              <div id="list-item-2">
 +
                <h3>Arduino Code</h3>
 +
                <h10>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt,
 +
                  finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut
 +
                  urna
 +
                  elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class
 +
                  aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
 +
                  himenaeos.
 +
                  Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus
 +
                  enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti
 +
                  sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus
 +
                  congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet
 +
                  felis.</h10>
 +
                <img class="contentimg" src="http://placehold.it/1900x1080">
 +
              </div>
 +
              <div id="list-item-3">
 +
                <h3>Database</h3>
 +
                <h10>In order to save data from our device, we set up a database in Firebase, including
 +
                  carbon dioxide concentration, pH value and temperature obtained by sensors in our
 +
                  device.</h10>
 +
                <img class="contentimg" src="http://placehold.it/1900x1080">
 +
              </div>
 +
              <div id="list-item-4">
 +
                <h3>App</h3>
 +
                <h10>To make our device more user-friendly, we designed an app to get data from our
 +
                  database. The manager of the factory can easily see the data immediately. Besides,
 +
                  we set up a notification system. As long as users connect their smart phone to the
 +
                  internet, they can immediately get the warning notification from the device if the
 +
                  data goes wrong.</h10>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
  
−
<p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can <strong>go beyond the questions on the safety forms</strong>, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p>
+
<style>
 +
/*header*/
 +
.carousel-item {
 +
  height: 100vh;
 +
  min-height: 300px;
 +
  background: no-repeat center center scroll;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
  
−
</div>
+
  /* paragraph content*/
 +
  h10 {
 +
    color: white;
 +
    font-size: 1.4rem;
 +
    line-height: 150%;
 +
  }
  
 +
body {
 +
    background-color: #272625;
 +
    font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
 +
  }
  
−
<div class="column two_thirds_size">
 
−
<h3>Safe Project Design</h3>
 
  
−
<p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
+
p {
 +
  color: white;
 +
  font-size: 20px;
 +
}
  
−
<ul>
+
h3 {
−
<li>Choosing a non-pathogenic chassis</li>
+
  color: white;
−
<li>Choosing parts that will not harm humans / animals / plants</li>
+
  font-size: 35px;
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
}
−
<li>Including an "induced lethality" or "kill-switch" device</li>
+
−
</ul>
+
  
−
</div>
+
  .navbar {
 +
    padding-top: 10px;
 +
    margin-bottom: 0;
 +
  }
 +
  .navbar-brand {
 +
    font-size: 30px;
 +
  }
 +
  .nav-link {
 +
    font-size: 20px;
 +
  }
 +
  a.dropdown-item {
 +
    color: #4F7F52;
 +
  }
 +
  a.dropdown-item:active {
 +
    background-color: #4F7F52;
 +
  }
 +
  .caret {
 +
    display: inline-block;
 +
    width: 0;
 +
    height: 0;
 +
    margin-left: 2px;
 +
    vertical-align: middle;
 +
    border-top: 4px solid;
 +
    border-right: 4px solid transparent;
 +
    border-left: 4px solid transparent;
 +
  }
 +
  /*滑到navbar就展開*/
 +
  .dropdown-menu li:hover .sub-menu {visibility: visible;}
 +
  .dropdown:hover .dropdown-menu {display: block;}
 +
 
 +
  .head {
 +
    color: white;
 +
    width: 50%;
 +
    font-size: 50px;
 +
    font-weight: 700;
 +
    border-bottom: 10px solid #7ae26f;
 +
    position: relative;
 +
    margin-top: 100px;
 +
  }
 +
  .container.content {
 +
    margin-top: 80px;
 +
  }
  
−
<div class="column third_size">
+
  @media (min-width: 992px) {
−
<h3>Safe Lab Work</h3>
+
    .navbar {
 +
      padding-left: 80px;
 +
      padding-right: 80px;
 +
    }
 +
  }
 +
  @media (max-width: 768px) {
 +
    .navbar-right form {
 +
      display: none;
 +
    }
 +
  }
 +
  @media (max-width: 568px) {
 +
    footer {
 +
      text-align: center;
 +
    }
 +
    .list-group {
 +
      display: none;
 +
    }
 +
  }
  
−
<p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>
+
  /*folded-corner*/
 +
  .post {
 +
    position: relative;
 +
  }
 +
  .folded-corner {
 +
    position: absolute;
 +
    bottom: 0px; 
 +
    right: 0px;
 +
    border-width: 0;
 +
    border-style: solid;
 +
    background: hsla(260,100%,100%,0.2);
 +
    box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
 +
    border-radius: 15px 0 0 0;
 +
    border-color: transparent #B9DEBB transparent transparent;
 +
    transition: border-width 0.2s ease-out;
 +
  }
 +
  .post:hover .folded-corner {
 +
    border-width: 40px 40px 0 0;
 +
  }
 +
  .photo .folded-corner {
 +
    background: hsla(260,5%,75%,0.5);
 +
  }
  
 +
  [class*="col-"] {
 +
    float: left;
 +
    padding: 13px;
 +
  }
 +
  a.list-group-item:visited {
 +
    color: white;
 +
  }
 +
  a:hover {
 +
    background-color: transparent;
 +
  }
 +
  .list-group {
 +
    margin-top: 100px;
 +
  }
 +
  .col-2.side {
 +
    padding: 0;
 +
  }
 +
  .list-group-item {
 +
    padding: .55rem .35rem;
 +
    background-color: #272625;
 +
    color: white;
 +
    border: none;
 +
    font-size: 19px;
 +
  }
 +
  a.list-group-item.list-group-item-action {
 +
    background-color: transparent;
 +
  }
 +
  a.list-group-item.list-group-item-action:hover {
 +
    color: #98CC9B;
 +
  }
 +
  a.list-group-item.list-group-item-action.active {
 +
    background-color: transparent;
 +
    color: #7ae26f;
 +
  }
 +
  .scrollspy-example h4{
 +
    font-size: 2rem;
 +
  }
  
−
<h3>Safe Shipment</h3>
+
 
  
−
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
+
  img.contentimg {
−
</div>
+
      width: 100%;
 +
      margin: 20px 0;
 +
  }
 +
  a.link {
 +
      font-size: 30px;
 +
      color: #4F7F52;
 +
  }
 +
  #list-item-1 {
 +
      padding-top: 0px;
 +
  }
 +
  #list-item-2 {
 +
      padding-top: 0px;
 +
  }
 +
  #list-item-3 {
 +
    padding-top: 0px;
 +
  }
 +
  #list-item-4 {
 +
    padding-top: 0px;
 +
  }
 +
  #list-item-5 {
 +
    padding-top: 0px;
 +
  }
 +
  a.reference {
 +
    color: #4F7F52;
 +
  }
 +
 
 +
</style>
  
 +
</body>
  
 
</html>
 
</html>
 +
{{NCKU_Tainan/footer}}

Revision as of 14:18, 9 September 2018

Arduino

We use temperature sensor(DS18B20)�BpH meter and CO2 sensor(MG811) to monitor our device. Besides, we use LCD to print datum and use Wi-Fi sensor(ESP8266) to upload our records to database as well.

Arduino Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt, finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut urna elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet felis.

Database

In order to save data from our device, we set up a database in Firebase, including carbon dioxide concentration, pH value and temperature obtained by sensors in our device.

App

To make our device more user-friendly, we designed an app to get data from our database. The manager of the factory can easily see the data immediately. Besides, we set up a notification system. As long as users connect their smart phone to the internet, they can immediately get the warning notification from the device if the data goes wrong.
Follow us
Contact us

igem.ncku.tainan@gmail.com
No.1, Daxue Rd., East Dist., Tainan City 701, Taiwan (R.O.C.)