-
Shraddha Raghuram authoredShraddha Raghuram authored
home.html 14.94 KiB
{% extends "layout.html" %}
{% block title %}Home{% endblock %}
{% block lead %}<b>Welcome to iGEM 2024!</b> Your team has been approved and you are ready to start the iGEM season!{% endblock %}
{% block page_content %}
<!-- <div class="row">
<div class="col">
<h2>Before you start</h2>
<hr>
<p>Please read the following pages:</p>
<ul>
<li><a href="https://competition.igem.org/deliverables/team-wiki" target="_blank">Wiki Requirements page</a></li>
<li><a href="https://competition.igem.org/judging/pages-for-awards" target="_blank">Standard URL Pages for Awards</a></li>
</ul>
</div>
</div>
<div class="row mt-4">
<div class="col">
<h2>Styling your wiki</h2>
<hr>
<p>Feel free to customize the page styling according to your preferences, or you can simply leave the style as it is. It's wise to focus on a clear content first, and on a clean design later.</p>
<p>Be cautious with the size of the assets like images, videos, and more, that you put in your wiki. Large file sizes can hinder the presentation of wikis due to slow internet connections. Remember to compress large files before uploading them to iGEM servers.</p>
<p>This default wiki meets the requirements, enhances navigability, and provides a user-friendly experience for visitors. You should not feel obligated to go beyond the provided styling.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-8">
<h2>Tips</h2>
<hr>
<p>This wiki will be your team's first interaction with the rest of the world, so here are a few tips to help you get started:</p>
<ul>
<li>State your accomplishments! Tell people what you have achieved from the start.</li>
<li>Be clear about what you are doing and how you plan to do this.</li>
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.</li>
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.</li>
<li>Start documenting your project as early as possible; don't leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://competition.igem.org/calendar" target="_blank">iGEM Competition calendar</a></li>
<li>Have lots of fun!</li>
</ul>
</div>
<div class="col-lg-4">
<h2>Inspiration</h2>
<hr>
<p>You can also view other team wikis for inspiration! Here are some examples:</p>
<ul>
<li><a href="https://2022.igem.wiki/dtu-denmark">2022 DTU-Denmark</a></li>
<li><a href="https://2022.igem.wiki/virginia">2022 Virginia</a></li>
<li><a href="https://2022.igem.wiki/crete">2022 Crete</a></li>
<li><a href="https://2022.igem.wiki/estonia-tuit">2022 Estonia_TUIT</a></li>
<li><a href="https://2022.igem.wiki/ashesighana">2022 AshesiGhana</a></li>
<li><a href="https://2021.igem.org/Team:SDU-Denmark">2021 SDU-Denmark</a></li>
<li><a href="https://2020.igem.org/Team:XMU-China">2020 XMU China </a></li>
<li><a href="https://2020.igem.org/Team:TAS_Taipei">2020 TAS Taipei </a></li>
</ul>
</div>
</div> -->
<div class="homepage-holder">
<!-- <div class="homepage-bg-img1"></div> -->
<!-- <div class="shelter-for-bg1" id="shelter-for-bg1"></div> -->
<div class="homepage-maintitle homepage-elements"> <div class="homepage-maintitle-name">
NitroBLAST
</div>
<div class="homepage-maintitle-subtitle" style="margin-top:40px;text-align:center;">
Laying the foundation for nitrogen fixation
</div>
</div>
<div class="homepage-content-img1 homepage-elements reveal" id="homepage-content-img1"></div>
<div class="homepage-content-img2 homepage-elements reveal" id="homepage-content-img2"></div>
<div class="shelter-for-canvas-start"></div>
<div class="homepage-content1 homepage-elements reveal" id="homepage-content1">
<div class="homepage-subtitle-style reveal" style="width:319px; transform: translateX(0%)">
Nitrogen
</div>
<div class="homepage-contents-style reveal" style="width: 1000px; margin-top: 50px; opacity: 1; margin-left: auto; margin-right: auto; transform: translateX(-20%);">
Nitrogen gas, comprising 78% of Earth's atmosphere, is the most abundant chemical in the air.
</div>
<div class="homepage-contents-style reveal" style="width: 1000px; margin-top: 50px; opacity: 1; transform: translateX(20%); font-size: 30px">
Nitrogen is an essential nutrient for plants.
</div>
<div class="homepage-contents-style reveal" style="width: 1000px; margin-top: 350px; opacity: 1; margin-left: auto; margin-right: auto; transform: translateX(-20%); font-size: 30px">
However, N₂ is highly inert, making it difficult for plants to convert it into useful compounds that they can consume.
</div>
</div>
<div class="homepage-content2 homepage-elements reveal" id="homepage-content2" style="height:300px;">
<div class="homepage-subtitle-style" style="width:1500px; margin-top: 200px">
The Haber-Bosch process
</div>
<div class="homepage-contents-style reveal" style="width:1000px; font-size: 30px">
In nature, the amount of nitrogenous compounds for plant consumption is limited, requiring fertiliser.
</div>
<div class="homepage-contents-style reveal" style="width:1000px; margin-top: 100px; font-size: 30px">
The Haber-Bosch process revolutionized agriculture by industrializing nitrogen fixation, greatly boosting agricultural productivity and feeding a large portion of the global population.
</div>
<div class="homepage-contents-style reveal" style="width: 1000px; margin-top: 600px; opacity: 1;">
However, each year 200 million tonnes of reactive nitrogen is lost to the environment.
</div>
</div>
<!-- <div class="homepage-bg-img2"></div> -->
<div class="homepage-content-img3 homepage-elements reveal" id="homepage-content-img3"></div>
<div class="homepage-content3 homepage-elements reveal">
The Nitrogen Crisis
</div>
<!-- <div class="homepage-bg-img3"></div> -->
<div class="homepage-content-img4 homepage-elements reveal" id="homepage-content-img4"></div>
<div class="homepage-content-img5 homepage-elements reveal" id="homepage-content-img5"></div>
<div class="homepage-content4 homepage-elements reveal" id="homepage-content4" style="opacity: 1;">
<div class="homepage-subtitle-style" style="margin-top: 100px; width: 1000px">
Over-fertilization
</div>
<div class="homepage-contents-style" style="margin-top:10px; width: 1000px">
Over 80% of ammonia emissions in the Netherlands are due to over-fertilization.
</div>
</div>
<div class="homepage-content5 homepage-elements reveal" id="homepage-content18" style="opacity: 1;">
<div class="homepage-subtitle-style" style="margin-top: 1000px;">
Eutrophication
</div>
<div class="homepage-contents-style" style="margin-top:10px;">
Excessive ammonia enrichment promotes uncontrolled algal blooms in water bodies causing eutrophication, which leads to loss of biodiversity.
</div>
</div>
<div class="homepage-content6 homepage-elements reveal">
What if plants could fix their own nitrogen?
</div>
<div class="homepage-bg-img4"></div>
<div class="homepage-content7 homepage-elements reveal">
<div class="homepage-contents-style" style="margin-top:0px;">
We wouldn't need fertilizers, which could reduce up to 2% of global CO2 emissions due to their production.
</div>
</div>
<div class="homepage-content-img6 homepage-elements reveal" id="homepage-content-img6"></div>
<div class="homepage-content8 homepage-elements reveal">
<div class="homepage-contents-style">
We could:
</div>
<div class="homepage-contents-style reveal" style="font-size: 50px;">
reduce nitrogen emissions.
</div>
<div class="homepage-contents-style reveal" style="font-size: 50px;">
prevent eutrophication.
</div>
<div class="homepage-contents-style reveal" style="font-size: 50px;">
and protect biodiversity while sustaining agricultural productivity.
</div>
</div>
<div class="homepage-content9 homepage-elements reveal">
iGEM TU Delft <br>
introduces
</div>
<div class="homepage-content-img7"></div>
<div class="homepage-content10 homepage-elements">
<div class="homepage-contents-style2" style="margin-top:0px;text-align:center;">
Laying the foundation for nitrogen fixation.
</div>
<!-- <canvas id="timeline" width="800" height="2000"></canvas>
<script>
function drawTimeline() {
const canvas = document.getElementById('timeline');
if (!canvas.getContext) return;
const ctx = canvas.getContext('2d');
// Clear the canvas before each redraw
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Get the current scroll position
const scrollY = window.scrollY || window.pageYOffset;
// Get the canvas position relative to the viewport
const canvasRect = canvas.getBoundingClientRect();
// Calculate the starting point of the canvas relative to the document
const canvasTop = scrollY + canvasRect.top;
// Determine the scroll progress relative to the canvas
const viewportHeight = window.innerHeight;
const scrollProgress = (scrollY + viewportHeight - canvasTop) / (canvas.height + viewportHeight);
// Clamp progress between 0 and 1
const progress = Math.max(0, Math.min(scrollProgress, 1));
// Drawing parameters
ctx.strokeStyle = '#185A4F';
ctx.lineWidth = 17;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
// Begin drawing
ctx.beginPath();
// Define your path here (customize as needed)
const startX = canvas.width / 2;
const startY = 0;
const endY = canvas.height;
// Calculate the current drawing point based on progress
const currentY = startY + (endY - startY) * progress;
// Move to the start point
ctx.moveTo(startX, startY);
// Draw line to the current point
ctx.lineTo(startX, currentY);
// Stroke the path
ctx.stroke();
}
// Initial draw
drawTimeline();
// Add scroll event listener
window.addEventListener('scroll', drawTimeline);
</script> -->
<div class="homepage-content-img8 homepage-elements reveal" id="homepage-content-img8"></div>
<div class="homepage-content11 homepage-elements reveal" id="homepage-content11">
<div class="homepage-contents-style">
More than a 100 million years ago, a marine alga <strong><i>Braarudosphaera bigelowii</i></strong> came into existence.
</div>
</div>
<!-- <div class="homepage-content-img9 homepage-elements reveal" id="homepage-content-img9"></div> -->
<!--<div class="homepage-content-img10 homepage-elements reveal" id="homepage-content-img10"></div>
<div class="homepage-content-img11 homepage-elements reveal" id="homepage-content-img11"></div>
<div class="homepage-content11 homepage-elements reveal" id="homepage-content11">
<div class="homepage-subtitle-style">
<strong><i>Braarudosphaera bigelowii</i></strong>
</div>
<div class="homepage-contents-style">
Earlier this year, a new organelle, the nitroplast was discovered in the marine alga <strong><i>Braarudosphaera bigelowii</i></strong>.
</div>
</div>
<div class="homepage-content12 homepage-elements reveal" id="homepage-content12">
<div class="homepage-subtitle-style">
UCYN-A
</div>
<div class="homepage-contents-style" style="margin-top:10px;">
This organelle was originally a bacterium named UCYN-A, and eventually became an organelle in <strong><i>B. bigelowii</i></strong> through endosymbiosis.
</div>
</div>
<div class="homepage-content13 homepage-elements reveal" id="homepage-content13">
<div class="homepage-subtitle-style">
Nitrogen fixation
</div>
<div class="homepage-contents-style" style="width:304px;">
What makes it the first of its kind, is its ability to fixate atmospheric nitrogen!
</div>
</div>
<div class="homepage-content14 homepage-elements reveal" id="homepage-content14">
<div class="homepage-subtitle-style">
Nitrogen-fixing eukaryotes
</div> <div class="homepage-contents-style">
We aim to transplant nitroplasts from <strong><i>B. bigelowii</i></strong> into other cells to create nitrogen-fixing eukaryotes.
</div>
</div> -->
<div class="homepage-content15 homepage-elements reveal" style="opacity: 1;">
<span>The roadmap to nitrogen-fixing eukaryotes</span>
</div>
<div class="homepage-link1 homepage-elements reveal" style="opacity: 1;">
<a href="software" onmouseover="expandFunc1(document.getElementById('homepage-link-img1'))" onmouseout="reduceFunc1(document.getElementById('homepage-link-img1'))">
<div class="homepage-link-img1" id="homepage-link-img1" style="background-size: 91%;"></div>
<span class="homepage-link-style" style="margin-left:30px;">Characterize the UCYN-A transport system in the dry lab</span>
</a>
</div>
<div class="homepage-link2 homepage-elements reveal" style="opacity: 1;">
<a onmouseover="expandFunc2(document.getElementById('homepage-link-img2'))" onmouseout="reduceFunc2(document.getElementById('homepage-link-img2'))">
<div class="homepage-link-img2" id="homepage-link-img2" style="background-size: 91%;"></div>
<span class="homepage-link-style" style="margin-left:30px;">Express essential proteins in the host</span>
</a>
</div>
<div class="homepage-link3 homepage-elements reveal" style="opacity: 1;">
<a onmouseover="expandFunc3(document.getElementById('homepage-link-img3'))" onmouseout="reduceFunc3(document.getElementById('homepage-link-img3'))">
<div class="homepage-link-img3" id="homepage-link-img3" style="background-size: 91%;"></div>
<span class="homepage-link-style" style="margin-left:30px;">Regulate cell division</span>
</a>
</div>
<div class="homepage-link4 homepage-elements reveal" style="opacity: 1;">
<a href="experiments" onmouseover="expandFunc4(document.getElementById('homepage-link-img4'))" onmouseout="reduceFunc4(document.getElementById('homepage-link-img4'))">
<div class="homepage-link-img4" id="homepage-link-img4" style="background-size: 91%;"></div>
<span class="homepage-link-style" style="margin-left:30px;">Insertion into eukaryotic cells</span>
</a>
</div>
<div class="homepage-link5 homepage-elements reveal" style="opacity: 1;">
<a href="human-practices" onmouseover="expandFunc5(document.getElementById('homepage-link-img5'))" onmouseout="reduceFunc5(document.getElementById('homepage-link-img5'))">
<div class="homepage-link-img5" id="homepage-link-img5" style="background-size: 91%;"></div>
<span class="homepage-link-style" style="margin-left:30px;">Investigate the global impact</span>
</a>
</div>
<canvas id="roadmap" width="1300" height="4500" style="background-color: transparent;"></canvas>
</div>
</div>
<script src="{{ url_for('static', filename = 'homepage.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename = 'homepage-animation.js') }}" type="text/javascript"></script>
{% endblock %}