{% load staticfiles i18n%}
<!DOCTYPE html>
<html lang={{language}}>
    
    <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Alplora.ch - {% trans 'Find your animal anywhere, anytime' %}</title>


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

    <link href="{% static 'alplora/css/pricing.css' %}" rel="stylesheet">


    <!-- Custom CSS -->
    <link href="{% static 'alplora/css/alplora.css' %}" rel="stylesheet">


    <!-- Custom Fonts -->
    <link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'alplora/font-awesome/css/font-awesome.min.css' %}">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="{% static 'alplora/img/favicon.ico' %}" type="image/x-icon">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    
     </head>

 <body data-feedly-mini="yes">
   
<script async src="//www.google-analytics.com/analytics.js"></script><script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-62285904-5', 'auto');
  ga('send', 'pageview');

</script>

<div class="page-loader">
    <div class="loader">
      <div class="circle circle-1"></div>
      <div class="line line-1"></div>
      <div class="circle circle-2"></div>
      <div class="line line-2"></div>
      <div class="circle circle-3"></div>
      <div class="line line-3"></div>
      <div class="circle circle-4"></div>
      <div class="line line-4"></div>
      <div class="circle circle-5"></div>
    </div>
</div> 


    <!-- Navigation -->
    

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand topnav nav-local"  href="javascript:void(0)" data-href="home"><img src="{% static 'alplora/img/logo_black.svg'%}"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-language">
                  <div class="select-language">
                      <i class="fa fa-globe" aria-hidden="true"></i>
                      <span>{{language_activate}}</span>
                  </div>
                  <div class="drop-language">
                    <a class="nav-local" href="/{{list_language.code}}/alplora" >{{list_language.name}}</a>
                  </div>
                </li>
                <li>
                    <a class="nav-local" href="javascript:void(0)" data-href="about">{% trans 'About' %}</a>
                </li>
               <li>
                    <a class="nav-local" href="javascript:void(0)" data-href="why" >{% trans 'Why Alplora?' %}</a>
                </li>
                <li>
                    <a class="nav-local" href="javascript:void(0)" data-href="usecase" >{% trans 'Usecase' %}</a>
                </li>
<!--                 <li>
                    <a class="nav-local" href="javascript:void(0)" data-href="testimonial" >{% trans 'Testimonials' %}</a>
                </li>
 -->                <li>
                    <a class="nav-local" href="javascript:void(0)" data-href="contact" >{% trans 'Contact' %}</a>
                </li>
<!--                 <li>
                    <a href="{% url 'alplora:login' %}">{% trans 'Login' %}</a>
                </li>        -->     
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Header -->
    

<a name="about"></a>
<section class="intro-header" id="home">
     <!-- Add images backgrounds url(url-image); -->
     <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-1.png' %});"></div>
     <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-2.png' %});"></div>
     <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-3.png' %});"></div>
     <div class="background bg-slide" style="background-image: url({% static 'alplora/img/banner-4.png' %});"></div>

     <div class="intro-message">

        <img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}">
            <h1>{% trans 'Find your herd anytime, anywhere' %}</h1>
            <h3>{% trans 'Perfect fit for Swiss Alps' %}</h3>
            <hr class="intro-divider">
         <!-- <ul class="list-inline intro-social-buttons">
                <li>
                    <a href="#how" class="btn btn-default btn-lg"><i class="#Services"></i> <span class="network-name">how it works</span></a>
                </li>
                <li>
                    <a href="#own" class="btn btn-default btn-lg page-scroll"><span class="network-name">Let me start</span></a>
                </li>
            </ul> -->
       </div>


      <div class="arrow-down">
        <a class="nav-local" href="javascript:void(0)" data-href="about">
          <i class="glyphicon glyphicon-menu-down"></i>
        </a>
      </div>
      <div class="background backcground-cover" ></div>
