Template source: trip.html

{% load i18n %} {% load thumbnail %} <!DOCTYPE html> <html lang="en" ng-app="response_angular_app"> <head> <meta charset="UTF-8"> {% include 'meta/meta.html' %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RESPONSible Travel Peru</title> <base href="/"/> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K69MP2Q');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K69MP2Q" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> {% include 'stylesheets.html' %} </head> <body style="padding-top: 60px;"> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=105080416190561'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End Trustbox script --> {% include "internal_navbar.html" %} <div class="carousel fade-carousel slide" style="padding: 0 0px 0px 0px;" data-ride="carousel" data-interval="3000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> {% for header_image in header_images %} {% if forloop.counter == 1 %} <div class="item slides active"> <div class="slide-{{ forloop.counter }}" style="background-image: url('{{ header_image.image.url }}');"></div> <div class="hero"> <hgroup> <h1>{{ trip.title }}</h1> </hgroup> </div> </div> {% else %} <div class="item slides"> <div class="slide-{{ forloop.counter }}" style="background-image: url('{{ header_image.image.url }}');"></div> <div class="hero"> <hgroup> <h1>{{ trip.title }}</h1> </hgroup> </div> </div> {% endif %} {% endfor %} {% comment %} <div class="item slides active"> <div class="slide-1" style="background-image: url('{{ header_image.image.url }}');"></div> <div class="hero"> <hgroup> <h1>{{ trip.title }}</h1> </hgroup> </div> </div> <div class="item slides"> <div class="slide-2" style="background-image: url('{{ header_image.image.url }}');"></div> <div class="hero"> <hgroup> <h1>{{ trip.title }}</h1> </hgroup> </div> </div> <div class="item slides"> <div class="slide-3" style="background-image: url('{{ header_image.image.url }}');"></div> <div class="hero"> <hgroup> <h1>{{ trip.title }}</h1> </hgroup> </div> </div> {% endcomment %} </div> </div> {% comment %} <div class="bg hidden-xs" style="background: url('{{ header_image.image.url }}') no-repeat center center;position: fixed;width: 100%;height: 350px; /*same height as jumbotron */top:0;left:0;z-index: -1;"></div> height: 350px; <div class="jumbotron hidden-xs" style="height: 350px;color: white;text-shadow: #444 0 1px 1px; background:transparent;padding-top: 10px;"> </div> {% endcomment %} <div class="container-fluid removePaddingLeft removePaddingRight"> <div class="row"> <div class="col-md-12 removePaddingLeft removePaddingRight"> <div class="row"> <div class="col-md-8"> <br> <div class="container-fluid"> <div class="hidden-lg" style="padding-top:20px"></div> <div class="col-md-12"> <div class="col-md-12"> <p style="font-size: 30px"><strong>{{ trip.title }}</strong></p> <div style="font-size: 20px"> {{ trip.long_description|safe }} </div> <img style='float:left;width:60px;height:60px; margin-right:10px;' src="{{ trip_designer_image.image.url }}"/> <br> <p class="regularResponseDescription"><strong>Trip designed by Travel Expert <a href="/specialist/{{ trip_designer.id }}/">{{ trip_designer.name }}</a></strong> </p> <br> </div> </div> </div> </div> <div class="col-md-4 well"> <p class="regularResponseDescription"><strong><span class="aboveHeaderText"> {% trans "per person from" %}</span> {{ trip.price_string }} </strong></p> <br> <p class="regularResponseDescription"><strong>{{ trip.short_price_description }}</strong></p> <br> <a href="/contact"><button class="btn btn-md response-button" style="display: block; margin: auto;"> <h3 style="color:white"> {% trans "Let's plan your trip" %} </h3></button></a> <div class="hidden-xs" style="min-height: 60px"></div> </div> </div> </div> </div> </div> <div class="container-fluid" style=" color:black"> <div class="row"> <div class="col-md-12"> <h2 style="text-align: center"> {% trans "Images" %}</h2> {% comment %} {% for image in trip_images %} <div class="col-md-3"> <hr> <img class="img-responsive" src="{{ image.image.url }}" alt=""> <h4><a href="#" style="color: black">{{ image.image_description }}</a> </h4> </div> {% endfor %} {% endcomment %} <div id="ImageCarousel" class="carousel slide"> <!-- ImageCarousel items --> <div class="carousel-inner"> {% if first_four_images %} <div class="item active"> <div class="row"> {% for image in first_four_images %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ image.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ image.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if second_four_images %} <div class="item"> <div class="row"> {% for image in second_four_images %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ image.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ image.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if third_four_images %} <div class="item"> <div class="row"> {% for image in third_four_images %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ image.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ image.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if fourth_four_images %} <div class="item"> <div class="row"> {% for image in fourth_four_images %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ image.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ image.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} </div><!--.carousel-inner--> </div><!--.ImageCarousel--> </div> </div> <!-- /.row --> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3 style="text-align: center"> {% trans "Day by Day" %}</h3> <div class="row"> <!-- Page header --> <!-- /Page header --> <!-- Timeline --> <div class="col-md-6"> <div class="timeline"> <div class="line text-muted"></div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> {% for day in itinerary_days %} <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading{{ forloop.counter }}"> <div class="glyphicon-ring icon"><span class="fa fa-calendar glyphicon-bordered"></span> </div> <h4 class="panel-title"> <a {% if forloop.counter != 1 %}class="collapsed" {% endif %} role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}" {% if forloop.counter != 1 %}aria-expanded="false"{% else %}aria-expanded="true"{% endif %} aria-controls="collapse{{ forloop.counter }}"> {{ day.day_description }} </a> </h4> </div> <div id="collapse{{ forloop.counter }}" {% if forloop.counter == 1 %}class="panel-collapse collapse in"{% else %}class="panel-collapse collapse"{% endif %} role="tabpanel" aria-labelledby="heading{{ forloop.counter }}"> <div class="panel-body"> {% comment %} <div class="photoholder"> <img src="http://placehold.it/200x300"/> </div> {% endcomment %} <p class="regularResponseDescription">{{ day.day_itinerary }}</p> </div> </div> </div> {% endfor %} </div> <!-- /Panel --> </div> {% comment %} <div class="row"> {% for day in itinerary_days %} <div class="col-md-2"> <p class="regularResponseDescription"><strong>{{ day.day_description }}</strong></p> </div> <div class="col-md-10"> <p class="regularResponseDescription">{{ day.day_itinerary }}</p> </div> {% endfor %} {% endcomment %} </div> <div class="col-md-6 hidden-xs"> <div class="row"> <div class="col-md-12"> <div id="map"></div> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid" style=" color:black"> <div class="row"> <div class="col-md-12"> <h2 style="text-align: center"> {% trans "Hotels" %}</h2> {% comment %} {% for hotel in hotels %} <div class="col-md-3"> <hr> <img class="img-responsive" src="{{ hotel.images.all.0.image.url }}" alt=""> <h4><a href="#" style="color: black">{{ hotel.name }}</a> </h4> </div> {% endfor %} {% endcomment %} <div id="HotelCarousel" class="carousel slide"> <ol class="carousel-indicators"> {% if first_four_hotels %} <li data-target="#HotelCarousel" data-slide-to="0" class="active"></li> {% endif %} {% if second_four_hotels %} <li data-target="#HotelCarousel" data-slide-to="1"></li> {% endif %} {% if third_four_hotels %} <li data-target="#HotelCarousel" data-slide-to="2"></li> {% endif %} {% if fourth_four_hotels %} <li data-target="#HotelCarousel" data-slide-to="3"></li> {% endif %} </ol> <!-- HotelCarousel items --> <div class="carousel-inner"> {% if first_four_hotels %} <div class="item active"> <div class="row"> {% for hotel in first_four_hotels %} <div class="col-md-3"> {% comment %} <img class="src-image" src="/media/{{ image_object }}"> {% endcomment %} <a href="javascript:void(0)" class="thumbnail"> {% thumbnail hotel.images.all.0.image "285x194" as im %} <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" style="max-width:100%;"> {% endthumbnail %}</a> <h4 class="center" style="text-align: center">{{ hotel.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if second_four_hotels %} <div class="item"> <div class="row"> {% for hotel in second_four_hotels %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ hotel.images.all.0.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ hotel.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if third_four_hotels %} <div class="item"> <div class="row"> {% for hotel in third_four_hotels %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ hotel.images.all.0.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ hotel.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} {% if fourth_four_hotels %} <div class="item"> <div class="row"> {% for hotel in fourth_four_hotels %} <div class="col-md-3"><a href="javascript:void(0)" class="thumbnail"><img src="{{ hotel.images.all.0.image.url }}" alt="Image" style="max-width:100%;"></a><h4 class="center" style="text-align: center">{{ hotel.name }}</h4> </div> {% endfor %} </div><!--.row--> </div><!--.item--> {% endif %} </div><!--.carousel-inner--> <a data-slide="prev" href="#HotelCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#HotelCarousel" class="right carousel-control">›</a> </div><!--.HotelCarousel--> </div> </div> <!-- /.row --> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="col-md-5"> </div> <div class="col-md-2"> <a href="/contact"><button class="btn btn-md response-button" style="display: block; margin: auto;"> <h3 style="color:white"> {% trans "Let's plan your trip" %} </h3></button></a> </div> <div class="col-md-5"> </div> </div> </div> <br> </div> {% include "inspirational_trips_and_blog.html" %} {% include 'newsletter-subscription.html' %} {% include 'footer.html' %} {% include 'javascripts.html' %} <script> // <TRIP MAP CALCULATIONS > $(document).ready(function () { console.log('trip page loaded! '); $('.tripToolTip').tooltipster( {theme: 'tooltipster-noir'} ); $('#HotelCarousel').carousel({ interval: 5000 }); //$('#ImageCarousel').carousel({ //interval: 5000 //}); // <INITIALIZE THE MAP OF THE TRIP> var mapData = {{ javascript_map_information|safe }}; console.log('my mapdata is:', mapData); var centerlat = mapData.map_center.latitude; var centerlon = mapData.map_center.longitude; // set default zoom level var zoomLevel = 2; // initialize map var map = L.map('map').setView([centerlat, centerlon], zoomLevel); // Set up the OSM layer var background = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, opacity: 0.5}).addTo(map); function onEachDot(feature, layer) { console.log('drawing map: ', feature); layer.bindPopup('<table style="width:90px"><tbody><tr><td><div><b></b></div></td><td><div>' + feature.properties.popup + '</div></td></tr></tbody></table>'); } var NewSpiral = { type: "FeatureCollection", features: [] }; for (var i = 0; i < mapData.coordinates.length; ++i) { var g = { "type": "Point", "coordinates": [mapData.coordinates[i].position.longitude, mapData.coordinates[i].position.latitude] }; var p = { "id": i, "popup": mapData.coordinates[i].title, "time": "5" }; NewSpiral.features.push({ "geometry": g, "type": "Feature", "properties": p }); } console.log('new spiral data', NewSpiral); spiralLayer = L.geoJson(NewSpiral, { onEachFeature: onEachDot }); spiralBounds = spiralLayer.getBounds(); map.fitBounds(spiralBounds); spiralLayer.addTo(map); function connectTheDots(data) { var c = []; for (i in data._layers) { var x = data._layers[i]._latlng.lat; var y = data._layers[i]._latlng.lng; c.push([x, y]); } return c; } spiralCoords = connectTheDots(spiralLayer); var spiralLine = L.polyline(spiralCoords).addTo(map) }); </script> </body> </html>