templates/school/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/frontEndLayout.html.twig' %}
  3. {% block name %}
  4. Welcome to LiveEdu
  5. {% endblock %}
  7. {% block stylesheets %}
  8. {{ parent() }}
  9. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  10. <style>
  11. :root {
  12. --gold: #C9A84C;
  13. --gold-light: #E8D5A3;
  14. --navy: #0A1628;
  15. --navy-mid: #112244;
  16. --white: #FAFAF8;
  17. --cream: #F5F0E8;
  18. --text-muted: #8A8A8A;
  19. --accent: #2C6BAD;
  20. }
  22. * { margin: 0; padding: 0; box-sizing: border-box; }
  24. body {
  25. font-family: 'DM Sans', sans-serif;
  26. background: var(--white);
  27. color: var(--navy);
  28. }
  30. /* ─── HERO SLIDER ─────────────────────────────────────── */
  31. .hero-slider {
  32. position: relative;
  33. height: 100vh;
  34. min-height: 600px;
  35. overflow: hidden;
  36. }
  38. .carousel-item-custom {
  39. position: absolute;
  40. inset: 0;
  41. opacity: 0;
  42. transition: opacity 1s ease;
  43. background-size: cover;
  44. background-position: center;
  45. }
  46. .carousel-item-custom.active { opacity: 1; }
  48. .hero-overlay {
  49. position: absolute;
  50. inset: 0;
  51. background: linear-gradient(
  52. 135deg,
  53. rgba(10,22,40,0.85) 0%,
  54. rgba(17,34,68,0.60) 60%,
  55. rgba(201,168,76,0.15) 100%
  56. );
  57. }
  59. .hero-content {
  60. position: absolute;
  61. inset: 0;
  62. display: flex;
  63. flex-direction: column;
  64. justify-content: center;
  65. padding: 0 8vw;
  66. max-width: 900px;
  67. }
  69. .hero-label {
  70. font-family: 'DM Sans', sans-serif;
  71. font-size: 0.75rem;
  72. font-weight: 600;
  73. letter-spacing: 0.35em;
  74. text-transform: uppercase;
  75. color: var(--gold);
  76. margin-bottom: 1.5rem;
  77. opacity: 0;
  78. transform: translateY(20px);
  79. animation: fadeUp 0.8s ease 0.3s forwards;
  80. }
  82. .hero-title {
  83. font-family: 'Playfair Display', serif;
  84. font-size: clamp(2.5rem, 6vw, 5rem);
  85. font-weight: 900;
  86. line-height: 1.1;
  87. color: var(--white);
  88. margin-bottom: 1.5rem;
  89. opacity: 0;
  90. transform: translateY(30px);
  91. animation: fadeUp 0.9s ease 0.5s forwards;
  92. }
  94. .hero-title em {
  95. font-style: italic;
  96. color: var(--gold);
  97. }
  99. .hero-sub {
  100. font-size: 1.1rem;
  101. font-weight: 300;
  102. color: rgba(255,255,255,0.75);
  103. max-width: 480px;
  104. line-height: 1.7;
  105. opacity: 0;
  106. transform: translateY(20px);
  107. animation: fadeUp 0.9s ease 0.7s forwards;
  108. }
  110. .hero-cta {
  111. margin-top: 2.5rem;
  112. display: flex;
  113. gap: 1rem;
  114. opacity: 0;
  115. animation: fadeUp 0.9s ease 0.9s forwards;
  116. }
  118. .btn-gold {
  119. padding: 0.85rem 2rem;
  120. background: var(--gold);
  121. color: var(--navy);
  122. font-weight: 600;
  123. font-size: 0.9rem;
  124. letter-spacing: 0.05em;
  125. border: none;
  126. cursor: pointer;
  127. text-decoration: none;
  128. transition: all 0.3s ease;
  129. }
  130. .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }
  132. .btn-outline-white {
  133. padding: 0.85rem 2rem;
  134. background: transparent;
  135. color: var(--white);
  136. font-weight: 500;
  137. font-size: 0.9rem;
  138. letter-spacing: 0.05em;
  139. border: 1px solid rgba(255,255,255,0.4);
  140. cursor: pointer;
  141. text-decoration: none;
  142. transition: all 0.3s ease;
  143. }
  144. .btn-outline-white:hover { border-color: var(--gold); color: var(--gold); }
  146. /* Slider decorative bar */
  147. .hero-bar {
  148. position: absolute;
  149. right: 0;
  150. top: 0;
  151. bottom: 0;
  152. width: 6px;
  153. background: var(--gold);
  154. }
  156. /* Slide counter */
  157. .slide-counter {
  158. position: absolute;
  159. bottom: 2.5rem;
  160. right: 3rem;
  161. color: rgba(255,255,255,0.5);
  162. font-size: 0.8rem;
  163. letter-spacing: 0.2em;
  164. font-weight: 500;
  165. }
  166. .slide-counter span { color: var(--gold); font-size: 1.1rem; }
  168. /* Carousel indicators */
  169. .hero-indicators {
  170. position: absolute;
  171. bottom: 2.5rem;
  172. left: 8vw;
  173. display: flex;
  174. gap: 0.6rem;
  175. list-style: none;
  176. }
  177. .hero-indicators li {
  178. width: 28px;
  179. height: 2px;
  180. background: rgba(255,255,255,0.3);
  181. cursor: pointer;
  182. transition: all 0.3s;
  183. }
  184. .hero-indicators li.active {
  185. width: 52px;
  186. background: var(--gold);
  187. }
  189. /* Carousel controls */
  190. .hero-prev, .hero-next {
  191. position: absolute;
  192. top: 50%;
  193. transform: translateY(-50%);
  194. width: 52px;
  195. height: 52px;
  196. border: 1px solid rgba(255,255,255,0.25);
  197. background: rgba(10,22,40,0.4);
  198. backdrop-filter: blur(8px);
  199. color: white;
  200. display: flex;
  201. align-items: center;
  202. justify-content: center;
  203. font-size: 1.1rem;
  204. cursor: pointer;
  205. transition: all 0.3s;
  206. text-decoration: none;
  207. z-index: 10;
  208. }
  209. .hero-prev { left: 2rem; }
  210. .hero-next { right: 2rem; }
  211. .hero-prev:hover, .hero-next:hover {
  212. background: var(--gold);
  213. border-color: var(--gold);
  214. color: var(--navy);
  215. }
  217. @keyframes fadeUp {
  218. to { opacity: 1; transform: translateY(0); }
  219. }
  221. /* ─── STATS BAR ──────────────────────────────────────── */
  222. .stats-bar {
  223. background: var(--navy);
  224. padding: 0;
  225. display: grid;
  226. grid-template-columns: repeat(4, 1fr);
  227. }
  229. .stat-item {
  230. padding: 2rem 1.5rem;
  231. text-align: center;
  232. border-right: 1px solid rgba(255,255,255,0.06);
  233. transition: background 0.3s;
  234. }
  235. .stat-item:last-child { border-right: none; }
  236. .stat-item:hover { background: rgba(201,168,76,0.08); }
  238. .stat-num {
  239. font-family: 'Playfair Display', serif;
  240. font-size: 2rem;
  241. font-weight: 700;
  242. color: var(--gold);
  243. display: block;
  244. }
  245. .stat-label {
  246. font-size: 0.75rem;
  247. letter-spacing: 0.12em;
  248. text-transform: uppercase;
  249. color: rgba(255,255,255,0.45);
  250. margin-top: 0.3rem;
  251. }
  253. /* ─── SECTION HEADING ────────────────────────────────── */
  254. .section-header {
  255. text-align: center;
  256. padding: 5rem 2rem 3rem;
  257. }
  259. .section-tag {
  260. display: inline-block;
  261. font-size: 0.7rem;
  262. font-weight: 600;
  263. letter-spacing: 0.35em;
  264. text-transform: uppercase;
  265. color: var(--gold);
  266. margin-bottom: 1rem;
  267. padding: 0.35rem 1rem;
  268. border: 1px solid var(--gold-light);
  269. background: rgba(201,168,76,0.06);
  270. }
  272. .section-title {
  273. font-family: 'Playfair Display', serif;
  274. font-size: clamp(1.8rem, 4vw, 2.8rem);
  275. font-weight: 700;
  276. color: var(--navy);
  277. line-height: 1.2;
  278. }
  280. .section-title em {
  281. font-style: italic;
  282. color: var(--accent);
  283. }
  285. .section-divider {
  286. width: 60px;
  287. height: 3px;
  288. background: var(--gold);
  289. margin: 1.5rem auto 0;
  290. }
  292. .section-sub {
  293. max-width: 520px;
  294. margin: 1.2rem auto 0;
  295. color: var(--text-muted);
  296. font-size: 0.95rem;
  297. line-height: 1.7;
  298. }
  300. /* ─── CHARTS SECTION ─────────────────────────────────── */
  301. .charts-section {
  302. background: var(--cream);
  303. padding-bottom: 5rem;
  304. }
  306. .charts-grid {
  307. display: grid;
  308. grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  309. gap: 1.5rem;
  310. padding: 0 4vw 2rem;
  311. max-width: 1400px;
  312. margin: 0 auto;
  313. }
  315. .chart-card {
  316. background: var(--white);
  317. border: 1px solid rgba(0,0,0,0.06);
  318. padding: 1.5rem 1rem 1.25rem;
  319. text-align: center;
  320. transition: all 0.35s ease;
  321. position: relative;
  322. overflow: hidden;
  323. }
  325. .chart-card::before {
  326. content: '';
  327. position: absolute;
  328. top: 0; left: 0; right: 0;
  329. height: 3px;
  330. background: linear-gradient(90deg, var(--gold), var(--accent));
  331. transform: scaleX(0);
  332. transition: transform 0.35s ease;
  333. }
  335. .chart-card:hover {
  336. transform: translateY(-6px);
  337. box-shadow: 0 20px 48px rgba(10,22,40,0.10);
  338. }
  339. .chart-card:hover::before { transform: scaleX(1); }
  341. .chart-card canvas {
  342. max-width: 180px;
  343. margin: 0 auto;
  344. display: block;
  345. }
  347. /* ─── FOOTER ACCENT ──────────────────────────────────── */
  348. .page-footer-accent {
  349. background: var(--navy);
  350. text-align: center;
  351. padding: 2rem;
  352. color: rgba(255,255,255,0.35);
  353. font-size: 0.8rem;
  354. letter-spacing: 0.1em;
  355. }
  356. .page-footer-accent span { color: var(--gold); }
  358. /* ─── RESPONSIVE ─────────────────────────────────────── */
  359. @media (max-width: 768px) {
  360. .stats-bar { grid-template-columns: repeat(2, 1fr); }
  361. .hero-content { padding: 0 5vw; }
  362. .hero-prev { left: 0.75rem; }
  363. .hero-next { right: 0.75rem; }
  364. }
  365. @media (max-width: 480px) {
  366. .stats-bar { grid-template-columns: 1fr 1fr; }
  367. .charts-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  368. }
  369. </style>
  370. {% endblock %}
  372. {% block body %}
  374. {# ── HERO CAROUSEL ────────────────────────────────────────── #}
  375. <div id="heroCarousel" class="hero-slider">
  377. {# Slide 1 #}
  378. <div class="carousel-item-custom active"
  379. style="background-image:url({{ asset('assets/images/slider-01.jpg') }});">
  380. <div class="hero-overlay"></div>
  381. <div class="hero-content">
  382. <p class="hero-label">Excellence · Innovation · Bilingual Education</p>
  383. <h1 class="hero-title">
  384. {{ french_school_name }}<br>
  385. <em>{{ english_school_name }}</em>
  386. </h1>
  387. <p class="hero-sub">{{ french_slogan }} &nbsp;·&nbsp; {{ english_slogan }}</p>
  388. <div class="hero-cta">
  389. <a href="#officialExams" class="btn-gold">Voir les résultats</a>
  390. <a href="#" class="btn-outline-white">En savoir plus</a>
  391. </div>
  392. </div>
  393. </div>
  395. {# Slide 2 #}
  396. <div class="carousel-item-custom"
  397. style="background-image:url({{ asset('assets/images/slider-02.jpg') }});">
  398. <div class="hero-overlay"></div>
  399. <div class="hero-content">
  400. <p class="hero-label">Digital · Connected · Modern</p>
  401. <h1 class="hero-title">
  402. <em>LiveEdu</em><br>
  403. Software Online Services
  404. </h1>
  405. <p class="hero-sub">A complete digital ecosystem built for educators, students, and administrators.</p>
  406. <div class="hero-cta">
  407. <a href="#" class="btn-gold">Découvrir la plateforme</a>
  408. </div>
  409. </div>
  410. </div>
  412. {# Slide 3 #}
  413. <div class="carousel-item-custom"
  414. style="background-image:url({{ asset('assets/images/slide_04.PNG') }});">
  415. <div class="hero-overlay"></div>
  416. <div class="hero-content">
  417. <p class="hero-label">Transparency · Quality · Trust</p>
  418. <h1 class="hero-title">
  419. <em>{{ english_school_name }}</em><br>
  420. {{ english_slogan }}
  421. </h1>
  422. <p class="hero-sub">Real-time data, open reporting and trusted results — for every student, every year.</p>
  423. <div class="hero-cta">
  424. <a href="#officialExams" class="btn-gold">Voir les statistiques</a>
  425. </div>
  426. </div>
  427. </div>
  429. {# Decorative bar #}
  430. <div class="hero-bar"></div>
  432. {# Indicators #}
  433. <ol class="hero-indicators" id="heroIndicators">
  434. <li class="active" data-slide="0"></li>
  435. <li data-slide="1"></li>
  436. <li data-slide="2"></li>
  437. </ol>
  439. {# Slide counter #}
  440. <div class="slide-counter">
  441. <span id="slideNum">01</span> / 03
  442. </div>
  444. {# Controls #}
  445. <a class="hero-prev" id="heroPrev" href="#">
  446. <i class="fa fa-angle-left"></i>
  447. </a>
  448. <a class="hero-next" id="heroNext" href="#">
  449. <i class="fa fa-angle-right"></i>
  450. </a>
  451. </div>
  453. {# ── STATS BAR ─────────────────────────────────────────────── #}
  454. <div class="stats-bar">
  455. <div class="stat-item">
  456. <span class="stat-num">98%</span>
  457. <span class="stat-label">Taux d'admission</span>
  458. </div>
  459. <div class="stat-item">
  460. <span class="stat-num">400+</span>
  461. <span class="stat-label">Élèves inscrits</span>
  462. </div>
  463. <div class="stat-item">
  464. <span class="stat-num">50+</span>
  465. <span class="stat-label">Enseignants qualifiés</span>
  466. </div>
  467. <div class="stat-item">
  468. <span class="stat-num">{{ year.code }}</span>
  469. <span class="stat-label">Année académique</span>
  470. </div>
  471. </div>
  473. {# ── EXAM RESULTS SECTION ─────────────────────────────────── #}
  474. <section class="charts-section" id="officialExams">
  475. <div class="section-header">
  476. <span class="section-tag">Résultats officiels</span>
  477. <h2 class="section-title">
  478. Taux de réussite aux examens<br>
  479. session <em>{{ year.code }}</em>
  480. </h2>
  481. <div class="section-divider"></div>
  482. <p class="section-sub">
  483. Statistiques détaillées par série et par niveau pour la session officielle en cours.
  484. </p>
  485. </div>
  487. <div class="charts-grid">
  488. {% for key in results|keys %}
  489. <div class="chart-card">
  490. <canvas id="{{ key }}" height="160"
  491. data-exam-objects="{{ results[key] }}"></canvas>
  492. </div>
  493. {% endfor %}
  494. </div>
  495. </section>
  497. {# ── FOOTER ACCENT ─────────────────────────────────────────── #}
  498. <div class="page-footer-accent">
  499. Propulsé par <span>LiveEdu</span> · Tous droits réservés {{ "now"|date("Y") }}
  500. </div>
  502. {% endblock %}
  504. {% block javascripts %}
  505. {{ parent() }}
  506. <script>
  507. /* ── Custom Carousel ───────────────────────────────────────── */
  508. (function () {
  509. const slides = document.querySelectorAll('.carousel-item-custom');
  510. const indicators = document.querySelectorAll('#heroIndicators li');
  511. const slideNum = document.getElementById('slideNum');
  512. let current = 0, timer;
  514. function goTo(n) {
  515. slides[current].classList.remove('active');
  516. indicators[current].classList.remove('active');
  517. current = (n + slides.length) % slides.length;
  518. slides[current].classList.add('active');
  519. indicators[current].classList.add('active');
  520. slideNum.textContent = String(current + 1).padStart(2, '0');
  521. }
  523. function autoPlay() { timer = setInterval(() => goTo(current + 1), 5500); }
  524. function resetTimer() { clearInterval(timer); autoPlay(); }
  526. document.getElementById('heroPrev').addEventListener('click', e => {
  527. e.preventDefault(); goTo(current - 1); resetTimer();
  528. });
  529. document.getElementById('heroNext').addEventListener('click', e => {
  530. e.preventDefault(); goTo(current + 1); resetTimer();
  531. });
  532. indicators.forEach(li => {
  533. li.addEventListener('click', () => { goTo(+li.dataset.slide); resetTimer(); });
  534. });
  536. autoPlay();
  537. })();
  539. /* ── Charts ─────────────────────────────────────────────────── */
  540. const palette = [
  541. '#C9A84C','#2C6BAD','#1D8A6E','#D9534F',
  542. '#7B5EA7','#F0A500','#2E86AB','#A23B72'
  543. ];
  545. const randomColor = (type, idx) =>
  546. type === 'ECHEC' ? '#D9534F' : palette[idx % palette.length];
  548. const drawCanvas = (examData, canvasId, name) => {
  549. const el = document.getElementById(canvasId);
  550. if (!el || !examData) return;
  551. const parsed = JSON.parse(examData);
  552. const values = parsed.mentionCountCategories.map(Number);
  553. const colors = parsed.mentionCategories.map((cat, i) => randomColor(cat, i));
  555. new Chart(el, {
  556. type: 'doughnut',
  557. data: {
  558. labels: parsed.mentionCategories,
  559. datasets: [{ data: values, backgroundColor: colors, borderWidth: 0 }]
  560. },
  561. options: {
  562. cutout: '68%',
  563. animation: { animateRotate: true, duration: 1000 },
  564. plugins: {
  565. legend: { display: false },
  566. title: {
  567. display: true,
  568. text: name,
  569. color: '#0A1628',
  570. font: { size: 13, family: "'DM Sans', sans-serif", weight: '600' },
  571. position: 'bottom',
  572. padding: { top: 14 }
  573. }
  574. }
  575. }
  576. });
  577. };
  579. {% for key in results|keys %}
  580. drawCanvas(
  581. document.getElementById('{{ key }}')?.dataset?.examObjects,
  582. '{{ key }}',
  583. '{{ key|replace({'_': ' '})|title }}'
  584. );
  585. {% endfor %}
  586. </script>
  587. {% endblock javascripts %}