</section>
<!-- /.intro-header -->
<section id="about" class="pt-70">
      <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center wow fadeInDown">
        <h2 class="section-heading">{% trans 'What is Alplora?' %}</h2>
        <h3 class="section-subheading">{% trans 'Alplora is an animal tracker made for outdoor grazing animals in Swiss Alps.' %}<p></p> 
{% trans 'Alplora is just like a cattle bell, but much better.' %}<p></p>
          </h3>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="0.5s">
          <img src="{% static 'alplora/img/missing.svg'%}" data-replaced="hoimg/services/hosting.png" class="img-responsive img-toggle" alt="">
          <div class="team-member-caption inline-block">
        <h4 class="portfolio-caption">{% trans 'LOST' %}</h4>
        <p>&nbsp;</p>
          <p >{% trans 'When an animal gets separated from the herd and is lost.' %}</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="1s">
          <img src="{% static 'alplora/img/wolf.svg'%}" data-replaced="img/services/configuration.png" class="img-responsive img-toggle" alt="">
          <div class="team-member-caption inline-block">
        <h4 class="portfolio-caption">{% trans 'WOLF' %}</h4>
        <p>&nbsp;</p>
        <p >{% trans 'When a wolf gets close to the herd.' %}</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="1.5s">
          <img src="{% static 'alplora/img/injured.svg'%}"  data-replaced="img/services/linux.png" class="img-responsive img-toggle cursor-pointer" alt="">
          <h4 class="portfolio-caption">{% trans 'INJURED' %}</h4>
          <p>&nbsp;</p>
          <p >{% trans 'When one of the animals is hurt.' %}</p>
         
        </div>
      </div>
    </div>
    </div></section>
    <section id="whatis">
      <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center wow fadeInDown">
        <h2 class="section-heading">{% trans 'How does Alplora track my animals?' %}</h2>
        <h3 class="section-subheading">{% trans 'Each animal will be wearing a small tracker,<P></P>and the tracker will be sending a signal every 30 to 60 minutes.' %}
          </h3>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="0.5s">
          <img src="{% static 'alplora/img/apps.svg'%}" data-replaced="hoimg/services/hosting.png" class="img-responsive img-toggle" alt="">
          <div class="team-member-caption inline-block">
        <h4 class="portfolio-caption">{% trans 'Access app' %}</h4>
        <p>&nbsp;</p>
        <p>{% trans 'You can see the animal locations on a map by logging into our Alplora app.' %}</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="1s">
          <img src="{% static 'alplora/img/alarm.svg'%}" data-replaced="img/services/configuration.png" class="img-responsive img-toggle" alt="">
          <div class="team-member-caption inline-block">
        <h4 class="portfolio-caption">{% trans 'Get an alarm' %}</h4>
        <p>&nbsp;</p>
        <p>{% trans 'When certain signals for danger are detected, Alplora sends an alarm to you.' %}</p>
        <p class="text-muted">&nbsp;</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="team-member wow fadeInDown" data-wow-delay="1.5s">
          <img src="{% static 'alplora/img/arms.svg'%}"  data-replaced="img/services/linux.png" class="img-responsive img-toggle cursor-pointer" alt="">
          <h4 class="portfolio-caption">{% trans 'Find your animal' %}</h4>
          <p class="text-muted">&nbsp;</p>
          <div class="team-member-caption inline-block">
        <p>{% trans 'You can locate the animal in trouble on the realtime map and can take actions for keeping the animal safe.' %}</p>
          </div>
        </div>
      </div>
    </div>
    </div></section>
    <section id="why" class="bg-light-gray pt-70">
      <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center wow fadeInDown">
        <h2 class="section-heading">{% trans 'Why Alplora?' %}</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-sm-6 text-center portfolio-item wow fadeInDown" data-wow-delay="0.5s">
        <img src="{% static 'alplora/img/tested.png'%}" class="img-responsive  inline-block" alt="">
        <div class="portfolio-caption inline-block">
          <h4>{% trans 'Perfect fit for Swiss mountains' %}</h4>
          <p>&nbsp;</p>
          <p class="team-member">{% trans 'Alplora is made and tested for Swiss Alps. It is a perfect fit for Swiss environment.' %}</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 text-center portfolio-item wow fadeInDown" data-wow-delay="1s">
        <img src="{% static 'alplora/img/cow.png'%}" class="img-responsive inline-block" alt="">
        <div class="portfolio-caption inline-block">
          <h4>{% trans 'Energy efficient' %}</h4>
          <p>&nbsp;</p>
          <p class="team-member">{% trans 'Alplora uses the latest wireless technology, our batteries last the whole alp season.' %}</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 text-center portfolio-item wow fadeInDown" data-wow-delay="1.5s">
        <img src="{% static 'alplora/img/love.png'%}" class="img-responsive inline-block" alt="">
        <div class="portfolio-caption inline-block">
          <h4>{% trans 'Made with love' %}</h4>
          <p>&nbsp;</p>
          <p class="team-member">{% trans 'With a lot of love and respect for Swiss agriculture and nature, Alplora is made by a Swiss company.' %}</p>
        </div>
      </div>
    </div>
      </div>

    </section>
    <!-- Page Content -->
    <div class="content-section-b" id="usecase">
        <div class="container">
            <div class="row">
              <div class="col-lg-12 wow text-center fadeInDown">
        <h2 class="section-heading">{% trans 'Who needs Alplora?' %}</h2>
                      <div class="clearfix text-center"></div> 
                
                </div>  
            </div>
        </div><!-- /.container -->
    </div><!-- /.option 1 -->

    <!-- Your Infrastructure -->
    
