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="matt" transform="translate(405,150)">
 
        <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)">
+
<h2> Meet the Team</h2>
        <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="marlyka" transform="translate(290,20)">
+
<p>INTRO TO TEAM</p>
        <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="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>
 
  
      <g class="member" data-id="aneesa" transform="translate(435,0)">
+
<h4>
        <g transform="scale(0.35)">
+
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>
          <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="jake" transform="translate(250,140)">
+
<h4>
        <g transform="scale(0.35)">
+
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>
          <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>
    </svg>
+
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>
  </div>
+
  
 
</html>
 
</html>

Revision as of 09:05, 3 July 2015

Warwick iGEM 2015