Difference between revisions of "Team:KSA KOREA"

m
 
(75 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
  <!-- Required meta tags -->
 
  <meta charset="utf-8">
 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
 
 
  
 
<style>
 
<style>
.bb-bookblock {
+
.navbar-item.has-dropdown.is-hoverable {
width: 400px;
+
  padding-right: 20px;
height: 300px;
+
margin: 0 auto;
+
position: relative;
+
z-index: 100;
+
-webkit-perspective: 1300px;
+
perspective: 1300px;
+
-webkit-backface-visibility: hidden;
+
backface-visibility: hidden;
+
 
}
 
}
  
.bb-page {
 
position: absolute;
 
-webkit-transform-style: preserve-3d;
 
transform-style: preserve-3d;
 
-webkit-transition-property: -webkit-transform;
 
transition-property: transform;
 
}
 
  
.bb-vertical .bb-page {
+
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
width: 50%;
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
height: 100%;
+
body, html {background-color:white; width: 100%; height: 100%;}
left: 50%;
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
-webkit-transform-origin: left center;
+
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
transform-origin: left center;
+
</style>
}
+
  
.bb-horizontal .bb-page {
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
width: 100%;
+
height: 50%;
+
top: 50%;
+
-webkit-transform-origin: center top;
+
transform-origin: center top;
+
}
+
  
.bb-page > div,
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bbCSS&action=raw&ctype=text/css" />
.bb-outer,
+
.bb-content,
+
.bb-inner {
+
position: absolute;
+
height: 100%;
+
width: 100%;
+
top: 0;
+
left: 0;
+
-webkit-backface-visibility: hidden;
+
backface-visibility: hidden;
+
}
+
  
.bb-vertical .bb-content {
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />
width: 200%;
+
}
+
  
.bb-horizontal .bb-content {
+
<style>
height: 200%;
+
}
+
  
.bb-page > div {
 
width: 100%;
 
-webkit-transform-style: preserve-3d;
 
transform-style: preserve-3d;
 
}
 
 
.bb-vertical .bb-back {
 
-webkit-transform: rotateY(-180deg);
 
transform: rotateY(-180deg);
 
}
 
 
.bb-horizontal .bb-back {
 
-webkit-transform: rotateX(-180deg);
 
transform: rotateX(-180deg);
 
}
 
 
.bb-outer {
 
width: 100%;
 
overflow: hidden;
 
z-index: 999;
 
}
 
 
.bb-overlay,
 
.bb-flipoverlay {
 
background-color: rgba(0, 0, 0, 0.7);
 
position: absolute;
 
top: 0px;
 
left: 0px;
 
width: 100%;
 
height: 100%;
 
opacity: 0;
 
}
 
 
.bb-flipoverlay {
 
background-color: rgba(0, 0, 0, 0.2);
 
}
 
 
.bb-bookblock.bb-vertical > div.bb-page:first-child,
 
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
 
-webkit-transform: rotateY(180deg);
 
transform: rotateY(180deg);
 
}
 
 
.bb-bookblock.bb-horizontal > div.bb-page:first-child,
 
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
 
-webkit-transform: rotateX(180deg);
 
transform: rotateX(180deg);
 
}
 
 
/* Content display */
 
.bb-content {
 
background: #fff;
 
}
 
 
.bb-vertical .bb-front .bb-content {
 
left: -100%;
 
}
 
 
.bb-horizontal .bb-front .bb-content {
 
top: -100%;
 
}
 
 
/* Flipping classes */
 
.bb-vertical .bb-flip-next,
 
.bb-vertical .bb-flip-initial {
 
-webkit-transform: rotateY(-180deg);
 
transform: rotateY(-180deg);
 
}
 
 
.bb-vertical .bb-flip-prev {
 
-webkit-transform: rotateY(0deg);
 
transform: rotateY(0deg);
 
}
 
 
.bb-horizontal .bb-flip-next,
 
.bb-horizontal .bb-flip-initial {
 
-webkit-transform: rotateX(180deg);
 
transform: rotateX(180deg);
 
}
 
 
.bb-horizontal .bb-flip-prev {
 
-webkit-transform: rotateX(0deg);
 
transform: rotateX(0deg);
 
}
 
 
.bb-vertical .bb-flip-next-end {
 
-webkit-transform: rotateY(-15deg);
 
transform: rotateY(-15deg);
 
}
 
 
.bb-vertical .bb-flip-prev-end {
 
-webkit-transform: rotateY(-165deg);
 
transform: rotateY(-165deg);
 
}
 
 
.bb-horizontal .bb-flip-next-end {
 
-webkit-transform: rotateX(15deg);
 
transform: rotateX(15deg);
 
}
 
 
.bb-horizontal .bb-flip-prev-end {
 
-webkit-transform: rotateX(165deg);
 
transform: rotateX(165deg);
 
}
 
 
.bb-item {
 
width: 100%;
 
height: 100%;
 
position: absolute;
 
top: 0;
 
left: 0;
 
display: none;
 
background: #fff;
 
}
 
 
/* No JS */
 
.no-js .bb-bookblock,
 
.no-js ul.bb-custom-grid li {
 
width: auto;
 
height: auto;
 
}
 
 
.no-js .bb-item {
 
display: block;
 
position: relative;
 
}
 
 
</style>
 
 
 
 
<style>
 
@font-face {
 
  font-family: 'arrows';
 
  src: url('../fonts/arrows/arrows.eot');
 
  src: url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
 
    url('../fonts/arrows/arrows.woff') format('woff'),
 
    url('../fonts/arrows/arrows.ttf') format('truetype'),
 
    url('../fonts/arrows/arrows.svg#arrows') format('svg');
 
  font-weight: normal;
 
  font-style: normal;
 
}
 
  
 
.bb-custom-wrapper {
 
.bb-custom-wrapper {
Line 213: Line 29:
 
   height: 100%;
 
   height: 100%;
 
   position: relative;
 
   position: relative;
   /* box-sizing: border-box; */
+
    
 
}
 
}
  
Line 228: Line 44:
 
   height: 100%;
 
   height: 100%;
 
   overflow: hidden;
 
   overflow: hidden;
   background: #93D1D5;
+
   background: #fff;
   /* Centering with flexbox */
+
    
 
   display: -webkit-box;
 
   display: -webkit-box;
 
   display: -moz-box;
 
   display: -moz-box;
Line 253: Line 69:
 
   margin: 0;
 
   margin: 0;
 
   font-weight: 300;
 
   font-weight: 300;
   background: #93D1D5;
+
   background: #fff;
 
}
 
}
  
Line 309: Line 125:
 
   text-align: center;
 
   text-align: center;
 
   border-radius: 2px;
 
   border-radius: 2px;
   background: #93D1D5;
+
   background: #1baede;
 
   color: #fff;
 
   color: #fff;
 
   font-size: 0;
 
   font-size: 0;
Line 321: Line 137:
 
   text-align: center;
 
   text-align: center;
 
   border-radius: 2px;
 
   border-radius: 2px;
   background: #93D1D5;
