Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

m
 
(93 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
−
 
 
<html>
 
<html>
  
 
<head>
 
<head>
−
        <script src="https://www.amcharts.com/lib/3/ammap.js"></script>
+
    <!-- Bootstrap required meta tags -->
−
     <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
+
     <meta charset="utf-8">
−
     <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
     <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+
 
−
     <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+
    <!-- Bootstrap css-->
 +
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
 
 +
     <!-- Fonts -->
 +
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
 
 
     <style>
 
     <style>
−
         #chartdiv {
+
 
 +
         /**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ***************************************************/
 +
/**********************************************************************************************************************/
 +
.slideshow {
 +
position: relative;
 +
width: 80%;
 +
height: 80%;
 +
        margin: 0 10%;
 +
        overflow-y: hidden;
 +
}
 +
 
 +
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
 +
position:absolute;
 +
right:0;
 +
top:0;
 +
height:100%;
 +
width:100px;
 +
background: rgba(0,0,0,0.3);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    z-index:75;
 +
    cursor:pointer;
 +
}
 +
 
 +
.slideshow .left-arrow-pane {
 +
left:0;
 +
width:82px;
 +
right:auto;
 +
}
 +
 
 +
.slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
 +
position:absolute;
 +
top:50%;
 +
left:30%;
 +
transform:translate(-50%, -50%);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 +
}
 +
 
 +
.slideshow .left-arrow-pane .arrow {
 +
right:30%;
 +
left:auto;
 +
transform: translate(50%, -50%);
 +
}
 +
 
 +
.slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
 +
height:50px;
 +
width:50px;
 +
transform:rotate(45deg);
 +
border-style: solid;
 +
border-color: rgba(255, 255, 255, .5);
 +
border-width:5px 5px 0 0;
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
 +
 
 +
