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

Line 15: Line 15:
 
         <div id="intro-header">
 
         <div id="intro-header">
 
             <svg id="waves" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
             <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="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="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="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="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="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="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="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" />
+
<path id="wave7" d="" fill="#121212" waveHeight="150" waveDelta="-28" speed="0.28" wavePoints="7" />
 
</svg>
 
</svg>
 
         </div>
 
         </div>
Line 41: Line 41:
 
         <div class="black-bg big-section">
 
         <div class="black-bg big-section">
 
             <div id="firstpart" class="section centered">
 
             <div id="firstpart" class="section centered">
−
                 <div id="fish-icon" class="centered">
+
                 <div id="fish-doodle" class="centered animation">
 
                 </div>
 
                 </div>
 
                 <div class="centered wdt-60">
 
                 <div class="centered wdt-60">
Line 74: Line 74:
  
 
             </div>
 
             </div>
−
             <div id="thirdpart" class="section centered two-parts">
+
             <div id="fourthpart" class="section centered two-parts">
 
                 <div class="half">
 
                 <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>
 
                     <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>
 
                     <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>
 
                 <div class="half">
 
                 <div class="half">
−
                     <div class="icon dark"></div>
+
                     <div id="ras-healthy" class="animation">
 +
                    </div>
 
                 </div>
 
                 </div>
  
Line 97: Line 90:
 
                     <div class="list">
 
                     <div class="list">
 
                         <div class="list-item">
 
                         <div class="list-item">
−
                             <div><img src="https://static.igem.org/mediawiki/2020/7/74/T--Vilnius-Lithuania--mainPage-pros1.svg"></div>
+
                             <div><img src="assets/mainpage-anim/pros1.svg"></div>
 
                             <p>reduced water and land needs</p>
 
                             <p>reduced water and land needs</p>
 
                         </div>
 
                         </div>
 
                         <div class="list-item">
 
                         <div class="list-item">
−
                             <div><img src="https://static.igem.org/mediawiki/2020/a/a3/T--Vilnius-Lithuania--mainPage-pros2.svg"></div>
+
                             <div><img src="assets/mainpage-anim/pros2.svg"></div>
 
                             <p>fully controlled environment</p>
 
                             <p>fully controlled environment</p>
 
                         </div>
 
                         </div>
 
                         <div class="list-item">
 
                         <div class="list-item">
−
                             <div><img src="https://static.igem.org/mediawiki/2020/4/4c/T--Vilnius-Lithuania--mainPage-pros3.svg"></div>
+
                             <div><img src="assets/mainpage-anim/pros3.svg"></div>
 
                             <p>automated feeding strategy</p>
 
                             <p>automated feeding strategy</p>
 
                         </div>
 
                         </div>
Line 128: Line 121:
 
                     <h1>However, the biggest challenge is</p>
 
                     <h1>However, the biggest challenge is</p>
 
                 </div>
 
                 </div>
−
                 <div class="icon dark"></div>
+
                 <div id="infection" class="animation"></div>
 
             </div>
 
             </div>
 
             <div id="seventhpart" class="section centered two-parts">
 
             <div id="seventhpart" class="section centered two-parts">
Line 135: Line 128:
 
                 </div>
 
                 </div>
 
                 <div class="half">
 
                 <div class="half">
−
                     <div class="icon dark"></div>
+
                     <div id="ras-sick" class="animation">
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 168: Line 162:
  
 
         </div>
 
         </div>
−
         <div class="black-bg big-section">
+
         <div id="threebacsec">
−
            <div class="milkWave rotate-wave">
+
            <div class="black-bg big-section">
−
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
                <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" />
 
<path class="animWavePath" d="" fill="#fafafc" />
 
</svg>
 
</svg>
−
            </div>
 
−
            <div class="section centered two-parts">
 
−
                <div class="centered">
 
−
                    <h1>What's the deal with the fish?</p>
 
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="section centered two-parts">
−
            <div id="fish-symptoms" class="section centered wdt-80 two-parts">
+
                    <div class="centered">
−
                <div class="half">
+
                        <h1>What's the deal with the fish?</p>
−
                    <p class="white">Typically, these diseases are denoted by heavy bacterial colonizations of gill epithelium and eroded fin tips.</p>
+
                     </div>
