Difference between revisions of "Team:Valencia UPV/jopegar"

Line 1: Line 1:
−
{{:Team:Valencia_UPV/Templates:bootstrapMinCSS}}
 
−
{{:Team:Valencia_UPV/Templates:essentialsCSS}}
 
−
{{:Team:Valencia_UPV/Templates:layoutCSS}}
 
−
{{:Team:Valencia_UPV/Templates:header1CSS}}
 
−
{{:Team:Valencia_UPV/Templates:greenCSS}}
 
−
 
 
<html lang="en">
 
<html lang="en">
−
<head>
+
    <head>
−
<meta charset="utf-8" />
+
<meta charset="utf-8">
−
<title>ChatterTest</title>
+
<title>Chatter Plant</title>
−
<meta name="description" content="" />
+
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
        <!-- Color Pickr -->
 +
        <link href="https://chatterplantwiki.000webhostapp.com/includes/color-pickr/color-pickr.css" rel="stylesheet">
 +
        <!-- Bootstrap -->
 +
        <link href="https://chatterplantwiki.000webhostapp.com/includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 +
<!-- WOW JS Animation -->
 +
<link rel="stylesheet" href="https://chatterplantwiki.000webhostapp.com/includes/wow-js/animations.css" />
 +
<!-- Litebox  -->
 +
<link rel="stylesheet" href="https://chatterplantwiki.000webhostapp.com/includes/litebox/litebox.css" />
 +
<!-- Owl Carousel -->
 +
<link rel="stylesheet" href="https://chatterplantwiki.000webhostapp.com/includes/owl-carousel/owl.carousel.css" />
 +
        <!-- custom css -->
 +
        <link href="https://chatterplantwiki.000webhostapp.com/css/style.css" rel="stylesheet" type="text/css" media="screen">
 +
        <link href="https://chatterplantwiki.000webhostapp.com/css/media.css" rel="stylesheet" type="text/css" media="screen">
 +
        <!-- font awesome for icons -->
 +
        <link href="https://chatterplantwiki.000webhostapp.com/includes/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
 +
<!-- Web Fonts -->
 +
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  
−
<!-- mobile settings -->
+
<!--[if lte IE 8]>
−
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
+
<link rel="stylesheet" type="text/css" href="css/fucking-ie-8-and-lower.css" />
−
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
+
<![endif]-->
−
 
+
−
<!-- WEB FONTS : use %7C instead of | (pipe) -->
+
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600%7CRaleway:300,400,500,600,700%7CLato:300,400,400italic,600,700" rel="stylesheet" type="text/css" />
+
−
</head>
+
−
 
+
−
<!--
+
−
AVAILABLE BODY CLASSES:
+
 
 
−
smoothscroll = create a browser smooth scroll
 
−
enable-animation = enable WOW animations
 
−
 
−
bg-grey = grey background
 
−
grain-grey = grey grain background
 
−
grain-blue = blue grain background
 
−
grain-green = green grain background
 
−
grain-blue = blue grain background
 
−
grain-orange = orange grain background
 
−
grain-yellow = yellow grain background
 
 
 
−
boxed = boxed layout
 
−
pattern1 ... patern11 = pattern background
 
−
menu-vertical-hide = hidden, open on click
 
 
 
−
BACKGROUND IMAGE [together with .boxed class]
+
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
−
data-background="assets/images/_smarty/boxed_background/1.jpg"
+
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
−
-->
+
        <!--[if lt IE 9]>
−
<body class="smoothscroll enable-animation">
+
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 +
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
        <![endif]-->
 +
<style>
 +
#sideMenu,
 +
#top_title{
 +
    display: none;
 +
}
  
−
<!-- wrapper -->
+
#content {
−
<div id="wrapper">
+
    width: 100% !important;
 +
    padding: 0px !important;
 +
    margin: 0px !important; 
 +
top: 0px !important;
 +
position: absolute !important;
  
−
<!--
+
}
−
AVAILABLE HEADER CLASSES
+
</style>
 +
    </head>
 +
    <body onload="init()" id="body">
  
−
Default nav height: 96px
+
<div id="preloader">
−
.header-md = 70px nav height
+
<div class="spinner">
−
.header-sm = 60px nav height
+
<div class="cube"></div>
−
 
+
<div class="cube"></div>
−
.b-0 = remove bottom border (only with transparent use)
+
<div class="cube"></div>
−
.transparent = transparent header
+
<div class="cube"></div>
−
.translucent = translucent header
+
<div class="cube"></div>
−
.sticky = sticky header
+
<div class="cube"></div>
−
.static = static header
+
<div class="cube"></div>
−
.dark = dark header
+
<div class="cube"></div>
−
.bottom = header on bottom
+
<div class="cube"></div>
−
+
</div>
−
shadow-before-1 = shadow 1 header top
+
</div><!--preloader end-->
−
shadow-after-1 = shadow 1 header bottom
+
−
shadow-before-2 = shadow 2 header top
+
−
shadow-after-2 = shadow 2 header bottom
+
<section id="home">
−
shadow-before-3 = shadow 3 header top
+
<div data-velocity="-.3" class="home-parallax"></div>
−
shadow-after-3 = shadow 3 header bottom
+
<div class="home-overlay"></div>
−
 
+
−
.clearfix = required for mobile menu, do not remove!
+
<div class="welcome-text">
−
 
+
−
Example Usage:  class="clearfix sticky header-sm transparent b-0"
+
−
-->
+
−
<div id="header" class="navbar-toggleable-md sticky transparent clearfix">
+
−
 
+
−
<!-- TOP NAV -->
+
−
<header id="topNav">
+
−
<div class="container">
+
−
 
+
−
<!-- Mobile Menu Button -->
+
−
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
+
−
<i class="fa fa-bars"></i>
+
−
</button>
+
−
 
+
−
<!-- Logo -->
+
−
<a class="logo float-left" href="index.html">
+
−
<img src="assets/images/_smarty/logo_dark.png" alt="" />
+
−
</a>
+
−
 
+
−
<!--
+
−
Top Nav
+
−
+
−
AVAILABLE CLASSES:
+
−
submenu-dark = dark sub menu
+
−
-->
+
−
<div class="navbar-collapse collapse float-right nav-main-collapse">
+
−
<nav class="nav-main">
+
−
 
+
−
<!--
+
−
.nav-onepage
+
−
Required for onepage navigation links
+
−
+
−
Add .external for an external link!
+
−
-->
+
−
<ul id="topMain" class="nav nav-pills nav-main nav-onepage">
+
−
<li class="active"><!-- HOME -->
+
−
<a href="#slider">
+
−
HOME
+
−
</a>
+
−
</li>
+
−
<li><!-- FEATURES -->
+
−
<a href="#features">
+
−
FEATURES
+
−
</a>
+
−
</li>
+
−
<li><!-- PRICING -->
+
−
<a href="#pricing">
+
−
PRICING
+
−
</a>
+
−
</li>
+
−
<li><!-- TESTIMONIALS -->
+
−
<a href="#testimonials">
+
−
TESTIMONIALS
+
−
</a>
+
−
</li>
+
−
<li><!-- PURCHASE -->
+
−
<a class="external" href="#purchase">
+
−
PURCHASE
+
−
</a>
+
−
</li>
+
−
</ul>
+
−
 
+
−
</nav>
+
−
</div>
+
−
 
+
−
</div>
+
−
</header>
+
−
<!-- /Top Nav -->
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<!-- HOME -->
+
−
<section id="slider" class="fullheight" style="background:url('demo_files/images/1200x800/36-min.jpg')">
+
−
<div class="overlay dark-5"><!-- dark overlay [1 to 9 opacity] --></div>
+
−
 
