Difference between revisions of "Team:UC San Diego/Safety"

(Prototype team page)
 
Line 1: Line 1:
 
{{UC_San_Diego}}
 
{{UC_San_Diego}}
 
<html>
 
<html>
 +
<head>
 +
<style>
  
 +
#navbar {
 +
  position:fixed;
 +
  z-index:9999;
 +
  top:0;
 +
  left:0;
 +
  width:100%;
 +
  height:96px;
 +
  box-sizing:border-box;
 +
  padding-right:64px;
 +
  padding-top:48px;
 +
  background:#fff;
 +
  box-shadow: 5px 10px 18px #eee;
 +
}
 +
.navlink {
 +
  position:relative;
 +
  float:right;
 +
  height:32px;
 +
  font-size:20px;
 +
  color:#000;
 +
  padding-right:32px;
 +
}
 +
.navlink:after {
 +
  content: "";
 +
  opacity:0;
 +
  position:absolute;
 +
  top:80%;
 +
  left:0;
 +
  height:2px;
 +
  width:38px;
 +
  background:#f06a70;
 +
transition: all ease .3s;
 +
}
 +
.navlink:hover:after {
 +
  opacity:1;
 +
}
 +
.firstnav:after {
 +
  content: "";
 +
  opacity:1;
 +
  position:absolute;
 +
  top:80%;
 +
  left:0;
 +
  height:2px;
 +
  width:38px;
 +
  background:#f06a70;
 +
  transition: all ease .3s;
 +
}
 +
.navlink:hover ~ .firstnav:after {
 +
  opacity:0;
 +
}
 +
.navlink:hover > .navdrop {
 +
  display:block;
 +
}
 +
.navdrop {
 +
  box-shadow: 5px 10px 18px #eee;
 +
  border-radius:4px;
 +
  position:absolute;
 +
  display:none;
 +
  top:100%;
 +
  left:0;
 +
  background:#fff;
 +
  transition: all ease .3s;
 +
}
 +
.subnavlink {
 +
  border-radius:4px;
 +
  font-size:12px;
 +
  background:#fff;
 +
  color:#222;
 +
  padding:8px;
 +
  box-sizing:border-box;
 +
transition: all ease .3s;
 +
}
 +
.subnavlink:hover {
 +
  background:#b22d2d;
 +
  color:#fff;
 +
}
 +
#landing {
 +
  position:relative;
 +
  height:80vh;
 +
  margin-top:12vh;
 +
  transition: all 1s ease
 +
  z-index:1;
 +
}
 +
#myProgress {
 +
  position:relative;
 +
  margin-top:-96px;
 +
  width: 70%;
 +
  background-color: #fff;
 +
  z-index:2;
 +
}
  
−
<div class="column full_size">
+
#myBar {
 +
  position:relative;
 +
  width: .1%;
 +
  height: 20px;
 +
  border-radius:10px;
 +
  background: linear-gradient(to right, #b22d2d, #f06a70);
 +
  z-index:3;
 +
}
  
−
<h1> Safety </h1>
+
#iconc {
−
<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>
+
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
height:96px;
 +
width:96px;
 +
border-radius:50%;
 +
z-index:4;
 +
background:#fff;
 +
background-image:url(https://static.igem.org/mediawiki/2018/9/96/T--UC_San_Diego--bloodicon.png);
 +
background-size:cover;
 +
}
  
−
<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>
+
#iconl {
 +
opacity:0;
 +
position:absolute;
 +
top:50%;
 +
left:0%;
 +
transform:translate(-50%, -50%);
 +
height:96px;
 +
width:96px;
 +
border-radius:50%;
 +
z-index:4;
 +
background:#fff;
 +
background-image:url(https://static.igem.org/mediawiki/2018/d/d3/T--UC_San_Diego--aiicon.png);
 +
background-position:center;
 +
background-size:80%;
 +
background-repeat:no-repeat;
 +
transition: all .1s ease
 +
}
  
−
</div>
+
#iconr {
−
 
+
opacity:0;
−
 
