Difference between revisions of "Team:TecCEM/Attributions"

Line 1: Line 1:
 
{{TecCEM/Menu}}
 
{{TecCEM/Menu}}
 +
{{TecCEM/TeamCss}}
 +
{{TecCEM/BubblesTemplate}}
 +
{{TecCEM/header_generator}}
 
<html>
 
<html>
−
<head>
+
    <script type="text/javascript">
−
<meta charset="utf-8">
+
−
<title>Untitled Document</title>
+
−
</head>
+
  
−
<body>
+
/* --------------------- WE DECLARE THE ARRAYS WITH THE ----------------------
−
<div class="Imagen_principal">
+
----------------------- INFORMATION OF THE TEAM MEMBERS --------------------- */
−
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
var teamCollaboratorsElems = document.getElementsByClassName("collaborator_image");
−
<div class="Titulo">
+
 
−
<h1>Attributions</h1>
+
 
−
</div>
+
var teamCollaboratorsFullNames = new Array();
−
<div class="Difuminado"></div>
+
teamCollaboratorsFullNames.push("Saul Higareda");
−
</div>
+
teamCollaboratorsFullNames.push("Marianela Contreras Dominguez");
−
+
teamCollaboratorsFullNames.push("Jennifer Riva Palacios");
−
<div class="cuerpo_principal">
+
teamCollaboratorsFullNames.push("Jose Angel Del Angel");
−
+
teamCollaboratorsFullNames.push("Carlos Espejel");
−
<div class="Espacio_menu_lateral">
+
//5
 +
 
 +
var teamCollaboratorsJobs = new Array();
 +
teamCollaboratorsJobs.push("Poll design and excecution");
 +
teamCollaboratorsJobs.push("Team Image Leader");
 +
teamCollaboratorsJobs.push("Protocol and notebook anotations");
 +
teamCollaboratorsJobs.push("Web page Designer");
 +
teamCollaboratorsJobs.push("Web page Designer");
 +
//12
 +
 
 +
var teamMembersMajors = new Array();
 +
teamMembersMajors.push("...");
 +
teamMembersMajors.push("Communications Bacheularate");
 +
teamMembersMajors.push("...");
 +
teamMembersMajors.push("Robotics and Digital Systems Engineering");
 +
teamMembersMajors.push("B.S. in Computer Science");
 
 
−
</div>
+
 
−
+
var teamMembersPhotosArray = new Array();
−
<div class="Texto">
+
teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/e/e5/T--TecCEM--TeamMembers_Francisco.png");
−
<h2 id="primer">Título 1</h2>
+
teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/c/c7/T--TecCEM--TeamMembers_Carlo.png");
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/6/61/T--TecCEM--TeamMembers_Nadia.png");
 +
teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/1/16/T--TecCEM--TrialImages-man.jpeg");
 +
        teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/b/b2/T--TecCEM--TeamMembers_Nayelhi.png");
 
 
−
<h2 id="segundo">Título 2</h2>
+
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
 
 +
var teamCollaboratorsAttributions = new Array();
 +
teamCollaboratorsAttributions.push("...");
 +
teamCollaboratorsAttributions.push("...");
 +
teamCollaboratorsAttributions.push("...");
 +
teamCollaboratorsAttributions.push("...");
 +
teamCollaboratorsAttributions.push("...");
 
 
−
<h2 id="tercero">Título 3</h2>
+
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
 
 +
 
 +
var teamMembersLinkedin = new Array();
 +
teamMembersLinkedin.push("https://www.linkedin.com/");
 +
teamMembersLinkedin.push("https://www.linkedin.com/");
 +
teamMembersLinkedin.push("https://www.linkedin.com/");
 +
teamMembersLinkedin.push("https://www.linkedin.com/");
 +
teamMembersLinkedin.push("https://www.linkedin.com/");
 
 
−
<h2 id="cuarto">Título 4</h2>
+
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
 
 +
/* ===========================================================================
 +
============================================================================ */
 +
 
 +
 
 +
 
 +
function person_data(name, full_name, job, major, description, linkedin, i){
 +
var teamTableDiv = document.getElementsByTagName('body')[0];
 +
var div = document.createElement('div');
 +
var cross = document.createElement('img');
 +
var image = document.createElement('img');
 +
var content = document.createElement('p');
 +
var headerTable = document.createElement("table");
 +
 
 
 
−
<img id="fig1" src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
headerTable.style.width = "90%"
 +
headerTable.innerHTML = "\
 +
<tr>\
 +
<td style='width:60%; border:none;'>\
 +
<p style='font-weight:bold; font-size:25px; font-family:\"Nunito\", sans-serif;margin-top:0px; margin-bottom:0px;'>" + full_name + "</p>\
 +
<p style='font-size:15px; font-style: italic; margin-top:0px; margin-bottom:0px;'>" + job + "</p>\
 +
</td>\
 +
\
 +
<td style='width:10%; border:none;'>\
 +
    <a href=" + linkedin + ">\
 +
<img style='width:60%; filter: grayscale(100%); opacity:0.5; margin-left:25%; ' src='https://static.igem.org/mediawiki/2021/e/e2/T--TecCEM--SocialMediaLogo_linkedin.png'>\
 +
</a>\
 +
</td>\
 +
<td style=' width:30%; border:none;'>\
 +
<p style='font-weight:bold; font-size:25px; font-family:\"Nunito\", sans-serif;margin-top:0px; margin-bottom:0px;'>" + "Major:" + "</p>\
 +
<p style='font-size:15px; font-style: italic; margin-top:0px; margin-bottom:0px;'>" + major + "</p>\
 +
</td>\
 +
</tr>";
 +
headerTable.style.transform = "translate(-50%,0%)";
 +
headerTable.style.marginTop = "-10%";
 +
                        headerTable.style.marginLeft = "50%";
 +
                        headerTable.style.border = "none";
 +
                        headerTable.style.background = "transparent";
 +
 
 +
content.innerHTML = description;
 +
content.style.marginLeft = "7.5%";
 +
content.style.marginRight = "7.5%";
 +
/*content.style.width = "80%";*/
 +
content.style.marginBottom = "2%";
 +
content.style.fontFamily = "'Roboto', sans-serif"
 +
content.style.fontSize = "15px";
 +
                        content.style.color = "black";
 
 
−
<p class="Caption">Fig 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nam, maiores. Inventore ex eum doloremque eligendi id, voluptates quod illum, dolore deserunt iste alias. Dolor libero illo hic, temporibus harum.</p>
+
cross.src = "https://static.igem.org/mediawiki/2021/c/cc/T--TecCEM--CrossIcon.png";
 +
cross.style.width = "40px";
 +
cross.style.height = "40px";
 +
cross.style.marginTop = "10px";
 +
cross.style.marginLeft = "10px";
 +
cross.style.display = "block";
 +
cross.onclick = function() {div.parentNode.removeChild(div)};
 
 
−
<h2 id="quinto">Título 5</h2>
+
image.style.width = "20%";
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
image.src = teamMembersPhotosArray[i];
−
</div>
+
image.style.marginLeft = "50%";
−
+
image.style.transform = "translate(-50%,-60%)";
−
</div>
+
image.style.borderRadius = "100%";
−
<div class="menu_lateral" id="menu_lateral">
+
image.style.display = "block";
−
<ul style="list-style: none; margin: 0; padding: 0;">
+
image.style.border = "solid 5px #3A9300";
−
<li id="to1">Primer Título</li>
+
−
<li id="to2">Segundo Título</li>
+
−
<li id="to3">Tercer Título</li>
+
−
<li id="to4">Cuarto Título</li>
+
−
<li id="to5">Quinto Título</li>
+
−
</ul>
+
−
</div>
+
−
<div class="survey">
+
−
<p><a href="https://surveymethods.com/" title="Survey Software">Survey Software</a> powered by <a
+
−
href="https://surveymethods.com" title="Survey Software"> SurveyMethods.com</a></p>
+
−
</div>
+
  
−
</body>
+
−
<style>
+
−
.survey{
+
−
display: flex;
+
−
align-content: center;
+
−
justify-content: center;
+
−
align-items: center;
+
−
}
+
−
body{
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
.Imagen_principal{
+
−
display: flex;
+
−
align-content: center;
+
−
justify-content: center;
+
−
align-items: center;
+
−
width: 100vw;
+
−
height: 100vh;
+
−
}
+
−
.Imagen_principal > img{
+
−
width: 100%;
+
−
height: 100%;
+
−
}
+
−
.Titulo{
+
−
position: absolute;
+
−
background: white;
+
−
padding: 1rem;
+
−
border-radius: 1rem;
+
−
z-index: 10;
+
−
}
+
−
.Titulo > h1{
+
−
display: inline;
+
−
opacity: 1;
+
−
font-size: 4rem;
+
−
}
+
−
.Difuminado{
+
−
width: 100vw;
+
−
height: 100vh;
+
−
position: absolute;
+
−
z-index: 9;
+
−
background: black;
+
−
opacity: .4;
+
−
}
+
−
.cuerpo_principal{
+
−
display: flex;
+
−
flex-direction: row;
+
−
}
+
−
.menu_lateral{
+
−
display: flex;
+
−
transition: transform 0.6s ease-out;
+
−
background: gray;
+
−
flex-wrap: wrap;
+
−
width: 10%;
+
−
justify-content: center;
+
−
align-content: center;
+
−
align-items: center;
+
−
max-height: 45rem;
+
−
position: fixed;
+
−
top: 50%;
+
−
transform: translateX(-100%) translateY(0);
+
−
+
−
}
+
−
.menu_lateral_hidden{
+
−
transform: translateX(0%) translateY(0);
+
−
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
+
−
100 - 35 + 20 = 85
+
−
*/
+
−
}
+
−
.Espacio_menu_lateral{
+
−
width: 10%;
+
−
}
+
−
.menu_lateral li{
+
−
margin-bottom: 1rem;
+
−
cursor: pointer;
+
−
}
+
−
.Texto{
+
−
width: 85%;
+
−
padding: 1rem;
+
−
justify-content: center;
+
−
display: flex;
+
−
flex-direction: column;
+
−
align-items: center;
+
 
 
 +
div.style.top = "60%";
 +
  div.style.left = "50%";
 +
  div.style.transform = "translate(-50%,-50%)";
 +
div.style.backgroundColor = "#53D100";
 +
div.style.borderRadius = "20px"
 +
div.style.position = "fixed";
 +
div.width = '100%';
 +
div.style.color = "white";
 +
div.style.fontFamily = "sans-serif";
 +
div.style.zIndex = "200";
 +
 +
div.appendChild(cross);
 +
div.appendChild(image);
 +
div.appendChild(headerTable);
 +
/*div.appendChild(header); */
 +
div.appendChild(content);
 +
team_table_div.appendChild(div);
 
}
 
}
−
.Texto h2{
+
function grow(elem){
−
align-self: left;
+
elem.style.transform = 'scale(1.1)';
 
}
 
}
−
+
 
−
.Texto p {
+
function shrink(elem){
−
text-align: justify;
+
elem.style.transform = 'scale(1.0)';
 
}
 
}
−
+
 
−
.Texto img{
+
   
−
width: 70%;
+
          $(window).scroll(function(){
−
max-height: 500px;
+
      var f = $(document).scrollTop();
 +
              if(f>=650){
 +
                        if(f <= window.pageYOffset + document.getElementsByClassName("table_title")[1].getBoundingClientRect().top){
 +
    document.querySelector(".tips").classList.add("tips_hidden");
 +
                        }
 +
                        else{
 +
                            document.querySelector(".tips").classList.remove("tips_hidden");
 +
                        }
 +
}else{
 +
document.querySelector(".tips").classList.remove("tips_hidden");
 
}
 
}
−
+
        });
−
.Caption{
+
−
width: 70%;
+
−
}
+
−
html, body {
+
−
    height: 100vh;
+
−
}
+
−
+
−
</style>
+
−
+
−
<script>
+
  
 +
         
  
−
function getElementY(query) {
+
    window.onload = function(){  
−
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
+
generate_header("The team", "https://static.igem.org/mediawiki/2021/9/96/T--TecCEM--TeamPhotos_4.png", "#FDE68A", "#0099ff", "#B1E7EF" );
−
}
+
//alert(teamMembersPhotosArray.toString());
 +
//alert(teamMembersElems.toString());
 +
var teamMembersNameBlock = document.getElementsByClassName("person_name_tb");
  
−
function doScrolling(element, duration) {
+
for (var i = 0; i < teamCollaboratorsElems.length; i++) {
−
var startingY = window.pageYOffset
+
    let x = i; // we make a copy of i to avoid reference to last i value
−
  var elementY = getElementY(element)
+
    teamCollaboratorsElems[i].src = teamMembersPhotosArray[x];
−
  // If element is close to page's bottom then window will scroll only to some position above the element.
+
    teamCollaboratorsElems[i].onclick = function() {person_data( teamCollaboratorsFullNames[x], teamCollaboratorsFullNames[x] , teamCollaboratorsJobs[x] , teamCollaboratorsMajors[x], teamCollaboratorsAttributions[x], teamMembersLinkedin[x] , x );};
−
  var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
+
    teamCollaboratorsElems[i].onmouseover = function() {grow(teamCollaboratorsElems[x])};
−
var diff = targetY - startingY
+
    teamCollaboratorsElems[i].onmouseleave = function() {shrink(teamCollaboratorsElems[x])};
−
  // Easing function: easeInOutCubic
+
                teamMembersNameBlock[i].innerHTML = teamCollaboratorsFullNames[x];
−
  // From: https://gist.github.com/gre/1650294
+
}
−
  var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+
−
  var start
+
  
−
  if (!diff) return
+
                       
 +
                     
 +
var numOfBubbles = 8;
 +
console.log("numOfBuublesDeclaredCorrectly");
  
−
// Bootstrap our animation - it will get called right before next frame shall be rendered.
+
for (j = 0;j < numOfBubbles;j++){
−
window.requestAnimationFrame(function step(timestamp) {
+
    var bubble_size = generateRandomNumber(20,60);
−
    if (!start) start = timestamp
+
    var left = generateRandomNumber(10, 70);
−
    // Elapsed miliseconds since start of scrolling.
+
    var speed_percentage = generateRandomNumber(70,100);
−
    var time = timestamp - start
+
    generate_bubble(bubble_size, left, speed_percentage);
−
// Get percent of completion in range [0, 1].
+
}
−
    var percent = Math.min(time / duration, 1)
+
−
    // Apply the easing.
+
−
    // It can cause bad-looking slow frames in browser performance tool, so be careful.
+
−
    percent = easing(percent)
+
  
−
    window.scrollTo(0, startingY + diff * percent)
+
    }
  
−
// Proceed with animation as long as we wanted it to.
 
−
    if (time < duration) {
 
−
      window.requestAnimationFrame(step)
 
−
    }
 
−
  })
 
−
}
 
  
−
// Apply event handlers. Example of firing the scrolling mechanism.
+
    </script>
−
document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000))
+
<div class="blue_body bubbles_window" style="width:100vw;">
−
document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000))
+
 
−
document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000))
+
 
−
document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000))
+
<!-- -------------  LANDING IMAGE  -------------------->
−
document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000))
+
<div class="overlay_container landing_image_div">
−
</script>
+
−
<script>
+
−
$(window).scroll(function(){
+
−
  if($(document).scrollTop() > 650){
+
−
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
+
−
  }else{
+
−
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
+
−
}
+
−
});
+
−
</script>
+
 
 
 +
</div>
 +
 +
 +
 +
<h2 class="table_title" style="margin-left:5%; font-family:'Nunito',sans-serif;">Collaborators</h2>
 +
 +
<!-- -------------  THE TEAM TABLE  -------------------->
 +
<div id="collaborators_table_div">
 +
<table class="full_screen_table" style="border:none;">
 +
<tr>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px; text-align:center;"></p></div></td>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px;text-align:center;"></p></div></td>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px;text-align:center;"></p></div></td>
 +
</tr>
 +
                     
 +
<tr>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px; text-align:center;"></p></div></td>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px;text-align:center;"></p></div></td>
 +
<td class="td_person_table" style="border:none;"><div class="collaborator_image_div" style="inline_block"><img class="collaborator_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:white; font-size:30px;text-align:center;"></p></div></td>
 +
 +
</tr>
 +
 +
</table>
 +
</div>
 +
 +
 +
 +
<!--------------------- BREAKS FOR FOOTER TEMPLATE ---------------------->
 +
<br><br><br><br>
 +
<br><br><br><br>
 +
<br><br><br><br>
 +
<br><br>
 +
 +
 +
</div>
 
</html>
 
</html>
 +
 +
{{TecCEM/Footer}}

Revision as of 01:04, 17 October 2021

Untitled Document i

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Collaborators