Line 1: | Line 1: | ||
{{Humboldt_Berlin}} | {{Humboldt_Berlin}} | ||
<html> | <html> | ||
− | |||
<div class="has-animations"> | <div class="has-animations"> | ||
Line 86: | Line 85: | ||
</div> | </div> | ||
</nav> | </nav> | ||
− | |||
<div class="fixed-header-container"> | <div class="fixed-header-container"> | ||
Line 107: | Line 105: | ||
</div> | </div> | ||
<div class="category" data-category="chlamy"> | <div class="category" data-category="chlamy"> | ||
− | <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png" alt="c. reinhardtii cultivation and transformations"/> | + | <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png" alt="c. reinhardtii cultivation and transformations" /> |
</div> | </div> | ||
<div class="category" data-category="bioreaktor"> | <div class="category" data-category="bioreaktor"> | ||
Line 114: | Line 112: | ||
</div> | </div> | ||
<div class="timeline"> | <div class="timeline"> | ||
− | <div class="timeline-month tl-first-element" | + | <div class="timeline-month tl-first-element" data-text="- Learning MoClo/Golden Gate Design <br> |
− | + | ||
- Research on PETase degradation <br> | - Research on PETase degradation <br> | ||
- Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br> | - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br> | ||
− | - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)." | + | - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)." data-date="10/08 - 10/14" data-category="synthesis"> |
− | + | ||
− | + | ||
October <br> 2018 | October <br> 2018 | ||
</div> | </div> | ||
− | <div class="timeline-dot" | + | <div class="timeline-dot" data-text="- Research on C. reinhardtii cultivation <br> |
− | + | ||
<h2>YFP</h2> | <h2>YFP</h2> | ||
− | - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" | + | - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" data-date="10/15 - 10/21" data-category="synthesis"> |
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class="timeline-dot" | + | <div class="timeline-dot" data-text="- Searching for gene templates <br> |
− | + | ||
<h2>chemical competent DH10B</h2> | <h2>chemical competent DH10B</h2> | ||
- production of chemical competent E. coli DH10B cells <br> | - production of chemical competent E. coli DH10B cells <br> | ||
− | - PCR for YFP B5-B5 with primer 7+8" | + | - PCR for YFP B5-B5 with primer 7+8" data-category="synthesis" data-date="10/22 - 10/28"> |
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class="timeline-month" | + | <div class="timeline-month" data-text="<h2>chemical competent DH10B</h2> |
− | + | ||
- checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control) | - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control) | ||
<h2>ARS</h2> | <h2>ARS</h2> | ||
- Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part | - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part | ||
<h2>GLE</h2> | <h2>GLE</h2> | ||
− | - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" | + | - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" data-date="10/29 - 11/04" data-category="synthesis" data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png"> |
− | + | ||
− | + | ||
− | + | ||
November | November | ||
</div> | </div> | ||
− | <div class="timeline-dot" | + | <div class="timeline-dot" data-text="- YOYOOY <br> |
− | + | ||
<h2>YFP</h2> | <h2>YFP</h2> | ||
− | - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" | + | - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)" data-date="10/15 - 10/21" data-category="human-practice"> |
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class="timeline-dot" | + | <div class="timeline-dot" data-text="- Searching for gene templates <br> |
− | + | ||
<h2>chemical competent DH10B</h2> | <h2>chemical competent DH10B</h2> | ||
- production of chemical competent E. coli DH10B cells <br> | - production of chemical competent E. coli DH10B cells <br> | ||
− | - PCR for YFP B5-B5 with primer 7+8" | + | - PCR for YFP B5-B5 with primer 7+8" data-category="human-practice" data-date="10/22 - 10/28"> |
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class="timeline-month" | + | <div class="timeline-month" data-text="<h2>chemical competent DH10B</h2> |
− | + | ||
- checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control) | - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control) | ||
<h2>ARS</h2> | <h2>ARS</h2> | ||
- Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part | - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part | ||
<h2>GLE</h2> | <h2>GLE</h2> | ||
− | - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" | + | - Design of Gametolysin (GLE) secretion signal as a B2-B2 part" data-date="10/29 - 11/04" data-category="human-practice" data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png"> |
− | + | ||
− | + | ||
− | + | ||
November | November | ||
</div> | </div> | ||
Line 182: | Line 157: | ||
<div> | <div> | ||
<h3 class="infobox-date"></h3> | <h3 class="infobox-date"></h3> | ||
− | <img src="" alt="" class="infobox-image no-image"/> | + | <img src="" alt="" class="infobox-image no-image" /> |
</div> | </div> | ||
<p class="infobox-text"></p> | <p class="infobox-text"></p> | ||
Line 188: | Line 163: | ||
</section> | </section> | ||
</div> | </div> | ||
− | + | </main> | |
− | <div class="footer-container"> | + | <div class="footer-container"> |
− | + | <footer class="width-limit"> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> | |
− | + | <div class="footer-right"> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin"> | |
Home | Home | ||
</a> | </a> | ||
− | + | </li> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin/Team"> | |
Team | Team | ||
</a> | </a> | ||
− | + | </li> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin/Description"> | |
Project | Project | ||
</a> | </a> | ||
− | + | </li> | |
− | + | </ul> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin/Parts"> | |
Parts | Parts | ||
</a> | </a> | ||
− | + | </li> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin/Safety"> | |
Safety | Safety | ||
</a> | </a> | ||
− | + | </li> | |
− | + | <li> | |
− | + | <a href="/Team:Humboldt_Berlin/Human_Practices"> | |
Human Practices | Human Practices | ||
</a> | </a> | ||
− | + | </li> | |
− | + | <li> | |
− | + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> | |
For Judges | For Judges | ||
</a> | </a> | ||
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | </footer> | |
+ | </div> | ||
</div> | </div> | ||
− | <script> | + | <script> |
− | + | var elementOffset = 160; | |
− | + | var container = document.querySelector('.notebook'); | |
− | + | var infobox = document.querySelector('.infobox'); | |
− | + | var infoboxText = document.querySelector('.infobox-text'); | |
− | + | var infoboxDate = document.querySelector('.infobox-date'); | |
− | + | var infoboxImage = document.querySelector('.infobox-image'); | |
− | + | var firstElement = document.querySelectorAll('.timeline > div')[0] | |
− | + | var categoryFilter = document.querySelectorAll('.category'); | |
− | + | ||
− | + | infoboxText.innerHTML = firstElement.getAttribute('data-text'); | |
− | + | infoboxDate.innerHTML = firstElement.getAttribute('data-date'); | |
− | + | ||
− | + | setFilter('synthesis'); | |
− | + | ||
− | + | [].forEach.call(categoryFilter, function(el) { | |
− | + | el.addEventListener('click', function() { | |
− | + | setFilter(el.getAttribute('data-category')); | |
+ | }); | ||
+ | }) | ||
+ | |||
+ | window.addEventListener("scroll", function () { | ||
+ | updateTimeline(); | ||
+ | setFixedElements(); | ||
}); | }); | ||
− | + | ||
− | + | function setFixedElements() { | |
− | + | if (window.pageYOffset >= (window.innerHeight + 100)) { | |
− | + | infobox.classList.add('fixed') | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} else { | } else { | ||
− | + | infobox.classList.remove('fixed') | |
} | } | ||
− | } | + | } |
− | updateTimeline() | + | |
− | + | function setFilter(filter) { | |
− | + | const elements = document.querySelectorAll('.timeline > div'); | |
− | + | container.classList.remove('bioreaktor-color'); | |
− | + | container.classList.remove('chlamy-color'); | |
− | + | container.classList.remove('human-practice-color'); | |
− | + | container.classList.remove('synthesis-color'); | |
− | + | container.classList.add(filter + '-color'); | |
− | + | ||
− | + | [].forEach.call(elements, function(el) { | |
+ | if (el.getAttribute('data-category') === filter) { | ||
+ | el.classList.add('visible') | ||
+ | } else { | ||
+ | el.classList.remove('visible') | ||
+ | } | ||
+ | }) | ||
+ | updateTimeline() | ||
+ | } | ||
+ | |||
+ | function updateTimeline() { | ||
+ | const elements = document.querySelectorAll('.timeline > div'); | ||
+ | |||
+ | [].forEach.call(elements, function(el) { | ||
+ | if (isElementActive(el)) { | ||
+ | if (el.classList.contains('visible')) { | ||
+ | el.classList.add('active-timeline-el') | ||
+ | } else { | ||
+ | el.classList.remove('active-timeline-el') | ||
+ | } | ||
} else { | } else { | ||
el.classList.remove('active-timeline-el') | el.classList.remove('active-timeline-el') | ||
} | } | ||
− | } | + | }); |
− | + | ||
+ | const activeElements = document.querySelectorAll('.active-timeline-el'); | ||
+ | const lastActive = activeElements[activeElements.length - 1] | ||
+ | |||
+ | if (lastActive !== undefined) { | ||
+ | infoboxText.innerHTML = lastActive.getAttribute('data-text') | ||
+ | infoboxDate.innerHTML = lastActive.getAttribute('data-date'); | ||
+ | |||
+ | const imageUrl = lastActive.getAttribute('data-image'); | ||
+ | if (imageUrl !== null) { | ||
+ | infoboxImage.classList.remove('no-image') | ||
+ | infobox.classList.add('has-image'); | ||
+ | infoboxImage.src = imageUrl; | ||
+ | } else { | ||
+ | infoboxImage.classList.add('no-image') | ||
+ | infobox.classList.remove('has-image'); | ||
+ | infoboxImage.src = ""; | ||
+ | } | ||
} | } | ||
− | } | + | } |
− | + | ||
− | + | // rename? | |
− | + | function isElementActive(el) { | |
− | + | var top = el.offsetTop - elementOffset; | |
− | + | ||
− | + | while(el.offsetParent) { | |
− | + | el = el.offsetParent; | |
− | + | top += el.offsetTop; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | return ( | ||
+ | top <= window.pageYOffset | ||
+ | ); | ||
} | } | ||
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 10:40, 12 October 2019
![notebook](https://static.igem.org/mediawiki/2019/d/dd/T--Humboldt_Berlin--notebook_stock.jpeg)
Notebook
Select category
![Synthesis: Parts and Vectors](https://static.igem.org/mediawiki/2019/6/6f/T--Humboldt_Berlin--label_notebook_synthesis.png)
![human practice](https://static.igem.org/mediawiki/2019/e/e6/T--Humboldt_Berlin--label_notebook_human_practise.png)
![c. reinhardtii cultivation and transformations](https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png)
![bioreaktor](https://static.igem.org/mediawiki/2019/6/66/T--Humboldt_Berlin--label_notebook_bioreaktor.png)
October
2018
2018
November
November