Difference between revisions of "Team:Vilnius-Lithuania/test/Team"

m
m
Line 25: Line 25:
  
 
         <button id="introVideoPlay" class="introVideoPlay"></button>
 
         <button id="introVideoPlay" class="introVideoPlay"></button>
−
         <div class="memberDiv">
+
         <div class="memberDiv" id="memberDiv">
−
             <div id="memberName"></div>
+
             <div class="memberName" id="memberName"></div>
−
             <div id="memberRole"></div>
+
             <div class="memberRole" id="memberRole"></div>
−
             <div id="memberFunFact"></div>
+
             <div class="memberFunFact" id="memberFunFact"></div>
 
         </div>
 
         </div>
 
         <div id="bubbleList" class="bubbleList"></div>
 
         <div id="bubbleList" class="bubbleList"></div>
Line 71: Line 71:
 
             </a>
 
             </a>
 
         </div>
 
         </div>
−
     </main>
+
     </main><script>
 +
document.getElementById("fixedOverlay").classList.add("team");
 +
</script>
 +
<script>
 +
let suggestClick = document.querySelector(".suggestClick");
 +
let introContainer = document.querySelector(".introContainer");
  
−
    <script>
+
function createADiv(className, innerHTML){
−
        document.getElementById("fixedOverlay").classList.add("team");
+
let newDiv = document.createElement("div");
−
    </script>
+
newDiv.className = className;
−
    <script>
+
newDiv.innerHTML = innerHTML;
−
        // let bubbleList = document.getElementById("bubbleList");
+
return newDiv;
−
        // let memberName = document.getElementById("memberName");
+
}
−
        // let memberRole = document.getElementById("memberRole");
+
−
        // let memberFunFact = document.getElementById("memberFunFact");
+
−
        let suggestClick = document.querySelector(".suggestClick");
+
  
−
        function showPersonInfo(personData){
+
function showPersonInfo(personData) {
−
            suggestClick.classList.add("hidden");
+
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.classList.add("novideo");
−
                introImage.style = "background-image: unset";
+
introVideoPlay.classList.add("novideo");
−
            }else{
+
−
                introImage.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + "');"
+
−
            }
+
−
        }
+
  
−
        function addPersonBubble(to, personData){
+
if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return;
−
            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));
+
// 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 + ".png');";
 +
introImage.appendChild(newImgDiv);
  
−
        document.body.onload = ()=>{
+
let newMemberDiv = document.createElement("div");
−
            introImage.innerHTML =
+
newMemberDiv.classList.add("memberDiv", "alternative");
−
            `<video muted autoplay loop>
+
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 + ".png');";
 +
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: "c/c3/T--Vilnius-Lithuania--team-small-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: "a/a5/T--Vilnius-Lithuania--team-small-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/92/T--Vilnius-Lithuania--team-small-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: "1/13/T--Vilnius-Lithuania--team-small-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: "c/c1/T--Vilnius-Lithuania--team-small-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: "e/e5/T--Vilnius-Lithuania--team-small-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: "a/a0/T--Vilnius-Lithuania--team-small-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: "2/23/T--Vilnius-Lithuania--team-small-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: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
 +
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: "a/a0/T--Vilnius-Lithuania--team-small-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: "e/e6/T--Vilnius-Lithuania--team-small-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: "f/f3/T--Vilnius-Lithuania--team-small-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 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.mp4" type="video/mp4">
 
                 <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
 
                 <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
 
             </video>`; // TODO: change video
 
             </video>`; // TODO: change video
−
        }
+
}
−
        introVideoPlay.onclick = ()=>{
+
introVideoPlay.onclick = () => {
−
            showPersonInfo(nullPerson);
+
showPersonInfo(nullPerson);
−
            introImage.classList.remove("novideo");
+
introImage.classList.remove("novideo");
−
            introVideoPlay.classList.remove("novideo");
+
introVideoPlay.classList.remove("novideo");
−
        }
+
}
−
       
+
 
−
        function repositionSuggestion() {
+
function repositionSuggestion() {
−
            let bb = bubbleList.firstElementChild.getBoundingClientRect().left;
+
let bb = bubbleList.firstElementChild.getBoundingClientRect().left;
−
            if (bb < 10) bb = 10;
+
if (bb < 10) bb = 10;
−
            suggestClick.style.marginLeft = (bb + 20) + "px";
+
suggestClick.style.marginLeft = (bb + 20) + "px";
−
        }
+
}
−
        window.addEventListener("resize", repositionSuggestion, {passive: 1});
+
window.addEventListener("resize", repositionSuggestion, { passive: 1 });
−
        repositionSuggestion();
+
repositionSuggestion();
−
    </script>
+
 
 +
</script>
 
     <script>
 
     <script>
 
         var setWaveParams = () => {
 
         var setWaveParams = () => {

Revision as of 13:25, 5 September 2020

Who we

are.

are.
Get to know the
team members
Meet our Instructors
Instructors
Denis Baronas
Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.
Povilas Šėporaitis
Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Rūta Matulevičiūtė
Sea bass. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Valentas Brasas
Pond turtle. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Attributions
of the team