templates/layout/base.html.twig line 271

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