|
|
| (31 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{:Team:Imperial_College/Templates/NavBar}}
| |
| | | | |
| − |
| |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| − |
| |
| − | #expt1, #expt2, #expt3, #expt4, #expt5, #expt6 #expt7 {
| |
| − | width:100%;
| |
| − | height:5px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .contents ul{
| |
| − | width:40%;
| |
| − | margin-top:5%;
| |
| − | float:left;
| |
| − | box-sizing: border-box;
| |
| − | margin-left:6.666%;
| |
| − | list-style-type: none;
| |
| − | background:none;
| |
| − | }
| |
| − |
| |
| − | .contents ul li{
| |
| − | width: 100%;
| |
| − | margin-bottom:5%;
| |
| − | cursor: pointer;
| |
| − | border-radius:20px;
| |
| − | background:none;
| |
| − | transition: border 0.3s ease;
| |
| − | box-sizing:border-box;
| |
| − | }
| |
| − |
| |
| − | .contents ul li a{
| |
| − | padding-top: 5px;
| |
| − | padding-bottom: 0px;
| |
| − | margin-top: 10px;
| |
| − | margin-left: 0px;
| |
| − | text-decoration: none;
| |
| − | font-size: 30px;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color: #374785;
| |
| − | border:none;
| |
| − | background:none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .contents ul li a:hover{
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .allButton {
| |
| − | font-size: 30px;
| |
| − | color: #374785;
| |
| − | font-family: "Varela Round", sans-serif;
| |
| − | font-weight:normal;
| |
| − | background-color:none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .open{
| |
| − | float:right;
| |
| − | width:auto;
| |
| − | box-sizing: border-box;
| |
| − | margin-top:20px;
| |
| − | margin-right:10%;
| |
| − | font-size:30px;
| |
| − | font-family:"Varela Round", sans-serif;
| |
| − | color:#374785;
| |
| − | }
| |
| − |
| |
| − | .expandButton:hover {
| |
| − | cursor:pointer;
| |
| − | background-color:red;
| |
| − | color:#F76C6C;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .accordion {
| |
| − | float: left;
| |
| − | padding-top: 5px;
| |
| − | margin-bottom:5px;
| |
| − | margin-left:10%;
| |
| − | cursor: pointer;
| |
| − | text-align:left;
| |
| − | margin-left:20%;
| |
| − | border:none;
| |
| − | transition: border-bottom 0.1s linear;
| |
| − | font-size: 25px;
| |
| − | font-weight:bold;
| |
| − | line-height: 50px;
| |
| − | font-family:"Varela Round", sans-serif;
| |
| − | color:#374785;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .accordion:hover {
| |
| − | border-bottom: solid #F8E9A1 3px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .description {
| |
| − | margin-bottom:5px;
| |
| − | width: 70%;
| |
| − | margin-left:23%;
| |
| − | float:left;
| |
| − | border:none;
| |
| − | max-height: auto;
| |
| − | }
| |
| − |
| |
| − | .colorChange{
| |
| − | transition: color 0.5s ease;
| |
| − | }
| |
| − |
| |
| − | .slowRotate{
| |
| − | transition: transform 0.3s linear;
| |
| − | }
| |
| − |
| |
| − | .highlight{
| |
| − | color:#374785;
| |
| − | font-weight:bold;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | .figure{
| |
| − | width: 30%;
| |
| − | margin-top:5px;
| |
| − | margin-left:35%;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <div class="container">
| |
| − | <div class="content">
| |
| − |
| |
| − | <div class="titleimg">
| |
| − | <h1>Results</h1>
| |
| − | <br/>
| |
| − | <br/>
| |
| − | <img src="" alt="" width="28%"; >
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <h3>Building Constructs</h3>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--Start Experiment 1-->
| |
| − | <div id="expt1"></div>
| |
| − | <h4 > 1-State Construct Assembly</h4>
| |
| − | <div onclick="openAll('expt1p');" class="expandButton">
| |
| − | <p class="open expt1p colorChange" style="font-size:25px;padding-top:2%;"><i class="fas fa-arrow-circle-down expt1p slowRotate"></i>Access All</p>
| |
| − | <div class="open" style="margin-right:5px;">
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="clr"></div>
| |
| − |
| |
| − | <div type="button" class="accordion"> Description </div>
| |
| − | <div class="description">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div type="button" class="accordion">Relevance</div>
| |
| − | <div class="panel expt1p">
| |
| − | <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div type="button" class="accordion">Brief Method</div>
| |
| − | <div class="panel expt1p">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
| |
| − | Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div type="button" class="accordion" >Summary</div>
| |
| − | <div class="panel expt1p">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − | <div class="clr"></div>
| |
| − | <!--End Experiment-->
| |
| − | </experiment>
| |
| − |
| |
| − |
| |
| − | <!--Start Experiment 2-->
| |
| − | <div id="expt2"></div>
| |
| − | <h4> In-solution Electrode Testing</h4>
| |
| − | <div onclick="openAll('expt2p');" class="expandButton">
| |
| − | <p class="open expt2p colorChange" style="font-size:25px;padding-top:1px;" >Access All</p>
| |
| − | <div class="open" style="margin-right:5px;">
| |
| − | <i class="fas fa-arrow-circle-down expt2p slowRotate"></i>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="clr"></div>
| |
| − |
| |
| − | <div type="button" class="accordion"> Description </div>
| |
| − | <div class="description">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div type="button" class="accordion">Relevance</div>
| |
| − | <div class="panel expt2p">
| |
| − | <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div type="button" class="accordion">Brief Method</div>
| |
| − | <div class="panel expt2p">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.
| |
| − | Lorem ipsum dolor, sit amet consectetur adipisicing elit. <a href="#" class="highlight">Competant cell protocol</a> Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | <p>Lorem ipsum dolor, sit amet <a href="#" class="highlight">Heatshock protocol</a> consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − |
| |
| − | <div type="button" class="accordion" >Summary</div>
| |
| − | <div class="panel expt2p">
| |
| − | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dolore, tenetur expedita in architecto, repellat rerum minima cumque exercitationem debitis laborum fugit aliquam quo molestiae. Alias eius nostrum aspernatur quaerat.</p>
| |
| − | </div>
| |
| − | <div class="clr"></div>
| |
| − | <!--End Experiment-->
| |
| − |
| |
| − | <script>
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var i;
| |
| − | console.log(acc)
| |
| − | for (i = 0; i < acc.length ; i++) {
| |
| − | acc[i].addEventListener("click", function() {
| |
| − | this.classList.toggle("active");
| |
| − | var panell = this.nextElementSibling;
| |
| − | if (panell.style.maxHeight) {
| |
| − | panell.style.maxHeight = null;
| |
| − | } else {
| |
| − | panell.style.maxHeight = (panell.scrollHeight + "px");
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | function openAll(expt) {
| |
| − | console.log("click active")
| |
| − | var i, panelList;
| |
| − | panelList = document.getElementsByClassName(expt);
| |
| − | console.log(panelList)
| |
| − |
| |
| − |
| |
| − | for (i = 2; i < panelList.length; i++) {
| |
| − | if (panelList[i].style.maxHeight == 0) {
| |
| − | console.log(panelList[i].style.maxHeight)
| |
| − | panelList[i].style.maxHeight = panelList[i].scrollHeight + "px"
| |
| − | console.log("open")
| |
| − | panelList[0].style.color = "#F76C6C";
| |
| − | panelList[1].style.color = "#F76C6C";
| |
| − | panelList[1].style.transform = "rotate(180deg)"
| |
| − |
| |
| − | } else {
| |
| − | console.log(panelList[i].style.maxHeight)
| |
| − | panelList[i].style.maxHeight = null ;
| |
| − | console.log("close");
| |
| − | panelList[0].style.color = "#374785";
| |
| − | panelList[1].style.color = "#374785";
| |
| − | panelList[1].style.transform = "rotate(0deg)";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − |
| |
| − |
| |
| − | {{:Team:Imperial_College/Templates/Footer}}
| |
