Difference between revisions of "Team:Tec-Monterrey"

m
 
(91 intermediate revisions by 9 users not shown)
Line 1: Line 1:
−
{{Tec-Monterrey}}
+
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
<html>
 
<html>
  
−
<div style="background:#eeeeee;padding:10px;text-align:center;">
+
<head>
−
<h1 style="font-size:44px; padding:50px;">iGEM:Tec de Monterrey</h1>
+
    <!-- Bootstrap required meta tags -->
−
<p style="text-align:center;">Thank you for visiting us, the wiki is under construction, just wait for it!</p>
+
    <meta charset="utf-8">
−
<br>
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
<h1 style="color:54d454;">We stand on the shoulders of giants!</h1>
+
−
<h3>Please visit the projects of past years:</h2>
+
−
<div style="text-align:center;">
+
−
<ul style="list-style-position:inside;">
+
−
<li> <a href="https://2016.igem.org/Team:Tec-Monterrey" target="_blank">2016's Team</a></li>
+
−
<li> <a href="https://2015.igem.org/Team:Tec-Monterrey"target="_blank">2015's Team</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:Tec-Monterrey"target="_blank">2014's Team</a></li>
+
−
<li> <a href="https://2013.igem.org/Team:TecMonterrey"target="_blank">2013's Team</a></li>
+
−
<li> <a href="https://2012.igem.org/Team:Tec-Monterrey"target="_blank">2012's Team</a></li>
+
−
<li> <a href="https://2011.igem.org/Team:Tec-Monterrey"target="_blank">2011's Team</a></li>
+
−
<li> <a href="https://2010.igem.org/Team:Tec-Monterrey"target="_blank">2010's Team</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>  
+
  
−
<div style="background:#11dd11; padding: 10px;">
+
    <!-- Bootstrap css-->
−
<h2>Team Members</h2>
+
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
<div style="background:#dddddd; padding: 15px;">
+
  
−
<!-- Aquí escriban sus nombres y lo que hacen en el grupo, no se les olvide encerrar en <li></li> -->
+
    <!-- Fonts -->
 +
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
  
−
<ul style="font-size: 12px;">
+
    <style>
−
<li>
+
        #scroll-section {
−
<h6>Esteban de la Peña</h6>
+
  display: contents;
−
<p>In charge of making the wiki</p>
+
}
 +
.header-main-page {
 +
  width: 100%;
 +
  height: 100%;
 +
  background: rgb(157,217,223);
 +
}
  
−
<li>
+
#video-main-page {
−
<a href="https://www.linkedin.com/in/alanavilarmz/"><h6>Alan Ávila</h6> </a>
+
  width: 100%;
−
<p>In charge of Roberto's Mom</p>
+
  background: #9dd8dd;
−
</li>
+
  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;
 +
}
  
−
<li>
+
#skip-btn:hover {
−
<a href= "https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/"><h6>Adrián Hernández</h6></a>
+
  cursor: pointer;
−
<p>Interlab managment</p>
+
  background: rgba(0,0,0,0.5);
−
</li>
+
}
 +
#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;
 +
}
  
−
<li>
+
#hiding-block {
−
<h6>Nufito Papito</h6>
+
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);
−
<p>CRISPR Cas God</p>
+
  z-index: 3;
−
<p>saquen las 30</p>
+
  width: 100%;
−
</li>
+
  height: 100vh;
 +
  float: left;
 +
  position: sticky;
 +
}
  
−
<li>
+
#fixed-title {
−
<h6>Ana Elizabeth Lasso de la Vega</h6>
+
  width: 50%;
−
<p> Team Management </p>
+
  height: 35vh;
−
</li>
+
  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);
 +
}
  
−
<li>
+
#fixed-subtitle {
−
<h6>José Arnulfo Juárez Figueroa</h6>
+
  width: 100%;
−
<p> Team Management </p>
+
  font-size: 6vw;
−
</li>
+
  font-weight: 500;
 +
  font-family: "Norwester", monospace;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  z-index: 2;
 +
  color: rgba(47,99,97,0.6);
 +
}
  
−
</ul>
+
.topBarWrapper {
 +
  display: contents !important;
 +
}
  
