templates/Default/homepage/iframe_simple_page.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.     <title>{{ 'widget.simple.title' | trans }}</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7.     <meta name="description" content="{{  'widget.simple.desc' | trans }}"/>
  8.     <style>
  9.         body{
  10.             margin:0;
  11.             padding: 0;
  12.             font-family: arial, helvetica, sans-serif;
  13.         {% if app.request.query.get('bgImgLink') %}
  14.             background-image: url("{{  app.request.query.get('bgImgLink')  }}");
  15.             background-repeat: no-repeat;
  16.             background-size: cover;
  17.             background-position: 50%;
  18.         {% else %}
  19.             background-color: #ffffff;
  20.         {% endif %}
  21.             height: 100%;
  22.             width: 100%;
  23.         }
  25.         .title {
  26.         {% if app.request.query.get('headerType') == "true" %}
  27.             background-color: transparent;
  28.             color: #000000;
  29.         {% else %}
  30.             background-color: rgba(0,0,0,0.6) ;/*#7952b3;*/
  31.             color: #ffffff;
  32.         {% endif %}
  33.             margin: 0;
  34.             padding: 15px 0;
  35.             text-align: center;
  37.         }
  39.         form{
  40.             padding: 10px;
  41.         }
  43.         .field input{
  44.             background: #fff url({{ asset('images/widget/widget-departure.png') }}) no-repeat 3px 50%;
  45.             height:30px;
  46.             margin: 0 0 10px 0;
  47.             border: 1px solid #7e9eab;
  48.             width: 100%;
  49.             text-indent: 25px;
  50.             border-radius: 3px;
  51.             width: -webkit-fill-available;
  52.             line-height: 1.5;
  53.             color: #495057;
  54.         }
  56.         #arr{
  57.             background: #fff url({{ asset('images/widget/widget-arrival.png') }}) no-repeat 3px 50%;
  58.         }
  60.         #date{
  61.             text-indent: 11px;
  62.             background: #fff url({{ asset('images/widget/widget-date.png') }}) no-repeat 3px 50%;
  63.         }
  65.         #bt{
  66.             display: block;
  67.             width: 100%;
  68.             color: {% if app.request.query.get('buttonColor') %} #{{ app.request.query.get("buttonColor") }}{% else %} #ffffff {% endif %}; /*#113c51;/*#7952b3;*/
  69.             /*border: 1px solid #113c51;*/ /*#7952b3;*/
  70.             padding: 7px 0;
  71.             text-align: center;
  72.             border-radius: 6px;
  73.             text-decoration: none;
  74.             background-color: {% if app.request.query.get('buttonBgColor') %} #{{ app.request.query.get("buttonBgColor") }}{% else %} #2ecc71 {% endif %};
  75.             font-weight: bold;
  76.         }
  78.         #bt:hover{
  79.             -webkit-animation: bounce 0.6s ;
  80.         }
  82.         @-webkit-keyframes bounce {
  83.             40% {-webkit-transform: translateY(3px) }
  84.             80% {-webkit-transform: translateY(-1px) }
  85.             100% {-webkit-transform: translateY(0)}
  86.         }
  89.         #bt-hidden-submit{
  90.             display: none;
  91.         }
  93.         img{
  94.             margin: 0 auto;
  95.             display: block;
  96.             width: 100%;
  97.             max-width: 300px;
  98.         }
  100.         .form-container{
  101.             height: 100%;
  102.             width: 100%;
  103.         }
  105.     </style>
  106.     <script type="text/javascript"
  107.             src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{ constant('App\\Service\\MapsApi::GMAPSKEY_JSAUTOCOMPLETE') }}&language={{ app.request.locale | slice(0,2) }}"></script>
  108. </head>
  109. <body>
  110. <p class="title">
  111.     {% if app.request.query.get("widgetTitle") %}
  112.         <strong>{{ app.request.query.get("widgetTitle") }}</strong>
  113.     {% else %}
  114.         <strong>{{ 'widget.simple.txt.0' | trans }}</strong>
  115.         <br />
  116.         <strong>{{ 'widget.simple.txt.1' | trans }}</strong>
  117.     {% endif %}
  118. </p>
  119. <div class="form-container">
  120.     <form action="{{ path('widget_iframe2_post') }}" method="get" target="_blank" name="form">
  121.         <div class="field">
  122.             {#<label>Départ</label>#}
  123.             <input type="text" id="dep" name="dep" placeholder="{{ 'widget.simple.dep' | trans }}" value="{{ app.request.query.get('dep') }}" required/>
  124.             <input type="hidden" id="depLat" name="depLat" value="{{ app.request.query.get('depLat') }}"/>
  125.             <input type="hidden" id="depLng" name="depLng" value="{{ app.request.query.get('depLng') }}"/>
  126.         </div>
  127.         <div class="field">
  128.             {#<label>Arrivée</label>#}
  129.             <input type="text" id="arr" name="arr" placeholder="{{ 'widget.simple.arr' | trans }}" value="{{ app.request.query.get('arr') }}" required/>
  130.             <input type="hidden" id="arrLat" name="arrLat" value="{{ app.request.query.get('arrLat') }}"/>
  131.             <input type="hidden" id="arrLng" name="arrLng" value="{{ app.request.query.get('arrLng') }}"/>
  132.         </div>
  133.         <div class="field">
  134.             {#<label>Date</label>#}
  135.             <input type="date" id="date" name="date"/>
  136.         </div>
  137.         <div class="field">
  138.             <a href="#" value="Rechercher" id="bt" onClick="document.getElementById('bt-hidden-submit').click(); return false;">{{ 'widget.simple.button' | trans }}</a>
  139.             <input type="submit" id="bt-hidden-submit"/>
  140.         </div>
  141.     </form>
  142.     <img id="imgPoweredBy" src="{{asset('images/widget/widget-logo-multimodal.png')}}"  onClick="document.getElementById('bt-hidden-submit').click(); return false;" />
  143. </div>
  145. <script>
  146.     {% if app.request.query.get('bgImgLink') %}
  147.         document.getElementById('imgPoweredBy').remove(); //TODO do that in php, why using js?
  148.         // document.getElementsByClassName("form-container")[0].style.padding = "20px 0 50px 0"; // TODO use style class instead, usefull?
  149.     {% endif %}
  150.     function initializeAutocomplete(id) {
  151.         var element = document.getElementById(id);
  152.         var autocomplete = new google.maps.places.Autocomplete(element, {types: ['(cities)']});
  153.         google.maps.event.addListener(autocomplete, 'place_changed', function(){
  154.             place = this.getPlace();
  155.             document.getElementById(id+"Lat").value= place.geometry.location.lat();
  156.             document.getElementById(id+"Lng").value= place.geometry.location.lng();
  157.         });
  159.     }
  161.     google.maps.event.addDomListener(window, 'load', function () {
  162.         initializeAutocomplete('dep');
  163.         initializeAutocomplete('arr');
  164.     });
  165. </script>
  167. </body>
  168. </html>