+
−
<div class="display-table">
+
−
<div class="display-table-cell vertical-align-middle">
+
−
+
−
<div class="container text-center">
+
−
+
−
<h1 class="m-0 fs-50 fw-300 wow fadeInUp" data-wow-delay="0.4s">Unlimited Easy Landing Pages</h1>
+
−
<p class="lead font-lato fs-30 wow fadeInUp" data-wow-delay="0.7s">Building a Landing Page was never so Easy &amp; Interactive.</p>
+
−
+
−
<div class="mt-30">
+
−
<a href="#" class="btn btn-3d btn-lg btn-teal"><i class="glyphicon glyphicon-th-large"></i>FREE TRIAL</a>
+
−
<span class="fs-17 hidden-xs-down btn btn-lg">&nbsp; OR &nbsp;</span>
+
−
<a href="#" class="btn btn-3d btn-lg btn-red"><i class="glyphicon glyphicon-user"></i>START FOR A SIBSCRIPTION</a>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
</div>
+
−
</section>
+
−
<!-- /HOME -->
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<!-- FEATURES -->
+
−
<section id="features">
+
 
<div class="container">
 
<div class="container">
−
 
+
<img class="img-responsive" src="https://chatterplantwiki.000webhostapp.com/img/demo-images/imagotipo-chatterplant.png" alt=""/>
−
<header class="text-center mb-60">
+
−
<h2>Our Features</h2>
+
−
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
+
−
<hr />
+
−
</header>
+
−
 
+
−
<!-- FEATURED BOXES 3 -->
+
−
<div class="row">
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-circle-compass"></i>
+
−
<h4>Pixel Perfect</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-piechart"></i>
+
−
<h4>Graphs</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-strategy"></i>
+
−
<h4>Startegy</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-streetsign"></i>
+
−
<h4>SEO Optimized</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- /FEATURED BOXES 3 -->
+
−
 
+
−
<!-- FEATURED BOXES 3 -->
+
−
<div class="row">
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-trophy"></i>
+
−
<h4>Winners</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-gears"></i>
+
−
<h4>Responsive</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-tools"></i>
+
−
<h4>Costomizable</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-3 col-xs-6">
+
−
<div class="text-center">
+
−
<i class="ico-light ico-lg ico-rounded ico-hover et-layers"></i>
+
−
<h4>Easy to Modify</h4>
+
−
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!-- /FEATURED BOXES 3 -->
+
−
 
+
 
</div>
 
</div>
−
</section>
+
</div>
−
<!-- /FEATURES -->
+
</section><!--home section end-->
−
 
+
−
 
+
<section id="project-description">
−
 
+
<div class="container">
−
 
+
<div class="row">
−
<!-- PRICING -->
+
<div class="col-md-6 wow animated fadeInUp">
−
<section id="pricing">
+
<h2 class="page-title" style="margin-top: 50px; margin-bottom: 30px; color:#cd545b">Project Description</h2>
−
<div class="container">
+
<p align="justify" style= "text-indent:30px; color:#005368">Ensuring regular access to high-quality food for everyone is one of the mainstays of society. Unfortunately, food security is constantly threatened by many unpredictable factors that involve agriculture. Controlling both development and behaviour of the plant could contribute to make crops more productive and sustainable. We, Valencia UPV team, propose <b>ChatterPlant</b>, a SynBio-based solution to communicate with plants. We designed an optogenetic circuit that works as interface between plants and humans. Bearing that in mind, we engineered <b>ChatterBox</b> that regulates precisely plant growth conditions while translating plant information into an intelligible one.</p>
−
 
+
−
<header class="text-center mb-60">
+
−
<h2>Our Pricing</h2>
+
−
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
+
−
<hr />
+
−
</header>
+
−
 
+
−
<div class="row">
+
−
 