+
   background: #1baede;
 
   color: #fff;
 
   color: #fff;
 
   font-size: 0;
 
   font-size: 0;
Line 365: Line 181:
 
}
 
}
  
/* No JS */
+
 
 
.no-js .bb-custom-wrapper {
 
.no-js .bb-custom-wrapper {
 
   height: auto;
 
   height: auto;
Line 386: Line 202:
 
}
 
}
 
</style>
 
</style>
 +
 +
 +
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/fa4&action=raw&ctype=text/css" />
  
  
  
 
<style>
 
<style>
/*
 
A. Mini Reset
 
*/
 
 
*, *:after, *:before {
 
*, *:after, *:before {
 
   -webkit-box-sizing: border-box;
 
   -webkit-box-sizing: border-box;
Line 439: Line 256:
  
 
.btn {
 
.btn {
  /* display: inline-block; */
+
 
   display: block;
 
   display: block;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
  /* border: 2px solid #2c3e50; */
+
 
  /* margin-top: 100px;  */
+
 
   margin-top: 20px;
 
   margin-top: 20px;
 
   font-size: 0.7em;
 
   font-size: 0.7em;
Line 459: Line 275:
 
}
 
}
  
/* basic grid, only for this demo */
+
 
 
.align {
 
.align {
 
   clear: both;
 
   clear: both;
Line 470: Line 286:
 
   margin-top: 0;
 
   margin-top: 0;
 
   margin-bottom: 0;
 
   margin-bottom: 0;
 +
margin-right: 1.6em;
 
}
 
}
  
Line 477: Line 294:
 
   /* min-height: 300px; */
 
   /* min-height: 300px; */
 
   display: inline-block;
 
   display: inline-block;
   margin: 30px 20px 30px 30px;
+
   /* margin: 30px 20px 30px 30px; */
 
   /* padding: 0 0 0 60px; */
 
   /* padding: 0 0 0 60px; */
 
   vertical-align: top;
 
   vertical-align: top;
 
   margin-bottom: -25px;
 
   margin-bottom: -25px;
 +
  margin-top: 30px;
 +
  margin-right: 40px;
 
}
 
}
  
/* ///////////////////////////////////////////////////
 
  
HARDCOVER
 
Table of Contents
 
 
1. container
 
2. background & color
 
3. opening cover, back cover and pages
 
4. position, transform y transition
 
5. events
 
6. Bonus
 
- Cover design
 
- Ribbon
 
- Figcaption
 
7. mini-reset
 
 
/////////////////////////////////////////////////////*/
 
/*
 
1. container
 
*/
 
 
.book {
 
.book {
 
   position: relative;
 
   position: relative;
  /* width: 160px; */
+
 
   width: 120px;
 
   width: 120px;
   /* height: 220px; */
+
    
 
   height: 160px;
 
   height: 160px;
 
   -webkit-perspective: 1000px;
 
   -webkit-perspective: 1000px;
Line 517: Line 317:
 
}
 
}
  
/*
+
 
2. background & color
+
*/
+
/* HARDCOVER FRONT */
+
 
.hardcover_front li:first-child {
 
.hardcover_front li:first-child {
 
   background-color: #eee;
 
   background-color: #eee;
Line 528: Line 325:
 
}
 
}
  
/* reverse */
+
 
 
.hardcover_front li:last-child {
 
.hardcover_front li:last-child {
 
   background: #fffbec;
 
   background: #fffbec;
 
}
 
}
  
/* HARDCOVER BACK */
+
 
 
.hardcover_back li:first-child {
 
.hardcover_back li:first-child {
 
   background: #fffbec;
 
   background: #fffbec;
 
}
 
}
  
/* reverse */
+
 
 
.hardcover_back li:last-child {
 
.hardcover_back li:last-child {
 
   background: #fffbec;
 
   background: #fffbec;
Line 551: Line 348:
 
}
 
}
  
/* thickness of cover */
+
 
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:before,
 
.hardcover_front li:first-child:before,
Line 567: Line 364:
 
}
 
}
  
/* page */
+
 
 
.page>li {
 
.page>li {
 
   background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 
   background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
Line 577: Line 374:
 
}
 
}
  
/*
+
 
3. opening cover, back cover and pages
+
*/
+
 
.hardcover_front {
 
.hardcover_front {
 
   -webkit-transform: rotateY(-34deg) translateZ(8px);
 
   -webkit-transform: rotateY(-34deg) translateZ(8px);
Line 623: Line 418:
 
}
 
}
  
/*
+
 
4. position, transform & transition
+
*/
+
 
.hardcover_front,
 
.hardcover_front,
 
.hardcover_back,
 
.hardcover_back,
Line 655: Line 448:
 
}
 
}
  
/* HARDCOVER front */
+
 
 
.hardcover_front li:first-child {
 
.hardcover_front li:first-child {
 
   cursor: default;
 
   cursor: default;
Line 672: Line 465:
 
}
 
}
  
/* HARDCOVER back */
+
 
 
.hardcover_back li:first-child {
 
.hardcover_back li:first-child {
 
   -webkit-transform: translateZ(2px);
 
   -webkit-transform: translateZ(2px);
Line 685: Line 478:
 
}
 
}
  
/* thickness of cover */
+
 
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:before,
 
.hardcover_front li:first-child:before,
Line 703: Line 496:
 
}
 
}
  
/* HARDCOVER front */
+
 
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:after,
 
.hardcover_front li:first-child:before {
 
.hardcover_front li:first-child:before {
   /* width: 4px; */
+
    
 
   height: 100%;
 
   height: 100%;
 
}
 
}
Line 724: Line 517:
 
.hardcover_front li:last-child:after,
 
.hardcover_front li:last-child:after,
 
.hardcover_front li:last-child:before {
 
.hardcover_front li:last-child:before {
  /* width: 4px; */
+
 
   height: 160px;
 
   height: 160px;
 
}
 
}
Line 735: Line 528:
  
 
.hardcover_front li:last-child:before {
 
.hardcover_front li:last-child:before {
   /* box-shadow: 0px 0px 30px 5px #333; */
+
    
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
Line 741: Line 534:
 
}
 
}
  
/* thickness of cover */
+
 
 
.hardcover_back li:first-child:after,
 
.hardcover_back li:first-child:after,
 
.hardcover_back li:first-child:before {
 
.hardcover_back li:first-child:before {
  /* width: 4px; */
+
 
   height: 100%;
 
   height: 100%;
 
}
 
}
Line 762: Line 555:
 
.hardcover_back li:last-child:after,
 
.hardcover_back li:last-child:after,
 
.hardcover_back li:last-child:before {
 
.hardcover_back li:last-child:before {
  /* width: 4px; */
+
 
   height: 160px;
 
   height: 160px;
 
}
 
}
Line 773: Line 566:
  
 
.hardcover_back li:last-child:before {
 
.hardcover_back li:last-child:before {
  /* box-shadow: 10px -1px 80px 20px #666; */
+
 
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
Line 779: Line 572:
 
}
 
}
  
