|
|
| (35 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Warwick}}
| |
| | | | |
| − | <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>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − |
| |
| − | <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)">
| |
| − | <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="jake" transform="translate(250,140)">
| |
| − | <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>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </svg>
| |
| − | </div>
| |
| − |
| |
| − | </html>
| |