<!--
ARCHES - a program developed to inventory and manage immovable cultural heritage.
Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
{% load webpack_static from webpack_loader %}
{% load static %}
{% load template_tags %}
{% load i18n %}
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <title>{{app_title}}</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="{% webpack_static 'img/favicon.png' %}" />

    <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">

    <link href="{% webpack_static 'css/unify.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
    <link href="{% webpack_static 'css/index.css' %}" rel="stylesheet">
    <link href="{% webpack_static 'css/project.css' %}" rel="stylesheet">

</head>

<!--
The #page-top ID is part of the scrolling feature.
The data-spy and data-target are part of the built-in Bootstrap scrollspy function.
-->

<body id="body" data-spy="scroll" data-target=".splash-nav" class="demo-lightbox-gallery">

    <!--=== Header ===-->
    <nav class="v5-splash-navbar navbar" role="navigation">

        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <div class="relative" style="padding-left: 85px; width: 300px;">
                        <div class="navbar-brand-v5-icon-container" style="top: 4px; height: 45px; width: 45px; background: #f9f9f9; border-radius: 50%; border: 1px solid #000;">
                            <img class="navbar-brand-v5-icon" style="margin-top: -2px;" src="{% webpack_static 'img/landing/arches_logo_dark.png' %}" alt="{% trans 'Arches Logo' %}">
                        </div>
                        <div class="application-name" style="position: absolute; top: 5px; left: 150px;">
                            <h2 style="color: #f4f4f4;">{{app_title}}</h2>
                        </div>
                    </div>
                </div>

                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#info-block-1">{% trans "Arches Features" %}</a>
                        </li>

                        <li>
                            <a href="{% url 'search_home' %}">{% trans "Search" %}</a>
                        </li>

                        {% if user|can_create_resource_instance and user.username != 'anonymous' %}
                        <li>
                            <a href="{% url 'resource' %}" target="_blank">{% trans "Manage" %}</a>
                        </li>
                        {% endif %}
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="padding-right: 80px;">
                        <li>
                            {% if user.username == 'anonymous' %}
                                <a class="application-login" id="auth-link" href="{% url 'auth' %}?next={% url 'home' %}{% if user.username != 'anonymous' %}&logout=true{% endif %}">{% trans "Sign in" %}</a>
                            {% else %}
                                <a class="auth-welcome" href="{% url 'user_profile_manager' %}">
                                    {% trans "Welcome, " %} {{ user.first_name|default:user.username }}
                                </a>
                            </li>
                            <li>
                                <a class="application-login" href="{% url 'auth' %}?next={% url 'home' %}{% if user.username != 'anonymous' %}&logout=true{% endif %}">{% trans 'Log off' %}</a>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- /container -->
    </nav>
    <!--=== End Header ===-->

    <!-- Intro Section -->
    <section id="info-block-0" class="app-info-block intro-section relative">
        <!-- Vertical Nav -->
        <div class="vertical-nav-container-background"></div>

        <div id="cd-vertical-nav" class="vertical-nav-container">
            <ul class="vertical-nav-list">
                <li class="active">
                    <a class="vertical-nav-list-link" href="#info-block-0" data-number="1">
                        <span class="vertical-nav-list-ref">{% trans "Home" %}</span>
                    </a>
                </li>
                <li>
                    <a class="vertical-nav-list-link" href="#info-block-1" data-number="2">
                        <span class="vertical-nav-list-ref">{% trans "Fast" %}</span>
                    </a>
                </li>
                <li>
                    <a class="vertical-nav-list-link" href="#info-block-2" data-number="3">
                        <span class="vertical-nav-list-ref">{% trans "Workflows" %}</span>
                    </a>
                </li>
                <li>
                    <a class="vertical-nav-list-link" href="#info-block-3" data-number="4">
                        <span class="vertical-nav-list-ref">{% trans "Search Tools" %}</span>
                    </a>
                </li>
                <li>
                    <a class="vertical-nav-list-link" href="#info-block-4" data-number="5">
                        <span class="vertical-nav-list-ref">{% trans "Mobile" %}</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Splash Screen -->
        <div class="fullscreenbanner-container">
            <div class="fullscreenbanner">
                <ul>
                    <!-- SLIDE 1 -->
                    <li data-transition="fade" data-slotamount="9" data-masterspeed="0" data-title="Slide 1">
                        <!-- MAIN IMAGE -->
                        <img src="{% webpack_static 'img/landing/irises.jpg' %}" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                        <!-- LAYERS -->
                        <!-- NEW LAYER -->
                        <div class="tp-caption sft start text-bold v5-splash-caption" style="left: 150px;" delay="4500"  data-hoffset="0" data-y="400" data-speed="800" data-start="100" data-easing="Back.easeInOut" data-endspeed="300">
                            <h2>{% trans "Arches for Science" %}</h2>
                            <p>{% trans "A web and mobile platform for" %}</p>
                            <p>{% trans "managing your most important conservation information" %}</p>
                        </div>

                        <!-- Gradient -->
                        <div class="image-gradient"></div>

                        <!-- Attribution -->
                        <div class="image-attribution">
                            <span>{% trans "Imaging of Irises | Getty Conservation Institute | (CC BY-NC-ND 2.0)" %}</span>
                        </div>
                    </li>

                </ul>
                <div class="tp-bannertimer tp-bottom"></div>
            </div>

            <!-- Down button -->
            <div class="down-button">
                <a href="#info-block-1"><i class="fa fa-angle-down down-button-icon"></i></a>
            </div>
        </div>
    </section>
    <!-- End Intro Section -->

    <!-- Info Block 1 -->
    <section id="info-block-1" class="app-info-block relative">
        <div>

            <!-- Heading Info -->
            <div class="sub-section">
                <div class="col-lg-7">
                    <div class="app-info-block-intro text-center">
                        <h3 class="app-info-block-header">{% trans "Fast" %}</h3>
                        <h2 class="app-info-block-title">{% trans "Deploy Applications Rapidly" %}</h2>
                        <p class="app-info-block-text">
                            {% trans "Design custom information management applications in hours.  Build your databases with Arches Designer, then configure your interface all without having to write any code." %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="splash-img">
                <img src="{% webpack_static 'img/landing/imac_designer.png' %}" alt="{% trans 'Arches Designer' %}">
            </div>

            <!-- Sub-section -->
            <div class="row app-info-sub-block">

                <!-- Arches Data Type Block -->
                <div class="col-lg-6">
                    <div class="sub-block-container">
                        <h2>{% trans "Interface Manager" %}</h2>
                        <p class="sub-block-description">
                            {% trans "Arches automatically creates data entry forms based on your data models.  Use Arches' Card Manager to configure the look and feel of your data entry UI." %}
                        </p>
                        <img class="sub-block-image" src="{% webpack_static 'img/landing/card_manager.png' %}" alt="{% trans 'Card Manager' %}">
                    </div>
                </div>

                <!-- Arches Data Type Block -->
                <div class="col-lg-6">
                    <div class="sub-block-container">
                        <h2>{% trans "Data Security" %}</h2>
                        <p class="sub-block-description">
                            {% trans "Use Arches' Permissions Manager to set up data access rules for all your user groups and individual accounts.  You can define read/write/delete and no-access permissions." %}
                        </p>
                        <img class="sub-block-image" src="{% webpack_static 'img/landing/permissions_manager.png' %}" alt="{% trans 'Permissions Manager' %}">
                    </div>
                </div>

            </div>
            <!-- End Sub-section -->


        </div>
    </section>
    <!-- End Info Block 1 -->


    <!-- Info Block 2 -->
    <section id="info-block-2" class="app-info-block relative">
        <div>

            <!-- Heading Info -->
            <div class="sub-section">
                <div class="col-lg-7">
                    <div class="app-info-block-intro text-center">
                        <h3 class="app-info-block-header">{% trans "Workflows" %}</h3>
                        <h2 class="app-info-block-title">{% trans "Orchestrate your data entry" %}</h2>
                        <p class="app-info-block-text">
                            {% trans "Design step-wise data management interfaces that simplify complex editing tasks.  Ensure that everyone enters data completely and consistently" %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="splash-img">
                <img class="search-screen" src="{% webpack_static 'img/landing/consultation_workflow.jpg' %}" alt="{% trans 'Arches Workflows' %}">
            </div>

        </div>
    </section>
    <!-- End Info Block 2 -->


    <!-- Info Block 3 -->
    <section id="info-block-3" class="app-info-block relative">
        <div>

            <!-- Heading Info -->
            <div class="sub-section">
                <div class="col-lg-7">
                    <div class="app-info-block-intro text-center">
                        <h3 class="app-info-block-header">{% trans "Arches Search Tools" %}</h3>
                        <h2 class="app-info-block-title">{% trans "Find what you're looking for" %}</h2>
                        <p class="app-info-block-text">
                            {% trans "Arches comes with powerful built-in search tools.  Quickly filter large databases with term, geospatial, and time-based search components" %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="splash-img">
                <img class="search-screen" src="{% webpack_static 'img/landing/arches_search.png' %}" alt="{% trans 'Arches Search' %}">
            </div>

            <!-- Sub-section -->
            <div class="wide-box">
                <div class="box-highlight">
                    <h3>{% trans "Search Options" %}</h3>
                    <p>
                        {% trans "Arches gives you many ways to find precisely the information you need, even if your Arches application contains 10's of millions of records.  In addition to term, thesaurus, geospatial, and temporal filters, Arches provides you with advanced filtering options that support boolean logic, inverses, and many other filtering options." %}
                    </p>
                    <br>
                    <p>
                        {% trans "Arches' search capabilities also provide for sophisticated data visualizations, including interactive displays of the connections between your data objects using a Force Directed Graph." %}
                    </p>
                    <br>
                    <p>
                        {% trans "If you're a software developer, you can build on Arches modular search services and create your own filters, reports, and visualizations to best show off your particular dataset." %}
                    </p>

                </div>
            </div>

        </div>
    </section>
    <!-- End Info Block 3 -->


    <!-- Footer -->
    <div class="afs-app-footer">

        <!-- footer content container -->
        <div class="row">

            <!-- branding column -->
            <div class="col-lg-4">

                <h2 class="app-footer-heading">{% trans "Sample Institution Name" %}</h2>

                <div class="organization-address">
                  Sample Address<br>
                  Getty Conservation Institute<br>
                  1200 Getty Center Drive<br>
                  Los Angeles, CA  90049<br>
                </div>
            </div>

            <!-- Info Column -->
            <div class="col-lg-8">
                <h2 class="app-footer-heading">{% trans "Guides and Documentation" %}</h2>

                <!-- Links -->
                <div class="afs-splash-links">
                    <div class="row" style="padding-left: 0px;">
                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a class="splash-link-address" href="http://https://www.archesproject.org/what-is-arches/" target="_blank">{% trans "What is Arches" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/collector/" target="_blank">{% trans "Arches Collector" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/implementation-considerations/" target="_blank">{% trans "Implementation Considerations" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/development/" target="_blank">{% trans "Information For Developers" %}</a>
                                </li>


                            </ul>
                        </div>

                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/faq/" target="_blank">{% trans "FAQ" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/standards/" target="_blank">{% trans "Standards and Interoperability" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://arches.readthedocs.io/en/stable/requirements-and-dependencies/" target="_blank">{% trans "Installation Guide" %}</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/project-background/" target="_blank">{% trans "Arches Project Background" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/videos/" target="_blank">{% trans "Arches Webinars/Presentations" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/resource-models/" target="_blank">{% trans "Resource Models" %}</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End Footer -->

    <!-- Copyright Panel -->
    <div class="copyright-container">
        <!-- Arches link -->
        <div class="app-footer-links">
            <a class="link-spacing" href="">{% trans "Terms & Conditions" %}</a>
            <a class="link-spacing" href="">{% trans "Privacy Policy" %}</a>
            <a class="afs-app-footer-arches-link" href="http://www.archesproject.org" target="_blank">Powered by Arches</a>
        </div>
    </div>
    <!-- End Copyright Container -->



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.0/jquery-migrate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.3.8/SmoothScroll.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
    <script src="{% webpack_static 'plugins/revolution-slider/rs-plugin/js/jquery.themepunch.tools.min.js' %}"></script>
    <script src="{% webpack_static 'plugins/revolution-slider/rs-plugin/js/jquery.themepunch.revolution.min.js' %}"></script>
    <script src="{% webpack_static 'plugins/cube-portfolio/cubeportfolio/js/jquery.cubeportfolio.min.js' %}"></script>
    <script src="{% webpack_static 'plugins/one.app.js' %}"></script>
    <script src="{% webpack_static 'plugins/pace-loader.js' %}"></script>
    <script src="{% webpack_static 'plugins/owl-carousel.js' %}"></script>
    <script src="{% webpack_static 'plugins/style-switcher.js' %}"></script>
    <script src="{% webpack_static 'plugins/revolution-slider.js' %}"></script>
    <script src="{% webpack_static 'plugins/cube-portfolio-lightbox.js' %}"></script>
    <script src="{% webpack_static 'node_modules/knockout/build/output/knockout-latest.js' %}"></script>


    <script>
        jQuery(document).ready(function() {
            App.init();
            App.initCounter();
            App.initParallaxBg();
            OwlCarousel.initOwlCarousel();
            StyleSwitcher.initStyleSwitcher();
            RevolutionSlider.initRSfullScreen();

            var contentSections = $('.app-info-block'),
                navigationItems = $('#cd-vertical-nav a');

            updateNavigation();
            $(window).on('scroll', function(){
                updateNavigation();
            });

            //smooth scroll to the section
            navigationItems.on('click', function(event){
                event.preventDefault();
                smoothScroll($(this.hash));
            });


            function updateNavigation() {
                contentSections.each(function(){
                    $this = $(this);
                    var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
                    if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
                        navigationItems.eq(activeSection).addClass('is-selected');
                    }else {
                        navigationItems.eq(activeSection).removeClass('is-selected');
                    }
                });
            }

            function smoothScroll(target) {
                $('body,html').animate(
                    {'scrollTop':target.offset().top},
                    600
                );
            }


        });

        var ViewModel = function(first, last) {
            this.showAuthMenu = ko.observable(false);
        };
        ko.applyBindings(new ViewModel());

    </script>

</body>

</html>