−
                    <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>
−
                 <div class="half">
+
                 <div id="fish-symptoms" class="section centered wdt-80 two-parts">
−
                     <div class="icon dark" id="fishIcon"></div>
+
                    <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 id="sick-fish" class="animation"></div>
 +
                    </div>
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="section centered">
−
            <div class="section centered">
+
                    <div class="centered">
−
                <div class="centered">
+
                        <h2 class="white">Are there any solutions to this problem?</h2>
−
                    <h2 class="white">Are there any solutions to this problem?</h2>
+
                    </div>
 
                 </div>
 
                 </div>
−
            </div>
+
                <div class="milkWave">
−
            <div class="milkWave">
+
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
−
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
 
<path class="animWavePath" d="" fill="#fafafc" />
 
<path class="animWavePath" d="" fill="#fafafc" />
 
</svg>
 
</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>
 
             </div>
−
             <div class="section centered wdt-60">
+
 
−
                 <div>
+
             <div class="white-bg big-section">
−
                     <p class="black center">We have found <b>three</b> major approaches to solving the Flavoproblem.</p>
+
                 <div class="section centered">
 +
                     <div class="centered">
 +
                        <h1 class="black center">Actually, yes!</h1>
 +
                    </div>
 
                 </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 class="animation" id="threeBac"></div>
 +
                    </div>
 +
                </div>
 +
 
             </div>
 
             </div>
−
 
+
            <div class="white-bg big-section smallWaves">
−
        </div>
+
                <div class="milkWave small">
−
        <div class="white-bg big-section smallWaves">
+
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
−
            <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" />
 
<path class="animWavePath" d="" fill="#DDE4FD" />
 
</svg>
 
</svg>
−
            </div>
+
                </div>
−
            <div class="milkWave small" style="top: 20px;">
+
                <div class="milkWave small" style="top: 20px;">
−
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
+
                    <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
 
<path class="animWavePath " d=" " fill="#B8C7FC " />
 
<path class="animWavePath " d=" " fill="#B8C7FC " />
 
</svg>
 
</svg>
−
            </div>
+
                </div>
−
            <div class="milkWave small" style="top: 40px;">
+
                <div class="milkWave small" style="top: 40px;">
−
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
+
                    <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
 
<path class="animWavePath " d=" " fill="#8BA2F7 " />
 
<path class="animWavePath " d=" " fill="#8BA2F7 " />
 
</svg>
 
</svg>
−
            </div>
+
                </div>
−
            <div class="milkWave small" style="top: 60px;">
+
                <div class="milkWave small" style="top: 60px;">
−
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
+
                    <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg ">
 
<path class="animWavePath " d=" " fill="#6281ef " />
 
<path class="animWavePath " d=" " fill="#6281ef " />
 
</svg>
 
</svg>
 +
                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 244: Line 242:
 
                 <div>
 
                 <div>
 
                     <p class="white ">One of our main goals is the development of a rapid detection test that 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>
 
                     <p class="white ">One of our main goals is the development of a rapid detection test that 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>
Line 281: Line 273:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
 
             <div class="section centered wd-50 ">
 
             <div class="section centered wd-50 ">
 
                 <div>
 
                 <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>
+
                     <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>
 
             <div class="section centered wd-50 ">
 
             <div class="section centered wd-50 ">
 
                 <div>
 
                 <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>
+
                     <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>
 
             </div>
Line 318: Line 311:
 
                 <div class="centered ">
 
                 <div class="centered ">
 
                     <h1 class="white title ">prevention</h1>
 
                     <h1 class="white title ">prevention</h1>
 +
                </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>
Line 351: Line 349:
 
             <div class="section centered ">
 
             <div class="section centered ">
 
                 <div class="centered ">
 
                 <div class="centered ">
−
                     <h1 class="white title ">let's dive in</h1>
+
                     <div id="dive" class="animation"></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
                        <div class="section centered nf ">
+
            <div class="section centered nf ">
 
                 <div class="row ">
 
                 <div class="row ">
 
                     <div class="link">
 
                     <div class="link">
−
                         <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/0/02/T--Vilnius-Lithuania--mainPage-designLink.svg"></object>
