templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="ventes en ligne, rapeto service, madagascar">
  9.     <title>{% block title %} Dashboard Templates !{% endblock %}</title>
  10.     <link rel="icon"
  11.         href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  12.     <!-- Autres balises head -->
  13.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
  14.     <!-- Lien vers le fichier CSS de Bootstrap 5 -->
  15.     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  16.     <!-- Lien vers les icônes de Bootstrap -->
  17.     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  18.     <!-- Lien vers AOS animation -->
  19.     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  20.     {# font awesome #}
  21.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
  22.     <!-- Swiper CSS -->
  23.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  24.     {# leaflet #}
  25.     {#
  26.     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> #}
  27.     {#
  28.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> #}
  29.     {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  30.     {% block stylesheets %}
  31.     {{ encore_entry_link_tags('styleScss') }}
  32.     {% endblock %}
  33.     {% block javascripts %}
  34.     {{ encore_entry_script_tags('app') }}
  35.     {% endblock %}
  36. </head>
  37. <body>
  38.     {# LOADER PAGE #} 
  39.     <div id="loader-wrapper">
  40.         <div id="loader-page"></div>
  41.     </div>
  42.     {# LOADER RECHERCHE#}
  43.     <div id="loader">
  44.         <h4>Recherche en cours...</h4>
  45.         <div class="loader"></div> <!-- Le spinner -->
  46.     </div>
  47.     <div class="wrapper">
  48.         {# HEADER #}
  49.         {% if app.user %}
  50.         <div class="nav-bar">
  51.             <div class="">
  52.                 <div class="pt-2 mb-3 nav-top">
  53.                     <div class="">
  54.                         <div class="row justify-content-center align-items-center"
  55.                             style="margin-right: 0px !important; margin-left: 0px !important;">
  56.                             {# hamburger responsive #}
  57.                             <div class="col-md-1 d-none hamburger">
  58.                                 <button id="hamburger" class="text-white" style="border: none !important;">
  59.                                     <i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
  60.                                 </button>
  61.                                 <a href="{{ path('app_home')}}">
  62.                                     <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  63.                                 </a>
  64.                             </div>
  65.                             {# logo #}
  66.                             <div class="col-md-2 responsive-logo">
  67.                                 <a href="{{ path('app_home')}}">
  68.                                     <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  69.                                 </a>
  70.                             </div>
  71.                             {# form recherche #}
  72.                             <div class="col-md-6 no-responsive">
  73.                                 {# <form action="{{ path('app_product_search')}}" method="get">
  74.                                     <div class="search-container">
  75.                                         <input type="text" placeholder="Recherche..." name="searchname" required>
  76.                                         <button type="submit" class="btn btn-dark"><i
  77.                                                 class="fas fa-search"></i></button>
  78.                                     </div>
  79.                                 </form> #}
  80.                                 <div class="all-search" style="position: relative;">
  81.                                     <form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
  82.                                         <div class="search-container">
  83.                                             <input type="text" placeholder="Recherche..." name="searchname" required>
  84.                                             <button type="submit" class="btn btn-dark"><i
  85.                                                     class="fas fa-search"></i></button>
  86.                                         </div>
  87.                                     </form>
  88.                                     <div class="searchImage me-5" style="position: absolute; top: 8%; right:0;">
  89.                                         <form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
  90.                                             enctype="multipart/form-data">
  91.                                             <label for="imageUpload" class="btn btn-outline-secondary">
  92.                                                 <i class="bi bi-camera"></i>
  93.                                             </label>
  94.                                             <input type="file" name="image" id="imageUpload" class="d-none"
  95.                                                 onchange="this.form.submit()">
  96.                                         </form>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                             {# devise #}
  101.                             <div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
  102.                                 <span class="user-icon me-2">
  103.                                     <img src="https://flagcdn.com/w20/mg.png" srcset="https://flagcdn.com/w40/mg.png 2x"
  104.                                         width="20" height="13" alt="Madagascar">
  105.                                 </span>
  106.                                 <div class="mt-2 sing-in-top">
  107.                                     {# <span class="d-block">FR/</span> #}
  108.                                     <b>MGA</b>
  109.                                 </div>
  110.                             </div>
  111.                             {# configuration #}
  112.                             {% if is_granted('ROLE_ADMIN') %}
  113.                             {# sing in/sing up #}
  114.                             <div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
  115.                                 <span class="user-icon me-2" onclick="window.location='{{ path('app_logout')}}'"
  116.                                     title="Deconnecter">
  117.                                     <i class="bi bi-power fs-2"></i>
  118.                                 </span>
  119.                                 {# <div class="mt-2 sing-in-top">
  120.                                     <span class="d-block">Bienvenue</span>
  121.                                     <b class="singIn"><a href="{{ path('app_logout')}}"
  122.                                             class="deconnecte">Deconnecter</a></b>
  123.                                 </div> #}
  124.                             </div>
  125.                             <div class="d-flex justify-content-center align-items-center col-md-1 no-responsive"
  126.                                 onclick="window.location='{{ path('app_product_back_index', {'id': -1}) }}'"
  127.                                 style="cursor: pointer;">
  128.                                 <span class="config-icon me-2">
  129.                                     <i class="bi bi-gear fs-2" title="configuration"></i>
  130.                                 </span>
  131.                                 <div class="mt-2 sing-in-top">
  132.                                     {# <b>Configuration</b> #}
  133.                                 </div>
  134.                             </div>
  135.                             {% else %}
  136.                             {# sing in/sing up #}
  137.                             <div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
  138.                                 <span class="user-icon me-2" onclick="window.location='{{ path('app_logout')}}'"
  139.                                     title="Deconnecter">
  140.                                     <i class="bi bi-power fs-2"></i>
  141.                                 </span>
  142.                                 {# <div class="mt-2 sing-in-top">
  143.                                     <span class="d-block">Bienvenue</span>
  144.                                     <b class="singIn"><a href="{{ path('app_logout')}}"
  145.                                             class="deconnecte">Deconnecter</a></b>
  146.                                 </div> #}
  147.                                 {# <div class="sing-in-top-overlay">
  148.                                     <div class="box">
  149.                                         <div class="row">
  150.                                             .connexion
  151.                                         </div>
  152.                                     </div>
  153.                                 </div> #}
  154.                             </div>
  155.                             <div
  156.                                 class="tooltip-container d-flex justify-content-center align-items-center  col-md-1 no-responsive">
  157.                                 <span class="user-icon">
  158.                                     <i class="bi bi-gear fs-2"></i>
  159.                                 </span>
  160.                                 <span class="tooltip-text  p-4">
  161.                                     {# <div class="row flex-column align-items-center justify-content-center">
  162.                                         <a href="{{ path('app_login')}}" class="se-connecte">
  163.                                             <div class="col text-center mb-3 p-2 btn">
  164.                                                 Se connecter
  165.                                             </div>
  166.                                         </a>
  167.                                         <a href="{{ path('app_home_inscription')}}" class="inscrire">
  168.                                             <div class="col text-center btn"
  169.                                                 style="font-weight:700; color:rgb(0, 0, 0);">
  170.                                                 S'inscrire
  171.                                             </div>
  172.                                         </a>
  173.                                     </div>
  174.                                     <hr> #}
  175.                                     <ul style="list-style: none;">
  176.                                         <li>
  177.                                             <a href="{{ path('app_home_edit_profil', {'id': app.user.id })}}"
  178.                                                 style="text-decoration: none; color:gray;">
  179.                                                 <i class="bi bi-person ps-1 pe-2"></i>Edit profil
  180.                                             </a>
  181.                                         </li>
  182.                                         <li>
  183.                                             <a href="{{ path('app_order_index', {'menu': 'commande', 'retour': 0})}}"
  184.                                                 style="text-decoration: none; color:gray;">
  185.                                                 <i class="bi bi-card-list ps-1 pe-2"></i>Mes commandes
  186.                                             </a>
  187.                                         </li>
  188.                                         {# <li><i class="bi bi-credit-card  ps-1 pe-2"></i>Paiement</li>
  189.                                         <li><i class="bi bi-clipboard2-heart  ps-1 pe-2"></i>Mes favoris</li>
  190.                                         <li><i class="bi bi-chat-left-text  ps-1 pe-2"></i>Centre de Messagerie</li> #}
  191.                                     </ul>
  192.                                 </span>
  193.                                 {# <div class="mt-2 sing-in-top">
  194.                                     <span class="d-block">Bienvenue</span>
  195.                                     <b class="singIn">
  196.                                         <a href="{{ path('app_login')}}" class="se-connecte">Se connecter</a> / <a
  197.                                             href="{{ path('app_home_inscription')}}" class="inscrire">S'inscrire</a>
  198.                                     </b>
  199.                                 </div> #}
  200.                                 {# <div class="sing-in-top-overlay">
  201.                                     <div class="box">
  202.                                         <div class="row">
  203.                                             .connexion
  204.                                         </div>
  205.                                     </div>
  206.                                 </div> #}
  207.                             </div>
  208.                             {% endif %}
  209.                             {# panier #}
  210.                             {# <div class="d-flex justify-content-center align-items-center col-md-1"
  211.                                 onclick="window.location='{{ path('app_product_list_panier') }}'"
  212.                                 style="cursor: pointer;">
  213.                                 <span class="cart-icon me-2">
  214.                                     <i class="bi bi-cart fs-2"></i>
  215.                                 </span> #}
  216.                                 {# <div class="mt-2 cart-top">
  217.                                     <span class="d-block">{{countListPanier}}</span>
  218.                                     <b>Panier</b>
  219.                                 </div> #}
  220.                                 {#
  221.                             </div> #}
  222.                             <div class="d-flex justify-content-center align-items-center col-md-1 no-responsive"
  223.                                 onclick="window.location='{{ path('app_product_list_panier') }}'"
  224.                                 style="cursor: pointer;">
  225.                                 {# <span class="cart-icon me-3" style="position: relative;">
  226.                                     <span class="d-block"
  227.                                         style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
  228.                                     <i class="bi bi-cart fs-2"></i>
  229.                                 </span> #}
  230.                                 <span class="cart-icon">
  231.                                     <i class="bi bi-cart fs-2"></i>
  232.                                 </span>
  233.                                 <div class="mt-2 cart-top">
  234.                                     <span class="d-block">{{countListPanier}}</span>
  235.                                     <b>Panier</b>
  236.                                 </div>
  237.                             </div>
  238.                             {# hamburger responsive #}
  239.                             {# <div class="col-md-6 d-none hamburger">
  240.                                 <div class="d-flex justify-content-center align-items-center"
  241.                                     onclick="window.location='{{ path('app_product_list_panier') }}'"
  242.                                     style="cursor: pointer;">
  243.                                     <span class="cart-icon me-3" style="position: relative;">
  244.                                         <span class="d-block"
  245.                                             style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
  246.                                         <i class="bi bi-cart fs-2"></i>
  247.                                     </span>
  248.                                 </div>
  249.                                 <button id="hamburger" class="text-white" style="border: none !important;">
  250.                                     <i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
  251.                                 </button>
  252.                             </div> #}
  253.                             {# connexion et panier responsive #}
  254.                             <div class="col-md-4 d-none hamburger">
  255.                                 <span class="d-flex justify-content-center align-items-center user-icon me-3"
  256.                                     style="cursor: pointer;" onclick="window.location='{{ path('app_logout')}}'"
  257.                                     title="Deconnecter">
  258.                                     <span class="text-deconnexion me-1" style="font-size: 14px;">Déconnexion</span><i
  259.                                         class="bi bi-box-arrow-right fs-2"></i>
  260.                                 </span>
  261.                                 <span class="cart-icon" style="position: relative; cursor: pointer;"
  262.                                     onclick="window.location='{{ path('app_product_list_panier') }}'"
  263.                                     title="Vos panier">
  264.                                     <span class="d-block"
  265.                                         style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
  266.                                     <i class="bi bi-cart fs-2"></i>
  267.                                 </span>
  268.                             </div>
  269.                         </div>
  270.                         {# recherche responsive #}
  271.                         <div class="row d-none hamburger"
  272.                             style="margin-left: 0px !important; margin-right: 0px !important;">
  273.                             <div class="col-md-12 mt-2" id="searchBar">
  274.                                 <div class="all-search" style="position: relative;">
  275.                                     <form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
  276.                                         <div class="search-container">
  277.                                             <input type="text" placeholder="Recherche..." name="searchname" required>
  278.                                             <button type="submit" class="btn btn-dark"><i
  279.                                                     class="fas fa-search"></i></button>
  280.                                         </div>
  281.                                     </form>
  282.                                     <div class="searchImage me-5" style="position: absolute; top: 8%; right: 0;">
  283.                                         <form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
  284.                                             enctype="multipart/form-data">
  285.                                             <label for="imageUpload" class="btn btn-outline-secondary">
  286.                                                 <i class="bi bi-camera"></i>
  287.                                             </label>
  288.                                             <input type="file" name="image" id="imageUpload" class="d-none"
  289.                                                 onchange="this.form.submit()">
  290.                                         </form>
  291.                                     </div>
  292.                                 </div>
  293.                             </div>
  294.                         </div>
  295.                     </div>
  296.                 </div>
  297.                 <div class="nav-menu">
  298.                     <div class="col-md-12 mt-3">
  299.                         <ul class="d-flex justify-content-between align-items-center nav-menu-ul">
  300.                             <li class="li"><i class="bi bi-list ps-1"></i>Toutes les catégories<i
  301.                                     class="bi bi-chevron-down px-2"></i>
  302.                                 <ul class="submenu">
  303.                                     {% for item in categories %}
  304.                                     <li class="cat-no-resp"
  305.                                         onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
  306.                                         {{item.title}}</li>
  307.                                     {% endfor %}
  308.                                 </ul>
  309.                             </li>
  310.                             <li class="li">Super offres</li>
  311.                             <li class="li">Clain Service Business</li>
  312.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "décoration"
  313.                                 }) }}'">Maison</li>
  314.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "jardinage" })
  315.                                 }}'">Jardin</li>
  316.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "extension cheveux" }) }}'">Extensions, perruques</li>
  317.                             <li class="li">
  318.                                 <i class="bi bi-star ps-1"></i>
  319.                                 Produits de marque
  320.                                 <i class="bi bi-chevron-down"></i>
  321.                                 <ul class="submenu">
  322.                                     <li class="cat-no-resp"
  323.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Chaussures" }) }}'">
  324.                                         Chaussures
  325.                                     </li>
  326.                                     <li class="cat-no-resp"
  327.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Montre" }) }}'">
  328.                                         Montre
  329.                                     </li>
  330.                                     <li class="cat-no-resp"
  331.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
  332.                                         Pour femme
  333.                                     </li>
  334.                                 </ul>
  335.                             </li>
  336.                         </ul>
  337.                     </div>
  338.                 </div>
  339.                 <hr style="margin-bottom: 0px !important;">
  340.             </div>
  341.         </div>
  342.         <div class="d-none" id="menus-responsive"
  343.             style="background-color: rgba(0,0,0,0.4) !important;z-index: 10000;position: fixed;top: 0px; width:100%; height: 100%;">
  344.             <div class="p-3" style="background-color: #ffffff !important; width:70%; HEIGHT: 100%; overflow-y: auto;">
  345.                 <div class="d-flex justify-content-between align-items-center">
  346.                     <a href="{{ path('app_home')}}">
  347.                         <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  348.                     </a>
  349.                     <button id="hamburgerClose" class="text-white" style="border: none !important;">
  350.                         <i class="bi bi-x fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
  351.                     </button>
  352.                 </div>
  353.                 <hr>
  354.                 <ul class="" style="list-style: none; padding-left: 0px !important;">
  355.                     <li onclick="window.location='{{ path('app_order_index', {'menu': 'commande', 'retour': 0}) }}'"><i
  356.                             class="bi bi-credit-card  ps-1 pe-2"></i>Mes commandes</li>
  357.                     <li onclick="window.location='{{ path('app_order_tracking', {'name': 'all', 'id': 0}) }}'"><i
  358.                             class="bi bi-truck  ps-1 pe-2"></i>Tracking</li>
  359.                     {# <li><i class="bi bi-clipboard2-heart  ps-1 pe-2"></i>Mes favoris</li>
  360.                     <li><i class="bi bi-chat-left-text  ps-1 pe-2"></i>Centre de Messagerie</li> #}
  361.                     <li onclick="window.location='{{ path('app_logout') }}'"><i
  362.                             class="bi bi-box-arrow-right ps-1 pe-2"></i>Déconnexion</li>
  363.                 </ul>
  364.                 <hr style="margin-bottom: 0px !important; margin-top:0px !important;">
  365.                 <div class="pt-2 pb-2">
  366.                     <i class="bi bi-list ps-1 pe-2"></i>Toutes les catégories
  367.                 </div>
  368.                 <hr style=" margin-top:0px !important;">
  369.                 <div class="d-flex flex-column">
  370.                     {% for item in categories %}
  371.                     <div class="catResp mb-2" style="cursor: pointer;"
  372.                         onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
  373.                         <img src="{{ asset('uploads/categories/' ~ item.imageName )}}" alt="" class="img-fluid"
  374.                             width="40" height="40">
  375.                         {{item.title}}
  376.                     </div>
  377.                     {% endfor %}
  378.                 </div>
  379.             </div>
  380.         </div>
  381.         {% else %}
  382.         <div class="nav-bar">
  383.             <div class="">
  384.                 <div class="pt-2 nav-top">
  385.                     <div class="">
  386.                         <div class="row justify-content-evenly align-items-center responsive-justify"
  387.                             style="margin-right: 0px !important; margin-left: 0px !important;">
  388.                             {# hamburger responsive #}
  389.                             <div class="col-md-1 d-none hamburger">
  390.                                 <button id="hamburger" class="text-white" style="border: none !important;">
  391.                                     <i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
  392.                                 </button>
  393.                                 <a href="{{ path('app_home')}}">
  394.                                     <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  395.                                 </a>
  396.                             </div>
  397.                             {# logo#}
  398.                             <div class="col-md-2 responsive-logo">
  399.                                 <a href="{{ path('app_home')}}">
  400.                                     <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  401.                                 </a>
  402.                             </div>
  403.                             {# form recherche #}
  404.                             <div class="col-md-7 form-nonConnect">
  405.                                 <div class="all-search" style="position: relative;">
  406.                                     <form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
  407.                                         <div class="search-container">
  408.                                             <input type="text" placeholder="Recherche..." name="searchname" required>
  409.                                             <button type="submit" class="btn"><i class="fas fa-search"></i></button>
  410.                                         </div>
  411.                                     </form>
  412.                                     <div class="searchImage me-5" style="position: absolute; top: 8%; right:0;">
  413.                                         <form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
  414.                                             enctype="multipart/form-data">
  415.                                             <label for="imageUpload" class="btn btn-outline-secondary">
  416.                                                 <i class="bi bi-camera"></i>
  417.                                             </label>
  418.                                             <input type="file" name="image" id="imageUpload" class="d-none"
  419.                                                 onchange="this.form.submit()">
  420.                                         </form>
  421.                                     </div>
  422.                                 </div>
  423.                             </div>
  424.                             {# devise #}
  425.                             <div
  426.                                 class="d-flex justify-content-center align-items-center col-md-1 custom-responsive flag-icon">
  427.                                 <span class="user-icon me-2">
  428.                                     <img src="https://flagcdn.com/w20/mg.png" srcset="https://flagcdn.com/w40/mg.png 2x"
  429.                                         width="20" height="13" alt="Madagascar">
  430.                                 </span>
  431.                                 <div class="mt-2 sing-in-top">
  432.                                     {# <span class="d-block">MGA</span> #}
  433.                                     <b>MGA</b>
  434.                                 </div>
  435.                             </div>
  436.                             {# sing in/sing up #}
  437.                             <div
  438.                                 class="tooltip-container d-flex justify-content-center align-items-center  col-md-1 custom-responsive inscription-icon">
  439.                                 <span class="user-icon">
  440.                                     <i class="bi bi-person fs-2"></i>
  441.                                 </span>
  442.                                 <span class="tooltip-text  p-4">
  443.                                     <div class="row flex-column align-items-center justify-content-center">
  444.                                         <a href="{{ path('app_login')}}" class="se-connecte">
  445.                                             <div class="col text-center mb-3 p-2 btn">
  446.                                                 Se connecter
  447.                                             </div>
  448.                                         </a>
  449.                                         <a href="{{ path('app_home_inscription')}}" class="inscrire">
  450.                                             <div class="col text-center btn mb-3"
  451.                                                 style="font-weight:700; color:rgb(0, 0, 0);">
  452.                                                 S'inscrire
  453.                                             </div>
  454.                                         </a>
  455.                                     </div>
  456.                                     <hr>
  457.                                     {# <ul style="list-style: none;">
  458.                                         <li><i class="bi bi-card-list ps-1 pe-2"></i>Mes commandes</li>
  459.                                         <li><i class="bi bi-credit-card  ps-1 pe-2"></i>Paiement</li>
  460.                                         <li><i class="bi bi-clipboard2-heart  ps-1 pe-2"></i>Mes favoris</li>
  461.                                         <li><i class="bi bi-chat-left-text  ps-1 pe-2"></i>Centre de Messagerie</li>
  462.                                     </ul> #}
  463.                                 </span>
  464.                                 {# <div class="mt-2 sing-in-top">
  465.                                     <span class="d-block">Bienvenue</span>
  466.                                     <b class="singIn">
  467.                                         <a href="{{ path('app_login')}}" class="se-connecte">Se connecter</a> / <a
  468.                                             href="{{ path('app_home_inscription')}}" class="inscrire">S'inscrire</a>
  469.                                     </b>
  470.                                 </div> #}
  471.                                 {# <div class="sing-in-top-overlay">
  472.                                     <div class="box">
  473.                                         <div class="row">
  474.                                             .connexion
  475.                                         </div>
  476.                                     </div>
  477.                                 </div> #}
  478.                             </div>
  479.                             {# panier #}
  480.                             <div class="d-flex justify-content-center align-items-center col-md-1 custom-responsive panier-icon"
  481.                                 onclick="window.location='{{ path('app_product_list_panier') }}'"
  482.                                 style="cursor: pointer;">
  483.                                 <span class="cart-icon">
  484.                                     <i class="bi bi-cart fs-2"></i>
  485.                                 </span>
  486.                                 <div class="mt-2 cart-top">
  487.                                     <span class="d-block">{{countListPanier}}</span>
  488.                                     <b>Panier</b>
  489.                                 </div>
  490.                             </div>
  491.                             {# connexion et panier responsive #}
  492.                             <div class="col-md-4 d-none hamburger">
  493.                                 <span class="d-flex justify-content-center align-items-center user-icon me-3"
  494.                                     style="cursor: pointer;" onclick="window.location='{{ path('app_login') }}'"
  495.                                     title="connexion">
  496.                                     <span class="text-connexion me-1" style="font-size: 14px;">Connexion</span><i
  497.                                         class="bi bi-box-arrow-in-right fs-2"></i>
  498.                                 </span>
  499.                                 <span class="cart-icon" style="position: relative; cursor: pointer;"
  500.                                     onclick="window.location='{{ path('app_product_list_panier') }}'"
  501.                                     title="Vos panier">
  502.                                     <span class="d-block"
  503.                                         style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
  504.                                     <i class="bi bi-cart fs-2"></i>
  505.                                 </span>
  506.                             </div>
  507.                         </div>
  508.                         {# recherche responsive #}
  509.                         <div class="row d-none hamburger"
  510.                             style="margin-right: 0px !important; margin-left: 0px !important;">
  511.                             <div class="col-md-12 mt-2" id="searchBar">
  512.                                 <div class="all-search" style="position: relative;">
  513.                                     <form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
  514.                                         <div class="search-container">
  515.                                             <input type="text" placeholder="Recherche..." name="searchname" required>
  516.                                             <button type="submit" class="btn btn-dark"><i
  517.                                                     class="fas fa-search"></i></button>
  518.                                         </div>
  519.                                     </form>
  520.                                     <div class="searchImage me-5" style="position: absolute; top: 8%; right: 0;">
  521.                                         <form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
  522.                                             enctype="multipart/form-data">
  523.                                             <label for="imageUpload" class="btn btn-outline-secondary">
  524.                                                 <i class="bi bi-camera"></i>
  525.                                             </label>
  526.                                             <input type="file" name="image" id="imageUpload" class="d-none"
  527.                                                 onchange="this.form.submit()">
  528.                                         </form>
  529.                                     </div>
  530.                                 </div>
  531.                             </div>
  532.                         </div>
  533.                     </div>
  534.                 </div>
  535.                 <div class="nav-menu responsive-nav-menu">
  536.                     <div class="col-md-12 mt-3">
  537.                         <ul class="d-flex justify-content-between align-items-center nav-menu-ul">
  538.                             <li class="li">
  539.                                 <i class="bi bi-list ps-1"></i>
  540.                                 Toutes les catégories
  541.                                 <i class="bi bi-chevron-down px-2"></i>
  542.                                 <ul class="submenu">
  543.                                     {% for item in categories %}
  544.                                     <li class="cat-no-resp"
  545.                                         onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
  546.                                         {{item.title}}</li>
  547.                                     {% endfor %}
  548.                                 </ul>
  549.                             </li>
  550.                             <li class="li">Super offres</li>
  551.                             <li class="li">Clain Service Business</li>
  552.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "décoration"
  553.                                 }) }}'">Maison</li>
  554.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "jardinage" })
  555.                                 }}'">Jardin</li>
  556.                             <li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "extension,cheveux" }) }}'">Extensions, perruques</li>
  557.                             <li class="li">
  558.                                 <i class="bi bi-star ps-1"></i>
  559.                                 Produits de marque
  560.                                 <i class="bi bi-chevron-down"></i>
  561.                                 <ul class="submenu">
  562.                                     <li class="cat-no-resp"
  563.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Montre" }) }}'">
  564.                                         Montre
  565.                                     </li>
  566.                                     <li class="cat-no-resp"
  567.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Chaussures" }) }}'">
  568.                                         Chaussures
  569.                                     </li>
  570.                                     <li class="cat-no-resp"
  571.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
  572.                                         Pour femme
  573.                                     </li>
  574.                                     {# <li
  575.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Chaussure timberland" }) }}'">
  576.                                         Timberland
  577.                                     </li>
  578.                                     <li
  579.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Chaussure air jord" }) }}'">
  580.                                         Air Jord
  581.                                     </li>
  582.                                     <li
  583.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Gucci" }) }}'">
  584.                                         Gucci
  585.                                     </li>
  586.                                     <li
  587.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Alo yoga" }) }}'">
  588.                                         Alo
  589.                                     </li>
  590.                                     <li
  591.                                         onclick="window.location='{{ path('app_cat_search', {'query': "sac Louis Vuitton" }) }}'">
  592.                                         Louis Vuitton
  593.                                     </li>
  594.                                     <li
  595.                                         onclick="window.location='{{ path('app_cat_search', {'query': "marque ⁠Christian Dior" }) }}'">
  596.                                          ⁠Christian Dior
  597.                                     </li> #}
  598.                                     {# <li
  599.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
  600.                                         Pour femme
  601.                                     </li>
  602.                                     <li
  603.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
  604.                                         Pour femme
  605.                                     </li>
  606.                                     <li
  607.                                         onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
  608.                                         Pour femme
  609.                                     </li> #}
  610.                                 </ul>
  611.                             </li>
  612.                         </ul>
  613.                     </div>
  614.                 </div>
  615.                 <hr style="margin-bottom: 0px !important;">
  616.             </div>
  617.         </div>
  618.         {# menus responsive #}
  619.         <div class="d-none" id="menus-responsive"
  620.             style="background-color: rgba(0,0,0,0.4) !important;z-index: 10000;position: fixed;top: 0px; width:100%; height: 100%;">
  621.             <div class="p-3" style="background-color: #ffffff !important; width:70%; HEIGHT: 100%; overflow-y: auto;">
  622.                 <div class="d-flex justify-content-between align-items-center">
  623.                     <a href="{{ path('app_home')}}">
  624.                         <img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
  625.                     </a>
  626.                     <button id="hamburgerClose" class="text-white" style="border: none !important;">
  627.                         <i class="bi bi-x fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
  628.                     </button>
  629.                 </div>
  630.                 <hr>
  631.                 <ul class="" style="list-style: none; padding-left: 0px !important;">
  632.                     <li onclick="window.location='{{ path('app_login') }}'"><i
  633.                             class="bi bi-box-arrow-in-right ps-1 pe-2"></i>Connexion</li>
  634.                     {# <li><i class="bi bi-credit-card  ps-1 pe-2"></i>Déconnexion</li> #}
  635.                     {# <li><i class="bi bi-clipboard2-heart  ps-1 pe-2"></i>Mes favoris</li>
  636.                     <li><i class="bi bi-chat-left-text  ps-1 pe-2"></i>Centre de Messagerie</li> #}
  637.                 </ul>
  638.                 <hr style="margin-bottom: 0px !important; margin-top:0px !important;">
  639.                 <div class="pt-2 pb-2">
  640.                     <i class="bi bi-list ps-1 pe-2"></i>Toutes les catégories
  641.                 </div>
  642.                 <hr style=" margin-top:0px !important;">
  643.                 <div class="d-flex flex-column">
  644.                     {% for item in categories %}
  645.                     <div class="catResp mb-2" style="cursor: pointer;"
  646.                         onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
  647.                         <img src="{{ asset('uploads/categories/' ~ item.imageName )}}" alt="" class="img-fluid"
  648.                             width="40" height="40">
  649.                         {{item.title}}
  650.                     </div>
  651.                     {% endfor %}
  652.                 </div>
  653.             </div>
  654.         </div>
  655.         {% endif %}
  656.         {# ZONE DE RECHERCHE #}
  657.         <div id="drop-overlay" class="drop-overlay d-none">
  658.             <p>Déposez l'image à rechercher ici</p>
  659.         </div>
  660.         <!-- Contenu spécifique de chaque page -->
  661.         {% block body %}{% endblock %}
  662.         {# FOOTER #}
  663.         <footer class="mt-4">
  664.             <div class="container-fluid pt-3 pb-3">
  665.                 <div class="row footer-first-row">
  666.                     <div class="col-md-3">
  667.                         <b>Service client</b>
  668.                         <ul>
  669.                             <li>Devis personnalisé</li>
  670.                             <li>Achats sécurisés</li>
  671.                             <li>Achats sécurisés</li>
  672.                             <li>Suivi de colis</li>
  673.                             <li>Contrôles qualité</li>
  674.                             <li>Expédition</li>
  675.                             <li>Logistique et transport</li>
  676.                         </ul>
  677.                     </div>
  678.                     <div class="col-md-3">
  679.                         <div class="mb-4">
  680.                             <b>Liens utiles</b>
  681.                             <ul>
  682.                                 <li>Commissions</li>
  683.                                 <li>Assurance</li>
  684.                                 <li>Contact</li>
  685.                                 <li>Espace client</li>
  686.                                 <li>Blog</li>
  687.                             </ul>
  688.                         </div>
  689.                     </div>
  690.                     <div class="col-md-3">
  691.                         <b>Payer avec</b>
  692.                         <img src="{{ asset('img/payement.PNG')}}" alt="" class="img-fluid">
  693.                     </div>
  694.                     <div class="col-md-3">
  695.                         <b>Suivez-nous sur :</b>
  696.                         <div class="d-flex mt-2">
  697.                             <div class="bi bi-facebook fs-3"></div>
  698.                             <div class="bi bi-messenger fs-3 px-3"></div>
  699.                             <div class="bi bi-whatsapp fs-3"></div>
  700.                         </div>
  701.                     </div>
  702.                 </div>
  703.                 <div class="row footer-second-row">
  704.                     <div class="col-md-4">
  705.                         {# En ChineAdresse: Guangzhou et Nanyang – Chine
  706.                         Email: princeclain4@gmail.com
  707.                         Téléphone: +86 173 1832 9506A
  708.                         Madagascar
  709.                         Adresse : Akadievo ALASORA, à côté gauche de la banque Bred – 101 Antananarivo –
  710.                         MadagascarEmail: contact@clain-service.comTéléphone: +261 38 53 040 65 #}
  711.                         <b>En Chine</b>
  712.                         <ul>
  713.                             <li><span style="text-decoration: underline;">Adresse:</span> Guangzhou et Nanyang – Chine
  714.                             </li>
  715.                             <li><span style="text-decoration: underline;">Email:</span> princeclain4@gmail.com</li>
  716.                             <li><span style="text-decoration: underline;">Téléphone:</span> +86 173 1832 9506</li>
  717.                         </ul>
  718.                     </div>
  719.                     <div class="col-md-8">
  720.                         <b>À Madagascar</b>
  721.                         <ul>
  722.                             <li><span style="text-decoration: underline;">Adresse:</span> Akadievo ALASORA, à côté
  723.                                 gauche de la banque Bred – 101 Antananarivo – Madagascar</li>
  724.                             <li><span style="text-decoration: underline;">Email:</span> contact@clain-service.com</li>
  725.                             <li><span style="text-decoration: underline;">Téléphone:</span> +261 38 53 040 65</li>
  726.                         </ul>
  727.                     </div>
  728.                 </div>
  729.             </div>
  730.             <div class="end-row">
  731.                 <div class="container-fluid p-3">
  732.                     <p>
  733.                         Protection de la Propriété Intellectuelle - Politique de Confidentialité - Plan du site -
  734.                         Conditions d’Utilisation et Informations Légales - Droits de nos clients de l'UE -Conditions
  735.                         Générales pour les Consommateurs de l'UE/EEE/UK - Informations destinées aux forces de l'ordre
  736.                         -Tous droits réservés
  737.                     </p>
  738.                 </div>
  739.             </div>
  740.         </footer>
  741.     </div>
  742.     <!-- Scripts JavaScript -->
  743.     <!-- jQuery (en haut pour éviter les conflits) -->
  744.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  745.     <!-- Popper.js et Bootstrap -->
  746.     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  747.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  748.     {# routing #}
  749.     <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
  750.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  751.     {# leaflet map #}
  752.     {# //
  753.     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> #}
  754.     {# //
  755.     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> #}
  756.     {# google maps #}
  757.     <script async
  758.         src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrSwB2Uph8jF9LxgBVjMt4qIPIKKCePsc&callback=initMap"
  759.         defer></script>
  760.     <!-- Swiper JS -->
  761.     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  762.     {# SWIPER SLIDER #}
  763.     <script>
  764.         const swiper = new Swiper('.mySwiper', {
  765.             slidesPerView: 2,
  766.             spaceBetween: 10,
  767.             navigation: {
  768.                 nextEl: '.swiper-button-next',
  769.                 prevEl: '.swiper-button-prev',
  770.             },
  771.             breakpoints: {
  772.                 0: {
  773.                     slidesPerView: 2, // sur tous les écrans, y compris téléphone
  774.                 },
  775.                 768: {
  776.                     slidesPerView: 3, // par exemple, sur tablette
  777.                 },
  778.                 1024: {
  779.                     slidesPerView: 4, // sur desktop
  780.                 }
  781.             }
  782.         });
  783.     </script>
  784.     <script>
  785.         function adjustBodyPadding() {
  786.             // Récupérer la hauteur du header
  787.             var headerHeight = document.querySelector('.nav-bar').offsetHeight;
  788.             // Appliquer la hauteur du header comme padding-top du body
  789.             document.body.style.paddingTop = (headerHeight) + 'px';
  790.         }
  791.         // Appeler la fonction au chargement de la page
  792.         window.addEventListener('load', adjustBodyPadding);
  793.         // Appeler la fonction à chaque redimensionnement de la fenêtre
  794.         window.addEventListener('resize', adjustBodyPadding);
  795.     </script>
  796.     {# DRAG ET DROP DE RECHERCHE IMAGE #}
  797.     <script>
  798.         document.addEventListener("DOMContentLoaded", function () {
  799.             let dropOverlay = document.getElementById("drop-overlay");  // Overlay d'indication de drag & drop
  800.             let imageInput = document.getElementById("imageUpload");    // Champ de fichier dans ton formulaire
  801.             let form = document.getElementById("searchImageForm");
  802.             // const imageSearch = document.getElementById('imageSearch');
  803.             const loader = document.getElementById('loader');    // Formulaire pour soumettre l'image
  804.             // Marquer l'état du drag
  805.             let isDragging = false;
  806.             // Empêcher le comportement par défaut du dragover
  807.             document.body.addEventListener("dragover", function (e) {
  808.                 e.preventDefault();  // Toujours nécessaire pour accepter le drag
  809.                 if (!isDragging) {
  810.                     // Si on n'est pas encore en train de glisser sur la zone, on affiche l'overlay
  811.                     dropOverlay.classList.remove("d-none");
  812.                     isDragging = true;  // Marquer qu'on est dans la zone de dépôt
  813.                 }
  814.             });
  815.             // Lorsqu'on entre dans la zone de dépôt
  816.             document.body.addEventListener("dragenter", function (e) {
  817.                 e.preventDefault();  // Empêcher le comportement par défaut
  818.             });
  819.             // Lorsqu'on sort de la zone de dépôt
  820.             document.body.addEventListener("dragleave", function (e) {
  821.                 e.preventDefault();
  822.                 // Vérifier que le drag sort de la zone sans avoir déposé d'éléments
  823.                 if (isDragging && !dropOverlay.contains(e.relatedTarget)) {
  824.                     dropOverlay.classList.add("d-none");  // Cacher l'overlay
  825.                     isDragging = false;  // Réinitialiser l'état
  826.                 }
  827.             });
  828.             // Quand un fichier est déposé
  829.             document.body.addEventListener("drop", function (e) {
  830.                 e.preventDefault();
  831.                 dropOverlay.classList.add("d-none");  // Cacher l'overlay après le dépôt
  832.                 isDragging = false;  // Réinitialiser l'état du drag
  833.                 let files = e.dataTransfer.files;
  834.                 if (files.length > 0) {
  835.                     // Assigner l'image déposée au champ de fichier et soumettre le formulaire
  836.                     imageInput.files = files;
  837.                     form.submit();  // Soumettre automatiquement le formulaire
  838.                     loader.style.display = 'flex';
  839.                     document.body.classList.add('loading');
  840.                 }
  841.             });
  842.             // Gérer l'upload quand un fichier est sélectionné via l'input
  843.             imageInput.addEventListener("change", function () {
  844.                 if (this.files.length > 0) {
  845.                     form.submit();  // Soumettre automatiquement le formulaire lors de la sélection
  846.                     loader.style.display = 'flex';
  847.                     document.body.classList.add('loading');
  848.                 }
  849.             });
  850.             // Cacher le loader après que la page soit complètement chargée
  851.             window.addEventListener('load', function () {
  852.                 loader.style.display = 'none';  // Cache le loader
  853.                 document.body.classList.remove('loading');
  854.                 document.body.style.overflow = 'auto';  // Réactive le défilement
  855.             });
  856.         });
  857.     </script>
  858.     {# Live‑chat Tawk.to #}
  859.     <script type="text/javascript">
  860.         var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
  861.         (function () {
  862.             var s1 = document.createElement("script"),
  863.                 s0 = document.getElementsByTagName("script")[0];
  864.             s1.async = true;
  865.             s1.src = "https://embed.tawk.to/68527002b75ad4190ffc49c5/1iu10b315";
  866.             s1.charset = "UTF-8";
  867.             s1.setAttribute("crossorigin", "*");
  868.             s0.parentNode.insertBefore(s1, s0);
  869.         })();
  870.     </script>
  871. </body>
  872. </html>