{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Fundaj Mobile</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="{% static 'css/mdb.css' %}" rel="stylesheet">

    <!-- Template styles -->
    <style>
        /* TEMPLATE STYLES */

        html,
        body,
        .view {
            height: 100%;
        }
        /* Navigation*/

        .navbar {
            background-color: transparent;
        }

        .scrolling-navbar {
            -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
            -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
            transition: background .5s ease-in-out, padding .5s ease-in-out;
        }

        .top-nav-collapse {
            background-color:  #00802b;
        }

        footer.page-footer {
            background-color:  #00802b;
            margin-top: 2rem;
        }

        @media only screen and (max-width: 768px) {
            .navbar {
                background-color:  #006622;
            }
        }
        /*Call to action*/

        .flex-center {
            color: #fff;
        }

        .view {
            background: url("http://inspiradanacomputacao.com/images/fundajmobile/3.jpg")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }


        /*Contact section*/

        #contact .fa {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #1C2331;
        }
    </style>

</head>

<body>

    <!--Navbar-->
    <nav class="navbar navbar-toggleable-md navbar-dark fixed-top scrolling-navbar">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="{% static 'img/fundacao.png' %}" class="img-fluid" alt="">
            </a>
            <div class="collapse navbar-collapse" id="navbarNav1">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#sobre">Sobre</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#recursos">Recursos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#docs">Documentação</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contato">Contato</a>

                    </li>
                </ul>
                <form class="form-inline waves-effect waves-light">
                   <!-- <input class="form-control" type="text" placeholder="Buscar"> -->
                </form>
            </div>
        </div>
    </nav>
    <!--/.Navbar-->

    <!--Mask-->
    <div class="view hm-black-strong">
        <div class="full-bg-img flex-center">
            <ul>
                <li>
                    <h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">FUNDAJ MOBILE</h1></li>
                <li>
                    <p class="wow fadeInDown">Fundação Joaquim Nabuco na sua mão</p>
                </li>
                <li>
                    <a target="_blank" href="http://fundajmobile.inspiradanacomputacao.com/" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.2s" rel="nofollow">Web App</a>
                    <a href="http://inspiradanacomputacao.com/images/fundajmobile/fundajmobilebeta.apk" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.2s" rel="nofollow">Android</a>

                </li>
                <p style="font-size: 11px;">Em breve disponível para iPhone</p>
            </ul>
        </div>
    </div>
    <!--/.Mask-->

    <!-- Main container-->
    <div class="container">

        <div class="divider-new">
            <h2 class="h2-responsive wow fadeIn" data-wow-delay="0.2s">Sobre</h2>
        </div>

        <!--Section: Sobre -->
        <section id="sobre" class="text-center wow fadeIn" data-wow-delay="0.2s">

            <p>Fundaj Mobile é um aplicativo gratuito que disponibiliza de forma prática e acessível a atuação da Fundação Joaquim Nabuco, antes
        disponível apenas no site institucional. Dessa forma, a Fundaj utiliza o principal meio de acesso à internet para ampliar a disponibilidade de informação, acervo e agenda cultural.</p>

        </section>
        <!--Section: Sobre -->

        <div class="divider-new">
            <h2 class="h2-responsive wow fadeIn">Recursos</h2>
        </div>

        <!--Section: Recursos -->
        <section id="recursos">

            <div class="row">

                <!--First columnn-->
                <div class="col-lg-3">
                    <!--Card-->
                    <div class="card wow fadeIn">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">


                            <img src="http://inspiradanacomputacao.com/images/fundajmobile/icone/inst.jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"></div>
                            </a>

                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block text-center">
                            <!--Title-->
                            <h4 class="card-title">Institucional</h4>
                            <hr>
                            <!--Text-->
                            <p class="card-text">Informações da Fundação Joaquim Nabuco</p>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
                </div>
                <!--First columnn-->

                <!--Second columnn-->
                <div class="col-lg-3">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.2s">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="http://inspiradanacomputacao.com/images/fundajmobile/icone/acervo.jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block text-center">
                            <!--Title-->
                            <h4 class="card-title">Acervo </h4>
                            <hr>
                            <!--Text-->
                            <p class="card-text">Pesquisa Escolar, Villa Digital, Multimídia </p>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
                </div>
                <!--Second columnn-->

                <!--Third columnn-->
                <div class="col-lg-3">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.4s">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="http://inspiradanacomputacao.com/images/fundajmobile/icone/cultura.jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block text-center">
                            <!--Title-->
                            <h4 class="card-title">Cultura</h4>
                            <hr>
                            <!--Text-->
                            <p class="card-text">Informações e agenda do Cinema, MuhNe e Editora</p>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
                </div>
                <!--Third columnn-->

                <!--First columnn-->
                <div class="col-lg-3">
                    <!--Card-->
                    <div class="card wow fadeIn" data-wow-delay="0.6s">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="http://inspiradanacomputacao.com/images/fundajmobile/icone/comunica.jpg" class="img-fluid" alt="">
                            <a>
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block text-center">
                            <!--Title-->
                            <h4 class="card-title">Comunicação</h4>
                            <hr>
                            <!--Text-->
                            <p class="card-text">Notícias e Eventos da Fundação Joaquim Nabuco</p>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->
                </div>
                <!--First columnn-->
            </div>

        </section>
        <!--/Section: Best features-->

        <div class="divider-new">
            <h2 class="h2-responsive wow fadeIn" data-wow-delay="0.2s">Documentação</h2>
        </div>

        <!--Section: Sobre -->
        <section id="docs" class="text-center wow fadeIn" data-wow-delay="0.2s">

            <p>Tudo o que você precisa saber sobre o Fundaj Mobile. A documentação é um guia para usuários sobre instalação, navegação e funcionalidades.</p>
            <div class="call-to-action">
                <ul>
                    <li><a target="_blank" href="https://goo.gl/f7KyMy" class="btn btn-default" rel="nofollow">Acessar</a></li>
                </ul>
             </div>
        </section>
        <!--Section: Sobre -->

        <div class="divider-new">
            <h2 class="h2-responsive wow fadeIn">Contato</h2>
        </div>

        <!--Section: Contact-->
        <section id="contato">
            <div class="row">
                <!--First column-->
                <div class="col-md-8">
                    <div id="map-container" class="z-depth-1 wow fadeIn" style="height: 300px"></div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4">
                    <ul class="text-center">
                        <li class="wow fadeIn" data-wow-delay="0.2s"><i class="fa fa-map-marker teal-text"></i>
                            <p>Avenida Dezessete de Agosto, Nº 2187 <br/>Casa Forte - Recife/PE</p>
                        </li>

                        <li class="wow fadeIn" data-wow-delay="0.3s"><i class="fa fa-phone teal-text"></i>
                            <p>+55 81 3320-9999 </p>
                        </li>

                        <li class="wow fadeIn" data-wow-delay="0.4s"><i class="fa fa-envelope teal-text"></i>
                            <p>informatica@fundaj.gov.br</p>
                        </li>
                    </ul>
                </div>
                <!--/Second column-->
            </div>
        </section>
        <!--Section: Contact-->

    </div>
    <!--/ Main container-->



    <!--Footer-->
    <footer class="page-footer center-on-small-only">

        <!--Footer Links-->
        <div class="container-fluid">
            <div class="row">

                <!--First column-->
                <div class="col-md-3 offset-lg-1">
                    <h5 class="title">Fundaj Mobile</h5>
                    <p>Desenvolvido pela CGINT-FUNDAJ</p>


                </div>
                <!--/.First column-->

                <hr class="hidden-md-up">

                <!--Second column-->
                <div class="col-lg-2 col-md-4 offset-lg-1">
                    <h5 class="title">Outros Projetos</h5>
                    <ul>
                        <li><a href="#" target="_blank">Intranet</a></li>
                        <li><a href="http://villadigital.fundaj.gov.br/" target="_blank">Villa Digital</a></li>
                        <li><a href="http://fundaj.gov.br/pesquisaescolar/" target="_blank">Portal da Fundaj</a></li>
                        <li><a href="http://basilio.fundaj.gov.br/pesquisaescolar/" target="_blank">Pesquisa Escolar</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

                <hr class="hidden-md-up">

                <!--Third column-->
                <div class="col-lg-2 col-md-4">
                    <h5 class="title"></h5>
                    <ul>
                        <li><a href="#!"></a></li>
                        <li><a href="#!"></a></li>
                        <li><a href="#!"></a></li>
                        <li><a href="#!"></a></li>
                    </ul>
                </div>
                <!--/.Third column-->

                <hr class="hidden-md-up">

                <!--Fourth column-->
                <div class="col-lg-2 col-md-4">
                    <h5 class="title">Redes Sociais</h5>
                    <ul>
                        <li><a href="https://twitter.com/imprensafundaj" target="_blank">Twitter</a></li>
                        <li><a href="https://www.facebook.com/FundacaoJoaquimNabuco/" target="_blank">Facebook</a></li>

                        <li><a href="https://www.instagram.com/fundajoficial/" target="_blank">Instagram</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

            </div>
        </div>
        <!--/.Footer Links-->

        <hr>

        <!--Call to action-->
        <div class="call-to-action">
            <h4>FUNDAJ MOBILE</h4>
            <ul>
                <li>
                    <h5>Download Gratuito</h5>
                </li>

                <li><a target="_blank" href="http://fundajmobile.inspiradanacomputacao.com/" class="btn btn-primary" rel="nofollow">Web App</a></li>
                <li><a href="http://inspiradanacomputacao.com/images/fundajmobile/fundajmobilebeta.apk" class="btn btn-default" rel="nofollow">Android</a></li>
            </ul>
            <p style="font-size: 11px;">Em breve disponível para iPhone</p>
        </div>
        <!--/.Call to action-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © Copyright © 2017 Fundação Joaquim Nabuco - Todos os direitos reservados.<a href="http://www.fundaj.gov.br" target="_blank">www.fundaj.gov.br</a>

            </div>
        </div>
        <!--/.Copyright-->

    </footer>
    <!--/.Footer-->


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="{% static 'js/jquery-2.2.3.min.js' %}"></script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="{% static 'js/tether.min.js' %}"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="{% static 'js/mdb.min.js' %}"></script>

    <!--Google Maps-->
    <script src="//maps.google.com/maps/api/js"></script>

    <script>
        function init_map() {

            var var_location = new google.maps.LatLng(-8.0284688, -34.9287684);

            var var_mapoptions = {
                center: var_location,

                zoom: 15
            };

            var var_marker = new google.maps.Marker({
                position: var_location,
                map: var_map,
                title: "Fundaj"
            });

            var var_map = new google.maps.Map(document.getElementById("map-container"),
                var_mapoptions);

            var_marker.setMap(var_map);

        }

        google.maps.event.addDomListener(window, 'load', init_map);
    </script>

    <!-- Animations init-->
    <script>
        new WOW().init();
    </script>


</body>

</html>