.slideshow .left-arrow-pane .arrow div{
 +
transform:rotate(-135deg);
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
 +
background:rgba(0,0,0,.25);
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover .arrow {
 +
left:35%;
 +
}
 +
 
 +
.slideshow .left-arrow-pane:hover .arrow {
 +
right:35%;
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
 +
border-color:rgb(255,255,255);
 +
}
 +
 
 +
.slideshow .bubbles {
 +
position:absolute;
 +
width:100%;
 +
height:10%;
 +
bottom:0;
 +
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 +
}
 +
 
 +
.slideshow .bubbles div {
 +
height:30px;
 +
width:30px;
 +
border-radius:5px;
 +
border:solid white 3px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
 +
 
 +
.slideshow .bubbles div:last-child {
 +
margin-right: 0;
 +
}
 +
 
 +
.slideshow .bubbles div:hover {
 +
background-color: white;
 +
}
 +
 
 +
.slideshow .bubbles div.active {
 +
background-color:white;
 +
}
 +
 
 +
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:60px;
 +
width:60px;
 +
bottom:20px;
 +
right:150px;
 +
background:rgba(34,34,34,.75);
 +
border-radius:10px;
 +
z-index:60;
 +
}
 +
 
 +
.slideshow .pauseBtn .bars {
 +
visibility: hidden;
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:30px;
 +
height:35px;
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div{
 +
float:right;
 +
width:10px;
 +
height:100%;
 +
background:rgba(255,255,255,.75);
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div:first-child {
 +
float:left;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover {
 +
background: rgba(34,34,34,1);
 +
cursor: pointer;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .bars > div {
 +
background: rgba(255,255,255,1);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri {
 +
visibility: hidden;
 +
position: absolute;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri > div {
 +
width: 0;
 +
height: 0;
 +
border-top: 18px solid transparent;
 +
border-left-style: solid;
 +
border-left-width: 30px;
 +
border-left-color:rgba(255,255,255,.75);
 +
border-bottom: 18px solid transparent;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
 +
 
 +
.slideshow .content {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
        overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide {
 +
visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow-y: hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
.slideshow .content .slide video, .slideshow .content .slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 
 +
.slideshow .content .slide:first-child {
 +
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
        width: 100%;
 +
}
 +
 
 +
.slideshow .content .slide > img:first-child {
 +
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide.active {
 +
left:0 !important;
 +
}
 +
 
 +
.slideshow .content .slide.left {
 +
left:-100vw !important;
 +
}
 +
 
 +
.slideshow .content .slide.right {
 +
left:100vw !important;
 +
}
 +
 
 +
.splash .slideshow .title {
 +
top:65%;
 +
left:200px;
 +
}
 +
 
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
 +
 
 +
.notransition {
 +
-webkit-transition: none !important;
 +
    -moz-transition: none !important;
 +
    -ms-transition: none !important;
 +
    -o-transition: none !important;
 +
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW *****************************************************/
 +
 
 +
 
 +
#scroll-section {
 +
  display: contents;
 +
}
 +
.header-main-page {
 +
  width: 100%;
 +
  height: 100%;
 +
  background: rgb(157,217,223);
 +
}
 +
 
 +
#video-main-page {
 +
  width: 100%;
 +
  background: #9dd8dd;
 +
  transition: all 0.6s;
 +
  position: fixed;
 +
  z-index: 200;
 +
}
 +
#skip-btn {
 +
  z-index: 201;
 +
  background: rgba(0,0,0,0.3);
 +
  color: whitesmoke;
 +
  font-size: 8vh;
 +
  width: 15vw;
 +
  height: 9vh;
 +
  line-height: 1em;
 +
  text-align: center;
 +
  position: fixed;
 +
  border-radius: 10px;
 +
  bottom: 1%;
 +
  right: 1%;
 +
  transition: all 0.2s;
 +
  -webkit-transition: all 0.2s;
 +
}
 +
 
 +
#skip-btn:hover {
 +
  cursor: pointer;
 +
  background: rgba(0,0,0,0.5);
 +
}
 +
#bacteria-nadando {
 +
  width: 30vw;
 +
  height: 30vw;
 +
  left: 35vw;
 +
  position: fixed;
 +
  z-index: 1;
 +
  background: url(https://static.igem.org/mediawiki/2018/7/74/T--Tec-Monterrey--Frame_1_interactive_gif.png);
 +
  background-size: cover;
 +
}
 +
 
 +
#hiding-block {
 +
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);
 +
  z-index: 3;
 +
  width: 100%;
 +
  height: 100vh;
 +
  float: left;
 +
  position: sticky;
 +
}
 +
 
 +
#fixed-title {
 +
  width: 50%;
 +
  height: 35vh;
 +
  font-size: 13vw;
 +
  font-weight: 700;
 +
  font-family: "DosisRegular", sans-serif;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  position: absolute;
 +
  left: 25%;
 +
  top: 25%;
 +
  z-index: 2;
 +
  color: rgba(246,246,246,0.9);
 +
}
 +
 
 +
#fixed-subtitle {
 +
  width: 100%;
 +
  font-size: 6vw;
 +
  font-weight: 500;
 +
  font-family: "Norwester", monospace;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  z-index: 2;
 +
  color: rgba(47,99,97,0.6);
 +
}
 +
 
 +
.topBarWrapper {
 +
  display: contents !important;
 +
}
 +
 
 +
#background-river {
 +
  height: auto;
 +
  background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png);
 +
  width: 100%;
 +
  background-position-x: center;
 +
  background-size: cover;
 +
  background-repeat-y: no-repeat;
 +
}
 +
 
 +
.main-info-container-left {
 +
  width: 30%;
 +
  height: auto;
 +
  margin-top: 30%;
 +
  margin-left: 2.5vw;
 +
  float: left;
 +
}
 +
 
 +
.main-info-container-right {
 +
  width: 30%;
 +
  height: auto;
 +
  margin-top: 50%;
 +
  margin-right: 2.5vw;
 +
  float: right;
 +
}
 +
 
 +
.main-info {
 +
  width: 100%;
 +
  height: 30vw;
 +
  background: white;
 +
  margin-top: 40vh;
 +
}
 +
 
 +
@media screen and (max-width: 900px) {
 +
  .main-info-container-left {
 +
    width: 40%;
 +
  }
 +
  .main-info-container-right {
 +
    width: 40%;
 +
  }
 +
  #bacteria-nadando {
 +
    display: none;
 +
  }
 +
  #hiding-block {
 +
    display: none;
 +
  }
 +
  #background-river {
 +
    height: 400vh;
 +
  }
 +
  #video-main-page {
 +
    display: none;
 +
  }
 +
  #skip-btn {
 +
    display: none;
 +
  }
 +
}
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
 
 +
    <div id="scroll-section">
 +
        <header id="page-top" class="header-main-page">
 +
        </header>
 +
 
 +
        <div id="background-river">
 +
            <div class="main-info-container-left">
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div class="main-info-container-right">
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div id="hiding-block">
 +
            </div>
 +
 
 +
            <br class="clearBoth" />
 +
        </div> <!-- background-river ends -->
 +
 
 +
        <div id="fixed-title">
 +
            E. coding
 +
            <div id="fixed-subtitle">Tec-Monterrey</div>
 +
        </div>
 +
 
 +
        <div id="bacteria-nadando">
 +
        </div>
 +
    </div> <!-- scroll section ends -->
 +
 
 +
    <section style="height: 90vw">
 +
        <style>
 +
            #dropzoneWrapper {
 
             width: 100%;
 
             width: 100%;
