Difference between revisions of "Team:NTHU Formosa/Safety"

(Prototype team page)
 
Line 1: Line 1:
{{NTHU_Formosa}}
+
{{NTHU_Formosa}} {{NTHU_Formosa/NavBar}}
 
<html>
 
<html>
  
 +
<head>
 +
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
  <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS01&action=raw&ctype=text/css">
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NTHU_Formosa/CSS&action=raw&ctype=text/css" />
 +
  <style>
 +
    /* unvisited link */
  
<div class="column full_size">
+
    a {
 +
      color: #0645AD;
 +
    }
  
<h1> Safety </h1>
+
    /* visited link */
<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>
+
  
<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>
+
    a:visited {
 +
      color: green;
 +
    }
  
</div>
+
    /* mouse over link */
  
 +
    a:hover {
 +
      color: hotpink;
 +
      cursor: pointer;
 +
    }
  
<div class="column two_thirds_size">
+
    /* selected link */
<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>
+
    a:active {
 +
      color: blue;
 +
    }
 +
  </style>
 +
</head>
  
<ul>
+
<!-- Main Section -->
<li>Choosing a non-pathogenic chassis</li>
+
<div class="w3-container w3-pale-blue w3-padding-64 w3-center">
<li>Choosing parts that will not harm humans / animals / plants</li>
+
  <div class="w3-content">
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
    <h1 class="w3-wide">Safety</h1>
<li>Including an "induced lethality" or "kill-switch" device</li>
+
    <p class="w3-justify"> </p>
</ul>
+
  
 +
  </div>
 
</div>
 
</div>
  
<div class="column third_size">
+
<!-- Trigger/Open The Modal -->
<h3>Safe Lab Work</h3>
+
<!-- <a id="myLink"><u>Open Modal</u></a> -->
  
<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>
+
<!-- The Modal Box-->
 +
<div id="myModal" class="modal">
 +
  <!-- Modal content -->
 +
  <div class="modal-content">
 +
    <span class="close">&times;</span>
 +
    <p>Description text in the box. Image can also be included</p>
 +
  </div>
 +
</div>
  
 +
<!-- Modal script, DO NOT MODIFY!!! -->
 +
<script>
 +
  // Get the modal
 +
  var modal = document.getElementById('myModal');
 +
  // Get the hyperlink
 +
  var link = document.getElementById("myLink");
 +
  // // When the user clicks the hyperlink, open the modal
 +
  link.onclick = function() {
 +
    modal.style.display = "block";
 +
  }
 +
  // Get the <span> element that closes the modal
 +
  var span = document.getElementsByClassName("close")[0];
 +
  // When the user clicks on <span> (x), close the modal
 +
  span.onclick = function() {
 +
    modal.style.display = "none";
 +
  }
  
<h3>Safe Shipment</h3>
+
  // When the user clicks anywhere outside of the modal, close it
 
+
  window.onclick = function(event) {
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
+
    if (event.target == modal) {
</div>
+
      modal.style.display = "none";
 
+
    }
 +
  }
 +
</script>
  
 
</html>
 
</html>

Revision as of 12:46, 30 September 2018

Safety