JourneyJoker/templates/frontend/index.html
2020-01-26 11:53:25 +01:00

564 lines
No EOL
40 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 zur großen" %}</h2>
<h1>{% trans "Urlaubs-Umkehrauktion" %}</h1>
<a href="#" class="btn btn-default">{% trans "Was bedeutet 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"><a class="nav-link" href="#flights" data-toggle="tab"><span><i class="fa fa-plane"></i></span><span class="d-md-inline-flex d-none st-text">Flights</span></a></li>-->
<li class="nav-item active"><a 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></a></li>
<!--<li class="nav-item"><a class="nav-link" href="#tours" data-toggle="tab"><span><i class="fa fa-suitcase"></i></span><span class="d-md-inline-flex d-none st-text">Tours</span></a></li>
<li class="nav-item"><a class="nav-link" href="#cruise" data-toggle="tab"><span><i class="fa fa-ship"></i></span><span class="d-md-inline-flex d-none st-text">Cruise</span></a></li>
<li class="nav-item"><a class="nav-link" href="#cars" data-toggle="tab"><span><i class="fa fa-car"></i></span><span class="d-md-inline-flex d-none st-text">Cars</span></a></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_amount" name="amount" 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_first_date" name="first_date" type="text" class="form-control dpd1" placeholder="{% trans "Erster Tag" %}" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input id="id_last_date" name="last_date" type="text" class="form-control dpd2" placeholder="{% trans "Letzter Tag" %}" >
<i class="fa fa-calendar"></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 id="hotels" class="tab-pane">
<form>
<div class="row">
<div class="col-12 col-md-12 col-lg-6 col-xl-5">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group left-icon">
<input type="text" class="form-control dpd1" placeholder="Check In" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-6">
<div class="form-group left-icon">
<input type="text" class="form-control dpd2" placeholder="Check Out" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-6 col-xl-5">
<div class="row">
<div class="col-12 col-md-12 col-lg-4">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Rooms</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-4">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Adults</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-4">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Kids</option>
<option>0</option>
<option>1</option>
<option>2</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-12 col-xl-2 search-btn">
<button class="btn btn-orange">Search</button>
</div><!-- end columns -->
</div><!-- end row -->
</form>
</div><!-- end hotels -->
<div id="tours" class="tab-pane">
<form>
<div class="row">
<div class="col-12 col-md-12 col-lg-3 col-xl-4">
<div class="form-group left-icon">
<input type="text" class="form-control" placeholder="City,Country" />
<i class="fa fa-map-marker"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-3 col-xl-3">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Monat</option>
<option>Jänner</option>
<option>Februrar</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-6 col-xl-3">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Adults</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-6">
<div class="form-group right-icon">
<select class="form-control">
<option selected>Kids</option>
<option>0</option>
<option>1</option>
<option>2</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-12 col-xl-2 search-btn">
<button class="btn btn-orange">Search</button>
</div><!-- end columns -->
</div><!-- end row -->
</form>
</div><!-- end tours -->
<div id="cruise" class="tab-pane">
<form>
<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="Ziel" >
<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_amount" name="amount" type="text" class="form-control" placeholder="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_first_date" name="first_date" type="text" class="form-control dpd1" placeholder="Beginn" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input id="id_last_date" name="last_date" type="text" class="form-control dpd2" placeholder="Ende" >
<i class="fa fa-calendar"></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="form-group right-icon">
<select class="form-control">
<option selected>Adults</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<i class="fa fa-angle-down"></i>
</div>
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-12 col-xl-2 search-btn">
<button class="btn btn-orange">Search</button>
</div><!-- end columns -->
</div><!-- end columns -->
</form>
</div><!-- end cruises -->
<div id="cars" class="tab-pane">
<form>
<div class="row">
<div class="col-12 col-md-12 col-lg-7 col-xl-6">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="form-group left-icon">
<input type="text" class="form-control" placeholder="Country" />
<i class="fa fa-globe"></i>
</div>
</div><!-- end columns -->
<div class="col-md-6 col-lg-4">
<div class="form-group left-icon">
<input type="text" class="form-control" placeholder="City" />
<i class="fa fa-map-marker"></i>
</div>
</div><!-- end columns -->
<div class="col-md-12 col-lg-4">
<div class="form-group left-icon">
<input type="text" class="form-control" placeholder="Location" />
<i class="fa fa-street-view"></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 type="text" class="form-control dpd1" placeholder="Check In" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
<div class="col-6 col-md-6 col-lg-6">
<div class="form-group left-icon">
<input type="text" class="form-control dpd2" placeholder="Check Out" >
<i class="fa fa-calendar"></i>
</div>
</div><!-- end columns -->
</div><!-- end row -->
</div><!-- end columns -->
<div class="col-12 col-md-12 col-lg-12 col-xl-2 search-btn">
<button class="btn btn-orange">Search</button>
</div><!-- end columns -->
</div><!-- end row -->
</form>
</div><!-- end cars -->
</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">$568.00<span class="divider">|</span><span class="pkg">Avg/Night</span></li>
<li class="list-inline-item rating">
<span><i class="fa fa-star orange"></i></span>
<span><i class="fa fa-star orange"></i></span>
<span><i class="fa fa-star orange"></i></span>
<span><i class="fa fa-star orange"></i></span>
<span><i class="fa fa-star lightgrey"></i></span>
</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>From: Scotland</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>
{% autoescape off %}{% stars t.stars %}{% endautoescape %}
<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 %}