Difference between revisions of "Team:Missouri Rolla/Project"

m (Undo revision 298316 by KMGC65 (talk))
(PROJECT = DELETED)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
 
−
<!-- This is incredibly hacked-together. Proceed at your own risk - mstigem 2015 -->
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<style>
 
−
html, body, .wrapper {
 
−
  height: auto;
 
−
}
 
−
#firstHeading, div.visualClear {
 
−
  display: none;
 
−
}
 
−
html, body, #globalWrapper, #content, #bodyContent, #mw-content-text {
 
−
  width: 100%;
 
−
  padding: 0;
 
−
  margin: 0;
 
−
  min-height: 100%;
 
−
}
 
−
p {
 
−
  margin: 0;
 
−
}
 
−
#content {
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  border-left: 0;
 
−
  border-right: 0;
 
−
  z-index: 0;
 
−
  background-color: transparent;
 
−
}
 
−
body {
 
−
  background-image: url("https://static.igem.org/mediawiki/2015/c/cb/Mstigem_background_texture_2015.png");
 
−
  margin-bottom: 0;
 
−
}
 
−
canvas {
 
−
  top: -10px;
 
−
  display: block;
 
−
  position: absolute;
 
−
  z-index: 1;
 
−
}
 
−
a {
 
−
  z-index: 2;
 
−
  position: relative;
 
−
}
 
−
#logo {
 
−
  width: 18%;
 
−
  min-width: 160px;
 
−
  margin-left: 0.5vw;
 
−
  margin-top: 10px;
 
−
}
 
−
#cave {
 
−
  width: 32%;
 
−
  min-width: 160px;
 
−
  right: 0;
 
−
  position: absolute;
 
−
  z-index: 0;
 
−
}
 
−
#menu {
 
−
  position: relative;
 
−
  top: -6.05vw;
 
−
  left: 25vw;
 
−
  width: 73vw;
 
−
}
 
−
#menu a {
 
−
  color: #D8D8D8;
 
−
  text-decoration: none;
 
−
  display: inline-block;
 
−
  padding: 0.5vw;
 
−
  padding-left: 0.7vw;
 
−
  padding-right: 0.7vw;
 
−
  font-size: 1.2vw;
 
−
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
−
  -o-transition: .3s;
 
−
  -ms-transition: .3s;
 
−
  -moz-transition: .3s;
 
−
  -webkit-transition: .3s;
 
−
  transition: .3s;
 
−
}
 
−
#menu a:hover {
 
−
  color: #d7b351;
 
−
  -o-transform: scale(1.05,1.05);
 
−
  -ms-transform: scale(1.05,1.05);
 
−
  -moz-transform: scale(1.05,1.05);
 
−
  -webkit-transform: scale(1.05,1.05);
 
−
  transform: scale(1.05,1.05);
 
−
}
 
−
h1 {
 
−
  display: inline-block;
 
−
  position: relative;
 
−
  color: #D8D8D8;
 
−
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
−
  left: 15vw;
 
−
  top: -.5vw;
 
−
  width: 54.5vw;
 
−
  font-size: 2.5vw;
 
−
  font-weight: lighter;
 
−
  z-index: 2;
 
−
  line-height: 2.8vw;
 
−
  border-bottom-color: #8A8A8A;
 
−
  padding: 0;
 
−
  margin: 0;
 
−
}
 
−
#mstigem {
 
−
  display: block;
 
−
  position: relative;
 
−
  background-color: white;
 
−
  opacity: 0.75;
 
−
  left: 17.5vw;
 
−
  width: 50vw;
 
−
  top: 2.15vw;
 
−
  z-index: 2;
 
−
  padding: 1vw;
 
−
  margin-bottom: 5vw;
 
−
}
 
−
#mstigem p {
 
−
  display: block;
 
−
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
 
−
  line-height: 130%;
 
−
  text-align: justify;
 
−
  font-size: 13pt;
 
−
  color: black;
 
−
  margin-bottom: 1em;
 