−
             height: 500px;
+
             height: auto;
 +
        }
 +
        #outer-dropzone {
 +
            height: 60vw;
 +
            width: 60vw;
 +
            left: 30vw;
 +
            touch-action: none;
 +
        }
 +
   
 +
        .dropzone {
 +
            background-color: black;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            padding: 10px;
 +
            width: 80%;
 +
            transition: background-color 0.3s;
 
         }
 
         }
  
−
         .map-marker {
+
         .drop-active {
−
             /* adjusting for the marker dimensions
+
             border-color: #aaa;
−
    so that it is centered on coordinates */
+
−
            margin-left: -8px;
+
−
            margin-top: -8px;
+
 
         }
 
         }
  
−
         .map-marker.map-clickable {
+
         .drop-target {
−
             cursor: pointer;
+
             background-color: #29e;
 +
            border-style: solid;
 
         }
 
         }
  
−
         .pulse {
+
         .drag-drop {
−
             width: 10px;
+
             display: inline-block;
−
             height: 10px;
+
             height: 10vh;
−
             border: 5px solid #f7f14c;
+
             width: 10vh;
−
             -webkit-border-radius: 30px;
+
             z-index: 50;
−
             -moz-border-radius: 30px;
+
 
−
             border-radius: 30px;
+
             -webkit-transform: translate(0px, 0px);
−
             background-color: #716f42;
+
             transform: translate(0px, 0px);
−
            z-index: 10;
+
 
−
            position: absolute;
+
             transition: background-color 0.3s;
 
         }
 
         }
  
−
         .map-marker .dot {
+
         .drag-drop img {
−
            border: 10px solid #fff601;
+
−
            background: transparent;
+
−
            -webkit-border-radius: 60px;
+
−
            -moz-border-radius: 60px;
+
−
            border-radius: 60px;
+
−
            height: 50px;
+
−
            width: 50px;
+
−
            -webkit-animation: pulse 3s ease-out;
+
−
            -moz-animation: pulse 3s ease-out;
+
−
            animation: pulse 3s ease-out;
+
−
            -webkit-animation-iteration-count: infinite;
+
−
            -moz-animation-iteration-count: infinite;
+
−
            animation-iteration-count: infinite;
+
 
             position: absolute;
 
             position: absolute;
−
             top: -20px;
+
             height: 100%;
−
             left: -20px;
+
            width: 100%;
 +
            border-radius: 50%;
 +
             z-index: 50;
 +
        }
 +
 
 +
        .drag-drop.can-drop {
 +
            color: #000;
 +
            /*background-color: #4e4;*/
 +
            z-index: 50;
 +
        }
 +
       
 +
       
 +
        #backgroundHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: relative;
 
             z-index: 1;
 
             z-index: 1;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_Background {
 +
            height: 100%;
 +
        }
 +
       
 +
        #plasmidHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 3;
 +
            background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_CutPlasmidFull {
 +
            height: 100%;
 +
        }
 +
       
 +
        #colorsWrapper {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 2;
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
        #color1 {
 
             opacity: 0;
 
             opacity: 0;
 +
            left: 48%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: yellow;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color2 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: red;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color3 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: aqua;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color4 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: pink;
 +
            position: absolute;
 +
            z-index:3;
 
         }
 
         }
  
