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

Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
<html>
 
<html>
  <head>      
+
 
 +
<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&amp;ctype=text/css" rel="stylesheet">
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
         
+
 
 
     <!-- Fonts -->
 
     <!-- Fonts -->
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
  
 
     <style>
 
     <style>
#scroll-section {
+
        #scroll-section {
 
   display: contents;
 
   display: contents;
 
}
 
}
Line 166: Line 167:
 
}
 
}
 
     </style>
 
     </style>
    </head>
+
</head>
    <body>
+
  
<div id="scroll-section">
+
<body>
  <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 id="scroll-section">
      <div class="main-info-container-left">
+
        <header id="page-top" class="header-main-page">
        <div class="main-info"> <!-- Primero -->
+
            <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.
 
  
 +
                    DNA has been called an excellent medium
 +
                    for archiving data, interpreting the four base
 +
                    pairs as a new language.
  
  
        </div>
+
 
        <div class="main-info"> <!-- Tercero -->
+
                </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">
iGEM Tec-Monterrey 2018 attempts to create
+
                </div>
a new system, which saves information regarding
+
                <div class="main-info">
its surroundings.
+
                    <!-- Tercero izq -->
 
+
 
+
          <img class="gif" src="https://static.igem.org/mediawiki/2018/3/3a/T--Tec-Monterrey--Gif_RT.gif">
+
        </div>  
+
        <div class="main-info"> <!-- Quinto -->
+
 
+
Through gene induction,
+
bacteria could store
+
external information in their DNA.
+
 
+
  
<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">
+
                        <source src="https://static.igem.org/mediawiki/2018/8/89/T--Tec-Monterrey--peliculahorse.mp4">
    </video>
+
                    </video>
        </div>
+
                </div>
        <div class="main-info"> <!-- Septimo -->
+
            </div>
          <img class="gif" src="https://static.igem.org/mediawiki/2018/8/8a/T--Tec-Monterrey--Gif_Integration.gif">
+
            <div class="main-info-container-right">
        </div>
+
                <div class="main-info">
      </div>
+
                    <!-- Primero der-->
      <div class="main-info-container-right">
+
        <div class="main-info"> <!-- Segundo -->
+
  
<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>
        <div class="main-info"> <!-- Cuarto -->
+
                <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 -->
  
          <img src="https://static.igem.org/mediawiki/2018/7/7c/T--Tec-Monterrey--RT.png">
+
        <div id="fixed-title">
 +
            E. coding
 +
            <div id="fixed-subtitle">Tec-Monterrey</div>
 
         </div>
 
         </div>
        <div class="main-info"> <!-- Sexto -->
 
  
 
+
        <div id="bacteria-nadando">
Translating an input from its surroundings,
+
to an encoded DNA output
+
 
+
 
+
          <img src="https://static.igem.org/mediawiki/2018/4/42/T--Tec-Monterrey--Design_Cas1_2.png">
+
 
         </div>
 
         </div>
        <div class="main-info"> <!-- Octavo -->
 
        </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 -->
+
    </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="referencias">
          <div class="body-title">References</div>
+
            <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
+
            [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>
+
            <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
+
            [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>
+
            <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
+
            [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>
+
            <br>
          [4] Nuñez, J. K. Mechanism of CRISPR–Cas Immunological Memory. (2016). Doctoral dissertation, UC Berkeley.
+
            [4] Nuñez, J. K. Mechanism of CRISPR–Cas Immunological Memory. (2016). Doctoral dissertation, UC Berkeley.
          <br>
+
            <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
+
            [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>
+
            <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
+
            [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>
+
            <br>
          </div>
+
        </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;
  
          var screen_900 = window.matchMedia("(max-width: 900px)");
+
        $(window).on('beforeunload', function() {
          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) {
+
        if (screen_900.matches) {
 
             var timeoutVar = 0;
 
             var timeoutVar = 0;
          } else if(screen_1024.matches) {
+
        } else if (screen_1024.matches) {
 
             position = 3450;
 
             position = 3450;
             var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000);
+
             var timeoutVar = setTimeout(function() {
          } else if(screen_1280.matches){
+
                $(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() {
          } else if(screen_1440.matches){
+
                $(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() {
          } else if(screen_1680.matches){
+
                $(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() {
          } else if(screen_1920.matches){
+
                $(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() {
          } else {
+
                $(window).scrollTop(0);
             var timeoutVar = setTimeout(function(){$(window).scrollTop(0);},8000);
+
            }, 8000);
          }
+
        } else {
           
+
             var timeoutVar = setTimeout(function() {
            function slideVideo() {
+
                $(window).scrollTop(0);
              $("#video-main-page").css('transform','translateY(-100%)');
+
            }, 8000);
              $("#skip-btn").css('transform','translateY(-100%)');
+
        }
              $("#skip-btn").css({'top': '-10%'});
+
            }
+
  
            function map(value, in_min, in_max, out_min, out_max) {
+
        function slideVideo() {
                return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+
            $("#video-main-page").css('transform', 'translateY(-100%)');
             }
+
            $("#skip-btn").css('transform', 'translateY(-100%)');
 +
             $("#skip-btn").css({
 +
                'top': '-10%'
 +
            });
 +
        }
  
//******************************************************* SCROLL OPACITY ***********************************************
+
        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;
 +
        }
  
  var hiding = document.getElementById("hiding-block");
+
        //******************************************************* SCROLL OPACITY ***********************************************
  var bacteria = document.getElementById("bacteria-nadando");
+
  
            $(window).scroll(function(event) {
+
        var hiding = document.getElementById("hiding-block");
 +
        var bacteria = document.getElementById("bacteria-nadando");
  
              var hidingPos = hiding.offsetTop;
+
        $(window).scroll(function(event) {
              var bacteriaPos = bacteria.offsetTop;
+
  
                var scroll = $(window).scrollTop();
+
            var hidingPos = hiding.offsetTop;
                var scrollOpacity = map(scroll, 0, 350, 1, 0);
+
            var bacteriaPos = bacteria.offsetTop;
                //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 *******************************************
+
            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-main-page").bind("ended", function(){slideVideo()});
+
        //******************************************************* Video Controls *******************************************
           
+
 
            $("#skip-btn").click(function() {
+
        $("#video-main-page").bind("ended", function() {
              clearTimeout(timeoutVar);
+
            slideVideo()
              $(window).scrollTop(0);
+
        });
              slideVideo();
+
 
            });
+
        $("#skip-btn").click(function() {
 +
            clearTimeout(timeoutVar);
 +
            $(window).scrollTop(0);
 +
            slideVideo();
 +
        });
 
     </script>
 
     </script>
    </body>
+
</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

Skip
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

Contact Us

Sponsors