ميداوي: نصف حاملي البكالوريا و50 ألف طالب في كليات الحقوق يختارون دراسة القانون

/* Design + a11y helpers */ #lawTimelineApp .focus-ring:focus { outline: 3px solid rgba(59,130,246,.9); outline-offset: 3px; } #lawTimelineApp .glass { background: rgba(255,255,255,.78); backdrop-filter: blur(10px); } #lawTimelineApp .soft-shadow { box-shadow: 0 12px 40px rgba(2, 6, 23, .12); } #lawTimelineApp .text-balance { text-wrap: balance; } #lawTimelineApp .no-scrollbar::-webkit-scrollbar { height: 10px; } #lawTimelineApp .no-scrollbar::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 999px; } #lawTimelineApp .no-scrollbar::-webkit-scrollbar-track { background: rgba(15,23,42,.06); border-radius: 999px; } #lawTimelineApp .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

الخط الزمني لإصلاح التكوين في القانون بالمغرب

تتبّع المراحل، اكتشف نقاط الاختناق، واستعرض الحلول المقترحة خطوة بخطوة

السابق التالي تشغيل تلقائي إعادة

المرحلة الحالية

—

نقاط الاختناق في هذه المرحلة

0

الحلول المقترحة في هذه المرحلة

0

البداية النهاية

مراحل

اختصار:

← → Space

تفاصيل المرحلة

—

—

المرحلة

—

نقاط الاختناق

0

حلول مقترحة

0

تلميح: انقر على أي مرحلة في الشريط، أو استخدم الأسهم للتنقّل

نسخ ملخص المرحلة

