|
|
(29 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{Vilnius-Lithuania/TopBar}}
| |
− | {{Vilnius-Lithuania/fonts.css}}
| |
− | {{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" />
| |
− | <style>#fixedOverlay[bg=none],#fixedOverlay[bg=none] #bubbles{pointer-events: none;} #fixedOverlay[bg=dark],#bubbles{pointer-events: all;}</style>
| |
− | </head>
| |
− |
| |
− | <body>
| |
− | <div class="introContainer">
| |
− | <span id="introImage" style="background-image: url('https://static.igem.org/mediawiki/2020/f/ff/T--Vilnius-Lithuania--team-big-placeholder.png');"></span>
| |
− | <div class="heading">Who we<br> are.</div>
| |
− | <div class="heading other">Who we<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>
| |
− | <main>
| |
− | <div class="content">
| |
− | <h2>History of our team</h2>
| |
− | We all joined iGEM by accident. Oops!
| |
− | </div>
| |
− | </main>
| |
− |
| |
− | <script>
| |
− | // let memberName = document.getElementById("memberName");
| |
− | // let memberRole = document.getElementById("memberRole");
| |
− | // let memberFunFact = document.getElementById("memberFunFact");
| |
− | function showPersonInfo(personData){
| |
− | 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: "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: "", },
| |
− | { 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: "", },
| |
− | { 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: "", }, // TODO: change img
| |
− | { 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: "", },
| |
− | { name: "Denis Baronas", img: "f/f4/T--Vilnius-Lithuania--team-small-Denis", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Modelling", about: "", },
| |
− | { 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: "", },
| |
− | { name: "Liepa Šiupinskaitė", img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Designer", about: "", },
| |
− | { 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: "", },
| |
− | { name: "Vladislav Kolupayev", img: "f/f8/T--Vilnius-Lithuania--team-small-Vladislav", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "IT", about: "", },
| |
− | { name: "Ignė Kanopaitė", img: "1/1c/T--Vilnius-Lithuania--team-small-Ignė", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Wet Lab", about: "", },
| |
− | { 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: "", },
| |
− | { 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: "", },
| |
− | { name: "Monika Gineitytė", img: "f/f3/T--Vilnius-Lithuania--team-small-Monika", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Human Practices", about: "", },
| |
− | { 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: "", },
| |
− | { name: "Povilas Šėporaitis", img: "9/92/T--Vilnius-Lithuania--team-small-Povilas", bigImg: "f/ff/T--Vilnius-Lithuania--team-big-placeholder.png", role: "Modelling", about: "", },
| |
− | { 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: "", },
| |
− | ];
| |
− |
| |
− | let bubbleList = document.getElementById("bubbleList");
| |
− | team.forEach((item) => addPersonBubble(bubbleList, item));
| |
− |
| |
− | document.body.onload = ()=>{
| |
− | introImage.innerHTML =
| |
− | `<video muted autoplay loop>
| |
− | <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
| |
− | <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
| |
− | </video>`; // TODO: change video
| |
− | }
| |
− | introVideoPlay.onclick = ()=>{
| |
− | showPersonInfo(nullPerson);
| |
− | introImage.classList.remove("novideo");
| |
− | introVideoPlay.classList.remove("novideo");
| |
− | }
| |
− | </script>
| |
− |
| |
− | </body>
| |
− |
| |
− | </html>
| |