+
−
<div class="col-md-3 col-sm-3">
+
−
+
−
<div class="price-clean">                               
+
−
<h4>
+
−
<sup>$</sup>15<em>/month</em>
+
−
</h4>
+
−
<h5> Starter </h5>
+
−
<hr />
+
−
<p>For individuals looking for something simple to get started.</p>
+
−
<hr />
+
−
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
+
−
</div>
+
 
 
−
</div>
+
<p align="justify" style= "text-indent:30px; color:#005368">Plant’s communication ability relies on the plant-human <b>interface</b> comprised by our designed optogenetic circuit. This <b>modular system</b> is triggered by red/far-red light inducible switch, thus allowing users to control expression of any desired pathway easily.  Since white light in aerial parts could interfere with the circuit signalling, these light stimuli would be introduced by illuminating plant’s roots. Furthermore, circuit's modularity allows to cover almost any users' necessities, personalizing the final element in the system. As a proof of concept, we resolve to regulate flowering periods in order to provide more control over crops. Thus, we intend to make a positive impact in global <b>food security</b> progress. However, we do not only intend to give orders to plants but also to acquire relevant information from them. Therefore, we generated a second communication channel that allows plants to send us information about their current status (i.g. metabolites levels, phytohormones levels, pathogen presence…). In our project, we chose to activate the expression of a fluorescent protein when infection occurs, making it easily detectable.</p>
−
 
+
−
<div class="col-md-3 col-sm-3">
+
−
+
−
<div class="price-clean">                              
+
−
<h4>
+
−
<sup>$</sup>25<em>/month</em>
+
−
</h4>
+
−
<h5> BUSINESS </h5>
+
−
<hr />
+
−
<p>For individuals looking for something simple to get started.</p>
+
−
<hr />
+
−
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
+
−
</div>
+
 
 
−
</div>
+
<p align="justify" style="text-indent:30px; margin-bottom: 50px; color:#005368">In order to achieve that control, we developed <b>ChatterBox</b> with the aim of translating our orders into light stimuli through roots and also tracking plant growth and development. Controlling external factors and regulating plant’s features allow us to increase plant versatility and adaptative capacity. Furthermore, a <b>detection system</b> is permanently checking for stress signals, so we could immediately actuate in consequence. With this project, our team intends to help in developing a <b>non-climate dependent agriculture</b>, as well as in giving farmers more <b>control</b> over their crops. Thus,  we aspire to ensure food security through human-plant interaction.</p>
−
 
+
−
<div class="col-md-3 col-sm-3">
+
−
+
−
<div class="price-clean price-clean-popular">  
+
−
<div class="ribbon">  
+
−
<div class="ribbon-inner">POPULAR</div>
+
−
</div>
+
−
+
−
<h4>
+
−
<sup>$</sup>35<em>/month</em>
+
−
</h4>
+
−
<h5> DEVELOPER </h5>
+
−
<hr />
+
−
<p>For individuals looking for something simple to get started.</p>
+
−
<hr />
+
−
<a href="#" class="btn btn-3d btn-primary">Learn More</a>
+
−
</div>
+
−
+
−
</div>
+
−
 
+
−
<div class="col-md-3 col-sm-3">
+
−
+
−
<div class="price-clean">                               
+
−
<h4>
+
−
<sup>$</sup>50<em>/month</em>
+
−
</h4>
+
−
<h5> VIP </h5>
+
−
<hr />
+
−
<p>For individuals looking for something simple to get started.</p>
+
−
<hr />
+
−
<a href="#" class="btn btn-3d btn-teal">Learn More</a>
+
−
</div>
+
−
+
−
</div>
+
−
 
+
 
</div>
 
</div>
−
 
−
</div>
 
−
</section>
 
−
<!-- /PRICING -->
 
−
 
−
 
−
 
−
<!-- TESTIMONIALS -->
 
−
<section id="testimonials" class="alternate">
 
−
<div class="container">
 
−
 
−
<header class="text-center mb-60">
 
−
<h2>Testimonials</h2>
 
−
<p class="lead font-lato">Lorem ipsum dolor sit amet adipiscium elit</p>
 
−
<hr />
 
−
</header>
 
−
 
−
<!--
 
−
Note: remove class="rounded" from the img for squared image!
 
−
-->
 
−
<div class="row mb-60">
 
−
<div class="col-md-4">
 
−
<div class="testimonial testimonial-bordered p-15">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/2-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 
−
<cite>
 
−
Felicia Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="col-md-4">
 
−
<div class="testimonial testimonial-bordered p-15">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/1-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 
−
<cite>
 
−
Joana Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div class="col-md-4">
 