−
}
 
−
#mstigem ul {
 
−
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
 
−
  font-size: 11pt;
 
−
  list-style-image: none;
 
−
  margin-bottom: 1em;
 
−
}
 
−
#mstigem a {
 
−
  color: #d7b351;
 
−
  text-decoration: none;
 
−
}
 
−
#credit {
 
−
  text-align: right;
 
−
  position: relative;
 
−
  right: 0.5vw;
 
−
  color: #8A8A8A;
 
−
  font-size: 11pt;
 
−
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
−
  z-index: 2;
 
−
}
 
−
img.inlinephoto {
 
−
  display: inline-block;
 
−
  width: 40%;
 
−
  float: right;
 
−
  margin: 0.7vw;
 
−
  margin-top: 0;
 
−
  margin-right: 0;
 
−
}
 
−
@media screen and (min-width: 900px) {
 
−
  br.menu1 {
 
−
    display: none;
 
−
  }
 
−
  br.menu2 {
 
−
    display: none;
 
−
  }
 
−
}
 
−
@media screen and (min-width: 480px) and (max-width: 899px) {
 
−
  br.menu2 {
 
−
    display: none;
 
−
  }
 
−
  br.menu1 {
 
−
    display: initial;
 
−
  }
 
−
  #menu {
 
−
    margin-top: 7vw;
 
−
    margin-bottom: 5vw;
 
−
    width: 100%;
 
−
    position: relative;
 
−
    text-align: center;
 
−
    left: 0;
 
−
    top: 0;
 
−
  }
 
−
  #menu a {
 
−
    padding-top: .3vw;
 
−
    padding-bottom: .3vw;
 
−
    padding-left: 2.4vw;
 
−
    padding-right: 2.4vw;
 
−
    font-size: 14pt;
 
−
  }
 
−
  #mstigem {
 
−
    position: relative;
 
−
    width: 77vw;
 
−
  }
 
−
  h1 {
 
−
    left: 0;
 
−
    font-size: 14pt;
 
−
    position: relative;
 
−
    line-height: normal;
 
−
    margin-left: 10vw;
 
−
    width: 80vw;
 
−
  }
 
−
}
 
−
@media screen and (max-width: 479px) {
 
−
  #mstigem {
 
−
    width: 46vw;
 
−
    left: 15vw;
 
−
  }
 
−
}
 
−
@media screen and (max-width: 480px) {
 
−
  br.menu2 {
 
−
    display: initial;
 
−
  }
 
−
  br.menu1 {
 
−
    display: none;
 
−
  }
 
−
  img.inlinephoto {
 
−
    margin-left: 0;
 
−
    width: 100%;
 
−
  }
 
−
  #menu {
 
−
    margin-top: 7vw;
 
−
    margin-bottom: 7vw;
 
−
    width: 100%;
 
−
    position: relative;
 
−
    text-align: center;
 
−
    left: 0;
 
−
    top: 0;
 
−
  }
 
−
  #menu a {
 
−
    padding-top: .3vw;
 
−
    padding-bottom: .3vw;
 
−
    padding-left: 2.4vw;
 
−
    padding-right: 2.4vw;
 
−
    font-size: 14pt;
 
−
  }
 
−
  #mstigem {
 
−
    position: relative;
 
−
    width: 77vw;
 
−
  }
 
−
  h1 {
 
−
    left: 0;
 
−
    font-size: 14pt;
 
−
    position: relative;
 
−
    line-height: normal;
 
−
    margin-left: 10vw;
 
−
    width: 80vw;
 
−
  }
 
−
}
 
−
</style>
 
−
<a href="https://2015.igem.org/Team:Missouri_Rolla" onmousemove="mouse(event)"><img id="logo" src = "https://static.igem.org/mediawiki/2015/1/16/Mstigem_logo2015.png" /></a>
 
−
<img id="cave" src = "https://static.igem.org/mediawiki/2015/d/d1/Mstigem_cave_background.jpg" alt="Missouri cave photographed by Lynn Dieter" />
 
