|
|
Line 21: |
Line 21: |
| <body> | | <body> |
| <div class="introContainer"> | | <div class="introContainer"> |
− | <span id="introImage" style="background-image: unset"></span> | + | <span id="introImage" style="background-image: unset"> |
| + | <video muted autoplay playsinline loop preload> |
| + | <source src="https://static.igem.org/mediawiki/2020/0/03/T--Vilnius-Lithuania--Team.mp4" type="video/mp4"> |
| + | </video> |
| + | </span> |
| <div class="heading"><div>Who we</div><br> are.</div> | | <div class="heading"><div>Who we</div><br> are.</div> |
| <div class="heading other"><div class="invisible">Who we</div><br> are.</div> | | <div class="heading other"><div class="invisible">Who we</div><br> are.</div> |
Line 64: |
Line 68: |
| document.getElementById("fixedOverlay").classList.add("team"); | | document.getElementById("fixedOverlay").classList.add("team"); |
| </script> | | </script> |
− | <script>
| + | <script defer type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/Team&action=raw&ctype=text/javascript"></script> |
− | let suggestClick = document.querySelector(".suggestClick");
| + | |
− | let introContainer = document.querySelector(".introContainer");
| + | |
− | | + | |
− | let heading1 = document.querySelector(".introContainer .heading");
| + | |
− | let heading2 = document.querySelector(".introContainer .heading.other");
| + | |
− | | + | |
− | function createADiv(className, innerHTML){
| + | |
− | let newDiv = document.createElement("div");
| + | |
− | newDiv.className = className;
| + | |
− | newDiv.innerHTML = innerHTML;
| + | |
− | return newDiv;
| + | |
− | }
| + | |
− | | + | |
− | function showPersonInfo(personData) {
| + | |
− | suggestClick.classList.add("hidden");
| + | |
− | | + | |
− | introImage.classList.add("novideo");
| + | |
− | introVideoPlay.classList.add("novideo");
| + | |
− | heading1.classList.add("novideo");
| + | |
− | heading2.classList.add("novideo");
| + | |
− | | + | |
− | if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return;
| + | |
− | | + | |
− | // Animation begin
| + | |
− | let newImgDiv = document.createElement("div");
| + | |
− | newImgDiv.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
| + | |
− | introImage.appendChild(newImgDiv);
| + | |
− | | + | |
− | let newMemberDiv = document.createElement("div");
| + | |
− | newMemberDiv.classList.add("memberDiv", "alternative");
| + | |
− | let newMemberName = createADiv("memberName", "");
| + | |
− | personData.name.split(" ").forEach((word)=>{
| + | |
− | let wordSpan = document.createElement("span");
| + | |
− | wordSpan.innerText = word;
| + | |
− | newMemberName.appendChild(wordSpan);
| + | |
− | });
| + | |
− | if (personData.linkedin != undefined){
| + | |
− | let linkin = document.createElement("a");
| + | |
− | linkin.rel = "noreferrer noopener";
| + | |
− | linkin.target = "_blank";
| + | |
− | linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
| + | |
− | newMemberName.appendChild(linkin);
| + | |
− | }
| + | |
− | newMemberDiv.appendChild(newMemberName);
| + | |
− | let newMemberRole = createADiv("memberRole", personData.role);
| + | |
− | newMemberDiv.appendChild(newMemberRole);
| + | |
− | let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are you?");
| + | |
− | newMemberDiv.appendChild(newMemberQuestion);
| + | |
− | let newMemberFunFact = createADiv("memberFunFact", personData.about);
| + | |
− | newMemberDiv.appendChild(newMemberFunFact);
| + | |
− | introContainer.appendChild(newMemberDiv);
| + | |
− | | + | |
− | setTimeout(()=>{
| + | |
− | newImgDiv.classList.add("transition");
| + | |
− | memberDiv.classList.add("transition");
| + | |
− | newMemberDiv.classList.add("transition");
| + | |
− | }, 10);
| + | |
− | setTimeout(()=>{
| + | |
− | introImage.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
| + | |
− | newImgDiv.remove();
| + | |
− |
| + | |
− | memberDiv.classList.remove("transition");
| + | |
− | memberRole.innerHTML = personData.role;
| + | |
− | memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are you?";
| + | |
− | memberFunFact.innerHTML = personData.about;
| + | |
− | memberName.innerHTML = "";
| + | |
− | personData.name.split(" ").forEach((word)=>{
| + | |
− | let wordSpan = document.createElement("span");
| + | |
− | wordSpan.innerText = word;
| + | |
− | memberName.appendChild(wordSpan);
| + | |
− | });
| + | |
− | if (personData.linkedin != undefined){
| + | |
− | let linkin = document.createElement("a");
| + | |
− | linkin.rel = "noreferrer noopener";
| + | |
− | linkin.target = "_blank";
| + | |
− | linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
| + | |
− | memberName.appendChild(linkin);
| + | |
− | }
| + | |
− | newMemberDiv.remove();
| + | |
− | }, 400);
| + | |
− | // Animation end;
| + | |
− | }
| + | |
− | | + | |
− | function addPersonBubble(to, personData) {
| + | |
− | let item = document.createElement("span");
| + | |
− | item.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.img + ".png');";
| + | |
− | item.onclick = () => showPersonInfo(personData);
| + | |
− | to.appendChild(item);
| + | |
− | }
| + | |
− | let nullPerson = {
| + | |
− | name: "",
| + | |
− | img: undefined,
| + | |
− | bigImg: undefined,
| + | |
− | role: "",
| + | |
− | about: "",
| + | |
− | };
| + | |
− | let team = [
| + | |
− | {
| + | |
− | name: "Auksė Kazlauskaitė",
| + | |
− | img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė",
| + | |
− | bigImg: "7/74/T--Vilnius-Lithuania--team-big-Auksė",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>Fur seal.</b> As fur seal Aukse has a sharp eyesight and keen hearing. Furthermore, Auksė's kindness and helpfulness is a constant reminder of this animal's cuteness.",
| + | |
− | linkedin: "aukse-kazlauskaite-5309281b8/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Austėja Sungailaitė",
| + | |
− | img: "9/92/T--Vilnius-Lithuania--team-small-Austėja",
| + | |
− | bigImg: "9/9e/T--Vilnius-Lithuania--team-big-Austėja",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>Sea turtle.</b> She spends most of her free time travelling.",
| + | |
− | linkedin: "austėja-sungailaitė-b4a9981b9/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Edvinas Jurgelaitis",
| + | |
− | img: "1/13/T--Vilnius-Lithuania--team-small-Edvinas",
| + | |
− | bigImg: "0/03/T--Vilnius-Lithuania--team-big-Edvinas",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>Crucian carp.</b> Remarkably hardy and finds a way to breathe even when brought out of water.",
| + | |
− | linkedin: "edvinas-jurgelaitis-263645194/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Eglė Vitkūnaitė",
| + | |
− | img: "c/c1/T--Vilnius-Lithuania--team-small-Eglė",
| + | |
− | bigImg: "a/a0/T--Vilnius-Lithuania--team-big-Eglė",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>False killer whale.</b> Social, extremely rare and always shares her findings and ideas with others.",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Emilija Radlinskaitė",
| + | |
− | img: "e/e5/T--Vilnius-Lithuania--team-small-Emilija",
| + | |
− | bigImg: "d/d7/T--Vilnius-Lithuania--team-big-Emilija",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>North Pacific giant octopus.</b> Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.",
| + | |
− | linkedin: "emilija-radlinskaitė-51967717b/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Emilis Gaidauskas",
| + | |
− | img: "a/a0/T--Vilnius-Lithuania--team-small-Emilis",
| + | |
− | bigImg: "2/2a/T--Vilnius-Lithuania--team-big-Emilis",
| + | |
− | role: "Wet Lab",
| + | |
− | about: "<b>Siamese fighting fish.</b> Shows off his colors and flare in sharply written texts and fashion.",
| + | |
− | linkedin: "emilis-gaidauskas-1a3088175/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Ieva Lingytė",
| + | |
− | img: "2/23/T--Vilnius-Lithuania--team-small-Ieva",
| + | |
− | bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva",
| + | |
− | role: "Team Leader & Wet Lab",
| + | |
− | about: "<b>Axolotl.</b> Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.",
| + | |
− | linkedin: "ieva-lingytė-54a133181/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Barbora Vasiliauskaitė",
| + | |
− | img: "6/60/T--Vilnius-Lithuania--team-small-Barbora",
| + | |
− | bigImg: "8/83/T--Vilnius-Lithuania--team-big-Barbora",
| + | |
− | role: "Human Practices",
| + | |
− | about: "<b>Sea otter.</b> She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.",
| + | |
− | linkedin: "barbora-vasiliauskaite/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Kamilė Liucija Vainiūtė",
| + | |
− | img: "a/a0/T--Vilnius-Lithuania--team-small-Kamilė",
| + | |
− | bigImg: "7/7e/T--Vilnius-Lithuania--team-big-Kamilė",
| + | |
− | role: "IT",
| + | |
− | about: "<b>Black stingray.</b> She is able to enclasp an impressive amount of knowledge and projects in a limited amount of time. If necessary, Kamilė will sting an incorrect part of the code with impeccable accuracy.",
| + | |
− | linkedin: "kamilė-vainiūtė-b29845159/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Paulius Sasnauskas",
| + | |
− | img: "e/e6/T--Vilnius-Lithuania--team-small-Paulius",
| + | |
− | bigImg: "d/d0/T--Vilnius-Lithuania--team-big-Paulius",
| + | |
− | role: "IT",
| + | |
− | about: "<b>Emperor penguin.</b> Remains chill even in challenging conditions. Likes to slide on thin ice.",
| + | |
− | linkedin: "pauliussasnauskas/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Liepa Šiupšinskaitė",
| + | |
− | img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa",
| + | |
− | bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa",
| + | |
− | role: "Graphic Design",
| + | |
− | about: "<b>Parrotfish.</b> Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.",
| + | |
− | linkedin: "liepa-siupsinskaite-56971a1b7/",
| + | |
− | },
| + | |
− | {
| + | |
− | name: "Monika Gineitytė",
| + | |
− | img: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
| + | |
− | bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika",
| + | |
− | role: "Finances",
| + | |
− | about: "<b>Blue tang.</b> May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.",
| + | |
− | },
| + | |
− | ];
| + | |
− | | + | |
− | team.forEach((item) => addPersonBubble(bubbleList, item));
| + | |
− | | + | |
− | document.body.onload = () => {
| + | |
− | introImage.innerHTML =
| + | |
− | `<video muted autoplay playsinline loop preload>
| + | |
− | <source src="https://static.igem.org/mediawiki/2020/0/03/T--Vilnius-Lithuania--Team.mp4" type="video/mp4">
| + | |
− | </video>`; // TODO: change video
| + | |
− | }
| + | |
− | introVideoPlay.onclick = () => {
| + | |
− | showPersonInfo(nullPerson);
| + | |
− | heading1.classList.remove("novideo");
| + | |
− | heading2.classList.remove("novideo");
| + | |
− | introImage.classList.remove("novideo");
| + | |
− | introVideoPlay.classList.remove("novideo");
| + | |
− | introImage.firstElementChild.play();
| + | |
− | }
| + | |
− | | + | |
− | function repositionSuggestion() {
| + | |
− | let bleft = bubbleList.firstElementChild.getBoundingClientRect().left;
| + | |
− | let bbottom = bubbleList.getBoundingClientRect().height;
| + | |
− | if (bleft < 10) bleft = 10;
| + | |
− | suggestClick.style.marginLeft = (bleft + 15) + "px";
| + | |
− | suggestClick.style.bottom = (bbottom + 0) + "px";
| + | |
− | }
| + | |
− | window.addEventListener("resize", repositionSuggestion, { passive: 1 });
| + | |
− | repositionSuggestion();
| + | |
− | | + | |
− | </script>
| + | |
| <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script> | | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script> |
| <script> | | <script> |