|
|
(12 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{Vilnius-Lithuania/TopBar}}
| |
− | {{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" />
| |
− | <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="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 id="animWavePath" d="" fill="#fafafc"/>
| |
− | </svg>
| |
− | </div>
| |
− | <main>
| |
− | <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/2019/0/09/T--Vilnius-Lithuania--Denis.jpg">
| |
− | <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/2019/e/e2/T--Vilnius-Lithuania--Povilas.jpg">
| |
− | <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>
| |
− | <div class="instructor">
| |
− | <img src="https://static.igem.org/mediawiki/2019/e/ef/T--Vilnius-Lithuania--Ruta.jpg">
| |
− | <div class="filter"></div>
| |
− | <div class="instructorName"><span>Rūta Matulevičiūtė</span></div>
| |
− | <div class="instructorAbout">Sea bass. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
| |
− | </div>
| |
− | <div class="instructor">
| |
− | <img src="https://static.igem.org/mediawiki/2019/0/01/T--Vilnius-Lithuania--Vale.jpg">
| |
− | <div class="filter"></div>
| |
− | <div class="instructorName"><span>Valentas Brasas</span></div>
| |
− | <div class="instructorAbout">Pond turtle. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</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");
| |
− |
| |
− | 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");
| |
− |
| |
− | 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);
| |
− | newMemberDiv.appendChild(newMemberName);
| |
− | let newMemberRole = createADiv("memberRole", personData.role);
| |
− | newMemberDiv.appendChild(newMemberRole);
| |
− | 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");
| |
− | memberName.innerText = personData.name;
| |
− | memberRole.innerHTML = personData.role;
| |
− | memberFunFact.innerText = personData.about;
| |
− | 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: "Liepa Šiupinskaitė",
| |
− | img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa",
| |
− | bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa",
| |
− | role: "Design",
| |
− | about: "Parrotfish. Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.",
| |
− | },
| |
− | {
| |
− | 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: "Fur seal. Dolore eu fugiat nulla pariatur.",
| |
− | },
| |
− | {
| |
− | 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: "Sea turtle. 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: "Crucian carp. Remarkably hardy and finds a way to breathe even when brought out of water.",
| |
− | },
| |
− | {
| |
− | 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: "False killer whale. 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: "North Pacific giant octopus. Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.",
| |
− | },
| |
− | {
| |
− | 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: "Siamese fighting fish. Shows off his colors and flare in sharply written texts and fashion.",
| |
− | },
| |
− | {
| |
− | name: "Ieva Lingytė",
| |
− | img: "2/23/T--Vilnius-Lithuania--team-small-Ieva",
| |
− | bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva",
| |
− | role: "Wet Lab",
| |
− | about: "Axolotl. Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.",
| |
− | },
| |
− | {
| |
− | name: "Barbora Vasiliauskaitė",
| |
− | img: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
| |
− | bigImg: "8/83/T--Vilnius-Lithuania--team-big-Barbora",
| |
− | role: "Human Practices",
| |
− | about: "Sea otter. She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.",
| |
− | }, // TODO: change img
| |
− | {
| |
− | 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: "Black stingray. 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.",
| |
− | },
| |
− | {
| |
− | name: "Paulius Sasnauskas",
| |
− | img: "e/e6/T--Vilnius-Lithuania--team-small-Paulius",
| |
− | bigImg: "d/d0/T--Vilnius-Lithuania--team-big-Paulius",
| |
− | role: "IT",
| |
− | about: "Emperor penguin. Remains chill even in challenging conditions. Likes to slide on thin ice.",
| |
− | },
| |
− | {
| |
− | name: "Monika Gineitytė",
| |
− | img: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
| |
− | bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika",
| |
− | role: "Finance & Human Practices",
| |
− | about: "Blue tang. May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.",
| |
− | },
| |
− | ]; // TODO: change actual bigImg real photos
| |
− |
| |
− | team.forEach((item) => addPersonBubble(bubbleList, item));
| |
− |
| |
− | document.body.onload = () => {
| |
− | introImage.innerHTML =
| |
− | `<video muted autoplay playsinline loop preload>
| |
− | <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
| |
− | <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
| |
− | </video>`; // TODO: change video
| |
− | }
| |
− | introVideoPlay.onclick = () => {
| |
− | showPersonInfo(nullPerson);
| |
− | introImage.classList.remove("novideo");
| |
− | introVideoPlay.classList.remove("novideo");
| |
− | introImage.firstElementChild.play();
| |
− | }
| |
− |
| |
− | function repositionSuggestion() {
| |
− | let bb = bubbleList.firstElementChild.getBoundingClientRect().left;
| |
− | if (bb < 10) bb = 10;
| |
− | suggestClick.style.marginLeft = (bb + 20) + "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,
| |
− | 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>
| |
− |
| |
− | </body>
| |
− |
| |
− | </html>
| |
− |
| |
− | {{Vilnius-Lithuania/footer}}
| |