−
<div id="menu">
 
−
<a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Project">Project</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Practices">Human Practices</a><br class="menu2" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Parts">Parts</a><br class="menu1" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Notebook">Notebook</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Team">Team</a><br class="menu2" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Safety">Safety</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Attributions">Attributions</a>
 
−
</div>
 
−
<h1 onmousemove="mouse(event)">PROJECT</h1>
 
−
<div onmousemove="mouse(event)" id="mstigem">
 
−
<p onmousemove="mouse(event)">PROJECT STUFF TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p><a href="https://static.igem.org/mediawiki/2015/7/7f/Mstigem_wns_spread_map.jpg"><img class="inlinephoto" src="https://static.igem.org/mediawiki/2015/d/dd/Mstigem_wns_spread_map_small.jpg" alt="White-Nose Syndrome spread map. Map credit Lindsey Heffernan"></a>
 
−
</div>
 
−
</div>
 
−
<canvas id="echoes" onmousemove="mouse(event)"></canvas>
 
−
<p id="credit" onmousemove="mouse(event)">Missouri cave photo by Lynn Dieter<br />White-Nose Syndrome spread map by Lindsey Heffernan</p>
 
  
−
<script type="text/javascript">
 
−
// using setInterval for support in IE8 and 9, rather than requestAnimationFrame
 
−
// ugly nested ifs are a result of mediawiki parsing &&
 
−
"use strict";
 
−
var canvas = document.getElementById("echoes");
 
−
var ctx = canvas.getContext("2d");
 
−
var mousex;
 
−
var mousey;
 
−
var reflectx, reflecty
 
−
setInterval(sendEcho, 12, canvas, ctx);
 
−
 
−
function mouse(event) {
 
−
  mousex = event.clientX;
 
−
  mousey = event.clientY + document.body.scrollTop;
 
−
}
 
−
 
−
function sendEcho(canvas, ctx) {
 
−
  if(typeof sendEcho.radius == 'undefined') {
 
−
    sendEcho.radius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
    sendEcho.reflecting = false;
 
−
    sendEcho.rradius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
  }
 
−
  canvas.width = document.documentElement.clientWidth;
 
−
  canvas.height = document.documentElement.offsetHeight;
 
−
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
−
  ctx.beginPath();
 
−
  ctx.strokeStyle = "white";
 
−
  ctx.globalAlpha = 0.16;
 
−
  ctx.lineWidth = 2;
 
−
  ctx.arc(canvas.width / 8, 2 * canvas.height / 3, sendEcho.radius, 0, 2 * Math.PI);
 
−
  ctx.stroke();
 
−
  if(sendEcho.radius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30) {
 
−
    ctx.beginPath();
 
−
    ctx.strokeStyle = "white";
 
−
    ctx.globalAlpha = 0.16;
 
−
    ctx.lineWidth = 2;
 
−
    ctx.arc(canvas.width / 8, 2 * canvas.height / 3, Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30), 0, 2 * Math.PI);
 
−
    ctx.stroke();
 
−
  }
 
−
  if(sendEcho.radius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) {
 
−
    ctx.beginPath();
 
−
    ctx.strokeStyle = "white";
 
−
    ctx.globalAlpha = 0.16;
 
−
    ctx.lineWidth = 2;
 
−
    ctx.arc(canvas.width / 8, 2 * canvas.height / 3, Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15), 0, 2 * Math.PI);
 
−
    ctx.stroke();
 
−
  }
 
−
  if(Math.abs(sendEcho.radius - Math.sqrt((mousex - canvas.width / 8) * (mousex - canvas.width / 8) + (mousey - 2 *canvas.height / 3)*(mousey - 2 *canvas.height / 3))) < Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284)) {
 
−
    if(!sendEcho.reflecting) {
 
−
      sendEcho.reflecting = true;
 
−
      reflectx = mousex;
 
−
      reflecty = mousey;
 
−
      sendEcho.rradius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
    }
 
−
  }
 
