templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{% block title %}Tracol{% endblock %}</title>
  6.     <meta name="viewport" content= "width=device-width, initial-scale=1.0">
  7.     {% block stylesheets %}
  8.         {{ encore_entry_link_tags('app') }}
  9.         <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking.css" crossorigin="anonymous" />
  10.         <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  11.         <!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /-->
  12.     {% endblock %}
  13.     {% block javascripts %}
  14.         {{ encore_entry_script_tags('app') }}
  15. {#        <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d4dd1335-1dc0-4d3c-b4c3-49e9043d2e0e" data-blockingmode="auto" type="text/javascript"></script>#}
  16.         <script
  17.                 src="https://code.jquery.com/jquery-3.6.0.min.js"
  18.                 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  19.                 crossorigin="anonymous">
  20.         </script>
  21.         
  22.         <script src="https://unpkg.com/@egjs/flicking/dist/flicking.pkgd.min.js" crossorigin="anonymous"></script>
  23.         <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  24.         <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  25.         <!--script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js" integrity="sha256-c3VbCrdCtTHmXYAuxRT4D0Cy5VC/0zBnXVRIvJiV9xo=" crossorigin="anonymous"></script-->
  26.         
  27.     {% endblock %}
  28. </head>
  29. <body>
  30. {#<script id="CookieDeclaration" src="https://consent.cookiebot.com/d4dd1335-1dc0-4d3c-b4c3-49e9043d2e0e/cd.js" type="text/javascript" async></script>#}
  31. {% for success in app.flashes('success') %}
  32.     <div class="alert alert-success" role="alert">
  33.         <p class="alert-link">{{ success }}</p>
  34.     </div>
  35. {% endfor %}
  36. {% for error in app.flashes('error') %}
  37.     <div class="col-lg-8 mx-auto alert alert-danger" role="alert">
  38.         <p class="alert-link">{{ error }}</p>
  39.     </div>
  40. {% endfor %}
  41. {#
  42. <div class="d-flex flex-column flex-shrink-0 bg-light black" style="width: 4rem;">
  43.     <a  href="https://www.facebook.com/tracolimmobilier/"><i class="fab fa-facebook-f"></i></a>
  44.     <a href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i class="fab fa-linkedin"></i></a>
  45.     <a href="https://www.instagram.com/tracolimmobilier/"><i class="fab fa-instagram"></i></a>
  46. </div>
  47. <div id="div-newsletter" class="d-flex flex-column flex-shrink-0 bg-light orange">
  48.     <a id="text-vertical" class="text-vertical" href="#">NEWSLETTER</a>
  49.     <div id="div-form-newsletter" style="opacity: 0">
  50.         <span id="span-newsletter" style="opacity: 0">Restez informé ! Abonnez-vous à notre newsletter.</span>
  51.         <form action="{{ path('mailchimp') }}" id="form-newsletter" style="display: none">
  52.             <div class="input-group">
  53.                 <input id="input-email" class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
  54.                 <button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
  55.             </div>
  56.         </form>
  57.     </div>
  58. </div>
  59. #}
  60. <nav class="navbar navbar-expand-xl fixed-top homepage">
  61.     <div id="center-nav" class="container-fluid">
  62.         <button class="navbar-toggler"
  63.                 type="button"
  64.                 data-bs-toggle="collapse"
  65.                 data-bs-target="#navbarNav"
  66.                 aria-controls="navbarNav"
  67.                 aria-expanded="false"
  68.                 aria-label="Toggle navigation">
  69.             <span class="navbar-toggler-icon">
  70.                 <i class="fas fa-bars"></i>
  71.             </span>
  72.         </button>
  73.         <a href="{{ path('index') }}" class="tracol-logo">
  74.             <svg xmlns="http://www.w3.org/2000/svg" width="136.339" height="51.127" viewBox="0 0 136.339 51.127">
  75.                 <g id="Groupe_4469" data-name="Groupe 4469" transform="translate(11823.999 14639)">
  76.                     <path id="Tracé_59" data-name="Tracé 59" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-12370.418 -14871.441)" fill="#f6a400"/>
  77.                     <path id="Tracé_60" data-name="Tracé 60" d="M635.6,255.7c0,7.088,3.8,9.434,9.069,9.434a16.669,16.669,0,0,0,6.359-1.2l-.73-4.379a14.765,14.765,0,0,1-5.629,1.147c-2.658,0-4.378-1.2-4.378-5V232.5H635.6Z" transform="translate(-12347.273 -14871.48)"/>
  78.                     <path id="Tracé_61" data-name="Tracé 61" d="M402.171,274.441h4.691V253.593a10.905,10.905,0,0,1,3.962-.573,14.562,14.562,0,0,1,4.117.573l.782-4.378a17.993,17.993,0,0,0-5.108-.626,21.859,21.859,0,0,0-8.444,1.512Zm40.968-12.477c0,8.652,4.639,13.031,12.3,13.031a19.832,19.832,0,0,0,6.984-1.2l-.73-4.378a15.649,15.649,0,0,1-5.942,1.147c-5.525,0-7.922-2.814-7.922-8.912,0-5.264,1.824-8.6,7.557-8.6a12.827,12.827,0,0,1,5.838,1.355l.729-4.482a17.148,17.148,0,0,0-6.672-1.3c-8.339,0-12.144,5.473-12.144,13.343m40.6-.156c0,5.369-1.3,8.756-6.724,8.756-5.473,0-6.828-3.388-6.828-8.756,0-5.316,1.355-8.756,6.828-8.756,5.42,0,6.724,3.44,6.724,8.756m-6.724,13.187c7.975,0,11.467-5.264,11.467-13.187,0-8.131-3.232-13.187-11.467-13.187-8.027,0-11.519,5.316-11.519,13.187,0,8.131,3.284,13.187,11.519,13.187" transform="translate(-12205.374 -14881.258)"/>
  79.                     <path id="Tracé_62" data-name="Tracé 62" d="M349.134,255.7c0,7.088,3.8,9.434,9.069,9.434a16.669,16.669,0,0,0,6.359-1.2l-.73-4.379A14.766,14.766,0,0,1,358.2,260.7c-2.658,0-4.378-1.2-4.378-5V244.778h9.695v-4.43h-9.695V232.5h-4.691Z" transform="translate(-12173.133 -14871.48)"/>
  80.                     <path id="Tracé_63" data-name="Tracé 63" d="M452.277,271.03c-4.851,0-4.851-3.294-4.851-4.165,0-.807.04-3.966,5.213-3.966H463.01v-5.42c0-6.567-4.431-8.809-10.425-8.809a29.621,29.621,0,0,0-7.87,1.146l.678,4.326a20.958,20.958,0,0,1,7.036-1.2c3.7,0,5.942,1.043,5.942,4.066v2.241h-4.9c-6.567,0-10.685,2.137-10.685,7.871,0,5.681,3.8,7.922,10.32,7.922a32.7,32.7,0,0,0,9.9-1.511v-4.091a43.889,43.889,0,0,1-10.733,1.589" transform="translate(-12230.064 -14881.307)"/>
  81.                     <rect id="Rectangle_73" data-name="Rectangle 73" width="1.585" height="8.956" transform="translate(-11803.191 -14596.829)"/>
  82.                     <path id="Tracé_64" data-name="Tracé 64" d="M415.929,339.993h1.5l2.643,4.172,2.628-4.172h1.5v8.956h-1.585v-6.105l-2.448,3.88h-.194l-2.476-3.866v6.092h-1.572Z" transform="translate(-12213.737 -14936.822)"/>
  83.                     <path id="Tracé_65" data-name="Tracé 65" d="M446.472,339.993h1.5l2.643,4.172,2.628-4.172h1.5v8.956h-1.585v-6.105l-2.448,3.88h-.194l-2.476-3.866v6.092h-1.572Z" transform="translate(-12232.305 -14936.822)"/>
  84.                     <path id="Tracé_66" data-name="Tracé 66" d="M480,341.292c-1.808,0-2.113,1.112-2.113,3.058s.334,3.018,2.142,3.018,2.142-1.085,2.142-3.018-.349-3.058-2.171-3.058m-3.7,3.058c0-2.67.736-4.533,3.7-4.533s3.77,1.848,3.77,4.533-.779,4.492-3.741,4.492-3.727-1.822-3.727-4.492" transform="translate(-12250.44 -14936.716)"/>
  85.                     <path id="Tracé_67" data-name="Tracé 67" d="M505.617,345.055v2.42h1.877c1.266,0,1.7-.473,1.7-1.2s-.417-1.224-1.7-1.224Zm0-3.588v2.225h1.711c1.182,0,1.585-.5,1.585-1.126s-.4-1.1-1.585-1.1Zm1.711-1.474c2.309,0,3.185.988,3.185,2.42a1.93,1.93,0,0,1-1.182,1.892,2.046,2.046,0,0,1,1.461,2c0,1.4-1.029,2.642-3.3,2.642h-3.449v-8.956Z" transform="translate(-12267.304 -14936.822)"/>
  86.                     <rect id="Rectangle_74" data-name="Rectangle 74" width="1.586" height="8.956" transform="translate(-11753.034 -14596.829)"/>
  87.                     <path id="Tracé_68" data-name="Tracé 68" d="M543.847,339.993h1.572v7.482h4.117v1.474h-5.689Z" transform="translate(-12291.499 -14936.822)"/>
  88.                     <rect id="Rectangle_75" data-name="Rectangle 75" width="1.586" height="8.956" transform="translate(-11738.931 -14596.829)"/>
  89.                     <path id="Tracé_69" data-name="Tracé 69" d="M581.389,347.475h4.673v1.474h-6.245v-8.957h6.245v1.474h-4.673v2.142h4.117v1.474h-4.117Z" transform="translate(-12313.365 -14936.822)"/>
  90.                     <path id="Tracé_70" data-name="Tracé 70" d="M605.9,341.467V344.1h1.85c1.377,0,1.794-.529,1.794-1.308,0-.834-.417-1.321-1.794-1.321Zm3.255,3.908,2.337,3.574h-1.808l-2.2-3.379H605.9v3.379h-1.572v-8.956h3.421c2.448,0,3.38,1.126,3.38,2.8a2.537,2.537,0,0,1-1.975,2.587" transform="translate(-12328.266 -14936.822)"/>
  91.                 </g>
  92.             </svg>
  93.         </a>
  94.         <button style="background-color: transparent;border-color: transparent; display: none" id="submit-search-mobile" type="submit" data-bs-toggle="modal" data-bs-target="#exampleModal1">
  95.             <svg style="height: 55px;" class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
  96.                 <g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
  97.                     <path id="Tracé_95" data-name="Tracé 95" d="M729.651,232.441H673.669v90.97l55.982-11.894Z" transform="translate(855.192 -127.441)" fill="#f6a400"/>
  98.                     <g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
  99.                         <g id="np_search_1868241_000000">
  100.                             <path id="Tracé_92" data-name="Tracé 92" d="M8.287,17.368A8.662,8.662,0,1,1,14.4,14.813a8.679,8.679,0,0,1-6.109,2.555Zm0-15.055a6.36,6.36,0,1,0,4.477,1.881A6.377,6.377,0,0,0,8.287,2.313Z" transform="translate(0.441 -0.012)" fill="#fff"/>
  101.                             <path id="Tracé_93" data-name="Tracé 93" d="M57.82,59.567l1.626-1.633L67.4,65.852l-1.626,1.633Z" transform="translate(-44.591 -44.782)" fill="#fff"/>
  102.                         </g>
  103.                     </g>
  104.                 </g>
  105.             </svg>
  106.         </button>
  107.         <!-- Modal -->
  108.         <div class="modal fade bd-example-modal-lg" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  109.             <div class="modal-dialog modal-lg">
  110.                 <div class="modal-content">
  111.                     <div class="col-lg-12">
  112.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="font-size:2em;position: absolute;right: 15px;"></button>
  113.                         <div name="form-search-normal-mobile" id="form-search-normal-mobile" class="div-svg-header">
  114.                             <form action="{{ path('results') }}"  style="display: flex; align-items: center; width: 100%">
  115.                                 <div class="container-form-mobile" style="display: flex;flex-direction: column;justify-content: center; ">
  116.                                     <div class="selectors mobile" style="display: flex; align-items: center; width: auto;">
  117.                                         <div id="transaction-drop" class="dropdown">
  118.                                             <div class="undroped">
  119.                                                 <p class="undroped-header">Type de transaction</p>
  120.                                                 <p name="transaction-type" class="undroped-subheader">Achat ou Location</p>
  121.                                                 <input type="hidden" value="" class="input-subheader" name="transaction-type">
  122.                                             </div>
  123.                                             <div class="droped">
  124.                                                 <div class="dropdown-header">Type de transaction</div>
  125.                                                 <ul id="transaction-li" class="items">
  126.                                                     <li class="item" data-value ="Vente">Achat</li>
  127.                                                     <li class="item" data-value ="Location">Location</li>
  128.                                                     <li class="item" data-value ="Programme">Projet</li>
  129.                                                     {#
  130.                                                     <li class="item" data-value ="Viager">Viager</li>
  131.                                                     <li class="item" data-value ="Enchere">Enchère</li>
  132.                                                     #}
  133.                                                 </ul>
  134.                                             </div>
  135.                                         </div>
  136.                                         <div id="property-drop" class="dropdown">
  137.                                             <div class="undroped">
  138.                                                 <p class="undroped-header">Type de biens</p>
  139.                                                 <p name="property-type" class="undroped-subheader">Appartement, Bureau, ...</p>
  140.                                                 <input type="hidden" value="" class="input-subheader" name="property-type">
  141.                                             </div>
  142.                                             <div class="droped">
  143.                                                 <div class="dropdown-header">Type de biens</div>
  144.                                                 <ul id="property-li" class="items">
  145.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Appartement' %}selected{% endif %}" data-value ="Appartement">Appartements</li>
  146.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Bureaux' %}selected{% endif %}" data-value ="Bureaux">Bureaux</li>
  147.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Maison' %}selected{% endif %}" data-value ="Maison">Maisons</li>
  148.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Commerce' %}selected{% endif %}" data-value ="Commerce">Commerces</li>
  149.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Garage / Parking' %}selected{% endif %}" data-value ="Garage / Parking">Garages / Parkings</li>
  150.                                                     <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Immeuble' %}selected{% endif %}" data-value ="Immeuble">Immeubles</li>
  151.                                                 </ul>
  152.                                             </div>
  153.                                         </div>
  154.                                         <div id="location-drop-mobile" class="dropdown">
  155.                                             <div class="undroped">
  156.                                                 <p class="undroped-header">Localisation</p>
  157.                                                 <p class="undroped-subheader">Choissisez une ville</p>
  158.                                                 <input type="hidden" value="" class="input-subheader" name="location">
  159.                                             </div>
  160.                                             <div class="droped">
  161.                                                 <div  class="dropdown-header">Localisation</div>
  162.                                                 <ul id="location-li-mobile" class="items">
  163.                                                     <li class="item" data-value ="Appartement">Luxembourg-Ville</li>
  164.                                                     <li class="item" data-value ="Bureaux">Leudelange</li>
  165.                                                     <li class="item" data-value ="Maison">Esch-Sur-Alzette</li>
  166.                                                 </ul>
  167.                                             </div>
  168.                                         </div>
  169.                                     </div>
  170.                                     <div id="sub-search-div-mobile" class="sub-search-div-mobile">
  171.                                         <div class="col-lg-3 div-form">
  172.                                             <input class="sub-search-input" name="budget"  id="budget" type="text" placeholder="Budget max.">
  173.                                         </div>
  174.                                         <div id="rooms-drop" class="dropdown">
  175.                                             <div class="undroped">
  176.                                                 <p class="undroped-header transparent-font">Nombre de chambres</p>
  177.                                                 <p class="undroped-subheader good-place"></p>
  178.                                                 <input type="hidden" class="input-subheader" name="rooms">
  179.                                             </div>
  180.                                             <div class="droped">
  181.                                                 <div class="dropdown-header">Nombre de chambres</div>
  182.                                                 <ul id="rooms-li" class="items">
  183.                                                     <li class="item" data-value ="1">1</li>
  184.                                                     <li class="item" data-value ="2">2</li>
  185.                                                     <li class="item" data-value ="3">3</li>
  186.                                                     <li class="item" data-value ="4">4</li>
  187.                                                     <li class="item" data-value ="5">5</li>
  188.                                                     <li class="item" data-value ="6">6</li>
  189.                                                 </ul>
  190.                                             </div>
  191.                                         </div>
  192.                                         <div class="col-lg-3 div-form">
  193.                                             <input class="sub-search-input" id="area-minimumm" name="area-minimumm" type="text" placeholder="Surface min.">
  194.                                         </div>
  195.                                     </div>
  196.                                     <div>
  197.                                         <button style="background-color: transparent;border-color: transparent;" id="submit-search" type="submit">
  198.                                             <svg class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
  199.                                                 <g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
  200.                                                     <path id="Tracé_95" data-name="Tracé 95" d="M729.651,232.441H673.669v90.97l55.982-11.894Z" transform="translate(855.192 -127.441)" fill="#f6a400"/>
  201.                                                     <g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
  202.                                                         <g id="np_search_1868241_000000">
  203.                                                             <path id="Tracé_92" data-name="Tracé 92" d="M8.287,17.368A8.662,8.662,0,1,1,14.4,14.813a8.679,8.679,0,0,1-6.109,2.555Zm0-15.055a6.36,6.36,0,1,0,4.477,1.881A6.377,6.377,0,0,0,8.287,2.313Z" transform="translate(0.441 -0.012)" fill="#fff"/>
  204.                                                             <path id="Tracé_93" data-name="Tracé 93" d="M57.82,59.567l1.626-1.633L67.4,65.852l-1.626,1.633Z" transform="translate(-44.591 -44.782)" fill="#fff"/>
  205.                                                         </g>
  206.                                                     </g>
  207.                                                 </g>
  208.                                             </svg></button>
  209.                                         <button class="btn btn-primary" id="send" type="submit" style="display: none">Envoyer</button>
  210.                                     </div>
  211.                                 </div>
  212.                             </form>
  213.                         </div>
  214.                     </div>
  215.                 </div>
  216.             </div>
  217.         </div>
  218.         <div class="nav-elements collapse navbar-collapse" id="navbarNav">
  219.             <ul class="navbar-nav">
  220.                 {#
  221.                 <li class="nav-item">
  222.                     <a class="nav-link active" aria-current="page" href="{{ path('tracol') }}">Tracol</a>
  223.                 </li>
  224.                 #}
  225.                 <li class="nav-item">
  226.                     <a class="nav-link" href="{{ path('properties', {'keyword': 'vente'}) }}">Acheter</a>
  227.                 </li>
  228.                 <li class="nav-item">
  229.                     <a class="nav-link" href="{{ path('properties', {'keyword': 'location'}) }}">Louer</a>
  230.                 </li>
  231.                 <li class="nav-item">
  232.                     <a class="nav-link" href="{{ path('vendre', {'keyword': 'location'}) }}">Vendre</a>
  233.                 </li>
  234.                 <li class="nav-item">
  235.                     <a class="nav-link" href="{{ path('projects', {'keyword': 'location'}) }}">Nos Projets</a>
  236.                 </li>
  237.                 <li class="nav-item">
  238.                     <a class="nav-link" href="{{ path('reference') }}">Nos Références</a>
  239.                 </li>
  240.                 <li class="nav-item">
  241.                     <a class="nav-link" href="{{ path('team') }}">Notre equipe</a>
  242.                 </li>
  243. {#                <li class="nav-item">#}
  244. {#                    <a class="nav-link" href="#">Actualités</a>#}
  245. {#                </li>#}
  246.                 {#
  247.                 <li class="nav-item">
  248.                     <a class="nav-link" href="{{ path('carrieres') }}">Carrières</a>
  249.                 </li>
  250.                 #}
  251.                 <li id="enveloppe-mobile" class="nav-item">
  252.                     <a class="nav-link" href="{{ path('contact') }}">
  253.                         {#
  254.                         <i class="far fa-envelope"></i>
  255.                         #}
  256.                         Nous contacter
  257.                     </a>
  258.                 </li>
  259.             </ul>
  260.         </div>
  261.         <div class="phone-contact">
  262.             <div>
  263.                 <svg class="svg-phone" xmlns="http://www.w3.org/2000/svg" width="31.059" height="27.732" viewBox="0 0 31.059 27.732">
  264.                     <g id="np_phone-call_3960627_000000" transform="translate(-6.248 -15.626)">
  265.                         <path id="Tracé_116" data-name="Tracé 116" d="M32.871,43.356H33.98V41.138h3.328V38.919H33.98V34.793l-7.931-2.64-2.973,1.986a19.764,19.764,0,0,1-7.488-7.421l1.9-1.9-2.64-9.2h-8.6v1.109A26.511,26.511,0,0,0,32.871,43.357ZM13.182,17.844l1.808,6.334L12.9,26.307l.377.721a22,22,0,0,0,9.406,9.384l.588.3,3.161-2.119,5.324,1.8v4.748A24.461,24.461,0,0,1,8.467,17.844Z" fill="#f6a400"/>
  266.                     </g>
  267.                 </svg>
  268.             </div>
  269.             <div>
  270.                 <p class="phone">
  271.                     Besoin d'informations ? <br>
  272.                     <a href="tel:+3522658601">(+352) 26 58 60-1</a>
  273.                 </p>
  274.             </div>
  275.         </div>
  276.         <div id="footer-nav-mobile" class="col-lg-2" style="display: none">
  277.             <div class="col-lg-12 opacity-mobile" style="display: flex; flex-direction: row">
  278.                 <div id="svg-phone" class="col-lg-4">
  279.                     <svg style="margin: auto;" class="svg-phone" xmlns="http://www.w3.org/2000/svg" width="31.059" height="27.732" viewBox="0 0 31.059 27.732">
  280.                         <g id="np_phone-call_3960627_000000" transform="translate(-6.248 -15.626)">
  281.                             <path id="Tracé_116" data-name="Tracé 116" d="M32.871,43.356H33.98V41.138h3.328V38.919H33.98V34.793l-7.931-2.64-2.973,1.986a19.764,19.764,0,0,1-7.488-7.421l1.9-1.9-2.64-9.2h-8.6v1.109A26.511,26.511,0,0,0,32.871,43.357ZM13.182,17.844l1.808,6.334L12.9,26.307l.377.721a22,22,0,0,0,9.406,9.384l.588.3,3.161-2.119,5.324,1.8v4.748A24.461,24.461,0,0,1,8.467,17.844Z" fill="black"/>
  282.                         </g>
  283.                     </svg>
  284.                 </div>
  285.                 <div class="col-lg-6 opacity-mobile">
  286.                     <a class="nav-link" style="height: 42px;" href="{{ path('contact') }}"><i style="margin-bottom: 5px; margin-left: -4px;color:black" class="far fa-envelope"></i></a>
  287.                 </div>
  288.             </div>
  289.             <div class="col-lg-12 opacity-mobile" style="display: flex; opacity: 0">
  290.                 <div class="col-lg-4">
  291.                     <a  href="https://www.facebook.com/tracolimmobilier/"><i style="color: #5f5f5f;margin-right: 15px;" class="fab fa-facebook-f"></i></a>
  292.                 </div>
  293.                 <div class="col-lg-4">
  294.                     <a href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i style="color: #5f5f5f;margin-right: 15px;margin-left: 2px" class="fab fa-linkedin"></i></a>
  295.                 </div>
  296.                 <div class="col-lg-4">
  297.                     <a href="https://www.instagram.com/tracolimmobilier/"><i style="color: #5f5f5f;margin-left: 5px;" class="fab fa-instagram"></i></a>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </div>
  302. </nav>
  303. <div id="formResearchNav" class="d-flex justify-content-center">
  304.     <form action="{{ path('results') }}" class="col-lg-8 form-search-filter" style="display: flex; align-items: center;">
  305.         <div class="container-form-search" style="display: flex;flex-direction: column;justify-content: center; width: 71.666vw;position:relative">
  306.             <div class="selectors" style="display: flex; align-items: center; width: auto;justify-content: space-between;">
  307.                 <div id="transaction-drop" class="dropdown">
  308.                     <div class="undroped">
  309.                         <p class="undroped-header">Type de transaction</p>
  310.                         <p name="transaction-type" class="undroped-subheader {% if app.request.attributes.get('_route_params')['keyword'] is defined %}selected{% endif %}">
  311.                             {% if app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Vente' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'vente') %}
  312.                                 Achat
  313.                             {% elseif app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Location' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'location') %}
  314.                                 Location
  315.                             {% else %}
  316.                                 Achat ou Location
  317.                             {% endif %}
  318.                         </p>
  319.                         <input type="hidden"
  320.                                {% if app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Vente' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'vente') %}
  321.                                    value="Achat"
  322.                                 {% elseif app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Location' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'location') %}
  323.                                     value="Location"
  324.                                {% endif %}
  325.                                value=""
  326.                                class="input-subheader" name="transaction-type">
  327.                     </div>
  328.                     <div class="droped">
  329.                         <div class="dropdown-header">Type de transaction</div>
  330.                         <ul id="transaction-li" class="items">
  331.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Vente' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'vente') %}selected{% endif %}" data-value ="Vente">Achat</li>
  332.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['transaction-type'] == 'Location' or (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'location') %}selected{% endif %}" data-value ="Location">Location</li>
  333.                             <li class="item" data-value ="Location saisonnière">Location saisonniere</li>
  334.                             <li class="item" data-value ="Programme">Programme</li>
  335.                             {#                                                <li class="item" data-value ="Viager">Viager</li>#}
  336.                             {#                                                <li class="item" data-value ="Enchere">Enchère</li>#}
  337.                         </ul>
  338.                     </div>
  339.                 </div>
  340.                 <div id="property-drop" class="dropdown">
  341.                     <div class="undroped">
  342.                         <p class="undroped-header">Type de biens</p>
  343.                         <p name="property-type" class="undroped-subheader">
  344.                             {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Appartement' %}
  345.                                 Appartements
  346.                             {% elseif app.session.get('filter') and app.session.get('filter')['property-type'] == 'Bureaux' %}
  347.                                 Bureaux
  348.                             {% elseif app.session.get('filter') and app.session.get('filter')['property-type'] == 'Maison' %}
  349.                                 Maisons
  350.                             {% elseif app.session.get('filter') and app.session.get('filter')['property-type'] == 'Commerce' %}
  351.                                 Commerces
  352.                             {% elseif app.session.get('filter') and app.session.get('filter')['property-type'] == 'Garage / Parking' %}
  353.                                 Garages / Parkings
  354.                             {% elseif app.session.get('filter') and app.session.get('filter')['property-type'] == 'Immeuble' %}
  355.                                 Immeubles
  356.                             {% else %}
  357.                                 Appartement, Bureau, ...
  358.                             {% endif %}
  359.                         </p>
  360.                         <input type="hidden" value="" class="input-subheader" name="property-type">
  361.                     </div>
  362.                     <div class="droped">
  363.                         <div class="dropdown-header">Type de biens</div>
  364.                         <ul id="property-li" class="items">
  365.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Appartement' %}selected{% endif %}" data-value ="Appartement">Appartements</li>
  366.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Bureaux' %}selected{% endif %}" data-value ="Bureaux">Bureaux</li>
  367.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Maison' %}selected{% endif %}" data-value ="Maison">Maisons</li>
  368.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Commerce' %}selected{% endif %}" data-value ="Commerce">Commerces</li>
  369.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Garage / Parking' %}selected{% endif %}" data-value ="Garage / Parking">Garages / Parkings</li>
  370.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['property-type'] == 'Immeuble' %}selected{% endif %}" data-value ="Immeuble">Immeubles</li>
  371.                         </ul>
  372.                     </div>
  373.                 </div>
  374.                 <div id="location-drop" class="dropdown">
  375.                     <div class="undroped">
  376.                         <p class="undroped-header">Localisation</p>
  377.                         <p class="undroped-subheader">
  378.                             {% if app.session.get('filter') and app.session.get('filter')['location'] %}
  379.                                 {{ app.session.get('filter')['location'] }}
  380.                             {% else %}
  381.                                 Choissisez une ville
  382.                             {% endif %}
  383.                         </p>
  384.                         <input type="hidden" value="" class="input-subheader" name="location">
  385.                     </div>
  386.                     <div class="droped">
  387.                         <div  class="dropdown-header">Localisation</div>
  388.                         <ul id="location-li" class="items">
  389.                             {#                                                <li class="item" data-value ="Appartement">Luxembourg-Ville</li>#}
  390.                             {#                                                <li class="item" data-value ="Bureaux">Leudelange</li>#}
  391.                             {#                                                <li class="item" data-value ="Maison">Esch-Sur-Alzette</li>#}
  392.                         </ul>
  393.                     </div>
  394.                 </div>
  395.                 <div class="div-form">
  396.                     <button  id="search-detail" class="btn btn-primary child search">RECHERCHE AVANCEE</button>
  397.                 </div>
  398.                 <div>
  399.                     <button style="background-color: transparent;border-color: transparent;" id="submit-search" type="submit">
  400.                         <svg class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
  401.                             <g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
  402.                                 <path id="Tracé_95" data-name="Tracé 95" d="M729.651,232.441H673.669v90.97l55.982-11.894Z" transform="translate(855.192 -127.441)" fill="#f6a400"/>
  403.                                 <g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
  404.                                     <g id="np_search_1868241_000000">
  405.                                         <path id="Tracé_92" data-name="Tracé 92" d="M8.287,17.368A8.662,8.662,0,1,1,14.4,14.813a8.679,8.679,0,0,1-6.109,2.555Zm0-15.055a6.36,6.36,0,1,0,4.477,1.881A6.377,6.377,0,0,0,8.287,2.313Z" transform="translate(0.441 -0.012)" fill="#fff"/>
  406.                                         <path id="Tracé_93" data-name="Tracé 93" d="M57.82,59.567l1.626-1.633L67.4,65.852l-1.626,1.633Z" transform="translate(-44.591 -44.782)" fill="#fff"/>
  407.                                     </g>
  408.                                 </g>
  409.                             </g>
  410.                         </svg>
  411.                     </button>
  412.                     <button class="btn btn-primary" id="send" type="submit" style="display: none">Envoyer</button>
  413.                 </div>
  414.             </div>
  415.             <div id="sub-search-div" class="sub-search-div" style="display: none">
  416.                 <div class="col-lg-3 div-form">
  417.                     <input class="sub-search-input" name="budget" value="{% if app.session.get('filter') %}{{ app.session.get('filter')['budget'] }}{% endif %}" id="budget" type="text" placeholder="Budget max.">
  418.                 </div>
  419.                 <div id="rooms-drop" class="dropdown">
  420.                     <div class="undroped">
  421.                         <p class="undroped-header transparent-font">{% if app.session.get('filter') and app.session.get('filter')['rooms'] %}{{ app.session.get('filter')['rooms'] }}{% else %}Nombre de chambres{% endif %}</p>
  422.                         <p class="undroped-subheader good-place"></p>
  423.                         <input type="hidden" class="input-subheader" name="rooms">
  424.                     </div>
  425.                     <div class="droped">
  426.                         <div class="dropdown-header">Nombre de chambres</div>
  427.                         <ul id="rooms-li" class="items">
  428.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 1 %}selected{% endif %}" data-value ="1">1</li>
  429.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 2 %}selected{% endif %}" data-value ="2">2</li>
  430.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 3 %}selected{% endif %}" data-value ="3">3</li>
  431.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 4 %}selected{% endif %}" data-value ="4">4</li>
  432.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 5 %}selected{% endif %}" data-value ="5">5</li>
  433.                             <li class="item {% if app.session.get('filter') and app.session.get('filter')['rooms'] == 6 %}selected{% endif %}" data-value ="6">6</li>
  434.                         </ul>
  435.                     </div>
  436.                 </div>
  437.                 <div class="col-lg-3 div-form">
  438.                     <input class="sub-search-input" id="area-minimumm" value="{% if app.session.get('filter') %}{{ app.session.get('filter')['area-minimumm'] }}{% endif %}" name="area-minimumm" type="text" placeholder="Surface minimum.">
  439.                 </div>
  440.             </div>
  441.         </div>
  442.     </form>
  443. </div>
  444. {% block body %}
  445. {% endblock %}
  446. {% if app.request.attributes.get('_route') == 'home' %}
  447.     <div id="div-newsletter-mobile" class="" style="display: none">
  448.         <div class="col-lg-12" style="display: flex; justify-content:center; margin-top: 20px;">
  449.            <div class="col-lg-12">
  450.                <p class="newsletter-title">NEWSLETTER</p>
  451.            </div>
  452.         </div>
  453.         <div class="col-lg-12" id="div-form-newsletter" style="display: flex; justify-content: space-around;">
  454.             <form method="post" action="{{ path('mailchimp') }}" id="form-newsletter">
  455.                 <div class="input-group">
  456.                     <input class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
  457.                     <button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
  458.                 </div>
  459.             </form>
  460.         </div>
  461.     </div>
  462. {% endif %}
  463. <footer class="footer">
  464.     <div class="container-fluid">
  465.         <ul id="footer-menu" class="footer-menu" style="margin-bottom: -15px;margin-top: -15px;">
  466.             <li>
  467.                 © 2021 TRACOL - réalisé par <a href="https://www.idp.lu/" target="_blank" style="color:#fff;font-weight:bold">ID+P</a>
  468.             </li>
  469.             <li style="height: 160px">
  470.                 <!--?xml version="1.0" encoding="UTF-8"?-->
  471.                 <svg id="SVGDoc" width="201" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 201 232"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Ligne 38</title><path d="M100.5,100v32" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#5f5f5f" stroke-miterlimit="20" stroke-width="10"></path></g></g></svg>
  472.             </li>
  473.             <li class="row col-md-3">
  474.                 <div class="col-md-6">
  475.                     Bureaux commerciaux :<br>
  476.                     <span style="font-weight: 600;">5 rue Jules Ferry</span><br>
  477.                     <span> L-4368 Belvaux</span>
  478.                 </div>
  479.                 <div class="col-md-6">
  480.                     Siège social :<br>
  481.                     <span style="font-weight: 600;">Z.I. Rohlach</span><br>
  482.                     <span>L-5280 Sandweiller</span>
  483.                 </div>
  484.             </li>
  485.             <li style="height: 130px">
  486.                 <!--?xml version="1.0" encoding="UTF-8"?-->
  487.                 <svg id="SVGDoc" width="201" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 201 232"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Ligne 38</title><path d="M100.5,100v32" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#5f5f5f" stroke-miterlimit="20" stroke-width="10"></path></g></g></svg>
  488.             </li>
  489.             <li class="col-md-2 d-flex justify-content-around">
  490.                 <a  href="https://www.facebook.com/tracolimmobilier/"><i class="fab fa-facebook-f fa-2x" style="color:#fff"></i></a>
  491.                 <a href="https://www.linkedin.com/company/tracol-immobilier-s-a-/"><i class="fab fa-linkedin fa-2x" style="color:#fff"></i></a>
  492.                 <a href="https://www.instagram.com/tracolimmobilier/"><i class="fab fa-instagram fa-2x" style="color:#fff"></i></a>
  493.             </li>
  494.             <li style="height: 130px">
  495.                 <!--?xml version="1.0" encoding="UTF-8"?-->
  496.                 <svg id="SVGDoc" width="201" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 201 232"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Ligne 38</title><path d="M100.5,100v32" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#5f5f5f" stroke-miterlimit="20" stroke-width="10"></path></g></g></svg>
  497.             </li>
  498.             <li class="grey legal">
  499.                 <a href="{{ path('contact') }}" class="contact-link"><i class="fa fa-envelope fa-2x" style="color:#fff"></i></a>
  500.                 <a href="https://www.tracol.lu/mentions_legales.pdf" target="_blank">Mentions légales</a>
  501.             </li>
  502.         </ul>
  503.         <ul id="footer-menu-mobile" class="footer-menu" style="display:none; margin-bottom: -15px;margin-top: -15px;">
  504.             <li>
  505.                 <div style="display: flex">
  506.                     <span style="font-weight: 600;">Z.I. Rohlach</span><br>
  507.                     <span>L-5280 Sandweiller</span>
  508.                 </div>
  509.             </li>
  510.             <li>
  511.                 © 2021 TRACOL - réalisé par <a href="https://www.idp.lu/" target="_blank" style="color:#fff;font-weight:bold">ID+P</a>
  512.             </li>
  513.         </ul>
  514.     </div>
  515. </footer>
  516. <script>
  517.     if (window.matchMedia("(max-width: 768px)").matches && window.location.pathname === '/') {
  518.         /* the viewport is less than 768 pixels wide */
  519.     //      $('#projects').slick({
  520.     //     dots: false,
  521.     //     infinite: true,
  522.     //     speed: 300,
  523.     //     slidesToShow: 1,
  524.     //     slidesToScroll: 1,
  525.     //     autoplay: true,
  526.     //     responsive: [
  527.     //         {
  528.     //             breakpoint: 576,
  529.     //             settings: {
  530.     //                 slidesToShow: 1,
  531.     //                 slidesToScroll: 1
  532.     //             }
  533.     //         }
  534.     //         // You can unslick at a given breakpoint now by adding:
  535.     //         // settings: "unslick"
  536.     //         // instead of a settings object
  537.     //     ]
  538.     // });
  539.     }
  540.     //
  541.     // const searchMobile = document.getElementById('search-detail-mobile')
  542.     // const searchSubDivMobile = document.getElementById('sub-search-div-mobile')
  543.     //
  544.     // searchMobile.addEventListener('click', function (e) {
  545.     //     e.preventDefault()
  546.     //     searchSubDivMobile.style.display = 'flex'
  547.     //     searchMobile.style.display = 'none'
  548.     // })
  549. </script>
  550. <script>
  551.     // let searchglobal = document.getElementById('submit-searchglobal');
  552.         // searchglobal.addEventListener('click', function() {
  553.         //     const formSearch = document.getElementById('form-searchglobal-normal')
  554.         //     const subSearch = document.getElementById('sub-searchglobal-div')
  555.         //     const send = document.getElementById('sendGlobal')
  556.         //             formSearch.classList.toggle('stickyYForm')
  557.         //             send.classList.toggle('send-display')
  558.         //             subSearch.classList.toggle('sub-searchglobal-div-height')
  559.         // })
  560. </script>
  561. <script>
  562.     const swiper = new Swiper('.swiper', {
  563.         loop: false,
  564.     });
  565.     if (window.location.pathname === '/') {
  566.         const navbar = document.getElementsByClassName('navbar navbar-expand-xl fixed-top')
  567.         const header = document.getElementsByClassName('header-home')
  568.         navbar[0].style.backgroundColor = "#fff"
  569.         navbar[0].style.position = "fixed"
  570.         header[0].style.marginTop = "0px"
  571.         header[0].style.height = "100vw"
  572.     }
  573.     const searchLocation = document.getElementById('location-drop');
  574.     const searchLocationLi = document.getElementById('location-li');
  575.     const url = '/form/search';
  576.     searchLocation.addEventListener("click", function (){
  577.         fetch(url, {
  578.             method: 'GET',
  579.             // body: JSON.stringify({
  580.             //     searchLocation: this.value
  581.             // })
  582.         }).then(function(response) {
  583.             return response.json()
  584.         }).then(function (data) {
  585.             console.log(data)
  586.             searchLocationLi.innerHTML = '';
  587.             for (const datum in data) {
  588.                 const li = document.createElement('li')
  589.                 li.classList.add('item')
  590.                 li.dataset.value = data[datum]
  591.                 li.addEventListener('click', function () {
  592.                     searchLocation.value = this.dataset.itemName
  593.                 })
  594.                 li.innerHTML += data[datum]
  595.                 searchLocationLi.appendChild(li)
  596.                 li.addEventListener('click', event => {
  597.                     li.classList.add('selected');
  598.                 });
  599.             }
  600.             searchLocationLi.addEventListener('click', function (e) {
  601.                 let target = e.target;
  602.                 const dropId = document.getElementById('location-drop')
  603.                 dropId.querySelector('.undroped-subheader').innerHTML = target.innerHTML
  604.                 dropId.querySelector('.input-subheader').value = target.dataset.value
  605.                 dropId.classList.remove('open')
  606.                 dropId.querySelector('.undroped').style.display = 'block'
  607.                 dropId.querySelector('.droped').style.display = 'none'
  608.                 dropId.querySelector('.undroped-subheader').classList.add('selected')
  609.             })
  610.         });
  611.     })
  612.     const searchTransactionLi = document.getElementById('transaction-li');
  613.     console.log(searchTransactionLi);
  614.     const searchPropertyLi = document.getElementById('property-li');
  615.     const searchRoomLi = document.getElementById('rooms-li');
  616.     searchTransactionLi.addEventListener('click', function (e) {
  617.         let target = e.target;
  618.         const dropId = document.getElementById('transaction-drop')
  619.         console.log(dropId);
  620.         dropId.querySelector('.input-subheader').value = target.dataset.value
  621.     })
  622.     searchPropertyLi.addEventListener('click', function (e) {
  623.         let target = e.target;
  624.         const dropId = document.getElementById('property-drop')
  625.         dropId.querySelector('.input-subheader').value = target.dataset.value
  626.     })
  627.     searchRoomLi.addEventListener('click', function (e) {
  628.         let target = e.target;
  629.         const dropId = document.getElementById('rooms-drop')
  630.         dropId.querySelector('.input-subheader').value = target.dataset.value
  631.     })
  632.     for (const eElement of document.getElementsByClassName('projectButton')) {
  633.         eElement.addEventListener('click', function (e) {
  634.             e.preventDefault()
  635.             for (let button of document.getElementsByClassName('projectButton')) {
  636.                 if (button.classList.contains('all')){
  637.                     button.classList.remove('all')
  638.                     button.classList.add('come')
  639.                     button.querySelector('span').classList.replace('span-all', 'span-projects')
  640.                 }
  641.             }
  642.             eElement.classList.remove('come')
  643.             eElement.classList.add('all')
  644.             eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  645.             fetch('projects/home/display/'+this.dataset.id, {
  646.                 method: 'GET',
  647.             })
  648.                 .then(response => response.json())
  649.                 .then(data => {
  650.                     document.getElementById('projects').innerHTML = ''
  651.                     document.getElementById('projects').innerHTML = data.data
  652.                     if (window.matchMedia("(max-width: 768px)").matches && window.location.pathname === '/') {
  653.                         // if (document.getElementById('projects').classList.contains('slick-initialized')) {
  654.                         //     document.getElementById('projects').classList.remove('slick-initialized')
  655.                         //     document.getElementById('projects').classList.remove('slick-slider')
  656.                         // }
  657.                         // $('#projects').slick({
  658.                         //     dots: false,
  659.                         //     infinite: true,
  660.                         //     speed: 300,
  661.                         //     slidesToShow: 1,
  662.                         //     slidesToScroll: 1,
  663.                         //     autoplay: true,
  664.                         //     responsive: [
  665.                         //         {
  666.                         //             breakpoint: 576,
  667.                         //             settings: {
  668.                         //                 slidesToShow: 1,
  669.                         //                 slidesToScroll: 1
  670.                         //             }
  671.                         //         }
  672.                         //     ]
  673.                         // })
  674.                     }
  675.                     _ww = $(window).width();
  676.                     if (_ww > 768){
  677.                         $('.div-img-hover-2').hover(function (e) {
  678.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  679.                             var htext = $(this).find('.project-content').height();
  680.                             if (htext == undefined){htext = 0};
  681.                             $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  682.                             $(this).find('.project-content').css({'visibility': 'visible'});
  683.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  684.                             //console.log('h : '+htext);
  685.                         }, function() {
  686.                             console.log('down');
  687.                             $(this).find('.div-hover-2').animate({height : 85}, 150);
  688.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  689.                             $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  690.                                 $(this).find('.project-content').css({'visibility': 'hidden'});
  691.                             });
  692.                         });
  693.                     } else {
  694.                         $('.div-img-hover-2').on( "click", function( event ) {
  695.                             console.log('tap tap');
  696.                             var opened = $(this).find('.div-hover-2').hasClass('open'),
  697.                                 ht = opened ? 85 : '100%',
  698.                                 vis = opened ? 0 : 1;
  699.                             $(this).find('.div-hover-2').toggleClass('open');
  700.                             $(this).find('.div-hover-2').animate({height : ht}, 150);
  701.                             $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  702.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  703.                         });
  704.                     }
  705.                     $('.div-hover').hover(function (e) {
  706.                         $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  707.                     }, function() {
  708.                         $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  709.                     });
  710.                     $('.div-hover').hover(function (e) {
  711.                         $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  712.                         var htext = $(this).find('.project-content').height();
  713.                         if (htext == undefined){htext = 0};
  714.                         $(this).animate({height : htext+180}, 150);
  715.                         $(this).find('.project-content').css({'visibility': 'visible'});
  716.                         $(this).find('.project-content').animate({opacity: 1}, 150);
  717.                         console.log('h : '+htext);
  718.                     }, function() {
  719.                         $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  720.                         $(this).animate({height : 70}, 150);
  721.                         $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  722.                             $(this).find('.project-content').css({'visibility': 'hidden'});
  723.                         });
  724.                     });
  725.                 })
  726.                 .catch((error) => {
  727.                     console.error('Error:', error);
  728.                 });
  729.         })
  730.     }
  731.     for (const eElement of document.getElementsByClassName('projectButtonref')) {
  732.         eElement.addEventListener('click', function (e) {
  733.             e.preventDefault()
  734.             for (let button of document.getElementsByClassName('projectButtonref')) {
  735.                 if (button.classList.contains('all')){
  736.                     button.classList.remove('all')
  737.                     button.classList.add('come')
  738.                     button.querySelector('span').classList.replace('span-all', 'span-projects')
  739.                 }
  740.             }
  741.             eElement.classList.remove('come')
  742.             eElement.classList.add('all')
  743.             eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  744.             fetch('reference/home/display/'+this.dataset.id, {
  745.                 method: 'GET',
  746.             })
  747.                 .then(response => response.json())
  748.                 .then(data => {
  749.                     document.getElementById('references-home').innerHTML = ''
  750.                     document.getElementById('references-home').innerHTML = data.data
  751.                     _ww = $(window).width();
  752.                     var lightbox = $('.lightbox'),
  753.                         item = 0;
  754.                     $('.lightbox-on').click(function(e){
  755.                         e.stopPropagation();
  756.                         item = 0;
  757.                         console.log('click btn');
  758.                         var id = $(this).attr('data-id'),
  759.                             max = 0;
  760.                         $('#'+id).toggle();
  761.                         $('#'+id).animate({opacity: 1}, 300);
  762.                         $('#'+id).find('img').each(function( i ) {
  763.                             //console.log('h : '+$(this).height());
  764.                             //console.log('w : '+$(this).width());
  765.                             max = i;
  766.                             item = 1;
  767.                             counter(item, max+1);
  768.                             itemWidth($(this));
  769.                         });
  770.                     });
  771.                     lightbox.click(function(e) {
  772.                         e.stopPropagation();
  773.                         $(this).animate({opacity: 0}, 300, function(){
  774.                             $(this).toggle();
  775.                         });
  776.                     });
  777.                     $('.closer').on('click', function (e) {
  778.                         e.stopPropagation();
  779.                         $(this).parent().animate(
  780.                             {opacity: 0},
  781.                             300,
  782.                             function(){
  783.                                 $(this).toggle();
  784.                             }
  785.                         );
  786.                     });
  787.                     function itemWidth(img){
  788.                         img.closest('.items').width(img.width());
  789.                     }
  790.                     function counter(item, max){
  791.                         $('.counter').text(item + ' / ' + max);
  792.                     }
  793.                     $('.item', lightbox).on('click, swipeleft', function (e) {
  794.                         var wd = $(this).width(),
  795.                             last = $(this).parent().find('.item').last(),
  796.                             img = $(this).find('.img');
  797.                         itemWidth(img);
  798.                         $(this).animate(
  799.                             {marginLeft: -wd, opacity: 0},
  800.                             500,
  801.                             'swing',
  802.                             function(){
  803.                                 $(this).insertAfter(last);
  804.                                 $(this).css({marginLeft: 0, opacity: 1});
  805.                             }
  806.                         );
  807.                     });
  808.                     $('.item', lightbox).on('swiperight', function (e) {
  809.                         var wd = $(this).width(),
  810.                             first = $(this).parent().find('.item').first(),
  811.                             last = $(this).parent().find('.item').last(),
  812.                             img = $(this).find('.img');
  813.                         itemWidth(img);
  814.                         $(last).insertBefore($(this));
  815.                         $(last).css({marginLeft: -wd, opacity: 0});
  816.                         $(this).parent().find('.item').eq(0).animate(
  817.                             {marginLeft: 0, opacity: 1},
  818.                             500,
  819.                             'swing'
  820.                         );
  821.                     });
  822.                     $('.arrows', lightbox).on('click', function (e) {
  823.                         e.stopPropagation();
  824.                         var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  825.                             max = $(this).siblings('.items').find('.item').length,
  826.                             first = $(this).siblings('.items').find('.item').first(),
  827.                             last = $(this).siblings('.items').find('.item').last(),
  828.                             isRight = $(this).hasClass('right'),
  829.                             marginL = isRight ? -wd : 0,
  830.                             marginL0 = isRight ? 0: -wd,
  831.                             opacOn = isRight ? 1 : 0,
  832.                             opacOff = isRight ? 0 : 1;
  833.                         if (!isRight){
  834.                             $(last).insertBefore(first);
  835.                             $(last).css({marginLeft: -wd, opacity: 0});
  836.                             item++;
  837.                             if (item == max+1) {item = 1};
  838.                         } else {
  839.                             item--;
  840.                             if (item == 0) {item = max};
  841.                         };
  842.                         counter(item, max);
  843.                         var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  844.                         itemWidth(img);
  845.                         $(this).siblings('.items').find('.item').eq(1).animate(
  846.                             {opacity: opacOn},
  847.                             500,
  848.                             'swing');
  849.                         $(this).siblings('.items').find('.item').eq(0).animate(
  850.                             {marginLeft: marginL, opacity: 1},
  851.                             500,
  852.                             'swing',
  853.                             function(){
  854.                                 if (isRight){
  855.                                     $(this).insertAfter(last);
  856.                                     $(this).css({ marginLeft: 0, opacity: 1});
  857.                                 }
  858.                             }
  859.                         );
  860.                     });
  861.                     if (_ww > 768){
  862.                         $('.div-img-hover-2').hover(function (e) {
  863.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  864.                             var htext = $(this).find('.project-content').height();
  865.                             if (htext == undefined){htext = 0};
  866.                             $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  867.                             $(this).find('.project-content').css({'visibility': 'visible'});
  868.                             $(this).find('.project-content').animate({opacity: 1}, 150);
  869. //console.log('h : '+htext);
  870.                         }, function() {
  871.                             console.log('down');
  872.                             $(this).find('.div-hover-2').animate({height : 85}, 150);
  873.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  874.                             $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  875.                                 $(this).find('.project-content').css({'visibility': 'hidden'});
  876.                             });
  877.                         });
  878.                     } else {
  879.                         $('.div-img-hover-2').on( "tap", function( event ) {
  880.                             console.log('tap tap');
  881.                             var opened = $(this).find('.div-hover-2').hasClass('open'),
  882.                                 ht = opened ? 85 : '100%',
  883.                                 vis = opened ? 0 : 1;
  884.                             $(this).find('.div-hover-2').toggleClass('open');
  885.                             $(this).find('.div-hover-2').animate({height : ht}, 150);
  886.                             $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  887.                         });
  888.                     }
  889.                 })
  890.                 .catch((error) => {
  891.                     console.error('Error:', error);
  892.                 });
  893.         })
  894.     }
  895.     /*
  896.     window.addEventListener('scroll', function(){
  897.         let search = document.getElementById('submit-search');
  898.         const formSearch = document.getElementById('form-search-normal')
  899.         const subSearch = document.getElementById('sub-search-div')
  900.         const send = document.getElementById('send')
  901.         if (search) {
  902.             search.classList.toggle("stickyY", window.scrollY > 730);
  903.             if (search.classList.contains("stickyY")) {
  904.                 search.setAttribute('type', 'button')
  905.                 search.addEventListener('click', function (e) {
  906.                     e.preventDefault()
  907.                     formSearch.classList.toggle('stickyYForm')
  908.                     send.classList.toggle('send-display')
  909.                     subSearch.classList.toggle('sub-search-div-height')
  910.                 })
  911.             } else  search.setAttribute('type', 'submit')
  912.         }
  913.     })
  914. */
  915. </script>
  916. {#
  917. <script>
  918.     var _dropin = $('.dropdown'),
  919.         _delay = 150,
  920.         _ww = $(window).width();
  921.     $('.undroped', _dropin).on('click', function (e) {
  922.         console.log('CLICKKKK 1')
  923.         $('.dropdown-header').closest('.droped').removeClass('open');
  924.         $('.dropdown-header').closest('.dropdown').find('.undroped').show();
  925.         $('.dropdown-header').closest('.droped').hide();
  926.         $('.dropdown-header').closest('.droped').find('.items').animate({height: 0});
  927.         $(this).hide();
  928.         $(this).siblings('.droped').find('.items').height('auto');
  929.         $(this).siblings('.droped').show();
  930.         var ht = $(this).siblings('.droped').find('.items').height();
  931.         $(this).attr('data-ht', ht);
  932.         $(this).siblings('.droped').find('.items').height(0);
  933.         $(this).siblings('.droped').addClass('open');
  934.         $(this).siblings('.droped').find('.items').animate({height: ht + 40}, _delay);
  935.     });
  936.     $('.dropdown-header', _dropin).on('click', function (e) {
  937.         var ht = $(this).closest('.dropdown').find('.undroped').attr('data-ht');
  938.         $(this).closest('.droped').removeClass('open');
  939.         $(this).closest('.droped').find('.items').animate({height: 0}, _delay, function () {
  940.             $(this).closest('.dropdown').find('.undroped').show();
  941.             $(this).closest('.droped').hide();
  942.         });
  943.     });
  944.     const searchLocationm = document.getElementById('location-drop-mobile');
  945.     const searchLocationLim = document.getElementById('location-li-mobile');
  946.     const urlm = '/form/search';
  947.     searchLocationm.addEventListener("click", function (){
  948.         fetch(urlm, {
  949.             method: 'GET',
  950.             // body: JSON.stringify({
  951.             //     searchLocation: this.value
  952.             // })
  953.         }).then(function(response) {
  954.             return response.json()
  955.         }).then(function (data) {
  956.             searchLocationLim.innerHTML = '';
  957.             for (const datum in data) {
  958.                 const li = document.createElement('li')
  959.                 li.classList.add('item')
  960.                 li.dataset.value = data[datum]
  961.                 li.addEventListener('click', function () {
  962.                     searchLocationm.value = this.dataset.itemName
  963.                 })
  964.                 li.innerHTML += data[datum]
  965.                 searchLocationLim.appendChild(li)
  966.                 li.addEventListener('click', event => {
  967.                     li.classList.add('selected');
  968.                 });
  969.             }
  970.             searchLocationLim.addEventListener('click', function (e) {
  971.                 searchLocationLim.req
  972.                 let target = e.target;
  973.                 const dropId = document.getElementById('location-drop-mobile')
  974.                 dropId.querySelector('.undroped-subheader').innerHTML = target.innerHTML
  975.                 dropId.querySelector('.input-subheader').value = target.dataset.value
  976.                 dropId.classList.remove('open')
  977.                 dropId.querySelector('.undroped').style.display = 'block'
  978.                 dropId.querySelector('.droped').style.display = 'none'
  979.                 dropId.querySelector('.undroped-subheader').classList.add('selected')
  980.             })
  981.         });
  982.     })
  983.     if (window.location.href.includes('action=postule')) {
  984.         let select = document.getElementById('contact_form_object');
  985.         let options = select.childNodes;
  986.         let optionPostule = options[1];
  987.         optionPostule.setAttribute('selected', '')
  988.         console.log(optionPostule)
  989.     }
  990.     /* the viewport is less than 768 pixels wide */
  991.     //      $('#projects').slick({
  992.     //     dots: false,
  993.     //     infinite: true,
  994.     //     speed: 300,
  995.     //     slidesToShow: 1,
  996.     //     slidesToScroll: 1,
  997.     //     autoplay: true,
  998.     //     responsive: [
  999.     //         {
  1000.     //             breakpoint: 576,
  1001.     //             settings: {
  1002.     //                 slidesToShow: 1,
  1003.     //                 slidesToScroll: 1
  1004.     //             }
  1005.     //         }
  1006.     //         // You can unslick at a given breakpoint now by adding:
  1007.     //         // settings: "unslick"
  1008.     //         // instead of a settings object
  1009.     //     ]
  1010.     // });
  1011.     //
  1012.     // const searchMobile = document.getElementById('search-detail-mobile')
  1013.     // const searchSubDivMobile = document.getElementById('sub-search-div-mobile')
  1014.     //
  1015.     // searchMobile.addEventListener('click', function (e) {
  1016.     //     e.preventDefault()
  1017.     //     searchSubDivMobile.style.display = 'flex'
  1018.     //     searchMobile.style.display = 'none'
  1019.     // })
  1020. </script>
  1021. #}
  1022. </body>
  1023. </html>