Difference between revisions of "Team:HebrewU/Notebook"

 
(12 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
<!--- Own CSS --->
 
<!--- Own CSS --->
 
<link rel="stylesheet" href="https://2018.igem.org/Template:HebrewU/CSS?action=raw&ctype=text/css">
 
<link rel="stylesheet" href="https://2018.igem.org/Template:HebrewU/CSS?action=raw&ctype=text/css">
 
<!--- Jquery script - ****** remove when uploading to wiki ********** --->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
  
 
<!--- Main Menu script --->
 
<!--- Main Menu script --->
Line 55: Line 52:
 
     display: inherit;
 
     display: inherit;
 
     text-align: -webkit-match-parent;
 
     text-align: -webkit-match-parent;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
fpnt-size:20px;
 
}
 
}
  
Line 66: Line 65:
 
.cal-heatmap-container .graph
 
.cal-heatmap-container .graph
 
{
 
{
font-family: Calibri;
+
font-family:Tahoma, Geneva, sans-serif;
  
 
}
 
}
Line 83: Line 82:
 
.cal-heatmap-container .graph-rect
 
.cal-heatmap-container .graph-rect
 
{
 
{
fill: #106375
+
fill: #e6dae5;
 
}
 
}
  
Line 230: Line 229:
 
/* Page Carousel */
 
/* Page Carousel */
 
.carousel {
 
.carousel {
   height: 650px;
+
   height: 360px;
   width: 1000px;
+
   width: 640px;
 
   overflow: hidden;
 
   overflow: hidden;
 
   text-align: center;
 
   text-align: center;
Line 368: Line 367:
 
   opacity: 1;
 
   opacity: 1;
 
}
 
}
 +
 +
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__track {
 +
  -webkit-transform: translateX(-500%);
 +
          transform: translateX(-500%);
 +
}
 +
.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(6) {
 +
  transition: opacity 0.5s, -webkit-transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  opacity: 1;
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__controls:nth-of-type(6) {
 +
  display: block;
 +
  opacity: 1;
 +
}
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(6) {
 +
  opacity: 1;
 +
}
 +
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__track {
 +
  -webkit-transform: translateX(-600%);
 +
          transform: translateX(-600%);
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__slide:nth-of-type(7) {
 +
  transition: opacity 0.5s, -webkit-transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  opacity: 1;
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__controls:nth-of-type(7) {
 +
  display: block;
 +
  opacity: 1;
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(7) {
 +
  opacity: 1;
 +
}
 +
 +
 +
 
.carousel__control {
 
.carousel__control {
 
   height: 30px;
 
   height: 30px;
Line 398: Line 447:
 
.carousel__indicators {
 
.carousel__indicators {
 
   position: absolute;
 
   position: absolute;
   bottom: 20px;
+
   bottom: 80px;
 
   width: 100%;
 
   width: 100%;
 
   text-align: center;
 
   text-align: center;
Line 411: Line 460:
 
   opacity: 0.35;
 
   opacity: 0.35;
 
   margin: 0 2.5px 0 2.5px;
 
   margin: 0 2.5px 0 2.5px;
 +
 
 
}
 
}
 
.carousel__indicator:hover {
 
.carousel__indicator:hover {
Line 453: Line 503:
 
   -webkit-transform: translateX(400%);
 
   -webkit-transform: translateX(400%);
 
           transform: translateX(400%);
 
           transform: translateX(400%);
 +
}
 +
 +
.carousel__track .carousel__slide:nth-of-type(6) {
 +
  -webkit-transform: translateX(500%);
 +
          transform: translateX(500%);
 +
}
 +
 +
.carousel__track .carousel__slide:nth-of-type(7) {
 +
  -webkit-transform: translateX(600%);
 +
          transform: translateX(600%);
 
}
 
}
 
.carousel--scale .carousel__slide {
 
.carousel--scale .carousel__slide {
Line 488: Line 548:
 
.carousel__slide:nth-of-type(1),
 
.carousel__slide:nth-of-type(1),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
   background-image: url("1.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/7/77/T--hebrewu--highlights1.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
 
}
 
}
 
<img src="1.fw.png" width="1720" height="1132">
 
  
 
.carousel__slide:nth-of-type(2),
 
.carousel__slide:nth-of-type(2),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
   background-image: url("2.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/e/e3/T--hebrewu--highlights2.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 503: Line 561:
 
.carousel__slide:nth-of-type(3),
 
.carousel__slide:nth-of-type(3),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
   background-image: url("3.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--hebrewu--highlights3.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 509: Line 567:
 
.carousel__slide:nth-of-type(4),
 
.carousel__slide:nth-of-type(4),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
   background-image: url("4.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/1/17/T--hebrewu--highlights4.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 515: Line 573:
 
.carousel__slide:nth-of-type(5),
 
.carousel__slide:nth-of-type(5),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
   background-image: url("5.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/6/61/T--hebrewu--highlights5.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
 
}
 
}
 +
 +
.carousel__slide:nth-of-type(6),
 +
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(6) {
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/dc/T--hebrewu--highlights6.png");
 +
  background-size: cover;
 +
  background-position: center;
 +
}
 +
 +
.carousel__slide:nth-of-type(7),
 +
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(7) {
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/9e/T--hebrewu--highlights7.png");
 +
  background-size: cover;
 +
  background-position: center;
 +
}
 +
  
 
h1 {
 
h1 {
Line 547: Line 620:
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Description">Description</a></li>
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Description">Description</a></li>
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Model">Model</a></li>
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Model">Model</a></li>
             <li><a href="https://2018.igem.org/Team:HebrewU/Results">Results</a></li>
+
             <li><a href="https://2018.igem.org/Team:HebrewU/Demonstrate">Results</a></li>
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Parts">Parts</a></li>
 
             <li><a href="https://2018.igem.org/Team:HebrewU/Parts">Parts</a></li>
             <li><a href="https://2018.igem.org/Team:HebrewU/Motivation">Moolti</a></li>
+
             <li><a href="https://2018.igem.org/Team:HebrewU/Motivation">MOOLTi</a></li>
  
 
         </ul>         
 
         </ul>         
Line 602: Line 675:
 
             <a href="https://2018.igem.org/Team:HebrewU/Description"><button class="b_huji_small_subnav">Description</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Description"><button class="b_huji_small_subnav">Description</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Model"><button class="b_huji_small_subnav">Model</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Model"><button class="b_huji_small_subnav">Model</button></a>
             <a href="https://2018.igem.org/Team:HebrewU/Results"><button class="b_huji_small_subnav">Results</button></a>
+
             <a href="https://2018.igem.org/Team:HebrewU/Demonstrate"><button class="b_huji_small_subnav">Results</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Parts"><button class="b_huji_small_subnav">Parts</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Parts"><button class="b_huji_small_subnav">Parts</button></a>
             <a href="https://2018.igem.org/Team:HebrewU/Software"><button class="b_huji_small_subnav">Moolti</button></a>
+
             <a href="https://2018.igem.org/Team:HebrewU/Software"><button class="b_huji_small_subnav">MOOLTi</button></a>
 
         </div>
 
         </div>
  
Line 632: Line 705:
 
         <div class="huji_small_navbar_panel">
 
         <div class="huji_small_navbar_panel">
 
             <a href="https://2018.igem.org/Team:HebrewU/Members"><button class="b_huji_small_subnav">Members</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Members"><button class="b_huji_small_subnav">Members</button></a>
             <a href="https://2018.igem.org/Team:HebrewU/Attributionsn"><button class="b_huji_small_subnav">Attributions</button></a>
+
             <a href="https://2018.igem.org/Team:HebrewU/Attributions"><button class="b_huji_small_subnav">Attributions</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Collaborations"><button class="b_huji_small_subnav">Collaborations</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Collaborations"><button class="b_huji_small_subnav">Collaborations</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Photo_Gallery"><button class="b_huji_small_subnav">Photo Gallery</button></a>
 
             <a href="https://2018.igem.org/Team:HebrewU/Photo_Gallery"><button class="b_huji_small_subnav">Photo Gallery</button></a>
Line 671: Line 744:
 
     </script>
 
     </script>
  
 +
<a onClick="topFunction()" id="myBtn_up" title="Go to top"><img src="https://static.igem.org/mediawiki/2018/1/1e/T--hebrewu--arrow_up.png" width="40px" /></a>
  
 +
 +
<script>
 +
// When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
        document.getElementById("myBtn_up").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn_up").style.display = "none";
 +
    }
 +
}
 +
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
<br /><br />
 
<br /><br />
 
<!--- Page content start --->
 
<!--- Page content start --->
 
<div class="w3-blue-gray">
 
<div class="w3-blue-gray">
 
<div class="w3-center">
 
<div class="w3-center">
             <img src="https://static.igem.org/mediawiki/2018/0/06/T--hebrewU--Notebook_HL.png" width="20%">
+
             <img src="https://static.igem.org/mediawiki/2018/0/06/T--hebrewU--Notebook_HL.png" width="25%">
          <br />  
+
</div> <br /> <br />
        <br />  
+
 
</div>
+
 
 +
 
 +
 
 
   <div style="text-align:center">
 
   <div style="text-align:center">
 
   <div align="center">
 
   <div align="center">
Line 904: Line 999:
 
"1538222400":0,
 
"1538222400":0,
 
"1538308800":4,    
 
"1538308800":4,    
+
"1538395200":1,
 +
"1538481600":1,
 +
"1538568000":3,
 +
"1538654400":1,
 +
"1538740800":0,
 +
"1538827200":1,
 +
"1538913600":1,
 +
"1539000000":2,
 +
"1539086400":1,
 +
"1539172800":1,
 +
"1539259200":1,
 +
"1539345600":1,
 +
"1539432000":1,
 +
"1539518400":1,
 +
"1539604800":1,
 +
"1539691200":0,
 +
"1539777600":0,
 +
"1539864000":0,
 +
"1539950400":0,
 +
"1540036800":0,
 +
"1540123200":0,
 +
"1540209600":0,
 +
 
  },
 
  },
 
           start: new Date(2018, 2, 1),
 
           start: new Date(2018, 2, 1),
           cellSize: 18,
+
           cellSize: 16,
 
           cellPadding: 3,
 
           cellPadding: 3,
 
           domainGutter: 12,
 
           domainGutter: 12,
           range: 7,
+
           range: 8,
 
           legend: [1, 2, 3, 4],
 
           legend: [1, 2, 3, 4],
           legendColors: ["#EEE2D7", "#F17106"],
+
           legendColors: ["#e6dae5", "#ad37a0"],
 
  //subDomainTextFormat: "%d",
 
  //subDomainTextFormat: "%d",
 
           onClick: function(date, value) {
 
           onClick: function(date, value) {
Line 935: Line 1,052:
 
</div>
 
</div>
 
      
 
      
<!--
+
<br /> <br />
 +
 
 +
<div class="w3-center">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/9c/T--HebrewU--Picture14.png" width="25%">
 +
</div> 
 +
 
 +
 
 +
<div align="center">
 
<div class="carousel-container">
 
<div class="carousel-container">
  
 
   <div class="carousel my-carousel carousel--translate">
 
   <div class="carousel my-carousel carousel--translate">
     <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
+
     <input class="carousel__activator" type="radio" name="carousel" id="A" checked="checked"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="B"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="c"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="D"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="E"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="F"/>
 
     <input class="carousel__activator" type="radio" name="carousel" id="G"/>
 
     <input class="carousel__activator" type="radio" name="carousel" id="G"/>
    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
+
 
    <input class="carousel__activator" type="radio" name="carousel" id="I"/>
+
    <input class="carousel__activator" type="radio" name="carousel" id="J"/>
+
 
     <div class="carousel__controls">
 
     <div class="carousel__controls">
       <label class="carousel__control carousel__control--backward" for="J"></label>
+
       <label class="carousel__control carousel__control--backward" for="G"></label>
       <label class="carousel__control carousel__control--forward" for="G"></label>
+
       <label class="carousel__control carousel__control--forward" for="B"></label>
 
     </div>
 
     </div>
 
     <div class="carousel__controls">
 
     <div class="carousel__controls">
       <label class="carousel__control carousel__control--backward" for="F"></label>
+
       <label class="carousel__control carousel__control--backward" for="A"></label>
       <label class="carousel__control carousel__control--forward" for="H"></label>
+
       <label class="carousel__control carousel__control--forward" for="c"></label>
 
     </div>
 
     </div>
 
     <div class="carousel__controls">
 
     <div class="carousel__controls">
       <label class="carousel__control carousel__control--backward" for="G"></label>
+
       <label class="carousel__control carousel__control--backward" for="B"></label>
       <label class="carousel__control carousel__control--forward" for="I"></label>
+
       <label class="carousel__control carousel__control--forward" for="D"></label>
 
     </div>
 
     </div>
 
     <div class="carousel__controls">
 
     <div class="carousel__controls">
       <label class="carousel__control carousel__control--backward" for="H"></label>
+
       <label class="carousel__control carousel__control--backward" for="c"></label>
       <label class="carousel__control carousel__control--forward" for="J"></label>
+
       <label class="carousel__control carousel__control--forward" for="E"></label>
 
     </div>
 
     </div>
 
     <div class="carousel__controls">
 
     <div class="carousel__controls">
       <label class="carousel__control carousel__control--backward" for="I"></label>
+
       <label class="carousel__control carousel__control--backward" for="D"></label>
 
       <label class="carousel__control carousel__control--forward" for="F"></label>
 
       <label class="carousel__control carousel__control--forward" for="F"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="E"></label>
 +
      <label class="carousel__control carousel__control--forward" for="G"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="F"></label>
 +
      <label class="carousel__control carousel__control--forward" for="A"></label>
 
     </div>
 
     </div>
 
     <div class="carousel__track">
 
     <div class="carousel__track">
 
       <li class="carousel__slide">
 
       <li class="carousel__slide">
        <h1>7 Highlights</h1>
 
 
       </li>
 
       </li>
 
       <li class="carousel__slide">
 
       <li class="carousel__slide">
        <h1>1#</h1>
 
 
       </li>
 
       </li>
 
       <li class="carousel__slide">
 
       <li class="carousel__slide">
        <h1>2#</h1>
 
 
       </li>
 
       </li>
 
       <li class="carousel__slide">
 
       <li class="carousel__slide">
        <h1>3#</h1>
 
 
       </li>
 
       </li>
 
       <li class="carousel__slide">
 
       <li class="carousel__slide">
        <h1>4#</h1>
+
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 
       </li>
 
       </li>
 
     </div>
 
     </div>
 
     <div class="carousel__indicators">
 
     <div class="carousel__indicators">
 +
      <label class="carousel__indicator" for="A"></label>
 +
      <label class="carousel__indicator" for="B"></label>
 +
      <label class="carousel__indicator" for="c"></label>
 +
      <label class="carousel__indicator" for="D"></label>
 +
      <label class="carousel__indicator" for="E"></label>
 
       <label class="carousel__indicator" for="F"></label>
 
       <label class="carousel__indicator" for="F"></label>
 
       <label class="carousel__indicator" for="G"></label>
 
       <label class="carousel__indicator" for="G"></label>
      <label class="carousel__indicator" for="H"></label>
+
 
      <label class="carousel__indicator" for="I"></label>
+
      <label class="carousel__indicator" for="J"></label>
+
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
</div>
 
</div>
 
</div>
 
</div>
 
-->
 
<div style="w3-blue-gray; height:300px;">
 
 
</div>
 
</div>
 +
<br />
 +
 +
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 17:31, 12 December 2018

HebrewU HujiGEM 2018