src/ApplicationBundle/Resources/views/inc/central_header.html.twig line 38

Open in your IDE?
  1. {# ═══════════════════════════════════════════════════════════════════════════
  2.    Central Header — HoneyBee Ecosystem
  3.    Scandinavian SaaS design · single source of truth for all public pages
  4.    ═══════════════════════════════════════════════════════════════════════════ #}
  5. {% if not include_html is defined %}
  6.     {% set include_html = 1 %}
  7.     {% if app.request.request.get('skipHTML') != '' %}{% set include_html = 0 %}{% endif %}
  8.     {% if app.request.query.get('skipHTML')   != '' %}{% set include_html = 0 %}{% endif %}
  9. {% endif %}
  10. {% if include_html == 1 %}
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  17.     <meta name="description"
  18.           content="{{ og_description is defined ? og_description : 'HoneyBee — The digital operating layer for EPC, energy, and multi-site industrial operations. Unify finance, projects, IoT, Edge+ site intelligence, billing and AI reporting. From €7.99/user/month.' }}">
  19.     <meta name="keywords"
  20.           content="HoneyBee, EPC software, system integrator platform, energy asset management, IoT Edge+ deployment, project lifecycle software, industrial operations, DATEV accounting, multi-site management">
  21.     <meta name="author" content="HoneyBee Ecosystem">
  22.     <title id="pageTitle">{{ page_title }}</title>
  24.     <meta property="og:title" content="{{ og_title       is defined ? og_title       : page_title }}"/>
  25.     <meta property="og:description"
  26.           content="{{ og_description is defined ? og_description : 'HoneyBee — Operating system for EPC companies, system integrators, energy asset owners, and multi-site industrial businesses.' }}"/>
  27.     <meta property="og:image"
  28.           content="{{ og_image       is defined ? (absolute_url(path('dashboard'))~og_image) : (absolute_url(path('dashboard'))~'honeybee_web_assets/icons/honeybeeicon.svg') }}"/>
  29.     {% set _noindex_routes = ['user_login','sign_up','reset_password','verify_email','verify_otp','reset_new_password','honeybee_otp_verification'] %}
  30.     {% if app.request.get('_route') in _noindex_routes %}
  31.         <meta name="robots" content="noindex, nofollow">
  32.     {% else %}
  33.         <meta name="robots" content="index, follow">
  34.     {% endif %}
  36.     {# ── Favicons ──────────────────────────────────────────────────────────── #}
  37.     <link rel="shortcut icon" type="image/x-icon"
  38.           href="{{ asset('favicon.ico') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  39.     <link rel="apple-touch-icon" sizes="180x180"
  40.           href="{{ asset('apple-icon.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  41.     <link rel="icon" type="image/png" sizes="32x32"
  42.           href="{{ asset('favicon-32x32.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  43.     <link rel="icon" type="image/png" sizes="16x16"
  44.           href="{{ asset('favicon-16x16.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  45.     <link rel="manifest" href="{{ asset('site.webmanifest') }}">
  46.     <link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg') }}" color="#C07D2A">
  47.     <meta name="msapplication-TileColor" content="#1A1D2E">
  48.     <meta name="theme-color" content="#F7F5F0">
  50.     {# ── Fonts ─────────────────────────────────────────────────────────────── #}
  51.     <link rel="preconnect" href="https://fonts.googleapis.com">
  52.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  53.     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Montserrat:wght@500&display=swap"
  54.           rel="stylesheet">
  55.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  57.     {# ── Core stylesheets ──────────────────────────────────────────────────── #}
  58.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  59.           integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  60.           crossorigin="anonymous" referrerpolicy="no-referrer">
  61.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  62.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  63.     <link rel="stylesheet"
  64.           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
  65.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css">
  66.     <link rel="stylesheet"
  67.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/bootstrap.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  68.     <link rel="stylesheet"
  69.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/style.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  70.     <link rel="stylesheet" id="dark-theme-css"
  71.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/dark.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  72.           disabled="true">
  73.     <link rel="stylesheet"
  74.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  75.     <link rel="stylesheet"
  76.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/central_responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  77.     <link rel="stylesheet"
  78.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/temporary_inline.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  80.     {# ── Dev toolbar suppression ───────────────────────────────────────────── #}
  81.     <style>{% if app.session.get('devAdminMode') != 1 %}.sf-toolbar {
  82.             display: none !important
  83.         }{% endif %}</style>
  85.     {# ── Preloader ─────────────────────────────────────────────────────────── #}
  86.     <style>
  87.         #hb-preloader {
  88.             position: fixed;
  89.             top: 0;
  90.             left: 0;
  91.             width: 100%;
  92.             height: 100vh;
  93.             background: #F7F5F0;
  94.             display: flex;
  95.             flex-direction: column;
  96.             justify-content: center;
  97.             align-items: center;
  98.             z-index: 99999;
  99.         }
  101.         .hb-pre-logo {
  102.             display: flex;
  103.             align-items: center;
  104.             gap: 12px;
  105.             margin-bottom: 28px;
  106.         }
  108.         .hb-pre-logo img {
  109.             width: 34px;
  110.             height: 34px;
  111.         }
  113.         .hb-pre-logo span {
  114.             font-family: 'DM Sans', sans-serif;
  115.             font-size: 17px;
  116.             font-weight: 800;
  117.             color: #1A1D2E;
  118.             letter-spacing: -.01em;
  119.         }
  121.         .hb-pre-logo span b {
  122.             color: #C07D2A;
  123.             font-weight: 800;
  124.         }
  126.         .hb-pre-bar-wrap {
  127.             width: 120px;
  128.             height: 2px;
  129.             background: rgba(26, 29, 46, .08);
  130.             border-radius: 2px;
  131.             overflow: hidden;
  132.         }
  134.         .hb-pre-bar {
  135.             height: 100%;
  136.             width: 40%;
  137.             background: #C07D2A;
  138.             border-radius: 2px;
  139.             animation: hb-slide 1.5s ease-in-out infinite;
  140.         }
  142.         @keyframes hb-slide {
  143.             0% {
  144.                 transform: translateX(-100%);
  145.             }
  146.             50% {
  147.                 transform: translateX(250%);
  148.             }
  149.             100% {
  150.                 transform: translateX(-100%);
  151.             }
  152.         }
  153.     </style>
  155.     {# ── Inline JS (runs before body paint) ───────────────────────────────── #}
  156.     <script>
  157.         var logger = (function () {
  158.             var _old = null, pub = {};
  159.             pub.enableLogger = function () {
  160.                 if (_old) window['console']['log'] = _old;
  161.             };
  162.             pub.disableLogger = function () {
  163.                 _old = console.log;
  164.                 window['console']['log'] = function () {
  165.                 };
  166.             };
  167.             return pub;
  168.         }());
  169.         {% if app.session.get('devAdminMode') != 1 %}
  170.         window['console']['log'] = function () {
  171.         };
  172.         {% endif %}
  173.     </script>
  175.     <script>
  176.         function changeTheme(isDark) {
  177.             var darkCss = document.getElementById('dark-theme-css');
  178.             var cb = document.getElementById('theme-toggle-checkbox');
  179.             var track = document.getElementById('hbThemeTrack');
  180.             document.querySelectorAll('img').forEach(function (img) {
  181.                 if (isDark) {
  182.                     img.src = img.src.replace('/honeybee_web_assets/', '/honeybee_web_assets/dark/');
  183.                 } else {
  184.                     img.src = img.src.replace('/honeybee_web_assets/dark/', '/honeybee_web_assets/');
  185.                 }
  186.             });
  187.             if (darkCss) darkCss.disabled = !isDark;
  188.             if (cb) cb.checked = isDark;
  189.             if (track) track.classList.toggle('hb-dark', isDark);
  190.             localStorage.setItem('theme', isDark ? 'dark' : 'light');
  191.         }
  192.     </script>
  194.     <script>if (typeof module === 'object') {
  195.             window.module = module;
  196.             module = undefined;
  197.         }</script>
  199.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  200.             integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  201.     <script data-ad-client="ca-pub-8286883017903771" async
  202.             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  203.     <script>var BaseURL = '{{ url('dashboard') }}';</script>
  204. </head>
  206. {# ── Google Analytics ──────────────────────────────────────────────────────── #}
  207. <script async src="https://www.googletagmanager.com/gtag/js?id=G-V22132YMJ3"></script>
  208. <script>
  209.     window.dataLayer = window.dataLayer || [];
  211.     function gtag() {
  212.         dataLayer.push(arguments);
  213.     }
  215.     gtag('js', new Date());
  216.     gtag('config', 'G-V22132YMJ3');
  217. </script>
  219. {# ── Resolve admin level & consultant flag ────────────────────────────────── #}
  220. {% set BUDDYBEE_ADMIN_LEVEL = 0 %}
  221. {% set isConsultant         = 0 %}
  222. {% if session[UserConstants.USER_ID] is defined %}
  223.     {% set isConsultant         = session[UserConstants.IS_CONSULTANT]        is defined ? session[UserConstants.IS_CONSULTANT]        : 0 %}
  224.     {% set BUDDYBEE_ADMIN_LEVEL = session[UserConstants.BUDDYBEE_ADMIN_LEVEL] is defined ? session[UserConstants.BUDDYBEE_ADMIN_LEVEL] : 0 %}
  225. {% endif %}
  227. {# Single <body> tag — classes set in one place, no duplicate tags #}
  228. {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  229. <body class="buddybee_body has_admin_bar body-mask">
  230. {% elseif session[UserConstants.USER_ID] is defined %}
  231. <body class="buddybee_body body-mask">
  232. {% else %}
  233. <body class="body-mask">
  234. {% endif %}
  236. {# ── Preloader ─────────────────────────────────────────────────────────────── #}
  237. <div id="hb-preloader">
  238.     <div class="hb-pre-logo">
  239.         <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  240.              alt="HoneyBee">
  241.         <span>Honey<b>Bee</b></span>
  242.     </div>
  243.     <div class="hb-pre-bar-wrap">
  244.         <div class="hb-pre-bar"></div>
  245.     </div>
  246. </div>
  248. {# ── Processing overlay (shown during AJAX) ────────────────────────────────── #}
  249. <div id="buddybee_processing_loader">
  250.     <div><p>Processing</p></div>
  251. </div>
  253. {# ══════════════════════════════ NAVBAR ═══════════════════════════════════════
  254.    Scandinavian navbar: glass-morphism, fixed, minimal, fully responsive
  255.    ═══════════════════════════════════════════════════════════════════════════ #}
  256. <style>
  257.     /* ── Design tokens ──────────────────────────────────────────────────────────── */
  258.     :root {
  259.         --hb-ink: #1A1D2E;
  260.         --hb-ink-2: #252840;
  261.         --hb-amber: #C07D2A;
  262.         --hb-amber-lt: #D4954A;
  263.         --hb-muted: #6B6E7F;
  264.         --hb-border: rgba(26, 29, 46, .08);
  265.         --hb-border-md: rgba(26, 29, 46, .14);
  266.         --hb-cream: #F7F5F0;
  267.         --hb-white: #FFFFFF;
  268.         --hb-shadow: 0 2px 20px rgba(26, 29, 46, .07);
  269.         --hb-shadow-lg: 0 8px 32px rgba(26, 29, 46, .10);
  270.         --hb-radius: 10px;
  271.         --hb-font: 'DM Sans', 'Gilroy', system-ui, sans-serif;
  272.     }
  274.     /* ── Navbar shell ─────────────────────────────────────────────────────────── */
  275.     .hb-navbar {
  276.         position: fixed;
  277.         top: 0;
  278.         left: 0;
  279.         right: 0;
  280.         z-index: 9999;
  281.         background: rgba(247, 245, 240, .97);
  282.         backdrop-filter: blur(20px) saturate(180%);
  283.         -webkit-backdrop-filter: blur(20px) saturate(180%);
  284.         border-bottom: 1px solid var(--hb-border);
  285.         transition: box-shadow .2s, border-color .2s;
  286.         font-family: var(--hb-font);
  287.     }
  289.     .hb-navbar.hb-scrolled {
  290.         box-shadow: var(--hb-shadow);
  291.         border-color: var(--hb-border-md);
  292.     }
  294.     /* ── Inner container ──────────────────────────────────────────────────────── */
  295.     .hb-nav-inner {
  296.         max-width: 1280px;
  297.         margin: 0 auto;
  298.         padding: 0 28px;
  299.         height: 64px;
  300.         display: flex;
  301.         align-items: center;
  302.         gap: 24px;
  303.     }
  305.     /* ── Brand ────────────────────────────────────────────────────────────────── */
  306.     .hb-brand {
  307.         display: flex;
  308.         align-items: center;
  309.         gap: 9px;
  310.         text-decoration: none;
  311.         flex-shrink: 0;
  312.     }
  314.     .hb-brand img {
  315.         height: 30px;
  316.         width: auto;
  317.     }
  319.     .hb-brand-name {
  320.         font-size: 15.5px;
  321.         font-weight: 800;
  322.         color: var(--hb-ink);
  323.         letter-spacing: -.01em;
  324.         line-height: 1;
  325.     }
  327.     .hb-brand-name b {
  328.         color: var(--hb-amber);
  329.         font-weight: 800;
  330.     }
  332.     /* ── Nav links ────────────────────────────────────────────────────────────── */
  333.     .hb-links {
  334.         display: flex;
  335.         align-items: center;
  336.         gap: 2px;
  337.         list-style: none;
  338.         margin: 0;
  339.         padding: 0;
  340.         flex: 1;
  341.     }
  343.     .hb-links .hb-link > a,
  344.     .hb-links .hb-drop > a {
  345.         display: inline-flex;
  346.         align-items: center;
  347.         gap: 5px;
  348.         padding: 7px 11px;
  349.         font-size: 13.5px;
  350.         font-weight: 500;
  351.         color: var(--hb-muted);
  352.         text-decoration: none;
  353.         border-radius: 7px;
  354.         white-space: nowrap;
  355.         transition: color .15s, background .15s;
  356.         position: relative;
  357.     }
  359.     .hb-links .hb-link > a:hover,
  360.     .hb-links .hb-drop > a:hover {
  361.         color: var(--hb-ink);
  362.         background: rgba(26, 29, 46, .04);
  363.     }
  365.     .hb-links .hb-link > a.active {
  366.         color: var(--hb-ink);
  367.         font-weight: 600;
  368.     }
  370.     .hb-links .hb-link > a.active::after {
  371.         content: '';
  372.         position: absolute;
  373.         bottom: 2px;
  374.         left: 11px;
  375.         right: 11px;
  376.         height: 1.5px;
  377.         background: var(--hb-amber);
  378.         border-radius: 2px;
  379.     }
  381.     /* ── Dropdown ─────────────────────────────────────────────────────────────── */
  382.     .hb-drop {
  383.         position: relative;
  384.     }
  386.     .hb-caret {
  387.         font-size: 9px;
  388.         opacity: .5;
  389.         transition: transform .2s;
  390.     }
  392.     .hb-drop:hover .hb-caret {
  393.         transform: rotate(180deg);
  394.     }
  396.     .hb-dd-menu {
  397.         position: absolute;
  398.         top: 100%;
  399.         left: 50%;
  400.         transform: translateX(-50%) translateY(0);
  401.         min-width: 195px;
  402.         background: var(--hb-white);
  403.         border: 1px solid var(--hb-border-md);
  404.         border-radius: var(--hb-radius);
  405.         box-shadow: var(--hb-shadow-lg);
  406.         padding: 6px;
  407.         padding-top: 12px; /* gap lives inside → no dead zone */
  408.         opacity: 0;
  409.         pointer-events: none;
  410.         transition: opacity .16s, transform .16s;
  411.         transition-delay: 0s, 0s; /* show instantly */
  412.         list-style: none;
  413.         margin: 0;
  414.         z-index: 10001;
  415.     }
  417.     .hb-drop:hover .hb-dd-menu,
  418.     .hb-dd-menu:hover {
  419.         opacity: 1;
  420.         pointer-events: all;
  421.         transform: translateX(-50%) translateY(0);
  422.     }
  424.     .hb-drop:not(:hover) .hb-dd-menu:not(:hover) {
  425.         transition-delay: .12s;
  426.     }
  428.     /* slight lag on hide */
  429.     .hb-dd-menu li a {
  430.         display: block;
  431.         padding: 8px 12px;
  432.         font-size: 13px;
  433.         font-weight: 500;
  434.         color: var(--hb-muted);
  435.         text-decoration: none;
  436.         border-radius: 6px;
  437.         transition: color .12s, background .12s;
  438.     }
  440.     .hb-dd-menu li a:hover {
  441.         color: var(--hb-ink);
  442.         background: rgba(26, 29, 46, .04);
  443.     }
  445.     .hb-dd-menu li a.active {
  446.         color: var(--hb-ink);
  447.         font-weight: 600;
  448.     }
  450.     .hb-dd-div {
  451.         height: 1px;
  452.         background: var(--hb-border);
  453.         margin: 4px 6px;
  454.     }
  456.     /* ── Right side ───────────────────────────────────────────────────────────── */
  457.     .hb-nav-right {
  458.         display: flex;
  459.         align-items: center;
  460.         gap: 6px;
  461.         flex-shrink: 0;
  462.     }
  464.     /* ── Language switcher ────────────────────────────────────────────────────── */
  465.     .hb-lang {
  466.         position: relative;
  467.     }
  469.     .hb-lang-btn {
  470.         display: flex;
  471.         align-items: center;
  472.         gap: 5px;
  473.         padding: 6px 10px;
  474.         font-size: 12.5px;
  475.         font-weight: 600;
  476.         color: var(--hb-muted);
  477.         background: none;
  478.         border: 1px solid var(--hb-border);
  479.         border-radius: 7px;
  480.         cursor: pointer;
  481.         transition: all .15s;
  482.         font-family: var(--hb-font);
  483.     }
  485.     .hb-lang-btn:hover {
  486.         color: var(--hb-ink);
  487.         border-color: var(--hb-border-md);
  488.         background: rgba(26, 29, 46, .03);
  489.     }
  491.     .hb-lang-menu {
  492.         position: absolute;
  493.         top: 100%;
  494.         right: 0;
  495.         min-width: 155px;
  496.         background: var(--hb-white);
  497.         border: 1px solid var(--hb-border-md);
  498.         border-radius: var(--hb-radius);
  499.         box-shadow: var(--hb-shadow-lg);
  500.         padding: 6px;
  501.         padding-top: 10px; /* gap lives inside → no dead zone */
  502.         opacity: 0;
  503.         pointer-events: none;
  504.         transform: translateY(0);
  505.         transition: opacity .15s;
  506.         z-index: 10001;
  507.         list-style: none;
  508.         margin: 0;
  509.     }
  511.     .hb-lang:hover .hb-lang-menu,
  512.     .hb-lang-menu:hover {
  513.         opacity: 1;
  514.         pointer-events: all;
  515.     }
  517.     .hb-lang:not(:hover) .hb-lang-menu:not(:hover) {
  518.         transition-delay: .12s;
  519.     }
  521.     .hb-lang-menu li a {
  522.         display: block;
  523.         padding: 7px 12px;
  524.         font-size: 13px;
  525.         font-weight: 500;
  526.         color: var(--hb-muted);
  527.         text-decoration: none;
  528.         border-radius: 6px;
  529.         transition: all .12s;
  530.     }
  532.     .hb-lang-menu li a:hover {
  533.         color: var(--hb-ink);
  534.         background: rgba(26, 29, 46, .04);
  535.     }
  537.     /* ── User dropdown ────────────────────────────────────────────────────────── */
  538.     .hb-user {
  539.         position: relative;
  540.     }
  542.     .hb-user-btn {
  543.         display: flex;
  544.         align-items: center;
  545.         gap: 7px;
  546.         background: none;
  547.         border: none;
  548.         cursor: pointer;
  549.         padding: 4px 6px;
  550.         border-radius: 8px;
  551.         transition: background .15s;
  552.     }
  554.     .hb-user-btn:hover {
  555.         background: rgba(26, 29, 46, .05);
  556.     }
  558.     .hb-user-avatar {
  559.         width: 30px;
  560.         height: 30px;
  561.         border-radius: 50%;
  562.         background-size: cover !important;
  563.         background-position: center !important;
  564.         border: 1.5px solid var(--hb-border-md);
  565.         flex-shrink: 0;
  566.     }
  568.     .hb-user-name {
  569.         font-size: 13px;
  570.         font-weight: 600;
  571.         color: var(--hb-ink);
  572.         max-width: 110px;
  573.         white-space: nowrap;
  574.         overflow: hidden;
  575.         text-overflow: ellipsis;
  576.     }
  578.     .hb-user-menu {
  579.         position: absolute;
  580.         top: 100%;
  581.         right: 0;
  582.         min-width: 185px;
  583.         background: var(--hb-white);
  584.         border: 1px solid var(--hb-border-md);
  585.         border-radius: var(--hb-radius);
  586.         box-shadow: var(--hb-shadow-lg);
  587.         padding: 6px;
  588.         padding-top: 12px; /* gap lives inside → no dead zone */
  589.         opacity: 0;
  590.         pointer-events: none;
  591.         transform: translateY(0);
  592.         transition: opacity .15s;
  593.         z-index: 10001;
  594.         list-style: none;
  595.         margin: 0;
  596.     }
  598.     .hb-user:hover .hb-user-menu {
  599.         opacity: 1;
  600.         pointer-events: all;
  601.     }
  603.     .hb-user:not(:hover) .hb-user-menu:not(:hover) {
  604.         transition-delay: .12s;
  605.     }
  607.     .hb-user-menu li a {
  608.         display: flex;
  609.         align-items: center;
  610.         gap: 8px;
  611.         padding: 8px 12px;
  612.         font-size: 13px;
  613.         font-weight: 500;
  614.         color: var(--hb-muted);
  615.         text-decoration: none;
  616.         border-radius: 6px;
  617.         transition: all .12s;
  618.     }
  620.     .hb-user-menu li a:hover {
  621.         color: var(--hb-ink);
  622.         background: rgba(26, 29, 46, .04);
  623.     }
  625.     .hb-user-menu li a i {
  626.         font-size: 12px;
  627.         width: 14px;
  628.         opacity: .5;
  629.     }
  631.     .hb-u-div {
  632.         height: 1px;
  633.         background: var(--hb-border);
  634.         margin: 4px 6px;
  635.     }
  637.     /* ── Auth + Companies buttons ─────────────────────────────────────────────── */
  638.     .hb-btn-login {
  639.         padding: 7px 16px;
  640.         font-size: 13px;
  641.         font-weight: 600;
  642.         color: var(--hb-ink);
  643.         background: none;
  644.         border: 1.5px solid var(--hb-border-md);
  645.         border-radius: 8px;
  646.         text-decoration: none;
  647.         transition: all .15s;
  648.     }
  650.     .hb-btn-login:hover {
  651.         color: var(--hb-ink);
  652.         border-color: var(--hb-ink);
  653.         background: rgba(26, 29, 46, .03);
  654.     }
  656.     .hb-btn-signup {
  657.         padding: 7px 16px;
  658.         font-size: 13px;
  659.         font-weight: 700;
  660.         color: #fff;
  661.         background: var(--hb-ink);
  662.         border: 1.5px solid transparent;
  663.         border-radius: 8px;
  664.         text-decoration: none;
  665.         transition: all .15s;
  666.     }
  668.     .hb-btn-signup:hover {
  669.         color: #fff;
  670.         background: var(--hb-ink-2);
  671.         box-shadow: 0 4px 14px rgba(26, 29, 46, .2);
  672.     }
  674.     .hb-btn-companies {
  675.         display: inline-flex;
  676.         align-items: center;
  677.         gap: 6px;
  678.         padding: 7px 15px;
  679.         font-size: 13px;
  680.         font-weight: 700;
  681.         color: #fff;
  682.         background: var(--hb-amber);
  683.         border: none;
  684.         border-radius: 8px;
  685.         text-decoration: none;
  686.         transition: all .15s;
  687.     }
  689.     .hb-btn-companies:hover {
  690.         color: #fff;
  691.         background: var(--hb-amber-lt);
  692.         box-shadow: 0 4px 14px rgba(192, 125, 42, .28);
  693.     }
  695.     /* ── Switch-user panel (admin only) ──────────────────────────────────────── */
  696.     .hb-switch {
  697.         position: relative;
  698.     }
  700.     .hb-switch-btn {
  701.         padding: 6px 11px;
  702.         font-size: 12px;
  703.         font-weight: 600;
  704.         color: var(--hb-muted);
  705.         background: none;
  706.         border: 1px solid var(--hb-border);
  707.         border-radius: 7px;
  708.         cursor: pointer;
  709.         font-family: var(--hb-font);
  710.         transition: all .15s;
  711.     }
  713.     .hb-switch-btn:hover {
  714.         color: var(--hb-ink);
  715.         border-color: var(--hb-border-md);
  716.     }
  718.     .hb-switch-panel {
  719.         position: absolute;
  720.         top: 100%;
  721.         right: 0;
  722.         min-width: 225px;
  723.         background: var(--hb-white);
  724.         border: 1px solid var(--hb-border-md);
  725.         border-radius: var(--hb-radius);
  726.         box-shadow: var(--hb-shadow-lg);
  727.         padding: 10px;
  728.         padding-top: 14px; /* gap lives inside → no dead zone */
  729.         opacity: 0;
  730.         pointer-events: none;
  731.         transform: translateY(0);
  732.         transition: opacity .15s;
  733.         z-index: 10001;
  734.         list-style: none;
  735.         margin: 0;
  736.     }
  738.     .hb-switch:hover .hb-switch-panel {
  739.         opacity: 1;
  740.         pointer-events: all;
  741.     }
  743.     .hb-switch:not(:hover) .hb-switch-panel:not(:hover) {
  744.         transition-delay: .12s;
  745.     }
  747.     .hb-switch-panel li a {
  748.         display: block;
  749.         padding: 8px 10px;
  750.         font-size: 13px;
  751.         font-weight: 500;
  752.         color: var(--hb-muted);
  753.         text-decoration: none;
  754.         border-radius: 6px;
  755.         transition: all .12s;
  756.     }
  758.     .hb-switch-panel li a:hover {
  759.         color: var(--hb-ink);
  760.         background: rgba(26, 29, 46, .04);
  761.     }
  763.     .hb-sw-div {
  764.         height: 1px;
  765.         background: var(--hb-border);
  766.         margin: 6px 0;
  767.     }
  769.     .hb-switch-panel select {
  770.         width: 100%;
  771.         font-size: 12px;
  772.         font-family: var(--hb-font);
  773.         border: 1px solid var(--hb-border-md);
  774.         border-radius: 6px;
  775.         padding: 6px 8px;
  776.         color: var(--hb-ink);
  777.         background: var(--hb-cream);
  778.     }
  780.     /* ── Theme toggle ─────────────────────────────────────────────────────────── */
  781.     .hb-theme {
  782.         display: flex;
  783.         align-items: center;
  784.         gap: 6px;
  785.         padding: 0 2px;
  786.     }
  788.     .hb-theme-img {
  789.         width: 14px;
  790.         height: 14px;
  791.         opacity: .45;
  792.         display: block;
  793.     }
  795.     #theme-toggle-checkbox {
  796.         display: none;
  797.     }
  799.     .hb-theme-track {
  800.         position: relative;
  801.         width: 34px;
  802.         height: 19px;
  803.         background: rgba(26, 29, 46, .14);
  804.         border-radius: 10px;
  805.         cursor: pointer;
  806.         transition: background .2s;
  807.         flex-shrink: 0;
  808.         display: block;
  809.     }
  811.     .hb-theme-track::after {
  812.         content: '';
  813.         position: absolute;
  814.         top: 2px;
  815.         left: 2px;
  816.         width: 15px;
  817.         height: 15px;
  818.         background: white;
  819.         border-radius: 50%;
  820.         box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  821.         transition: transform .2s;
  822.     }
  824.     .hb-theme-track.hb-dark {
  825.         background: var(--hb-amber);
  826.     }
  828.     .hb-theme-track.hb-dark::after {
  829.         transform: translateX(15px);
  830.     }
  832.     /* ── Mobile hamburger ─────────────────────────────────────────────────────── */
  833.     .hb-toggler {
  834.         display: none;
  835.         background: none;
  836.         border: none;
  837.         cursor: pointer;
  838.         padding: 8px;
  839.         flex-direction: column;
  840.         gap: 5px;
  841.         border-radius: 7px;
  842.         margin-left: auto;
  843.         flex-shrink: 0;
  844.         transition: background .15s;
  845.     }
  847.     .hb-toggler:hover {
  848.         background: rgba(26, 29, 46, .06);
  849.     }
  851.     .hb-toggler span {
  852.         display: block;
  853.         width: 21px;
  854.         height: 1.5px;
  855.         background: var(--hb-ink);
  856.         border-radius: 2px;
  857.         transition: all .22s;
  858.     }
  860.     .hb-toggler.hb-open span:nth-child(1) {
  861.         transform: rotate(45deg) translate(4.5px, 4.5px);
  862.     }
  864.     .hb-toggler.hb-open span:nth-child(2) {
  865.         opacity: 0;
  866.         transform: scaleX(0);
  867.     }
  869.     .hb-toggler.hb-open span:nth-child(3) {
  870.         transform: rotate(-45deg) translate(4.5px, -4.5px);
  871.     }
  873.     /* ── Responsive ───────────────────────────────────────────────────────────── */
  874.     @media (max-width: 1024px) {
  875.         .hb-toggler {
  876.             display: flex;
  877.         }
  879.         .hb-links, .hb-nav-right {
  880.             display: none;
  881.         }
  883.         .hb-nav-inner {
  884.             height: 56px;
  885.         }
  887.         .hb-navbar.hb-open .hb-nav-inner {
  888.             height: auto;
  889.             flex-wrap: wrap;
  890.             padding-top: 12px;
  891.             padding-bottom: 14px;
  892.             align-items: flex-start;
  893.         }
  895.         .hb-navbar.hb-open .hb-links {
  896.             display: flex;
  897.             flex-direction: column;
  898.             align-items: flex-start;
  899.             width: 100%;
  900.             flex: 0 0 100%;
  901.             gap: 2px; /* flex: 0 0 100% overrides base flex:1 to force row wrap */
  902.         }
  904.         .hb-navbar.hb-open .hb-links .hb-link,
  905.         .hb-navbar.hb-open .hb-links .hb-drop {
  906.             width: 100%;
  907.         }
  909.         .hb-navbar.hb-open .hb-links .hb-link > a,
  910.         .hb-navbar.hb-open .hb-links .hb-drop > a {
  911.             width: 100%;
  912.             justify-content: space-between;
  913.         }
  915.         .hb-navbar.hb-open .hb-dd-menu {
  916.             position: static;
  917.             transform: none;
  918.             opacity: 0;
  919.             pointer-events: none;
  920.             display: none;
  921.             box-shadow: none;
  922.             border: none;
  923.             background: rgba(26, 29, 46, .03);
  924.             border-radius: 7px;
  925.             margin: 2px 0 2px 12px;
  926.         }
  928.         .hb-navbar.hb-open .hb-drop.hb-mob-open .hb-dd-menu {
  929.             display: block;
  930.             opacity: 1;
  931.             pointer-events: all;
  932.         }
  934.         .hb-navbar.hb-open .hb-nav-right {
  935.             display: flex;
  936.             flex-wrap: wrap;
  937.             width: 100%;
  938.             flex: 0 0 100%;
  939.             gap: 8px;
  940.             padding-top: 12px;
  941.             border-top: 1px solid var(--hb-border);
  942.             margin-top: 4px;
  943.         }
  944.     }
  946.     /* ── Body offset for fixed navbar ─────────────────────────────────────────── */
  947.     body {
  948.         padding-top: 64px;
  949.     }
  951.     @media (max-width: 1024px) {
  952.         body {
  953.             padding-top: 56px;
  954.         }
  955.     }
  957.     /* ── Processing loader ────────────────────────────────────────────────────── */
  958.     #buddybee_processing_loader {
  959.         position: fixed;
  960.         inset: 0;
  961.         background: rgba(247, 245, 240, .88);
  962.         backdrop-filter: blur(4px);
  963.         z-index: 999999;
  964.         display: none;
  965.         align-items: center;
  966.         justify-content: center;
  967.     }
  969.     #buddybee_processing_loader div {
  970.         background: var(--hb-white);
  971.         border-radius: 14px;
  972.         padding: 28px 44px;
  973.         box-shadow: 0 12px 40px rgba(26, 29, 46, .12);
  974.         text-align: center;
  975.     }
  977.     #buddybee_processing_loader p {
  978.         color: var(--hb-ink);
  979.         font-weight: 700;
  980.         font-size: 12px;
  981.         letter-spacing: .1em;
  982.         text-transform: uppercase;
  983.         margin: 0;
  984.         font-family: var(--hb-font);
  985.     }
  987.     a:hover {
  988.         text-decoration: none;
  989.     }
  990. </style>
  992. <nav class="hb-navbar" id="hbNavbar">
  993.     <div class="hb-nav-inner">
  995.         {# Brand #}
  996.         <a class="hb-brand" href="{{ url('dashboard') }}">
  997.             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  998.                  alt="HoneyBee">
  999.             <span class="hb-brand-name">Honey<b>Bee</b></span>
  1000.         </a>
  1002.         {# Mobile hamburger #}
  1003.         <button class="hb-toggler" id="hbToggler" aria-label="Open menu" type="button">
  1004.             <span></span><span></span><span></span>
  1005.         </button>
  1007.         {# Primary navigation #}
  1008.         <ul class="hb-links">
  1009.             <li class="hb-link">
  1010.                 <a href="{{ url('honeybee_product') }}"
  1011.                    class="{{ app.request.get('_route') == 'honeybee_product' ? 'active' : '' }} trn"
  1012.                    data-trn-key="_PRODUCTS_">Product</a>
  1013.             </li>
  1014.             <li class="hb-link">
  1015.                 <a href="{{ url('honeybee_solutions') }}"
  1016.                    class="{{ app.request.get('_route') == 'honeybee_solutions' ? 'active' : '' }}">Solutions</a>
  1017.             </li>
  1018.             <li class="hb-link">
  1019.                 <a href="{{ url('honeybee_pricing') }}"
  1020.                    class="{{ app.request.get('_route') == 'honeybee_pricing' ? 'active' : '' }} trn"
  1021.                    data-trn-key="_PRICING_">Pricing</a>
  1022.             </li>
  1023.             <li class="hb-link">
  1024.                 <a href="{{ url('honeybee_partners') }}"
  1025.                    class="{{ app.request.get('_route') == 'honeybee_partners' ? 'active' : '' }}">Partners</a>
  1026.             </li>
  1027.             <li class="hb-drop">
  1028.                 <a href="#">Company <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1029.                 <ul class="hb-dd-menu">
  1030.                     <li><a href="{{ url('honeybee_about_us') }}"
  1031.                            class="{{ app.request.get('_route') == 'honeybee_about_us' ? 'active' : '' }}">About</a></li>
  1032.                     <li><a href="{{ url('honeybee_FAQ') }}"
  1033.                            class="{{ app.request.get('_route') == 'honeybee_FAQ' ? 'active' : '' }}">FAQ</a></li>
  1034.                     <li><a href="{{ url('honeybee_contact') }}"
  1035.                            class="{{ app.request.get('_route') == 'honeybee_contact' ? 'active' : '' }}">Contact</a>
  1036.                     </li>
  1037.                 </ul>
  1038.             </li>
  1039.         </ul>
  1041.         {# Right-side controls #}
  1042.         <div class="hb-nav-right">
  1044.             {# Language switcher #}
  1045.             <div class="hb-lang">
  1046.                 <button class="hb-lang-btn" type="button">
  1047.                     <i class="fa-solid fa-globe" style="font-size:12px"></i>
  1048.                     <span class="curr_locale_text">en</span>
  1049.                     <i class="fa-solid fa-chevron-down" style="font-size:8px;opacity:.5"></i>
  1050.                 </button>
  1051.                 <ul class="hb-lang-menu">
  1052.                     <li><a href="#" class="locale_changer en" data-locale="en">🇬🇧 English</a></li>
  1053.                     <li><a href="#" class="locale_changer bn" data-locale="bn">🇧🇩 বাংলা</a></li>
  1054.                     <li><a href="#" class="locale_changer it" data-locale="it">🇮🇹 Italiano</a></li>
  1055.                     <li><a href="#" class="locale_changer de" data-locale="de">🇩🇪 Deutsch</a></li>
  1056.                     <li><a href="#" class="locale_changer fr" data-locale="fr">🇫🇷 Français</a></li>
  1057.                     <li><a href="#" class="locale_changer sp" data-locale="sp">🇪🇸 Español</a></li>
  1058.                     <li><a href="#" class="locale_changer cn" data-locale="cn">🇨🇳 中文</a></li>
  1059.                 </ul>
  1060.             </div>
  1062.             {# Admin only: switch user #}
  1063.             {% if session[UserConstants.USER_ID] is defined and (BUDDYBEE_ADMIN_LEVEL >= 1 or session['actualUserIsAdmin'] is defined) %}
  1064.                 <div class="hb-switch">
  1065.                     <button class="hb-switch-btn" type="button">Switch User</button>
  1066.                     <ul class="hb-switch-panel">
  1067.                         <li>
  1068.                             <a href="{{ absolute_url(path('view_as_user_central')) }}/{{ session['actualUserId'] is defined ? session['actualUserId'] : session['userId'] }}">
  1069.                                 ↩ Back to Mine
  1070.                             </a>
  1071.                         </li>
  1072.                         <li class="hb-sw-div"></li>
  1073.                         <li style="padding:2px 0"><select name="viewAsId" id="viewAsId"></select></li>
  1074.                     </ul>
  1075.                 </div>
  1076.             {% endif %}
  1078.             {% if session[UserConstants.USER_ID] is defined %}
  1080.                 {# Authenticated: user avatar + dropdown #}
  1081.                 <div class="hb-user">
  1082.                     <button class="hb-user-btn" type="button">
  1083.                         <div class="hb-user-avatar"
  1084.                                 {% if session[UserConstants.USER_IMAGE] != '' and session[UserConstants.USER_IMAGE] is not null %}
  1085.                                     style="background:url('{{ url('dashboard') }}{{ session[UserConstants.USER_IMAGE] }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1086.                                 {% else %}
  1087.                                     style="background:url('{{ url('dashboard') }}honeybee_web_assets/images/profiles/profile.png?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1088.                                 {% endif %}
  1089.                         ></div>
  1090.                         <span class="hb-user-name">{{ session[UserConstants.USER_NAME] }}</span>
  1091.                         <i class="fa-solid fa-chevron-down" style="font-size:9px;color:var(--hb-muted);opacity:.55"></i>
  1092.                     </button>
  1093.                     <ul class="hb-user-menu">
  1094.                         <li>
  1095.                             <a href="{{ url('honeybee_my_freelancer_profile') }}"
  1096.                                class="{{ app.request.get('_route') == 'honeybee_my_freelancer_profile' ? 'active' : '' }}">
  1097.                                 <i class="fa-regular fa-circle-user"></i> Profile
  1098.                             </a>
  1099.                         </li>
  1100.                         <li>
  1101.                             <a href="{{ url('ticket_list') }}"
  1102.                                class="{{ app.request.get('_route') == 'ticket_list' ? 'active' : '' }}">
  1103.                                 <i class="fa-regular fa-ticket"></i> <span class="trn" data-trn-key="_MY_TICKETS_">My Tickets</span>
  1104.                             </a>
  1105.                         </li>
  1106.                         <li>
  1107.                             <a href="{{ url('central_landing') }}"
  1108.                                class="{{ app.request.get('_route') == 'central_landing' ? 'active' : '' }}">
  1109.                                 <i class="fas fa-border-all"></i> <span class="trn" data-trn-key="_MY_COMPANIES_">My Companies</span>
  1110.                             </a>
  1111.                         </li>
  1112.                         {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  1113.                             <li class="hb-u-div"></li>
  1114.                             <li>
  1115.                                 <a href="{{ url('super_admin_command_center') }}"
  1116.                                    class="{{ app.request.get('_route') == 'super_admin_command_center' ? 'active' : '' }}">
  1117.                                     <i class="fa-solid fa-gauge-high"></i> Super Admin
  1118.                                 </a>
  1119.                             </li>
  1120.                             <li class="hb-u-div"></li>
  1121.                             <li>
  1122.                                 <a href="{{ url('datev_home') }}"
  1123.                                    class="{{ app.request.get('_route') == 'datev_home' ? 'active' : '' }}">
  1124.                                     <i class="fa-solid fa-gauge-high"></i> Datev Control
  1125.                                 </a>
  1126.                             </li>
  1128.                         {% endif %}
  1129.                         {% if BUDDYBEE_ADMIN_LEVEL > 1 %}
  1130.                             <li class="hb-u-div"></li>
  1131.                             <li>
  1132.                                 <a href="{{ url('admin_demo_pending_list') }}"
  1133.                                    class="{{ app.request.get('_route') in ['admin_demo_pending_list','admin_demo_request_detail'] ? 'active' : '' }}">
  1134.                                     <i class="fa-solid fa-calendar-check"></i> Demo Requests
  1135.                                 </a>
  1136.                             </li>
  1137.                             <li>
  1138.                                 <a href="{{ url('admin_demo_all_list') }}"
  1139.                                    class="{{ app.request.get('_route') == 'admin_demo_all_list' ? 'active' : '' }}">
  1140.                                     <i class="fa-solid fa-list-check"></i> All Bookings
  1141.                                 </a>
  1142.                             </li>
  1143.                         {% endif %}
  1144.                         <li class="hb-u-div"></li>
  1145.                         <li>
  1146.                             <a href="{{ url('user_logout') }}" style="color:#B04030">
  1147.                                 <i class="fa-solid fa-right-from-bracket"></i> Logout
  1148.                             </a>
  1149.                         </li>
  1150.                     </ul>
  1151.                 </div>
  1153.                 {# Companies shortcut #}
  1154.                 <a href="{{ url('central_landing') }}" class="hb-btn-companies trn" data-trn-key="_COMPANIES_">
  1155.                     <i class="fa-solid fa-building" style="font-size:11px"></i>
  1156.                     <span>Companies</span>
  1157.                 </a>
  1159.                 {# Book Demo CTA (authenticated) #}
  1160.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1161.                     Demo</a>
  1163.             {% else %}
  1165.                 {# Guest: login + get started + book demo #}
  1166.                 <a href="{{ url('user_login') }}" class="hb-btn-login trn" data-trn-key="_LOGIN_">Login</a>
  1167.                 <a href="{{ url('sign_up') }}" class="hb-btn-signup trn" data-trn-key="_CREATE_ACCOUNT_">Get Started</a>
  1168.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1169.                     Demo</a>
  1171.             {% endif %}
  1173.             {# Dark / Light mode toggle #}
  1174.             {#            <div class="hb-theme"> #}
  1175.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/sun.svg')) }}" alt="Light mode"> #}
  1176.             {#                <input type="checkbox" id="theme-toggle-checkbox"> #}
  1177.             {#                <label for="theme-toggle-checkbox" class="hb-theme-track" id="hbThemeTrack"></label> #}
  1178.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/moon.svg')) }}" alt="Dark mode"> #}
  1179.             {#            </div> #}
  1181.         </div>{# /hb-nav-right #}
  1182.     </div>{# /hb-nav-inner #}
  1183. </nav>
  1185. {# ── Apply saved theme immediately (no flash of wrong theme) ─────────────── #}
  1186. <script>
  1187.     (function () {
  1188.         var saved = localStorage.getItem('theme') || 'light';
  1189.         if (saved === 'dark') {
  1190.             var css = document.getElementById('dark-theme-css');
  1191.             var cb = document.getElementById('theme-toggle-checkbox');
  1192.             var track = document.getElementById('hbThemeTrack');
  1193.             if (css) css.disabled = false;
  1194.             if (cb) cb.checked = true;
  1195.             if (track) track.classList.add('hb-dark');
  1196.         }
  1197.     }());
  1198. </script>
  1200. {# ── Navbar interaction scripts ───────────────────────────────────────────── #}
  1201. <script>
  1202.     (function () {
  1203.         var navbar = document.getElementById('hbNavbar');
  1204.         var toggler = document.getElementById('hbToggler');
  1206.         window.addEventListener('scroll', function () {
  1207.             navbar.classList.toggle('hb-scrolled', window.scrollY > 6);
  1208.         }, {passive: true});
  1210.         if (toggler) {
  1211.             toggler.addEventListener('click', function () {
  1212.                 navbar.classList.toggle('hb-open');
  1213.                 toggler.classList.toggle('hb-open');
  1214.             });
  1215.         }
  1217.         navbar.querySelectorAll('.hb-drop > a').forEach(function (a) {
  1218.             a.addEventListener('click', function (e) {
  1219.                 if (window.innerWidth <= 1024) {
  1220.                     e.preventDefault();
  1221.                     a.closest('.hb-drop').classList.toggle('hb-mob-open');
  1222.                 }
  1223.             });
  1224.         });
  1226.         var cb = document.getElementById('theme-toggle-checkbox');
  1227.         var track = document.getElementById('hbThemeTrack');
  1228.         if (cb && track) {
  1229.             track.addEventListener('click', function () {
  1230.                 changeTheme(!cb.checked);
  1231.             });
  1232.         }
  1233.     }());
  1234. </script>
  1236. {# ── Preloader: hide on load ──────────────────────────────────────────────── #}
  1237. <script>
  1238.     document.body.style.overflow = 'hidden';
  1239.     window.addEventListener('load', function () {
  1240.         var pre = document.getElementById('hb-preloader');
  1241.         if (pre) {
  1242.             pre.style.transition = 'opacity .35s ease';
  1243.             pre.style.opacity = '0';
  1244.             setTimeout(function () {
  1245.                 pre.style.display = 'none';
  1246.             }, 360);
  1247.         }
  1248.         document.body.style.overflow = 'auto';
  1249.     });
  1250. </script>
  1253. {% set full_js_included = 0 %}
  1254. {% endif %}{# /include_html #}
  1256. <input type="hidden" id="timeStampOnHeaderLoad" value="{{ 'now'|date('U') }}">
  1257. {% include '@Application/inc/ajax_route_library.html.twig' %}
  1259. {# Date-picker scripts #}
  1260. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1261. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  1262. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>