−
         @-moz-keyframes pulse {
+
          
−
            0% {
+
    </style>
−
                -moz-transform: scale(0);
+
−
                opacity: 0.0;
+
−
            }
+
  
−
            25% {
 
−
                -moz-transform: scale(0);
 
−
                opacity: 0.1;
 
−
            }
 
  
−
            50% {
 
−
                -moz-transform: scale(0.1);
 
−
                opacity: 0.3;
 
−
            }
 
  
−
            75% {
+
        <div style="height: 10vh; width: 100%; background-color: black;"><p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">DRAG AND DROP!</p></div>
−
                 -moz-transform: scale(0.5);
+
        <div id="dropzoneWrapper" style="background-color: black">
−
                 opacity: 0.5;
+
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
−
            }
+
                 <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
 +
            </div>
 +
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <br>
 +
                    <br>
 +
                    <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
 +
                 </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 +
                </div>
  
−
             100% {
+
             </div>
−
                 -moz-transform: scale(1);
+
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
−
                 opacity: 0.0;
+
                <div style="background-color: black; height: 50%; text-align: center;">
−
             }
+
                    <br>
−
         }
+
                    <br>
 +
                    <div id="acebae" class="drag-drop" style="margin: auto"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
 +
                 </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
 +
                </div>
 +
            </div>
 +
            <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
 +
                <div id="outer-dropzone" class="dropzone">
 +
                    <div id="backgroundHolder">
 +
                        <div id="colorsWrapper">
 +
                            <div id="color1"></div>
 +
                            <div id="color2"></div>
 +
                            <div id="color3"></div>
 +
                            <div id="color4"></div>
 +
                        </div>
 +
                        <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
 +
                        </div>
 +
                    </div>
 +
                 </div>
 +
            </div>
 +
        </div>
 +
        <script>
 +
           
 +
            $(document).on('scroll', function() {
 +
                if($(this).scrollTop()>=$('#gifDiv').position().top){
 +
                    $("#gifDiv").css("background-color: green;");
 +
                    setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
 +
                }
 +
             });
 +
               
 +
                       
 +
         document.addEventListener("DOMContentLoaded", function(event) {
 +
            // target elements with the "draggable" class
 +
        interact('.draggable')
 +
            .draggable({
 +
                // enable inertial throwing
 +
                inertia: true,
 +
                // keep the element within the area of it's parent
 +
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
                        top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                // enable autoScroll
 +
                autoScroll: true,
  
−
        @-webkit-keyframes "pulse" {
+
                // call this function on every dragmove event
−
            0% {
+
                onmove: dragMoveListener,
−
                 -webkit-transform: scale(0);
+
                 // call this function on every dragend event
−
                opacity: 0.0;
+
                onend: function(event) {
−
            }
+
                    var textEl = event.target.querySelector('p');
  
−
            25% {
+
                    (textEl.textContent =
−
                -webkit-transform: scale(0);
+
                        'moved a distance of ' +
−
                opacity: 0.1;
+
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
−
             }
+
                            Math.pow(event.pageY - event.y0, 2) | 0))
 +
                        .toFixed(2) + 'px');
 +
                }
 +
             });
  
−
            50% {
+
        function dragMoveListener(event) {
−
                 -webkit-transform: scale(0.1);
+
            var target = event.target,
−
                 opacity: 0.3;
+
                 // keep the dragged position in the data-x/data-y attributes
−
            }
+
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
 +
                 y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
−
             75% {
+
             // translate the element
−
                -webkit-transform: scale(0.5);
+
            target.style.webkitTransform =
−
                 opacity: 0.5;
+
                 target.style.transform =
−
            }
+
                'translate(' + x + 'px, ' + y + 'px)';
  
−
             100% {
+
             // update the posiion attributes
−
                -webkit-transform: scale(1);
+
            target.setAttribute('data-x', x);
−
                opacity: 0.0;
+
            target.setAttribute('data-y', y);
−
            }
+
 
         }
 
         }