−
<ul style="font-size: 12px;">
+
#background-river {
−
<li>
+
  height: auto;
−
<h6>Miriam Salas Ramírez</h6>
+
  background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png);
−
<p>Congress of Sciences iGEM</p>
+
  width: 100%;
−
</li>
+
  background-position-x: center;
−
</ul>
+
  background-size: cover;
 +
  background-repeat-y: no-repeat;
 +
}
  
−
<ul>
+
.main-info-container-left {
−
<li>
+
  width: 35%;
−
<h6>Sofi Lara</h6>
+
  height: auto;
−
<p>In charge of Human Practices</p>
+
  margin-top: 30%;
−
</li>
+
  margin-left: 2.5vw;
−
</ul>
+
  float: left;
 +
}
  
−
<ul style="font-size: 12px;">
+
.main-info-container-right {
−
<li>
+
  width: 35%;
−
<h6>Miranda Iriarte</h6>
+
  height: auto;
−
<p>Congress of Sciences iGEM</p>
+
  margin-top: 30%;
−
</li>
+
  margin-right: 2.5vw;
−
</ul>
+
  float: right;
 +
}
  
−
<ul style="font-size: 12px;">
+
.main-info {
−
<liv>
+
  width: 100%;
−
<h6>Valeria Fuentes</h6>
+
  height: auto;
−
<p>Congress of Sciences iGEM</p>
+
  margin-top: 20vh;
−
</li>
+
text-align: justify;
−
</ul>
+
    font-size: 2.5vw;
 +
    font-weight: bold;
 +
color: white;
 +
line-height: 3vw;
 +
}
  
−
<liv>
+
.main-info img {
−
<h6>Victor Robledo</h6>
+
  width: 80%;
−
<p>Wetlab/Drylab</p>
+
  margin: 10%;
−
</li>
+
}
−
</div>
+
  
−
<li>
+
.main-info .gif {
−
<h6>Norma Garza</h6>
+
  width: 100%;
−
<p>Interlab managment/Drylab</p>
+
margin: 0;
−
</li>
+
}
  
−
</div>
+
@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>
  
−
<div class="column full_size" >
+
<body>
  
−
<h3>Before you start</h3>
+
    <div id="scroll-section">
−
<p> Please read the following pages:</p>
+
        <header id="page-top" class="header-main-page">
−
<ul>
+
            <video id="video-main-page" muted autoplay>
−
<li>  <a href="https://2018.igem.org/Competition">Competition Hub</a> </li>
+
                <source src="https://static.igem.org/mediawiki/2018/f/fd/T--Tec-Monterrey--Intro_Nadando.mp4" type="video/mp4">
−
<li> <a href="https://2018.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
            </video>
−
<li> <a href="https://2018.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
            <a id="skip-btn">Skip</a>
−
</ul>
+
        </header>
−
</div>
+
  
 +
        <div id="background-river">
 +
            <div class="main-info-container-left">
 +
                <div class="main-info">
 +
                    <!-- Primero izq -->
  
−
<div class="clear extra_space"></div>
 
−
<div class="line_divider"></div>
 
−
<div class="clear extra_space"></div>
 
  
 +
                    <b style="font-size: 3.5vw; color: rgb(42, 132, 129);">DNA</b> has been called an excellent medium
 +
                    for <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">archiving data</b>, interpreting the four base
 +
                    pairs as a new language.
  
  
−
<div class="column full_size" >
 
−
<h3> Styling your wiki </h3>
 
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
 
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
 
  
 +
                </div>
 +
                <div class="main-info">
 +
                    <!-- Segundo izq -->
 +
                    <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--Horse2.gif" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 +
-webkit-transform: rotate(0.000001deg);
 +
-webkit-border-radius: 40px;
 +
-moz-border-radius: 40px;
 +
border-radius: 40px;
 +
overflow: hidden;" class="gif">
 +
<div style="height: 10vh; width: 100%; text-align: center;">
 +
<table width="100%" style="background:rgba(0,0,0,0.0); border: 0px solid black; color: white;" cellspacing="0" cellpadding="0">
 +
<tr style=" border: 0px solid black;">
 +
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw; ">
 +
Original image
 +
