Difference between revisions of "Team:Dalhousie Halifax NS/Integrated Practices"

 
(43 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
  <head>
 
  <head>
−
   <link rel="stylesheet" href="https://2016.igem.org/Team:Dalhousie_Halifax_NS/css/MicrobiomeMap?action=raw&ctype=text/css"/>
+
   <link rel="stylesheet" href="https://2016.igem.org/Team:Dalhousie_Halifax_NS/css/microbiomemap?action=raw&ctype=text/css"/>
 
   <script type="text/javascript" src="https://2016.igem.org/Team:Dalhousie_Halifax_NS/libraries/jquery?action=raw&ctype=text/javascript"></script>
 
   <script type="text/javascript" src="https://2016.igem.org/Team:Dalhousie_Halifax_NS/libraries/jquery?action=raw&ctype=text/javascript"></script>
 
   <style>
 
   <style>
Line 11: Line 11:
 
   padding:0;
 
   padding:0;
 
   }
 
   }
 +
#BactList{
 +
background-color: #bf8040;
 +
border-radius: 25px;
 +
opacity:0.85;
 +
}
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +
}
 +
.modal-content {
 +
    background-color: #fefefe;
 +
    margin: 15% auto; /* 15% from the top and centered */
 +
    padding: 20px;
 +
    border: 1px solid #888;
 +
    width: 80%; /* Could be more or less, depending on screen size */
 +
}
 +
#modalImage{
 +
width:90%;
 +
margin: 0 auto;
 +
}
 +
/* The Close Button */
 +
#close {
 +
    color: #aaa;
 +
    float: right;
 +
    font-size: 28px;
 +
    font-weight: bold;
 +
}
 +
 +
.close:hover,
 +
.close:focus {
 +
    color: black;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
#map{
 +
display: block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 
   </style>
 
   </style>
 
  </head>
 
  </head>
 
  <body>
 
  <body>
−
   <div class="jumbotron">
+
   <div class="jumbotron" id="header">
−
   <h1 id="title">Shubenacadie Microbiome Map</h1>
+
   <h1 id="title" style="color:black; opacity:0.85;font-family:lato-black;text-align:center;">Shubenacadie Microbiome Map</h1>
 
   </div>
 
   </div>
 
   <div class="container">
 
   <div class="container">
 
   <div class="row">
 
   <div class="row">
 
     <hr></hr>
 
     <hr></hr>
−
     <h3>The Map</h3>
+
     <h3 style="text-align:center;font-family:lato-black;color:#2A9E55;">The Map</h3>
 
   <hr></hr>
 
   <hr></hr>
 
   </div>
 
   </div>
−
   <p>Our team was only able to obtain our samples due to our partnership with Shubenacadie wildlife park. Because of this, we have decided to how our appreciation by creating an interactive map detailing the animals’ microbiomes by geographical location at the park. To a general audience, the microbiome can be a very abstract concept since bacteria are rarely viewed as part of an internal ecosystem. This map is intended to make bacteria more tangible by letting people compare animals, their diets and their microbiomes. To use the map, hover over an animal habitat for a cursory look at their microbiome. For a more in-depth look and a brief description of the animal’s diet, click on the habitat for the complete biome.<p>
+
   <p>Our team was only able to obtain our samples due to our partnership with Shubenacadie wildlife park. Because of this, we have decided to how our appreciation by creating an interactive map detailing the animals’ microbiomes by geographical location at the park. To a general audience, the microbiome can be a very abstract concept since bacteria are rarely viewed as part of an internal ecosystem. This map is intended to make bacteria more tangible by letting people compare animals, their diets and their microbiomes. To use the map, hover over an animal habitat for a cursory look at their microbiome. For a more in-depth look and a brief description of the animal’s diet, click on the habitat.</p>
−
  <div class="container" id="mapdiv" Onmousemove="mainFunction()" onClick="extraInfo()" style="margin: 0 auto;"><script type="text/javascript" src="https://2016.igem.org/Template:Team:Dalhousie_Halifax_NS/microbiomemap?action=raw&ctype=text/javascript"></script><img id="map" src="https://static.igem.org/mediawiki/2016/4/40/T--Dalhousie_Halifax_NS--Shubenacadiemap.png" width="780" height="949.3" style="z-index:-1; margin:0 auto;"/><span id="BactList" style="position:absolute; z-index:1;"></span></div>
+
<div class="container" style="border-radius:25px; border:5px; border-style:solid; border-color:#2A9E55; margin-bottom:25px;">
 +
<h4>To Use The Microbiome Map:</h4>
 +
<ol><li>Hover your mouse over the diamond shapes to find out what animal lives at that location in the Shubenacadie Wildlife Park. A popup list will appear and provide you with the Genus of interesting bacterial species, if their microbiome has been sequenced by us.</li><li>Click on that habitat to get a more in-depth look at the animal, as well as some more microbiome information!</li></ol>
 +
</div>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:Team:Dalhousie_Halifax_NS/microbiomemap?action=raw&ctype=text/javascript">
 +
  <div class="col-md-12 centered" id="mapdiv"></script><img onclick="extraInfo()" onmousemove="mainFunction()" id="map" src="https://static.igem.org/mediawiki/2016/4/40/T--Dalhousie_Halifax_NS--Shubenacadiemap.png" width="780" height="949.3" style="z-index:-1; "/><span id="BactList" style="position:absolute; z-index:1;"></span></div>
 
<div id="theModal" class="modal">
 
<div id="theModal" class="modal">
 
<div class="modal-content">
 
<div class="modal-content">
−
<span class="close"></span>
+
<span class="close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>
−
<img id="modalImage" style="margin:0 auto;" width="75%"></img>
+
<img id="modalImage"></img>
 
</div>
 
</div>
−
</div>
+
</div>
−
<body onclick="extraInfo()" onmousemove="mainFunction()">
+
−
 
+
−
</body>
+
−
 
+
 
   </div>
 
   </div>
 +
<body onClick="extraInfo()">
 
  </body>
 
  </body>
 
</html>
 
</html>
 
{{Team:Dalhousie_Halifax_NS/footer}}
 
{{Team:Dalhousie_Halifax_NS/footer}}

Latest revision as of 23:20, 19 October 2016

The Map

Our team was only able to obtain our samples due to our partnership with Shubenacadie wildlife park. Because of this, we have decided to how our appreciation by creating an interactive map detailing the animals’ microbiomes by geographical location at the park. To a general audience, the microbiome can be a very abstract concept since bacteria are rarely viewed as part of an internal ecosystem. This map is intended to make bacteria more tangible by letting people compare animals, their diets and their microbiomes. To use the map, hover over an animal habitat for a cursory look at their microbiome. For a more in-depth look and a brief description of the animal’s diet, click on the habitat.

To Use The Microbiome Map:

  1. Hover your mouse over the diamond shapes to find out what animal lives at that location in the Shubenacadie Wildlife Park. A popup list will appear and provide you with the Genus of interesting bacterial species, if their microbiome has been sequenced by us.
  2. Click on that habitat to get a more in-depth look at the animal, as well as some more microbiome information!

Dalhousie iGEM 2016