Difference between revisions of "Team:TUDelft/Notebook"

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">&times;</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

Sci-Phi 29

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