Skip to content
Snippets Groups Projects
Commit 4babcfc8 authored by Patrick Lee's avatar Patrick Lee
Browse files

Merge branch 'index' into 'main'

Index page draft

See merge request !26
parents 50db5670 9773b499
No related branches found
No related tags found
1 merge request!26Index page draft
Pipeline #122655 passed
......@@ -94,6 +94,13 @@ footer a:hover { color: white; text-decoration: underline; }
text-align: left !important;
}
#index-background {
background-image: url('https://static.igem.wiki/teams/4296/wiki/images/wiki-home-page-background.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center 600px;
}
/* PROGRESS INDICATOR */
/* The progress container (background) */
.progress-container {
......@@ -132,9 +139,24 @@ footer a:hover { color: white; text-decoration: underline; }
background-color: var(--header-footer);
}
.indexBannerVideo{
margin-top: 15px;
/* INDEX BANNER VIDEO */
.indexBannerVideo {
position: relative;
display: block;
width: 100%; /* width of iframe wrapper */
height: 0;
margin: auto;
padding: 0% 0% 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.indexBannerVideo iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ROTATING LOGO */
......@@ -156,6 +178,12 @@ footer a:hover { color: white; text-decoration: underline; }
height: 45px;
}
#index-tagline {
text-align: center;
color:white;
padding: 20px;
}
/* PARALLAX EFFECT */
#hero {
......@@ -198,6 +226,19 @@ footer a:hover { color: white; text-decoration: underline; }
background-image: url('https://static.igem.wiki/teams/4296/wiki/images/layer4.png');
}
#index-content {
display: flex;
flex-direction: column;
background-color: var(--header-footer);
margin-bottom: 50px;
padding: 20px;
color: #FFFFFF;
position: sticky;
top: 80px;
align-self: flex-start;
font-size: 20px !important;
}
/* PRELOADER */
.loaderImage {
width: 150px;
......
......@@ -76,54 +76,29 @@
text-align: center;
}
.statistic::after {
font: 800 40px system-ui;
content: counter(count);
animation: counter 1s linear;
/* counter-reset: count 0; */
}
/* STATISTICS ANIMATIONS */
@keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 1;
}
20% {
counter-increment: count 2;
}
30% {
counter-increment: count 3;
}
40% {
counter-increment: count 4;
}
50% {
counter-increment: count 5;
}
60% {
counter-increment: count 6;
}
70% {
counter-increment: count 7;
.flex-container {
display: flex;
}
80% {
counter-increment: count 8;
#value1 {
font-size: 100px;
}
90% {
counter-increment: count 9;
#value2 {
font-size: 100px;
}
100% {
counter-increment: count 10;
#percentage {
font-size: 100px;
}
}
</style>
</head>
<body>
<body id="index-background">
<!-- Navigation -->
{% include 'menu.html' %}
......@@ -131,110 +106,153 @@
<!-- Go to top button -->
<button onclick="returnToTop()" id="goToTopBtn"><svg style="color: #ffffff; font-size: 3rem; display: block; text-align: right;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-circle-up" class="svg-inline--fa fa-arrow-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"></path></svg></button>
<video class="indexBannerVideo" autoplay loop muted >
<source src="https://video.igem.org/videos/embed/2d3c057d-3e33-44a1-b4f7-b8a523e3e701" type="video/mp4">
</video>
<div class="indexBannerVideo">
<iframe title="UBC_Vancouver: Synaestivum Intro (2022) [English]" src="https://video.igem.org/videos/embed/2d3c057d-3e33-44a1-b4f7-b8a523e3e701?loop=1&amp;autoplay=1&amp;muted=1&amp;title=0&amp;warningTitle=0&amp;controlBar=0&amp;peertubeLink=0&amp;p2p=0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
</div>
<div class="container">
<br><br>
<div id="hero">
<div class="layer layer-bg" data-type="parallax" data-depth="1.00">
<div class="hero-text">
<h1>Increasing wheat’s tolerance to rising global temperatures</h1>
<div>
<h1 id="index-tagline">Increasing wheat's tolerance to rising global temperatures</h1>
</div>
<br><br>
<div class="row">
<div class="col-6" id="index-content">
<p>
Wheat production in Canada was down approximately
<div class="flex-container">
<div class="flex-child" id="value1">0</div>
<div class="flex-child" id="percentage">%</div>
</div>
in 2021 compared to 2020, the lowest wheat crop yield since 2007.
</p>
</div>
<div class="col-6"></div>
</div>
<div class="layer layer-1" data-type="parallax" data-depth="0.9"></div>
<div class="layer layer-2" data-type="parallax" data-depth="0.88"></div>
<div class="layer layer-3" data-type="parallax" data-depth="0.7"></div>
<div class="layer layer-4" data-type="parallax" data-depth="0.6"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6" id="index-content">
<p>
This was likely due to drought and increased temperatures. <span id="highlight">The average annual temperature in Canada has increased almost</span>
<div class="flex-container">
<div class="flex-child" id="value2">0</div>
<div class="flex-child" id="percentage">&#176;C</div>
</div>
<span id="highlight">from 1948 to 2016.</span>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6" id="index-content">
<p>
Decreases in crop yield have the potential to lead to <span id="highlight">increased food prices</span> which would <span id="highlight">exacerbate pre-existing food insecurities</span>.
</p>
</div>
<div class="col-6"></div>
</div>
<section id="problem">
<div class="content">
<h1 class="title"><b>The Problem</b></h1>
<div class="statistic"></div>
<div class="row">
<div class="col-6"></div>
<div class="col-6" id="index-content">
<p>Food security is a key determinant of people’s health.</p>
</div>
</section>
</div>
<br><br>
<div class="row">
<div class="col-6" id="index-content">
<p>Our project aims to increase wheat plants’ tolerance to heat stress by introducing three enzymes to wheat plants that will:</p>
<ol>
<li><span id="highlight">Increase the rate of photosynthesis</span> in plants, producing more carbohydrates (<span id="highlight">SBPase</span>),</li>
<li><span id="highlight">Decrease the plant stress hormone ethylene</span> that reduces plant growth at increased temperatures (<span id="highlight">ACC deaminase</span>), and </li>
<li><span id="highlight">Maintain high ionic strength</span> and <span id="highlight">maintain protein folding</span> at increased temperatures (<span id="highlight">choline monooxygenase</span>).</li>
<li>All three enzymes are activated by a heat-inducible promoter and will <span id="highlight">only be expressed at increased temperatures</span>. </li>
</ol>
</div>
<section id="solution">
<div class="content">
<h1 class="title"><b>Our Solution</b></h1>
<p>Our project aims to increase wheat plants’ tolerance to heat stress by introducing three enzymes to wheat plants that will: </p>
<ol>
<li>Increase the rate of photosynthesis in plants, producing more carbohydrates (<b>SBPase</b>),</li>
<li>Decrease the plant stress hormone ethylene that reduces plant growth at increased temperatures (<b>ACC deaminase</b>), and </li>
<li>Maintain high ionic strength and maintain protein folding at increased temperatures (<b>Choline monooxygenase</b>).</li>
</ol>
<p>All three enzymes are activated by a heat inducible promoter and will only be expressed at increased temperatures. For more information, check out our <a href="https://2022.igem.wiki/ubc-vancouver/design">Project Design page</a>.</p>
<div class="col-6"></div>
</div>
</section>
<br><br>
<div class="row">
<div class="col-6"></div>
<section id="experiments">
<div class="content">
<h1 class="title"><b>Our Experiments</b></h1>
<p>We built and tested 2 of our 3 enzyme constructs in wheat protoplasts as a proof of concept. Protoplasts are plant cells with their cell walls removed, which are easier to transform with foreign DNA. Discover more about our construct design, protoplast isolation, and heat shock experiments in our <a href="https://2022.igem.wiki/ubc-vancouver/experiments">Wet Lab pages</a>.</p>
</section>
<div class="col-6" id="index-content">
<p>We built and tested 2 of our 3 enzyme constructs in <span id="highlight">wheat protoplasts</span> as a <span id="highlight">proof of concept</span>. Protoplasts are plant cells with their cell walls removed, and are thus easier to transform with foreign DNA. </p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-6" id="index-content">
Our end goal is to engineer a <span id="highlight">strain of wheat</span> with increased heat tolerance for <span id="highlight">use by farmers</span> in agricultural land.
</div>
<section id="implementation">
<div class="content">
<h1 class="title"><b>Implementation</b></h1>
<p>Our goal is to engineer a strain of wheat with increased heat tolerance for use by farmers in agricultural land. Take a look at our <a href="https://2022.igem.wiki/ubc-vancouver/implementation">Implementation page</a> to look at our physical and genetic biocontainment strategies.</p>
</section>
<div class="col-6"></div>
</div>
<br><br>
<div class="row">
<div class="col-6"></div>
<section id="modeling">
<div class="content">
<h1 class="title"><b>Modeling & Hardware</b></h1>
<p>In addition to the wet-lab work our team did, we had a subgroup working on modeling different aspects of our project:</p>
<ul>
<li>We designed, built, and tested a hardware device that can detect fluorescence from plants. This handheld device could be used to <b>measure the expression levels of our fluorescently-tagged genes of interest</b>. Our gene circuits only express the fluorescent proteins under heat stress, so this device could <b>measure plant stress</b> of crops. Our team mathematically modeled heat inducible gene circuits, with a focus on the ACC Deaminase pathway.</li>
<li>Our dry-lab team used bioinformatic techniques to look at differentially expressed genes in heat and drought-stressed wheat. </li>
</ul>
<p>More information about our modeling and hardware can be found on the <a href="https://2022.igem.wiki/ubc-vancouver/model">Modeling page</a>.</p>
</section>
<div class="col-6" id="index-content">
<p>We designed, built, and tested a <a href="https://2022.igem.wiki/ubc-vancouver/model">hardware device</a> that can detect fluorescence from plants. This portable device could be used in the field to <span id="highlight">measure the expression levels of our fluorescently-tagged genes of interest</span>. Our gene circuits only express the fluorescent proteins under heat stress, so this device could <span id="highlight">measure plant stress</span> of crops. </p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-6" id="index-content">
<p>Our team also <a href="https://2022.igem.wiki/ubc-vancouver/model#modelling">mathematically modelled</a> heat-inducible gene expression and enzyme kinetics, with a focus on the ACC deaminase pathway. Our Dry-Lab team also conducted a <a href="https://2022.igem.wiki/ubc-vancouver/model#bioinformatics">bioinformatics RNA-seq analysis</a> to identify differentially expressed genes and pathways in heat and drought-stressed wheat.</p>
</div>
<section id="human-practices">
<div class="content">
<h1 class="title"><b>Integrated Human Practices</b></h1>
<p>We considered the downstream users of our project and who would be affected by its implementation. Our integrated human practices team interviewed farmers and visited wheat farms to hear from our potential users about the problems they are facing with increasing temperatures. We tried to incorporate the needs of our users into the design of our project at every stage from ideation to implementation.</p>
<p>For more information please look at our <a href="https://2022.igem.wiki/ubc-vancouver/human-practices">Integrated Human Practices page</a>.</p>
</section>
<div class="col-6"></div>
</div>
<br><br>
<div class="row">
<div class="col-6"></div>
<section id="education">
<div class="content">
<h1 class="title"><b>Education & Communication</b></h1>
<p>Our team took on initiatives to communicate with the public about our project and synthetic biology. These initiatives included:</p>
<ul>
<li>Expert panels discussing GMO ethics or the differences in accessibility of synthetic biology research internationally.</li>
<li>A podcast about the United Nations’ sustainable development goals, highlighting those our project strives to address.</li>
<li>Volunteering in our community and with youth to teach about synthetic biology and help with a community garden.</li>
</ul>
<p>For more information about these initiatives check out our <a href="https://2022.igem.wiki/ubc-vancouver/education">Education and Communication page</a>.</p>
</section>
<div class="col-6" id="index-content">
Our <a href="https://2022.igem.wiki/ubc-vancouver/human-practices">Integrated Human Practices</a> team <span id="highlight">interviewed farmers and visited wheat farms</span> to hear from our potential users about the problems they are facing with increasing temperatures. We tried to <span id="highlight">incorporate the needs of our users</span> into the design of our project at every stage from ideation to implementation.
</div>
</div>
<div class="row">
<div class="col-6" id="index-content">
<p>Our team took on initiatives to <a href="https://2022.igem.wiki/ubc-vancouver/communication">communicate</a> <span id="highlight">with the public about our project and synthetic biology</span>:</p>
<ul>
<li><span id="highlight">Expert panels</span> discussing GMO ethics and the accessibility of synthetic biology research internationally.</li>
<li>A <span id="highlight">podcast</span> about the UN’s sustainable development goals.</li>
<li><span id="highlight">Volunteering in our community</span>, mentoring youth and helping with a community garden.</li>
</ul>
</div>
<div class="col-6"></div>
</div>
<br><br>
<section id="name">
<div class="content">
<h1 class="title"><b>Behind the Name</b></h1>
<p><i>Triticum aestivum</i> is the scientific name for Common Wheat. Our project involves working with synthetic biology to genetically engineer wheat. </p>
<p>Synthetic Biology &#43; <i>T. aestivum</i> &#8594; <b>Synaestivum</b></p>
<p>We chose to work with wheat for our project because it is a major crop in Canada, <span id="highlight">Canada is the fifth-largest wheat producer</span> in the world. Triticum aestivum is the scientific name for Common Wheat. Our project involves working with synthetic biology to genetically engineer wheat. </p>
<p>Synthetic Biology &#43; <i>T. aestivum</i> &#8594; <span id="highlight">Synaestivum</span></p>
</section>
<br><br>
<div class="indexBannerVideo">
<iframe title="UBC_Vancouver: Synaestivum - Heat Resistant Transgenic Wheat (2022) - Project Promotion [English]" src="https://video.igem.org/videos/embed/a2853a01-d199-4aab-94fb-48b1fc916641" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
</div>
<br><br>
<!-- project components section -->
......@@ -417,6 +435,29 @@
});
</script>
<!-- statistics scripts -->
<script>
function animateValue(id, start, end, duration) {
if (start === end) return;
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value1", 0, 39, 2500);
animateValue("value2", 0, 2, 2000);
</script>
<!-- Preloader script TODO: move to separate file -->
<!-- Commenting out animation for now
<script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment