Difference between revisions of "Team:TecCEM/Team"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
<title>iGEM Tec CEM team</title>
+
<title>IGem tec cem team</title>
+
<link rel="stylesheet" type="text/css" href="D:/tecdemty/5to Semestre/IGEM tec cem/team_css.css">
  <style>
+
        /*p{
+
      font-size: 100px;
+
      color: blue;
+
    }*/
+
    .landing_image{
+
        width: 100%;
+
    }
+
    .full_screen_table{
+
        width: 100%;
+
        background-color: red;
+
    }
+
    td img{
+
      display: block;
+
      margin-left: auto;
+
      margin-right: auto;
+
      border-radius: 20%;
+
      margin: 50px;
+
    }
+
  </style>
+
 
<script type="text/javascript">
 
<script type="text/javascript">
var someText = "hola crayola!";
 
    window.onload = function(e){
 
    console.log("window.onload", e, Date.now() ,window.tdiff,
 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
 
    }
 
   
 
</script>
 
  
</head>
+
/* --------------------- WE DECLARE THE ARRAYS WITH THE ----------------------  
<body>
+
----------------------- INFORMATION OF THE TEAM MEMBERS --------------------- */
<!--------------- HERE GOES THE MENU TEMPLATE -------------------- -->
+
var teamMembersElems = document.getElementsByClassName("person_image");
<img class="landing_image" src="https://www.lollydaskal.com/wp-content/uploads/2018/09/Screen-Shot-2018-09-12-at-7.17.30-AM.png"/>
+
var teamMembersNames = new Array();
 +
teamMembersNames.push("Nayelhi");
 +
teamMembersNames.push("Mariana");
 +
teamMembersNames.push("Carlo");
 +
teamMembersNames.push("Francisco");
 +
teamMembersNames.push("Daniela");
 +
teamMembersNames.push("Jossan");
 +
teamMembersNames.push("Valery");
 +
teamMembersNames.push("Enrique");
 +
teamMembersNames.push("Luisa");
 +
teamMembersNames.push("Nadia");
 +
teamMembersNames.push("Samantha");
 +
teamMembersNames.push("Itzel");
 +
teamMembersNames.push("Brenda");
 +
teamMembersNames.push("Arturo");
 +
var teamMembersPhotosArray = new Array();
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/man.jpeg");
 +
teamMembersPhotosArray.push("test_images/man.jpeg");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/man.jpeg");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/man.jpeg");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/marianela.png");
 +
teamMembersPhotosArray.push("test_images/man.jpeg");
 +
var teamMembersDescriptions = new Array();
 +
