Difference between revisions of "Team:ShanghaiTech/Human Practices"

m
Line 5: Line 5:
 
<body>
 
<body>
  
−
<main class="container">
 
  
−
<div class="row">
+
    <script src="/js/jquery.imagemapster.min.js"></script>
 +
    <style type="text/css">
 +
        img[usemap] {
 +
            border: none;
 +
            height: auto;
 +
            max-width: 100%;
 +
            width: auto;
 +
        }
 +
    </style>
  
−
  <div class="col-sm-9" style="padding-top: 70px">
+
    <script>
 +
    $(function() {
 +
      $("#header").load("/header.html");
 +
      $("#footer").load("/footer.html");
 +
    });
 +
    $(document).ready(function () {
 +
      console.log($("#navbar-home"));
 +
      $("#navbar-home").parent().addClass('active');
 +
    });
 +
    </script>
  
−
  <h1>Human Practices</h1>
 
−
  <br>
 
−
   
 
−
    <h2>Overview</h2>
 
  
−
      <p>Science and life. </p>
+
<main class="container">
  
−
      <p>The advance of science including synthetic biology cannot digress from people&#39;s daily life. And laboratory creations always aim at bettering the world. What iGEM team ShanghaiTech wants to achieve this year is to bridge the distance between science and the public. Through education and institutions visit, we try to find the approach to build a direct relationship between laboratory and society. Through colorful design in biosafety education, we help students achieve the transition from a green hand to a qualified member of biological researches. Through communication with experts, we seek more possibilities in our project for both laboratory-use and social-use.</p>
+
<map name="map">
 +
    <!-- <area shape="circle" coords="781, 2841, 693" state ="tbl"/> -->
 +
    <area shape="circle" coords="7139, 3777, 800" target="_blank" href="/Team:ShanghaiTech/Integrated_HP#communications-with-experts" state="tbl" />
 +
    <area shape="circle" coords="3624, 5683, 575" target="_blank" href="/Team:ShanghaiTech/Integrated_HP#institution-visit" state="tbl" />
 +
    <area shape="circle" coords="3140, 2550, 569" target="_blank" href="/Team:ShanghaiTech/Public_Engagement#education" state="tbl" />
 +
    <area shape="circle" coords="5052, 3144, 1059" target="_blank" href="/Team:ShanghaiTech/Integrated_HP" state="tbl" />
 +
    <area shape="circle" coords="6074, 4880, 568" target="_blank" href="/Team:ShanghaiTech/Biosafety" state="tbl" />
 +
    <area shape="circle" coords="774, 2834, 682" target="_blank" href="/Team:ShanghaiTech/Public_Engagement#igem-club" state="tbl" />
 +
    <!-- <area shape="circle" coords="3150, 2560, 569" target="_blank" href="#" state="tbl" /> -->
 +
    <area shape="circle" coords="2188, 4027, 1095" target="_blank" href="/Team:ShanghaiTech/Public_Engagement" state="tbl" />
 +
</map>
 +
<div style="height: 100px"></div>
 +
<h2 class="text-center">Human Practices</h2>
 +
<br>
 +
<br>
 +
<p class="text-center" style="font-weight: bold; font-size: 20pt; margin-top: -50px">Overview</p>
 +
<br>
  
−
  </div>
+
<img class="img-fluid" src="https://static.igem.org/mediawiki/2018/3/3e/T--ShanghaiTech--HP_home.png" usemap="#map" />
  
−
  <div class="col-sm-3">
+
<p class="text-muted text-center"><u>(If you meet any compatibility issuses, like cannot open the link by clicking, try right click and then select "Open Link in New Tab".)</u></p>
−
    <nav id="mytoc" class="sticky-top" style="top: 100px"></nav>
+
 
−
   </div>
+
<p>Science and life. </p>
 +
 
 +
<p>The advance of science including synthetic biology cannot digress from people&#39;s daily life. And
 +
   laboratory creations always aim at bettering the world. What iGEM team ShanghaiTech wants to achieve this
 +
  year is to bridge the distance between science and the public. Through education and institutions visit, we
 +
  try to find the approach to build a direct relationship between laboratory and society. Through colorful
 +
  design in biosafety education, we help students achieve the transition from a green hand to a qualified
 +
  member of biological researches. Through communication with experts, we seek more possibilities in our
 +
  project for both laboratory-use and social-use.</p>
  
−
</div>
 
  
 
</main>
 
</main>
 +
 +
 +
<script>var resizeTime = 100;
 +
    var resizeDelay = 100;
 +
 +
    $('img').mapster({
 +
        areas: [
 +
            {
 +
                key: 'tbl',
 +
                fillColor: 0xffffff,
 +
                staticState: false,
 +
                stroke: true
 +
            }
 +
        ],
 +
        mapKey: 'state'
 +
    });
 +
 +
    // Resize the map to fit within the boundaries provided
 +
 +
    function resize(maxWidth, maxHeight) {
 +
        var image = $('img'),
 +
            imgWidth = image.width(),
 +
            imgHeight = image.height(),
 +
            newWidth = 0,
 +
            newHeight = 0;
 +
 +
        if (imgWidth / maxWidth > imgHeight / maxHeight) {
 +
            newWidth = maxWidth;
 +
        } else {
 +
            newHeight = maxHeight;
 +
        }
 +
        image.mapster('resize', newWidth, newHeight, resizeTime);
 +
    }
 +
 +
    function onWindowResize() {
 +
 +
        var curWidth = $(window).width(),
 +
            curHeight = $(window).height(),
 +
            checking = false;
 +
        if (checking) {
 +
            return;
 +
        }
 +
        checking = true;
 +
        window.setTimeout(function () {
 +
            var newWidth = $(window).width(),
 +
                newHeight = $(window).height();
 +
            if (newWidth === curWidth &&
 +
                newHeight === curHeight) {
 +
                resize(newWidth, newHeight);
 +
            }
 +
            checking = false;
 +
        }, resizeDelay);
 +
    }
 +
 +
    $(window).bind('resize', onWindowResize);
 +
</script>
 +
  
 
<br>
 
<br>

Revision as of 02:01, 18 October 2018

ShanghaiTech iGEM

Human Practices



Overview


(If you meet any compatibility issuses, like cannot open the link by clicking, try right click and then select "Open Link in New Tab".)

Science and life.

The advance of science including synthetic biology cannot digress from people's daily life. And laboratory creations always aim at bettering the world. What iGEM team ShanghaiTech wants to achieve this year is to bridge the distance between science and the public. Through education and institutions visit, we try to find the approach to build a direct relationship between laboratory and society. Through colorful design in biosafety education, we help students achieve the transition from a green hand to a qualified member of biological researches. Through communication with experts, we seek more possibilities in our project for both laboratory-use and social-use.


ShanghaiTech iGEM @ 2018