templates/layout/base.html.twig line 258

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{% block title %}NATIONS{% endblock %}</title>
  7. {# ── Viewport & compatibilité ── #}
  8. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11. {# ── SEO ── #}
  12. <meta name="keywords" content="nations isbb bethesda liveedu gestion scolaire">
  13. <meta name="description" content="Institut secondaire bilingue des Nations — plateforme de gestion scolaire LiveEdu">
  14. <meta name="author" content="Arsene Fokam Poka, Ing">
  16. {# ── Favicons ── #}
  17. <link rel="icon" type="image/png" href="{{ asset('assets/images/BethesdaLogo.png') }}">
  18. <link rel="apple-touch-icon" href="{{ asset('assets/images/BethesdaLogo.png') }}">
  20. {# ── Polices Google ── #}
  21. <link rel="preconnect" href="https://fonts.googleapis.com">
  22. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  23. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  25. {# ── Librairies CSS ── #}
  26. <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
  27. <link href="{{ asset('assets/css/bootstrap-grid.min.css') }}" rel="stylesheet">
  28. <link href="{{ asset('assets/css/bootstrap-reboot.min.css') }}" rel="stylesheet">
  29. <link href="{{ asset('assets/css/font-awesome.min.css') }}" rel="stylesheet">
  31. {# ── CSS applicatif ── #}
  32. <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
  33. <link href="{{ asset('assets/css/custom.css') }}" rel="stylesheet">
  34. <link href="{{ asset('assets/css/navbar-fix.css') }}" rel="stylesheet">
  36. {# ══════════════════════════════════════════════════════
  37. DESIGN SYSTEM GLOBAL — LiveEdu
  38. Tous les tokens, utilitaires et composants partagés.
  39. ══════════════════════════════════════════════════════ #}
  40. <style>
  41. /* ── Tokens ───────────────────────────────────────────── */
  42. :root {
  43. /* Couleurs */
  44. --c-ink: #0f1923;
  45. --c-ink-soft: #1e2f3f;
  46. --c-gold: #c9972b;
  47. --c-gold-lt: #f0c060;
  48. --c-cream: #faf7f2;
  49. --c-white: #ffffff;
  50. --c-slate: #344054;
  51. --c-muted: #6b7a90;
  52. --c-border: rgba(0,0,0,.08);
  53. --c-border-dk: rgba(255,255,255,.1);
  54. --c-success: #22c55e;
  55. --c-warning: #f59e0b;
  56. --c-danger: #ef4444;
  57. --c-info: #3b82f6;
  59. /* Typographie */
  60. --f-display: 'Playfair Display', Georgia, serif;
  61. --f-body: 'DM Sans', system-ui, sans-serif;
  63. /* Rayons & ombres */
  64. --r-sm: 8px;
  65. --r-md: 14px;
  66. --r-lg: 20px;
  67. --r-xl: 28px;
  68. --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  69. --shadow-md: 0 8px 24px rgba(0,0,0,.09);
  70. --shadow-lg: 0 16px 48px rgba(0,0,0,.12);
  72. /* Espacements de section */
  73. --gap-section: 12%;
  74. --gap-content: 6vw;
  75. }
  77. /* ── Reset minimal ────────────────────────────────────── */
  78. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  79. html { scroll-behavior: smooth; }
  80. body {
  81. font-family: var(--f-body);
  82. background: var(--c-cream);
  83. color: var(--c-ink);
  84. line-height: 1.6;
  85. -webkit-font-smoothing: antialiased;
  86. }
  87. img { max-width: 100%; display: block; }
  88. a { transition: color .18s, opacity .18s; }
  90. /* ── Typographie ──────────────────────────────────────── */
  91. .t-display {
  92. font-family: var(--f-display);
  93. font-weight: 700;
  94. line-height: 1.1;
  95. letter-spacing: -.02em;
  96. }
  97. .t-eyebrow {
  98. font-size: .68rem; font-weight: 700;
  99. letter-spacing: .18em; text-transform: uppercase;
  100. color: var(--c-gold);
  101. display: inline-flex; align-items: center; gap: 10px;
  102. }
  103. .t-eyebrow::before {
  104. content: ''; display: block;
  105. width: 28px; height: 1px; background: currentColor;
  106. }
  107. .t-muted { color: var(--c-muted); }
  108. .t-gold { color: var(--c-gold); }
  110. /* ── Boutons ──────────────────────────────────────────── */
  111. .btn-lv {
  112. display: inline-flex; align-items: center; gap: 8px;
  113. padding: 11px 24px; border-radius: var(--r-sm);
  114. font-family: var(--f-body); font-size: .9rem; font-weight: 600;
  115. cursor: pointer; text-decoration: none; border: none;
  116. transition: background .18s, transform .14s, box-shadow .18s;
  117. white-space: nowrap;
  118. }
  119. .btn-lv:hover { transform: translateY(-2px); }
  121. .btn-gold { background: var(--c-gold); color: #fff; }
  122. .btn-gold:hover { background: var(--c-gold-lt); color: #fff; }
  124. .btn-ink { background: var(--c-ink); color: #fff; }
  125. .btn-ink:hover { background: var(--c-ink-soft); color: #fff; }
  127. .btn-outline { background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-border); }
  128. .btn-outline:hover { border-color: var(--c-gold); color: var(--c-gold); }
  130. .btn-outline-w { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
  131. .btn-outline-w:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
  133. .btn-white { background: #fff; color: var(--c-ink); box-shadow: var(--shadow-sm); }
  134. .btn-white:hover { box-shadow: var(--shadow-md); color: var(--c-ink); }
  136. /* ── Tags / Badges ────────────────────────────────────── */
  137. .badge-lv {
  138. display: inline-block;
  139. font-size: .68rem; font-weight: 700;
  140. letter-spacing: .09em; text-transform: uppercase;
  141. padding: 3px 11px; border-radius: 20px; border: 1px solid;
  142. }
  143. .badge-gold { background: rgba(201,151,43,.12); color: var(--c-gold); border-color: rgba(201,151,43,.3); }
  144. .badge-success { background: rgba(34,197,94,.12); color: #15803d; border-color: rgba(34,197,94,.3); }
  145. .badge-danger { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.3); }
  146. .badge-info { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.3); }
  147. .badge-muted { background: rgba(0,0,0,.05); color: var(--c-muted);border-color: var(--c-border); }
  149. /* ── En-têtes de page (front) ─────────────────────────── */
  150. .page-header {
  151. background: var(--c-ink);
  152. padding: 60px var(--gap-content) 50px;
  153. position: relative; overflow: hidden;
  154. }
  155. .page-header__glow {
  156. position: absolute; pointer-events: none; border-radius: 50%;
  157. background: radial-gradient(circle, rgba(201,151,43,.18), transparent 70%);
  158. }
  159. .page-header__title {
  160. font-family: var(--f-display);
  161. font-size: clamp(2rem, 4vw, 3rem);
  162. font-weight: 700; color: #fff; line-height: 1.1;
  163. }
  164. .page-header__sub {
  165. color: rgba(255,255,255,.5);
  166. margin-top: 10px; font-size: .92rem;
  167. }
  169. /* ── Sections ─────────────────────────────────────────── */
  170. .section { padding: var(--gap-section) var(--gap-content); }
  171. .section--white { background: var(--c-white); }
  172. .section--ink { background: var(--c-ink); }
  173. .section--cream { background: var(--c-cream); }
  175. .content-wrap {
  176. max-width: 1280px;
  177. margin: 0 auto;
  178. padding: 56px var(--gap-content);
  179. }
  181. /* ── Cartes génériques ────────────────────────────────── */
  182. .card-lv {
  183. background: var(--c-white);
  184. border: 1px solid var(--c-border);
  185. border-radius: var(--r-md);
  186. transition: box-shadow .22s, transform .2s;
  187. }
  188. .card-lv:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  190. /* ── Grille auto ──────────────────────────────────────── */
  191. .grid-auto {
  192. display: grid;
  193. grid-template-columns: repeat(auto-fill, minmax(var(--col-min, 240px), 1fr));
  194. gap: var(--grid-gap, 24px);
  195. }
  197. /* ── Flash Messages ───────────────────────────────────── */
  198. .flash-stack {
  199. position: fixed; top: 16px; right: 16px; z-index: 9999;
  200. display: flex; flex-direction: column; gap: 10px;
  201. max-width: 380px; width: calc(100% - 32px);
  202. }
  203. .flash-item {
  204. display: flex; align-items: flex-start; gap: 12px;
  205. padding: 14px 16px; border-radius: var(--r-sm);
  206. background: #fff; border-left: 4px solid var(--c-gold);
  207. box-shadow: var(--shadow-md);
  208. animation: slideIn .3s ease both;
  209. }
  210. .flash-item--success { border-color: var(--c-success); }
  211. .flash-item--danger { border-color: var(--c-danger); }
  212. .flash-item--warning { border-color: var(--c-warning); }
  213. .flash-item--info { border-color: var(--c-info); }
  214. .flash-item__icon { font-size: 1rem; margin-top: 1px; }
  215. .flash-item--success .flash-item__icon { color: var(--c-success); }
  216. .flash-item--danger .flash-item__icon { color: var(--c-danger); }
  217. .flash-item--warning .flash-item__icon { color: var(--c-warning); }
  218. .flash-item--info .flash-item__icon { color: var(--c-info); }
  219. .flash-item__text { font-size: .88rem; flex: 1; line-height: 1.5; }
  220. .flash-item__close {
  221. background: none; border: none; cursor: pointer;
  222. color: var(--c-muted); font-size: 1rem; padding: 0;
  223. line-height: 1; margin-top: 1px; transition: color .15s;
  224. }
  225. .flash-item__close:hover { color: var(--c-ink); }
  227. /* ── Animations ───────────────────────────────────────── */
  228. @keyframes fadeUp {
  229. from { opacity: 0; transform: translateY(22px); }
  230. to { opacity: 1; transform: translateY(0); }
  231. }
  232. @keyframes slideIn {
  233. from { opacity: 0; transform: translateX(20px); }
  234. to { opacity: 1; transform: translateX(0); }
  235. }
  236. .anim-up { animation: fadeUp .55s ease both; }
  238. /* ── Utilitaires ──────────────────────────────────────── */
  239. .visually-hidden {
  240. position: absolute; width: 1px; height: 1px;
  241. overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  242. }
  243. </style>
  245. {% block stylesheets %}{% endblock %}
  246. </head>
  248. <body class="host_version">
  250. {% block main %}
  251. {# Réservé au layout backend #}
  252. {% endblock %}
  254. {% block partials %}
  255. {# Flash messages redesignés #}
  256. {% include 'layout/partials/flash_messages.html.twig' %}
  258. {% if not app.user %}
  259. {% include 'layout/partials/modal.html.twig' %}
  260. {% include 'layout/partials/loader.html.twig' %}
  261. {% include 'layout/partials/header.html.twig' %}
  262. {% endif %}
  263. {% endblock %}
  265. {% block body %}{% endblock %}
  267. {% block footer %}
  268. {% include 'layout/partials/partners.html.twig' %}
  269. {% include 'layout/partials/footer.html.twig' %}
  270. {% endblock %}
  272. {# Sauvegarde de la route courante en session #}
  273. {{ app.session.set('referer', app.request.get('_route')) }}
  275. {# ══════════════════════════════════════════════════════
  276. SCRIPTS — chargés en fin de body pour la performance
  277. ══════════════════════════════════════════════════════ #}
  279. {# ── 1. jQuery ── #}
  280. <script src="https://code.jquery.com/jquery-3.7.1.min.js"
  281. integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  282. crossorigin="anonymous"></script>
  284. {# ── 2. jQuery UI ── #}
  285. <script src="{{ asset('assets/js/jquery-ui.min.js') }}"></script>
  287. {# ── 3. Bootstrap 4 bundle (inclut Popper) ── #}
  288. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
  290. {# ── 4. Chart.js ── #}
  291. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  293. {# ── 5. Scripts applicatifs ── #}
  294. <script src="{{ asset('assets/js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
  295. <script src="{{ asset('assets/js/jsjquery.simpleAccordion.min.js') }}"></script>
  296. <script src="{{ asset('assets/js/menu.js') }}"></script>
  297. <script src="{{ asset('assets/js/all.js') }}"></script>
  298. <script src="{{ asset('assets/js/front.js') }}"></script>
  299. <script src="{{ asset('assets/js/custom.js') }}"></script>
  300. <script src="{{ asset('assets/js/timeline.min.js') }}"></script>
  301. <script src="{{ asset('assets/js/d3.v4.min.js') }}"></script>
  303. <script>
  304. (function () {
  305. 'use strict';
  307. /* ── Sidebar toggle (backend) ──────────────────────── */
  308. $('#toggle-btn').on('click', function (e) {
  309. e.preventDefault();
  310. if ($(window).width() > 1199) {
  311. $('body').toggleClass('sidebar-collapsed');
  312. $('.side-navbar').toggleClass('shrinked');
  313. $('.page').toggleClass('active');
  314. } else {
  315. $('.side-navbar').toggleClass('show-sm');
  316. $('.page').toggleClass('active-sm');
  317. }
  318. });
  320. $(document).on('click', function (e) {
  321. if ($(window).width() <= 1199 &&
  322. !$(e.target).closest('.side-navbar, #toggle-btn').length) {
  323. $('.side-navbar').removeClass('show-sm');
  324. $('.page').removeClass('active-sm');
  325. }
  326. });
  328. /* ── Changement d'année scolaire ───────────────────── */
  329. $('#select_year').on('change', function () {
  330. $.ajax({
  331. type: 'POST',
  332. url: '{{ path("update_school_year") }}',
  333. data: { selectedSchoolYear: $(this).val() },
  334. success: function () { location.reload(); },
  335. error: function () { alert('Échec du changement d\'année.'); }
  336. });
  337. });
  339. /* ── Timeline ──────────────────────────────────────── */
  340. if (typeof timeline === 'function') {
  341. timeline(document.querySelectorAll('.timeline'), {
  342. forceVerticalMode: 700,
  343. mode: 'horizontal',
  344. verticalStartPosition: 'left',
  345. visibleItems: 4
  346. });
  347. }
  349. /* ── Flash messages : fermeture manuelle ───────────── */
  350. $(document).on('click', '.flash-item__close', function () {
  351. $(this).closest('.flash-item').fadeOut(200, function () {
  352. $(this).remove();
  353. });
  354. });
  356. /* ── Auto-dismiss des flash après 5s ───────────────── */
  357. setTimeout(function () {
  358. $('.flash-item').fadeOut(400, function () { $(this).remove(); });
  359. }, 5000);
  361. })();
  362. </script>
  364. {# ── Google Analytics ── #}
  365. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-208287842-1"></script>
  366. <script>
  367. window.dataLayer = window.dataLayer || [];
  368. function gtag() { dataLayer.push(arguments); }
  369. gtag('js', new Date());
  370. gtag('config', 'UA-208287842-1');
  371. </script>
  373. {% block javascripts %}{% endblock %}
  375. </body>
  376. </html>