Difference between revisions of "Team:CLSB-UK/Attributions"
(Prototype team page) |
|||
| Line 1: | Line 1: | ||
{{CLSB-UK}} | {{CLSB-UK}} | ||
| + | {{CLSB-UK_Header}} | ||
<html> | <html> | ||
| + | <style> | ||
| + | #attribution { | ||
| + | text-align: center; | ||
| + | padding-bottom: 20px; | ||
| + | } | ||
| + | #attribution img { | ||
| + | border-radius: 50%; | ||
| + | vertical-align: middle; | ||
| + | width: 200px; | ||
| + | height: 200px; | ||
| + | margin: 5px 10px; | ||
| + | padding: 2px; | ||
| + | border: 3px solid transparent; | ||
| + | transition: border 0.75s; | ||
| + | cursor: pointer; | ||
| + | user-drag: none; | ||
| + | -webkit-user-drag: none; | ||
| + | user-select: none; | ||
| + | position: relative; | ||
| + | object-fit: cover; | ||
| + | } | ||
| + | #attribution:hover img { | ||
| + | border: 3px solid #bbb; | ||
| + | animation-play-state: paused !important; | ||
| + | } | ||
| + | #attribution img:hover { | ||
| + | border: 3px solid #1976d2; | ||
| + | } | ||
| + | #attribution img.attribution_selected { | ||
| + | border: 8px solid #1976d2; | ||
| + | } | ||
| + | @keyframes bob { | ||
| + | 0% { | ||
| + | top: 0; | ||
| + | } | ||
| + | 100% { | ||
| + | top: 20px; | ||
| + | } | ||
| + | } | ||
| + | @media (max-width: 768px) { | ||
| + | #attribution img { | ||
| + | animation: none !important; | ||
| + | width: 100px !important; | ||
| + | height: 100px !important; | ||
| + | margin: 4px; | ||
| + | } | ||
| + | #attribution img.attribution_selected { | ||
| + | border: 3px solid #1976d2; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | <div class="content_wrapper"> | ||
| + | <!-- TODO: Put in images + biographies --> | ||
| + | <h1>Attributions</h1> | ||
| + | <h3 id="attribution_name">Click on someone to view how they helped us</h3> | ||
| + | <p id="attribution_biography"></p> | ||
| + | <div id="attribution"> | ||
| + | <img src="https://www.imperial.ac.uk/ImageCropToolT4/imageTool/uploaded-images/ouldridge--tojpeg_1477991756284_x1.jpg" alt="Dr Thomas Ouldrige" data-name="Dr Thomas Ouldrige" data-biography="We met with Dr Ouldridge twice, both times at Imperial where he helped us out with modelling. The <a href="http://imperialchemthermo.blogspot.co.uk/2017/04/working-with-city-of-london-school-on.html">first meeting</a> we discussed the basics of modelling toehold switches, and how to get started using MATLAB for biological modelling. The second meeting we talked about removing unneeded complexity, making the model easier to understand and to narrow it down to have just 4 main parameters which we could then try changing around to see how it would affect the GFP output. Without him <a href="https://2017.igem.org/Team:CLSB-UK/Model">our models</a> would not have been nearly as accurate and useful to the wetlab team." | ||
| + | /> | ||
| + | <img src="http://lorempixel.com/200/200/business/2" alt="Firstname Lastname" data-name="Firstname Lastname" data-biography="Example biography. How they helped us goes here." /> | ||
| + | <img src="http://lorempixel.com/200/200/business/3" alt="Firstname Lastname" data-name="Firstname Lastname" data-biography="Example biography. How they helped us goes here." /> | ||
| + | <img src="http://lorempixel.com/200/200/business/4" alt="Firstname Lastname" data-name="Firstname Lastname" data-biography="Example biography. How they helped us goes here." /> | ||
| + | </div> | ||
| + | </div> | ||
| + | <script type="text/javascript"> | ||
| + | document.querySelectorAll('#attribution img').forEach(function(image) { | ||
| + | // Random width between 125 and 200 px; | ||
| + | let width = Math.floor(Math.random() * 76 + 125); | ||
| + | image.style.width = width + 'px'; | ||
| + | image.style.height = width + 'px'; | ||
| + | image.style.animation = (Math.random().toFixed(2) * 0.25 + 1.25) + 's -' + Math.random() + 's bob ease-in-out alternate infinite'; | ||
| + | image.addEventListener('click', displayBiography); | ||
| + | }); | ||
| + | let currentSelected; | ||
| + | function displayBiography(e) { | ||
| + | if (currentSelected) { | ||
| + | currentSelected.classList.remove('attribution_selected'); | ||
| + | } | ||
| + | currentSelected = e.target; | ||
| + | document.getElementById('attribution_name').innerHTML = currentSelected.getAttribute('data-name'); | ||
| + | document.getElementById('attribution_biography').innerHTML = currentSelected.getAttribute('data-biography'); | ||
| + | /* | ||
| + | if (typeof document.getElementById('attribution_name').scrollIntoViewIfNeeded === "function") { | ||
| + | document.getElementById('attribution_name').scrollIntoViewIfNeeded(); | ||
| + | } else { | ||
| + | document.getElementById('attribution_name').scrollIntoView(); | ||
| + | } | ||
| + | */ | ||
| + | currentSelected.classList.add('attribution_selected'); | ||
| + | } | ||
| + | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
| + | {{CLSB-UK_Footer}} | ||
Revision as of 16:48, 26 July 2017
Attributions
Click on someone to view how they helped us
