|
|
| (One intermediate revision by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{Vilnius-Lithuania/Loader}}
| |
| − | {{Vilnius-Lithuania/menuOverlay}}
| |
| | | | |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <meta charset="utf-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/ContentPage&action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Team&action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/fonts.css&action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Animations&action=raw&ctype=text/css" />
| |
| − | <style>
| |
| − | #footerWrapper {
| |
| − | margin-top: -2px;
| |
| − | position: relative;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <div class="introContainer">
| |
| − | <span id="introImage" style="background-image: unset"></span>
| |
| − | <div class="heading"><div>Who we</div><br> are.</div>
| |
| − | <div class="heading other"><div class="invisible">Who we</div><br> are.</div>
| |
| − |
| |
| − | <button id="introVideoPlay" class="introVideoPlay"></button>
| |
| − | <div class="memberDiv" id="memberDiv">
| |
| − | <div class="memberName" id="memberName"></div>
| |
| − | <div class="memberRole" id="memberRole"></div>
| |
| − | <div class="memberQuestion" id="memberQuestion"></div>
| |
| − | <div class="memberFunFact" id="memberFunFact"></div>
| |
| − | </div>
| |
| − | <div id="bubbleList" class="bubbleList"></div>
| |
| − | <div class="suggestClick"><span>Get to know the<br>team members</span></div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="milkWave" id="animWave">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#fafafc"/>
| |
| − | </svg>
| |
| − | </div>
| |
| − | <main class="elevate-navbar">
| |
| − | <div class="heading2">Meet our Instructors</div>
| |
| − | <div class="heading2 other">Instructors</div>
| |
| − | <div class="instructorList">
| |
| − | <div class="instructor">
| |
| − | <img src="https://static.igem.org/mediawiki/2020/f/f4/T--Vilnius-Lithuania--team-small-Denis.png">
| |
| − | <!-- <div class="filter"></div> -->
| |
| − | <div class="instructorName"><span>Denis Baronas</span></div>
| |
| − | <div class="instructorAbout">Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.</div>
| |
| − | </div>
| |
| − | <div class="instructor">
| |
| − | <img src="https://static.igem.org/mediawiki/2020/9/92/T--Vilnius-Lithuania--team-small-Povilas.png">
| |
| − | <!-- <div class="filter"></div> -->
| |
| − | <div class="instructorName"><span>Povilas Šėporaitis</span></div>
| |
| − | <div class="instructorAbout">Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
| |
| − | </div>
| |
| − | <a href="./Attributions" class="arrowMore">
| |
| − | <span>Attributions<br>of the team</span>
| |
| − | </a>
| |
| − | </div>
| |
| − | </main><script>
| |
| − | document.getElementById("fixedOverlay").classList.add("team");
| |
| − | </script>
| |
| − | <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.",
| |
| − | },
| |
| − | {
| |
| − | 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://i.imgur.com/PjF6iAt.mp4" type="video/mp4">
| |
| − | </video>`; // TODO: change video
| |
| − | // <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
| |
| − | }
| |
| − | 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>
| |
| − | var setWaveParams = () => {
| |
| − | let container = document.getElementById("animWave");
| |
| − | return {
| |
| − | width: container.offsetWidth,
| |
| − | height: container.offsetHeight,
| |
| − | waveWidth: container.offsetWidth,
| |
| − | waveHeight: window.innerHeight * 0.98,
| |
| − | waveDelta: 15,
| |
| − | speed: 0.15,
| |
| − | wavePoints: 5,
| |
| − | };
| |
| − | }
| |
| − | </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/ScrollFadeIn&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | scrollFadeIn([
| |
| − | document.querySelector(".heading2"),
| |
| − | document.querySelector(".heading2.other"),
| |
| − | Array.from(document.querySelector(".instructorList").children),
| |
| − | ]);
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| − | {{Vilnius-Lithuania/footer}}
| |
