JourneyJoker/templates/frontend/index.html
Klaus-Uwe Mitterer 41d71d313f Preparing a bunch of views for partners
Adding superior ratings
Use Nominatim for location lookups
Implement hotel registration
2021-04-11 16:19:43 +02:00

305 lines
20 KiB
HTML

{% extends "frontend/base.html" %}
{% load static %}
{% load i18n %}
{% load testimonials %}
{% load dbsetting %}
{% load offeroptions %}
{% block "content" %}
<!--========================= FLEX SLIDER =====================-->
<section class="flexslider-container" id="flexslider-container-1">
<div class="flexslider slider" id="slider-1">
<ul class="slides">
<li class="item-1" style="background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url({% static "frontend/images/stgilgen.jpg" %}) 50% 0%;background-size:cover;
height:100%;">
<div class=" meta">
<div class="container">
<h2>{% trans "Willkommen bei JourneyJoker" %}</h2>
<h1>{% trans "Mein Urlaub nach Maß" %}</h1>
<a href="#" class="btn btn-default">{% trans "Wie geht das?" %}</a>
</div><!-- end container -->
</div><!-- end meta -->
</li><!-- end item-1 -->
<!--<li class="item-2" style="background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url({% static "frontend/images/homepage-slider-1.jpg" %}) 50% 0%;background-size:cover;
height:100%;">
<div class=" meta">
<div class="container">
<h2>Discover</h2>
<h1>Australia</h1>
<a href="#" class="btn btn-default">View More</a>
</div>
</div>
</li>-->
</ul>
</div><!-- end slider -->
<div class="search-tabs" id="search-tabs-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item active"><div style="background-color: white;" class="nav-link" onclick="return false;" href="#"><span><i class="fa fa-building"></i></span><span class="d-md-inline-flex d-none st-text">Angebote einholen</span></div></li>
</ul>
<div class="tab-content">
<div id="flights" class="tab-pane in active">
<form method="POST" action="{% url "auction:create_inquiry" %}">
{% csrf_token %}
<div class="row">
<div class="col-12 col-md-12 col-lg-5 col-xl-4">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input id="id_destination_name" name="destination_name" type="text" class="form-control" placeholder="{% trans "Zielort" %}" >
<input id="id_destination_lat" name="destination_lat" type="text" style="display: none;">
<input id="id_destination_lon" name="destination_lon" type="text" style="display: none;">
<i class="fa fa-map-marker"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input id="id_budget" name="budget" type="number" step="1" class="form-control" placeholder="{% trans "Budget" %}" >
<i class="fa fa-euro-sign"></i>
</div>
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-5 col-xl-4">
<div class="row">
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input id="id_arrival" name="arrival" type="text" class="form-control dpd1" placeholder="{% trans "Anreise" %}" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group right-icon">
<select id="id_min_nights" name="min_nights" class="form-control">
<option value="0" selected>{% trans "Mindestdauer" %}</option>
<option value="0">Egal!</option>
<option value="1">1 Nacht</option>
<option value="2">2 Nächte</option>
<option value="3">3 Nächte</option>
<option value="4">4 Nächte</option>
<option value="5">5 Nächte</option>
<option value="6">6 Nächte</option>
<option value="7">7 Nächte</option>
<option value="8">8 Nächte</option>
<option value="9">9 Nächte</option>
<option value="10">10 Nächte</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-2 col-xl-2">
<div class="row">
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group right-icon">
<select id="id_adults" name="adults" class="form-control">
<option value="1" selected>{% trans "Erwachsene" %}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div>
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group right-icon">
<select id="id_children" name="children" class="form-control">
<option value="0" selected>{% trans "Kinder" %}</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-12 col-xl-2 search-btn">
<button class="btn btn-orange">{% trans "Los!" %}</button>
</div><!-- end columns -->
</div><!-- end row -->
</form>
</div><!-- end flights -->
</div><!-- end tab-content -->
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end search-tabs -->
</section><!-- end flexslider-container -->
<!--=============== HOTEL OFFERS ===============-->
<section id="hotel-offers" class="section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-heading">
<h2>Teilnehmende Hotels</h2>
<hr class="heading-line" />
</div><!-- end page-heading -->
<div class="owl-carousel owl-theme owl-custom-arrow" id="owl-hotel-offers">
<div class="item">
<div class="main-block hotel-block">
<div class="main-img">
<a href="#">
<img src="{% static "frontend/images/hotel-1.jpg" %}" class="img-fluid" alt="hotel-img" />
</a>
<div class="main-mask">
<ul class="list-unstyled list-inline offer-price-1">
<li class="list-inline-item price">12<span class="divider">|</span><span class="pkg">Buchungen diese Woche</span></li>
<li class="list-inline-item rating">
{% autoescape off %}{% stars 5 1 "orange" %}{% endautoescape %}
{% autoescape off %}{% hearts 5 "red" %}{% endautoescape %}
</li>
</ul>
</div><!-- end main-mask -->
</div><!-- end offer-img -->
<div class="main-info hotel-info">
<div class="arrow">
<a href="#"><span><i class="fa fa-angle-right"></i></span></a>
</div><!-- end arrow -->
<div class="main-title hotel-title">
<a href="#">Herta Berlin Hotel</a>
<p>1020 Wien</p>
</div><!-- end hotel-title -->
</div><!-- end hotel-info -->
</div><!-- end hotel-block -->
</div><!-- end item -->
</div><!-- end owl-hotel-offers -->
<div class="view-all text-center">
<a href="#" class="btn btn-orange">{% trans "Alle anzeigen" %}</a>
</div><!-- end view-all -->
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end container -->
</section><!-- end hotel-offers -->
<!--==================== HIGHLIGHTS ====================-->
<section id="highlights" class="section-padding back-size">
<div class="container">
<div class="row">
<div class="col-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
<div class="highlight-box">
<div class="h-icon">
<span><i class="fa fa-user-astronaut"></i></span>
</div><!-- end h-icon -->
<div class="h-text">
<span class="numbers">2496</span>
<p>{% trans "zufriedene Kunden" %}</p>
</div><!-- end h-text -->
</div><!-- end highlight-box -->
</div><!-- end columns -->
<div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
<div class="highlight-box">
<div class="h-icon">
<span><i class="fa fa-concierge-bell"></i></span>
</div><!-- end h-icon -->
<div class="h-text cruise">
<span class="numbers">1906</span>
<p>{% trans "teilnehmende Unterkünfte" %}</p>
</div><!-- end h-text -->
</div><!-- end highlight-box -->
</div><!-- end columns -->
<div class="col-12 col-md-4 col-lg-4 col-xl-4 d-flex justify-content-center">
<div class="highlight-box">
<div class="h-icon">
<span><i class="fa fa-compass"></i></span>
</div><!-- end h-icon -->
<div class="h-text taxi">
<span class="numbers">2033</span>
<p>{% trans "gebuchte Reisen" %}</p>
</div><!-- end h-text -->
</div><!-- end highlight-box -->
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end container -->
</section><!-- end highlights -->
<!--==================== TESTIMONIALS ====================-->
<section id="testimonials" class="section-padding back-size">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-heading white-heading">
<h2>{% trans "Kundenmeinungen" %}</h2>
<hr class="heading-line" />
</div><!-- end page-heading -->
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<div class="carousel-inner text-center">
{% testimonials as test %}
{% for t in test %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<blockquote>{{ t.text }}</blockquote>
<div class="rating">
{% autoescape off %}{% stars t.stars %}{% endautoescape %}
{% autoescape off %}{% hearts t.hearts %}{% endautoescape %}
</div>
<small>{{ t.name }}</small>
</div><!-- end item -->
{% endfor %}
</div><!-- end carousel-inner -->
<ol class="carousel-indicators mx-auto">
{% for t in test %}
<li data-target="#quote-carousel" data-slide-to="{{ forloop.counter0 }}" class="active"><img src="{{ t.image.url }}" class="img-fluid d-block" alt="client-img"></li>
{% endfor %}
</ol>
</div><!-- end quote-carousel -->
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end container -->
</section><!-- end testimonials -->
{% endblock %}
{% block "scripts" %}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={% dbsetting "google.api.key" %}&libraries=places"></script>
<script src="{% static "frontend/js/custom-autocomplete.js" %}"></script>
{% endblock %}