(157 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{TecCEM/Menu}} | {{TecCEM/Menu}} | ||
{{TecCEM/TeamCss}} | {{TecCEM/TeamCss}} | ||
+ | {{TecCEM/BubblesTemplate}} | ||
+ | {{TecCEM/header_generator}} | ||
<html> | <html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | var cardShowing = false; | ||
/* --------------------- WE DECLARE THE ARRAYS WITH THE ---------------------- | /* --------------------- WE DECLARE THE ARRAYS WITH THE ---------------------- | ||
----------------------- INFORMATION OF THE TEAM MEMBERS --------------------- */ | ----------------------- INFORMATION OF THE TEAM MEMBERS --------------------- */ | ||
− | + | var teamMembersElems = document.getElementsByClassName("person_image"); | |
− | + | var teamMembersNames = new Array(); | |
− | + | teamMembersNames.push("Francisco"); | |
− | + | teamMembersNames.push("Carlo"); | |
− | + | teamMembersNames.push("Nadia"); | |
− | + | teamMembersNames.push("Arturo"); | |
− | + | teamMembersNames.push("Nayelhi"); | |
− | + | teamMembersNames.push("Enrique"); | |
− | + | teamMembersNames.push("Brenda"); | |
− | + | teamMembersNames.push("Jossan"); | |
− | + | teamMembersNames.push("Valery"); | |
− | + | teamMembersNames.push("Daniela"); | |
− | + | teamMembersNames.push("Tania"); | |
− | + | teamMembersNames.push("Maria Jose"); | |
− | + | teamMembersNames.push("Marianela"); | |
− | + | teamMembersNames.push("Carlos"); | |
− | + | teamMembersNames.push("Jose Angel"); | |
− | + | //12 | |
− | + | ||
− | + | var teamMembersFullNames = new Array(); | |
− | + | teamMembersFullNames.push("Francisco J. Castaneda Villagran"); | |
− | + | teamMembersFullNames.push("Carlo Ariel Flores Carrillo"); | |
− | + | teamMembersFullNames.push("Nadia Espinoza Mendoza"); | |
− | + | teamMembersFullNames.push("Jorge Arturo Ortiz Loyola Solana"); | |
− | + | teamMembersFullNames.push("Nayelhi Julieta Alcazar Ramirez"); | |
− | + | teamMembersFullNames.push("Jairo Enrique Ramirez Sanchez"); | |
− | + | teamMembersFullNames.push("Brenda Jimenez"); | |
− | + | teamMembersFullNames.push("Jossan David Cardona Ramirez"); | |
− | + | teamMembersFullNames.push("Valery Robles"); | |
− | + | teamMembersFullNames.push("Daniela Zavala Melo"); | |
− | + | teamMembersFullNames.push("Tania E. Campa Sosapavon"); | |
− | + | teamMembersFullNames.push("Maria Jose Monteagudo"); | |
− | + | teamMembersFullNames.push("Marianela Contreras Domínguez"); | |
− | + | teamMembersFullNames.push("Carlos Espejel"); | |
− | + | teamMembersFullNames.push("Jose Angel Del Angel D."); | |
− | + | //12 | |
− | + | ||
− | + | var teamMembersJobs = new Array(); | |
− | + | teamMembersJobs.push("Team Leader"); | |
− | + | teamMembersJobs.push("Project Manager"); | |
− | + | teamMembersJobs.push("Interlab manager"); | |
− | + | teamMembersJobs.push("Wet Lab Coordinator"); | |
− | + | teamMembersJobs.push("Cloning Manager"); | |
− | + | teamMembersJobs.push("Math Modeling & Software"); | |
− | + | teamMembersJobs.push("Material characterization and fermentations"); | |
− | + | teamMembersJobs.push("Hardware Manager"); | |
− | + | teamMembersJobs.push("Biobricks design"); | |
− | + | teamMembersJobs.push("Daniela Zavala Melo's job"); | |
− | + | teamMembersJobs.push("Dry Lab Coordinator"); | |
− | + | teamMembersJobs.push("Human práctices"); | |
− | + | teamMembersJobs.push("Image Coordinator"); | |
− | + | teamMembersJobs.push("Web developement"); | |
− | + | teamMembersJobs.push("Web developement"); | |
− | + | //12 | |
− | + | ||
− | + | var teamMembersMajors = new Array(); | |
− | + | teamMembersMajors.push("Biotechnology"); | |
− | + | teamMembersMajors.push("Biotechnology"); | |
+ | teamMembersMajors.push("Biotechnology"); | ||
+ | teamMembersMajors.push("Biotechnology"); | ||
+ | teamMembersMajors.push("Biotechnology"); | ||
+ | teamMembersMajors.push("Data science and mathematics"); | ||
+ | teamMembersMajors.push("Biotechnology"); | ||
+ | teamMembersMajors.push("Automotive"); | ||
+ | teamMembersMajors.push("Biotechnology"); | ||
+ | teamMembersMajors.push("Mechatronics"); | ||
+ | teamMembersMajors.push("Mechatronics"); | ||
+ | teamMembersMajors.push("Bussiness Administration"); | ||
+ | teamMembersMajors.push("Communication"); | ||
+ | teamMembersMajors.push("Computer Science"); | ||
+ | teamMembersMajors.push("Robotics & Digital Systems Engineering"); | ||
+ | //12 | ||
+ | |||
+ | var teamMembersPhotosArray = new Array(); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/e/e5/T--TecCEM--TeamMembers_Francisco.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/c/c7/T--TecCEM--TeamMembers_Carlo.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/6/61/T--TecCEM--TeamMembers_Nadia.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/6/65/T--TecCEM--TeamMembers_Arturo2.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/b/b2/T--TecCEM--TeamMembers_Nayelhi.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/a/a3/T--TecCEM--TeamMembers_Enrique.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/6/68/T--TecCEM--TeamMembers_Brenda.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/5/5b/T--TecCEM--TeamMembers_Jossan.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/3/39/T--TecCEM--TeamMembers_Valery.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/e/ef/T--TecCEM--TeamMembers_Daniela.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/e/eb/T--TecCEM--TeamMembers_Tania.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/4/4b/T--TecCEM--TeamMembers_Maria_jose.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/6/64/T--TecCEM--TeamMembers_Marianela.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/2/2b/T--TecCEM--TeamMembers_Carlos.png"); | ||
+ | teamMembersPhotosArray.push("https://static.igem.org/mediawiki/2021/a/a7/T--TecCEM--TeamMembers_JoseAngel.png"); | ||
+ | |||
+ | |||
+ | |||
+ | var teamMembersDescriptions = new Array(); | ||
+ | teamMembersDescriptions.push("Francisco is a ninth-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("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("I am studying the ninth semester of Biotechnology Engineering. I have always had a great interest in science and in particular biology. I love spending time with my sister, traveling, and hanging out with my friends. In my spare time I like to practice yoga and listen to music. I really enjoy learning new things and sleeping all day."); | ||
+ | teamMembersDescriptions.push("I am Arturo Ortiz 🥵 and I am in fifth semester of biotechnology engineering 😎👌. I love chemistry and biology and that's why I'm sure iGEM is for me 😍✋. I enjoy swimming, playing tennis and being with my friends 🥰. I really like traveling but I like more Bad Bunny 😫💦. I learn German at the Goethe 🇩🇪🤪 and my goal is to go to study and live in Germany 😳👉👈."); | ||
+ | teamMembersDescriptions.push("I am studying the ninth semester of Biotechnology Engineering. I have a great love for art (dance especially) and science, and it makes me very happy to live my life with both disciplines. Being part of iGEM and the TECCEM jazz dance company is the dream that has come true. In my spare time I like to read, watch mystery movies, play with my puppy, and spend time with my family and friends."); | ||
+ | teamMembersDescriptions.push("I am a person who finds happiness in purpose and passionate about technological development for human well-being. My passion has allowed me today to be the leader of an entrepreneurship initiative with the mission of fighting for the inclusion of people with hearing disabilities, obtaining a 100% scholarship at the Tecnológico de Monterrey and being a member of the Mexican artificial intelligence society. But even more important than that, I am someone in love with nature who likes to walk in it, someone who lives through music and loves to share the knowledge they have."); | ||
+ | teamMembersDescriptions.push("My name is Brenda, I am an Engineer in Biotechnology 7th semester student and I am really passionate about it, also to health related biological sciences. I love being part of the iGEM team and I am also part of the swimming representative team at TEC CEM. I love spending time with my family, friends and pets. I enjoy gardening, traveling, painting and reading mystery novels and Greek mythology books."); | ||
+ | teamMembersDescriptions.push("My name is Jossan David, I was born in Guadalajara, Jalisco. He is currently studying the seventh semester of Automotive Design Engineering. My favorite sport is soccer and Formula 1, I also like to go to the gym. I am passionate about learning and venturing into different areas of science and engineering, which is why I spend my free hours reading books, participating in different projects or reviewing scientific articles."); | ||
+ | teamMembersDescriptions.push("Currently ninth semester of Biotechnology Engineering. Since I was a child I have liked sports a lot and since then I have been playing basketball and I am a professional Tahitian dancer, besides that I like to try healthy recipes and go to the gym in my spare time. I am passionate about science and dream of one day having my own food supplement company. I also like spending time with my family, spending time with myself, seeing new places, reading and being the best version of myself every day."); | ||
+ | teamMembersDescriptions.push("I am studying the fifth semester of the Mechatronics Engineering career, I love all the mystery stories and reading, a habit that took me a while to develop. I am a fan of winter sports, musical theater and the skills that I have gradually learned in my career and short life. Most of the time I find myself on my own planet, imagining the possibilities that my career offers me for the future, so I always have to bring myself back to earth."); | ||
+ | teamMembersDescriptions.push("..."); | ||
+ | teamMembersDescriptions.push("I am a person who is passionate about learning, understanding how the world works in order to improve it. I love visualizing the world from a scientific point of view as it is quite interesting to think that science is also art. My goal is to be a researcher from the perspective of quantum biology, I love nature, knowing that biology is so perfect and well done can fascinate me in every way."); | ||
+ | teamMembersDescriptions.push("My name is Marianela Contreras, I am currently studying a career in Communication and Digital Media. I am passionate about my career because I believe that communication is everywhere. My hobbies are cooking, especially desserts, reading, writing, going to the cinema, exercising, traveling and learning new languages. I speak Spanish, as my native language, English, French, Japanese and I would like to learn many more. I love studying them because I feel that being able to communicate with people in their native language is a deeper way to be able to clearly express an idea and learn from their culture."); | ||
+ | teamMembersDescriptions.push("I am a seventh-term student of systems engineering, I am passionate about technological development and learning new things every day, I consider myself a self-taught, focused and highly organized person. I really enjoy creating technological solutions to different problems and sharing my knowledge with the world or simply programming for fun, always accompanied by good music and coffee. I like to have time to myself and relax, enjoy nature, go for a run or ride a bike."); | ||
+ | teamMembersDescriptions.push("Jose Angel is a junior student at Tecnologico de Monterrey CEM, he has plenty of experience in programming, he enjoys solving programming puzzles, app developement, playing soccer and hanging out with his friends. Jose Angel's favorite dj's and bands are Avicii, Lost Frecuencies and Imagine Dragons"); | ||
+ | |||
+ | |||
+ | var teamMembersSongs = new Array(); | ||
+ | teamMembersSongs.push("A Change of Seasons - Dream Theater"); | ||
+ | teamMembersSongs.push("Gravity Storm - Steve Vai"); | ||
+ | teamMembersSongs.push("A Sky Full Of Stars - Coldplay"); | ||
+ | teamMembersSongs.push("Otra Noche en Miami - Bad Bunny 🥰👁🐰"); | ||
+ | teamMembersSongs.push("Believer - Imagine Dragons"); | ||
+ | teamMembersSongs.push("Behold - Orbit Culture"); | ||
+ | teamMembersSongs.push("Dancing queen- ABBA"); | ||
+ | teamMembersSongs.push("Roses - The Chainsmokers"); | ||
+ | teamMembersSongs.push("The Nights - Avicii "); | ||
+ | teamMembersSongs.push("..."); | ||
+ | teamMembersSongs.push("Free - Rudimental ft Emeli Sande"); | ||
+ | teamMembersSongs.push("..."); | ||
+ | teamMembersSongs.push("In My Life - The Beatles "); | ||
+ | teamMembersSongs.push("Like a stone - Audioslave"); | ||
+ | teamMembersSongs.push("West coast - Imagine Dragons"); | ||
+ | //12 | ||
+ | |||
+ | |||
+ | var teamMembersBook = new Array(); | ||
+ | teamMembersBook.push("A review of history of all the cultures on earth"); | ||
+ | teamMembersBook.push("Mismatched likes? Science, Arts, Sports and Philosophy"); | ||
+ | teamMembersBook.push("How to survive being an absent-minded"); | ||
+ | teamMembersBook.push("In search of the meaning of life"); | ||
+ | teamMembersBook.push("How dreams really do come true"); | ||
+ | teamMembersBook.push("Music, Maths and Nightmares: a new approach"); | ||
+ | teamMembersBook.push("Life lessons, how to face them by not collapsing... A lot"); | ||
+ | teamMembersBook.push("Leaving your comfort zone as a lifestyle that changes you every day"); | ||
+ | teamMembersBook.push("How to achieve your goals from facing your fears"); | ||
+ | teamMembersBook.push("..."); | ||
+ | teamMembersBook.push("Self love as a radical act"); | ||
+ | teamMembersBook.push("..."); | ||
+ | teamMembersBook.push("Public opinion influence on the social construct of the success"); | ||
+ | teamMembersBook.push("The impact of artificial intelligence on our society"); | ||
+ | teamMembersBook.push("The Machine Learning handbook as summarized as possible"); | ||
+ | //12 | ||
+ | |||
+ | |||
+ | var teamMembersLinkedin = new Array(); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/francisco-javier-casta%C3%B1eda-villagran-853966191/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/nadia-espinoza-mendoza-75420510b/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/jorgearturoortizloyolasolana"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/nayelhialcazar-r/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/jairoenriqueramirezsanchez/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/brendajim%C3%A9nezl%C3%B3pez/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/jossancardona/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/valery-tixian-44aaa41a4"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/elizabeth-campa-sosapav%C3%B3n-0b8330176/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/mar%C3%ADa-jos%C3%A9-monteagudo-candiani-a5a90098/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/marianela-contreras-dominguez/"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/carlos-espejel-salazar-4a8655192"); | ||
+ | teamMembersLinkedin.push("https://www.linkedin.com/in/jos%C3%A9-%C3%A1ngel-del-%C3%A1ngel-6a9293175/"); | ||
+ | //12 | ||
+ | |||
+ | |||
+ | |||
+ | /* --------------------- WE DECLARE THE ARRAYS WITH THE ---------------------- | ||
+ | ----------------------- INFORMATION OF THE TEAM ADVISORS --------------------- */ | ||
+ | |||
+ | var teamAdvisorsElems = document.getElementsByClassName('advisor_image'); | ||
+ | console.log("advisor elems size is:" + teamAdvisorsElems.length ); | ||
+ | |||
+ | var teamAdvisorsNames = new Array(); | ||
+ | teamAdvisorsNames.push('Carlos Eduardo Gómez'); | ||
+ | teamAdvisorsNames.push('Jesus Ismael Calzada'); | ||
+ | |||
+ | var teamAdvisorsPhotosArray = new Array(); | ||
+ | teamAdvisorsPhotosArray.push("https://static.igem.org/mediawiki/2021/e/e2/T--TecCEM--Carloss.png"); | ||
+ | teamAdvisorsPhotosArray.push("https://static.igem.org/mediawiki/2021/3/3c/T--TecCEM--JesusIsma.png"); | ||
+ | |||
+ | |||
+ | |||
+ | /* --------------------- WE DECLARE THE ARRAYS WITH THE ---------------------- | ||
+ | ----------------- INFORMATION OF THE MAIN INVESTIGATORS--------------------- */ | ||
+ | |||
+ | var teamInvestigatorsElems = document.getElementsByClassName('investigator_image'); | ||
+ | |||
+ | var teamInvestigatorsNames = new Array(); | ||
+ | teamInvestigatorsNames.push('PhD. Ana Laura Torres Huerta'); | ||
+ | teamInvestigatorsNames.push('PhD. Aurora Antonio Perez'); | ||
+ | |||
+ | var teamInvestigatorsPhotosArray = new Array(); | ||
+ | teamInvestigatorsPhotosArray.push("https://static.igem.org/mediawiki/2021/e/e0/T--TecCEM--TeamInvestigators_AnaLaura.jpeg"); | ||
+ | teamInvestigatorsPhotosArray.push("https://static.igem.org/mediawiki/2021/4/41/T--TecCEM--TeamInvestigators_Aurora.jpeg"); | ||
Line 70: | Line 211: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | function person_data(name, full_name, job, major, description, song, book, linkedin, i){ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | function person_data(name, description, i){ | + | |
var teamTableDiv = document.getElementsByTagName('body')[0]; | var teamTableDiv = document.getElementsByTagName('body')[0]; | ||
var div = document.createElement('div'); | var div = document.createElement('div'); | ||
var cross = document.createElement('img'); | var cross = document.createElement('img'); | ||
var image = document.createElement('img'); | var image = document.createElement('img'); | ||
− | |||
var content = document.createElement('p'); | var content = document.createElement('p'); | ||
− | + | var headerTable = document.createElement("table"); | |
− | + | var footerTable = document.createElement("table"); | |
+ | |||
+ | |||
+ | 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;color:white;'>" + full_name + "</p>\ | ||
+ | <p style='font-size:15px; font-style: italic; margin-top:0px; margin-bottom:0px;color:white;'>" + job + "</p>\ | ||
+ | </td>\ | ||
+ | \ | ||
+ | <td style='width:10%; border:none;'>\ | ||
+ | <a href=" + linkedin + ">\ | ||
+ | <img style='filter: grayscale(100%) invert(1) ; width:60%; 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='color:white; font-weight:bold; font-size:25px; font-family:\"Nunito\", sans-serif;margin-top:0px; margin-bottom:0px;'>" + "Major:" + "</p>\ | ||
+ | <p style='color:white;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.innerHTML = description; | ||
− | content.style.marginLeft = " | + | content.style.marginLeft = "7.5%"; |
− | content.style.width = "80%"; | + | content.style.marginRight = "7.5%"; |
− | content.style.marginBottom = " | + | /*content.style.width = "80%";*/ |
− | content.style. | + | content.style.marginBottom = "2%"; |
+ | content.style.fontFamily = "'Roboto', sans-serif" | ||
+ | content.style.fontSize = "15px"; | ||
+ | content.style.color = "white"; | ||
cross.src = "https://static.igem.org/mediawiki/2021/c/cc/T--TecCEM--CrossIcon.png"; | cross.src = "https://static.igem.org/mediawiki/2021/c/cc/T--TecCEM--CrossIcon.png"; | ||
− | cross.style.width = " | + | cross.style.width = "40px"; |
− | cross.style.height = " | + | cross.style.height = "40px"; |
− | cross.style.marginTop = " | + | cross.style.marginTop = "10px"; |
+ | cross.style.marginLeft = "10px"; | ||
cross.style.display = "block"; | cross.style.display = "block"; | ||
cross.onclick = function() {div.parentNode.removeChild(div)}; | cross.onclick = function() {div.parentNode.removeChild(div)}; | ||
+ | cross.style.cursor = 'pointer'; | ||
+ | cross.style.filter = 'invert(1)'; | ||
image.style.width = "20%"; | image.style.width = "20%"; | ||
image.src = teamMembersPhotosArray[i]; | image.src = teamMembersPhotosArray[i]; | ||
image.style.marginLeft = "50%"; | image.style.marginLeft = "50%"; | ||
− | image.style.transform = "translate(-50%,- | + | image.style.transform = "translate(-50%,-60%)"; |
+ | image.style.borderRadius = "100%"; | ||
+ | image.style.display = "block"; | ||
+ | image.style.border = "solid 5px #3A9300"; | ||
− | div. | + | footerTable.style.width = "90%"; |
− | div.style.backgroundColor = " | + | footerTable.innerHTML = "\ |
+ | <tr>\ | ||
+ | <td style='width:10%; border:none;'>\ | ||
+ | <img style='filter: invert(1);width:70%; opacity:0.5;' src='https://static.igem.org/mediawiki/2021/3/3c/T--TecCEM--Images_music_icon.png'>\ | ||
+ | </td>\ | ||
+ | <td style='width:40%; border:none'>\ | ||
+ | <p style='font-size:15px; font-family:\"Nunito\", sans-serif;margin-top:0px; margin-bottom:0px;color:white;'>" + name + "'s song is:</p>\ | ||
+ | <p style='font-size:15px; margin-top:0px; margin-bottom:0px;color:white;'>" + song + "</p>\ | ||
+ | </td>\ | ||
+ | <td style='width:10%; border:none'>\ | ||
+ | <img style='filter: invert(1);width:80%; opacity:0.5;' src='https://static.igem.org/mediawiki/2021/c/cb/T--TecCEM--Images_book_icon.png'>\ | ||
+ | </td>\ | ||
+ | <td style='width:40%; border:none'>\ | ||
+ | <p style='font-size:15px; font-family:\"Nunito\", sans-serif;margin-top:0px; margin-bottom:0px;color:white;'>If " + name + " wrote a book it would be about:</p>\ | ||
+ | <p style='font-size:15px; margin-top:0px; margin-bottom:0px;color:white;'>" + book + "</p>\ | ||
+ | </td>\ | ||
+ | </tr>"; | ||
+ | footerTable.style.transform = "translate(-50%,0%)"; | ||
+ | footerTable.style.marginLeft = "50%"; | ||
+ | footerTable.style.marginBottom = "5%"; | ||
+ | footerTable.style.border = "none"; | ||
+ | footerTable.style.background = "transparent"; | ||
+ | |||
+ | |||
+ | div.style.top = "60%"; | ||
+ | div.style.left = "50%"; | ||
+ | div.style.transform = "translate(-50%,-50%)"; | ||
+ | div.style.backgroundColor = "rgb(0, 20, 137)"; | ||
div.style.borderRadius = "20px"; | div.style.borderRadius = "20px"; | ||
div.style.position = "fixed"; | div.style.position = "fixed"; | ||
− | div.width = | + | div.width = '100%'; |
div.style.color = "white"; | div.style.color = "white"; | ||
div.style.fontFamily = "sans-serif"; | div.style.fontFamily = "sans-serif"; | ||
+ | div.style.zIndex = "200"; | ||
div.appendChild(cross); | div.appendChild(cross); | ||
div.appendChild(image); | div.appendChild(image); | ||
− | div.appendChild(header); | + | div.appendChild(headerTable); |
+ | /*div.appendChild(header); */ | ||
div.appendChild(content); | div.appendChild(content); | ||
+ | div.appendChild(footerTable); | ||
team_table_div.appendChild(div); | team_table_div.appendChild(div); | ||
+ | |||
+ | /*document.addEventListener("click", (evt) => { | ||
+ | var flyoutElement = div; | ||
+ | let targetElement = evt.target; // clicked element | ||
+ | |||
+ | if (targetElement != flyoutElement){ | ||
+ | if (cardShowing == true) { | ||
+ | div.parentNode.removeChild(div); | ||
+ | cardShowing = false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | cardShowing = true;*/ | ||
+ | |||
} | } | ||
function grow(elem){ | function grow(elem){ | ||
− | elem.style. | + | elem.style.transform = 'scale(1.1)'; |
} | } | ||
function shrink(elem){ | function shrink(elem){ | ||
− | elem.style. | + | elem.style.transform = 'scale(1.0)'; |
+ | } | ||
+ | |||
+ | var imageSliderIndex = 0; | ||
+ | |||
+ | function slide_images(){ | ||
+ | var imgSliderDiv = document.getElementsByClassName("image_slider")[0]; | ||
+ | var images = imgSliderDiv.children; | ||
+ | images[imageSliderIndex].style.display = 'none'; | ||
+ | images[(imageSliderIndex+1)%2].style.display = 'block'; | ||
+ | console.log("slide_images instatiated index is " + imageSliderIndex); | ||
+ | imageSliderIndex = (imageSliderIndex+1)%2; | ||
+ | } | ||
+ | |||
+ | $(window).scroll(function(){ | ||
+ | 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"); | ||
} | } | ||
+ | }); | ||
+ | |||
window.onload = function(){ | window.onload = function(){ | ||
+ | generate_header("The team", "20%", "5%", "https://static.igem.org/mediawiki/2021/9/96/T--TecCEM--TeamPhotos_4.png", "#EFD250", "#45ACFF", "#FFFFFF" ); | ||
//alert(teamMembersPhotosArray.toString()); | //alert(teamMembersPhotosArray.toString()); | ||
− | //alert(teamMembersElems.toString()); | + | //alert(teamMembersElems.toString()); |
+ | var teamMembersNameBlock = document.getElementsByClassName("person_name_tb"); | ||
for (var i = 0; i < teamMembersElems.length; i++) { | for (var i = 0; i < teamMembersElems.length; i++) { | ||
let x = i; // we make a copy of i to avoid reference to last i value | let x = i; // we make a copy of i to avoid reference to last i value | ||
teamMembersElems[i].src = teamMembersPhotosArray[x]; | teamMembersElems[i].src = teamMembersPhotosArray[x]; | ||
− | teamMembersElems[i].onclick = function() {person_data( teamMembersNames[x], teamMembersDescriptions[x], x)}; | + | teamMembersElems[i].onclick = function() {person_data( teamMembersNames[x], teamMembersFullNames[x] , teamMembersJobs[x] , teamMembersMajors[x], teamMembersDescriptions[x], teamMembersSongs[x], teamMembersBook[x], teamMembersLinkedin[x] , x );}; |
teamMembersElems[i].onmouseover = function() {grow(teamMembersElems[x])}; | teamMembersElems[i].onmouseover = function() {grow(teamMembersElems[x])}; | ||
teamMembersElems[i].onmouseleave = function() {shrink(teamMembersElems[x])}; | teamMembersElems[i].onmouseleave = function() {shrink(teamMembersElems[x])}; | ||
+ | teamMembersNameBlock[i].innerHTML = teamMembersNames[x]; | ||
} | } | ||
+ | |||
+ | |||
+ | var teamAdvisorsNameBlock = document.getElementsByClassName("advisor_name_tb"); | ||
+ | |||
+ | for (var s = 0; s< teamAdvisorsElems.length; s++){ | ||
+ | let d = s; | ||
+ | teamAdvisorsElems[s].src = teamAdvisorsPhotosArray[d]; | ||
+ | teamAdvisorsNameBlock[s].innerHTML = teamAdvisorsNames[d]; | ||
+ | } | ||
+ | |||
+ | var teamInvestigatorsNameBlock = document.getElementsByClassName("investigator_name_tb"); | ||
+ | |||
+ | for (var v = 0; v< teamInvestigatorsElems.length; v++){ | ||
+ | let f = v; | ||
+ | teamInvestigatorsElems[v].src = teamInvestigatorsPhotosArray[f]; | ||
+ | teamInvestigatorsNameBlock[v].innerHTML = teamInvestigatorsNames[f]; | ||
+ | } | ||
var numOfBubbles = 8; | var numOfBubbles = 8; | ||
Line 163: | Line 409: | ||
generate_bubble(bubble_size, left, speed_percentage); | generate_bubble(bubble_size, left, speed_percentage); | ||
} | } | ||
+ | |||
+ | |||
+ | |||
} | } | ||
+ | |||
+ | setInterval(slide_images,2000); | ||
</script> | </script> | ||
− | <div class="blue_body"> | + | <div class="blue_body bubbles_window" style="width:100vw;"> |
+ | |||
+ | |||
<!-- ------------- LANDING IMAGE --------------------> | <!-- ------------- LANDING IMAGE --------------------> | ||
<div class="overlay_container landing_image_div"> | <div class="overlay_container landing_image_div"> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | < | + | |
+ | |||
+ | <h2 class="table_title" style="margin-left:5%; font-family:'Nunito',sans-serif;">The team</h2> | ||
<!-- ------------- THE TEAM TABLE --------------------> | <!-- ------------- THE TEAM TABLE --------------------> | ||
<div id="team_table_div"> | <div id="team_table_div"> | ||
− | <table class="full_screen_table"> | + | <table class="full_screen_table" style="border:none;"> |
<tr> | <tr> | ||
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px; text-align:center; font-weight:bold";></p></div></td> |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center; font-weight:bold;"></p></div></td> |
− | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center; font-weight:bold;"></p></div></td> | |
</tr> | </tr> | ||
− | + | ||
<tr> | <tr> | ||
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px; text-align:center; font-weight:bold;"></p></div></td> |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center; font-weight:bold;"></p></div></td> |
− | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px; text-align:center;"></p></div></td> |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> |
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px; text-align:center;"></p></div></td> | ||
+ | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> | ||
+ | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> | ||
</tr> | </tr> | ||
− | + | <tr> | |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px; text-align:center;"></p></div></td> |
− | <td class="td_person_table"><div class="person_image_div"><img class="person_image"></div></td> | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> |
− | + | <td class="td_person_table" style="border:none;"><div class="person_image_div" style="inline_block"><img class="person_image"><p class="person_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:30px;text-align:center;"></p></div></td> | |
</tr> | </tr> | ||
Line 221: | Line 467: | ||
</div> | </div> | ||
− | < | + | <h2 class="table_title" style="margin-left:5%; font-family:'Nunito',sans-serif;">Advisors</h2> |
− | + | <div id="advisors_table_div" style="position: relative;"> | |
− | <table class="full_screen_table"> | + | <table class="full_screen_table" style="border:none;"> |
<tr> | <tr> | ||
− | <td><div class=" | + | <td style="border:none;"><div class="advisor_image_div" style="inline_block"><img class="advisor_image"><p class="advisor_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:20px;text-align:center;">name</p></div></td> |
− | + | <td style="border:none;"><div class="advisor_image_div" style="inline_block"><img class="advisor_image"><p class="advisor_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:20px;text-align:center;">name</p></div></td> | |
− | <td><div class=" | + | |
</tr> | </tr> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</table> | </table> | ||
− | </div | + | </div> |
− | < | + | <h2 class="table_title" style="margin-left:5%; font-family:'Nunito',sans-serif;">Principal Investigators</h2> |
− | + | <div id="investigators_table_div" style="position: relative;"> | |
− | <table class="full_screen_table"> | + | <table class="full_screen_table" style="border:none;"> |
<tr> | <tr> | ||
− | <td | + | <td style="border:none;"><div class="investigator_image_div" style="align:block;"><img class="investigator_image"><p class="investigator_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:20px;text-align:center;">name</p></div></td> |
− | + | <td style="border:none;"><div class="investigator_image_div" style="align:block;"><img class="investigator_image"><p class="investigator_name_tb" style="font-family:'Roboto', sans-serif; color:#45ACFF; font-size:20px;text-align:center;">name</p></div></td> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <td | + | |
− | + | ||
− | + | ||
</tr> | </tr> | ||
</table> | </table> | ||
− | </div | + | </div> |
− | < | + | <h2 class="table_title" style="margin-left:5%; font-family:'Nunito',sans-serif;">Funny moments</h2> |
− | < | + | <div class="image_slider"> |
− | + | <img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--TeamPhotos_3.png"> | |
− | </div>--> | + | <img src="https://static.igem.org/mediawiki/2021/9/96/T--TecCEM--TeamPhotos_4.png"> |
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="tips"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--idea.png" style="width: 25%; display: inline-block" alt="idea"> | ||
+ | <h4 style="display: inline-block; font-family: Nunito; font-size: 1.8rem">Tip</h4> | ||
+ | <p style="padding: 0; margin: 0; display: inline; font-family: Roboto; font-size: 1.1rem; text-align: center">Click on the photo of a team member</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!--------------------- BREAKS FOR FOOTER TEMPLATE ----------------------> | ||
+ | <br><br><br><br> | ||
+ | <br><br><br><br> | ||
+ | <br><br><br><br> | ||
+ | <br><br> | ||
− | |||
</div> | </div> | ||
</html> | </html> | ||
+ | |||
+ | {{TecCEM/Footer}} |
Latest revision as of 18:54, 13 December 2021
The team
Advisors
name |
name |
Principal Investigators
name |
name |
Funny moments
![idea](https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--idea.png)
Tip
Click on the photo of a team member