Davidacevedo (Talk | contribs) |
Davidacevedo (Talk | contribs) |
||
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"> | ||
<style> | <style> | ||
− | #scroll-section { | + | #scroll-section { |
display: contents; | display: contents; | ||
} | } | ||
Line 166: | Line 167: | ||
} | } | ||
</style> | </style> | ||
− | + | </head> | |
− | + | ||
− | < | + | <body> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div id=" | + | <div id="scroll-section"> |
− | + | <header id="page-top" class="header-main-page"> | |
− | + | <video id="video-main-page" muted autoplay> | |
+ | <source src="https://static.igem.org/mediawiki/2018/f/fd/T--Tec-Monterrey--Intro_Nadando.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | <a id="skip-btn">Skip</a> | ||
+ | </header> | ||
+ | <div id="background-river"> | ||
+ | <div class="main-info-container-left"> | ||
+ | <div class="main-info"> | ||
+ | <!-- Primero izq --> | ||
− | |||
− | |||
− | |||
+ | DNA has been called an excellent medium | ||
+ | for archiving data, interpreting the four base | ||
+ | pairs as a new language. | ||
− | + | ||
− | + | </div> | |
− | <img src="https://static.igem.org/mediawiki/2018/6/60/T--Tec-Monterrey--Horse.gif" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); | + | <div class="main-info"> |
+ | <!-- Segundo izq --> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/60/T--Tec-Monterrey--Horse.gif" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); | ||
-webkit-transform: rotate(0.000001deg); | -webkit-transform: rotate(0.000001deg); | ||
-webkit-border-radius: 40px; | -webkit-border-radius: 40px; | ||
Line 196: | Line 200: | ||
border-radius: 40px; | border-radius: 40px; | ||
overflow: hidden;" class="gif"> | overflow: hidden;" class="gif"> | ||
− | + | </div> | |
− | + | <div class="main-info"> | |
− | + | <!-- Tercero izq --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <video autoplay="" muted="" loop="" class="video-header" type="video/mp4" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); | + | <video autoplay="" muted="" loop="" class="video-header" type="video/mp4" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); |
-webkit-transform: rotate(0.000001deg); | -webkit-transform: rotate(0.000001deg); | ||
-webkit-border-radius: 40px; | -webkit-border-radius: 40px; | ||
Line 216: | Line 210: | ||
border-radius: 40px; | border-radius: 40px; | ||
overflow: hidden; "> | overflow: hidden; "> | ||
− | + | <source src="https://static.igem.org/mediawiki/2018/8/89/T--Tec-Monterrey--peliculahorse.mp4"> | |
− | + | </video> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="main-info-container-right"> | |
− | + | <div class="main-info"> | |
− | + | <!-- Primero der--> | |
− | + | ||
− | + | ||
− | <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Tec-Monterrey--ADN_Intro.png"> | + | <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Tec-Monterrey--ADN_Intro.png"> |
− | + | </div> | |
− | + | <div class="main-info"> | |
− | Information storage in DNA has | + | <!-- Segundo der --> |
− | been demonstrated by recent efforts, | + | Information storage in DNA has |
− | saving anything | + | been demonstrated by recent efforts, |
− | from messages to animations. | + | saving anything |
− | + | from messages to animations. | |
+ | <img src="https://static.igem.org/mediawiki/2018/7/7c/T--Tec-Monterrey--RT.png"> | ||
+ | </div> | ||
+ | <div class="main-info"> | ||
+ | <!-- Tercero der--> | ||
Through gene induction, | Through gene induction, | ||
bacteria could store | bacteria could store | ||
external information in their DNA. | external information in their DNA. | ||
+ | iGEM Tec-Monterrey 2018 attempts to create | ||
+ | a new system, which saves information regarding | ||
+ | its surroundings. | ||
+ | </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> | ||
− | |||
− | + | <div id="bacteria-nadando"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </div> <!-- scroll section ends --> | + | </div> <!-- scroll section ends --> |
− | <section style="height: 90vw"> | + | <section style="height: 90vw"> |
<style> | <style> | ||
#dropzoneWrapper { | #dropzoneWrapper { | ||
Line 415: | Line 400: | ||
− | <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 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="dropzoneWrapper" style="background-color: black"> | ||
<div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;"> | <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;"> | ||
Line 461: | Line 448: | ||
</div> | </div> | ||
<script> | <script> | ||
− | + | ||
$(document).on('scroll', function() { | $(document).on('scroll', function() { | ||
if($(this).scrollTop()>=$('#gifDiv').position().top){ | if($(this).scrollTop()>=$('#gifDiv').position().top){ | ||
Line 610: | Line 597: | ||
<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 633: | Line 624: | ||
</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> | ||
Line 645: | Line 636: | ||
<section id="references-interLab" class="seccion-responsiva"> | <section id="references-interLab" class="seccion-responsiva"> | ||
− | + | <div class="referencias"> | |
− | + | <div class="body-title">References</div> | |
− | + | [1] Díez-Villaseñor, C., Guzmán, N. M., Almendros, C., García-Martínez, J. & Mojica, F. J. M. CRISPR-spacer integration reporter plasmids reveal distinct genuine acquisition specificities among CRISPR-Cas I-E variants of Escherichia coli. RNA Biol. (2013). doi:10.4161/rna.24023 | |
− | + | <br> | |
− | + | [2] Farzadfard, F., & Lu, T. K. Genomically encoded analog memory with precise in vivo DNA writing in living cell populations. Science. (2014). doi: 10.1126/science.1256272 | |
− | + | <br> | |
− | + | [3] Levy, A., Goren, M. G., Yosef, I., Auster, O., Manor, M., Amitai, G., Edgar, R., Qimron, U. & Sorek, R. CRISPR adaptation biases explain preference for acquisition of foreign DNA. Nature. (2015). doi:10.1038/nature14302 | |
− | + | <br> | |
− | + | [4] Nuñez, J. K. Mechanism of CRISPR–Cas Immunological Memory. (2016). Doctoral dissertation, UC Berkeley. | |
− | + | <br> | |
− | + | [5] Nuñez, J. K., Kranzusch P, Noeske J, Wright A, Davies C, Doudna J. Cas1-Cas2 complex formation mediates spacer acquisition during CRISPR-Cas adaptive immunity. Nat. Struct. Mol. Biol. (2014). doi:10.1038/nsmb.2820 | |
− | + | <br> | |
− | + | [6] Shipman, S. L., Nivala, J., Macklis, J. D., & Church, G. M. Molecular recordings by directed CRISPR spacer acquisition. Science.(2016). doi: 10.1126/science.aaf1175 | |
− | + | <br> | |
− | + | </div> | |
</section> | </section> | ||
<script> | <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); | $(window).scrollTop(0); | ||
− | + | }); | |
− | + | if (screen_900.matches) { | |
var timeoutVar = 0; | var timeoutVar = 0; | ||
− | + | } else if (screen_1024.matches) { | |
position = 3450; | position = 3450; | ||
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | var timeoutVar = setTimeout(function() { |
− | + | $(window).scrollTop(0); | |
+ | }, 8000); | ||
+ | } else if (screen_1280.matches) { | ||
position = 4500; | position = 4500; | ||
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | var timeoutVar = setTimeout(function() { |
− | + | $(window).scrollTop(0); | |
+ | }, 8000); | ||
+ | } else if (screen_1440.matches) { | ||
position = 6000; | position = 6000; | ||
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | var timeoutVar = setTimeout(function() { |
− | + | $(window).scrollTop(0); | |
+ | }, 8000); | ||
+ | } else if (screen_1680.matches) { | ||
position = 6500; | position = 6500; | ||
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | var timeoutVar = setTimeout(function() { |
− | + | $(window).scrollTop(0); | |
+ | }, 8000); | ||
+ | } else if (screen_1920.matches) { | ||
position = 7500; | position = 7500; | ||
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | var timeoutVar = setTimeout(function() { |
− | + | $(window).scrollTop(0); | |
− | var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000); | + | }, 8000); |
− | + | } else { | |
− | + | var timeoutVar = setTimeout(function() { | |
− | + | $(window).scrollTop(0); | |
− | + | }, 8000); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | function slideVideo() { | |
− | + | $("#video-main-page").css('transform', 'translateY(-100%)'); | |
− | } | + | $("#skip-btn").css('transform', 'translateY(-100%)'); |
+ | $("#skip-btn").css({ | ||
+ | 'top': '-10%' | ||
+ | }); | ||
+ | } | ||
− | / | + | function map(value, in_min, in_max, out_min, out_max) { |
+ | return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; | ||
+ | } | ||
− | + | //******************************************************* SCROLL OPACITY *********************************************** | |
− | + | ||
− | + | var hiding = document.getElementById("hiding-block"); | |
+ | 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> | ||
− | + | </body> | |
+ | |||
</html> | </html> | ||
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} | {{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} |
Revision as of 23:23, 17 October 2018
DNA has been called an excellent medium
for archiving data, interpreting the four base
pairs as a new language.
Information storage in DNA has
been demonstrated by recent efforts,
saving anything
from messages to animations.
Through gene induction,
bacteria could store
external information in their DNA.
iGEM Tec-Monterrey 2018 attempts to create
a new system, which saves information regarding
its surroundings.
E. coding
Tec-Monterrey
DRAG AND DROP!
Pb
NO3
PO4
As
References
[1] Díez-Villaseñor, C., Guzmán, N. M., Almendros, C., García-Martínez, J. & Mojica, F. J. M. CRISPR-spacer integration reporter plasmids reveal distinct genuine acquisition specificities among CRISPR-Cas I-E variants of Escherichia coli. RNA Biol. (2013). doi:10.4161/rna.24023
[2] Farzadfard, F., & Lu, T. K. Genomically encoded analog memory with precise in vivo DNA writing in living cell populations. Science. (2014). doi: 10.1126/science.1256272
[3] Levy, A., Goren, M. G., Yosef, I., Auster, O., Manor, M., Amitai, G., Edgar, R., Qimron, U. & Sorek, R. CRISPR adaptation biases explain preference for acquisition of foreign DNA. Nature. (2015). doi:10.1038/nature14302
[4] Nuñez, J. K. Mechanism of CRISPR–Cas Immunological Memory. (2016). Doctoral dissertation, UC Berkeley.
[5] Nuñez, J. K., Kranzusch P, Noeske J, Wright A, Davies C, Doudna J. Cas1-Cas2 complex formation mediates spacer acquisition during CRISPR-Cas adaptive immunity. Nat. Struct. Mol. Biol. (2014). doi:10.1038/nsmb.2820
[6] Shipman, S. L., Nivala, J., Macklis, J. D., & Church, G. M. Molecular recordings by directed CRISPR spacer acquisition. Science.(2016). doi: 10.1126/science.aaf1175