−
    </style>
 
−
    <script>
 
−
        /**
 
−
* This example uses pulsating circles CSS by Kevin Urrutia
 
−
* http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle
 
−
*/
 
  
−
var map = AmCharts.makeChart( "chartdiv", {
 
−
  "type": "map",
 
−
  "theme": "light",
 
−
  "projection": "miller",
 
  
−
  "imagesSettings": {
+
        /* The dragging code for '.draggable' from the demo above
−
    "rollOverColor": "#089282",
+
        * applies to this demo as well so it doesn't have to be repeated. */
−
    "rollOverScale": 3,
+
−
    "selectedScale": 3,
+
−
    "selectedColor": "#089282",
+
−
    "color": "#13564e"
+
−
  },
+
  
−
  "areasSettings": {
+
        // enable draggables to be dropped into this
−
    "unlistedAreasColor": "#15A892"
+
        interact('.dropzone').dropzone({
−
  },
+
            // only accept elements matching this CSS selector
 +
            // accept: '#yes-drop',
 +
            // Require a 75% element overlap for a drop to be possible
 +
            overlap: 0.75,
  
−
  "dataProvider": {
+
            // listen for drop related events:
−
    "map": "worldLow",
+
−
    "images": [ {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Brussels",
+
−
      "latitude": 50.8371,
+
−
      "longitude": 4.3676
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Copenhagen",
+
−
      "latitude": 55.6763,
+
−
      "longitude": 12.5681
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Paris",
+
−
      "latitude": 48.8567,
+
−
      "longitude": 2.3510
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Reykjavik",
+
−
      "latitude": 64.1353,
+
−
      "longitude": -21.8952
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Moscow",
+
−
      "latitude": 55.7558,
+
−
      "longitude": 37.6176
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Madrid",
+
−
      "latitude": 40.4167,
+
−
      "longitude": -3.7033
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "London",
+
−
      "latitude": 51.5002,
+
−
      "longitude": -0.1262,
+
−
      "url": "http://www.google.co.uk"
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Peking",
+
−
      "latitude": 39.9056,
+
−
      "longitude": 116.3958
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "New Delhi",
+
−
      "latitude": 28.6353,
+
−
      "longitude": 77.2250
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Tokyo",
+
−
      "latitude": 35.6785,
+
−
      "longitude": 139.6823,
+
−
      "url": "http://www.google.co.jp"
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Ankara",
+
−
      "latitude": 39.9439,
+
−
      "longitude": 32.8560
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Buenos Aires",
+
−
      "latitude": -34.6118,
+
−
      "longitude": -58.4173
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Brasilia",
+
−
      "latitude": -15.7801,
+
−
      "longitude": -47.9292
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Ottawa",
+
−
      "latitude": 45.4235,
+
−
      "longitude": -75.6979
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Washington",
+
−
      "latitude": 38.8921,
+
−
      "longitude": -77.0241
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Kinshasa",
+
−
      "latitude": -4.3369,
+
−
      "longitude": 15.3271
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Cairo",
+
−
      "latitude": 30.0571,
+
−
      "longitude": 31.2272
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Pretoria",
+
−
      "latitude": -25.7463,
+
−
      "longitude": 28.1876
+
−
    } ]
+
−
  }
+
−
} );
+
  
−
// add events to recalculate map position when the map is moved or zoomed
+
            ondropactivate: function(event) {
−
map.addListener( "positionChanged", updateCustomMarkers );
+
                // activates when you grab an object
 +
                // add active dropzone feedback
 +
                event.target.classList.add('drop-active');
 +
                //console.log("a");
 +
            },
 +
            ondragenter: function(event) {
 +
                // activates when object enters dropzone
 +
                var draggableElement = event.relatedTarget,
 +
                    dropzoneElement = event.target;
  
−
// this function will take current images on the map and create HTML elements for them
+
                // feedback the possibility of a drop
−
function updateCustomMarkers( event ) {
+
                dropzoneElement.classList.add('drop-target');
−
  // get map object
+
                draggableElement.classList.add('can-drop');
−
  var map = event.chart;
+
                // draggableElement.textContent = 'Dragged in';
 +
                //console.log("b");
 +
            },
 +
            ondragleave: function(event) {
 +
                // activates when object leaves dropzone
 +
                // remove the drop feedback style
 +
                event.target.classList.remove('drop-target');
 +
                event.relatedTarget.classList.remove('can-drop');
 +
                //event.relatedTarget.textContent = 'Dragged out';
 +
                //console.log("c");
 +
            },
 +
            ondrop: function(event) {
 +
                // activates when object is dropped in dropzone
 +
                // event.relatedTarget.textContent = 'Dropped';
 +
                var draggableElementID = event.relatedTarget.id;
 +
                if (event.relatedTarget.id == "alan") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color1").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "esteban") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                document.getElementById("color2").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "acebae") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color3").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "sofi") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color4").style.opacity = "1";
 +
                }
 +
                //console.log("d");
 +
            },
 +
            ondropdeactivate: function(event) {
 +
                // activates when you drop an object anywhere
 +
                // remove active dropzone feedback
 +
                event.target.classList.remove('drop-active');
 +
                event.target.classList.remove('drop-target');
 +
                //console.log("e");
 +
            }
 +
        });
  