+
position:absolute;
−
<div class="column two_thirds_size">
+
top:50%;
−
<h3>Safe Project Design</h3>
+
left:100%;
−
 
+
transform:translate(-50%, -50%);
−
<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>
+
height:96px;
−
 
+
width:96px;
−
<ul>
+
border-radius:50%;
−
<li>Choosing a non-pathogenic chassis</li>
+
z-index:4;
−
<li>Choosing parts that will not harm humans / animals / plants</li>
+
background:#fff;
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
background-image:url(https://static.igem.org/mediawiki/2018/8/8e/T--UC_San_Diego--cloudicon.png);
−
<li>Including an "induced lethality" or "kill-switch" device</li>
+
background-position:center;
−
</ul>
+
background-size:80%;
 +
background-repeat:no-repeat;
 +
transition: all .1s ease
 +
}
 +
</style>
 +
<script>
 +
window.onload = move;
  
 +
function move() {
 +
  var elem = document.getElementById("myBar"); 
 +
  var width = 1;
 +
  var id = setInterval(frame, 10);
 +
  function frame() {
 +
    if (width >= 100) {
 +
      clearInterval(id);
 +
      document.getElementById("iconl").style.opacity= 1;
 +
      document.getElementById("iconr").style.opacity= 1;
 +
    } else {
 +
      width++;
 +
      elem.style.width = width + '%';
 +
    }
 +
  }
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
<div style="background:white; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%;">
 +
<div id="navbar">
 +
<img style="height:72px; margin-left:16px; margin-top:-28px;" src="https://static.igem.org/mediawiki/2018/9/96/T--UC_San_Diego--bloodicon.png"/>
 +
<div class="navlink">Human Practices
 +
  <div class="navdrop">
 +
  <div class="subnavlink">Human Practices Silver</div>
 +
  <div class="subnavlink">Integrated Human Practices</div>
 +
  <div class="subnavlink">Education and Public Engagement</div>
 +
  </div>
 +
</div>
 +
<div class="navlink">People
 +
  <div class="navdrop">
 +
  <div class="subnavlink">Our Team and Collaborators</div>
 +
  <div class="subnavlink">Attributions and Sponsors</div>
 +
  </div>
 +
</div>
 +
<div class="navlink">Application
 +
  <div class="navdrop">
 +
  <div class="subnavlink">Device Design</div>
 +
  <div class="subnavlink">Entrepreneurship</div>
 +
  <div class="subnavlink">Guides for the iGem Community</div>
 +
  </div>
 +
</div>
 +
<div class="navlink">Modeling
 +
  <div class="navdrop">
 +
  <div class="subnavlink">ML for Wetlab Design</div>
 +
  <div class="subnavlink">Computational Fluid Dynamics</div>
 +
  </div>
 +
</div>
 +
<div class="navlink firstnav">Our Project
 +
  <div class="navdrop">
 +
  <div class="subnavlink">Our Design Philosophy</div>
 +
  <div class="subnavlink">Description</div>
 +
  <div class="subnavlink">Engineering and Design Principles</div>
 +
  <div class="subnavlink">Hepatocellular Carcinoma</div>
 +
  <div class="subnavlink">Protocols and Notebook</div>
 +
  <div class="subnavlink">Proof of Concept and Results</div>
 +
  <div class="subnavlink">Medal Criteria</div>
 +
  </div>
 +
</div>
 
</div>
 
</div>
−
 
+
<center>
−
<div class="column third_size">
+
<img id="landing" style="" src="https://static.igem.org/mediawiki/2018/9/97/T--UC_San_Diego--landinglogo.png"/>
−
<h3>Safe Lab Work</h3>
+
<div id="myProgress">
−
 
+
  <div id="myBar"></div>
−
<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>
+
<div id="iconc"></div>
−
 
+
<div id="iconl"></div>
−
 
+
<div id="iconr"></div>
−
<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>
+
 
</div>
 
</div>
−
 
+
</center>
−
 
+
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 04:16, 7 September 2018