/** * Timeline interactive – Pure HTML + JS * – No external paid services * – Light dependencies (only Tailwind CDN for styling) * – Accessible: keyboard navigation, aria roles, live announcements * – i18n: All French strings centralized here (easy to edit) * * External free API (optional) example (NOT required for this tool): * URL: https://worldtimeapi.org/api/timezone/Africa/Casablanca * Example JSON response: * { * « abbreviation »: »+01″, * « client_ip »: »x.x.x.x », * « datetime »: »2026-06-02T10:11:12.345678+01:00″, * « timezone »: »Africa/Casablanca », * « unixtime »:1780401072 * } * We do not call it by default to keep performance maximal. */ // ———- i18n (French only, easy to edit) ———- const I18N_FR = { copied: « Copié dans le presse-papiers. », copyFailed: « Échec de la copie (sélectionnez et copiez manuellement). », autoplayOn: « Lecture automatique: activée », autoplayOff: « Lecture automatique: désactivée », stageAnnouncePrefix: « Changement d’étape: « , reducedMotionHint: « Animations réduites (préférence utilisateur détectée). » }; // ———- Data (Arabic only inside timeline) ———- const TIMELINE = [ { id: « postbac », title: « بعد البكالوريا », summary: « توجيه فعّال لاختيار المسار القانوني بناءً على الميول والقدرات وسوق الشغل. », bottlenecks: [ « ضعف الإرشاد والتوجيه المدرسي قبل الولوج للجامعة », « اختيار عشوائي للمسار بسبب غياب معلومات دقيقة عن المهن القانونية », « تفاوت في فرص الولوج بين الجهات » ], solutions: [ « منصات توجيه رقمية وجلسات تعريف بالمهن القانونية داخل الثانويات », « اختبارات ميول وقدرات مرتبطة بالمسارات القانونية », « أيام مفتوحة ومسارات جسور واضحة بين الشعب » ] }, { id: « year1 », title: « السنة الأولى », summary: « وحدات تأسيسية مع تركيز على منهجية البحث القانوني ومهارات القراءة والتحليل والكتابة. », bottlenecks: [ « اكتظاظ المدرجات وتأثيره على جودة التعلّم », « ضعف التأطير الفردي وصعوبة تتبّع الطلبة », « فجوة في مهارات اللغة القانونية والتحرير » ], solutions: [ « تقليص الاكتظاظ عبر تقسيم المجموعات ودروس تطبيقية », « تعزيز التأطير: أطر إضافية ومواكبة أكاديمية », « ورشات منهجية البحث والتوثيق والكتابة القانونية » ] }, { id: « year2-3 », title: « السنة الثانية والثالثة », summary: « مسالك تخصصية تدريجية تُراكم المعارف وتُهيّئ لمسارات مهنية متعددة. », bottlenecks: [ « تشابه محتوى بعض الوحدات وغياب توجيه تخصصي مبكّر », « ضعف الارتباط بالواقع التطبيقي ومهارات الممارسة », « تفاوت جودة التكوين بين المؤسسات » ], solutions: [ « خرائط مسارات واضحة: مدني/أعمال/إداري/جنائي… », « تعلم بالمشاريع ودراسة حالات واقعية وتمارين صياغة », « معايير موحّدة للجودة وتحديث مضامين الوحدات دورياً » ] }, { id: « license », title: « الإجازة », summary: « تدريب ميداني إلزامي ومحاكاة محكمة لصقل المهارات العملية وربط الدراسة بالممارسة. », bottlenecks: [ « صعوبة إيجاد أماكن تدريب كافية لجميع الطلبة », « تفاوت جودة التأطير داخل التدريب », « ضعف آليات تقييم المهارات التطبيقية » ], solutions: [ « اتفاقيات شراكة مع المحاكم والمكاتب والهيئات المهنية », « دفتر تدريب موحّد وتقييم مشترك بين المؤطر والجامعة », « محاكمات صورية منتظمة ومختبرات مهارات قانونية » ] }, { id: « master », title: « الماستر/المعهد العالي », summary: « تخصصات مهنية/بحثية مثل المهن القضائية، قانون البحار، الدبلوماسية، والامتثال. », bottlenecks: [ « محدودية المقاعد مقارنة بالطلب المتزايد », « فجوة بين التخصصات واحتياجات سوق الشغل في بعض المجالات », « ضعف الانفتاح على خبراء الميدان » ], solutions: [ « توسيع العرض عبر مسالك مهنية دقيقة ومختلطة (حضوري/عن بعد) », « مجالس استشارية مع مهنيين لتحديث التخصصات », « إدماج وحدات مهارات: الامتثال، الترافع، التحكيم، التفاوض » ] }, { id: « integration », title: « الاندماج », summary: « مباريات وتدريب مهني وشهادات إضافية لتسهيل الانتقال إلى سوق الشغل. », bottlenecks: [ « صعوبة الاندماج بسبب المنافسة وغياب الخبرة العملية الكافية », « تشتّت مسارات الشهادات والتكوينات الموازية », « ضعف التشبيك مع سوق الشغل » ], solutions: [ « مسارات تحضير للمباريات مع تدريب مهني موجّه », « شهادات مهارية قصيرة: الامتثال، الملكية الفكرية، الصياغة القانونية », « مراكز تشغيل جامعية وشبكات خريجين وتواصل مع المشغّلين » ] } ]; // ———- DOM refs ———- const $ = (sel, root=document) => root.querySelector(sel); const rail = $(« #ltRail »); const prevBtn = $(« #ltPrevBtn »); const nextBtn = $(« #ltNextBtn »); const autoBtn = $(« #ltAutoBtn »); const resetBtn = $(« #ltResetBtn »); const copyBtn = $(« #ltCopyBtn »); const toggleB = $(« #ltToggleBottlenecks »); const toggleS = $(« #ltToggleSolutions »); const currentTitle = $(« #ltCurrentTitle »); const bottleneckCount = $(« #ltBottleneckCount »); const solutionCount = $(« #ltSolutionCount »); const progressBar = $(« #ltProgressBar »); const detailTitle = $(« #ltDetailTitle »); const detailSummary = $(« #ltDetailSummary »); const badgeNum = $(« #ltBadgeNum »); const listB = $(« #ltBottlenecks »); const listS = $(« #ltSolutions »); const pillB = $(« #ltBottleneckPill »); const pillS = $(« #ltSolutionPill »); const copyStatus = $(« #ltCopyStatus »); const live = $(« #ltLiveRegion »); // ———- State ———- let index = 0; let autoplayTimer = null; const prefersReducedMotion = window.matchMedia && window.matchMedia(« (prefers-reduced-motion: reduce) »).matches; if (prefersReducedMotion) { // Keep in French in logic only (not displayed unless you choose to surface it) // console.info(I18N_FR.reducedMotionHint); } // ———- Helpers ———- function el(tag, attrs = {}, children = []) { const node = document.createElement(tag); for (const [k, v] of Object.entries(attrs)) { if (k === « class ») node.className = v; else if (k === « text ») node.textContent = v; else if (k.startsWith(« aria-« )) node.setAttribute(k, v); else if (k === « dataset ») Object.assign(node.dataset, v); else node.setAttribute(k, v); } for (const c of children) node.appendChild(typeof c === « string » ? document.createTextNode(c) : c); return node; } function announce(arText) { // Arabic announcement for screen readers (timeline content must be Arabic) live.textContent = arText; } function clamp(i) { return Math.max(0, Math.min(TIMELINE.length – 1, i)); } function stopAutoplay() { if (autoplayTimer) { clearInterval(autoplayTimer); autoplayTimer = null; autoBtn.textContent = « تشغيل تلقائي »; // internal i18n FR available if needed: // console.info(I18N_FR.autoplayOff); } } function startAutoplay() { stopAutoplay(); autoBtn.textContent = « إيقاف تلقائي »; // console.info(I18N_FR.autoplayOn); autoplayTimer = setInterval(() => { const next = (index + 1) % TIMELINE.length; setActive(next, { fromAutoplay: true }); }, prefersReducedMotion ? 5000 : 3500); } function scrollStepIntoView(stepBtn) { if (!stepBtn) return; // Ensure selected step stays visible in the horizontal rail const parent = rail; const rect = stepBtn.getBoundingClientRect(); const prect = parent.getBoundingClientRect(); if (rect.left prect.right – 8) { stepBtn.scrollIntoView({ behavior: prefersReducedMotion ? « auto » : « smooth », inline: « center », block: « nearest » }); } } function renderList(ul, items, kind) { ul.innerHTML = «  »; const show = (kind === « b ») ? toggleB.checked : toggleS.checked; if (!show) { ul.appendChild(el(« li », { class: « text-sm text-slate-500 », text: kind === « b » ? « تم إخفاء نقاط الاختناق » : « تم إخفاء الحلول المقترحة » })); return; } if (!items || items.length === 0) { ul.appendChild(el(« li », { class: « text-sm text-slate-500 », text: « لا توجد عناصر » })); return; } for (const txt of items) { const dotClass = (kind === « b ») ? « bg-rose-500 ring-4 ring-rose-100 » : « bg-emerald-500 ring-4 ring-emerald-100 »; const item = el(« li », { class: « flex items-start gap-3 » }, [ el(« span », { class: `mt-2 inline-block h-2.5 w-2.5 rounded-full ${dotClass} shrink-0` }), el(« span », { class: « text-slate-700 », text: txt }) ]); ul.appendChild(item); } } function setActive(i, opts = {}) { index = clamp(i); const stage = TIMELINE[index]; // Update header stats currentTitle.textContent = stage.title; bottleneckCount.textContent = String(stage.bottlenecks.length); solutionCount.textContent = String(stage.solutions.length); // Detail panel detailTitle.textContent = stage.title; detailSummary.textContent = stage.summary; badgeNum.textContent = String(index + 1); // Lists + pills pillB.textContent = String(stage.bottlenecks.length); pillS.textContent = String(stage.solutions.length); renderList(listB, stage.bottlenecks, « b »); renderList(listS, stage.solutions, « s »); // Progress const pct = ((index) / (TIMELINE.length – 1)) * 100; progressBar.style.width = `${pct}%`; // Tabs state const steps = rail.querySelectorAll(« [role=’tab’] »); steps.forEach((btn, idx) => { const active = idx === index; btn.setAttribute(« aria-selected », active ? « true » : « false »); btn.tabIndex = active ? 0 : -1; // Visual state btn.classList.toggle(« bg-slate-900 », active); btn.classList.toggle(« text-white », active); btn.classList.toggle(« border-slate-900 », active); btn.classList.toggle(« bg-white », !active); btn.classList.toggle(« text-slate-800 », !active); btn.classList.toggle(« border-slate-200 », !active); const dot = btn.querySelector(« [data-dot=’1′] »); if (dot) { dot.className = active ? « h-3 w-3 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 ring-4 ring-indigo-100 » : « h-3 w-3 rounded-full bg-slate-300 ring-4 ring-slate-100 »; } }); scrollStepIntoView(steps[index]); // A11y announcement (Arabic content) announce(`تم الانتقال إلى: ${stage.title}`); // If user interacts manually, stop autoplay (unless coming from autoplay) if (!opts.fromAutoplay) stopAutoplay(); } function buildRail() { rail.innerHTML = «  »; TIMELINE.forEach((s, idx) => { const btn = el(« button », { type: « button », role: « tab », class: [ « focus-ring », « group », « relative », « min-w-[190px] md:min-w-[220px] », « rounded-2xl », « border », « px-4 », « py-3 », « transition », « duration-300 », « hover:-translate-y-0.5 », « active:translate-y-0 », « select-none », « text-right » ].join( » « ), « aria-selected »: « false », « aria-controls »: « ltDetailTitle », dataset: { idx: String(idx) } }, [ el(« div », { class: « flex items-center justify-between gap-3 » }, [ el(« div », { class: « min-w-0 » }, [ el(« div », { class: « text-xs font-semibold opacity-80 », text: `المرحلة ${idx + 1}` }), el(« div », { class: « mt-0.5 font-extrabold leading-snug truncate », text: s.title }) ]), el(« div », { class: « shrink-0 flex flex-col items-center gap-2 » }, [ el(« span », { « data-dot »: « 1 », class: « h-3 w-3 rounded-full bg-slate-300 ring-4 ring-slate-100 » }), el(« span », { class: « text-[11px] font-bold opacity-80 », text: String(idx + 1) }) ]) ]) ]); btn.addEventListener(« click », () => setActive(idx)); rail.appendChild(btn); }); } async function copyStageSummary() { const s = TIMELINE[index]; const arText = `${s.title}n` + `${s.summary}nn` + `نقاط الاختناق:n- ${s.bottlenecks.join(« n- « )}nn` + `حلول مقترحة:n- ${s.solutions.join(« n- « )}`; copyStatus.textContent = «  »; try { await navigator.clipboard.writeText(arText); copyStatus.textContent = « تم النسخ »; setTimeout(() => (copyStatus.textContent = «  »), 1200); } catch (e) { // Keep French strings only in code: // console.warn(I18N_FR.copyFailed, e); copyStatus.textContent = « تعذّر النسخ تلقائياً »; // Fallback: select text in a temporary textarea const ta = document.createElement(« textarea »); ta.value = arText; ta.style.position = « fixed »; ta.style.left = « -9999px »; document.body.appendChild(ta); ta.select(); try { document.execCommand(« copy »); } catch (_) {} document.body.removeChild(ta); setTimeout(() => (copyStatus.textContent = «  »), 1500); } } // ———- Events ———- prevBtn.addEventListener(« click », () => setActive(index – 1)); nextBtn.addEventListener(« click », () => setActive(index + 1)); resetBtn.addEventListener(« click », () => setActive(0)); copyBtn.addEventListener(« click », copyStageSummary); autoBtn.addEventListener(« click », () => { if (autoplayTimer) stopAutoplay(); else startAutoplay(); }); toggleB.addEventListener(« change », () => setActive(index)); toggleS.addEventListener(« change », () => setActive(index)); // Keyboard navigation: Left/Right arrows move between steps (RTL friendly: we keep logical prev/next) // Space toggles autoplay. document.addEventListener(« keydown », (e) => { // Avoid hijacking typing in inputs const tag = (e.target && e.target.tagName) ? e.target.tagName.toLowerCase() : «  »; if (tag === « input » || tag === « textarea » || tag === « select ») return; if (e.key === « ArrowLeft ») { // in RTL, ArrowLeft often means « next » visually; we keep it as next step for intuitive reading direction e.preventDefault(); setActive(index + 1); } else if (e.key === « ArrowRight ») { e.preventDefault(); setActive(index – 1); } else if (e.key ===  »  » || e.key === « Spacebar ») { e.preventDefault(); if (autoplayTimer) stopAutoplay(); else startAutoplay(); } else if (e.key === « Home ») { e.preventDefault(); setActive(0); } else if (e.key === « End ») { e.preventDefault(); setActive(TIMELINE.length – 1); } }, { passive: false }); // Pause autoplay when page/tab not visible document.addEventListener(« visibilitychange », () => { if (document.hidden) stopAutoplay(); }); // ———- Init ———- buildRail(); setActive(0);