|
|
| Line 105: |
Line 105: |
| | <!------------------------------------------ HEADER END --------------------------------------------------> | | <!------------------------------------------ HEADER END --------------------------------------------------> |
| | | | |
| − | <section class="page-content fixed-header-content experiments"> | + | <section class="page-content fixed-header-content expandable"> |
| − | <div class="protocolls-header"> | + | <div class="width-limit"> |
| − | <h2 class="page-subheadline">Protocolls</h2>
| + | <div class="protocolls-header"> |
| − | <div class="protocolls-buttons"> | + | <h2 class="page-subheadline"></h2> |
| − | <div class="collapse-all"> | + | <div class="protocolls-buttons"> |
| − | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> | + | <div class="collapse-all"> |
| − | Collapse all
| + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Collapse all |
| − | </div>
| + | |
| − | <div class="expand-all">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
| + | |
| − | Expand all
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="experiments-container">
| + | |
| − | <div class="experiments-bar open">
| + | |
| − | <h3 class="lightgreen">Chlamydomonas Protocol</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Media & Plates</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | <p>
| + | |
| − | To be able to work with C. reinhardtii, you will need medium.
| + | |
| − | This medium can be in either liquid or solid form and is essential
| + | |
| − | for any experiment regarding C. reinhardtii. The media we used for
| + | |
| − | C. reinhardtii is TAP medium.
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <table>
| + | |
| − | <tr>
| + | |
| − | <th scope="col">Media</th>
| + | |
| − | <th scope="col">0,5 L</th>
| + | |
| − | <th scope="col">1,8L</th>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td><b>40 x TAP/TA/TAPi</b></td>
| + | |
| − | <td>12,5 ml</td>
| + | |
| − | <td>20 ml</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td><b>40 x Beijerink Salts</b></td>
| + | |
| − | <td>12,5 ml</td>
| + | |
| − | <td>20 ml</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td><b>Trace Elements (revised)</b></td>
| + | |
| − | <td>3,5 ml</td>
| + | |
| − | <td>5,6 ml</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td><b>H2O</b></td>
| + | |
| − | <td>471,5 ml</td>
| + | |
| − | <td>754,4 ml</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td><b>For Plates: + Agar (1,8 %)</b></td>
| + | |
| − | <td>7,2 g</td>
| + | |
| − | <td>14,4 g</td>
| + | |
| − | </tr>
| + | |
| − | </table>
| + | |
| − | <p>Tap Medium should be adjusted to 7,0 - 7,2 pH and autoclaved.</p>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| − | <div class="experiments-bar"> | + | <div class="expand-all"> |
| − | <h3>Cultivation</h3> | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Expand all |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Transformation</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Colony Screening PCR</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | | + | <div class="expandable-container"> |
| − | <div class="experiments-bar open"> | + | <div class="expandable-preview"> |
| − | <h3 class="pink">E. coli Protocols</h3>
| + | <p class="medium-sized"> |
| − | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | <div class="experiments-bar-content"> | + | </p> |
| − | <div class="experiments-bar open"> | + | <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" /> |
| − | <h3>Cultivation</h3> | + | </div> |
| − | | + | <div class=" expandable- more"> |
| − | <div class="experiments-bar-content">
| + | <div class="two-columns"> |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Media & Plates</h3>
| + | <p class="medium-sized"> |
| − | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| − | <div class=" experiments- bar-content"> | + | </p> |
| − | TODO
| + | <p class="medium-sized"> |
| − | </div>
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | </div>
| + | </p> |
| − | <div class="experiments-bar"> | + | |
| − | <h3>Overnight Cultures</h3> | + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div> | + | |
| − | </div> | + | |
| | </div> | | </div> |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | <p class="medium-sized"> |
| − | <h3>Transformation</h3>
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | | + | </p> |
| − | <div class="experiments-bar-content">
| + | <p class="medium-sized"> |
| − | TODO | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | </div>
| + | </p> |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>DNA-Isolation</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | + | </div> |
| | + | <div class="expandable-readall"> |
| | + | <span class="readmore">Read more</span> |
| | + | <span class="readless">Read less</span> |
| | + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | | + | <div class="expandable-container"> |
| − | <div class="experiments-bar open"> | + | <div class="expandable-preview"> |
| − | <h3 class="lightpurple">Synthesis Protocols</h3>
| + | <p class="medium-sized"> |
| − | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | <div class="experiments-bar-content"> | + | </p> |
| − | <div class="experiments-bar"> | + | <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" /> |
| − | <h3>Sequence & Primer Design</h3> | + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| − | <div class="experiments-bar"> | + | |
| − | <h3>PCR</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Digestion</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | |
| − | <h3>Ligation</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| − | </div>
| + | <div class=" expandable- more"> |
| − | | + | <div class="two-columns"> |
| − | <div class=" experiments- bar open"> | + | |
| − | <h3 class="greyblue">General</h3>
| + | <p class="medium-sized"> |
| − | | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| − | <div class="experiments-bar-content"> | + | </p> |
| − | <div class="experiments-bar">
| + | <p class="medium-sized"> |
| − | <h3>Gel Electrophoresis</h3>
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | | + | </p> |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO | + | |
| | </div> | | </div> |
| − | </div>
| + | |
| − | <div class="experiments-bar">
| + | <p class="medium-sized"> |
| − | <h3>Protein Expression: SDS-page</h3>
| + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| − | | + | </p> |
| − | <div class="experiments-bar-content">
| + | <p class="medium-sized"> |
| − | TODO | + | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame |
| | + | </p> |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </div>
| + | <div class=" expandable- readall"> |
| − | | + | <span class="readmore">Read more</span> |
| − | <div class=" experiments- bar open"> | + | <span class="readless">Read less</span> |
| − | <h3 class="lightblue">Workflow</h3>
| + | <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | <div class="experiments-bar"> | + | |
| − | <h3>Plasmid assembly</h3>
| + | |
| − | | + | |
| − | <div class="experiments-bar-content">
| + | |
| − | TODO
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| | </section> | | </section> |
| | + | |
| | </div> | | </div> |
| | | | |
| | + | <!------------------------------------------ FOOTER ----------------------------------------> |
| | <div class="footer-container"> | | <div class="footer-container"> |
| | <footer class="width-limit"> | | <footer class="width-limit"> |
| − | <img src="dist/images/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> | + | <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"> | | <div class="footer-right"> |
| | <ul> | | <ul> |
| | <li> | | <li> |
| − | <a href="/"> | + | <a href="/Team:Humboldt_Berlin"> |
| | Home | | Home |
| | </a> | | </a> |
| | </li> | | </li> |
| | <li> | | <li> |
| − | <a href="/team.html"> | + | <a href="/Team:Humboldt_Berlin/Team"> |
| | Team | | Team |
| | </a> | | </a> |
| | </li> | | </li> |
| | <li> | | <li> |
| − | <a href="/project.html"> | + | <a href="/Team:Humboldt_Berlin/Description"> |
| | Project | | Project |
| | </a> | | </a> |
| | </li> | | </li> |
| | + | </ul> |
| | + | <ul> |
| | <li> | | <li> |
| − | <a href="/parts.html"> | + | <a href="/Team:Humboldt_Berlin/Parts"> |
| | Parts | | Parts |
| | </a> | | </a> |
| | </li> | | </li> |
| − | </ul>
| |
| − | <ul>
| |
| | <li> | | <li> |
| − | <a href="/safety.html"> | + | <a href="/Team:Humboldt_Berlin/Safety"> |
| | Safety | | Safety |
| | </a> | | </a> |
| | </li> | | </li> |
| | <li> | | <li> |
| − | <a href="/human_practices.html"> | + | <a href="/Team:Humboldt_Berlin/Human_Practices"> |
| | Human Practices | | Human Practices |
| | </a> | | </a> |
| | </li> | | </li> |
| | <li> | | <li> |
| − | <a href="/awards.html"> | + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| − | Awards
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="/for_judges.html">
| + | |
| | For Judges | | For Judges |
| | </a> | | </a> |
| Line 360: |
Line 236: |
| | </footer> | | </footer> |
| | </div> | | </div> |
| | + | |
| | + | <!------------------------------------------ FOOTER END ----------------------------------------> |
| | | | |
| | <script> | | <script> |
| − | var dropdowns = document.querySelectorAll('.experiments-bar h3'); | + | (function () { |
| − | var experimentBars = document.querySelectorAll('.experiments-bar');
| + | document.querySelector('.no-js').classList.add('js') |
| − | // TODO queryselectorall?
| + | document.querySelector('.no-js').classList.remove('no-js') |
| − | for (var i = 0; i < dropdowns.length; i++) {
| + | }()) |
| − | dropdowns[i].addEventListener('click', function(event) { | + | |
| − | var barContainer = this.closest('.experiments-bar');
| + | window.addEventListener("scroll", function () { |
| − | if (barContainer.classList.contains('open')) {
| + | const elements = document.querySelectorAll('.is-revealing'); |
| − | barContainer.classList.remove('open');
| + | |
| − | } else {
| + | [].forEach.call(elements, function(el) { |
| − | barContainer.classList.add('open');
| + | if (isElementVisible(el)) { |
| | + | el.classList.add('is-revealing-visible') |
| | } | | } |
| | + | }); |
| | }); | | }); |
| − | }
| + | |
| − | | + | function isElementVisible(el) { |
| − | document.querySelector('.collapse-all').addEventListener('click', function() {
| + | var top = el.offsetTop; |
| − | for (var i = 0; i < experimentBars.length; i++) {
| + | var height = el.offsetHeight; |
| − | experimentBars[i].classList.remove('open');
| + | |
| − | };
| + | while(el.offsetParent) { |
| − | });
| + | el = el.offsetParent; |
| − | | + | top += el.offsetTop; |
| − | document.querySelector('.expand-all').addEventListener('click', function() {
| + | } |
| − | for (var i = 0; i < experimentBars.length; i++) {
| + | |
| − | experimentBars[i].classList.add('open');
| + | return ( |
| − | };
| + | (top + height) <= (window.pageYOffset + window.innerHeight) + 100 |
| − | });
| + | ); |
| | + | } |
| | + | |
| | + | var readMores = document.querySelectorAll('.expandable-readall'); |
| | + | var allContainers = document.querySelectorAll('.expandable-container'); |
| | + | |
| | + | for (var i = 0; i < readMores.length; i++) { |
| | + | readMores[i].addEventListener('click', function(event) { |
| | + | var container = this.closest('.expandable-container'); |
| | + | if (container.classList.contains('open')) { |
| | + | container.classList.remove('open'); |
| | + | } else { |
| | + | container.classList.add('open'); |
| | + | } |
| | + | }); |
| | + | } |
| | + | |
| | + | document.querySelector('.collapse-all').addEventListener('click', function() { |
| | + | for (var i = 0; i < allContainers.length; i++) { |
| | + | allContainers[i].classList.remove('open'); |
| | + | }; |
| | + | }); |
| | + | |
| | + | document.querySelector('.expand-all').addEventListener('click', function() { |
| | + | for (var i = 0; i < allContainers.length; i++) { |
| | + | allContainers[i].classList.add('open'); |
| | + | }; |
| | + | }); |
| | </script> | | </script> |
| | | | |
| | </html> | | </html> |
Collapse all