−
<div class="testimonial testimonial-bordered p-15">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/6-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero!</p>
 
−
<cite>
 
−
Melissa Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<!--
 
−
Note: remove class="rounded" from the img for squared image!
 
−
-->
 
−
<ul class="row clearfix testimonial-dotted list-unstyled">
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/2-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Joana Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/6-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Melissa Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/7-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Stephany Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/8-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Pamela Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/11-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Simina Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li class="col-md-4">
 
−
<div class="testimonial">
 
−
<figure class="float-left">
 
−
<img class="rounded" src="demo_files/images/people/300x300/12-min.jpg" alt="" />
 
−
</figure>
 
−
<div class="testimonial-content">
 
−
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
 
−
<cite>
 
−
Mihaela Doe
 
−
<span>Company Ltd.</span>
 
−
</cite>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
</ul>
 
−
 
−
</div>
 
−
</section>
 
−
<!-- /TESTIMONIALS -->
 
−
 
−
 
−
 
−
 
−
<!-- -->
 
−
<section>
 
−
<div class="container">
 
 
 
−
<div class="row">
+
<div class="col-md-6 wow animated fadeInUp">
−
+
<img class="img-responsive" src="https://chatterplantwiki.000webhostapp.com/img/demo-images/project-description.png" style="margin-top: 50px; margin-bottom: 50px" alt="" />
−
<div class="col-lg-4">
+
−
 
+
−
<div class="heading-title heading-border-bottom">
+
−
<h3>Smarty Vision</h3>
+
−
</div>
+
−
 
+
−
<div class="toggle toggle-transparent-body toggle-accordion">
+
−
 
+
−
<div class="toggle active">
+
−
<label>Who we are?</label>
+
−
<div class="toggle-content">
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="toggle">
+
−
<label>Our long-term vison</label>
+
−
<div class="toggle-content">
+
−
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="toggle">
+
−
<label>How can we help you?</label>
+
−
<div class="toggle-content">
+
−
<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="col-lg-4">
+
−
 
+
−
<div class="heading-title heading-border-bottom">
+
−
<h3>Smarty Skills</h3>
+
−
</div>
+
−
 
+
−
<div class="progress progress-lg"><!-- progress bar -->
+
−
<div class="progress-bar progress-bar-warning progress-bar-striped active text-left" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%; min-width: 2em;">
+
−
<span>WEB DESIGN 90%</span>
+
−
</div>
+
−
</div><!-- /progress bar -->
+
−
 
+
−
<div class="progress progress-lg"><!-- progress bar -->
+
−
<div class="progress-bar progress-bar-danger progress-bar-striped active text-left" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width: 98%; min-width: 2em;">
+
−
<span>HTML/CSS 98%</span>
+
−
</div>
+
−
</div><!-- /progress bar -->
+
−
 
+
−
<div class="progress progress-lg"><!-- progress bar -->
+
−
<div class="progress-bar progress-bar-success progress-bar-striped active text-left" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
+
−
<span>JAVASCRIPT 60%</span>
+
−
</div>
+
−
</div><!-- /progress bar -->
+
−
 
+
−
<div class="progress progress-lg"><!-- progress bar -->
+
−
<div class="progress-bar progress-bar-info progress-bar-striped active text-left" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%; min-width: 2em;">
+
−
<span>PHP/MYSQL 88%</span>
+
−
</div>
+
−
</div><!-- /progress bar -->
+
−
 
+
−
</div>
+
−
 
+
−
<div class="col-lg-4">
+
−
 
+
−
<div class="heading-title heading-border-bottom">
+
−
<h3>Smarty Special</h3>
+
−
</div>
+
−
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis aliquam id pariatur accusantium perspiciatis deserunt officiis similique nihil dolor blanditiis dignissimos iure praesentium vero suscipit doloribus aperiam unde hic non sint neque molestiae consectetur voluptatum beatae ratione corporis.</p>
+
−
+
−
<a href="#" class="btn btn-default btn-block btn-lg">Join Us Now</a>
+
−
+
−
</div>
+
−
 
+
 
</div>
 
