Davidacevedo (Talk | contribs) |
EstebanDLPT (Talk | contribs) m |
||
(46 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> | ||
<!-- Bootstrap required meta tags --> | <!-- Bootstrap required meta tags --> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
− | + | ||
<!-- Bootstrap css--> | <!-- Bootstrap css--> | ||
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | ||
− | + | ||
<!-- Fonts --> | <!-- Fonts --> | ||
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet"> | ||
Line 14: | Line 15: | ||
<style> | <style> | ||
− | /**********************************************************************************************************************/ | + | /**********************************************************************************************************************/ |
/******************************************************* SLIDESHOW ***************************************************/ | /******************************************************* SLIDESHOW ***************************************************/ | ||
/**********************************************************************************************************************/ | /**********************************************************************************************************************/ | ||
Line 415: | Line 416: | ||
} | } | ||
</style> | </style> | ||
− | + | </head> | |
− | + | ||
− | < | + | <body> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div id=" | + | <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> <!-- scroll section ends --> | + | <div id="bacteria-nadando"> |
+ | </div> | ||
+ | </div> <!-- scroll section ends --> | ||
− | <section | + | <section style="height: 90vw"> |
− | + | <style> | |
− | + | #dropzoneWrapper { | |
− | + | width: 100%; | |
height: auto; | height: auto; | ||
− | |||
− | |||
} | } | ||
#outer-dropzone { | #outer-dropzone { | ||
− | height: | + | height: 60vw; |
− | width: | + | width: 60vw; |
+ | left: 30vw; | ||
touch-action: none; | touch-action: none; | ||
} | } | ||
.dropzone { | .dropzone { | ||
− | background-color: | + | background-color: black; |
border: dashed 4px transparent; | border: dashed 4px transparent; | ||
border-radius: 4px; | border-radius: 4px; | ||
− | |||
padding: 10px; | padding: 10px; | ||
width: 80%; | width: 80%; | ||
Line 493: | Line 488: | ||
.drop-target { | .drop-target { | ||
background-color: #29e; | background-color: #29e; | ||
− | |||
border-style: solid; | border-style: solid; | ||
} | } | ||
Line 499: | Line 493: | ||
.drag-drop { | .drag-drop { | ||
display: inline-block; | display: inline-block; | ||
− | + | height: 10vh; | |
− | height: | + | width: 10vh; |
− | width: | + | z-index: 50; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
-webkit-transform: translate(0px, 0px); | -webkit-transform: translate(0px, 0px); | ||
Line 515: | Line 505: | ||
.drag-drop img { | .drag-drop img { | ||
position: absolute; | position: absolute; | ||
− | height: | + | height: 100%; |
− | width: | + | width: 100%; |
border-radius: 50%; | border-radius: 50%; | ||
+ | z-index: 50; | ||
} | } | ||
Line 523: | Line 514: | ||
color: #000; | color: #000; | ||
/*background-color: #4e4;*/ | /*background-color: #4e4;*/ | ||
+ | z-index: 50; | ||
} | } | ||
+ | |||
#backgroundHolder { | #backgroundHolder { | ||
− | width: | + | width: 60vw; |
− | height: | + | height: 60vw; |
position: relative; | position: relative; | ||
z-index: 1; | z-index: 1; | ||
Line 534: | Line 527: | ||
background-size: 100%; | background-size: 100%; | ||
} | } | ||
− | |||
#interactive_Background { | #interactive_Background { | ||
Line 541: | Line 533: | ||
#plasmidHolder { | #plasmidHolder { | ||
− | width: | + | width: 60vw; |
− | height: | + | height: 60vw; |
position: absolute; | position: absolute; | ||
z-index: 3; | z-index: 3; | ||
Line 555: | Line 547: | ||
#colorsWrapper { | #colorsWrapper { | ||
− | width: | + | width: 60vw; |
− | height: | + | height: 60vw; |
position: absolute; | position: absolute; | ||
z-index: 2; | z-index: 2; | ||
Line 605: | Line 597: | ||
</style> | </style> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <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> | |
− | + | <div id="dropzoneWrapper" style="background-color: black"> | |
− | + | <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> | ||
− | <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')"> | + | <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;"> 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;"> NO3</p> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 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;"> 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;"> 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> | ||
</div> | </div> | ||
− | + | <script> | |
− | + | ||
− | + | $(document).on('scroll', function() { | |
− | // target elements with the "draggable" class | + | 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') | interact('.draggable') | ||
.draggable({ | .draggable({ | ||
Line 634: | Line 663: | ||
// keep the element within the area of it's parent | // keep the element within the area of it's parent | ||
restrict: { | restrict: { | ||
− | restriction: " | + | restriction: "#dropzoneWrapper", |
endOnly: true, | endOnly: true, | ||
elementRect: { | elementRect: { | ||
Line 746: | Line 775: | ||
inertia: true, | inertia: true, | ||
restrict: { | restrict: { | ||
− | restriction: " | + | restriction: "#dropzoneWrapper", |
endOnly: true, | endOnly: true, | ||
elementRect: { | elementRect: { | ||
Line 760: | Line 789: | ||
onmove: dragMoveListener, | onmove: dragMoveListener, | ||
}); | }); | ||
+ | }); | ||
</script> | </script> | ||
− | </section> | + | </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> | ||
<div class="slideshow"> | <div class="slideshow"> | ||
<div class='right-arrow-pane'> | <div class='right-arrow-pane'> | ||
− | <div class='arrow'><div></div></div> | + | <div class='arrow'> |
+ | <div></div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class='left-arrow-pane'> | <div class='left-arrow-pane'> | ||
− | <div class='arrow'><div></div></div> | + | <div class='arrow'> |
+ | <div></div> | ||
+ | </div> | ||
</div> | </div> | ||
<div class='bubbles'> | <div class='bubbles'> | ||
Line 788: | Line 862: | ||
</div> | </div> | ||
<div class='slide'> | <div class='slide'> | ||
− | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg"/> | + | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" /> |
</div> | </div> | ||
<div class='slide'> | <div class='slide'> | ||
− | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg"/> | + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" /> |
</div> | </div> | ||
<div class='slide'> | <div class='slide'> | ||
− | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg"/> | + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" /> |
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | <script> | |
+ | var screen_900 = window.matchMedia("(max-width: 900px)"); | ||
+ | var screen_1024 = window.matchMedia("(min-width: 1024px)"); | ||
+ | var screen_1280 = window.matchMedia("(min-width: 1280px)"); | ||
+ | var screen_1440 = window.matchMedia("(min-width: 1440px)"); | ||
+ | var screen_1680 = window.matchMedia("(min-width: 1680px)"); | ||
+ | var screen_1920 = window.matchMedia("(min-width: 1920px)"); | ||
+ | var position = 3000; | ||
− | + | $(window).on('beforeunload', function() { | |
− | + | $(window).scrollTop(0); | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | if (screen_900.matches) { | |
− | $(window).scrollTop(0); | + | var timeoutVar = 0; |
− | + | } else if (screen_1024.matches) { | |
+ | 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); | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
function slideVideo() { | function slideVideo() { | ||
− | + | $("#video-main-page").css('transform', 'translateY(-100%)'); | |
− | + | $("#skip-btn").css('transform', 'translateY(-100%)'); | |
− | + | $("#skip-btn").css({ | |
+ | 'top': '-10%' | ||
+ | }); | ||
} | } | ||
Line 844: | Line 931: | ||
} | } | ||
− | //******************************************************* SCROLL OPACITY *********************************************** | + | //******************************************************* SCROLL OPACITY *********************************************** |
− | + | var hiding = document.getElementById("hiding-block"); | |
− | + | var bacteria = document.getElementById("bacteria-nadando"); | |
$(window).scroll(function(event) { | $(window).scroll(function(event) { | ||
− | + | var hidingPos = hiding.offsetTop; | |
− | + | var bacteriaPos = bacteria.offsetTop; | |
var scroll = $(window).scrollTop(); | var scroll = $(window).scrollTop(); | ||
Line 861: | Line 948: | ||
var bacteriaRotate = map(scroll, 0, 700, 50, 0); | var bacteriaRotate = map(scroll, 0, 700, 50, 0); | ||
if (scroll > hidingPos) { | if (scroll > hidingPos) { | ||
− | + | $('#bacteria-nadando ').css('opacity', '0'); | |
} else { | } else { | ||
− | + | $('#bacteria-nadando ').css('opacity', bacteriaOpacity); | |
− | + | $('#bacteria-nadando ').css('top', bacteriaTop + 'px'); | |
} | } | ||
}); | }); | ||
− | //******************************************************* Video Controls ******************************************* | + | //******************************************************* Video Controls ******************************************* |
+ | |||
+ | $("#video-main-page").bind("ended", function() { | ||
+ | slideVideo() | ||
+ | }); | ||
− | |||
− | |||
$("#skip-btn").click(function() { | $("#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> | action=raw&ctype=text/javascript"></script> | ||
− | </body> | + | </section> |
+ | </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