−
  // go through all of the images
+
        interact('.drag-drop')
−
  for ( var x in map.dataProvider.images ) {
+
            .draggable({
−
    // get MapImage object
+
                inertia: true,
−
    var image = map.dataProvider.images[ x ];
+
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
  
−
     // check if it has corresponding HTML element
+
                        top: 0,
−
     if ( 'undefined' == typeof image.externalElement )
+
                        left: 0,
−
      image.externalElement = createCustomMarker( image );
+
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                autoScroll: true,
 +
                // dragMoveListener from the dragging demo above
 +
                onmove: dragMoveListener,
 +
            });
 +
        });
 +
     </script>
 +
    </section>
 +
     <section>
 +
        <div class="slideshow">
 +
            <div class='right-arrow-pane'>
 +
                <div class='arrow'>
 +
                    <div></div>
 +
                </div>
 +
            </div>
 +
            <div class='left-arrow-pane'>
 +
                <div class='arrow'>
 +
                    <div></div>
 +
                </div>
 +
            </div>
 +
            <div class='bubbles'>
 +
            </div>
 +
            <div class='pauseBtn'>
 +
                <div class='bars'>
 +
                    <div></div>
 +
                    <div></div>
 +
                </div>
 +
                <div class='tri'>
 +
                    <div></div>
 +
                </div>
 +
            </div>
 +
            <div class='content'>
 +
                <div class='slide'>
 +
                    <video autoplay loop muted>
 +
                        <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 +
                    </video>
 +
                </div>
 +
                <div class='slide'>
 +
                    <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 +
                </div>
 +
                <div class='slide'>
 +
                    <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 +
                </div>
 +
                <div class='slide'>
 +
                    <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 +
                </div>
 +
            </div>
 +
        </div>
  
−
     // reposition the element accoridng to coordinates
+
     <div class="slideshow">
−
    var xy = map.coordinatesToStageXY( image.longitude, image.latitude );
+
        <div class='right-arrow-pane'>
−
    image.externalElement.style.top = xy.y + 'px';
+
            <div class='arrow'>
−
    image.externalElement.style.left = xy.x + 'px';
+
                <div></div>
−
  }
+
            </div>
−
}
+
        </div>
 +
        <div class='left-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='bubbles'>
 +
        </div>
 +
        <div class='pauseBtn'>
 +
            <div class='bars'>
 +
                <div></div>
 +
                <div></div>
 +
            </div>
 +
            <div class='tri'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='content'>
 +
            <div class='slide'>
 +
                <video autoplay loop muted>
 +
                    <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 +
                </video>
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 +
            </div>
 +
        </div>
 +
    </div>
  
−
// this function creates and returns a new marker element
+
        <script>
−
function createCustomMarker( image ) {
+
            var screen_900 = window.matchMedia("(max-width: 900px)");
−
  // create holder
+
            var screen_1024 = window.matchMedia("(min-width: 1024px)");
−
  var holder = document.createElement( 'div' );
+
            var screen_1280 = window.matchMedia("(min-width: 1280px)");
−
  holder.className = 'map-marker';
+
            var screen_1440 = window.matchMedia("(min-width: 1440px)");
−
  holder.title = image.title;
+
            var screen_1680 = window.matchMedia("(min-width: 1680px)");
−
  holder.style.position = 'absolute';
+
            var screen_1920 = window.matchMedia("(min-width: 1920px)");
 +
            var position = 3000;
  
−
  // maybe add a link to it?
+
            $(window).on('beforeunload', function() {
−
  if ( undefined != image.url ) {
+
                $(window).scrollTop(0);
−
    holder.onclick = function() {
+
            });
−
      window.location.href = image.url;
+
−
    };
+
−
    holder.className += ' map-clickable';
+
−
  }
+
  
−
  // create dot
+
            if (screen_900.matches) {
−
  var dot = document.createElement( 'div' );
+
                var timeoutVar = 0;
−
  dot.className = 'dot';
+
            } else if (screen_1024.matches) {
−
  holder.appendChild( dot );
+
                position = 3450;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1280.matches) {
 +
                position = 4500;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1440.matches) {
 +
                position = 6000;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1680.matches) {
 +
                position = 6500;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1920.matches) {
 +
                position = 7500;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else {
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            }
  
−
  // create pulse
+
            function slideVideo() {
−
  var pulse = document.createElement( 'div' );
+
                $("#video-main-page").css('transform', 'translateY(-100%)');
−
  pulse.className = 'pulse';
+
                $("#skip-btn").css('transform', 'translateY(-100%)');
−
  holder.appendChild( pulse );
+
                $("#skip-btn").css({
 +
                    'top': '-10%'
 +
                });
 +
            }
  
−
  // append the marker to the map container
+
            function map(value, in_min, in_max, out_min, out_max) {
−
  image.chart.chartDiv.appendChild( holder );
+
                return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 +
            }
  
−
  return holder;
+
            //******************************************************* SCROLL OPACITY ***********************************************
−
}
+
−
   
+
−
    </script>
+
−
</head>
+
  
−
<body>
+
            var hiding = document.getElementById("hiding-block");
−
    <div id="chartdiv"></div>
+
            var bacteria = document.getElementById("bacteria-nadando");
  
 +
            $(window).scroll(function(event) {
 +
 +
                var hidingPos = hiding.offsetTop;
 +
                var bacteriaPos = bacteria.offsetTop;
 +
 +
                var scroll = $(window).scrollTop();
 +
                var scrollOpacity = map(scroll, 0, 350, 1, 0);
 +
                //var scrollFade = map(scroll, 350, 0, 0, 1);
 +
                var bacteriaOpacity = map(scroll, 0, 500, 0, 1);
 +
                var bacteriaTop = map(scroll, 900, 2000, -100, 100);
 +
                var bacteriaRotate = map(scroll, 0, 700, 50, 0);
 +
                if (scroll > hidingPos) {
 +
                    $('#bacteria-nadando ').css('opacity', '0');
 +
                } else {
 +
                    $('#bacteria-nadando ').css('opacity', bacteriaOpacity);
 +
                    $('#bacteria-nadando ').css('top', bacteriaTop + 'px');
 +
                }
 +
            });
 +
 +
            //******************************************************* Video Controls *******************************************
 +
 +
            $("#video-main-page").bind("ended", function() {
 +
                slideVideo()
 +
            });
 +
 +
            $("#skip-btn").click(function() {
 +
                clearTimeout(timeoutVar);
 +
                $(window).scrollTop(0);
 +
                slideVideo();
 +
            });
 +
           
 +
           
 +
        </script>
 +
        <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 +
action=raw&ctype=text/javascript"></script>
 +
    </section>
 
</body>
 
</body>
  
 
</html>
 
</html>
−
 
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Latest revision as of 01:29, 18 October 2018


E. coding
Tec-Monterrey

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors