|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| + | {{CLSB-UK}} |
| − | <style>
| + | {{CLSB-UK Header}} |
| − | #teammembers {
| + | {{CLSB-UK Content Start}} |
| − | text-align: center;
| + | |
| − | padding-bottom: 20px;
| + | |
| − | }
| + | |
| − | #teammembers svg {
| + | |
| − | border-radius: 50%;
| + | |
| − | vertical-align: middle;
| + | |
| − | width: 150px;
| + | |
| − | height: 150px;
| + | |
| − | margin: 5px;
| + | |
| − | padding: 2px;
| + | |
| − | border: 3px solid transparent;
| + | |
| − | transition: all 0.5s;
| + | |
| − | cursor: pointer;
| + | |
| − | user-drag: none;
| + | |
| − | -webkit-user-drag: none;
| + | |
| − | user-select: none;
| + | |
| − | position: relative;
| + | |
| − | object-fit: cover;
| + | |
| − | }
| + | |
| − | #teammembers svg:hover {
| + | |
| − | border: 3px solid #bbb;
| + | |
| − | border-radius: 40%;
| + | |
| − | }
| + | |
| − | #teammembers svg.teammembers_selected {
| + | |
| − | border: 5px solid #2b363b;
| + | |
| − | margin: 3px;
| + | |
| − | }
| + | |
| − | #teammembers_card {
| + | |
| − | background: #2b363b;
| + | |
| − | padding: 20px;
| + | |
| − | color: #fff !important;
| + | |
| − | margin: 12px 0;
| + | |
| − | }
| + | |
| − | /* Overriding iGEM's styles */
| + | |
| − | #teammembers_name {
| + | |
| − | font-size: 30px;
| + | |
| − | text-align: left;
| + | |
| − | color: #fff !important
| + | |
| − | }
| + | |
| − | #teammembers_triangle {
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | border: solid 20px;
| + | |
| − | border-color: transparent transparent #2b363b transparent;
| + | |
| − | position: relative;
| + | |
| − | margin: -20px;
| + | |
| − | display: inline;
| + | |
| − | top: 71px;
| + | |
| − | left: 87px;
| + | |
| − | }
| + | |
| − | @media (max-width: 992px) {
| + | |
| − | #teammembers svg {
| + | |
| − | width: 125px;
| + | |
| − | height: 125px;
| + | |
| − | margin: 4px;
| + | |
| − | }
| + | |
| − | #teammembers svg.teammembers_selected {
| + | |
| − | margin: 2px;
| + | |
| − | }
| + | |
| − | #teammembers_triangle {
| + | |
| − | top: 60px;
| + | |
| − | left: 75px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media (max-width: 768px) {
| + | |
| − | #teammembers svg {
| + | |
| − | width: 100px;
| + | |
| − | height: 100px;
| + | |
| − | padding: 0;
| + | |
| − | margin: 3px;
| + | |
| − | }
| + | |
| − | #teammembers svg.teammembers_selected {
| + | |
| − | border-width: 3px;
| + | |
| − | }
| + | |
| − | #teammembers br, #teammembers_triangle {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <div id="teammembers">
| + | |
| − | <svg data-name="Biology technicians" data-biography="The brilliant biology technicians at our school helped us by sourcing and setting up the equipment we used in our lab work, as well as generally keeping everything organised." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#3f51b5" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="#fff" d="M30 266.3L48.2 248l.4-1.2 22.8-22c.2-4.3 3.3-8 6.8-11.8l27.3-28s2.3-3.7 3-10.8c.6-7 6.7 5.5 8.6 7.7 4 4.2 6 1 7.6 6.4 0 0 .3 1.6-4 5.7-4.3 4-32.7 29.3-32.7 29.3-4.7 3.8-9.3 6-14 5L51 249l-1.6.4z"/>
| + | |
| − | <path fill="#fff" d="M115.2 181.5l6.8-7c.6-1.8-.2-3.6-1.2-5.3l1.4-1.5c3.5 1.7 6 4.4 7.8 8l-1.4 1.3c-1.8-1-3.5-1.5-5-1l-7 7z"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| | | | |
| − | <svg data-name="Kirsten Jensen, Imperial" data-biography="Kirsten helped with troubleshooting whenever OpenWetWare and other forums did not yield useful info. She also helped us secure sequencing vouchers from Eurofins, as well as allowed us to store our competent cells and cell-free extracts in Imperial’s labs. Lastly, she rescued us when we urgently needed more pSB1C3 plasmid with some miniprepped BBa_J04450 that they had from last year. She has been our go-to person whenever we “hit the wall” and has we have used her as the fountain of all knowledge. Her continuous encouragement was much appreciated throughout the project." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | = Attributions = |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#ff5722" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <circle cx="111.2" cy="206.7" r="41.4" fill="none" stroke="#fff" stroke-width="4.1" transform="rotate(7.835)" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.7" d="M57 179.3l6.7 10m49.6 14l10-5.6m-38.6 56.6l1 12.6"/>
| + | |
| − | <path fill="#fff" d="M51.3 257.2l8.6-10.7c-5.7-5.6-10-12.2-12-19.8L35 229c1.7 10 6.2 20.6 16.3 28.2zm67.4-6l-10.5-9c6.4-5.4 10.8-21.4 8.4-30.5l12-2.5c3.8 10.8-.6 32.8-10 42z"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.9" d="M45 200.6l-13.7-8.3 12.7-21"/>
| + | |
| − | <path fill="#fff" d="M41 170.6l4.7 2.8 1-6.4z"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| | | | |
| − | <svg data-name="Caroline Smith, Westminster" data-biography="We [[Team:CLSB-UK/Collaborations|collaborated]] with Westminster, and they allowed us to use their plate reader to do the [[Team:CLSB-UK/InterLab|Interlab]]." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | The lab work, wiki design and development, poster design and any images or diagrams were done by team members except where otherwise attributed. |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#4caf50" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="2.1" d="M79.7 168c-27 .2-48.8 22-48.7 49 0 27 22 49 49 49s49-22 49-49-21.7-48.8-48.7-49zm.3 0v98m49-49H31m11-30c22.8 16 53.2 16 76 0m0 60.2c-22.8-16.2-53.2-16.2-76 0m34.2-79c-29.7 25-29.7 72.5 0 97.6m7.6 0c29.7-25 29.7-72.5 0-97.6"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| | | | |
| − | <svg data-name="Alexander Wood" data-biography="Alexander Wood and his physics department at CLS kindly lent us their soldering equipment. He and the physics technicians put up with us coming early several times to build the fluorometer - without them our [[Team:CLSB-UK/Hardware|hardware]] would not exist!" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | If this page doesn't seem to work as intended, we recommend you upgrade to [https://www.google.com/chrome/ Google Chrome] or [https://www.mozilla.org/en-US/firefox/new/ Mozilla Firefox]. However, you can view a plain version of the attributions page [[Team:CLSB-UK/Attributions_Fallback|here]]. |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#e91e63" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="#fff" d="M129.8 171.5l-4-4-5.3 5-2-2-39 33.8-1-1a2.7 2.7 0 1 0-4 4l3 2.7-17.8 17.5 2.4 2.3-16.4 16.4-15.3 20.4 20.7-15 16.5-16.4 2.2 2.2 17.7-17.6 2.7 2.7a2.7 2.7 0 1 0 4-3.8l-1-1 34-38.7-2.3-2.3 5.2-5.2z"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| | | | |
| − | <svg data-name="Aachen 2014 and Denver Biolabs 2016" data-biography="Aachen’s iGEM team created the initial guide to building a spectrofluorometer including a useful component list. Denver Biolabs shared their improved designs for the spectrofluorometer housing and cuvette holders. This was used as part of creating our [[Team:CLSB-UK/Hardware|hardware]]. They both also helped us troubleshoot our [[Team:CLSB-UK/Hardware|first device]] via email." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | Click on the icons below to learn about attributions. |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#ffc107" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <g fill="none" stroke="#fff" stroke-linecap="round">
| + | |
| − | <rect width="59.9" height="59.9" x="50.6" y="187.1" stroke-width="14.9" ry="0" stroke-linejoin="round" paint-order="stroke fill markers"/>
| + | |
| − | <path stroke-width="5.9" d="M33.2 196h11.2m-10.8 14h11.2m-11.2 14h11.2M33 238h11.2m71.2-42h11.2m-10.8 14H127m-11.2 14H127m-11.8 14h11.2M101 170.2v11.2m-14-10.8v11.2m-14-11.2v11.2M59 170v11.2m42 71.2v11.2m-14-10.8V264m-14-11.2V264m-14-11.8v11.2"/>
| + | |
| − | </g>
| + | |
| − | </g>
| + | |
| − | </svg><br>
| + | |
| | | | |
| − | <svg data-name="Alleyn's School" data-biography="Alleyn’s kindly laser-cut the casing and 3D printed the cuvette holders we needed to build our [[Team:CLSB-UK/Hardware|hardware]]." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | {{CLSB-UK Attributions}} |
| − | <g transform="translate(0 -137)">
| + | |
| − | <rect width="160" height="160" y="137" fill="#f44336" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="5" d="M104.3 122l-25 92.8"/>
| + | |
| − | <circle cx="132.8" cy="186.8" r="12.1" fill="none" stroke="#fff" stroke-width="2.3" transform="rotate(15)" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.8" d="M76.7 226.7L70 252.3m-1-31l-22.8 13M68.4 212L43 205m71-8l-23 13m26 14.8L91.7 218"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.3" d="M71.4 215h-19m18.6 2.2L53 222m53.6-13.4l-18.2 5m18.6 2H88m-14.7 5.8L60 234.8m15-12l-9.5 16.4m28-47l-9.3 16.4m15-12L86 210"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.8" d="M58.7 182L72 204.7"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.3" d="M59 196l13.5 13.3m-17.2-7.6l16.4 9.5m7-23v19M71.4 189l5 18.3"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.8" d="M100 249l-13.3-23"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.3" d="M99.6 235l-13.4-13.3m17.2 7.5L87 219.8m-7 23v-19m7.2 18.2l-5-18.4"/>
| + | |
| − | <circle cx="132.8" cy="186.8" r="9.7" fill="#fff" transform="rotate(15)" paint-order="stroke fill markers"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| | | | |
| − | <svg data-name="Professor Laurence Lovat and Sujal Desai" data-biography="Professor Laurence Lovat and Sujal Desai helped us design and distribute our questionnaire." xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
| + | {{CLSB-UK Content End}} |
| − | <g transform="translate(0 -137)">
| + | {{CLSB-UK Footer}} |
| − | <rect width="160" height="160" y="137" fill="#009688" ry="0" paint-order="stroke fill markers"/>
| + | |
| − | <rect width="63.4" height="98.8" x="42.8" y="167.6" fill="none" stroke="#fff" stroke-width="1.2" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill markers"/>
| + | |
| − | <path fill="#fff" stroke="#fff" stroke-width=".9" d="M112.3 266.2v-86.4l2.6-11 2.2 11v86.4z" stroke-linejoin="round"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="3.9" d="M48.5 177.3H94"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.5" d="M48.5 210.3H94m-45.5 4H94m-45.5 4.2H94m-45.5 4H94m-45.5 4.2H94"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="23.2" d="M48.5 193.7H94"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="3.9" d="M48.5 238.6H94"/>
| + | |
| − | <path fill="none" stroke="#fff" stroke-width="1.5" d="M51.4 244.7H94m-42.6 4H94m-45.5-4H50m-1.5 4H50"/>
| + | |
| − | </g>
| + | |
| − | </svg>
| + | |
| − | </div>
| + | |
| − | <div id="hideyspace" style="display: none">
| + | |
| − | <div id="teammembers_triangle"></div>
| + | |
| − | <div id="teammembers_card">
| + | |
| − | <h3 id="teammembers_name"></h3>
| + | |
| − | <p id="teammembers_biography"></p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <script type="text/javascript">
| + | |
| − | document.querySelectorAll('#teammembers svg').forEach(function(image) {
| + | |
| − | // Set onclick listeners
| + | |
| − | image.addEventListener('click', displayBiography);
| + | |
| − | });
| + | |
| − | | + | |
| − | // Arrow key navigation
| + | |
| − | // Stupid number of ifs as iGEM wiki won't take ampersands
| + | |
| − | function checkKey(e) {
| + | |
| − | var e = e || window.event;
| + | |
| − | if (e.keyCode == 37) {
| + | |
| − | if (svg) {
| + | |
| − | // Left
| + | |
| − | if (svg.previousElementSibling.previousElementSibling) {
| + | |
| − | if(svg.previousElementSibling.previousElementSibling.tagName == "svg") {
| + | |
| − | displayBiography({target: svg.previousElementSibling.previousElementSibling})
| + | |
| − | } else if(svg.previousElementSibling.previousElementSibling.previousElementSibling.tagName == "svg") {
| + | |
| − | svg.previousElementSibling.previousElementSibling.previousElementSibling.click();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | } else if (e.keyCode == 39) {
| + | |
| − | // Right
| + | |
| − | if (!svg) {
| + | |
| − | displayBiography({target: document.getElementById('teammembers').children[0]});
| + | |
| − | } else if (svg.nextElementSibling.tagName == "svg") {
| + | |
| − | displayBiography({target: svg.nextElementSibling});
| + | |
| − | } else if (svg.nextElementSibling.nextElementSibling) {
| + | |
| − | if(svg.nextElementSibling.nextElementSibling.tagName == "svg") {
| + | |
| − | displayBiography({target: svg.nextElementSibling.nextElementSibling});
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | document.onkeydown = checkKey;
| + | |
| − | | + | |
| − | var svg;
| + | |
| − | | + | |
| − | function displayBiography(e) {
| + | |
| − | if (svg) {
| + | |
| − | svg.classList.remove('teammembers_selected');
| + | |
| − | }
| + | |
| − |
| + | |
| − | svg = e.target.ownerSVGElement || e.target;
| + | |
| − | document.getElementById('teammembers_name').innerHTML = svg.getAttribute('data-name');
| + | |
| − | document.getElementById('teammembers_biography').innerHTML = svg.getAttribute('data-biography');
| + | |
| − | | + | |
| − | hideyspace.insertBefore(document.getElementById('teammembers_card'), null);
| + | |
| − | hideyspace.insertBefore(document.getElementById('teammembers_triangle'), null);
| + | |
| − | | + | |
| − | if (window.innerWidth < 768) {
| + | |
| − | // Mobile
| + | |
| − | svg.parentNode.insertBefore(document.getElementById('teammembers_card'), svg.nextSibling);
| + | |
| − | } else {
| + | |
| − | index = 6*Math.ceil((1 + Array.prototype.indexOf.call(svg.parentNode.children, svg)) / 6);
| + | |
| − | svg.parentNode.insertBefore(document.getElementById('teammembers_card'), svg.parentNode.children[index]);
| + | |
| − | svg.parentNode.insertBefore(document.getElementById('teammembers_triangle'), svg);
| + | |
| − | }
| + | |
| − | | + | |
| − | svg.classList.add('teammembers_selected');
| + | |
| − | }
| + | |
| − | </script>
| + | |
| − | </html>
| + | |
Attributions
The lab work, wiki design and development, poster design and any images or diagrams were done by team members except where otherwise attributed.
If this page doesn't seem to work as intended, we recommend you upgrade to Google Chrome or Mozilla Firefox. However, you can view a plain version of the attributions page here.
Click on the icons below to learn about attributions.