</td>
 +
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw;">
 +
Image reconstructed from bacteria
 +
</td>
 +
</tr>
 +
</table>
 
</div>
 
</div>
 +
                </div>
 +
                <div class="main-info">
 +
                    <!-- Tercero izq -->
 +
Through <b  style="font-size: 3.5vw; color: #2F6361;">gene induction</b>,
 +
bacteria could <b  style="font-size: 3.5vw; color: #2F6361;" >store</b>
 +
external information in their DNA.
 +
iGEM Tec-Monterrey 2018 attempts to create
 +
a new system, which <b  style="font-size: 3.5vw; color: #2F6361;">saves information</b> regarding
 +
its surroundings.
 +
                   
 +
                </div>
 +
            </div>
 +
            <div class="main-info-container-right">
 +
                <div class="main-info" style="margin-top: 10vh">
 +
                    <!-- Primero der-->
  
 +
                    <img style="height: 40vh "src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--adn_Video2.gif">
  
  
 +
                </div>
 +
                <div class="main-info" style="margin-top: 10vh">
 +
                    <!-- Segundo der -->
 +
                    Information storage in DNA has
 +
                    been demonstrated by recent efforts,
 +
                    <b style="font-size: 3.5vw; color: rgb(42, 132, 129);"> saving </b> anything
 +
                    from <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">messages</b> to animations.
 +
                </div>
 +
                <div class="main-info">
 +
                    <!-- Tercero der-->
  
−
<div class="clear extra_space"></div>
+
<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-border-radius: 40px;
 +
-moz-border-radius: 40px;
 +
border-radius: 40px;
 +
overflow: hidden; ">
 +
                        <source src="https://static.igem.org/mediawiki/2018/8/8f/T--Tec-Monterrey--Aguacate.mp4">
 +
                    </video>
 +
                </div>
 +
            </div>
 +
            <div id="hiding-block">
  
 +
<div style="margin-top: 30%; color: white; width: 100%; text-align: center; font-size: 6vh;">E. coding composes a new mechanism for information storage.</div>
  
 +
            </div>
  
−
<div class="column third_size" >
+
            <br class="clearBoth" />
 +
        </div> <!-- background-river ends -->
  
−
<h3> Uploading pictures and files </h3>
+
        <div id="fixed-title">
−
<p> You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
+
            E. coding
 +
            <div id="fixed-subtitle" style="z-index: 0;">Tec-Monterrey</div>
 +
<div id="fixed-subtitle" style="font-family: DosisRegular; font-size: 30px; color: white; z-index: 0;">Storing the world one base at a time</div>
 +
<div id="fixed-subtitle" style="font-family: Montserrat; z-index: 0; font-size: 40px"><br><br>Scroll to know more
 +
<br>
 +
<i class="fa fa-chevron-circle-down"></i></div>
 +
        </div>
  
 +
        <div id="bacteria-nadando" style="z-index: 2;">
 +
        </div>
  
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
    </div> <!-- scroll section ends -->
  
−
<div class="button_link">
+
    <section style="height: 65vw">
−
<a href="https://2018.igem.org/Special:Upload">
+
        <style>
−
UPLOAD FILES
+
            #dropzoneWrapper {
−
</a>
+
            width: 100%;
−
</div>
+
            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;
 +
        }
  
−
</div>
+
        .drop-active {
 +
            border-color: #aaa;
 +
        }
  
−
<div class="column third_size" >
+
        .drop-target {
−
<h3> Wiki template information </h3>
+
            background-color: #29e;
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2018.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
            border-style: solid;
 +
        }
  
−
</div>
+
        .drag-drop {
 +
            display: inline-block;
 +
            height: 10vh;
 +
            width: 10vh;
 +
            z-index: 50;
  
 +
            -webkit-transform: translate(0px, 0px);
 +
            transform: translate(0px, 0px);
  
 +
            transition: background-color 0.3s;
 +
        }
  
−
<div class="column third_size" >
+
        .drag-drop img {
−
<div class="highlight decoration_B_full">
+
            position: absolute;
−
<h3> Editing your wiki </h3>
+
            height: 100%;
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
            width: 100%;
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
            border-radius: 50%;
 +
            z-index: 50;
 +
        }
  
−
<div class="button_link">
+
        .drag-drop.can-drop {
−
<a href="https://2018.igem.org/wiki/index.php?title=Team:Tec-Monterrey&action=edit">
+
            color: #000;
−
EDIT PAGE
+
            /*background-color: #4e4;*/
−
</a>
+
            z-index: 50;
−
</div>
+
        }
 +
       
 +
       
 +
        #backgroundHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: relative;
 +
            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;
 +
            left: 48%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: grey;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color2 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: aqua;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color3 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: yellow;
 +
            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;
 +
        }
  
 +
       
 +
    </style>
  
−
</div>
 
−
</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="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" style="margin: auto; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/9/9d/T--Tec-Monterrey--plomo.png"> </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; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/4b/T--Tec-Monterrey--nitrato.png"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/49/T--Tec-Monterrey--fosfato.png"> </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; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--arsenico.png"> </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>
 +
<div style:"height: 20vw; width: 100%; background-color: black; position: relative; font-size: 3vw; color: white;"><br><br><br> <a href="https://2018.igem.org/Team:Tec-Monterrey/Description" style="color: white; font-size: 3vw;">LEARN MORE</a><br><br></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,
  
−
<div class="clear extra_space"></div>
+
                // call this function on every dragmove event
−
<div class="line_divider"></div>
+
                onmove: dragMoveListener,
−
<div class="clear extra_space"></div>
+
                // call this function on every dragend event
 +
                onend: function(event) {
 +
                    var textEl = event.target.querySelector('p');
  
 +
                    (textEl.textContent =
 +
                        'moved a distance of ' +
 +
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
 +
                            Math.pow(event.pageY - event.y0, 2) | 0))
 +
                        .toFixed(2) + 'px');
 +
                }
 +
            });
  
 +
        function dragMoveListener(event) {
 +
            var target = event.target,
 +
                // 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;
  
−
<div class="column two_thirds_size" >
+
            // translate the element
−
<h3>Tips</h3>
+
            target.style.webkitTransform =
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
                target.style.transform =
−
<ul>
+
                'translate(' + x + 'px, ' + y + 'px)';
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2018.igem.org/Calendar">iGEM 2018 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
 +
            // update the posiion attributes
 +
            target.setAttribute('data-x', x);
 +
            target.setAttribute('data-y', y);
 +
        }
  
−
<div class="column third_size">
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
 
−
<ul>
 
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
 
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
 
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
  
 +
        /* The dragging code for '.draggable' from the demo above
 +
        * applies to this demo as well so it doesn't have to be repeated. */
 +
 +
        // enable draggables to be dropped into this
 +
        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,
 +
 +
            // listen for drop related events:
 +
 +
            ondropactivate: function(event) {
 +
                // 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;
 +
 +
                // feedback the possibility of a drop
 +
                dropzoneElement.classList.add('drop-target');
 +
                draggableElement.classList.add('can-drop');
 +
                // 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");
 +
            }
 +
        });
 +
 +
        interact('.drag-drop')
 +
            .draggable({
 +
                inertia: true,
 +
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
 +
                        top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                autoScroll: true,
 +
                // dragMoveListener from the dragging demo above
 +
                onmove: dragMoveListener,
 +
            });
 +
        });
 +
    </script>
 +
    </section>
 +
<section width="100%" height="20vh" style="background-color: black;">
 +
<div style="height: 20vh; width: 100%; text-align: center;"> <a href="https://2018.igem.org/Team:Tec-Monterrey/Description" style="color: white; font-size: 3vw" >LEARN MORE </a> </div>
 +
</section>
 +
    <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) {
 +
            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() {
 +
            $("#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>
 +
</body>
  
 
</html>
 
</html>
 +
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Latest revision as of 01:35, 6 November 2018

Skip
DNA has been called an excellent medium for archiving data, interpreting the four base pairs as a new language.
Original image Image reconstructed from bacteria
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.
Information storage in DNA has been demonstrated by recent efforts, saving anything from messages to animations.
E. coding composes a new mechanism for information storage.

E. coding
Tec-Monterrey
Storing the world one base at a time


Scroll to know more

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors