|
|
| (13 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{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/fonts.css&action=raw&ctype=text/css" />
| |
| − | <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/Design&action=raw&ctype=text/css" />
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <main style="padding-top:128px" class="elevate-navbar">
| |
| − | <div class="scrollBlock small">
| |
| − | <div class="content small">
| |
| − | <div class="h2 larger">DETECTION</div>
| |
| − | <p class="content-paragraph">
| |
| − | Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock">
| |
| − | <div class="scrollItem">
| |
| − | <div></div>
| |
| − | </div>
| |
| − | <div class="content">
| |
| − | <div class="h3">Bioinformatic Analysis</div>
| |
| − | <p class="content-paragraph">
| |
| − | Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock">
| |
| − | <div class="scrollItem">
| |
| − | <div></div>
| |
| − | </div>
| |
| − | <div class="content">
| |
| − | <div class="h2 larger">HDA</div>
| |
| − | <div class="h3">And other fine products you can try</div>
| |
| − | <p class="content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc. Accumsan tortor posuere ac ut consequat semper. Enim lobortis scelerisque fermentum dui faucibus in ornare. Sed lectus vestibulum mattis ullamcorper. Quis varius quam quisque id diam vel.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock">
| |
| − | <div class="scrollItem">
| |
| − | <div></div>
| |
| − | </div>
| |
| − | <div class="content">
| |
| − | <div class="h3">Helimerase</div>
| |
| − | <p class="content-paragraph">
| |
| − | Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock smaller contentLarger">
| |
| − | <div id="animLfaScrollItem" class="scrollItem">
| |
| − | <div id="animationLfa"></div>
| |
| − | </div>
| |
| − | <div id="animLfaContent" class="content smaller contentLarger">
| |
| − | <div id="animLfaBigtitle" class="h2 larger"></div>
| |
| − | <div id="animLfaTitle" class="h3"></div>
| |
| − | <p id="animLfaText" class="content-paragraph">Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create. Social,</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="scrollAnim" id="animLfa-1"></div>
| |
| − | <div class="scrollAnim" id="animLfa-2"></div>
| |
| − | <div class="scrollAnim" id="animLfa-3"></div>
| |
| − | <div class="scrollAnim" id="animLfa-4"></div>
| |
| − | <div class="scrollAnim" id="animLfa-5"></div>
| |
| − | <div class="scrollAnim" id="animLfa-6"></div>
| |
| − | <div class="scrollAnim" id="animLfa-7"></div>
| |
| − | <div class="scrollAnim" id="animLfa-8"></div>
| |
| − | <div class="scrollAnim" id="animLfa-9"></div>
| |
| − | <div class="scrollAnim" id="animLfa-10"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock small">
| |
| − | <div class="content small">
| |
| − | <div class="h2 larger">TREATMENT</div>
| |
| − | <p class="content-paragraph">
| |
| − | Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="buttonHeading">Choose treatment system</div>
| |
| − | <div class="buttonContainer">
| |
| − | <div id="buttonLysin">Endolysin & exolysin system</div>
| |
| − | <div id="buttonToxin">Toxin & antitoxin system</div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main id="sectionLysin">
| |
| − | <div class="scrollBlock smaller contentLarger">
| |
| − | <div class="scrollItem">
| |
| − | <div id="animation2"></div>
| |
| − | </div>
| |
| − | <div class="content smaller contentLarger">
| |
| − | <div id="anim2bigtitle" class="h2 larger">Endolysin & exolysin system</div>
| |
| − | <div id="anim2title" class="h3"></div>
| |
| − | <p id="anim2text" class="content-paragraph">Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create. Social,</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | </main>
| |
| − | <main id="sectionToxin">
| |
| − | <div class="scrollBlock smaller contentLarger">
| |
| − | <div class="scrollItem">
| |
| − | <div id="animation2"></div>
| |
| − | </div>
| |
| − | <div class="content smaller contentLarger">
| |
| − | <div id="anim2bigtitle" class="h2 larger">Toxin & antitoxin system</div>
| |
| − | <div id="anim2title" class="h3"></div>
| |
| − | <p id="anim2text" class="content-paragraph">Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create. Social,</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | </main>
| |
| − | <main>
| |
| − | <div class="scrollBlock small">
| |
| − | <div class="content small">
| |
| − | <div class="h2 larger">PREVENTION</div>
| |
| − | <p class="content-paragraph">
| |
| − | Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <main id="sectionToxin">
| |
| − | <div class="scrollBlock smaller contentLarger">
| |
| − | <div class="scrollItem">
| |
| − | <div id="animation2"></div>
| |
| − | </div>
| |
| − | <div class="content smaller contentLarger">
| |
| − | <div id="anim2bigtitle" class="h2 larger">Subunit vaccines</div>
| |
| − | <div id="anim2title" class="h3">In alginate beads</div>
| |
| − | <p id="anim2text" class="content-paragraph">Since it's inception iGEM has worked to ensure that excellence in synthetic biology goes beyond what happens in the lab. Decisions in science and engineering shape, and are shaped by, the societies we create. Social,</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | <div class="scrollAnim"></div>
| |
| − | </main>
| |
| − | <script>
| |
| − | document.getElementById("fixedOverlay").classList.add("project");
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JSON/LFA&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | const animations = [
| |
| − | {
| |
| − | target: "#animationLfa",
| |
| − | animationData: animLfa,
| |
| − | bigTitle: animLfaBigtitle,
| |
| − | title: animLfaTitle,
| |
| − | text: animLfaText,
| |
| − | scrollItem: animLfaScrollItem,
| |
| − | content: animLfaContent,
| |
| − | sections: [
| |
| − | { element: "#animLfa-1", length: 0.003, bigTitle: "LFA Tests", title: "Costs", text: " Testų kainos (Testų kainą analizuoti galima, jei pasiskaičiuosi, kokia bus mūsų kaina testo. Kitu atveju tai nieko nepasakys. Ir čia ne prie design, o prie description tokia info) ir assured diagnostika (assured gali ir pabaigoje būti)." },
| |
| − | { element: "#animLfa-2", length: 0.152, title: "Sample pad", text: "The first step in lateral flow assay is sample addition to the sample pad which is made from glass fibre. This pad quickly absorbs the liquid added and the fluid flows to the subsequent membrane called conjugate pad. Mentioned sample pad can be pretreated with different kinds of buffers which help in processing the added fluid. For example ŠALTINIAI" },
| |
| − | { element: "#animLfa-3", length: 0.14, title: "DNA", text: "Our lateral flow assay test is based on nucleic acid hybridization ŠALTINIAI for this reason sample added to the test must contain ssDNA. This test would work with fragments amplified during symmetric amplification which generates dsDNA also, but additional step of denaturation would be needed. For the ease of use we decided to perform asymmetric helicase dependent amplification after which a fraction of amplified sequences are double stranded but the majority of the DNA is single stranded and is immediately suitable for this test without the need of denaturation." },
| |
| − | { element: "#animLfa-4", length: 0.03, title: "Conjugate pad", text: "Then the sample flows to a conjugate pad which has gold nanoparticles with conjugated detection probes. For nucleic acid hybridization based LFA 13 nm gold nanoparticles (AuNP) are most suitable SALTINIS. For these reasons we synthesised mentioned size gold nanoparticles using sodium citrate reduction method." },
| |
| − | { element: "#animLfa-5", length: 0.07, title: "Detection probe", text: "Detekcijos zondo funkcija, dalelių funkcionalizavimo procesas, kaip tai vyksta, tiolio grupės modifikacija." },
| |
| − | { element: "#animLfa-6", length: 0.09, title: "Gold nanoparticles", text: "Aukso nanodalelių sintezė, kaip tai vyksta, esminiai paaiškinimai viso proceso, (aukso redukcija naudojant citratą), galbūt paminėti tanino rūgštį." },
| |
| − | { element: "#animLfa-7", length: 0.10, title: "Hybridization", text: "Paaiškinimas, jog vyksta pirminė hibridizacija, jei mėginyje buvo taikinio molekulė, nauji kompleksai juda toliau." },
| |
| − | { element: "#animLfa-8", length: 0.11, title: "Test line", text: "Antrinė hibridizacijos reakcija, paaiškinimas, kodėl yra streptavidinas ir biotinas." },
| |
| − | { element: "#animLfa-9", length: 0.15, title: "Control line", text: "Trečia/kontrolinė hibridizacijos reakcija, kodėl ji reikalinga ir kodėl turi kiekvieno testo metu atsirasti." },
| |
| − | { element: "#animLfa-10", length: 0.12, title: "Absorbent pad", text: "Absorbent pad funkcija, užtikrina kad netekėtų atgal ir surenka perteklių." },
| |
| − | ],
| |
| − | }
| |
| − | ];
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/gsap.min.js&action=raw&ctype=text/javascript"></script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/ScrollTrigger.min.js&action=raw&ctype=text/javascript"></script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/lottie.js&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | let currentSection = -1;
| |
| − | let timeout1, timeout2;
| |
| − | function switchAnimText(newSection, curAnim) {
| |
| − | if (currentSection === newSection) return;
| |
| − | let down = (newSection > currentSection);
| |
| − | currentSection = newSection;
| |
| − | const { bigTitle, title, text } = curAnim.sections[currentSection];
| |
| − | clearTimeout(timeout1);
| |
| − | clearTimeout(timeout2);
| |
| − |
| |
| − | curAnim.content.classList.add(down ? "fadeOutDown" : "fadeOutUp");
| |
| − | timeout1 = setTimeout(()=>{
| |
| − | curAnim.bigTitle.innerText = (bigTitle !== undefined) ? bigTitle : "";
| |
| − | curAnim.title.innerText = title;
| |
| − | curAnim.text.innerText = text;
| |
| − | if (currentSection === 0){
| |
| − | curAnim.content.classList.add("contentLarger");
| |
| − | curAnim.scrollItem.classList.add("contentLarger");
| |
| − | }else{
| |
| − | curAnim.content.classList.remove("contentLarger");
| |
| − | curAnim.scrollItem.classList.remove("contentLarger");
| |
| − | }
| |
| − | curAnim.content.classList.remove("fadeOutDown");
| |
| − | curAnim.content.classList.remove("fadeOutUp");
| |
| − | curAnim.content.classList.add(down ? "fadedInvisibleDown" : "fadedInvisibleUp");
| |
| − | }, 200);
| |
| − | timeout2 = setTimeout(()=>{
| |
| − | curAnim.content.classList.remove("fadedInvisibleDown");
| |
| − | curAnim.content.classList.remove("fadedInvisibleUp");
| |
| − | }, 220);
| |
| − | }
| |
| − |
| |
| − | for (let animItem of animations){
| |
| − |
| |
| − | const ScrollLottie = (obj) => {
| |
| − | let anim = lottie.loadAnimation({
| |
| − | container: document.querySelector(obj.target),
| |
| − | renderer: "svg",
| |
| − | loop: false,
| |
| − | autoplay: false,
| |
| − | animationData: obj.animationData,
| |
| − | assetsPath: obj.assetsPath
| |
| − | });
| |
| − |
| |
| − | let debug = false;
| |
| − | let start = "top center";
| |
| − | let end = "bottom center";
| |
| − | let compoundLength = 0;
| |
| − | for (let i = 0, n = animItem.sections.length; i < n; i++){
| |
| − | let item = animItem.sections[i];
| |
| − | let _compoundLength = compoundLength;
| |
| − | ScrollTrigger.create({
| |
| − | trigger: item.element,
| |
| − | scrub: true,
| |
| − | pin: false,
| |
| − | markers: debug,
| |
| − | start: start,
| |
| − | end: end,
| |
| − | onUpdate: self => {
| |
| − | let animationProgress = (_compoundLength + self.progress * item.length);
| |
| − | switchAnimText(i, animItem);
| |
| − | if (debug) console.log(animationProgress);
| |
| − | anim.goToAndStop(animationProgress * (anim.totalFrames - 1), true)
| |
| − | }
| |
| − | });
| |
| − | compoundLength += item.length;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | ScrollLottie({
| |
| − | target: animItem.target,
| |
| − | animationData: animItem.animationData,
| |
| − | assetsPath: "https://static.igem.org/mediawiki/2020/"
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/SmoothScroll&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | var _ascroll = new SmoothScroll();
| |
| − | buttonLysin.onclick = () => {
| |
| − | _ascroll.animateScroll(document.querySelector("#sectionLysin"), 1, {
| |
| − | speed: 400,
| |
| − | speedAsDuration: true,
| |
| − | offset: 160
| |
| − | });
| |
| − | }
| |
| − | buttonToxin.onclick = () => {
| |
| − | _ascroll.animateScroll(document.querySelector("#sectionToxin"), 1, {
| |
| − | speed: 400,
| |
| − | speedAsDuration: true,
| |
| − | offset: 160
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| − | {{Vilnius-Lithuania/footer}}
| |
