templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metas %}
  4.     <meta name="description" content="Encuentra los mejores menús cerca de ti.">
  5.     <meta property="og:title" content="Menu del dia"/>
  6.     <meta property="og:url" content="{{ url(app.request.attributes.get("_route"), app.request.attributes.get("_route_params")) }}"/>
  7.     <meta property="og:description" content="Encuentra los mejores menús cerca de ti.">
  8.     <meta property="og:image" itemprop="image" content="https://menusdeldia.com/uploads/menu.jpg">
  9. {% endblock %}
  10. {% block stylesheets %}
  11.     {{ parent() }}
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
  13. {% endblock %}
  14. {% block javascripts %}
  15.     {{ parent() }}
  16.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
  17. {% endblock %}
  19. {% block title %}Menu del dia
  20. {% endblock %}
  22. {% block body %}
  23.     <div id="image-header" class="position-relative overflow-hidden p-3 p-md-5 text-center">
  24.         <div id="search-header" class="col-md-9 col-lg-8 col-xl-7 col-xxl-6 p-3 p-sm-5 mx-auto my-5 bg-white rounded">
  25.             <h1 class="fs-3 fw-normal">Encuentra tu menú del día</h1>
  26.             <p class="fw-lighter fst-italic">Menús actualizados de restaurantes cerca de tí.</p>
  27.             <div class="search">
  28.                 <i class="fa fa-search"></i>
  29.                 <form action="{{ path('menus') }}" method="post" role="form" enctype="multipart/form-data" class="w-100">
  30.                     <input id="input_address" type="text" class="form-control" placeholder="¿Donde deseas buscar Menú?">
  31.                     <button id="btn-search" class="btn">Ubicación Actual</button>
  32.                     <input id="input_lat" name="latActual" type="hidden">
  33.                     <input id="input_lng" name="lngActual" type="hidden">
  34.                 </form>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <div id="background-header" class="position-relative overflow-hidden p-3 p-lg-5 text-center">
  39.         <div class="row col-lg-9 col-xl-7 p-lg-2 mx-auto my-5">
  40.             <div class="col-sm-6 col-lg-7">
  41.                 <h2 class="fs-4 fw-bold">Encuentra tu menú preferido tambien desde el móvil</h2>
  42.                 <p class="fw-lighter fst-italic">Ya disponible la app de Menus del día para iOS y Android.</p>
  43.                 <div class="row col-12">
  44.                     <div class="col-6">
  45.                         <a href="#" title="Descargar App Menus del día">
  46.                             <img class="img-responsive" src="/img/app-ios-banner.png" alt="Iphone Android App Menus del día" width="80%">
  47.                         </a>
  48.                     </div>
  49.                     <div class="col-6">
  50.                         <a href="#" title="Descargar App Menus del día">
  51.                             <img class="img-responsive" src="/img/app-android-banner.png" alt="Iphone Android App Menus del día" width="80%">
  52.                         </a>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.             <div class="col-sm-6 col-lg-5 mt-5 m-sm-0">
  57.                 <a href="#" title="Descargar App Menus del día">
  58.                     <img class="img-responsive" src="/img/app-iphone-android.png" alt="Iphone Android App Menus del día" width="50%">
  59.                 </a>
  60.             </div>
  61.         </div>
  62.     </div>
  63. {% endblock %}
  64. {% block postjavascripts %}
  65.     {{ parent() }}
  66.     <script src="https://maps.googleapis.com/maps/api/js?key={{ google_key }}&libraries=places"></script>
  67.     <!-- parse-ignore-start -->
  68.     <script>
  69.         $(document).ready(function () {
  71.             $("#btn-search").click(function() {
  72.                 $("form").submit();
  73.             });  
  74.             
  75.             var placeSearch, autocomplete;
  76.             var componentForm = {
  77.                 street_number: 'short_name',
  78.                 route: 'long_name',
  79.                 locality: 'long_name',
  80.                 administrative_area_level_1: 'short_name',
  81.                 country: 'long_name',
  82.                 postal_code: 'short_name'
  83.             };
  85.             var element1 = $("[id*=_address]");
  86.             var element2 = $("[id*=_lat]");
  87.             var element3 = $("[id*=_lng]");
  88.             var input_direccion;
  89.             var input_lng;
  90.             var input_lat;
  92.             if (element1[0]) {
  93.                 input_direccion = element1[0].id;
  94.             }
  95.             if (element2[0]) {
  96.                 input_lat = element2[0].id;
  97.             }
  98.             if (element3[0]) {
  99.                 input_lng = element3[0].id;
  100.             }
  102.             if (input_direccion != null) {
  103.                 autocomplete = new google.maps.places.Autocomplete((document.getElementById(input_direccion)), {types: ['geocode']});
  104.                 autocomplete.addListener('place_changed', fillInAddress);
  105.                 autocomplete.addListener('place_changed', function () {                    
  106.                     var place = autocomplete.getPlace();
  107.                     if (!place.geometry) {
  108.                         window.alert("Autocomplete's returned place contains no geometry");
  109.                         return;
  110.                     }
  111.                     var address = '';
  112.                     if (place.address_components) {
  113.                         address = [
  114.                             (place.address_components[0] && place.address_components[0].short_name || ''),
  115.                             (place.address_components[1] && place.address_components[1].short_name || ''),
  116.                             (place.address_components[2] && place.address_components[2].short_name || '')
  117.                         ].join(' ');
  118.                     }
  119.                 });
  120.             }
  122.             function fillInAddress() {
  123.                 // Get the place details from the autocomplete object.
  124.                 var place = autocomplete.getPlace();
  125.                 document.getElementById(input_lat).value = place.geometry.location.lat();
  126.                 document.getElementById(input_lng).value = place.geometry.location.lng();
  127.                 $("form").submit();
  128.             }            
  129.         });
  130.     </script>
  131.     <!-- parse-ignore-end -->
  132. {% endblock %}