/* BOOK SPINE */
+
 
 
.book_spine {
 
.book_spine {
 
   -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 
   -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 
   -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 
   -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 
   transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 
   transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
   /* width: 16px; */
+
    
 
   width: 20px;
 
   width: 20px;
 
   z-index: 0;
 
   z-index: 0;
Line 801: Line 594:
 
}
 
}
  
/* thickness of book spine */
+
 
 
.book_spine li:first-child:after,
 
.book_spine li:first-child:after,
 
.book_spine li:first-child:before {
 
.book_spine li:first-child:before {
Line 822: Line 615:
 
.book_spine li:last-child:after,
 
.book_spine li:last-child:after,
 
.book_spine li:last-child:before {
 
.book_spine li:last-child:before {
  /* width: 4px; */
+
 
 
   height: 16px;
 
   height: 16px;
 
}
 
}
Line 833: Line 626:
  
 
.book_spine li:last-child:before {
 
.book_spine li:last-child:before {
  /* box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2); */
+
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 
   -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 
   -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
Line 901: Line 694:
 
}
 
}
  
/*
+
 
5. events
+
*/
+
 
.book:hover>.hardcover_front {
 
.book:hover>.hardcover_front {
 
   -webkit-transform: rotateY(-145deg) translateZ(0);
 
   -webkit-transform: rotateY(-145deg) translateZ(0);
Line 956: Line 747:
 
}
 
}
  
/*
+
 
6. Bonus
+
*/
+
/* cover CSS */
+
 
.coverDesign {
 
.coverDesign {
 
   position: absolute;
 
   position: absolute;
Line 1,021: Line 809:
 
}
 
}
  
/* Basic ribbon */
+
 
 
.ribbon {
 
.ribbon {
 
   background: #c0392b;
 
   background: #c0392b;
Line 1,064: Line 852:
 
}
 
}
  
/* Media Queries */
+
 
 
@media screen and (max-width: 37.8125em) {
 
@media screen and (max-width: 37.8125em) {
 
   .align>li {
 
   .align>li {
Line 1,089: Line 877:
 
</style>
 
</style>
  
<style>
+
 
figure.containerZoom{background-position:50% 50%;position:relative;width:100%;overflow:hidden;cursor:zoom-in;margin:0}figure.containerZoom img{transition:opacity .5s;display:block;width:100%}figure.containerZoom.active img{opacity:0}
+
 
</style>
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
 +
 
 +
 
 +
 
 +
 
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>
  
 
<style>
 
<style>
html, body, .footer {
+
    html,
  background-color: #93D1D5;
+
    body,
}
+
    .footer {
 +
      background-color: #93D1D5;
 +
    }
  
.wrap {
+
    .wrap {
  /* margin-left: 75px;
+
      /* margin-left: 75px;
 
   margin-right: 75px; */
 
   margin-right: 75px; */
  margin: 0 auto;
+
      margin: 0 auto;
  width: 90vw;
+
      width: 90vw;
}
+
    }
  
.shelf {
+
    .shelf {
  width: 100%;
+
      width: 100%;
  height: 150px;
+
      height: 150px;
  z-index: -1;
+
      z-index: -1;
  background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
+
      background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
  background-size: contain;
+
      background-size: contain;
}
+
    }
  
.align>li {
+
    .align>li {
  width: 100px;
+
      width: 100px;
}
+
    }
  
.book-wrapper {
+
    .book-wrapper {
  height: 100%;
+
      height: 100vh;
  width: 90vw;
+
      width: 90vw;
  margin: 0 auto;
+
      margin: 0 auto;
}
+
    }
  
.bb-custom-side>img {
+
    .bb-custom-side>img {
  display: flex;
+
      display: flex;
  width: 100%;
+
      width: 100%;
  /* height: 100%; */
+
      /* height: 100%; */
  object-fit: contain;
+
      object-fit: contain;
}
+
    }
  
/* .dropdown {
+
    /* .dropdown {
 
   z-index: 2000;
 
   z-index: 2000;
 
   position: fixed;
 
   position: fixed;
Line 1,136: Line 931:
 
   right: 1%;
 
   right: 1%;
 
} */
 
} */
.navbar.is-fixed-top {
+
    .navbar.is-fixed-top {
  z-index: 2000;
+
      z-index: 2000;
  width: 90vw;
+
      width: 90vw;
  margin: 0 auto;
+
      margin: 0 auto;
}
+
    }
  
/* .navbar.is-dark {
+
    /* .navbar.is-dark {
 
   background-color: #7FBEBC;
 
   background-color: #7FBEBC;
 
} */
 
} */
.coverDesign h1 {
+
    .coverDesign h1 {
  font-size: 1.3em;
+
      font-size: 1.3em;
 +
    }
 +
 
 +
    /* Video Stuff */
 +
    .hero.is-medium .hero-body {
 +
      padding-top: 0;
 +
      padding-left: 0;
 +
      padding-right: 0;
 +
      padding-bottom: 3rem;
 +
    }
 +
 
 +
    nav#left-pages {
 +
      position: fixed;
 +
      left: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 
 +
    nav#right-pages {
 +
      position: fixed;
 +
      right: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 
 +
    nav#left-pages a,
 +
    nav#right-pages a {
 +
      display: block;
 +
      margin-top: 2em;
 +
    }
 +
 
 +
    .navbar.is-primary,
 +
    .button.is-primary {
 +
      background-color: #93D1D5;
 +
    }
 +
 
 +
    a.btn.bookLink {
 +
padding-top: 0;
 +
margin-top: 0;
 
}
 
}
  
/* Video Stuff */
+
#flip-nav .button {
.hero.is-medium .hero-body {
+
    color: white;
  padding-top: 0;
+
    background-color: transparent;
  padding-left: 0;
+
    border: none;
  padding-right: 0;
+
max-width: 100%;
  padding-bottom: 3rem;
+
font-size: 2em;
 +
    padding: 0;
 +
    padding-bottom: 1.5em;
 +
 
 
}
 
}
  
nav#left-pages {
+
#flip-nav .button:hover {
  position: fixed;
+
background-color: #00d1b2;
  left: 1%;
+
  top: 40%;
+
  z-index: 9999;
+
 
}
 
}
  
nav#right-pages {
+
.footer {
  position: fixed;
+
      width: 100%;
  right: 1%;
+
      min-height: 35vh;
  top: 40%;
+
      z-index: -1;
  z-index: 9999;
+
      background: transparent url(https://static.igem.org/mediawiki/2020/e/eb/T--KSA_KOREA--footer.png) no-repeat center center;
 +
      background-size: contain;
 +
    }
 +
 
 +
 
 +
.navbar.is-primary .navbar-brand>a.navbar-item:hover {
 +
background-color: transparent;
 
}
 
}
  
nav#left-pages a,
+
.navbar-item img {
nav#right-pages a {
+
max-height: 6rem;
  display: block;
+
  margin-top: 2em;
+
 
}
 
}
  