</div>
−
 
 
</div>
 
</div>
−
</section>
 
−
<!-- / -->
 
−
 
−
 
−
 
−
<!-- -->
 
−
<section class="alternate">
 
−
<div class="container">
 
−
 
−
<div class="text-center">
 
−
<h2 class="wow fadeInUp m-0" data-wow-delay="0.3s">DOES SMARTY CONVINCED YOU?</h2>
 
−
 
−
<p class="lead font-lato fs-30 wow fadeInUp mb-60" data-wow-delay="0.5s">Building a Landing Page was never so Easy &amp; Interactive.</p>
 
−
 
−
<div class="mt-30">
 
−
<a href="#" class="btn btn-3d btn-lg wow fadeInUp btn-teal" data-wow-delay="0.7"><i class="glyphicon glyphicon-th-large"></i>FREE TRIAL</a>
 
−
<span class="fs-17 hidden-xs-down wow fadeInUp" data-wow-delay="1s">&nbsp; OR &nbsp;</span>
 
−
<a href="#" class="btn btn-3d btn-lg wow fadeInUp btn-red" data-wow-delay="0.59"><i class="glyphicon glyphicon-user"></i>START FOR A SIBSCRIPTION</a>
 
−
</div>
 
−
</div>
 
−
 
−
</div>
 
−
</section>
 
−
<!-- / -->
 
−
 
−
 
−
 
−
 
−
 
−
<!-- FOOTER -->
 
−
<footer id="footer">
 
−
<div class="container">
 
−
 
−
<div class="row">
 
−
 
−
<div class="col-md-3">
 
−
<!-- Footer Logo -->
 
−
<img class="footer-logo" src="assets/images/_smarty/logo-footer.png" alt="" />
 
−
 
−
<!-- Small Description -->
 
−
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
 
−
 
−
<!-- Contact Address -->
 
−
<address>
 
−
<ul class="list-unstyled">
 
−
<li class="footer-sprite address">
 
−
PO Box 21132<br>
 
−
Here Weare St, Melbourne<br>
 
−
Vivas 2355 Australia<br>
 
−
</li>
 
−
<li class="footer-sprite phone">
 
−
Phone: 1-800-565-2390
 
−
</li>
 
−
<li class="footer-sprite email">
 
−
<a href="mailto:support@yourname.com">support@yourname.com</a>
 
−
</li>
 
−
</ul>
 
−
</address>
 
−
<!-- /Contact Address -->
 
−
 
−
</div>
 
−
 
−
<div class="col-md-3">
 
−
 
−
<!-- Latest Blog Post -->
 
−
<h4 class="letter-spacing-1">LATEST NEWS</h4>
 
−
<ul class="footer-posts list-unstyled">
 
−
<li>
 
−
<a href="#">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue</a>
 
−
<small>29 June 2017</small>
 
−
</li>
 
−
<li>
 
−
<a href="#">Nullam id dolor id nibh ultricies</a>
 
−
<small>29 June 2017</small>
 
−
</li>
 
−
<li>
 
−
<a href="#">Duis mollis, est non commodo luctus</a>
 
−
<small>29 June 2017</small>
 
−
</li>
 
−
</ul>
 
−
<!-- /Latest Blog Post -->
 
−
 
−
</div>
 
−
 
−
<div class="col-md-2">
 
−
 
−
<!-- Links -->
 
−
<h4 class="letter-spacing-1">EXPLORE SMARTY</h4>
 
−
<ul class="footer-links list-unstyled">
 
−
<li><a href="#">Home</a></li>
 
−
<li><a href="#">About Us</a></li>
 
−
<li><a href="#">Our Services</a></li>
 
−
<li><a href="#">Our Clients</a></li>
 
−
<li><a href="#">Our Pricing</a></li>
 
−
<li><a href="#">Smarty Tour</a></li>
 
−
<li><a href="#">Contact Us</a></li>
 
−
</ul>
 
−
<!-- /Links -->
 
−
 
−
</div>
 
−
 
−
<div class="col-md-4">
 
−
 
−
<!-- Newsletter Form -->
 
