templates/index.html.twig line 1

Open in your IDE?
  1. {% extends 'parent.html.twig' %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4. {% endblock %}
  5. {% block body %}
  6.     <!-- Home Design -->
  7.   <section class="home-one bg-home6">
  8.     <div class="container">
  9.       <div class="row posr">
  10.         <div class="col-lg-12 pl0-lg pl15-sm">
  11.           <div class="home_content home6 custom_width">
  12.             <div class="home-text home6">
  13.               <p class="fz18">Gagnez en visibilité !</p>
  14.               <h2 class="fz60">Votre panneau  <br> <span class="text-thm">publicitaire</span></h2>
  15.             </div>
  16.             
  17.           </div>
  18.         </div>
  19.       </div>
  20.     </div>
  21.   </section>
  22.   <!-- Why Chose Us -->
  23.   <section id="why-chose" class="whychose_us bgc-alice-blue pb70">
  24.     <div class="container">
  25.       <div class="row">
  26.         <div class="col-lg-6 offset-lg-3">
  27.           <div class="main-title text-center">
  28.             <h2>Quel panneau ?</h2>
  29.             <p>Choisissez le type de panneau qui correspond le mieux à vos attentes et à votre budget.</p>
  30.           </div>
  31.         </div>
  32.       </div>
  33.       <div class="row">
  34.         <div class="col-md-6 col-xl-4">
  35.           <div class="why_chose_us"> 
  36.             <div class="icon green" style="font-size: 50px; color: #42ed84;"><i class="fa-solid fa-sign-hanging"></i></i></div>
  37.             <div class="details">
  38.               <h4>Panneaux verts</h4>
  39.               <p>Ces panneaux sont situés dans des zones rurales, et donc mois fréquentées. Un panneau vert vous conviendra si vous visez un petit budget !</p>
  40.             </div>
  41.           </div>
  42.         </div>
  43.         <div class="col-md-6 col-xl-4">
  44.           <div class="why_chose_us">
  45.             <div class="icon blue" style="font-size: 50px; color: #4188fa;"><i class="fa-solid fa-sign-hanging"></i></div>
  46.             <div class="details">
  47.               <h4>Panneaux bleus</h4>
  48.               <p>Les panneaux bleus sont un excellent compromis entre visibilité pour votre marque et budget raisonable. De quoi vous faire connaitre sans vous ruiner !</p>
  49.             </div>
  50.           </div>
  51.         </div>
  52.         <div class="col-md-6 col-xl-4">
  53.           <div class="why_chose_us">
  54.             <div class="icon" style="font-size: 50px; color: #ec1e28;"><i class="fa-solid fa-sign-hanging"></i></div>
  55.             <div class="details">
  56.               <h4>Panneaux rouges</h4>
  57.               <p>Les panneaux rouges sont situés dans des zones très fréquentées. Ceux-ci vous garantiront une exposition d'enfer, de quoi faire connaitre votre marque.</p>
  58.             </div>
  59.           </div>
  60.         </div>
  61.       </div>
  62.     </div>
  63.   </section>
  64.   
  65.   <!-- Recent Property For Rent -->
  66.   <section class="recent-property pb70 bgc-alice-blue">
  67.     <div class="container">
  68.       <div class="row">
  69.         <div class="col-lg-6">
  70.           <div class="main-title">
  71.             <h2>Panneaux disponibles</h2>
  72.             <p>Faites votre publicité comme vous l'entendez</p>
  73.           </div>
  74.         </div>
  75.         <div class="col-lg-6">
  76.           <div class="custom_dropdowns text-right mb30-md">
  77. {#             <select class="selectpicker show-tick" onchange="managePanels(0);">
  78.             <option>Tous types</option>
  79.             {% for typepanel in typespanel %}
  80.               <option value="{{ typepanel.name }}">{{ typepanel.name }}</option>
  81.             {% endfor %}
  82.             </select> #}
  83.           </div>
  84.         </div>
  85.       </div>
  86.       <div class="row">
  87.         <div class="col-lg-12">
  88.           <div class="recent_property_slider_home1 home6" id="list-panels">
  89.             {% for panel in panels %}
  90.               <div class="item">
  91.                 <div class="feat_property all_listing_style5">
  92.                   <div class="thumb">
  93.                     <a href="/listing-panel-single/{{ panel.id }}"><img class="img-whp" src="{{ images [ loop.index0 ] }}" alt="lls51.jpg"></a>
  94.                     <div class="thmb_cntnt2 right top style5">
  95.                       <ul class="tag mb0">
  96.                         <li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-resize"></span></a></li>
  97.                         <li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-add"></span></a></li>
  98.                         <li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-heart-shape-outline"></span></a></li>
  99.                       </ul>
  100.                     </div>
  101.                     <div class="fp_footer all_listing_style5">
  102.                       <ul class="fp_meta">
  103.                         <li class="list-inline-item">
  104.                           <a href="#">
  105.                             <span class="fw600">{{ panel.price }}&euro;</span>
  106.                           </a>
  107.                         </li>
  108.                       </ul>
  109.                       <h4><a class="text-white" href="page-listing-single-v8.html">{{panel.situation}} ({{ panel.name }})</a></h4>
  110.                     </div>
  111.                   </div>
  112.                   <div class="details">
  113.                     <div class="tc_content">
  114.                       <ul class="prop_details mb0" style="display: flex; justify-content: space-around;">
  115.                         <li class="list-inline-item"><i class="fa-solid fa-square-arrow-up-right"></i><br>{{panel.area}} m<sup>2</sup></a></li>
  116.                         <li class="list-inline-item"><i class="fa-solid fa-check"></i><br>{% if panel.free > 1 %} loué {% else %} libre {% endif %}</a></li>
  117.                         <li class="list-inline-item"><i class="fa-solid fa-image"></i><br>{{ panel.images | length }} image{% if panel.images | length > 1 %}s{% endif %}</a></li>
  118.                         <li class="list-inline-item"><i class="fa-solid fa-eye"></i><br>{{ panel.historyViews | length }} vue{% if panel.historyViews | length > 1 %}s{% endif %}</a></li>
  119.                       </ul>
  120.                     </div>
  121.                   </div>
  122.                 </div>
  123.               </div>
  124.             {% endfor %}
  125.           </div>
  126.         </div>
  127.       </div>
  128.     </div>
  129.   </section>
  130.   
  131.   <!-- Property Cities -->
  132. {% if typespanel|length > 0 %}
  133.   <section class="property-city pb70 bb1">
  134.     <div class="container">
  135.       <div class="row">
  136.         <div class="col-lg-6">
  137.           <div class="main-title mb30-md">
  138.             <h2>Pour tous les goûts !</h2>
  139.             <p>Découvrez tous nos types de panneaux</p>
  140.           </div>
  141.         </div>
  142. {#      <div class="col-lg-6">
  143.           <div class="heading_read_more text-right tal-md mt30 mt0-md">
  144.             <a href="#" class="btn text-thm">Browse All</a>
  145.           </div>
  146.         </div>#}
  147.       </div> 
  148.       <div class="row mt50-md">
  149.         <div class="col-md-12 col-lg-4 col-xl-4">
  150.           <div class="row">
  151.             <div class="col-sm-12">
  152.               <a href="listing-panels/?type=1">
  153.                 <div class="explore_city custom_class_service float-left">
  154.                   <div class="thumb"><img class="img-fluid" src="{% if typespanel [0].image is empty %}{{defaultimage}}{% else %}{{typespanel [0].image}}{% endif %}" alt="1.jpg"></div>
  155.                   <div class="details">
  156.                     <h4 class="title">{{ typespanel [0].name }}</h4>
  157.                     <p>{{ typespanel [0].panels|length }} panneaux</p>
  158.                   </div>
  159.                 </div>
  160.               </a>
  161.               <a href="listing-panels/?type=2">
  162.                 <div class="explore_city custom_class_service float-right">
  163.                   <div class="thumb"><img class="img-fluid" src="{% if typespanel [1].image is empty %}{{defaultimage}}{% else %}{{typespanel [1].image}}{% endif %}" alt="2.jpg"></div>
  164.                   <div class="details">
  165.                     <h4 class="title">{{ typespanel [1].name }}</h4>
  166.                     <p>{{ typespanel [1].panels|length }} panneaux</p>
  167.                   </div>
  168.                 </div>
  169.               </a>
  170.             </div>
  171.             <div class="col-sm-12">
  172.               <a href="listing-panels/?type=3">
  173.                 <div class="explore_city">
  174.                   <div class="thumb"><img class="img-fluid" src="{% if typespanel [2].image is empty %}{{defaultimage}}{% else %}{{typespanel [2].image}}{% endif %}" alt="3.jpg"></div>
  175.                   <div class="details">
  176.                     <h4 class="title">{{ typespanel [2].name }}</h4>
  177.                     <p>{{ typespanel [2].panels|length }} panneaux</p>
  178.                   </div>
  179.                 </div>
  180.               </a>
  181.             </div>
  182.           </div>
  183.         </div>
  184.         <div class="col-md-7 col-lg-5 col-xl-6">
  185.           <a href="listing-panels/?type=4">
  186.             <div class="explore_city style2">
  187.               <div class="thumb"><img class="img-fluid" src="{% if typespanel [3].image is empty %}{{defaultimage}}{% else %}{{typespanel [3].image}}{% endif %}" alt="4.jpg"></div>
  188.               <div class="details">
  189.                 <h4 class="title">{{ typespanel [3].name }}</h4>
  190.                 <p>{{ typespanel [3].panels|length }} panneaux</p>
  191.               </div>
  192.             </div>
  193.           </a>
  194.         </div>
  195.         <div class="col-md-5 col-lg-3 col-xl-2">
  196.           <a href="listing-panels/?type=5">
  197.             <div class="explore_city custom_class_service2">
  198.               <div class="thumb"><img class="img-fluid" src="{% if typespanel [4].image is empty %}{{defaultimage}}{% else %}{{typespanel [4].image}}{% endif %}" alt="5.jpg"></div>
  199.               <div class="details">
  200.                 <h4 class="title">{{ typespanel [4].name }}</h4>
  201.                 <p>{{ typespanel [4].panels|length }} panneaux</p>
  202.               </div>
  203.             </div>
  204.           </a>
  205.         </div>
  206.       </div>
  207.     </div>
  208.   </section>
  209. {% endif %}
  210.   
  211.   <!-- Contact Divider Home 6 -->
  212.   <section class="contact-divider-home6 bgc-thm pt70 pb70">
  213.     <div class="container">
  214.       <div class="row justify-content-center">
  215.         <div class="col-md-6 col-lg-4 col-xl-4">
  216.           <div class="contact_icon_box home6">
  217.             <div class="icon float-left"><span class="flaticon-phone"></span></div>
  218.             <div class="details" style="position: relative; top: 10px;">
  219.               <h5 class="title mb0">(+32) 497 48 12 54</h5>
  220.             </div>
  221.           </div>
  222.         </div>
  223.         <div class="col-md-6 col-lg-4 col-xl-4">
  224.           <div class="contact_icon_box home6">
  225.             <div class="icon float-left"><span class="flaticon-place"></span></div>
  226.             <div class="details">
  227.               <h5 class="title mb0">Rue du Pont Alsort, 36<br>6640 Froidchapelle, Belgique.</h5>
  228.             </div>
  229.           </div>
  230.         </div>
  231.         <div class="col-md-6 col-lg-4 col-xl-2">
  232.           <div class="contact_icon_box home6">
  233.             <div class="icon float-left"><i class="fa-regular fa-envelope"></i></div>
  234.             <div class="details" style="white-space: nowrap; position: relative; top: 10px;">
  235.               <h5 class="title mb0">contact@pub-up.eu</h5>
  236.             </div>
  237.           </div>
  238.         </div>
  239.       </div>
  240.     </div>
  241.   </section>
  242. {% endblock %}
  243. {% block footer %}
  244.     {{ parent() }}
  245. {% endblock %}
  246. {% block javascripts %}
  247.     <script src="/assets/js/app.js"></script>
  248.     <script src="/assets/js/jquery-3.6.0.js"></script>
  249.     <script src="/assets/js/jquery-migrate-3.0.0.min.js"></script>
  250.     <script src="/assets/js/popper.min.js"></script>
  251.     <script src="/assets/js/bootstrap.min.js"></script>
  252.     <script src="/assets/js/jquery.mmenu.all.js"></script>
  253.     <script src="/assets/js/ace-responsive-menu.js"></script>
  254.     <script src="/assets/js/bootstrap-select.min.js"></script>
  255.     <script src="/assets/js/isotop.js"></script>
  256.     <script src="/assets/js/snackbar.min.js"></script>
  257.     <script src="/assets/js/simplebar.js"></script>
  258.     <script src="/assets/js/parallax.js"></script>
  259.     <script src="/assets/js/scrollto.js"></script>
  260.     <script src="/assets/js/jquery-scrolltofixed-min.js"></script>
  261.     <script src="/assets/js/jquery.counterup.js"></script>
  262.     <script src="/assets/js/wow.min.js"></script>
  263.     <script src="/assets/js/progressbar.js"></script>
  264.     <script src="/assets/js/slider.js"></script>
  265.     <script src="/assets/js/pricing-slider.js"></script>
  266.     <script src="/assets/js/timepicker.js"></script>
  267.     <script src="/assets/js/wow.min.js"></script>
  268.     <!-- Custom script for all pages --> 
  269.     <script src="/assets/js/script.js"></script>
  270.     <script>
  271.     $(document).ready( function() {
  272.     console.log("hello");
  273.       //getListPanels(0);
  274.       //formatTemplate();
  275.     });
  276.     </script>
  277. {% endblock %}