|
|
| (18 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | {{CLSB-UK}} | | {{CLSB-UK}} |
| − | {{CLSB-UK_Header}} | + | {{CLSB-UK Header}} |
| − | <html>
| + | {{CLSB-UK Content Start}} |
| − | <style>
| + | |
| − | #attribution {
| + | |
| − | text-align: center;
| + | |
| − | padding-bottom: 20px;
| + | |
| − | }
| + | |
| − | #attribution img {
| + | |
| − | border-radius: 50%;
| + | |
| − | vertical-align: middle;
| + | |
| − | width: 200px;
| + | |
| − | height: 200px;
| + | |
| − | margin: 10px 15px;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | #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;
| + | |
| − | margin: 5px 10px;
| + | |
| − | }
| + | |
| − | @keyframes bob {
| + | |
| − | 0% {
| + | |
| − | top: 0;
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | top: 20px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media (max-width: 768px) {
| + | |
| − | /* Yes the !importants are horrible, sorry :( */
| + | |
| − | #attribution img {
| + | |
| − | animation: none !important;
| + | |
| − | width: 100px !important;
| + | |
| − | height: 100px !important;
| + | |
| − | margin: 4px !important;
| + | |
| − | }
| + | |
| − | #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);
| + | = Attributions = |
| − | });
| + | |
| | | | |
| − | let currentSelected;
| + | The lab work, wiki design and development, poster design and any images or diagrams were done by team members except where otherwise attributed. |
| | | | |
| − | function displayBiography(e) {
| + | 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]]. |
| − | 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>
| + | Click on the icons below to learn about attributions. |
| − | {{CLSB-UK_Footer}} | + | |
| | + | {{CLSB-UK Attributions}} |
| | + | |
| | + | {{CLSB-UK Content End}} |
| | + | {{CLSB-UK Footer}} |
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.
