Team:Calgary

From 2014.igem.org

(Difference between revisions)
(Testing Parallax Effect)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
-
{{CSS/Main}}
+
{{Team:Calgary/Main}}
-
 
+
-
 
+
-
 
+
<html>
<html>
-
<head>
 
-
<meta charset="utf-8">
 
-
<meta name="viewport" content="width=device-width">
 
-
<title>A grouped pure CSS parallax demo by Keith Clark</title>
 
-
<link rel="stylesheet" href="../demo.css">
 
-
<style>
 
-
 
-
  /* Parallax base styles
 
-
  --------------------------------------------- */
 
-
 
-
  .parallax {
 
-
    height: 500px; /* fallback for older browsers */
 
-
    height: 100vh;
 
-
    overflow-x: hidden;
 
-
    overflow-y: auto;
 
-
    -webkit-perspective: 300px;
 
-
    perspective: 300px;
 
-
  }
 
-
 
-
  .parallax__group {
 
-
    position: relative;
 
-
    height: 500px; /* fallback for older browsers */
 
-
    height: 100vh;
 
-
    -webkit-transform-style: preserve-3d;
 
-
    transform-style: preserve-3d;
 
-
  }
 
-
 
-
  .parallax__layer {
 
-
    position: absolute;
 
-
    top: 0;
 
-
    left: 0;
 
-
    right: 0;
 
-
    bottom: 0;
 
-
  }
 
-
 
-
  .parallax__layer--fore {
 
-
    -webkit-transform: translateZ(90px) scale(.7);
 
-
    transform: translateZ(90px) scale(.7);
 
-
    z-index: 1;
 
-
  }
 
-
 
-
  .parallax__layer--base {
 
-
    -webkit-transform: translateZ(0);
 
-
    transform: translateZ(0);
 
-
    z-index: 4;
 
-
  }
 
-
 
-
  .parallax__layer--back {
 
-
    -webkit-transform: translateZ(-300px) scale(2);
 
-
    transform: translateZ(-300px) scale(2);
 
-
    z-index: 3;
 
-
  }
 
-
 
-
  .parallax__layer--deep {
 
-
    -webkit-transform: translateZ(-600px) scale(3);
 
-
    transform: translateZ(-600px) scale(3);
 
-
    z-index: 2;
 
-
  }
 
-
 
-
 
-
  /* Debugger styles - used to show the effect
 
-
  --------------------------------------------- */
 
-
 
-
  .debug {
 
-
    position: fixed;
 
-
    top: 0;
 
-
    left: .5em;
 
-
    z-index: 999;
 
-
    background: rgba(0,0,0,.85);
 
-
    color: #fff;
 
-
    padding: .5em;
 
-
    border-radius: 0 0 5px 5px;
 
-
  }
 
-
  .debug-on .parallax__group {
 
-
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
 
-
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
 
-
}
 
-
  .debug-on .parallax__layer {
 
-
    box-shadow: 0 0 0 2px #000;
 
-
    opacity: 0.9;
 
-
  }
 
-
  .parallax__group {
 
-
    -webkit-transition: -webkit-transform 0.5s;
 
-
    transition: transform 0.5s;
 
-
  }
 
-
 
-
 
-
  /* demo styles
 
-
  --------------------------------------------- */
 
-
 
-
  body, html {
 
-
    overflow: hidden;
 
-
  }
 
-
 
-
  body {
 
-
    font: 100% / 1.5 Arial;
 
-
  }
 
-
 
-
  * {
 
-
    margin:0;
 
-
    padding:0;
 
-
  }
 
-
 
-
  .parallax {
 
-
    font-size: 200%;
 
-
  }
 
-
 
-
  /* centre the content in the parallax layers */
 
-
  .title {
 
-
    text-align: center;
 
-
    position: absolute;
 
-
    left: 50%;
 
-
    top: 50%;
 
-
    -webkit-transform: translate(-50%, -50%);
 
-
    transform: translate(-50%, -50%);
 
-
  }
 
-
 
-
 
-
 
-
  /* style the groups
 
-
  --------------------------------------------- */
 
-
 
-
  #group1 {
 
-
    z-index: 5; /* slide over group 2 */
 
-
  }
 
-
  #group1 .parallax__layer--base {
 
-
    background: rgb(102,204,102);
 
-
  }
 
-
 
-
  #group2 {
 
-
    z-index: 3; /* slide under groups 1 and 3 */
 
-
  }
 
