templates/base.html.twig line 1

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.0">
  6. <meta name="description" content="Journal Officiel de l'Union des Comores - Portail officiel de publication des textes juridiques et administratifs">
  7. <meta name="author" content="Union des Comores">
  8. <meta name="theme-color" content="#006633">
  9. <title>{% block title %}Journal Officiel - Union des Comores{% endblock %}</title>
  11. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  12. <script src="https://cdn.tailwindcss.com"></script>
  13. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  15. <style>
  16. * { font-family: 'Inter', sans-serif; }
  18. body { background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); }
  20. ::-webkit-scrollbar { width: 10px; height: 10px; }
  21. ::-webkit-scrollbar-track { background: #f1f1f1; }
  22. ::-webkit-scrollbar-thumb { background: #006633; border-radius: 5px; }
  23. ::-webkit-scrollbar-thumb:hover { background: #004d26; }
  25. @keyframes fadeInUp {
  26. from { opacity: 0; transform: translateY(30px); }
  27. to { opacity: 1; transform: translateY(0); }
  28. }
  29. .animate-fadeInUp { animation: fadeInUp 0.6s ease-out; }
  31. .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  32. .card-hover:hover {
  33. transform: translateY(-4px);
  34. box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),
  35. 0 10px 10px -5px rgba(0,0,0,.02);
  36. }
  38. .gradient-text {
  39. background: linear-gradient(135deg, #006633 0%, #008844 100%);
  40. -webkit-background-clip: text;
  41. -webkit-text-fill-color: transparent;
  42. background-clip: text;
  43. }
  45. .chatbot-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; }
  46. .chatbot-toggle {
  47. width: 64px; height: 64px;
  48. background: linear-gradient(135deg, #006633, #008844);
  49. border-radius: 50%;
  50. display: flex; align-items: center; justify-content: center;
  51. cursor: pointer;
  52. box-shadow: 0 10px 25px -5px rgba(0,0,0,.2);
  53. transition: all 0.3s ease;
  54. }
  55. .chatbot-toggle:hover {
  56. transform: scale(1.05);
  57. box-shadow: 0 20px 25px -5px rgba(0,0,0,.3);
  58. }
  59. .chatbot-window {
  60. position: absolute; bottom: 80px; right: 0;
  61. width: 400px; height: 560px;
  62. background: white; border-radius: 1rem;
  63. box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  64. display: none; flex-direction: column; overflow: hidden;
  65. }
  66. .chatbot-window.open { display: flex; }
  68. @media (max-width: 640px) {
  69. .chatbot-window { width: calc(100vw - 2rem); right: 0; bottom: 80px; }
  70. }
  72. .loading-spinner {
  73. border: 3px solid rgba(0,102,51,.2);
  74. border-radius: 50%;
  75. border-top: 3px solid #006633;
  76. width: 24px; height: 24px;
  77. animation: spin 1s linear infinite;
  78. }
  79. @keyframes spin {
  80. 0% { transform: rotate(0deg); }
  81. 100% { transform: rotate(360deg); }
  82. }
  84. /* Barre de progression traduction */
  85. @keyframes tlProgress {
  86. 0% { width: 0%; }
  87. 50% { width: 70%; }
  88. 100% { width: 100%; }
  89. }
  90. </style>
  92. {% block stylesheets %}{% endblock %}
  93. </head>
  94. <body>
  96. {% include 'components/_header.html.twig' %}
  98. <main class="min-h-screen">
  99. {% block body %}{% endblock %}
  100. </main>
  102. {% include 'components/_footer.html.twig' %}
  103. {% include 'components/_chatbot.html.twig' %}
  105. <!-- Alpine.js -->
  106. <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  108. <script>
  109. window.App = { chatbot: null };
  111. document.addEventListener('alpine:init', () => {
  112. Alpine.data('chatbot', () => ({
  113. isOpen: false,
  114. messages: [],
  115. currentMessage: '',
  116. isLoading: false,
  118. init() {
  119. this.addMessage(
  120. "Bonjour et bienvenue sur le Journal Officiel de l'Union des Comores. " +
  121. "Je suis Ibunas.IA, votre assistant juridique. Comment puis-je vous aider ?",
  122. 'bot'
  123. );
  124. },
  126. toggle() {
  127. this.isOpen = !this.isOpen;
  128. if (this.isOpen) setTimeout(() => this.scrollToBottom(), 100);
  129. },
  131. async send() {
  132. if (!this.currentMessage.trim() || this.isLoading) return;
  133. const message = this.currentMessage;
  134. this.addMessage(message, 'user');
  135. this.currentMessage = '';
  136. this.isLoading = true;
  137. this.scrollToBottom();
  139. try {
  140. const response = await fetch('{{ path('app_chatbot_send') }}', {
  141. method: 'POST',
  142. headers: {
  143. 'Content-Type': 'application/json',
  144. 'X-Requested-With': 'XMLHttpRequest'
  145. },
  146. body: JSON.stringify({ message })
  147. });
  148. const data = await response.json();
  149. this.addMessage(data.response, 'bot');
  150. } catch (e) {
  151. this.addMessage('Désolé, une erreur technique est survenue.', 'bot');
  152. } finally {
  153. this.isLoading = false;
  154. this.scrollToBottom();
  155. }
  156. },
  158. addMessage(text, sender) {
  159. this.messages.push({
  160. id: Date.now(), text, sender, timestamp: new Date()
  161. });
  162. },
  164. scrollToBottom() {
  165. const c = document.getElementById('chatbot-messages');
  166. if (c) c.scrollTop = c.scrollHeight;
  167. }
  168. }));
  169. });
  170. </script>
  172. <!-- ── Moteur de traduction LibreTranslate ── -->
  173. <script>
  174. const Translator = {
  175. cache: {},
  176. loading: false,
  178. getNodes() {
  179. return [...document.querySelectorAll(
  180. 'h1, h2, h3, h4, p, a, span, button, label, td, th, li'
  181. )].filter(el =>
  182. [...el.childNodes].some(
  183. n => n.nodeType === 3 && n.textContent.trim().length > 2
  184. ) &&
  185. !el.closest('script, style, [data-no-translate]')
  186. );
  187. },
  189. // MyMemory — gratuit, CORS autorisé, pas de clé requise
  190. async translateText(text) {
  191. const url = 'https://api.mymemory.translated.net/get?'
  192. + new URLSearchParams({
  193. q: text,
  194. langpair: 'fr|en'
  195. });
  197. const res = await fetch(url, { method: 'GET' });
  198. const data = await res.json();
  200. if (data.responseStatus === 200) {
  201. return data.responseData.translatedText;
  202. }
  203. throw new Error('MyMemory error: ' + data.responseStatus);
  204. },
  206. async translate(lang) {
  207. if (this.loading) return;
  208. this.loading = true;
  209. this.showBar();
  211. const nodes = this.getNodes();
  212. const texts = nodes.map(el => el.innerText.trim());
  214. // Retourne le cache si déjà traduit
  215. if (this.cache[lang]) {
  216. this.apply(nodes, this.cache[lang]);
  217. this.hideBar();
  218. this.loading = false;
  219. return;
  220. }
  222. try {
  223. // MyMemory a une limite de 500 chars par requête
  224. // On traduit par petits groupes
  225. const translations = [];
  226. const chunkSize = 10; // 10 textes par lot
  228. for (let i = 0; i < texts.length; i += chunkSize) {
  229. const chunk = texts.slice(i, i + chunkSize);
  230. const sep = ' [|||] ';
  231. const combined = chunk.join(sep);
  233. // MyMemory limite à 500 chars — on tronque si nécessaire
  234. const toTranslate = combined.length > 500
  235. ? combined.substring(0, 500)
  236. : combined;
  238. const result = await this.translateText(toTranslate);
  239. const parts = result.split(sep).map(t => t.trim());
  241. // Complète si la réponse a moins d'éléments que l'envoi
  242. while (parts.length < chunk.length) {
  243. parts.push(chunk[parts.length]);
  244. }
  246. translations.push(...parts);
  248. // Pause entre les lots pour éviter le rate limit
  249. if (i + chunkSize < texts.length) {
  250. await new Promise(r => setTimeout(r, 300));
  251. }
  252. }
  254. this.cache[lang] = translations;
  255. this.apply(nodes, translations);
  257. } catch (e) {
  258. console.error('Erreur traduction:', e);
  259. this.showToast('⚠ Traduction indisponible');
  260. } finally {
  261. this.hideBar();
  262. this.loading = false;
  263. }
  264. },
  266. apply(nodes, translations) {
  267. nodes.forEach((el, i) => {
  268. if (!translations[i]) return;
  269. [...el.childNodes].forEach(n => {
  270. if (n.nodeType === 3 && n.textContent.trim().length > 2) {
  271. n.textContent = translations[i];
  272. }
  273. });
  274. });
  275. },
  277. showBar() {
  278. let bar = document.getElementById('tl-bar');
  279. if (!bar) {
  280. bar = document.createElement('div');
  281. bar.id = 'tl-bar';
  282. bar.innerHTML = `
  283. <div style="position:fixed;top:0;left:0;right:0;height:3px;
  284. background:#e5e7eb;z-index:9999;pointer-events:none">
  285. <div id="tl-prog"
  286. style="height:100%;width:0%;background:#006633;
  287. transition:width 1.5s ease;
  288. border-radius:0 2px 2px 0">
  289. </div>
  290. </div>`;
  291. document.body.appendChild(bar);
  292. }
  293. bar.style.display = 'block';
  294. setTimeout(() => {
  295. const p = document.getElementById('tl-prog');
  296. if (p) p.style.width = '80%';
  297. }, 50);
  298. },
  300. hideBar() {
  301. const p = document.getElementById('tl-prog');
  302. if (p) {
  303. p.style.width = '100%';
  304. setTimeout(() => {
  305. const bar = document.getElementById('tl-bar');
  306. if (bar) bar.style.display = 'none';
  307. p.style.width = '0%';
  308. }, 400);
  309. }
  310. },
  312. showToast(msg) {
  313. const t = document.createElement('div');
  314. t.textContent = msg;
  315. t.style.cssText = `
  316. position: fixed; bottom: 1.5rem; left: 50%;
  317. transform: translateX(-50%);
  318. background: #fee2e2; color: #991b1b;
  319. border: 1px solid #fca5a5;
  320. padding: .6rem 1.2rem; border-radius: .75rem;
  321. font-size: .8rem; font-weight: 600; z-index: 9999;`;
  322. document.body.appendChild(t);
  323. setTimeout(() => t.remove(), 3000);
  324. }
  325. };
  327. // ── Fonctions globales du sélecteur de langue ──
  328. function toggleLangMenu() {
  329. const menu = document.getElementById('lang-menu');
  330. const chevron = document.getElementById('lang-chevron');
  331. const isOpen = !menu.classList.contains('hidden');
  332. menu.classList.toggle('hidden', isOpen);
  333. chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
  334. }
  336. function switchLanguage(lang) {
  337. // Ferme le dropdown
  338. document.getElementById('lang-menu')?.classList.add('hidden');
  339. const chevron = document.getElementById('lang-chevron');
  340. if (chevron) chevron.style.transform = 'rotate(0deg)';
  342. // Met à jour le bouton
  343. const flag = document.getElementById('lang-flag');
  344. const label = document.getElementById('lang-label');
  345. if (flag) flag.src = lang === 'en'
  346. ? 'https://flagcdn.com/w20/gb.png'
  347. : 'https://flagcdn.com/w20/fr.png';
  348. if (label) label.textContent = lang === 'en' ? 'English' : 'Français';
  350. // Coches actives / inactives
  351. const optFr = document.getElementById('lang-opt-fr');
  352. const optEn = document.getElementById('lang-opt-en');
  353. const chkFr = document.querySelector('.lang-check-fr');
  354. const chkEn = document.querySelector('.lang-check-en');
  356. if (lang === 'en') {
  357. optEn?.classList.add('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  358. optEn?.classList.remove('text-gray-700');
  359. optFr?.classList.remove('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  360. optFr?.classList.add('text-gray-700');
  361. chkEn?.classList.remove('hidden');
  362. chkFr?.classList.add('hidden');
  363. } else {
  364. optFr?.classList.add('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  365. optFr?.classList.remove('text-gray-700');
  366. optEn?.classList.remove('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  367. optEn?.classList.add('text-gray-700');
  368. chkFr?.classList.remove('hidden');
  369. chkEn?.classList.add('hidden');
  370. }
  372. // Sauvegarde le choix
  373. localStorage.setItem('jo_lang', lang);
  375. // Lance la traduction ou recharge pour le français
  376. if (lang === 'en') {
  377. Translator.translate('en');
  378. } else {
  379. window.location.reload();
  380. }
  381. }
  383. // Ferme le dropdown si clic en dehors
  384. document.addEventListener('click', function (e) {
  385. const switcher = document.getElementById('lang-switcher');
  386. if (switcher && !switcher.contains(e.target)) {
  387. document.getElementById('lang-menu')?.classList.add('hidden');
  388. const c = document.getElementById('lang-chevron');
  389. if (c) c.style.transform = 'rotate(0deg)';
  390. }
  391. });
  393. // Restaure la langue sauvegardée au chargement
  394. document.addEventListener('DOMContentLoaded', function () {
  395. if (localStorage.getItem('jo_lang') === 'en') {
  396. const flag = document.getElementById('lang-flag');
  397. const label = document.getElementById('lang-label');
  398. if (flag) flag.src = 'https://flagcdn.com/w20/gb.png';
  399. if (label) label.textContent = 'English';
  401. const optFr = document.getElementById('lang-opt-fr');
  402. const optEn = document.getElementById('lang-opt-en');
  403. const chkFr = document.querySelector('.lang-check-fr');
  404. const chkEn = document.querySelector('.lang-check-en');
  405. optEn?.classList.add('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  406. optEn?.classList.remove('text-gray-700');
  407. optFr?.classList.remove('text-[#006633]', 'font-semibold', 'bg-emerald-50');
  408. optFr?.classList.add('text-gray-700');
  409. chkEn?.classList.remove('hidden');
  410. chkFr?.classList.add('hidden');
  412. Translator.translate('en');
  413. }
  414. });
  415. </script>
  417. {% block javascripts %}{% endblock %}
  418. </body>
  419. </html>