teamMembersDescriptions.push("Nayelhi is studying the seventh\
 +
semester of Biotechnology Engineering. Her passion is \
 +
ballet, however, she enjoys and loves dance in general. \
 +
She likes to spend time reading, eating chocolate, and \
 +
playing with her puppy. She has a great love for science, \
 +
for the arts and believes in the power of both disciplines \
 +
to change the world.");
 +
teamMembersDescriptions.push("She is Mariana, she is \
 +
studying the seventh semester of Biotechnology Engineering. \
 +
She belongs to the representative athletics team. She loves \
 +
reading, history, sports, going on a trip, being with \
 +
friends / family and her bunny. She cries at romantic \
 +
movies and has a huge passion for science and animals.");
 +
teamMembersDescriptions.push("Carlo Flores is currently in the seventh semester of Biotechnology Engineering. Biology has caused him great curiosity from an early age. Also, since childhood he has liked to play sports, but among those he likes the most are basketball, swimming and martial arts. He loves hiking, spending time with his family, reflecting on life, reading horror / suspense / action stories, and playing video games.");
 +
teamMembersDescriptions.push("Francisco is a seventh semester student of Biotechnology Engineering, a career that he is passionate about due to his great love for science. He loves to play drums, read epic adventure books, and explore different places in his city. One of the things he enjoys the most is traveling and learning about different cultures. He is very fond of history and gets excited looking at old maps.");
 +
teamMembersDescriptions.push("Daniela is studying the fifth semester of the Mechatronics Engineering career, she loves all the mystery stories and reading, a habit that took her a while to develop. She is a fan of winter sports, musical theater and the skills that she has learned little by little in her career and short life 😂. Most of the time Daniela is on her own planet, imagining the possibilities that her career for the future, so you always have to bring it back to earth.");
 +
teamMembersDescriptions.push("Jossan was born in Guadalajara, Jalisco. He is currently studying the 5th semester of Automotive Design Engineering. Since he was a child, he has been very fond of soccer and exercising. In his spare time, he likes to enjoy the different sports that are broadcast on television. His main passion is learning and venturing into different areas of science and engineering.");
 +
teamMembersDescriptions.push("Valery is currently in the seventh semester of Biotechnology Engineering. Since she was a child, she has liked sports a lot and since then she has practiced basketball and she is a professional Tahitian dancer, in addition to that she likes to practice crossfit and go to the gym in her spare time. She is passionate about science and she dreams of one day helping many people with it. She also likes spending time with her family, spending time with herself, seeing new places, and trying different foods.");
 +
teamMembersDescriptions.push("He is Enrique, a student from Michoacán who is currently studying the 3rd semester of Engineering in Data Science and Mathematics. Enrique joined Tec de Monterrey as he was awarded the distinction of Leaders of Tomorrow. He really enjoys walking and exploring nature. Mathematics, music and helping others are his greatest tastes.");
 +
teamMembersDescriptions.push("Luisa is studying the 5th semester of Biotechnology Engineering. She is passionate about sports and she enjoys trying new activities like yoga and salsa dancing. In her spare time, she enjoys painting, reading, cooking, exercising, and spending time with her cats and dogs. She is passionate about science and learning about various subjects as well as she also has a fascination with languages, especially German.");
 +
teamMembersDescriptions.push("Nadia is studying the seventh semester of Biotechnology Engineering. She has always had a great interest in science and in particular biology. She loves spending time with her sister, traveling, and hanging out with her friends. In her free moments, she likes to practice yoga and listen to music. She really enjoys learning new things and sleeping all day.");
 +
teamMembersDescriptions.push("Samantha is studying the ninth semester of Biotechnology Engineering; fan of animals and food. She loves to go for a run, take photos, see places and try new things, draw, paint, dance whenever she can and make her friends laugh. In her spare time she exercises, yoga, cooks desserts, and looks for new things to learn.");
 +
teamMembersDescriptions.push("She is Itzel, she is studying the seventh semester of Biotechnology Engineering. The sciences have always attracted her attention, especially biology. She loves being outdoors, hanging out with friends, and listening to music. In her spare time she likes to bake, dance and draw.");
 +
teamMembersDescriptions.push("She is Brenda, currently in the 5th semester of B.S. in Biotechnology Engineering which she is passionate about, as well as biological sciences focused on health. She loves being part of the IGEM team, and she is also part of the TEC swimming representative, and 2 student groups. She loves spending time with her friends and family, traveling, painting, and she also loves reading mystery novels and Greek mythology.");
 +
teamMembersDescriptions.push("Arturo Ortiz is in the third semester of biotechnology. He loves chemistry and biology, so he is sure that iGEM is for him. He enjoys swimming, playing tennis, and being with his friends. He likes to travel a lot but he likes Bad Bunny better. He learns German at the Goethe Insitut and his goal is to study and live in Germany.");
  
<p class="team_header">The team</p>
 
  
<!-- the team table -->
+
/* ===========================================================================  
<table class="full_screen_table">
+
============================================================================ */
<tr>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
  
<tr>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
</tr>
 
  
<tr>
+
function generate_bubble(size_px, left, speed_percentage){
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
var div = document.createElement('div');
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
var animTime = 10*speed_percentage/100;
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
div.style.width = size_px.toString() + "px";
</tr>
+
div.style.height = size_px.toString() + "px";
 +
div.style.position = "absolute";
 +
div.style.border = "10px solid #45ACFF";
 +
div.style.borderRadius = "100%";
 +
div.style.left = left.toString() + "%";
 +
div.style.animationDuration = animTime.toString() +"s";
 +
div.style.animationName = "rise_up";
 +
div.style.animationIterationCount = "infinite";
 +
document.getElementsByTagName("body")[0].appendChild(div);
 +
}
  
<tr>
+
function generateRandomNumber(min, max){
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
return Math.floor(Math.random() * (max - min) + min);
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
  }
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
</table>
+
  
<p class="team_header">Advisors</p>
+
function person_data(name, description, i){
 +
var teamTableDiv = document.getElementsByTagName('body')[0]
 +
var div = document.createElement('div');
 +
var cross = document.createElement('img');
 +
var image = document.createElement('img');
 +
var header = document.createElement('h1');
 +
var content = document.createElement('p');
 +
header.innerHTML = "Meet " + name + "!";
 +
header.style.marginLeft = "5%";
 +
content.innerHTML = description;
 +
content.style.marginLeft = "10%";
 +
content.style.width = "80%";
 +
content.style.marginBottom = "10%";
 +
content.style.fontWeight = "bold";
 +
 +
cross.src = "https://cdn.icon-icons.com/icons2/2098/PNG/512/close_cross_icon_128690.png"
 +
cross.style.width = "30px";
 +
cross.style.height = "30px";
 +
cross.style.marginTop = "0%";
 +
cross.style.display = "block";
 +
cross.onclick = function() {div.parentNode.removeChild(div)};
 +
 +
image.style.width = "20%";
 +
image.src = teamMembersPhotosArray[i];
 +
image.style.marginLeft = "50%";
 +
image.style.transform = "translate(-50%,-50%)";
  
<!-- advisors table -->
+
div.className = "centered_div";
<table class="full_screen_table">
+
div.style.backgroundColor = "#CDECA9";
<tr>
+
div.style.borderRadius = "20px"
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
div.style.position = "fixed";
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
div.width = '100%';
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
div.style.color = "white";
</tr>
+
div.style.fontFamily = "sans-serif"
 +
 +
div.appendChild(cross);
 +
div.appendChild(image);
 +
div.appendChild(header);
 +
div.appendChild(content);
 +
team_table_div.appendChild(div);
 +
}
  
<tr>
+
function grow(elem){
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
elem.style.width = '110%';
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
}
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
  
<tr>
+
function shrink(elem){
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
elem.style.width = '100%';
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
}
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
  
<tr>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
 
</tr>
 
</table>
 
  
<p class="team_header">Principal Investigators</p>
+
    window.onload = function(){
 +
//alert(teamMembersPhotosArray.toString());
 +
//alert(teamMembersElems.toString());
  
<!-- principal investigators table -->
+
for (var i = 0; i < teamMembersElems.length; i++) {
<table class="full_screen_table">
+
    let x = i; // we make a copy of i to avoid reference to last i value
<tr>
+
    teamMembersElems[i].src = teamMembersPhotosArray[x]
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
    teamMembersElems[i].onclick = function() {person_data( teamMembersNames[x], teamMembersDescriptions[x], x)};
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
    teamMembersElems[i].onmouseover = function() {grow(teamMembersElems[x])}
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
    teamMembersElems[i].onmouseleave = function() {shrink(teamMembersElems[x])}
</tr>
+
}
  
<tr>
+
var numOfBubbles = 8;
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
  
<tr>
+
for (j = 0;j < numOfBubbles;j++){
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
var bubble_size = generateRandomNumber(20,60);
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
    var left = generateRandomNumber(10, 70);
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
    var speed_percentage = generateRandomNumber(70,100);
</tr>
+
    generate_bubble(bubble_size, left, speed_percentage);
 +
}
  
<tr>
+
    }
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
<td><img src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"></td>
+
</tr>
+
</table>
+
  
<p class="team_header">Funny moments</p>
+
</script>
 +
</head>
 +
<body>
 +
<!---------------  LANDING IMAGE  -------------------->
 +
<div class="overlay_container landing_image_div">
 +
<img class="landing_image overlaying_div_bottom"
 +
src="https://www.lollydaskal.com/wp-content/uploads/2018/09/Screen-Shot-2018-09-12-at-7.17.30-AM.png"/>
 +
<div class="overlaying_div_top centered_div" id="main_title">
 +
<h1>The team</h1>
 +
</div>
 +
<div class="wave">
 +
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,64L48,74.7C96,85,192,107,288,96C384,85,480,43,576,48C672,53,768,107,864,160C960,213,1056,267,1152,272C1248,277,1344,235,1392,213.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
 +
</div>
 +
<div class="wave">
 +
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#B1E7EF" fill-opacity="1" d="M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,202.7C672,213,768,203,864,176C960,149,1056,107,1152,90.7C1248,75,1344,85,1392,90.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
 +
</div>
 +
</div>
  
 +
<p class="table_title">The team<p>
  
 +
<!---------------  THE TEAM TABLE  -------------------->
 +
<div id="team_table_div" style="position: relative;">
 +
<table class="full_screen_table">
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
</table>
 +
</div>
 +
 +
<p class="table_title">Advisors</p>
 +
 +
<!--<div id="team_table_div" style="position: relative;">
 +
<table class="full_screen_table">
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
</table>
 +
</div>-->
 +
 +
<p class="table_title">Principal Investigators</p>
 +
 +
<!--<div id="team_table_div" style="position: relative;">
 +
<table class="full_screen_table">
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
 +
<tr>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
<td><div class=" person_image_div"><img class="person_image"></div></td>
 +
</tr>
 +
</table>
 +
</div>-->
 +
 +
<p class="table_title">Funny moments</p>
 +
 +
<div id="bubble">
 +
 +
</div>
  
  

Revision as of 20:44, 23 September 2021

Untitled Document i

IGem tec cem team

The team

The team

Advisors

Principal Investigators

Funny moments