.navbar.is-primary,
+
#bookGroup {
.button.is-primary {
+
   margin: 0 auto;
   background-color: #93D1D5;
+
  margin-bottom: 15px;
 
}
 
}
</style>
 
<title>KSA Korea Wiki Page</title>
 
  
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"</script>
+
iframe {
 +
display: block;
 +
margin: 0 auto;
 +
}
  
  
 +
  </style>
  
  
 
</head>
 
</head>
 +
 
<body>
 
<body>
 +
  
 
<div class="wrap">
 
<div class="wrap">
     <ul class="align">
+
     <ul class="align" id="bookGroup">
 
       <li>
 
       <li>
 
         <figure class='book'>
 
         <figure class='book'>
Line 1,207: Line 1,048:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Description</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">Description</a>
               <a class="btn" href="#">Results</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">Results</a>
               <a class="btn" href="#">Implementation</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">Measurement</a>
               <a class="btn" href="#">Appendix</a>
+
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">Modeling</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Implementation">Implementation</a>
 +
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Appendix">Appendix</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,241: Line 1,084:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Basic</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">Ligninator</a>
               <a class="btn" href="#">Composite</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">Biosensor</a>
               <a class="btn" href="#">Collection</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">Collection</a>
               <a class="btn" href="#">Contribution</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">Contribution</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,274: Line 1,117:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Fluorometer</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Flourometer">Fluorometer</a>
               <a class="btn" href="#">Computer Vision</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">Business</a>
              <a class="btn" href="#">Entrepreneurship</a>
+
              <a class="btn" href="#">Modeling</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,307: Line 1,148:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Software 1</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">Biosensor App.</a>
              <a class="btn" href="#">Software 2</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">Crispy</a>
               <a class="btn" href="#">Software 3</a>
+
       
              <a class="btn" href="#">Software 4</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,340: Line 1,180:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">overview</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">Overview</a>
               <a class="btn" href="#">Identification</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">Identification</a>
               <a class="btn" href="#">Integration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">Integration</a>
               <a class="btn" href="#">Improvement</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">Improvement</a>
 +
              <a class="btn bookLink" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">Survey Analysis</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,373: Line 1,214:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Education</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">Education</a>
               <a class="btn" href="#">Collaboration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">Collaboration</a>
               <a class="btn" href="#">Web Presence</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">Web Presence</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,405: Line 1,246:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">About Us</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Members">Members</a>
               <a class="btn" href="#">Members</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">Attributions</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,437: Line 1,278:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
               <a class="btn" href="#">Awards</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">Judging</a>
              <a class="btn" href="#">Judging Form</a>
+
     
              <a class="btn" href="#">Safety</a>
+
         
              <a class="btn" href="#">Attribution</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 1,470: Line 1,310:
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
       <div class="navbar-brand">
 
       <div class="navbar-brand">
         <a class="navbar-item" href="#">
+
         <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA">
           <img src="images/ksalogo.png" width="100" height="50">
+
           <img src="https://static.igem.org/mediawiki/2020/6/64/T--KSA_KOREA--logo.png" width="100" height="50">
 
         </a>
 
         </a>
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
Line 1,481: Line 1,321:
 
       <div id="navbarBasicExample" class="navbar-menu">
 
       <div id="navbarBasicExample" class="navbar-menu">
 
         <div class="navbar-start">
 
         <div class="navbar-start">
           <a class="navbar-item">
+
            
            Home
+
          </a>
+
  
 
           <!-- This is end of navbar start -->
 
           <!-- This is end of navbar start -->
Line 1,496: Line 1,334:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
               <a class="navbar-item">
+
               <a class="navbar-item has-text-light has-background-primary" href="https://2020.igem.org/Team:KSA_KOREA/Members">
 
                 Members
 
                 Members
 
               </a>
 
               </a>
               <a class="navbar-item has-text-light has-background-primary">
+
             
                Collaboration
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">
              </a>
+
                 Attributions
              <a class="navbar-item">
+
                 Attribution
+
 
               </a>
 
               </a>
 
             </div>
 
             </div>
Line 1,516: Line 1,352:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">
                 Description/Inspiration
+
                 Description
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
                 Design
+
                 Results
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">
                Labnotes
+
                 Measurement
              </a>
+
              <a class="navbar-item">
+
                Protocol
+
              </a>
+
              <a class="navbar-item">
+
                 Results
+
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">
                 Parts
+
                 Modeling
 
               </a>
 
               </a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
  
           <!-- Device -->
+
           <!-- PARTS-->
  
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
             <a class="navbar-link">
 
             <a class="navbar-link">
               Device
+
               Parts
 
             </a>
 
             </a>
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">
                 Software
+
                 Ligninator
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">
                 Hardware
+
                 Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">
 +
                Collection
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">
 +
                Contribution
 
               </a>
 
               </a>
  
Line 1,559: Line 1,395:
 
               Human Practices
 
               Human Practices
 
             </a>
 
             </a>
 
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">
                 Introduction
+
                 Overview
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">
                 Education
+
                 Identification
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">
                 Campaign
+
                 Integration
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">
                 Interviews
+
                 Improvement
 
               </a>
 
               </a>
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">
 
                 Survey Analysis
 
                 Survey Analysis
 
               </a>
 
               </a>
               <a class="navbar-item">
+
            </div>
                 Integrated Human Practices
+
          </div>
 +
 
 +
 
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Hardware & Business
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Fluorometer">
 +
                Fluorometer
 +
              </a> 
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">
 +
                Business
 +
              </a> 
 +
            </div>
 +
          </div>
 +
 
 +
 
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Logistics
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">
 +
                 Judging
 
               </a>
 
               </a>
 +
             
 +
             
 +
            </div>
 +
          </div>
  
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Communication
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">
 +
                Education
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">
 +
                Collaboration
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">
 +
                Web Presence
 +
              </a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
  
          <a class="navbar-item">
 
            Awards/Judging Form
 
          </a>
 
  
          <a class="navbar-item">
+
        <div class="navbar-item has-dropdown is-hoverable ">
             Safety
+
            <a class="navbar-link">
           </a>
+
              Software
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">
 +
                Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">
 +
                Crispy
 +
              </a>
 +
         
 +
             </div>
 +
           </div>
 +
 
 +
       
 +
 
 +
         
  
 
         </div>
 
         </div>
Line 1,600: Line 1,489:
 
     <div class="bb-custom-wrapper">
 
     <div class="bb-custom-wrapper">
 
       <div id="bb-bookblock" class="bb-bookblock">
 
       <div id="bb-bookblock" class="bb-bookblock">
         <div class="bb-item">
+
   
          <div class="bb-custom-firstpage">
+
          
            <h1>BookBlock <span>A Content Flip Plugin</span></h1>
+
      <iframe width="1200" height="800" src="https://www.youtube.com/embed/6eqk6ADKtFQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <nav class="codrops-demos">
+
          
              <a class="current-demo" href="index4.html">Demo 4</a>
+
              <a href="index5.html">Demo 5</a>
+
            </nav>
+
          </div>
+
          <div class="bb-custom-side">
+
            <p>Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.</p>
+
          </div>
+
        </div>
+
        <div class="bb-item">
+
          <div class="bb-custom-side">
+
            <p>Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
+
          </div>
+
          <div class="bb-custom-side">
+
            <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan jelly-o.</p>
+
          </div>
+
        </div>
+
        <div class="bb-item">
+
          <div class="bb-custom-side">
+
            <img src="images/left.png" />
+
          </div>
+
          <div class="bb-custom-side">
+
            <img src="images/right.png" />
+
          </div>
+
         </div>
+
        <div class="bb-item">
+
          <div class="bb-custom-side">
+
            <img src="images/ratioTest.png" />
+
          </div>
+
          <div class="bb-custom-side">
+
            <img src="images/edu_wiki.png" />
+
          </div>
+
        </div>
+
  
        <div class="bb-item">
+
     
          <div class="bb-custom-side">
+
            <p>Jujubes fruitcake tiramisu liquorice chocolate cake. Carrot cake faworki donut soufflé oat cake tootsie roll. Fruitcake fruitcake cake sweet pie jelly beans. Chocolate cake candy jujubes oat cake toffee croissant muffin.</p>
+
          </div>
+
          <div class="bb-custom-side">
+
            <p>Chocolate bar tiramisu marzipan. Croissant soufflé croissant lollipop liquorice dragée chupa chups carrot cake. Liquorice lollipop halvah toffee lollipop.</p>
+
          </div>
+
        </div>
+
 
       </div>
 
       </div>
  
Line 1,653: Line 1,503:
 
<!-- HERE IS END OF BOOK WRAPPER -->
 
<!-- HERE IS END OF BOOK WRAPPER -->
  
  <div id="flip-nav">
 
    <nav id="left-pages">
 
      <a id="bb-nav-prev" href="#" class="button is-primary"><i class="fa fa-angle-left fa-2x"></i></a>
 
      <a id="bb-nav-first" href="#" class="button is-primary"><i class="fa fa-angle-double-left fa-2x"></i></a>
 
    </nav>
 
  
  
    <nav id="right-pages">
+
<div class="footer"></div>
      <a id="bb-nav-next" href="#" class="button is-primary"><i class="fa fa-angle-right fa-2x"></i></a>
+
      <a id="bb-nav-last" class="button is-primary"><i class="fa fa-angle-double-right fa-2x"></i></a>
+
    </nav>
+
  </div>
+
  
  
Line 1,670: Line 1,511:
  
  
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjs&action=raw&ctype=text/javascript"></script>
  
  
  
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript">
 +
  </script>
  
  
  
  
 +
  <script>
 +
    $(document).ready(function() {
 +
      var Page = (function() {
  
 +
        var config = {
 +
            $bookBlock: $('#bb-bookblock'),
 +
            $navNext: $('#bb-nav-next'),
 +
            $navPrev: $('#bb-nav-prev'),
 +
            $navFirst: $('#bb-nav-first'),
 +
            $navLast: $('#bb-nav-last')
 +
          },
 +
          init = function() {
 +
            console.log("enter");
 +
            var $content = $('#bb-bookblock');
 +
            while ($content.length === 0) {
 +
              setTimeout(() => {
 +
                console.log($content.length);
 +
              }, 200);
 +
              $content = $("bb-bookblock");
 +
            }
  
 +
            config.$bookBlock.bookblock({
 +
              speed: 1000,
 +
              shadowSides: 0.8,
 +
              shadowFlip: 0.4
 +
            });
 +
            initEvents();
 +
          },
 +
          initEvents = function() {
  
 +
            var $slides = config.$bookBlock.children();
  
 +
            // add navigation events
 +
            config.$navNext.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('next');
 +
              return false;
 +
            });
  
 +
            config.$navPrev.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('prev');
 +
              return false;
 +
            });
  
 +
            config.$navFirst.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('first');
 +
              return false;
 +
            });
  
 +
            config.$navLast.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('last');
 +
              return false;
 +
            });
  
 +
            // add swipe events
 +
            $slides.on({
 +
              'swipeleft': function(event) {
 +
                config.$bookBlock.bookblock('next');
 +
                return false;
 +
              },
 +
              'swiperight': function(event) {
 +
                config.$bookBlock.bookblock('prev');
 +
                return false;
 +
              }
 +
            });
  
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+
            // add keyboard events
 +
            $(document).keydown(function(e) {
 +
              var keyCode = e.keyCode || e.which,
 +
                arrow = {
 +
                  left: 37,
 +
                  up: 38,
 +
                  right: 39,
 +
                  down: 40
 +
                };
  
<script>
+
              switch (keyCode) {
(function() {
+
                case arrow.left:
 +
                  config.$bookBlock.bookblock('prev');
 +
                  break;
 +
                case arrow.right:
 +
                  config.$bookBlock.bookblock('next');
 +
                  break;
 +
              }
 +
            });
 +
          };
  
var event = jQuery.event,
+
        return {
 +
          init: init
 +
        };
  
//helper that finds handlers by type and calls back a function, this is basically handle
+
      })();
// events - the events object
+
      Page.init();
// types - an array of event types to look for
+
    });
// callback(type, handlerFunc, selector) - a callback
+
   
// selector - an optional selector to filter with, if there, matches by selector
+
  </script>
//    if null, matches anything, otherwise, matches with no selector
+
findHelper = function( events, types, callback, selector ) {
+
var t, type, typeHandlers, all, h, handle,
+
namespaces, namespace,
+
match;
+
for ( t = 0; t < types.length; t++ ) {
+
type = types[t];
+
all = type.indexOf(".") < 0;
+
if (!all ) {
+
namespaces = type.split(".");
+
type = namespaces.shift();
+
namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)");
+
}
+
typeHandlers = (events[type] || []).slice(0);
+
  
for ( h = 0; h < typeHandlers.length; h++ ) {
 
handle = typeHandlers[h];
 
 
match = (all || namespace.test(handle.namespace));
 
 
if(match){
 
if(selector){
 
if (handle.selector === selector  ) {
 
callback(type, handle.origHandler || handle.handler);
 
}
 
} else if (selector === null){
 
callback(type, handle.origHandler || handle.handler, handle.selector);
 
}
 
else if (!handle.selector ) {
 
callback(type, handle.origHandler || handle.handler);
 
 
}
 
}
 
 
 
}
 
}
 
};
 
  
/**
+
<script>
* Finds event handlers of a given type on an element.
+
$(document).ready(function() {
* @param {HTMLElement} el
+
document.getElementById("content").style.background = "#93D1D5";
* @param {Array} types an array of event names
+
* @param {String} [selector] optional selector
+
* @return {Array} an array of event handlers
+
*/
+
event.find = function( el, types, selector ) {
+
var events = ( $._data(el) || {} ).events,
+
handlers = [],
+
t, liver, live;
+
 
+
if (!events ) {
+
return handlers;
+
}
+
findHelper(events, types, function( type, handler ) {
+
handlers.push(handler);
+
}, selector);
+
return handlers;
+
};
+
/**
+
* Finds all events.  Group by selector.
+
* @param {HTMLElement} el the element
+
* @param {Array} types event types
+
*/
+
event.findBySelector = function( el, types ) {
+
var events = $._data(el).events,
+
selectors = {},
+
//adds a handler for a given selector and event
+
add = function( selector, event, handler ) {
+
var select = selectors[selector] || (selectors[selector] = {}),
+
events = select[event] || (select[event] = []);
+
events.push(handler);
+
};
+
 
+
if (!events ) {
+
return selectors;
+
}
+
//first check live:
+
/*$.each(events.live || [], function( i, live ) {
+
if ( $.inArray(live.origType, types) !== -1 ) {
+
add(live.selector, live.origType, live.origHandler || live.handler);
+
}
+
});*/
+
//then check straight binds
+
findHelper(events, types, function( type, handler, selector ) {
+
add(selector || "", type, handler);
+
}, null);
+
 
+
return selectors;
+
};
+
event.supportTouch = "ontouchend" in document;
+
+
$.fn.respondsTo = function( events ) {
+
if (!this.length ) {
+
return false;
+
} else {
+
//add default ?
+
return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
+
}
+
};
+
$.fn.triggerHandled = function( event, data ) {
+
event = (typeof event == "string" ? $.Event(event) : event);
+
this.trigger(event, data);
+
return event.handled;
+
};
+
/**
+
* Only attaches one event handler for all types ...
+
* @param {Array} types llist of types that will delegate here
+
* @param {Object} startingEvent the first event to start listening to
+
* @param {Object} onFirst a function to call
+
*/
+
event.setupHelper = function( types, startingEvent, onFirst ) {
+
if (!onFirst ) {
+
onFirst = startingEvent;
+
startingEvent = null;
+
}
+
var add = function( handleObj ) {
+
 
+
var bySelector, selector = handleObj.selector || "";
+
if ( selector ) {
+
bySelector = event.find(this, types, selector);
+
if (!bySelector.length ) {
+
$(this).delegate(selector, startingEvent, onFirst);
+
}
+
}
+
else {
+
//var bySelector = event.find(this, types, selector);
+
if (!event.find(this, types, selector).length ) {
+
event.add(this, startingEvent, onFirst, {
+
selector: selector,
+
delegate: this
+
});
+
}
+
 
+
}
+
 
+
},
+
remove = function( handleObj ) {
+
var bySelector, selector = handleObj.selector || "";
+
if ( selector ) {
+
bySelector = event.find(this, types, selector);
+
if (!bySelector.length ) {
+
$(this).undelegate(selector, startingEvent, onFirst);
+
}
+
}
+
else {
+
if (!event.find(this, types, selector).length ) {
+
event.remove(this, startingEvent, onFirst, {
+
selector: selector,
+
delegate: this
+
});
+
}
+
}
+
};
+
$.each(types, function() {
+
event.special[this] = {
+
add: add,
+
remove: remove,
+
setup: function() {},
+
teardown: function() {}
+
};
+
});
+
};
+
})(jQuery);
+
(function($){
+
var isPhantom = /Phantom/.test(navigator.userAgent),
+
supportTouch = !isPhantom && ("ontouchend" in document),
+
scrollEvent = "touchmove scroll",
+
// Use touch events or map it to mouse events
+
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
+
touchStopEvent = supportTouch ? "touchend" : "mouseup",
+
touchMoveEvent = supportTouch ? "touchmove" : "mousemove",
+
data = function(event){
+
var d = event.originalEvent.touches ?
+
event.originalEvent.touches[ 0 ] :
+
event;
+
return {
+
time: (new Date).getTime(),
+
coords: [ d.pageX, d.pageY ],
+
origin: $( event.target )
+
};
+
};
+
 
+
/**
+
* @add jQuery.event.swipe
+
*/
+
var swipe = $.event.swipe = {
+
/**
+
* @attribute delay
+
* Delay is the upper limit of time the swipe motion can take in milliseconds.  This defaults to 500.
+
*
+
* A user must perform the swipe motion in this much time.
+
*/
+
delay : 500,
+
/**
+
* @attribute max
+
* The maximum distance the pointer must travel in pixels.  The default is 75 pixels.
+
*/
+
max : 75,
+
/**
+
* @attribute min
+
* The minimum distance the pointer must travel in pixels.  The default is 30 pixels.
+
*/
+
min : 30
+
};
+
 
+
$.event.setupHelper( [
+
 
+
/**
+
* @hide
+
* @attribute swipe
+
*/
+
"swipe",
+
/**
+
* @hide
+
* @attribute swipeleft
+
*/
+
'swipeleft',
+
/**
+
* @hide
+
* @attribute swiperight
+
*/
+
'swiperight',
+
/**
+
* @hide
+
* @attribute swipeup
+
*/
+
'swipeup',
+
/**
+
* @hide
+
* @attribute swipedown
+
*/
+
'swipedown'], touchStartEvent, function(ev){
+
var
+
// update with data when the event was started
+
start = data(ev),
+
stop,
+
delegate = ev.delegateTarget || ev.currentTarget,
+
selector = ev.handleObj.selector,
+
entered = this;
+
+
function moveHandler(event){
+
if ( !start ) {
+
return;
+
}
+
// update stop with the data from the current event
+
stop = data(event);
+
 
+
// prevent scrolling
+
if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
+
event.preventDefault();
+
}
+
};
+
 
+
// Attach to the touch move events
+
$(document.documentElement).bind(touchMoveEvent, moveHandler)
+
.one(touchStopEvent, function(event){
+
$(this).unbind( touchMoveEvent, moveHandler);
+
// if start and stop contain data figure out if we have a swipe event
+
if ( start && stop ) {
+
// calculate the distance between start and stop data
+
var deltaX = Math.abs(start.coords[0] - stop.coords[0]),
+
deltaY = Math.abs(start.coords[1] - stop.coords[1]),
+
distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
+
 
+
// check if the delay and distance are matched
+
if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) {
+
var events = ['swipe'];
+
// check if we moved horizontally
+
if( deltaX >= swipe.min && deltaY < swipe.min) {
+
// based on the x coordinate check if we moved left or right
+
events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" );
+
} else
+
// check if we moved vertically
+
if(deltaY >= swipe.min && deltaX < swipe.min){
+
// based on the y coordinate check if we moved up or down
+
events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" );
+
}
+
 
+
// trigger swipe events on this guy
+
$.each($.event.find(delegate, events, selector), function(){
+
this.call(entered, ev, {start : start, end: stop})
+
})
+
+
}
+
}
+
// reset start and stop
+
start = stop = undefined;
+
})
+
 
});
 
});
  
})(jQuery)
 
 
</script>
 
</script>
  
<script>
 
/**
 
* jquery.bookblock.min.js v2.0.1
 
* http://www.codrops.com
 
*
 
* Licensed under the MIT license.
 
* http://www.opensource.org/licenses/mit-license.php
 
*
 
* Copyright 2013, Codrops
 
* http://www.codrops.com
 
*/
 
(function(f,g,d){var c=f(g),e=g.Modernizr;e.addTest("csstransformspreserve3d",function(){var l=e.prefixed("transformStyle");var k="preserve-3d";var j;if(!l){return false}l=l.replace(/([A-Z])/g,function(n,m){return"-"+m.toLowerCase()}).replace(/^ms-/,"-ms-");e.testStyles("#modernizr{"+l+":"+k+";}",function(m,n){j=g.getComputedStyle?getComputedStyle(m,null).getPropertyValue(l):""});return(j===k)});var a=f.event,b,i;b=a.special.debouncedresize={setup:function(){f(this).on("resize",b.handler)},teardown:function(){f(this).off("resize",b.handler)},handler:function(n,j){var m=this,l=arguments,k=function(){n.type="debouncedresize";a.dispatch.apply(m,l)};if(i){clearTimeout(i)}j?k():i=setTimeout(k,b.threshold)},threshold:150};f.BookBlock=function(j,k){this.$el=f(k);this._init(j)};f.BookBlock.defaults={orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(j,l,k){return false},onBeforeFlip:function(j){return false}};f.BookBlock.prototype={_init:function(j){this.options=f.extend(true,{},f.BookBlock.defaults,j);this.$el.addClass("bb-"+this.options.orientation);this.$items=this.$el.children(".bb-item").hide();this.itemsCount=this.$items.length;this.current=0;this.previous=-1;this.$current=this.$items.eq(this.current).show();this.elWidth=this.$el.width();var k={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=k[e.prefixed("transition")]+".bookblock";this.support=e.csstransitions&&e.csstransforms3d&&e.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var j=this;if(this.options.nextEl!==""){f(this.options.nextEl).on("click.bookblock touchstart.bookblock",function(){j._action("next");return false})}if(this.options.prevEl!==""){f(this.options.prevEl).on("click.bookblock touchstart.bookblock",function(){j._action("prev");return false})}c.on("debouncedresize",function(){j.elWidth=j.$el.width()})},_action:function(j,k){this._stopSlideshow();this._navigate(j,k)},_navigate:function(j,k){if(this.isAnimating){return false}this.options.onBeforeFlip(this.current);this.isAnimating=true;this.$current=this.$items.eq(this.current);if(k!==d){this.current=k}else{if(j==="next"&&this.options.direction==="ltr"||j==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===this.itemsCount-1){this.end=true}else{this.previous=this.current;this.current=this.current<this.itemsCount-1?this.current+1:0}}else{if(j==="prev"&&this.options.direction==="ltr"||j==="next"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===0){this.end=true}else{this.previous=this.current;this.current=this.current>0?this.current-1:this.itemsCount-1}}}}this.$nextItem=!this.options.circular&&this.end?this.$current:this.$items.eq(this.current);if(!this.support){this._layoutNoSupport(j)}else{this._layout(j)}},_layoutNoSupport:function(k){this.$items.hide();this.$nextItem.show();this.end=false;this.isAnimating=false;var j=k==="next"&&this.current===this.itemsCount-1||k==="prev"&&this.current===0;this.options.onEndFlip(this.previous,this.current,j)},_layout:function(l){var v=this,u=this._addSide("left",l),o=this._addSide("middle",l),j=this._addSide("right",l),r=u.find("div.bb-overlay"),t=o.find("div.bb-flipoverlay:first"),w=o.find("div.bb-flipoverlay:last"),s=j.find("div.bb-overlay"),k=this.end?400:this.options.speed;this.$items.hide();this.$el.prepend(u,o,j);o.css({transitionDuration:k+"ms",transitionTimingFunction:this.options.easing}).on(this.transEndEventName,function(y){if(f(y.target).hasClass("bb-page")){v.$el.children(".bb-page").remove();v.$nextItem.show();v.end=false;v.isAnimating=false;var x=l==="next"&&v.current===v.itemsCount-1||l==="prev"&&v.current===0;v.options.onEndFlip(v.previous,v.current,x)}});if(l==="prev"){o.addClass("bb-flip-initial")}if(this.options.shadows&&!this.end){var n=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}:{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides},q=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear"}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip},m=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip}:{transition:"opacity "+this.options.speed/2+"ms linear"},p=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"};t.css(q);w.css(m);r.css(n);s.css(p)}setTimeout(function(){o.addClass(v.end?"bb-flip-"+l+"-end":"bb-flip-"+l);if(v.options.shadows&&!v.end){t.css({opacity:l==="next"?v.options.shadowFlip:0});w.css({opacity:l==="next"?0:v.options.shadowFlip});r.css({opacity:l==="next"?v.options.shadowSides:0});s.css({opacity:l==="next"?0:v.options.shadowSides})}},25)},_addSide:function(l,k){var j;switch(l){case"left":j=f('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",102);break;case"middle":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:'+this.elWidth+'px"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-flipoverlay"></div></div></div></div>').css("z-index",103);break;case"right":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",101);break}return j},_startSlideshow:function(){var j=this;this.slideshow=setTimeout(function(){j._navigate("next");if(j.options.autoplay){j._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(k){k-=1;if(k===this.current||k>=this.itemsCount||k<0){return false}var j;if(this.options.direction==="ltr"){j=k>this.current?"next":"prev"}else{j=k>this.current?"prev":"next"}this._action(j,k)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},isActive:function(){return this.isAnimating},update:function(){var j=this.$items.eq(this.current);this.$items=this.$el.children(".bb-item");this.itemsCount=this.$items.length;this.current=j.index()},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.$el.removeClass("bb-"+this.options.orientation);this.$items.show();if(this.options.nextEl!==""){f(this.options.nextEl).off(".bookblock")}if(this.options.prevEl!==""){f(this.options.prevEl).off(".bookblock")}c.off("debouncedresize")}};var h=function(j){if(g.console){g.console.error(j)}};f.fn.bookblock=function(k){if(typeof k==="string"){var j=Array.prototype.slice.call(arguments,1);this.each(function(){var l=f.data(this,"bookblock");if(!l){h("cannot call methods on bookblock prior to initialization; attempted to call method '"+k+"'");return}if(!f.isFunction(l[k])||k.charAt(0)==="_"){h("no such method '"+k+"' for bookblock instance");return}l[k].apply(l,j)})}else{this.each(function(){var l=f.data(this,"bookblock");if(l){l._init()}else{l=f.data(this,"bookblock",new f.BookBlock(k,this))}})}return this}})(jQuery,window);
 
</script>
 
 
 
<script>
 
"use strict";
 
 
/*!
 
jQuery Plugin developed by Mario Duarte
 
https://github.com/Mario-Duarte/image-zoom-plugin/
 
Simple jQuery plugin that converts an image into a click to zoom image
 
perfect for store products and galleries
 
*/
 
(function ($) {
 
  // Thanks to Mozilla for this polyfill
 
  // find out more on - https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith
 
  function ReplaceWithPolyfill() {
 
    'use-strict'; // For safari, and IE > 10
 
 
    var parent = this.parentNode,
 
        i = arguments.length,
 
        currentNode;
 
    if (!parent) return;
 
    if (!i) // if there are no arguments
 
      parent.removeChild(this);
 
 
    while (i--) {
 
      // i-- decrements i and returns the value of i before the decrement
 
      currentNode = arguments[i];
 
 
      if (typeof currentNode !== 'object') {
 
        currentNode = this.ownerDocument.createTextNode(currentNode);
 
      } else if (currentNode.parentNode) {
 
        currentNode.parentNode.removeChild(currentNode);
 
      } // the value of "i" below is after the decrement
 
 
 
      if (!i) // if currentNode is the first argument (currentNode === arguments[0])
 
        parent.replaceChild(currentNode, this);else // if currentNode isn't the first
 
        parent.insertBefore(currentNode, this.previousSibling);
 
    }
 
  }
 
 
  if (!Element.prototype.replaceWith) {
 
    Element.prototype.replaceWith = ReplaceWithPolyfill;
 
  }
 
 
  if (!CharacterData.prototype.replaceWith) {
 
    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
 
  }
 
 
  if (!DocumentType.prototype.replaceWith) {
 
    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
 
  }
 
 
  const imageObj = {};
 
 
  $.fn.imageZoom = function (options) {
 
    // Default settings for the zoom level
 
    let settings = $.extend({
 
      zoom: 150
 
    }, options); // Main html template for the zoom in plugin
 
 
    imageObj.template = `
 
<figure class="containerZoom" style="background-image:url('${this.attr('src')}'); background-size: ${settings.zoom}%;">
 
<img id="imageZoom" src="${this.attr('src')}" alt="${this.attr('alt')}" />
 
</figure>
 
`; // Where all the magic happens, This will detect the position of your mouse
 
    // in relation to the image and pan the zoomed in background image in the
 
    // same direction
 
 
    function zoomIn(e) {
 
      let zoomer = e.currentTarget;
 
      let x, y, offsetX, offsetY;
 
      e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
 
      e.offsetY ? offsetY = e.offsetY : offsetY = e.touches[0].pageX;
 
      x = offsetX / zoomer.offsetWidth * 100;
 
      y = offsetY / zoomer.offsetHeight * 100;
 
      $(zoomer).css({
 
        "background-position": `${x}% ${y}%`
 
      });
 
    } // Main function to attach all events after replacing the image tag with
 
    // the main template code
 
 
 
    function attachEvents(container) {
 
      container = $(container);
 
      container.on('click', function (e) {
 
        if ("zoom" in imageObj == false) {
 
          // zoom is not defined, let define it and set it to false
 
          imageObj.zoom = false;
 
        }
 
 
        if (imageObj.zoom) {
 
          imageObj.zoom = false;
 
          $(this).removeClass('active');
 
        } else {
 
          imageObj.zoom = true;
 
          $(this).addClass('active');
 
          zoomIn(e);
 
        }
 
      });
 
      container.on('mousemove', function (e) {
 
        imageObj.zoom ? zoomIn(e) : null;
 
      });
 
      container.on('mouseleave', function () {
 
        imageObj.zoom = false;
 
        $(this).removeClass('active');
 
      });
 
    }
 
 
    let newElm = $(this).replaceWith(imageObj.template);
 
    attachEvents($('.containerZoom')[$('.containerZoom').length - 1]); // return updated element to allow for jQuery chained events
 
 
    return newElm;
 
  };
 
})(jQuery);
 
</script>
 
<script>
 
    var Page = (function() {
 
 
      var config = {
 
          $bookBlock: $('#bb-bookblock'),
 
          $navNext: $('#bb-nav-next'),
 
          $navPrev: $('#bb-nav-prev'),
 
          $navFirst: $('#bb-nav-first'),
 
          $navLast: $('#bb-nav-last')
 
        },
 
        init = function() {
 
          config.$bookBlock.bookblock({
 
            speed: 1000,
 
            shadowSides: 0.8,
 
            shadowFlip: 0.4
 
          });
 
          initEvents();
 
        },
 
        initEvents = function() {
 
 
          var $slides = config.$bookBlock.children();
 
 
          // add navigation events
 
          config.$navNext.on('click touchstart', function() {
 
            config.$bookBlock.bookblock('next');
 
            return false;
 
          });
 
 
          config.$navPrev.on('click touchstart', function() {
 
            config.$bookBlock.bookblock('prev');
 
            return false;
 
          });
 
 
          config.$navFirst.on('click touchstart', function() {
 
            config.$bookBlock.bookblock('first');
 
            return false;
 
          });
 
 
          config.$navLast.on('click touchstart', function() {
 
            config.$bookBlock.bookblock('last');
 
            return false;
 
          });
 
 
          // add swipe events
 
          $slides.on({
 
            'swipeleft': function(event) {
 
              config.$bookBlock.bookblock('next');
 
              return false;
 
            },
 
            'swiperight': function(event) {
 
              config.$bookBlock.bookblock('prev');
 
              return false;
 
            }
 
          });
 
 
          // add keyboard events
 
          $(document).keydown(function(e) {
 
            var keyCode = e.keyCode || e.which,
 
              arrow = {
 
                left: 37,
 
                up: 38,
 
                right: 39,
 
                down: 40
 
              };
 
 
            switch (keyCode) {
 
              case arrow.left:
 
                config.$bookBlock.bookblock('prev');
 
                break;
 
              case arrow.right:
 
                config.$bookBlock.bookblock('next');
 
                break;
 
            }
 
          });
 
        };
 
 
      return {
 
        init: init
 
      };
 
 
    })();
 
   
 
  </script>
 
  <script>
 
    Page.init();
 
  </script>
 
  
 
   <script>
 
   <script>
Line 2,222: Line 1,640:
 
         $(window).scroll(function() {
 
         $(window).scroll(function() {
 
           // set distance user needs to scroll before we start fadeIn
 
           // set distance user needs to scroll before we start fadeIn
           if ($(this).scrollTop() > $books.height()) { //For dynamic effect use $nav.height() instead of '100'
+
           if ($(this).scrollTop() > $books.height()) {  
 
             $nav.fadeIn();
 
             $nav.fadeIn();
 
           } else {
 
           } else {
Line 2,233: Line 1,651:
 
         $(window).scroll(function() {
 
         $(window).scroll(function() {
 
           // set distance user needs to scroll before we start fadeIn
 
           // set distance user needs to scroll before we start fadeIn
           if ($(this).scrollTop() > $books.height()) { //For dynamic effect use $nav.height() instead of '100'
+
           if ($(this).scrollTop() > $books.height()) {  
 
             $pageNav.fadeIn();
 
             $pageNav.fadeIn();
 
           } else {
 
           } else {
Line 2,251: Line 1,669:
 
   </script>
 
   </script>
 
</body>
 
</body>
 +
 +
 
</html>
 
</html>

Latest revision as of 13:52, 16 December 2020