<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="ventes en ligne, rapeto service, madagascar">
<title>{% block title %} Dashboard Templates !{% endblock %}</title>
<link rel="icon"
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>">
<!-- Autres balises head -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
<!-- Lien vers le fichier CSS de Bootstrap 5 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Lien vers les icônes de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- Lien vers AOS animation -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
{# font awesome #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
{# leaflet #}
{#
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> #}
{#
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> #}
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('styleScss') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
{# LOADER PAGE #}
<div id="loader-wrapper">
<div id="loader-page"></div>
</div>
{# LOADER RECHERCHE#}
<div id="loader">
<h4>Recherche en cours...</h4>
<div class="loader"></div> <!-- Le spinner -->
</div>
<div class="wrapper">
{# HEADER #}
{% if app.user %}
<div class="nav-bar">
<div class="">
<div class="pt-2 mb-3 nav-top">
<div class="">
<div class="row justify-content-center align-items-center"
style="margin-right: 0px !important; margin-left: 0px !important;">
{# hamburger responsive #}
<div class="col-md-1 d-none hamburger">
<button id="hamburger" class="text-white" style="border: none !important;">
<i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
</button>
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
</div>
{# logo #}
<div class="col-md-2 responsive-logo">
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
</div>
{# form recherche #}
<div class="col-md-6 no-responsive">
{# <form action="{{ path('app_product_search')}}" method="get">
<div class="search-container">
<input type="text" placeholder="Recherche..." name="searchname" required>
<button type="submit" class="btn btn-dark"><i
class="fas fa-search"></i></button>
</div>
</form> #}
<div class="all-search" style="position: relative;">
<form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
<div class="search-container">
<input type="text" placeholder="Recherche..." name="searchname" required>
<button type="submit" class="btn btn-dark"><i
class="fas fa-search"></i></button>
</div>
</form>
<div class="searchImage me-5" style="position: absolute; top: 8%; right:0;">
<form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
enctype="multipart/form-data">
<label for="imageUpload" class="btn btn-outline-secondary">
<i class="bi bi-camera"></i>
</label>
<input type="file" name="image" id="imageUpload" class="d-none"
onchange="this.form.submit()">
</form>
</div>
</div>
</div>
{# devise #}
<div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
<span class="user-icon me-2">
<img src="https://flagcdn.com/w20/mg.png" srcset="https://flagcdn.com/w40/mg.png 2x"
width="20" height="13" alt="Madagascar">
</span>
<div class="mt-2 sing-in-top">
{# <span class="d-block">FR/</span> #}
<b>MGA</b>
</div>
</div>
{# configuration #}
{% if is_granted('ROLE_ADMIN') %}
{# sing in/sing up #}
<div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
<span class="user-icon me-2" onclick="window.location='{{ path('app_logout')}}'"
title="Deconnecter">
<i class="bi bi-power fs-2"></i>
</span>
{# <div class="mt-2 sing-in-top">
<span class="d-block">Bienvenue</span>
<b class="singIn"><a href="{{ path('app_logout')}}"
class="deconnecte">Deconnecter</a></b>
</div> #}
</div>
<div class="d-flex justify-content-center align-items-center col-md-1 no-responsive"
onclick="window.location='{{ path('app_product_back_index', {'id': -1}) }}'"
style="cursor: pointer;">
<span class="config-icon me-2">
<i class="bi bi-gear fs-2" title="configuration"></i>
</span>
<div class="mt-2 sing-in-top">
{# <b>Configuration</b> #}
</div>
</div>
{% else %}
{# sing in/sing up #}
<div class="d-flex justify-content-center align-items-center col-md-1 no-responsive">
<span class="user-icon me-2" onclick="window.location='{{ path('app_logout')}}'"
title="Deconnecter">
<i class="bi bi-power fs-2"></i>
</span>
{# <div class="mt-2 sing-in-top">
<span class="d-block">Bienvenue</span>
<b class="singIn"><a href="{{ path('app_logout')}}"
class="deconnecte">Deconnecter</a></b>
</div> #}
{# <div class="sing-in-top-overlay">
<div class="box">
<div class="row">
.connexion
</div>
</div>
</div> #}
</div>
<div
class="tooltip-container d-flex justify-content-center align-items-center col-md-1 no-responsive">
<span class="user-icon">
<i class="bi bi-gear fs-2"></i>
</span>
<span class="tooltip-text p-4">
{# <div class="row flex-column align-items-center justify-content-center">
<a href="{{ path('app_login')}}" class="se-connecte">
<div class="col text-center mb-3 p-2 btn">
Se connecter
</div>
</a>
<a href="{{ path('app_home_inscription')}}" class="inscrire">
<div class="col text-center btn"
style="font-weight:700; color:rgb(0, 0, 0);">
S'inscrire
</div>
</a>
</div>
<hr> #}
<ul style="list-style: none;">
<li>
<a href="{{ path('app_home_edit_profil', {'id': app.user.id })}}"
style="text-decoration: none; color:gray;">
<i class="bi bi-person ps-1 pe-2"></i>Edit profil
</a>
</li>
<li>
<a href="{{ path('app_order_index', {'menu': 'commande', 'retour': 0})}}"
style="text-decoration: none; color:gray;">
<i class="bi bi-card-list ps-1 pe-2"></i>Mes commandes
</a>
</li>
{# <li><i class="bi bi-credit-card ps-1 pe-2"></i>Paiement</li>
<li><i class="bi bi-clipboard2-heart ps-1 pe-2"></i>Mes favoris</li>
<li><i class="bi bi-chat-left-text ps-1 pe-2"></i>Centre de Messagerie</li> #}
</ul>
</span>
{# <div class="mt-2 sing-in-top">
<span class="d-block">Bienvenue</span>
<b class="singIn">
<a href="{{ path('app_login')}}" class="se-connecte">Se connecter</a> / <a
href="{{ path('app_home_inscription')}}" class="inscrire">S'inscrire</a>
</b>
</div> #}
{# <div class="sing-in-top-overlay">
<div class="box">
<div class="row">
.connexion
</div>
</div>
</div> #}
</div>
{% endif %}
{# panier #}
{# <div class="d-flex justify-content-center align-items-center col-md-1"
onclick="window.location='{{ path('app_product_list_panier') }}'"
style="cursor: pointer;">
<span class="cart-icon me-2">
<i class="bi bi-cart fs-2"></i>
</span> #}
{# <div class="mt-2 cart-top">
<span class="d-block">{{countListPanier}}</span>
<b>Panier</b>
</div> #}
{#
</div> #}
<div class="d-flex justify-content-center align-items-center col-md-1 no-responsive"
onclick="window.location='{{ path('app_product_list_panier') }}'"
style="cursor: pointer;">
{# <span class="cart-icon me-3" style="position: relative;">
<span class="d-block"
style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
<i class="bi bi-cart fs-2"></i>
</span> #}
<span class="cart-icon">
<i class="bi bi-cart fs-2"></i>
</span>
<div class="mt-2 cart-top">
<span class="d-block">{{countListPanier}}</span>
<b>Panier</b>
</div>
</div>
{# hamburger responsive #}
{# <div class="col-md-6 d-none hamburger">
<div class="d-flex justify-content-center align-items-center"
onclick="window.location='{{ path('app_product_list_panier') }}'"
style="cursor: pointer;">
<span class="cart-icon me-3" style="position: relative;">
<span class="d-block"
style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
<i class="bi bi-cart fs-2"></i>
</span>
</div>
<button id="hamburger" class="text-white" style="border: none !important;">
<i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
</button>
</div> #}
{# connexion et panier responsive #}
<div class="col-md-4 d-none hamburger">
<span class="d-flex justify-content-center align-items-center user-icon me-3"
style="cursor: pointer;" onclick="window.location='{{ path('app_logout')}}'"
title="Deconnecter">
<span class="text-deconnexion me-1" style="font-size: 14px;">Déconnexion</span><i
class="bi bi-box-arrow-right fs-2"></i>
</span>
<span class="cart-icon" style="position: relative; cursor: pointer;"
onclick="window.location='{{ path('app_product_list_panier') }}'"
title="Vos panier">
<span class="d-block"
style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
<i class="bi bi-cart fs-2"></i>
</span>
</div>
</div>
{# recherche responsive #}
<div class="row d-none hamburger"
style="margin-left: 0px !important; margin-right: 0px !important;">
<div class="col-md-12 mt-2" id="searchBar">
<div class="all-search" style="position: relative;">
<form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
<div class="search-container">
<input type="text" placeholder="Recherche..." name="searchname" required>
<button type="submit" class="btn btn-dark"><i
class="fas fa-search"></i></button>
</div>
</form>
<div class="searchImage me-5" style="position: absolute; top: 8%; right: 0;">
<form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
enctype="multipart/form-data">
<label for="imageUpload" class="btn btn-outline-secondary">
<i class="bi bi-camera"></i>
</label>
<input type="file" name="image" id="imageUpload" class="d-none"
onchange="this.form.submit()">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-menu">
<div class="col-md-12 mt-3">
<ul class="d-flex justify-content-between align-items-center nav-menu-ul">
<li class="li"><i class="bi bi-list ps-1"></i>Toutes les catégories<i
class="bi bi-chevron-down px-2"></i>
<ul class="submenu">
{% for item in categories %}
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
{{item.title}}</li>
{% endfor %}
</ul>
</li>
<li class="li">Super offres</li>
<li class="li">Clain Service Business</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "décoration"
}) }}'">Maison</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "jardinage" })
}}'">Jardin</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "extension cheveux" }) }}'">Extensions, perruques</li>
<li class="li">
<i class="bi bi-star ps-1"></i>
Produits de marque
<i class="bi bi-chevron-down"></i>
<ul class="submenu">
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Chaussures" }) }}'">
Chaussures
</li>
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Montre" }) }}'">
Montre
</li>
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
Pour femme
</li>
</ul>
</li>
</ul>
</div>
</div>
<hr style="margin-bottom: 0px !important;">
</div>
</div>
<div class="d-none" id="menus-responsive"
style="background-color: rgba(0,0,0,0.4) !important;z-index: 10000;position: fixed;top: 0px; width:100%; height: 100%;">
<div class="p-3" style="background-color: #ffffff !important; width:70%; HEIGHT: 100%; overflow-y: auto;">
<div class="d-flex justify-content-between align-items-center">
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
<button id="hamburgerClose" class="text-white" style="border: none !important;">
<i class="bi bi-x fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
</button>
</div>
<hr>
<ul class="" style="list-style: none; padding-left: 0px !important;">
<li onclick="window.location='{{ path('app_order_index', {'menu': 'commande', 'retour': 0}) }}'"><i
class="bi bi-credit-card ps-1 pe-2"></i>Mes commandes</li>
<li onclick="window.location='{{ path('app_order_tracking', {'name': 'all', 'id': 0}) }}'"><i
class="bi bi-truck ps-1 pe-2"></i>Tracking</li>
{# <li><i class="bi bi-clipboard2-heart ps-1 pe-2"></i>Mes favoris</li>
<li><i class="bi bi-chat-left-text ps-1 pe-2"></i>Centre de Messagerie</li> #}
<li onclick="window.location='{{ path('app_logout') }}'"><i
class="bi bi-box-arrow-right ps-1 pe-2"></i>Déconnexion</li>
</ul>
<hr style="margin-bottom: 0px !important; margin-top:0px !important;">
<div class="pt-2 pb-2">
<i class="bi bi-list ps-1 pe-2"></i>Toutes les catégories
</div>
<hr style=" margin-top:0px !important;">
<div class="d-flex flex-column">
{% for item in categories %}
<div class="catResp mb-2" style="cursor: pointer;"
onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
<img src="{{ asset('uploads/categories/' ~ item.imageName )}}" alt="" class="img-fluid"
width="40" height="40">
{{item.title}}
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div class="nav-bar">
<div class="">
<div class="pt-2 nav-top">
<div class="">
<div class="row justify-content-evenly align-items-center responsive-justify"
style="margin-right: 0px !important; margin-left: 0px !important;">
{# hamburger responsive #}
<div class="col-md-1 d-none hamburger">
<button id="hamburger" class="text-white" style="border: none !important;">
<i class="bi bi-list fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
</button>
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
</div>
{# logo#}
<div class="col-md-2 responsive-logo">
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
</div>
{# form recherche #}
<div class="col-md-7 form-nonConnect">
<div class="all-search" style="position: relative;">
<form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
<div class="search-container">
<input type="text" placeholder="Recherche..." name="searchname" required>
<button type="submit" class="btn"><i class="fas fa-search"></i></button>
</div>
</form>
<div class="searchImage me-5" style="position: absolute; top: 8%; right:0;">
<form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
enctype="multipart/form-data">
<label for="imageUpload" class="btn btn-outline-secondary">
<i class="bi bi-camera"></i>
</label>
<input type="file" name="image" id="imageUpload" class="d-none"
onchange="this.form.submit()">
</form>
</div>
</div>
</div>
{# devise #}
<div
class="d-flex justify-content-center align-items-center col-md-1 custom-responsive flag-icon">
<span class="user-icon me-2">
<img src="https://flagcdn.com/w20/mg.png" srcset="https://flagcdn.com/w40/mg.png 2x"
width="20" height="13" alt="Madagascar">
</span>
<div class="mt-2 sing-in-top">
{# <span class="d-block">MGA</span> #}
<b>MGA</b>
</div>
</div>
{# sing in/sing up #}
<div
class="tooltip-container d-flex justify-content-center align-items-center col-md-1 custom-responsive inscription-icon">
<span class="user-icon">
<i class="bi bi-person fs-2"></i>
</span>
<span class="tooltip-text p-4">
<div class="row flex-column align-items-center justify-content-center">
<a href="{{ path('app_login')}}" class="se-connecte">
<div class="col text-center mb-3 p-2 btn">
Se connecter
</div>
</a>
<a href="{{ path('app_home_inscription')}}" class="inscrire">
<div class="col text-center btn mb-3"
style="font-weight:700; color:rgb(0, 0, 0);">
S'inscrire
</div>
</a>
</div>
<hr>
{# <ul style="list-style: none;">
<li><i class="bi bi-card-list ps-1 pe-2"></i>Mes commandes</li>
<li><i class="bi bi-credit-card ps-1 pe-2"></i>Paiement</li>
<li><i class="bi bi-clipboard2-heart ps-1 pe-2"></i>Mes favoris</li>
<li><i class="bi bi-chat-left-text ps-1 pe-2"></i>Centre de Messagerie</li>
</ul> #}
</span>
{# <div class="mt-2 sing-in-top">
<span class="d-block">Bienvenue</span>
<b class="singIn">
<a href="{{ path('app_login')}}" class="se-connecte">Se connecter</a> / <a
href="{{ path('app_home_inscription')}}" class="inscrire">S'inscrire</a>
</b>
</div> #}
{# <div class="sing-in-top-overlay">
<div class="box">
<div class="row">
.connexion
</div>
</div>
</div> #}
</div>
{# panier #}
<div class="d-flex justify-content-center align-items-center col-md-1 custom-responsive panier-icon"
onclick="window.location='{{ path('app_product_list_panier') }}'"
style="cursor: pointer;">
<span class="cart-icon">
<i class="bi bi-cart fs-2"></i>
</span>
<div class="mt-2 cart-top">
<span class="d-block">{{countListPanier}}</span>
<b>Panier</b>
</div>
</div>
{# connexion et panier responsive #}
<div class="col-md-4 d-none hamburger">
<span class="d-flex justify-content-center align-items-center user-icon me-3"
style="cursor: pointer;" onclick="window.location='{{ path('app_login') }}'"
title="connexion">
<span class="text-connexion me-1" style="font-size: 14px;">Connexion</span><i
class="bi bi-box-arrow-in-right fs-2"></i>
</span>
<span class="cart-icon" style="position: relative; cursor: pointer;"
onclick="window.location='{{ path('app_product_list_panier') }}'"
title="Vos panier">
<span class="d-block"
style="color: brown; position:absolute; top:-5px; left:40%; font-size:13px;">{{countListPanier}}</span>
<i class="bi bi-cart fs-2"></i>
</span>
</div>
</div>
{# recherche responsive #}
<div class="row d-none hamburger"
style="margin-right: 0px !important; margin-left: 0px !important;">
<div class="col-md-12 mt-2" id="searchBar">
<div class="all-search" style="position: relative;">
<form action="{{ path('app_product_search_item')}}" method="get" id="searchForm">
<div class="search-container">
<input type="text" placeholder="Recherche..." name="searchname" required>
<button type="submit" class="btn btn-dark"><i
class="fas fa-search"></i></button>
</div>
</form>
<div class="searchImage me-5" style="position: absolute; top: 8%; right: 0;">
<form id="searchImageForm" action="{{ path('app_image_search') }}" method="post"
enctype="multipart/form-data">
<label for="imageUpload" class="btn btn-outline-secondary">
<i class="bi bi-camera"></i>
</label>
<input type="file" name="image" id="imageUpload" class="d-none"
onchange="this.form.submit()">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-menu responsive-nav-menu">
<div class="col-md-12 mt-3">
<ul class="d-flex justify-content-between align-items-center nav-menu-ul">
<li class="li">
<i class="bi bi-list ps-1"></i>
Toutes les catégories
<i class="bi bi-chevron-down px-2"></i>
<ul class="submenu">
{% for item in categories %}
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
{{item.title}}</li>
{% endfor %}
</ul>
</li>
<li class="li">Super offres</li>
<li class="li">Clain Service Business</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "décoration"
}) }}'">Maison</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "jardinage" })
}}'">Jardin</li>
<li class="li cat-no-resp" onclick="window.location='{{ path('app_cat_search', {'query': "extension,cheveux" }) }}'">Extensions, perruques</li>
<li class="li">
<i class="bi bi-star ps-1"></i>
Produits de marque
<i class="bi bi-chevron-down"></i>
<ul class="submenu">
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Montre" }) }}'">
Montre
</li>
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Chaussures" }) }}'">
Chaussures
</li>
<li class="cat-no-resp"
onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
Pour femme
</li>
{# <li
onclick="window.location='{{ path('app_cat_search', {'query': "Chaussure timberland" }) }}'">
Timberland
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "Chaussure air jord" }) }}'">
Air Jord
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "Gucci" }) }}'">
Gucci
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "Alo yoga" }) }}'">
Alo
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "sac Louis Vuitton" }) }}'">
Louis Vuitton
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "marque Christian Dior" }) }}'">
Christian Dior
</li> #}
{# <li
onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
Pour femme
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
Pour femme
</li>
<li
onclick="window.location='{{ path('app_cat_search', {'query': "Pour femme" }) }}'">
Pour femme
</li> #}
</ul>
</li>
</ul>
</div>
</div>
<hr style="margin-bottom: 0px !important;">
</div>
</div>
{# menus responsive #}
<div class="d-none" id="menus-responsive"
style="background-color: rgba(0,0,0,0.4) !important;z-index: 10000;position: fixed;top: 0px; width:100%; height: 100%;">
<div class="p-3" style="background-color: #ffffff !important; width:70%; HEIGHT: 100%; overflow-y: auto;">
<div class="d-flex justify-content-between align-items-center">
<a href="{{ path('app_home')}}">
<img src="{{ asset('img/logoClain.PNG')}}" alt="" width="160px">
</a>
<button id="hamburgerClose" class="text-white" style="border: none !important;">
<i class="bi bi-x fs-2"></i> <!-- Icône Hamburger de Bootstrap Icons -->
</button>
</div>
<hr>
<ul class="" style="list-style: none; padding-left: 0px !important;">
<li onclick="window.location='{{ path('app_login') }}'"><i
class="bi bi-box-arrow-in-right ps-1 pe-2"></i>Connexion</li>
{# <li><i class="bi bi-credit-card ps-1 pe-2"></i>Déconnexion</li> #}
{# <li><i class="bi bi-clipboard2-heart ps-1 pe-2"></i>Mes favoris</li>
<li><i class="bi bi-chat-left-text ps-1 pe-2"></i>Centre de Messagerie</li> #}
</ul>
<hr style="margin-bottom: 0px !important; margin-top:0px !important;">
<div class="pt-2 pb-2">
<i class="bi bi-list ps-1 pe-2"></i>Toutes les catégories
</div>
<hr style=" margin-top:0px !important;">
<div class="d-flex flex-column">
{% for item in categories %}
<div class="catResp mb-2" style="cursor: pointer;"
onclick="window.location='{{ path('app_cat_search', {'query': item.title }) }}'">
<img src="{{ asset('uploads/categories/' ~ item.imageName )}}" alt="" class="img-fluid"
width="40" height="40">
{{item.title}}
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{# ZONE DE RECHERCHE #}
<div id="drop-overlay" class="drop-overlay d-none">
<p>Déposez l'image à rechercher ici</p>
</div>
<!-- Contenu spécifique de chaque page -->
{% block body %}{% endblock %}
{# FOOTER #}
<footer class="mt-4">
<div class="container-fluid pt-3 pb-3">
<div class="row footer-first-row">
<div class="col-md-3">
<b>Service client</b>
<ul>
<li>Devis personnalisé</li>
<li>Achats sécurisés</li>
<li>Achats sécurisés</li>
<li>Suivi de colis</li>
<li>Contrôles qualité</li>
<li>Expédition</li>
<li>Logistique et transport</li>
</ul>
</div>
<div class="col-md-3">
<div class="mb-4">
<b>Liens utiles</b>
<ul>
<li>Commissions</li>
<li>Assurance</li>
<li>Contact</li>
<li>Espace client</li>
<li>Blog</li>
</ul>
</div>
</div>
<div class="col-md-3">
<b>Payer avec</b>
<img src="{{ asset('img/payement.PNG')}}" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<b>Suivez-nous sur :</b>
<div class="d-flex mt-2">
<div class="bi bi-facebook fs-3"></div>
<div class="bi bi-messenger fs-3 px-3"></div>
<div class="bi bi-whatsapp fs-3"></div>
</div>
</div>
</div>
<div class="row footer-second-row">
<div class="col-md-4">
{# En ChineAdresse: Guangzhou et Nanyang – Chine
Email: princeclain4@gmail.com
Téléphone: +86 173 1832 9506A
Madagascar
Adresse : Akadievo ALASORA, à côté gauche de la banque Bred – 101 Antananarivo –
MadagascarEmail: contact@clain-service.comTéléphone: +261 38 53 040 65 #}
<b>En Chine</b>
<ul>
<li><span style="text-decoration: underline;">Adresse:</span> Guangzhou et Nanyang – Chine
</li>
<li><span style="text-decoration: underline;">Email:</span> princeclain4@gmail.com</li>
<li><span style="text-decoration: underline;">Téléphone:</span> +86 173 1832 9506</li>
</ul>
</div>
<div class="col-md-8">
<b>À Madagascar</b>
<ul>
<li><span style="text-decoration: underline;">Adresse:</span> Akadievo ALASORA, à côté
gauche de la banque Bred – 101 Antananarivo – Madagascar</li>
<li><span style="text-decoration: underline;">Email:</span> contact@clain-service.com</li>
<li><span style="text-decoration: underline;">Téléphone:</span> +261 38 53 040 65</li>
</ul>
</div>
</div>
</div>
<div class="end-row">
<div class="container-fluid p-3">
<p>
Protection de la Propriété Intellectuelle - Politique de Confidentialité - Plan du site -
Conditions d’Utilisation et Informations Légales - Droits de nos clients de l'UE -Conditions
Générales pour les Consommateurs de l'UE/EEE/UK - Informations destinées aux forces de l'ordre
-Tous droits réservés
</p>
</div>
</div>
</footer>
</div>
<!-- Scripts JavaScript -->
<!-- jQuery (en haut pour éviter les conflits) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js et Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
{# routing #}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
{# leaflet map #}
{# //
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> #}
{# //
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> #}
{# google maps #}
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrSwB2Uph8jF9LxgBVjMt4qIPIKKCePsc&callback=initMap"
defer></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{# SWIPER SLIDER #}
<script>
const swiper = new Swiper('.mySwiper', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
0: {
slidesPerView: 2, // sur tous les écrans, y compris téléphone
},
768: {
slidesPerView: 3, // par exemple, sur tablette
},
1024: {
slidesPerView: 4, // sur desktop
}
}
});
</script>
<script>
function adjustBodyPadding() {
// Récupérer la hauteur du header
var headerHeight = document.querySelector('.nav-bar').offsetHeight;
// Appliquer la hauteur du header comme padding-top du body
document.body.style.paddingTop = (headerHeight) + 'px';
}
// Appeler la fonction au chargement de la page
window.addEventListener('load', adjustBodyPadding);
// Appeler la fonction à chaque redimensionnement de la fenêtre
window.addEventListener('resize', adjustBodyPadding);
</script>
{# DRAG ET DROP DE RECHERCHE IMAGE #}
<script>
document.addEventListener("DOMContentLoaded", function () {
let dropOverlay = document.getElementById("drop-overlay"); // Overlay d'indication de drag & drop
let imageInput = document.getElementById("imageUpload"); // Champ de fichier dans ton formulaire
let form = document.getElementById("searchImageForm");
// const imageSearch = document.getElementById('imageSearch');
const loader = document.getElementById('loader'); // Formulaire pour soumettre l'image
// Marquer l'état du drag
let isDragging = false;
// Empêcher le comportement par défaut du dragover
document.body.addEventListener("dragover", function (e) {
e.preventDefault(); // Toujours nécessaire pour accepter le drag
if (!isDragging) {
// Si on n'est pas encore en train de glisser sur la zone, on affiche l'overlay
dropOverlay.classList.remove("d-none");
isDragging = true; // Marquer qu'on est dans la zone de dépôt
}
});
// Lorsqu'on entre dans la zone de dépôt
document.body.addEventListener("dragenter", function (e) {
e.preventDefault(); // Empêcher le comportement par défaut
});
// Lorsqu'on sort de la zone de dépôt
document.body.addEventListener("dragleave", function (e) {
e.preventDefault();
// Vérifier que le drag sort de la zone sans avoir déposé d'éléments
if (isDragging && !dropOverlay.contains(e.relatedTarget)) {
dropOverlay.classList.add("d-none"); // Cacher l'overlay
isDragging = false; // Réinitialiser l'état
}
});
// Quand un fichier est déposé
document.body.addEventListener("drop", function (e) {
e.preventDefault();
dropOverlay.classList.add("d-none"); // Cacher l'overlay après le dépôt
isDragging = false; // Réinitialiser l'état du drag
let files = e.dataTransfer.files;
if (files.length > 0) {
// Assigner l'image déposée au champ de fichier et soumettre le formulaire
imageInput.files = files;
form.submit(); // Soumettre automatiquement le formulaire
loader.style.display = 'flex';
document.body.classList.add('loading');
}
});
// Gérer l'upload quand un fichier est sélectionné via l'input
imageInput.addEventListener("change", function () {
if (this.files.length > 0) {
form.submit(); // Soumettre automatiquement le formulaire lors de la sélection
loader.style.display = 'flex';
document.body.classList.add('loading');
}
});
// Cacher le loader après que la page soit complètement chargée
window.addEventListener('load', function () {
loader.style.display = 'none'; // Cache le loader
document.body.classList.remove('loading');
document.body.style.overflow = 'auto'; // Réactive le défilement
});
});
</script>
{# Live‑chat Tawk.to #}
<script type="text/javascript">
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function () {
var s1 = document.createElement("script"),
s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = "https://embed.tawk.to/68527002b75ad4190ffc49c5/1iu10b315";
s1.charset = "UTF-8";
s1.setAttribute("crossorigin", "*");
s0.parentNode.insertBefore(s1, s0);
})();
</script>
</body>
</html>