aatish
/
dynamicweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
dynamicweb/alplora/templates/alplora/index.html

586 lines
25 KiB
HTML
Raw Blame History

{% 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="#howitworks" class="btn btn-default btn-lg"><i class="#Services"></i> <span class="network-name" data-toggle="modal" data-target="#exampleModal" >{% trans 'Contact'%}</span></a>
</ul>
</div>
</div>
</div>
</div>
<!-- CONTACT FORM MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">{% trans 'New message'%}</h4>
</div>
<form method="POST" action="">
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'Name:'%}</label>
<input type="text" class="form-control" name="name" placeholder="{% trans 'What is your name ?'%}" id="recipient-name" required>
</div>
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'From:'%}</label>
<input type="text" class="form-control" name="email" placeholder="{% trans 'You email'%}" id="recipient-name" required>
{{ form.email.errors|striptags}}
</div>
<div class="form-group text-left">
<label for="message-text" class="control-label ">{% trans 'Message:'%}</label>
<textarea class="form-control" name="message" placeholder="{% trans 'Leave us your message'%}" id="message-text" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close'%}</button>
<button type="submit" class="btn btn-warning">{% trans 'Send message'%}</button>
</div>
</form>
</div>
</div>
</div>
<!-- SUCCESS MODAL MESSAGE -->
<div class="modal fade bs-example-modal-sm" style="color:black;" id="request-success-message" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">{% trans "Message Sent" %}</h4>
</div>
<div class="modal-body">
<p>{% trans "Thank you, we will contact you as soon as possible" %}</p>
</div>
<div class="modal-footer text-center">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /.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>
<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">
window.onload=function(){
var hash = window.location.hash.substr(1);
if (hash == 'requestformsuccess'){
$('#request-success-message').modal('show');
}
};
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink