Weronika77 (Talk | contribs) |
|||
Line 3: | Line 3: | ||
{{:Team:TUDelft/Header}} | {{:Team:TUDelft/Header}} | ||
{{:Team:TUDelft/Banner}} | {{:Team:TUDelft/Banner}} | ||
− | |||
<html> | <html> | ||
− | <body> | + | |
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | |||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content */ | ||
+ | .modal-content { | ||
+ | background-color: #fefefe; | ||
+ | margin: auto; | ||
+ | padding: 20px; | ||
+ | border: 1px solid #888; | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | color: #aaaaaa; | ||
+ | float: right; | ||
+ | font-size: 28px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #000; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .notebook { | ||
+ | border-collapse: collapse; | ||
+ | width:100%;} | ||
+ | .notebook td:hover {background-color: #ddd;} | ||
+ | .notebook td, .notebook th { | ||
+ | border: 1px solid #ddd; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | .block { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | border: none; | ||
+ | background-color: rgba(0, 166, 214, 1); | ||
+ | padding: 14px 28px; | ||
+ | font-size: 16px; | ||
+ | cursor: pointer; | ||
+ | text-align: center; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .block:hover { | ||
+ | background-color: rgba(0, 166, 214, 0.78); | ||
+ | color: black; | ||
+ | } | ||
+ | .month { | ||
+ | text-align: center; | ||
+ | } | ||
+ | #category { | ||
+ | padding:8px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
<div class="Banner container-fluid text-center mb-0 align-items-center "> | <div class="Banner container-fluid text-center mb-0 align-items-center "> | ||
Line 14: | Line 90: | ||
<br> | <br> | ||
<img src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--Notebook_logo.png" alt="Design" style="width:60%";> | <img src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--Notebook_logo.png" alt="Design" style="width:60%";> | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <h2>Experiment Notebook</h2> | ||
+ | <table id="tabletu" class="notebook"> | ||
+ | <tr id="category"> | ||
+ | <th ></th> | ||
+ | <th id="category">Orthogonal Replication</th> | ||
+ | <th>Controlable Expression</th> | ||
+ | <th>Other</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td rowspan=2 class="month">April</td> | ||
+ | <td><!-- Trigger/Open The Modal --> | ||
+ | <button id="myBtn" class="block">Open Modal</button> | ||
+ | |||
+ | <!-- The Modal --> | ||
+ | <div id="myModal" class="modal"> | ||
+ | |||
+ | <!-- Modal content --> | ||
+ | <div class="modal-content"> | ||
+ | <span class="close">×</span> | ||
+ | <p>Some text in the Modal..</p> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </td> | ||
+ | <td><button id="myBtn" class="block">Open Modal</button></td> | ||
+ | <td>Germany</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | |||
+ | <td>Berglunds snabbköp</td> | ||
+ | <td>Christina Berglund</td> | ||
+ | <td>Sweden</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Centro comercial Moctezuma</td> | ||
+ | <td>Francisco Chang</td> | ||
+ | <td>Mexico</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Ernst Handel</td> | ||
+ | <td>Roland Mendel</td> | ||
+ | <td>Austria</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Island Trading</td> | ||
+ | <td>Helen Bennett</td> | ||
+ | <td>UK</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Königlich Essen</td> | ||
+ | <td>Philip Cramer</td> | ||
+ | <td>Germany</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Laughing Bacchus Winecellars</td> | ||
+ | <td>Yoshi Tannamuri</td> | ||
+ | <td>Canada</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Magazzini Alimentari Riuniti</td> | ||
+ | <td>Giovanni Rovelli</td> | ||
+ | <td>Italy</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>North/South</td> | ||
+ | <td>Simon Crowther</td> | ||
+ | <td>UK</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td></td> | ||
+ | <td>Paris spécialités</td> | ||
+ | <td>Marie Bertrand</td> | ||
+ | <td>France</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | // Get the modal | ||
+ | var modal = document.getElementById("myModal"); | ||
+ | |||
+ | // Get the button that opens the modal | ||
+ | var btn = document.getElementById("myBtn"); | ||
+ | |||
+ | // Get the <span> element that closes the modal | ||
+ | var span = document.getElementsByClassName("close")[0]; | ||
+ | |||
+ | // When the user clicks the button, open the modal | ||
+ | btn.onclick = function() { | ||
+ | modal.style.display = "block"; | ||
+ | } | ||
+ | |||
+ | // When the user clicks on <span> (x), close the modal | ||
+ | span.onclick = function() { | ||
+ | modal.style.display = "none"; | ||
+ | } | ||
+ | |||
+ | // When the user clicks anywhere outside of the modal, close it | ||
+ | window.onclick = function(event) { | ||
+ | if (event.target == modal) { | ||
+ | modal.style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
− | </body> | + | </body> |
</html> | </html> | ||
{{:Team:TUDelft/Footer}} | {{:Team:TUDelft/Footer}} |
Revision as of 19:15, 19 September 2019
![Design](https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--Notebook_logo.png)
Experiment Notebook
Orthogonal Replication | Controlable Expression | Other | |
---|---|---|---|
April |
|
Germany | |
Berglunds snabbköp | Christina Berglund | Sweden | |
Centro comercial Moctezuma | Francisco Chang | Mexico | |
Ernst Handel | Roland Mendel | Austria | |
Island Trading | Helen Bennett | UK | |
Königlich Essen | Philip Cramer | Germany | |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada | |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy | |
North/South | Simon Crowther | UK | |
Paris spécialités | Marie Bertrand | France |