+
                         <object type="image/svg+xml" data="assets/mainpage-anim/design.svg"></object>
 
                         <h1>Design</h1>
 
                         <h1>Design</h1>
 
                     </div>
 
                     </div>
 
                     <div class="link">
 
                     <div class="link">
−
                         <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/e/ef/T--Vilnius-Lithuania--mainPage-resultsLink.svg"></object>
+
                         <object type="image/svg+xml" data="assets/mainpage-anim/results.svg"></object>
 
                         <h1>Results</h1>
 
                         <h1>Results</h1>
 
                     </div>
 
                     </div>
 
                     <div class="link">
 
                     <div class="link">
−
                         <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/f/f2/T--Vilnius-Lithuania--mainPage-softwareLink.svg"></object>
+
                         <object type="image/svg+xml" data="assets/mainpage-anim/software.svg"></object>
 
                         <h1>Software</h1>
 
                         <h1>Software</h1>
 
                     </div>
 
                     </div>
 +
 
                 </div>
 
                 </div>
 
                 <div class="row ">
 
                 <div class="row ">
−
                     <div class="link"><object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/4/45/T--Vilnius-Lithuania--mainPage-modelLink.svg"></object>
+
                     <div class="link"><object type="image/svg+xml" data="assets/mainpage-anim/modelling.svg"></object>
 
                         <h1>Model</h1>
 
                         <h1>Model</h1>
 
                     </div>
 
                     </div>
  
−
                     <div class="link"><object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/9/9b/T--Vilnius-Lithuania--mainPage-hp.svg"></object>
+
                     <div class="link"><object type="image/svg+xml" data="assets/mainpage-anim/hp.svg"></object>
 
                         <h1>Human<br>practices</h1>
 
                         <h1>Human<br>practices</h1>
 
                     </div>
 
                     </div>
Line 387: Line 386:
 
<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 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 type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/zhoovis.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/zhoovis.js&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=TTemplate:Vilnius-Lithuania/anim/RAShealthy&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/infection&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/zuve&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/threebac&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/dive&action=raw&ctype=text/javascript"></script>
 
<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/intro.js&action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>

Revision as of 13:52, 13 October 2020

Loading...

flavoflow

Throughout history fish have always played a crucial part in a nutritious diet across the world.

Over the past decades total production, trade and consumption of fish and aquaculture products significantly expanded.

Almost 156 million tonnes of fish ended up on our plates in 2018.

+0%

Rise in global aquaculture production from 1990 to 2018

+0%

Rise in total food fish consumption from 1990 to 2018

Growing fish consumption drives a need for a more intensive fish farming - a need which emerging aquaculture farms have stepped in to satisfy.

In order to obtain greater amounts of fish in a shorter period of time, aquafarms have implemented recirculating aquaculture systems (RAS).

Advantages of RAS

reduced water and land needs

fully controlled environment

automated feeding strategy

Disadvantages of RAS

high electricity consumption

water quality

However, the biggest challenge is

Since the water in RAS is circulated between tanks, if one bacteria-infected fish enters the system, not long after, the entire RAS system can become contaminated.

Diseases caused by Flavobacterium spp. constitute one of the biggest host and geographic ranges of the bacterial fish pathogens.

The most common of these bacteria are the two opportunistic species:

Flavobacterium
psychrophilum

causes bacterial coldwater disease

Flavobacterium
columnare

causes columnaris disease

What's the deal with the fish?

Typically, these diseases are denoted by heavy bacterial colonizations of gill epithelium and eroded fin tips.

However, after these physical changes are being seen, the respiratory and osmoregulatory functions are already damaged.

Thus, if the disease is not detected in a span of a few days, it can result in massive fish die-offs.

Are there any solutions to this problem?

Actually, yes!

We have found three major approaches to solving the Flavoproblem.

detection

One of our main goals is the development of a rapid detection test that 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.

treatment

Detection, however, is only a tool which will reduce aquafarm’s losses - it will not solve the underlying problem.

Due to this reason, we have developed a new fundamental method to treat these diseases based on toxin-antitoxin or exolysin-endolysin systems.

prevention

On the other hand, no matter how perfect the treatment strategy is, it solves only the consequences of the disease.

Keeping this in mind, we have also created an innovative prevention tool, which is based on the packaging of immunogenic proteins into alginate beads.

Design

Results

Software

Model

Human
practices