|
|
| (19 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Vilnius-Lithuania/Loader}}
| |
| − | {{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/index.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/Animations&action=raw&ctype=text/css" />
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <section class="container" id="intro-page">
| |
| − | <div id="intro-header">
| |
| − | <svg id="waves" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path id="wave0" d="" fill="#fafafc" waveHeight="360" waveDelta="30" speed="0.2" wavePoints="8" />
| |
| − | <path id="wave1" d="" fill="#679BF4" waveHeight="330" waveDelta="36" speed="0.11" wavePoints="6" />
| |
| − | <path id="wave2" d="" fill="#4080ED" waveHeight="300" waveDelta="40" speed="0.18" wavePoints="8" />
| |
| − | <path id="wave3" d="" fill="#2454CD" waveHeight="270" waveDelta="35" speed="0.13" wavePoints="5" />
| |
| − | <path id="wave4" d="" fill="#11348F" waveHeight="240" waveDelta="40" speed="0.13" wavePoints="6" />
| |
| − | <path id="wave5" d="" fill="#142E71" waveHeight="210" waveDelta="41" speed="0.15" wavePoints="5" />
| |
| − | <path id="wave6" d="" fill="#0F162C" waveHeight="180" waveDelta="35" speed="0.18" wavePoints="10" />
| |
| − | <path id="wave7" d="" fill="#121212" waveHeight="150" waveDelta="28" speed="0.28" wavePoints="7" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div id="intro">
| |
| − | <div id="text-wrapper">
| |
| − | <div id="title" class="elevate-navbar">
| |
| − | <h1>flavo<em>flow</em></h1>
| |
| − | </div>
| |
| − | <div id="desc-wrapper">
| |
| − | <div id="center-desc" style="width: -webkit-fit-content;">
| |
| − | <span id="description"></span>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | <main id="storytelling">
| |
| − | <div class="black-bg big-section">
| |
| − | <div id="firstpart" class="section centered">
| |
| − | <div id="fish-icon" class="centered icon white">
| |
| − | <p class="black center">Throughout history <b>fish</b> have always been one of the most <b>important food sources.</b></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="secondpart" class="section centered">
| |
| − | <div class="centered wdt-60">
| |
| − | <p class="white center">The consumption of aquaculture products has been steadily increasing during the past <b>50 years</b> and has now <b>doubled</b> since.</p>
| |
| − | </div>
| |
| − | <div class="icon dark"></div>
| |
| − | </div>
| |
| − | <div id="thirdpart" class="section centered two-parts">
| |
| − | <div class="half">
| |
| − | <p class="white">Growing fish consumption drives a need for a more <b>intensive fish farming</b> - a need which emerging aquaculture farms have stepped in to satisfy.</p>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <div class="icon dark"></div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div id="fourthpart" class="section centered two-parts">
| |
| − | <div class="half">
| |
| − | <p class="white">In order to obtain greater amounts of fish in a shorter period of time, aquafarms have implemented <b>recirculating aquaculture systems</b> (RAS).</p>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <div class="icon dark"></div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div id="fifthpart" class="section two-parts">
| |
| − | <div class="half">
| |
| − | <h2 class="white">Advantages of RAS</h2>
| |
| − | <div class="list">
| |
| − | <div class="list-item">
| |
| − | <div></div>
| |
| − | <p>reduced water and land needs</p>
| |
| − | </div>
| |
| − | <div class="list-item">
| |
| − | <div></div>
| |
| − | <p>fully controlled environment</p>
| |
| − | </div>
| |
| − | <div class="list-item">
| |
| − | <div></div>
| |
| − | <p>automated feeding strategy</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <h2 class="white">Disadvantages of RAS</h2>
| |
| − | <div class="list">
| |
| − | <div class="list-item">
| |
| − | <div></div>
| |
| − | <p>high electricity consumption</p>
| |
| − | </div>
| |
| − | <div class="list-item">
| |
| − | <div></div>
| |
| − | <p>water quality</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="sixthpart" class="section centered">
| |
| − | <div class="centered">
| |
| − | <h1>However, the biggest challenge is</p>
| |
| − | </div>
| |
| − | <div class="icon dark"></div>
| |
| − | </div>
| |
| − | <div id="seventhpart" class="section centered two-parts">
| |
| − | <div class="half">
| |
| − | <p class="white">Since the water in RAS is circulated between tanks, if <b>one bacteria-infected fish</b> enters the system, not long after, the entire RAS system can become <b>contaminated</b>.</p>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <div class="icon dark"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="milkWave">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#fafafc" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="white-bg big-section">
| |
| − | <div class="section centered wdt-60">
| |
| − | <div>
| |
| − | <p class="black center">Diseases caused by Flavobacterium spp. constitute one of the <b>biggest host</b> and geographic ranges of the <b>bacterial fish pathogens</b>.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="bact" class="section centered">
| |
| − | <div>
| |
| − | <p class="black center">The<b> most common</b> of these bacteria are the two opportunistic species:</p>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="half">
| |
| − | <p class="black center">Flavobacterium<br>psychrophilum</p>
| |
| − | <p class="yellow center"><b>causes bacterial coldwater disease</b></p>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <p class="black center">Flavobacterium<br>columnare</p>
| |
| − | <p class="yellow center"><b>causes columnaris disease</b></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="black-bg big-section">
| |
| − | <div class="milkWave rotate-wave">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#fafafc" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="section centered two-parts">
| |
| − | <div class="centered">
| |
| − | <h1>What's the deal with the fish?</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="fish-symptoms" class="section centered wdt-80 two-parts">
| |
| − | <div class="half">
| |
| − | <p class="white">Typically, these diseases are denoted by heavy bacterial colonizations of gill epithelium and eroded fin tips.</p>
| |
| − | <p class="white">However, after these physical changes are being seen, the respiratory and osmoregulatory functions are already damaged.</p>
| |
| − | <p class="white">Thus, if the disease is not detected in a span of a few days, it can result in massive fish die-offs.</p>
| |
| − | </div>
| |
| − | <div class="half">
| |
| − | <div class="icon dark" id="fishIcon"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered">
| |
| − | <div class="centered">
| |
| − | <h2 class="white">Are there any solutions to this problem?</h2>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="milkWave">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#fafafc" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="white-bg big-section">
| |
| − | <div class="section centered">
| |
| − | <div class="centered">
| |
| − | <h1 class="black center">Actually, yes!</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered wdt-60">
| |
| − | <div>
| |
| − | <p class="black center">We have found <b>three</b> major approaches to solving the Flavoproblem.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="white-bg big-section smallWaves">
| |
| − | <div class="milkWave small">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#DDE4FD" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 20px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#B8C7FC " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 40px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#8BA2F7 " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 60px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#6281ef " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lightblue-bg big-section">
| |
| − | <div class="section centered ">
| |
| − | <div class="centered ">
| |
| − | <h1 class="white title ">detection</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered wd-50 ">
| |
| − | <div>
| |
| − | <p class="white ">One of our main goals is the development of a rapid detection test is based on helicase-dependent amplification (HDA) and lateral-flow assay (LFA) methods. This kit will help farmers in identifying what the Flavo is in their tanks.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="section centered wd-50 ">
| |
| − | <div>
| |
| − | <p class="white ">Detection, however, is only a tool which will reduce aquafarm’s losses - it will not solve the underlying problem.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lightblue-bg big-section smallWaves">
| |
| − | <div class="milkWave small">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#4E71EB" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 20px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#3C62E3 " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 40px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#365AD8 " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 60px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#3356CE " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="brightblue-bg big-section ">
| |
| − | <div class="section centered ">
| |
| − | <div class="centered ">
| |
| − | <h1 class="white title ">treatment</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered wd-50 ">
| |
| − | <div>
| |
| − | <p class="white ">Due to this reason, we have developed a new fundamental method to treat these diseases based on toxin-antitoxin or exolysin-endolysin systems. </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered wd-50 ">
| |
| − | <div>
| |
| − | <p class="white ">On the other hand, no matter how perfect the treatment strategy is, it solves only the consequences of the disease.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="brightblue-bg big-section smallWaves">
| |
| − | <div class="milkWave small">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#2B4FC9" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 20px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#264AC6 " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 40px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#103BAD " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 60px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#11348F " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="darkblue-bg big-section ">
| |
| − | <div class="section centered ">
| |
| − | <div class="centered ">
| |
| − | <h1 class="white title ">prevention</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered wd-50 ">
| |
| − | <div>
| |
| − | <p class="white ">Keeping this in mind, we have also created an innovative prevention tool, which is based on the packaging of immunogenic proteins into alginate beads. </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="darkblue-bg big-section smallWaves">
| |
| − | <div class="milkWave small">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#142455" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 20px;">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path class="animWavePath" d="" fill="#131F43" />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 40px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#0F162C " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div class="milkWave small" style="top: 60px;">
| |
| − | <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
| |
| − | <path class="animWavePath " d=" " fill="#121212 " />
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="links" class="black-bg big-section">
| |
| − | <div class="section centered">
| |
| − | <div class="centered">
| |
| − | <h1 class="white title ">let's dive in</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="section centered nf ">
| |
| − | <div class="row">
| |
| − | <div class="icon dark "></div>
| |
| − | <div class="icon dark "></div>
| |
| − | <div class="icon dark "></div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="icon dark "></div>
| |
| − | <div class="icon dark "></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></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>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/ScrollFadeIn&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | scrollFadeIn(Array.from(document.querySelectorAll(".section")).map((item) => Array.from(item.children)));
| |
| − | </script>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| − | {{Vilnius-Lithuania/footer}}
| |
