JourneyJoker/templates/frontend/index.html

562 lines
39 KiB
HTML

{% extends "frontend/base.html" %}
{% load static %}
{% load i18n %}
{% load testimonials %}
{% 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">
{% 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="destination" type="text" class="form-control" placeholder="{% trans "Zielort" %}" >
<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 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 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 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 class="form-control">
<option selected>{% trans "Erwachsene" %}</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>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 class="form-control">
<option selected>{% trans "Kinder" %}</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>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 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 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 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 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>Lorem ipsum dolor sit amet, ad duo fugit aeque fabulas, in lucilius prodesset pri. Veniam delectus ei vis. Est atqui timeam mnesarchum at, pro an eros perpetua ullamcorper Lorem ipsum dolor sit amet, ad duo fugit aeque fabulas, in lucilius prodesset pri. Veniam delectus ei vis. Est atqui timeam mnesarchum at, pro an eros perpetua ullamcorper.</blockquote>
<div class="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>
</div><!-- end rating -->
<small>Jon Snow</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 %}