-
  #group2 .parallax__layer--back {
 
-
    background: rgb(123,210,102);
 
-
  }
 
-
 
-
  #group3 {
 
-
    z-index: 4; /* slide over group 2 and 4 */
 
-
  }
 
-
  #group3 .parallax__layer--base {
 
-
    background: rgb(153,216,101);
 
-
  }
 
-
 
-
  #group4 {
 
-
    z-index: 2; /* slide under group 3 and 5 */
 
-
  }
 
-
  #group4 .parallax__layer--deep {
 
-
    background: rgb(184,223,101);
 
-
  }
 
-
 
-
  #group5 {
 
-
    z-index: 3; /* slide over group 4 and 6 */
 
-
  }
 
-
  #group5 .parallax__layer--base {
 
-
    background: rgb(214,229,100);
 
-
  }
 
-
 
-
  #group6 {
 
-
    z-index: 2; /* slide under group 5 and 7 */
 
-
  }
 
-
  #group6 .parallax__layer--back {
 
-
    background: rgb(245,235,100);
 
-
  }
 
-
  #group7 {
+
<section class="Content Text Color-Black" id="HomeBsDetector">
-
    z-index: 3; /* slide over group 7 */
+
<img src="https://static.igem.org/mediawiki/2014/2/28/2014UCalgaryHomeRobot.png" id="HomeRobot">
-
  }
+
<h2 class="HomeBsDetectorH2"><i>B.s.</i> Detector</h2>
-
  #group7 .parallax__layer--base {
+
<p class="HomeBsDetectorP">We are developing a novel, genome-based, point-of-care synthetic biological device to <b>simultaneously diagnose multiple infectious diseases</b> that are prevalent worldwide.</p>
-
    background: rgb(255,241,100);
+
</section>
-
  }
+
-
</style>
+
-
</head>
+
-
<body>
+
<section class="Content Text Color-Light" id="HomeMisdiagnosis">
 +
<h2 class="HomeMisdiagnosisH2">Misdiagnosis of Infectious Diseases</h2>
 +
<p class="HomeMisdiagnosisP">Infectious diseases such as typhoid fever, meningitis, pneumonia and visceral leishmaniasis have similar clinical manifestations as malaria, thus are <b>often misdiagnosed</b> in resource-poor developing countries lacking suitable medical diagnostic facilities. Failure to properly identify such diseases prevents medical professionals from administering appropriate treatments in a timely manner, which results in economic costs and human suffering. In order to address this issue, the iGEM 2014 team is developing a <b>novel, genome-based, rapid point-of-care synthetic biological device</b> to simultaneously diagnose multiple infectious diseases.</p>
 +
</section>
-
  <div class="debug">
+
<section class="Content Text Color-Orange" id="HomeCaseStudy">
-
    <label><input type="checkbox"> Debug</label>
+
<img src="https://static.igem.org/mediawiki/2014/d/d6/2014UCalgaryHomeHuman.png" id="HomeHuman">
-
  </div>
+
<h2 class="HomeCaseStudyH2">Global Impact</h2>
-
  <div class="demo__info">
+
<p class="HomeCaseStudyP">Recent studies show that malaria-endemic countries have a 1-3% decreased economic growth rate than countries without malaria. With a widening gap of prosperity between these group of countries, it is predicted that malaria cases <b>will double over the next 20 years</b>. From the public-health perspective, misdiagnosis of malaria results in <b>excessive reporting of malaria cases</b>, while those that mimic malaria are under-reported.</p>
-
    Pure CSS parallax scroll demo #3 by Keith Clark. Please read the <a href="http://blog.keithclark.co.uk/pure-css-parallax-websites/">blog post</a> for more information.
+
<p class="HomeCaseStudyP">Patients who test negative for malaria but show its clinical signs and symptoms are often given antimalarial drugs despite their diagnosis. The over-prescription of antimalarials fosters an environment for the emergence of <b>drug resistance</b> and worsens the patient's condition.</p>
-
  </div>
+
</section>
-
  <div class="parallax">
+
<section class="Content Text Color-Light" id="HomeOurDevice">
-
    <div id="group1" class="parallax__group">
+
<img src="https://static.igem.org/mediawiki/2014/8/85/Radialdevice.png" id="HomeDevice">
-
      <div class="parallax__layer parallax__layer--base">
+
<h2 class="HomeOurDeviceH2">Our Device, Our Idea</h2>
-
        <div class="title">Base Layer</div>
