<!DOCTYPE html>
<html lang="{{ app.session.get('_locale') }}">
{% set lang = app.session.get('_locale') %}
{% if lang is null or app.session.get('_locale') =='' %}
{% set lang = 'en'%}
{% endif%}
<head>
<link rel="icon" type="image/x-icon" href="{{ asset('icons/favicon.ico') }}" />
<meta charset="UTF-8">
<title>
{% set lang = app.session.get('_locale') %}
{{ ('title' ~ lang ) |trans({}, 'messages') }}
</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>">
{# ═════════════ PWA (Progressive Web App) ═════════════ #}
<link rel="manifest" href="{{ asset('manifest.json') }}">
<meta name="theme-color" content="#00a7b5">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Julico">
<link rel="apple-touch-icon" href="{{ asset('images/julico-icon-192.png') }}">
<link rel="apple-touch-icon" sizes="192x192" href="{{ asset('images/julico-icon-192.png') }}">
<link rel="apple-touch-icon" sizes="512x512" href="{{ asset('images/julico-icon-512.png') }}">
{# ════════════════════════════════════════════════════ #}
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{# {{ encore_entry_link_tags('app') }} #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{asset('css/style.css') }}">
{# ═════════════ Julico mobile nav drawer (additive, ≤768px only) ═════════════ #}
<style>
@media (max-width: 768px){
/* hide the cramped horizontal category bar + redundant desktop user menu */
#categoriesnav,
.navigation-user-menu{ display:none !important; }
/* keep the burger visible + tappable on mobile */
#burgernav{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:8px 10px !important;
min-height:44px !important;
}
#openBtn{ text-decoration:none !important; }
#openBtn .burger-icon{ display:inline-block; width:26px; }
#openBtn .burger-icon span{
display:block; height:3px; margin:5px 0;
background:#00a7b5; border-radius:2px;
}
/* off-canvas slide-out drawer */
#mySidenav.sidenav{
position:fixed !important;
top:0 !important;
left:0 !important;
height:100% !important;
height:100dvh !important;
width:82% !important;
max-width:320px !important;
background:#ffffff !important;
z-index:2000 !important;
transform:translateX(-100%) !important;
transition:transform .28s ease !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
box-shadow:2px 0 18px rgba(0,0,0,.25) !important;
padding:56px 16px 28px !important;
}
body.julico-nav-open #mySidenav.sidenav{ transform:translateX(0) !important; }
/* backdrop */
#julico-nav-backdrop{
position:fixed; inset:0;
background:rgba(0,0,0,.45);
opacity:0; visibility:hidden;
transition:opacity .28s ease;
z-index:1999;
}
body.julico-nav-open #julico-nav-backdrop{ opacity:1; visibility:visible; }
body.julico-nav-open{ overflow:hidden; }
/* close (×) button */
#mySidenav #closeBtn.close{
position:absolute !important;
top:8px !important;
right:16px !important;
font-size:34px !important;
line-height:1 !important;
color:#333 !important;
text-decoration:none !important;
z-index:5;
}
/* drawer items → full-width 44px tap targets */
#mySidenav ul{ list-style:none !important; padding:0 !important; margin:0 !important; }
#mySidenav form{ margin:0 !important; }
#mySidenav .btn,
#mySidenav .main-button{
display:block !important;
width:100% !important;
text-align:left !important;
min-height:44px !important;
padding:12px 14px !important;
margin:2px 0 !important;
border-radius:8px !important;
font-size:16px !important;
box-shadow:none !important;
}
#mySidenav .navigation-cat-main-menu .main-button{
font-weight:600 !important;
color:#00a7b5 !important;
}
#mySidenav .navigation-action-br{
display:flex !important;
gap:8px !important;
margin-top:10px !important;
border-top:1px solid #eee !important;
padding-top:12px !important;
}
#mySidenav .navigation-action-br .btn{ width:auto !important; flex:1 !important; text-align:center !important; }
}
</style>
{# ════════════════════════════════════════════════════════════════════════════ #}
{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{%block metaDescription %} Shoping Online Beirut Lebanon Commandes{% endblock%} ">
</head>
<body>
{% if not app.request.cookies.get('cookies_accepted') %}
<div id="cookie-banner" style="position: fixed; bottom: 0; width: 100%; background: #222; color: #fff; padding: 1em; text-align: center; z-index: 1000;">
Ce site utilise des cookies pour améliorer votre expérience.
<button onclick="acceptCookies()" style="margin-left: 10px;">
{{ ('accepter' ~ lang ) |trans({}, 'messages') }}
</button>
<button onclick="refuseCookies()" style="margin-left: 5px;">
{{ ('refuser' ~ lang ) |trans({}, 'messages') }}
</button>
</div>
<script>
function acceptCookies() {
document.cookie = "cookies_accepted=true; path=/; max-age=31536000";
document.getElementById("cookie-banner").style.display = "none";
location.reload();
}
function refuseCookies() {
document.cookie = "cookies_accepted=false; path=/; max-age=31536000";
document.getElementById("cookie-banner").style.display = "none";
}
</script>
{% endif %}
{#
{% if app.user and app.user.isVerified == false%}
<div class="alert alert-warning alert-dissmissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" arial-label="close">
</button>
<div class="alert-message">
<strong> Votre compte n'est pas activé </strong> , renvoyer le lien d'activ ation
<div>
</div>
{% endif %}
#}
{% include('/_flash.html.twig') %}
{% include 'includes/popup.html.twig' with {'message_popup': 'Voici un message dynamique dans le popup!'} %}
<div class="bodymain">
<div id="main-head" class="header-container">
<div class="cards">
<div class=" languages">
<ul class="cardtextlang">
<li><a href="{{ path('app_locale', {'_locale': 'en'}) }}">English</a></li>
<span> | </span>
<li><a href="{{ path('app_locale', {'_locale': 'fr'}) }}">Français</a></li>
</ul>
</div>
</div>
<div id="pub-head" class=" h-container h-pub-container">
<div class="cardflexrowcenter navigation-action">
<form>
<button class="btn navbar-brand main-button" formaction="/">
{{ ('discount' ~ lang ) |trans({}, 'messages') }}
PROFITEZ -50%
</button>
</form>
</div>
</div>
<div class=" h-container navigation-sticky ">
<!--<button class="cta-button">Click Me</button>
<div class="promo-icon">
</div>-->
<div class="navigation-action ">
<div id="burgernav" class="card btn btn-default btn-light burgernav">
{{ render(controller(
'App\\Controller\\BaseCommonController::burgerbar'
)) }}
</div>
<div id="searchnav" class="card btn btn-default btn-light btn searchnav">
{{ render(controller(
'App\\Controller\\BaseCommonController::searchbar'
)) }}
</div>
</div>
<div class="card cardlogo navigation-logo logo-l-o logomob navigation-sticky " >
<a class="" id="logo-link" href="/home">
<!--<i class="fa-solid fa-glasses"></i>-->
<img src="/images/julico-logo.png" class="cardimglogo" alt="MDN" />
</img>
</a>
</div>
<div class="card cardlogo navigation-logo logo-l-o logomain " >
<a class="" id="logo-link" href="/home">
<!--<i class="fa-solid fa-glasses"></i>-->
<img src="/images/julico-logo.png" class="cardimglogo" alt="MDN" />
</img>
</a>
</div>
{% if app.request.headers.get('User-Agent') matches '/Mobile/i' %}
<!-- Affichage du menu burger pour la version mobile -->
{% else %}
<!-- Affichage du menu complet pour les autres versions -->
{% endif %}
<div id="categoriesnav" class="categoriesnav">
{{ render(controller(
'App\\Controller\\BaseCommonController::navbar',
{ 'max': 3 }
)) }}
</div>
<div class="navigation-action" >
{% if app.user %}
<form>
<button class="card btn btn-default btn-light" formaction="/profile"> <i class="fa-regular fa-user"></i></button>
</form>
{% else %}
<form>
<button class="card btn btn-default btn-light" formaction="/login"> <i class="fa-regular fa-user"></i></button>
</form>
{% endif %}
<form>
<button class="card btn btn-default btn-light" formaction="/aboutus">
<i class="fa-solid fa-id-card-clip"></i>
</button>
</form>
<form>
<button class="card btn btn-default btn-light" formaction="/panier"><i class="fa-solid fa-cart-shopping"></i></button>
</form>
</div>
</div>
<div class="h-container navigation-user-menu">
{% if app.user %}
<div>
<ul>
<li><a class="btn btn-default btn-light" href="{{path('app_logout')}}">
{{ ('logout' ~ lang )|trans({}, 'messages') }}
<a></li>
</ul>
</div>
{% if is_granted('ROLE_USER') %}
<div>
<span>
</span>
<ul>
<li><a class="btn btn-default btn-light" href="{{ path('show_commande_user') }}">
{{ ('listedescommandes' ~ lang ) |trans({}, 'messages') }}
</a> </li>
</ul>
</div>
{% endif %}
{% if is_granted('ROLE_ADMIN') %}
<div>
<span>
</span>
<ul>
<li><a class="btn btn-default btn-light" href="{{ path('app_category') }}">
{{ ('gestionstock' ~ lang ) |trans({}, 'messages') }}
</a> </li>
<li><a class="btn btn-default btn-light" href="{{ path('admin_promotions') }}">
{{ ('gestionpromotion' ~ lang ) |trans({}, 'messages') }}
</a> </li>
<li><a class="btn btn-default btn-light" href="{{ path('maintenance_new') }}">
{{ ('gestionmaintenance' ~ lang ) |trans({}, 'messages') }}
<i class="fas fa-toolbox"></i>
</a> </li>
<li><a class="btn btn-default btn-light" href="{{ path('app_home') }}">
{{ ('suspensionutilisateur' ~ lang ) |trans({}, 'messages') }}
</a> </li>
{% if
app.request.attributes.get('_route') == 'show_facture'
%}
<li><a class="btn btn-default btn-light" href="{{ path('app_home') }}">Not used</a> </li>
{% endif%}
</ul>
</div>
{% endif %}
{% else %}
<div class="cards">
<ul>
<li><a class="btn btn-default btn-light " href="{{path('app_login')}}">
{{ ('login' ~ lang ) |trans({}, 'messages') }}
</a></li>
<li><a class="btn btn-default btn-light" href="{{path('app_register')}}">
{{ ('register' ~ lang ) |trans({}, 'messages') }}
</a></li>
</ul>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<main>
{% block body %}
{% endblock %}
<div class=" cardflexcol">
<div id="footer">
{% include('/footer.html.twig') %}
</div>
</div>
{% block javascripts %}
{# {{ encore_entry_script_tags('app') }} #}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js" integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{asset('js/script.js')}}"></script>
{# ═════════════ Julico mobile nav drawer toggle (additive) ═════════════ #}
<script>
(function(){
function init(){
var nav = document.getElementById('mySidenav');
if(!nav){ return; }
var open = document.getElementById('openBtn');
var close = document.getElementById('closeBtn');
var bd = document.getElementById('julico-nav-backdrop');
if(!bd){
bd = document.createElement('div');
bd.id = 'julico-nav-backdrop';
document.body.appendChild(bd);
}
function openNav(e){ if(e){ e.preventDefault(); } document.body.classList.add('julico-nav-open'); }
function closeNav(e){ if(e){ e.preventDefault(); } document.body.classList.remove('julico-nav-open'); }
if(open){ open.addEventListener('click', openNav); }
if(close){ close.addEventListener('click', closeNav); }
bd.addEventListener('click', closeNav);
// close drawer when a real link/button inside it is tapped
nav.addEventListener('click', function(ev){
var t = ev.target.closest('a, button');
if(t && t.id !== 'closeBtn'){ document.body.classList.remove('julico-nav-open'); }
});
// Esc closes
document.addEventListener('keydown', function(ev){
if(ev.key === 'Escape'){ closeNav(); }
});
}
if(document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
{# ══════════════════════════════════════════════════════════════════════ #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% if app.request.attributes.get('_route') starts with 'admin_promotions' %}
<script src="{{ asset('./js/promo.js') }}"></script>
{% endif %}
{# ═════════════ PWA: service worker + install handler ═════════════ #}
<script>
// Register service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(function(reg) { console.log('[PWA] SW registered:', reg.scope); })
.catch(function(err) { console.warn('[PWA] SW registration failed:', err); });
});
}
// Capture install prompt event
window.__pwaPromptEvent = null;
window.addEventListener('beforeinstallprompt', function(e) {
e.preventDefault();
window.__pwaPromptEvent = e;
console.log('[PWA] Install prompt captured — button is now active');
// Reveal any install buttons
document.querySelectorAll('.pwa-install-btn').forEach(function(btn) {
btn.style.display = '';
btn.removeAttribute('hidden');
});
});
// Click handler for any element with class="pwa-install-btn"
document.addEventListener('click', function(ev) {
var btn = ev.target.closest('.pwa-install-btn');
if (!btn) return;
ev.preventDefault();
var prompt = window.__pwaPromptEvent;
if (!prompt) {
// Already installed, unsupported browser, or prompt not yet captured
if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {
alert('Julico is already installed! Look for it in your taskbar or applications.');
} else if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
alert('To install Julico on iOS:\n1. Tap the Share button\n2. Tap "Add to Home Screen"');
} else {
alert('To install Julico:\n• On Chrome/Edge desktop: look for the install icon in the address bar\n• Or open the browser menu and click "Install Julico…"');
}
return;
}
prompt.prompt();
prompt.userChoice.then(function(choice) {
console.log('[PWA] User choice:', choice.outcome);
window.__pwaPromptEvent = null;
});
});
// When installed, hide the install button
window.addEventListener('appinstalled', function() {
document.querySelectorAll('.pwa-install-btn').forEach(function(btn) {
btn.style.display = 'none';
});
console.log('[PWA] App installed successfully');
});
</script>
{# ════════════════════════════════════════════════════════════════ #}
{% endblock %}
</main>
</body>
</html>