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

 
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
  
−
<body data-spy="scroll" data-target="#mytoc">
+
<body>
 +
 
 +
 
 +
    <script src="/js/jquery.imagemapster.min.js"></script>
 +
    <style type="text/css">
 +
        img[usemap] {
 +
            border: none;
 +
            height: auto;
 +
            max-width: 100%;
 +
            width: auto;
 +
        }
 +
    </style>
 +
 
 +
    <script>
 +
    $(function() {
 +
      $("#header").load("/header.html");
 +
      $("#footer").load("/footer.html");
 +
    });
 +
    $(document).ready(function () {
 +
      console.log($("#navbar-home"));
 +
      $("#navbar-home").parent().addClass('active');
 +
    });
 +
    </script>
 +
 
  
 
<main class="container">
 
<main class="container">
  
−
<div class="row">
+
<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>
 +
<img class="img-fluid"  src="https://static.igem.org/mediawiki/2018/6/64/T--ShanghaiTech--Human_Practice_New.svg" style="z-index:0; margin-top: -40px;">
  
−
  <div class="col-sm-9" style="padding-top: 70px">
+
<br>
 +
<p style="font-family: 'Tw Cen MT'; font-weight: bold; font-size: 30pt">Overview</p>
 +
<p style="font-family: 'Quicksand Regular'; font-size: 15pt; margin-top: -20px">Science and life. 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>
  
−
  <h1>Human Practices</h1>
+
<img class="img-fluid" src="https://static.igem.org/mediawiki/2018/3/3e/T--ShanghaiTech--HP_home.png" usemap="#map" />
−
  <br>
+
 
−
   
+
<p class="text-muted text-center"><u>(If you meet any compatibility issuses, like cannot open the link by clicking, try to click the below hyperlinks.)</u></p>
−
    <h2>Overview</h2>
+
<a href = "/Team:ShanghaiTech/Integrated_HP#institution-visit">Institution Visit</a><br>
 +
<a href = "/Team:ShanghaiTech/Public_Engagement#education">Education</a><br>
 +
<a href = "/Team:ShanghaiTech/Integrated_HP">Gold & Integrated Human Practice</a><br>
 +
<a href = "/Team:ShanghaiTech/Biosafety">Biosafety</a><br>
 +
<a href = "/Team:ShanghaiTech/Public_Engagement#igem-club">iGEM Club</a><br>
 +
<a href = "/Team:ShanghaiTech/Public_Engagement">Silver & Best Education and Public Engagement</a><br>
  
−
      <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>
 
  
−
  <div class="col-sm-3">
 
−
    <nav id="mytoc" class="sticky-top" data-toggle="toc" style="top: 70px"></nav>
 
−
  </div>
 
  
−
</div>
 
  
 
</main>
 
</main>
  
−
<br>
 
  
−
<div id="footer"></div>
+
<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>
  
 
</body>
 
</body>

Latest revision as of 02:15, 8 December 2018

ShanghaiTech iGEM


Overview

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.

(If you meet any compatibility issuses, like cannot open the link by clicking, try to click the below hyperlinks.)

Institution Visit
Education
Gold & Integrated Human Practice
Biosafety
iGEM Club
Silver & Best Education and Public Engagement

ShanghaiTech iGEM @ 2018