|
|
| (16 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.innerText = 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}}
| |