<div class="content-section-a" id="own">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">{% trans ' Are your animals...' %}</h2>
                <ul class="fa-ul">
                <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
                <p class="lead">{% trans 'sheep, goats, cows or llamas living freely in the Alps?' %}</p></li>
                <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
<p class="lead">{% trans 'wearing  bells?'%}</p></li>
<li><i class="fa-li fa fa-check-square-o fa-lg"></i> 
<p class="lead">{% trans 'sometimes getting confused and going too far away from where they are supposed to be?'%}</p></li>
               </ul>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="{% static 'alplora/img/animals.svg'%}" alt="">
            </div>
        </div>

    </div>
    <!-- /.container -->
</div>

    <!-- Our Infrastructure -->
    

<a name="our"></a>
<div class="content-section-b">

    <div class="container">

        <div class="row">
            <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">{% trans 'Do you...'%}</h2>
                <ul class="fa-ul">
                <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
                <p class="lead">{% trans 'have animals which are staying outdoor during some time of the year?'%}</p></li>
                <li><i class="fa-li fa fa-check-square-o fa-lg"></i>
<p class="lead">{% trans 'want to get an alarm when your animal is hurt, or in danger?'%}</p></li>
<li><i class="fa-li fa fa-check-square-o fa-lg"></i>
<p class="lead">{% trans 'want to see where your animals are on your cell phone map?'%}</p></li>
<li><i class="fa-li fa fa-check-square-o fa-lg"></i>
<p class="lead">{% trans 'want to make sure 24/7 that your animals are safe?'%}</p></li>
</ul>
            </div>
            <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                <img class="img-responsive" src="{% static 'alplora/img/doyou.svg'%}" alt="">
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>

<!-- <section id="testimonial" class="bg-light-gray">
      <div class="container">
    <div class="row">
      <div class="col-sm-16 text-center center-block wow fadeInDown">
        <h2 class="section-heading">{% trans 'Testimonials'%}</h2>
        <h3 class="text-muted">{% trans 'What our customers say'%}</h3>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-10 col-sm-offset-1 wow fadeInDown ">
       
        <div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="10000">
         
          <ol class="carousel-indicators">
        <li data-target="#carousel-recommendation-ungleich" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-recommendation-ungleich" data-slide-to="1"></li>
        <li data-target="#carousel-recommendation-ungleich" data-slide-to="2"></li>
          </ol>

         
          <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="center-block img-client img-responsive" src="{% static 'alplora/img/berg.png'%}" />
          <p class="carousel-text text-muted text-center">
            {% trans '“Alplora is an innovation in looking after my cows. I can check where my cows have been in the higher mountain all day while doing other works at the farm down in the village. I can do more for keeping my cows safe thanks to Alplora.”'%}
          </p>
          <p class="text-center">
            <strong>- Walter Hefti</strong>, {% trans 'Farmer in canton Glarus'%}
          </p>
        </div>
        <div class="item">
          <img class="center-block img-client img-responsive" src="{% static 'alplora/img/berg.png'%}" />
          <p class="carousel-text text-muted text-center">
            {% trans '"Alplora is exactly what I was waiting for. I have lost my sheep almost every year. Finally I have a way when I want to locate them."'%}
          </p>
          <p class="text-center">
            <strong> - Laura Mueller</strong>, {% trans 'Owner of 50 sheep '%}
          </p>
        </div>
        <div class="item">
          <img class="center-block img-client img-responsive" src="{% static 'alplora/img/berg.png'%}" />
          <p class="carousel-text text-muted text-center">
            {% trans '"I have a farm down all the way down in the village and y goats are always freely grazing in the Alps. There are times that I am worried about them but have difficulties to make my way up, because I have other animals to look after. With Alplora, now I can easily do both."'%}
          </p>
          <p class="text-center">
            <strong>- Peter Baumann</strong>,
            {% trans 'Farmer at Berner Oberland'%}
          </p>
        </div>
          </div>
        </div>
        
      </div>
    </div>
      </div>
    </section> -->
    <div class="intro-header-1" id="contact">
        <div class="container">

            <div class="row">
                <div class="col-lg-12">
    
                    <div class="intro-message">
                      <h1>{% trans 'How do I get Alplora?'%}</h1>
                        <h3>{% trans 'Click the button below and leave us your contact.'%}<p></p>{% trans 'Team Alplora will contact you and visit you with a tracking device.'%}</h3>
                        <hr class="intro-divider">
                        <a href="{% url 'alplora:contact' %}" data-toggle="modal" data-target="#modal" class="btn btn-default
                            btn-lg"><i class="#Services"></i> <span
                                class="network-name"  >{% trans 'Contact'%}</span></a>
                           
                        </ul>
                    </div>
                </div>
            </div>

        </div>

        <!-- CONTACT FORM MODAL  -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
        </div>

        <!-- /.container -->

    </div>