+
<p class="HomeOurDeviceP">We are engineering <b><i>Bacillus subtilis</i></b> to generate chromophoric reporter proteins in response to pathogenic genetic markers.</p>
-
      </div>
+
</section>
-
    </div>
+
-
    <div id="group2" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--back">
+
-
        <div class="title">Background Layer</div>
+
-
      </div>
+
-
    </div>
+
-
    <div id="group3" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--fore">
+
-
        <div class="title">Foreground Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
    </div>
+
-
    <div id="group4" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--back">
+
-
        <div class="title">Background Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--deep">
+
-
        <div class="title">Deep Background Layer</div>
+
-
      </div>
+
-
    </div>
+
-
    <div id="group5" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--fore">
+
-
        <div class="title">Foreground Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
    </div>
+
-
    <div id="group6" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--back">
+
-
        <div class="title">Background Layer</div>
+
-
      </div>
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
    </div>
+
-
    <div id="group7" class="parallax__group">
+
-
      <div class="parallax__layer parallax__layer--base">
+
-
        <div class="title">Base Layer</div>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
  <script>
+
<section class="Content Text Color-Blue" id="HomeComponents">
-
    var debugInput = document.querySelector("input");
+
<h2 class="HomeComponentsH2">Components of Our System</h2>
-
    function updateDebugState() {
+
<div class="buttoncontainer">
-
        document.body.classList.toggle('debug-on', debugInput.checked);
+
<div class="button"><a href="https://2014.igem.org/Team:Calgary/Project/BsDetector"><img src="https://static.igem.org/mediawiki/2014/0/00/2014UCalgaryButtonDetector.png"/></a></div>
-
    }
+
<div class="button"><a href="https://2014.igem.org/Team:Calgary/Project/BsDetector/GeneticCircuit"><img src="https://static.igem.org/mediawiki/2014/c/c5/2014UCalgaryButtonGeneticCircuit.png"/></a></div>
-
    debugInput.addEventListener("click", updateDebugState);
+
<div class="button"><a href="https://2014.igem.org/Team:Calgary/Project/Collaboration"><img src="https://static.igem.org/mediawiki/2014/7/7e/2014UCalgaryButtonCollaboration.png"/></a></div>
-
    updateDebugState();
+
<div class="button"><a href="https://2014.igem.org/Team:Calgary/PoliciesAndPractices"><img src="https://static.igem.org/mediawiki/2014/0/0f/2014UCalgaryButtonPolicy.png"/></a></div>
-
  </script>
+
</div>
 +
</section>
-
  <script type="text/javascript">
 
-
  var _gaq = _gaq || [];
 
-
  _gaq.push(['_setAccount', 'UA-10812217-3']);
 
-
  _gaq.push(['_trackPageview']);
 
-
  (function() {
 
-
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
-
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
-
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
-
  })();
 
-
  </script>
 
-
</body>
 
</html>
</html>

Latest revision as of 03:55, 18 October 2014

B.s. Detector

We are developing a novel, genome-based, point-of-care synthetic biological device to simultaneously diagnose multiple infectious diseases that are prevalent worldwide.

Misdiagnosis of Infectious Diseases

Infectious diseases such as typhoid fever, meningitis, pneumonia and visceral leishmaniasis have similar clinical manifestations as malaria, thus are often misdiagnosed in resource-poor developing countries lacking suitable medical diagnostic facilities. Failure to properly identify such diseases prevents medical professionals from administering appropriate treatments in a timely manner, which results in economic costs and human suffering. In order to address this issue, the iGEM 2014 team is developing a novel, genome-based, rapid point-of-care synthetic biological device to simultaneously diagnose multiple infectious diseases.

Global Impact

Recent studies show that malaria-endemic countries have a 1-3% decreased economic growth rate than countries without malaria. With a widening gap of prosperity between these group of countries, it is predicted that malaria cases will double over the next 20 years. From the public-health perspective, misdiagnosis of malaria results in excessive reporting of malaria cases, while those that mimic malaria are under-reported.

Patients who test negative for malaria but show its clinical signs and symptoms are often given antimalarial drugs despite their diagnosis. The over-prescription of antimalarials fosters an environment for the emergence of drug resistance and worsens the patient's condition.

Our Device, Our Idea

We are engineering Bacillus subtilis to generate chromophoric reporter proteins in response to pathogenic genetic markers.

Components of Our System

Retrieved from "http://2014.igem.org/Team:Calgary"