Difference between revisions of "Team:Warwick/Team"

Line 1: Line 1:
 
{{Warwick}}
 
{{Warwick}}
 +
 
<html>
 
<html>
 +
     
 +
<script>
 +
$(document).ready(function(){
 +
  var animating = false;
 +
  var posRecep = [200,270]; // receptorpos
 +
  var time = 0.7/300; // s/px
 +
  function selectMember(){
 +
    // just don't animate when we are currently docking
 +
    if (animating) return;
 +
    animating = true;
 +
 +
    var $this = $(this);
 +
 +
    // move docked head back
 +
    $active = $('.team-member-virus .member.active');
 +
    $active.each(function(){
 +
      var $this = $(this);
 +
      var pos = $this.data('orig-pos');
 +
      $this.css('-webkit-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      $this.css('-ms-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      $this.css('-o-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      $this.attr('class', 'member');
 +
    })
 +
 +
    // set current member active
 +
    $this.attr('class', 'member active');
 +
 +
    // move head to receptor
 +
    $this.css('-webkit-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
 +
    $this.css('-ms-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
 +
    $this.css('-0', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
 +
    $this.css('transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
 +
 +
    setTimeout(function(){
 +
      // docked part
 +
 +
      // get content of member
 +
      var content = $('#data-'+$this.data('id')).html();
 +
      // apply content of member to the red cell content area
 +
      $('#member-description').html(content);
 +
 +
      // get the image url
 +
      var href = $this.find('image').attr('xlink:href');
 +
      // apply to the cellcore
 +
      $('#lecell image').attr('xlink:href', href);
 +
 +
      animating = false;
 +
 +
    }, $this.data('duration') * 1000);
 +
   
 +
  }
 +
  $('.team-member-virus .member')
 +
    .each(function(){
 +
      // set orig-pos
 +
      var $this = $(this);
 +
      var transform = $this.attr('transform');
 +
      transform = transform.match(/translate\((\d+),(\d+)\)/);
 +
      pos = [transform[1],transform[2]];
 +
      $this.data('orig-pos', pos);
 +
      $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      // compute duration
 +
      var dist = Math.sqrt(Math.pow(posRecep[0] - pos[0],2) +
 +
        Math.pow(posRecep[1] - pos[1],2));
 +
      var dur = dist*time;
 +
      $this.css('transition-duration', dur + 's');
 +
      $this.data('duration', dur);
 +
    })
 +
    // add the click handler
 +
    .click(selectMember);
 +
});
 +
 +
</script>
 +
<script>
 +
// set title
 +
$('head title').text('Project | Overview | Team Warwick | iGEM2015');
 +
</script>
 +
 +
<html>
 +
<style>
 +
    .team-member-virus {
 +
      width:100%;
 +
      height:0;
 +
      padding-top:68.359375%;
 +
      position: relative;
 +
      color: black;
 +
 +
    }
 +
    svg {
 +
      position:absolute;
 +
      top:0;left:0;
 +
      width:100%;height:100%;
 +
    }
 +
    .member {
 +
      cursor: pointer;
 +
    }
 +
</style>
 +
<div style="display:none;">
 +
    <div id="data-liam">
 +
      <h1>Liam Carroll</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-matt">
 +
      <h1>Matthew Chester</h1>
 +
      <ul>
 +
      <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-iain">
 +
      <h1>Iain Galpin</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-marylka">
 +
      <h1>Marylka Griffiths</h1>
 +
      <ul>
 +
      <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-ben">
 +
      <h1>Ben Hayward</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-eggy">
 +
      <h1>Eggy Ogbomo</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-aneesa">
 +
      <h1>Aneesa Sheikh</h1>
 +
      <ul>
 +
<li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-jake">
 +
      <h1>Jake Swain</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Bio:</li>
 +
    </div>
 +
   
 +
 +
  </div>
 +
  <div class="team-member-virus">
 +
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 1024,700">
 +
      <style type="text/css">
 +
        image {
 +
          clip-path: url(#clipPath);
 +
        }
 +
        #lecell image {
 +
          clip-path: url(#clipPathCell);
 +
        }
 +
      </style>
 +
      <defs>
 +
        <clipPath id="clipPath"><use xlink:href="#sixsider" /></clipPath>
 +
        <clipPath id="clipPathCell"><use xlink:href="#cellcore" /></clipPath>
 +
        <path id="cellcore"
 +
          d="m 223.88555,21.29458 a 120.91828,192.57355 0 0 1 0,385.14685 120.91828,192.57355 0 1 1 0,-385.14685 z"
 +
          style="fill:#151b54;stroke:#151b54;stroke-width:10" />
 +
        <path d="M197,27 L253,125 196,222 83,221 27,123 84,26 197,27 z" id="sixsider" style="fill:none;stroke:#151b54;stroke-width:6;" />
 +
        <circle id="outercirc" r="120" style="fill:#5588d8;stroke:#3a5e8c;stroke-width:6.5;" />
 +
        <circle cx="15" cy="122" r="14" id="circ" style="fill:#8c112a;stroke:#8c112a;stroke-width:2;" />
 +
       
 +
        <g id="bg">
 +
          <use xlink:href="#circ" />
 +
          <use transform="translate(62,112)" xlink:href="#circ" />
 +
          <use transform="translate(190,111)" xlink:href="#circ" />
 +
          <use transform="translate(250,1)" xlink:href="#circ" />
 +
          <use transform="translate(188,-105)" xlink:href="#circ" />
 +
          <use transform="translate(60,-104)" xlink:href="#circ" />
 +
          <use transform="translate(140,125)" xlink:href="#outercirc" />
 +
        </g>
 +
        <linearGradient
 +
          x1="0%"
 +
          y1="25%"
 +
          x2="100%"
 +
          y2="75%"
 +
          id="gradOrange">
 +
          <stop
 +
            id="stop5"
 +
            style="stop-color:#82caff;stop-opacity:1"
 +
            offset="0" />
 +
          <stop
 +
            id="stop7"
 +
            style="stop-color:#ffffff;stop-opacity:1"
 +
            offset="1" />
 +
        </linearGradient>
 +
      </defs>
 +
 +
      <!-- bottom cell where text will be displayed eventually -->
 +
      <!-- cell part -->
 +
 +
      <g id="lecell" transform="translate(0,400)">
 +
        <path
 +
          d="M 84.6349,-95.7008 C 421.58879,109.71901 733.49662,8.81505 878.70582,-70.194 920.57862,32.68133 861.12342,109.51504 1071.6661,184.37737 995.64312,263.16505 863.57452,345.58349 905.04162,518.36333 618.91832,418.84221 333.88112,399.28807 170.7772,480.84023 169.39472,381.31895 47.99788,324.7212 -49.55187,244.45876 78.86805,140.73498 79.30872,81.11448 84.6349,-95.7008 z"
 +
          style="fill:url(#gradOrange);stroke:#151b54;stroke-width:5" />
 +
        <use xlink:href="#cellcore" />
 +
        <image x="100" y="15" width="250" height="290"preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png" />
 +
      </g>
 +
 +
      <!-- receptor and docking part -->
 +
 +
      <g id="receptor" transform="translate(210,255) rotate(16) scale(0.65)">
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M57.755,197.803v-59.689
 +
          c0-6.721-5.59-12.17-12.48-12.17s-12.48,5.45-12.48,12.17v60.689"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M57.765,197.583v6.971
 +
          c0,6.72,5.59,12.171,12.48,12.171c6.89,0,12.48-5.451,12.48-12.171v-6.971"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M107.7,197.928v-59.439
 +
          c0-6.721-5.59-12.17-12.48-12.17c-6.89,0-12.48,5.45-12.48,12.17v59.439"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M207.545,198.053v-57.939
 +
          c0-6.721-5.59-12.17-12.479-12.17c-6.891,0-12.48,5.45-12.48,12.17v57.939"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M157.54,197.928v-79.66l2-1.351
 +
          c3.71-3.71,6.01-8.829,6.01-14.49c0-11.319-9.189-20.489-20.52-20.489c-11.331,0-20.52,9.17-20.52,20.489
 +
          c0,5.661,2.299,10.78,6.01,14.49l2,1.351v80.41"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M107.605,197.708v6.971
 +
          c0,6.72,5.59,12.171,12.48,12.171c6.891,0,12.48-5.451,12.48-12.171v-6.971"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M157.515,197.333v6.971
 +
          c0,6.72,5.61,12.171,12.54,12.171c6.931,0,12.54-5.451,12.54-12.171v-6.971"/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M32.76,197.773c0,18.06-14.67,32.699-32.76,32.699
 +
          "/>
 +
        <path fill="none" stroke="#151b54" stroke-width="10" stroke-miterlimit="10" d="M207.535,196.023
 +
          c0,18.06,14.64,32.699,32.7,32.699"/>
 +
      </g>
 +
 +
      <!-- content part -->
 +
      <foreignObject class="node" x="380" y="440" width="500" height="270">
 +
        <body xmlns="http://www.w3.org/1999/xhtml">
 +
          <div id="member-description" style="height:250px; overflow:auto;">
 +
            <h1>The iGEM2015 Team Warwick </h1>
 +
            <p>ADD DESCRIPTION</p>
 +
          </div>
 +
        </body>
 +
      </foreignObject>
 +
     
 +
      <g class="member" data-id="liam" transform="translate(0,0)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
 +
   
 +
      <g class="member" data-id="iain" transform="translate(145,50)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
−
<h2> Meet the Team</h2>
+
    <g class="member" data-id="marylka" transform="translate(410,90)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
−
<p>INTRO TO TEAM</p>
 
  
 +
      <g class="member" data-id="ben" transform="translate(420,255)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
 +
      <g class="member" data-id="eggy" transform="translate(130,210)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
−
<h4>
+
      <g class="member" data-id="aneesa" transform="translate(435,0)">
−
Team Member 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team Member 2</h4>
+
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
−
<h4>
+
      <g class="member" data-id="jake" transform="translate(250,140)">
−
Team Member 3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team Member 4</h4>
+
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.open-source-embroidery.org.uk/wiki/new_hex.png"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
  
−
<h4>
 
−
Team Member 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team Member 6</h4>
 
  
−
<h4>
+
     
−
Team Member 7 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team Member 8</h4>
+
    </svg>
 +
  </div>
  
 
</html>
 
</html>

Revision as of 15:49, 6 July 2015

Warwick iGEM 2015

Open Menu