</div>

    <!-- Footer -->
    

<footer>
    <div class="container">
      <div class="row">
            <div class="col-md-6">
               
                <h3>Alplora </h3>
                <p><i class="fa fa-envelope-o"></i>  info@alplora.ch</p>
                <p>In der Au 7 Schwanden 8762</p>
                <p>Switzerland</p>
                 

                <ul class="list-inline">
                    <li>
                        <a href="#">{% trans 'Home'%}</a>
                    </li>
                    <li class="footer-menu-divider">⋅</li>
                    <li>
                        <a href="#about">{% trans 'About'%}</a></li>
                    <li class="footer-menu-divider">⋅</li>
                    <li>
                        <a href="#about">{% trans 'Usecase'%}</a></li>
                    <li>⋅</li>
                    <li>
                        <a href="#about">{% trans 'Why Alplora?'%}</a></li>
                    <li class="footer-menu-divider">⋅</li>
<!--                     <li>
                        <a href="#services">{% trans 'Testimonials '%}</a>
                    </li>
 -->                   
  <!-- <li class="footer-menu-divider">⋅</li> -->
                    <li>
                        <a href="#contact">{% trans 'Contact' %}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 footer-links">
               
               <a href="http://www.ungleich.ch" target="_blank"><img src="{% static 'alplora/img/ungleich_logo.svg'%}"></a>
               <a href="http://www.digitalglarus.ch" target="_blank"> <img src="{% static 'alplora/img/digitalglarus_logo.svg'%}"></a>
               <a href="https://www.adnexo.ch" target="_blank"> <img src="{% static 'alplora/img/adnexo_logo.svg'%}"></a>
             
            </div>
        </div>
         <p class="copyright text-muted small">Copyright © Alplora 2017. All Rights Reserved</p>
    </div>
</footer>

   
    

    <!-- Lodash -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.min.js"></script>

    <!-- jQuery -->
    <script src="{% static 'alplora/js/jquery.js' %}"></script>

    <!-- Pricing -->
    <script src="{% static 'alplora/js/pricing.js' %}"></script>

    <!-- Images loaded -->
    <script type="text/javascript" src="{% static 'alplora/js/imagesloaded.pkgd.min.js' %}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'alplora/js/bootstrap.min.js' %}"></script>

    <script src="{% static 'alplora/js/main.js' %}"></script>
    
    <script src="{% static 'alplora/js/form.js' %}"></script>

<link rel="stylesheet" href="/static/debug_toolbar/css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css" type="text/css">

<!-- Prevent our copy of jQuery from registering as an AMD module on sites that use RequireJS. -->
<script src="/static/debug_toolbar/js/jquery_pre.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/debug_toolbar/js/jquery_post.js"></script>

<script src="/static/debug_toolbar/js/toolbar.js"></script>

<script type="text/javascript">
$('#modal').on('show.bs.modal', function (event) {
    var modal = $(this)
    $.ajax({
        url: "{% url 'alplora:contact' %}",
        context: document.body
    }).done(function(response) {
        modal.html(response);
    });
});
</script>
</body>
</html>
