{% extends "base.html" %}
{% load static %}




{% block content %}

<style>
    /*.footer-copyright{*/
    /*    position:relative;*/
    /*}*/
    .parallax-container{
        height: 100vh;

    }
    .parallaxblur{
        background-color: #4784a791;
        position:absolute;
        height: 100%;
        width: 100%;
    }
    .landing_title{
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-70%);
        color:white;

    }
    .landing_title_text{
        font-size:150px;
        text-align:center;
        margin-bottom: 0px;
        text-shadow: 2px 2px #000000b8;
    }
    .landing_subtitle{
        margin-top: 0px;
        font-size:30px;
        text-align:center;
        text-shadow: 2px 2px #000000b8;
    }

    .landing_go_bottom{
        bottom:0;
        font-size:40px;
        color:white;
        cursor:pointer;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-20%);
    }
    .landing_login_bottom{
        position:absolute;
        bottom:0%;
         left: 50%;
          transform: translate(-50%,-700%);
    }
    .landing1{
        background-color:#0066ff;
    }
    .cv{
        position:relative;
        margin-top: 6%;
        text-align: justify;
    }

    @media screen and (max-width: 600px) {
        .landing_title_text{
            font-size:70px;
        }
        .landing_subtitle{
            font-size:15px;
        }
        .landing_go_bottom{
            transform: translate(-50%,-80px);
        }
    }
    .header{
         text-shadow: 2px 2px #000000b8;
    }

</style>

    <div class="parallax-container">
        <div class="parallax" >
            <img src="/media/images/introflower.jpg">
            <div class="parallaxblur">
                 <div  class="landing_title">
                    <p class="landing_title_text"><i class="material-icons " style="font-size: 100px">track_changes</i>ORNADATA</p>
                    <p class="landing_subtitle white-text">SISTEMA WEB PARA LA TOMA DE DECISIONES BASADO EN EL HISTÓRICO DE DATOS FÍSICO-QUÍMICOS DE LA PRODUCCIÓN DE PLANTAS ORNAMENTALES</p>

                </div>
            </div>

        </div>
    <a href="login" class="waves-effect waves-light btn landing_login_bottom transparent"><i class="material-icons left">forward</i>Iniciar sesión</a>
    <i class="material-icons landing_go_bottom">arrow_drop_down_circle</i>
    </div>
    <div class="section landing1">
        <div class=" container">
            <center><h2 class="header white-text">Acerca de</h2></center>
            <div class="row">
                <div class="col s12 m12 l6  white-text  cv">
                    ORNADATA es un sistema que permite el procesamiento y la monitorización de las variables físicoquímicas de la producción de plantas ornamentales a través
                    de la generacion de reportes del comportamiento de dichas variables durante el crecimiento de las plantas con base en los historiales de la producción, con el fin de eficientar el crecimiento y 
                    ahorrar insumos.
                </div>
                <div class="col s6 l4 offset-s3 offset-m3 offset-l2 ">
                    <img class="responsive-img" src="/media/images/helecho.jpg" width="400px">
                </div>
            </div>
        </div>
    </div>
    <div class="section white">
        <div class="container">
            <div class="row">
                <div class="col s12 m6 l3 black-text">
                    <center><i class="large material-icons">cloud_circle</i>
                     <div>Administra información en la nube</div></center>
                </div>
                <div class="col s12 m6 l3 black-text">
                    <center><i class="large material-icons">insert_chart</i>
                    <div>Interfaces dinámicas</div></center>
                </div>
                <div class="col s12 m6 l3 black-text">
                    <center><i class="large material-icons">notifications</i>
                    <div>Notificaciones de acciones y programación de tareas</div></center>
                </div>
                 <div class="col s12 m6 l3 black-text">
                    <center><i class="large material-icons">pin_drop</i>
                    <div>Organización de lotes de producción</div></center>
                </div>
            </div>
            <center><button class="btn red btn-small">Ver más</button></center>
        </div>
    </div>
    <div class="section landing1">
        <div class=" container">
            <center><h2 class="header white-text">Beneficios</h2></center>
            <div class="row">
                <div class="col s6 l4 offset-s3 offset-m3  ">
                    <img class="responsive-img" src="/media/images/crotos.jpg" width="400px">
                </div>
                 <div class="col s12 m12 l6  white-text  offset-m1 offset-l2 ">
                <ul>
                  <li><i class="material-icons">check</i> Lleva el control de los procesos de produccion.</li>
                  <li><i class="material-icons">check</i> Administra los usuarios y supervisa sus movimientos.</li>
                  <li><i class="material-icons">check</i> Guarda información sobre el coportamiento de las variables de producción.</li>
                  <li><i class="material-icons">check</i> Administra las zonas de producción.</li>
                  <li><i class="material-icons">check</i> Administra las plantas y las zonas en que se encuentran.</li>
                  <li><i class="material-icons">check</i> Migra las plantas de zona dependiendo de la etapa de desarrollo en que se encuentre.</li>
                </ul>

                </div>
            </div>
        </div>
    </div>



{% endblock content%}


{% block js %}

<script type="text/javascript">

	$(document).ready(function(){
		$('.materialboxed').materialbox();
	});

	$(document).ready(function(){
        $('.parallax').parallax();
    });

</script>

{% endblock js %}