|
|
(15 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">
| |
− | <div id="memberName"></div>
| |
− | <div id="memberRole"></div>
| |
− | <div 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 bubbleList = document.getElementById("bubbleList");
| |
− | // let memberName = document.getElementById("memberName");
| |
− | // let memberRole = document.getElementById("memberRole");
| |
− | // let memberFunFact = document.getElementById("memberFunFact");
| |
− | let suggestClick = document.querySelector(".suggestClick");
| |
− |
| |
− | function showPersonInfo(personData){
| |
− | suggestClick.classList.add("hidden");
| |
− | introImage.classList.add("novideo");
| |
− | introVideoPlay.classList.add("novideo");
| |
− | memberName.innerText = personData.name;
| |
− | memberRole.innerHTML = personData.role;
| |
− | memberFunFact.innerText = personData.about;
| |
− |
| |
− | if (personData.bigImg == undefined){
| |
− | introImage.style = "background-image: unset";
| |
− | }else{
| |
− | introImage.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + "');"
| |
− | }
| |
− | }
| |
− |
| |
− | 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: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Design", about: "Parrotfish. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.", },
| |
− | { name: "Auksė Kazlauskaitė", img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", 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: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "Ocean sunfish. Excepteur sint occaecat cupidatat non proident.", },
| |
− | { name: "Edvinas Jurgelaitis", img: "1/13/T--Vilnius-Lithuania--team-small-Edvinas", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "Crucian carp. Sunt in culpa qui officia deserunt mollit anim id est laborum.", },
| |
− | { name: "Eglė Vitkūnaitė", img: "c/c1/T--Vilnius-Lithuania--team-small-Eglė", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "False killer whale. At tempor commodo ullamcorper a lacus vestibulum.", },
| |
− | { name: "Emilija Radlinskaitė", img: "e/e5/T--Vilnius-Lithuania--team-small-Emilija", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "North Pacific giant octopus. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet.", },
| |
− | { name: "Emilis Gaidauskas", img: "a/a0/T--Vilnius-Lithuania--team-small-Emilis", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "Goldfish. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.", },
| |
− | { name: "Ieva Lingytė", img: "2/23/T--Vilnius-Lithuania--team-small-Ieva", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "Axolotl. Non nisi est sit amet facilisis magna etiam.", },
| |
− | { name: "Barbora Vasiliauskaitė", img: "f/f3/T--Vilnius-Lithuania--team-small-Monika", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Human Practices", about: "Sea otter. In egestas erat imperdiet sed euismod.", }, // TODO: change img
| |
− | { name: "Kamilė Liucija Vainiūtė", img: "a/a0/T--Vilnius-Lithuania--team-small-Kamilė", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "IT", about: "Black stingray. Cum sociis natoque penatibus et magnis dis parturient montes nascetur.", },
| |
− | { name: "Paulius Sasnauskas", img: "e/e6/T--Vilnius-Lithuania--team-small-Paulius", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "IT", about: "Emperor penguin. Vitae semper quis lectus nulla at volutpat diam ut venenatis.", },
| |
− | { name: "Monika Gineitytė", img: "f/f3/T--Vilnius-Lithuania--team-small-Monika", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Finance & Human Practices", about: "Blue tang. Sapien pellentesque habitant morbi tristique.", },
| |
− | ];
| |
− |
| |
− | team.forEach((item) => addPersonBubble(bubbleList, item));
| |
− |
| |
− | document.body.onload = ()=>{
| |
− | introImage.innerHTML =
| |
− | `<video muted autoplay loop>
| |
− | <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");
| |
− | }
| |
− |
| |
− | 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}}
| |