−
  if(sendEcho.reflecting) {
 
−
    ctx.beginPath();
 
−
    ctx.strokeStyle = "white";
 
−
    ctx.globalAlpha = 0.16;
 
−
    ctx.lineWidth = 2;
 
−
    ctx.arc(reflectx, reflecty, sendEcho.rradius, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
 
−
    ctx.stroke();
 
−
    if(sendEcho.rradius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30) {
 
−
      ctx.beginPath();
 
−
      ctx.strokeStyle = "white";
 
−
      ctx.globalAlpha = 0.16;
 
−
      ctx.lineWidth = 2;
 
−
      ctx.arc(reflectx, reflecty, Math.round(sendEcho.rradius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30), Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
 
−
      ctx.stroke();
 
−
    }
 
−
    if(sendEcho.rradius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) {
 
−
      ctx.beginPath();
 
−
      ctx.strokeStyle = "white";
 
−
      ctx.globalAlpha = 0.16;
 
−
      ctx.lineWidth = 2;
 
−
      ctx.arc(reflectx, reflecty, Math.round(sendEcho.rradius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15), Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
 
−
      ctx.stroke();
 
−
    }
 
−
    if(Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284) != 0) {
 
−
      sendEcho.rradius += Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
    }
 
−
    else {
 
−
      sendEcho.rradius++;
 
−
    }
 
−
    if(sendEcho.rradius > Math.sqrt(canvas.width*canvas.width+canvas.height*canvas.height) * 1.3) {
 
−
      sendEcho.reflecting = false;
 
−
    }
 
−
  }
 
−
  if(Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) > Math.sqrt((7 * canvas.width / 8)*(7 * canvas.width / 8) + (2 * canvas.height / 3)*(2 * canvas.height / 3))) {
 
−
    if(!sendEcho.reflecting) {
 
−
      sendEcho.radius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
    }
 
−
  }
 
−
  if(Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284) != 0) {
 
−
    sendEcho.radius += Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
 
−
  }
 
−
  if(sendEcho.rradius >= Math.sqrt((reflectx - canvas.width / 8)*(reflectx - canvas.width / 8)+(reflecty - 2 * canvas.height / 3)*(reflecty - 2 * canvas.height / 3))) {
 
−
    if(sendEcho.rradius <= Math.sqrt(canvas.width*canvas.width+canvas.height*canvas.height)) {
 
−
      if(canvas.width > 800) {
 
−
        ctx.beginPath();
 
−
        ctx.fillStyle = "#d7b351";
 
−
        ctx.globalAlpha = 0.6;
 
−
        ctx.arc(29 * canvas.width / 240, 43 * canvas.height / 63, 2, 0, 2*Math.PI);
 
−
        ctx.fill();
 
−
        ctx.beginPath();
 
−
        ctx.fillStyle = "#d7b351";
 
−
        ctx.globalAlpha = 0.6;
 
−
        ctx.arc(31 * canvas.width / 240, 43 * canvas.height / 63, 2, 0, 2*Math.PI);
 
−
        ctx.fill();
 
−
      }
 
−
      else {
 
−
        ctx.beginPath();
 
−
        ctx.fillStyle = "#d7b351";
 
−
        ctx.globalAlpha = 0.6;
 
−
        ctx.arc(28 * canvas.width / 240, 43 * canvas.height / 63, 1, 0, 2*Math.PI);
 
−
        ctx.fill();
 
−
        ctx.beginPath();
 
−
        ctx.fillStyle = "#d7b351";
 
−
        ctx.globalAlpha = 0.6;
 
−
        ctx.arc(31 * canvas.width / 240, 43 * canvas.height / 63, 1, 0, 2*Math.PI);
 
−
        ctx.fill();
 
−
      }
 
−
    }
 
−
  }
 
−
  else {
 
−
    sendEcho.radius++;
 
−
  }
 
−
}
 
−
</script>
 
−
</html>
 

Latest revision as of 20:32, 18 September 2015