−
<h4 class="letter-spacing-1">KEEP IN TOUCH</h4>
 
−
<p>Subscribe to Our Newsletter to get Important News &amp; Offers</p>
 
−
 
−
<form class="validate" action="php/newsletter.php" method="post" data-success="Subscribed! Thank you!" data-toastr-position="bottom-right">
 
−
<div class="input-group">
 
−
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
 
−
<input type="email" id="email" name="email" class="form-control required" placeholder="Enter your Email">
 
−
<span class="input-group-btn">
 
−
<button class="btn btn-success" type="submit">Subscribe</button>
 
−
</span>
 
−
</div>
 
−
</form>
 
−
<!-- /Newsletter Form -->
 
−
 
−
<!-- Social Icons -->
 
−
<div class="mt-20">
 
−
<a href="#" class="social-icon social-icon-border social-facebook float-left" data-toggle="tooltip" data-placement="top" title="Facebook">
 
−
 
−
<i class="icon-facebook"></i>
 
−
<i class="icon-facebook"></i>
 
−
</a>
 
−
 
−
<a href="#" class="social-icon social-icon-border social-twitter float-left" data-toggle="tooltip" data-placement="top" title="Twitter">
 
−
<i class="icon-twitter"></i>
 
−
<i class="icon-twitter"></i>
 
−
</a>
 
−
 
−
<a href="#" class="social-icon social-icon-border social-gplus float-left" data-toggle="tooltip" data-placement="top" title="Google plus">
 
−
<i class="icon-gplus"></i>
 
−
<i class="icon-gplus"></i>
 
−
</a>
 
−
 
−
<a href="#" class="social-icon social-icon-border social-linkedin float-left" data-toggle="tooltip" data-placement="top" title="Linkedin">
 
−
<i class="icon-linkedin"></i>
 
−
<i class="icon-linkedin"></i>
 
−
</a>
 
−
 
−
<a href="#" class="social-icon social-icon-border social-rss float-left" data-toggle="tooltip" data-placement="top" title="Rss">
 
−
<i class="icon-rss"></i>
 
−
<i class="icon-rss"></i>
 
−
</a>
 
−
 
−
</div>
 
−
<!-- /Social Icons -->
 
−
 
−
</div>
 
−
 
−
</div>
 
−
 
−
</div>
 
−
 
−
<div class="copyright">
 
−
<div class="container">
 
−
<ul class="float-right m-0 list-inline mobile-block">
 
−
<li><a href="#">Terms &amp; Conditions</a></li>
 
−
<li>&bull;</li>
 
−
<li><a href="#">Privacy</a></li>
 
−
</ul>
 
−
&copy; All Rights Reserved, Company LTD
 
−
</div>
 
−
</div>
 
−
</footer>
 
−
<!-- /FOOTER -->
 
−
 
−
</div>
 
−
<!-- /wrapper -->
 
−
 
−
 
−
<!-- SCROLL TO TOP -->
 
−
<a href="#" id="toTop"></a>
 
−
 
−
 
−
<!-- PRELOADER -->
 
−
<div id="preloader">
 
−
<div class="inner">
 
−
<span class="loader"></span>
 
 
</div>
 
</div>
−
</div><!-- /PRELOADER -->
+
</section>
 +
<!--scripts and plugins -->
 +
        <!--must need plugin jquery-->
 +
        <script src="https://chatterplantwiki.000webhostapp.com/js/jquery.min.js"></script>       
 +
        <!--bootstrap js plugin-->
 +
        <script src="https://chatterplantwiki.000webhostapp.com/includes/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
 +
<!--easying scroll effect-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.easing.1.3.min.js" type="text/javascript"></script>
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.sticky.js" type="text/javascript"></script>
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.nav.js" type="text/javascript"></script>
 +
<!--owl carousel-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
 +
<!--wow animation-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/wow-js/wow.min.js" type="text/javascript"></script>
 +
 +
<!--Activating WOW Animation only for modern browser-->
 +
<!--[if !IE]><!-->
 +
<script type="text/javascript">new WOW().init();</script>
 +
<!--<![endif]-->
 +
 +
<!--Oh Yes, IE 9+ Supports animation, lets activate for IE 9+-->
 +
<!--[if gte IE 9]>
 +
<script type="text/javascript">new WOW().init();</script>
 +
<![endif]-->
 +
 +
<!--Opacity & Other IE fix for older browser-->
 +
<!--[if lte IE 8]>
 +
<script type="text/javascript" src="https://chatterplantwiki.000webhostapp.com/js/ie-opacity-polyfill.js"></script>
 +
<![endif]-->
  
−
 
−
<!-- JAVASCRIPT FILES -->
 
−
<script type="text/javascript">var plugin_path = 'assets/plugins/';</script>
 
−
<script type="https://2017.igem.org/Template:Valencia_UPV/jquery321Min?action=raw&ctype=text/javascript"></script>
 
−
 
−
<script type="text/javascript" src="assets/js/scripts.js"></script>
 
 
 
−
<!-- STYLESWITCHER - REMOVE -->
+
<!--parallax-->
−
<script async type="text/javascript" src="demo_files/styleswitcher/styleswitcher.js"></script>
+
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.scrolly.js" type="text/javascript"></script>
−
</body>
+
<!--portfolio-filter-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/isotope.pkgd.min.js" type="text/javascript"></script>
 +
<!--lightbox-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/litebox/images-loaded.min.js" type="text/javascript"></script>
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/litebox/litebox.min.js" type="text/javascript"></script>
 +
<!--project count-->
 +
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.counterup.min.js" type="text/javascript"></script>
 +
<!--custom scrollbar-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/jquery.nicescroll.min.js" type="text/javascript"></script>
 +
<!--Contact Form-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/contact-form/app.js" type="text/javascript"></script>
 +
<script src="https://chatterplantwiki.000webhostapp.com/includes/contact-form/validatr.js" type="text/javascript"></script>
 +
 +
<!--customizable plugin edit according to your needs-->
 +
<script src="https://chatterplantwiki.000webhostapp.com/js/custom.js" type="text/javascript"></script>
 +
    </body>
 
</html>
 
</html>

Revision as of 09:07, 21 July 2017

Chatter Plant

Project Description

Ensuring regular access to high-quality food for everyone is one of the mainstays of society. Unfortunately, food security is constantly threatened by many unpredictable factors that involve agriculture. Controlling both development and behaviour of the plant could contribute to make crops more productive and sustainable. We, Valencia UPV team, propose ChatterPlant, a SynBio-based solution to communicate with plants. We designed an optogenetic circuit that works as interface between plants and humans. Bearing that in mind, we engineered ChatterBox that regulates precisely plant growth conditions while translating plant information into an intelligible one.

Plant’s communication ability relies on the plant-human interface comprised by our designed optogenetic circuit. This modular system is triggered by red/far-red light inducible switch, thus allowing users to control expression of any desired pathway easily. Since white light in aerial parts could interfere with the circuit signalling, these light stimuli would be introduced by illuminating plant’s roots. Furthermore, circuit's modularity allows to cover almost any users' necessities, personalizing the final element in the system. As a proof of concept, we resolve to regulate flowering periods in order to provide more control over crops. Thus, we intend to make a positive impact in global food security progress. However, we do not only intend to give orders to plants but also to acquire relevant information from them. Therefore, we generated a second communication channel that allows plants to send us information about their current status (i.g. metabolites levels, phytohormones levels, pathogen presence…). In our project, we chose to activate the expression of a fluorescent protein when infection occurs, making it easily detectable.

In order to achieve that control, we developed ChatterBox with the aim of translating our orders into light stimuli through roots and also tracking plant growth and development. Controlling external factors and regulating plant’s features allow us to increase plant versatility and adaptative capacity. Furthermore, a detection system is permanently checking for stress signals, so we could immediately actuate in consequence. With this project, our team intends to help in developing a non-climate dependent agriculture, as well as in giving farmers more control over their crops. Thus, we aspire to ensure food security through human-plant interaction.