ترامب يسعى لإنهاء معركته مع إيران سريعًا وسط قيود مجلس الشيوخ على صلاحياته

/* Scoped styling */ #arTimelineWidget { –card: rgba(255,255,255,.06); –card2: rgba(255,255,255,.09); –line: rgba(255,255,255,.18); –muted: rgba(255,255,255,.7); –focus: rgba(34,197,94,.75); } #arTimelineWidget .glass { background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92)); border: 1px solid rgba(148,163,184,.22); box-shadow: 0 12px 50px rgba(0,0,0,.35); } #arTimelineWidget .gridbg { background-image: radial-gradient(circle at 20px 20px, rgba(148,163,184,.12) 0 1px, transparent 1px), radial-gradient(circle at 60px 60px, rgba(148,163,184,.08) 0 1px, transparent 1px); background-size: 80px 80px; } #arTimelineWidget .btn { border: 1px solid rgba(148,163,184,.25); background: rgba(255,255,255,.06); transition: transform .15s ease, background .15s ease, border-color .15s ease; } #arTimelineWidget .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(148,163,184,.35); } #arTimelineWidget .btn:active { transform: translateY(0px); } #arTimelineWidget .btn:focus-visible { outline: 2px solid var(–focus); outline-offset: 2px; } #arTimelineWidget .chip { border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.05); } #arTimelineWidget .kbd { border: 1px solid rgba(148,163,184,.25); background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 8px; font-size: 12px; } #arTimelineWidget .timelineScroll { max-height: 1200px; /* stays under 2000px total with header */ overflow: auto; scrollbar-gutter: stable; } #arTimelineWidget .timelineScroll::-webkit-scrollbar { height: 10px; width: 10px; } #arTimelineWidget .timelineScroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 10px; } #arTimelineWidget .timelineScroll::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 10px; } /* RTL timeline content */ #arTimelineWidget [dir= »rtl »] { font-family: ui-sans-serif, system-ui, -apple-system, « Segoe UI », Roboto, « Noto Sans Arabic », « Noto Naskh Arabic », « Tahoma », Arial, sans-serif; text-rendering: geometricPrecision; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #arTimelineWidget * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /** * i18n (FR) — chaînes d’interface, facilement éditables. * IMPORTANT: Le texte contenu DANS la timeline (les 8 étapes) est exclusivement en arabe (voir dataAR). */ const i18nFR = { toolSubtitle: « Outil interactif », toolTitle: « Timeline interactive (8 étapes) », toolDesc: « Cliquez sur une étape pour afficher l’objectif, les risques et une mesure d’atténuation. Navigation clavier: ↑ ↓ ou ← →, puis Entrée. », btnExpandAll: « Tout ouvrir », btnCollapseAll: « Tout fermer », btnReset: « Réinitialiser », searchLabel: « Filtrer (recherche en arabe) », searchPlaceholder: « Tapez un mot-clé en arabe… », searchHint: « Astuce: filtre par titres/objectif/risques/atténuation. », regionLabel: « Chronologie », metaNoFilter: « Aucun filtre », metaFiltered: (shown, total) => `Filtré: ${shown}/${total}`, chipCount: (n) => `${n} étapes`, footer: « Données intégrées (aucune requête externe). Si vous voulez brancher une API gratuite, voir l’exemple commenté dans le script. », ariaStep: (n, total) => `Étape ${n} sur ${total}`, ariaOpen: « Ouvrir les détails », ariaClose: « Fermer les détails », empty: « Aucun résultat. Essayez un autre mot-clé. » }; /** * DATA (AR) — Timeline content exclusively in Arabic. * Each station includes: goal, potential risks, mitigation action. */ const dataAR = [ { id: 1, title: « إعلان نية خفض التصعيد », goal: « تثبيت رسالة سياسية علنية تُظهر استعدادًا لوقف التدهور وفتح باب التهدئة دون التزام نهائي. », risks: [ « تفسير الإعلان كضعف أو تراجع ما يرفع سقف مطالب الطرف الآخر. », « استغلال الخطاب داخليًا لإحراج القيادة أو تعطيل المسار. » ], mitigation: « صياغة الإعلان بلغة متوازنة تربط التهدئة بشروط أمنية واضحة، مع تنسيق مسبق مع الحلفاء وقادة الكونغرس. » }, { id: 2, title: « وقف نار مؤقت لمدة 72 ساعة », goal: « إيقاف فوري للنار لخفض الخسائر وخلق مساحة زمنية لإجراءات بناء الثقة. », risks: [ « خروقات ميدانية متفرقة تُفشل الهدنة وتُعيد التصعيد بسرعة. », « اتهامات متبادلة تُستخدم لتبرير استئناف الضربات. » ], mitigation: « تحديد آلية توثيق للخروقات وقناة تحقّق سريعة، مع تعريف واضح لما يُعد خرقًا وكيفية الرد المتدرّج. » }, { id: 3, title: « فتح قناة اتصال عسكرية », goal: « منع سوء الفهم والاحتكاك غير المقصود عبر خط ساخن بين القيادات الميدانية. », risks: [ « تسريب معلومات حساسة أو استغلال القناة لجمع معلومات. », « رفض داخلي بدعوى التطبيع الأمني أو منح شرعية. » ], mitigation: « حصر القناة في منع الاحتكاك فقط، واعتماد بروتوكول مكالمات مُقيّد وتسجيلات رسمية ومراجعة أمنية. » }, { id: 4, title: « اجتماع وساطة إقليمي », goal: « نقل التفاوض إلى منصة محايدة مدعومة إقليميًا لتسهيل حلول سريعة وقابلة للتسويق سياسيًا. », risks: [ « تضارب أجندات الوسطاء وتحويل الاجتماع إلى ساحة نفوذ. », « رفع سقف المطالب وإغراق الاجتماع بملفات جانبية. » ], mitigation: « تحديد جدول أعمال قصير ومحسوم (خفض التصعيد + قواعد الاشتباك)، وتفويض وفد صغير بصلاحيات محددة. » }, { id: 5, title: « توقيع مذكرة تفاهم قصيرة », goal: « توثيق التزامات عملية ومحدودة زمنيًا (تهدئة، آليات اتصال، مبادئ عامة) دون الدخول في معاهدة طويلة. », risks: [ « غموض الصياغة يؤدي لتفسيرات متناقضة عند التنفيذ. », « رفض قانوني/سياسي إذا اعتُبرت المذكرة تجاوزًا للصلاحيات. » ], mitigation: « نصّ مختصر بملاحق تقنية واضحة، ومراجعة قانونية مبكرة لضمان توافقها مع القيود التشريعية. » }, { id: 6, title: « تصويت الكونغرس على تفويض محدود أو تجديد », goal: « توفير غطاء قانوني مُقيّد زمنيًا ونطاقًا لتقليل الجدل حول صلاحيات السلطة التنفيذية. », risks: [ « تعطيل أو تأخير التصويت ما يخلق فراغًا سياسيًا وأمنيًا. », « شروط صارمة تُقيد المرونة وتُضعف قدرة الردع. » ], mitigation: « طرح تفويض ضيق بنقاط قياس واضحة (مدة، نطاق، تقارير دورية)، وبناء توافق عبر إحاطات مغلقة وشفافية مدروسة. » }, { id: 7, title: « لجان متابعة للتحقق », goal: « مراقبة الالتزام بالتهدئة وبنود المذكرة وتقديم تقارير دورية تقلل الشكوك. », risks: [ « انعدام الثقة في حياد آليات التحقق أو تسييس التقارير. », « عجز اللجان عن الوصول الميداني أو حماية المراقبين. » ], mitigation: « هيكل تحقق متعدد المستويات (فني/أمني/دبلوماسي) مع قواعد نشر تقارير متفق عليها وضمانات أمنية للوصول. » }, { id: 8, title: « الانتقال إلى مفاوضات أطول حول الملف النووي », goal: « تحويل التهدئة المؤقتة إلى مسار تفاوضي شامل يهدف لتقليل المخاطر الاستراتيجية على المدى البعيد. », risks: [ « انهيار المفاوضات بسبب ملفات غير نووية أو عقوبات متشابكة. », « تغيرات سياسية داخلية تُطيح بالالتزامات قبل نضج الاتفاق. » ], mitigation: « تقسيم التفاوض إلى مراحل مع حوافز تدريجية، وربط كل مرحلة بآلية تحقق، مع قنوات موازية لمعالجة الملفات الحساسة. » } ]; /** * OPTIONAL: Example of a 100% free public API you could use (no key required). * Not used by default to keep the widget offline + fast. * * API URL: https://worldtimeapi.org/api/timezone/Etc/UTC * Example JSON response: * { * « abbreviation »: »UTC », * « client_ip »: »x.x.x.x », * « datetime »: »2026-05-22T10:12:34.567890+00:00″, * « timezone »: »Etc/UTC », * « unixtime »:1779415954, * « utc_datetime »: »2026-05-22T10:12:34.567890+00:00″ * } */ // DOM refs const root = document.getElementById(« arTimelineWidget »); const elSubtitle = root.querySelector(« #tlSubtitle »); const elTitle = root.querySelector(« #tlTitle »); const elDesc = root.querySelector(« #tlDesc »); const btnExpandAll = root.querySelector(« #btnExpandAll »); const btnCollapseAll = root.querySelector(« #btnCollapseAll »); const btnReset = root.querySelector(« #btnReset »); const searchLabel = root.querySelector(« #searchLabel »); const searchInput = root.querySelector(« #searchInput »); const searchHint = root.querySelector(« #searchHint »); const regionLabel = root.querySelector(« #regionLabel »); const timelineRegion = root.querySelector(« #timelineRegion »); const list = root.querySelector(« #timelineList »); const resultsMeta = root.querySelector(« #resultsMeta »); const counterChip = root.querySelector(« #counterChip »); const footerNote = root.querySelector(« #footerNote »); // Apply i18n (FR UI) function applyI18n() { elSubtitle.textContent = i18nFR.toolSubtitle; elTitle.textContent = i18nFR.toolTitle; elDesc.innerHTML = i18nFR.toolDesc .replace(« ↑ », ‘↑‘) .replace(« ↓ », ‘↓‘) .replace(« ← », ‘←‘) .replace(« → », ‘→‘) .replace(« Entrée », ‘Entrée‘); btnExpandAll.textContent = i18nFR.btnExpandAll; btnCollapseAll.textContent = i18nFR.btnCollapseAll; btnReset.textContent = i18nFR.btnReset; searchLabel.textContent = i18nFR.searchLabel; searchInput.placeholder = i18nFR.searchPlaceholder; searchHint.textContent = i18nFR.searchHint; regionLabel.textContent = i18nFR.regionLabel; resultsMeta.textContent = i18nFR.metaNoFilter; counterChip.textContent = i18nFR.chipCount(dataAR.length); footerNote.textContent = i18nFR.footer; } // Render items function render(items, { preserveState = true } = {}) { // Optionally preserve open/closed states by id const openById = new Map(); if (preserveState) { list.querySelectorAll(« li[data-id] »).forEach(li => { const id = Number(li.getAttribute(« data-id »)); const btn = li.querySelector(« button[data-action=’toggle’] »); const panel = li.querySelector(« [data-panel] »); if (btn && panel) openById.set(id, btn.getAttribute(« aria-expanded ») === « true »); }); } list.innerHTML = «  »; if (!items.length) { const li = document.createElement(« li »); li.className = « rounded-2xl border border-slate-300/15 bg-white/5 p-4 text-slate-100 »; li.setAttribute(« dir », « rtl »); li.setAttribute(« lang », « ar »); // Keep Arabic-only inside timeline: we show no-data state in AR to respect constraint. li.textContent = « لا توجد نتائج. جرّب كلمة أخرى. »; list.appendChild(li); return; } const total = items.length; items.forEach((step, idx) => { const li = document.createElement(« li »); li.className = « relative »; li.setAttribute(« data-id », step.id); // Dot const dot = document.createElement(« div »); dot.className = « absolute right-4 sm:right-6 top-6 w-3 h-3 rounded-full »; dot.style.background = « linear-gradient(135deg, rgba(34,197,94,.95), rgba(56,189,248,.9)) »; dot.style.boxShadow = « 0 0 0 5px rgba(34,197,94,.12), 0 0 0 1px rgba(255,255,255,.15) inset »; dot.setAttribute(« aria-hidden », « true »); li.appendChild(dot); // Card const card = document.createElement(« div »); card.className = « mr-10 sm:mr-12 rounded-2xl border border-slate-300/15 bg-white/5 hover:bg-white/7 transition-colors »; card.style.background = « linear-gradient(180deg, var(–card), rgba(255,255,255,.03)) »; // Header row with title + step number const header = document.createElement(« div »); header.className = « p-4 sm:p-5 flex flex-col gap-3 »; const topRow = document.createElement(« div »); topRow.className = « flex items-start justify-between gap-3 »; const titleWrap = document.createElement(« div »); titleWrap.className = « min-w-0 »; const badge = document.createElement(« div »); badge.className = « inline-flex items-center gap-2 text-xs text-slate-200/80 mb-2 »; badge.innerHTML = ` المحطة ${step.id} من 8 `; const h3 = document.createElement(« h3 »); h3.className = « text-base sm:text-lg font-semibold leading-snug text-slate-50 »; h3.textContent = step.title; titleWrap.appendChild(badge); titleWrap.appendChild(h3); const toggleBtn = document.createElement(« button »); toggleBtn.type = « button »; toggleBtn.className = « btn rounded-xl px-3 py-2 text-sm shrink-0 »; toggleBtn.setAttribute(« data-action », « toggle »); toggleBtn.setAttribute(« aria-expanded », « false »); toggleBtn.setAttribute(« aria-label », i18nFR.ariaOpen); // Button text must be Arabic? Constraint says timeline text included must be exclusively Arabic. // This button is inside timeline card, so we keep it Arabic. toggleBtn.textContent = « عرض التفاصيل »; topRow.appendChild(titleWrap); topRow.appendChild(toggleBtn); // Summary strip (Arabic) const summary = document.createElement(« div »); summary.className = « rounded-xl border border-slate-300/15 bg-white/4 p-3 text-sm text-slate-100/90 »; summary.style.background = « linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) »; summary.innerHTML = ` `; // Panel (collapsed by default) const panel = document.createElement(« div »); panel.className = « px-4 sm:px-5 pb-4 sm:pb-5 -mt-1 hidden »; panel.setAttribute(« data-panel », « true »); const panelInner = document.createElement(« div »); panelInner.className = « rounded-2xl border border-slate-300/15 bg-white/4 p-4 sm:p-5 »; panelInner.style.background = « linear-gradient(180deg, var(–card2), rgba(255,255,255,.03)) »; panelInner.innerHTML = ` `; panel.appendChild(panelInner); header.appendChild(topRow); header.appendChild(summary); card.appendChild(header); card.appendChild(panel); li.appendChild(card); list.appendChild(li); // Restore open state const wasOpen = openById.get(step.id) === true; if (wasOpen) setOpen(li, true, { scrollIntoView: false }); }); // Update meta const totalAll = dataAR.length; if (items.length === totalAll && !searchInput.value.trim()) { resultsMeta.textContent = i18nFR.metaNoFilter; } else { resultsMeta.textContent = i18nFR.metaFiltered(items.length, totalAll); } } function escapeHTML(str) { return String(str) .replaceAll(« & », « & ») .replaceAll(«  », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } // Toggle open/close for a given list item function setOpen(li, open, { scrollIntoView = true } = {}) { const btn = li.querySelector(« button[data-action=’toggle’] »); const panel = li.querySelector(« [data-panel] »); if (!btn || !panel) return; btn.setAttribute(« aria-expanded », String(open)); btn.setAttribute(« aria-label », open ? i18nFR.ariaClose : i18nFR.ariaOpen); // Button text is inside timeline -> Arabic only btn.textContent = open ? « إخفاء التفاصيل » : « عرض التفاصيل »; panel.classList.toggle(« hidden », !open); // Subtle focus/outline when opened for keyboard users const card = li.querySelector(« div.rounded-2xl »); if (card) { card.style.boxShadow = open ? « 0 0 0 2px rgba(34,197,94,.18), 0 18px 60px rgba(0,0,0,.25) » : «  »; } if (open && scrollIntoView) { // Keep within scroll container li.scrollIntoView({ block: « nearest », behavior: prefersReducedMotion() ? « auto » : « smooth » }); } } function prefersReducedMotion() { return window.matchMedia && window.matchMedia(« (prefers-reduced-motion: reduce) »).matches; } // Filtering across Arabic fields function filterData(query) { const q = query.trim(); if (!q) return dataAR; return dataAR.filter(step => { const hay = [ step.title, step.goal, step.mitigation, …(step.risks || []) ].join( » « ); return hay.includes(q); }); } // Event delegation for toggles list.addEventListener(« click », (e) => { const btn = e.target.closest(« button[data-action=’toggle’] »); if (!btn) return; const li = e.target.closest(« li[data-id] »); if (!li) return; const isOpen = btn.getAttribute(« aria-expanded ») === « true »; setOpen(li, !isOpen); }); // Keyboard navigation inside region: arrow keys to move between steps, Enter/Space to toggle timelineRegion.addEventListener(« keydown », (e) => { const focusables = Array.from(list.querySelectorAll(« button[data-action=’toggle’] »)); if (!focusables.length) return; const active = document.activeElement; const idx = focusables.indexOf(active); const isArrow = [« ArrowUp », « ArrowDown », « ArrowLeft », « ArrowRight », « Home », « End »].includes(e.key); const isToggle = (e.key === « Enter » || e.key ===  » « ); if (!isArrow && !isToggle) return; if (isArrow) { e.preventDefault(); let nextIdx = idx >= 0 ? idx : 0; if (e.key === « ArrowDown » || e.key === « ArrowRight ») nextIdx = Math.min(focusables.length – 1, (idx < 0 ? 0 : idx + 1)); if (e.key === "ArrowUp" || e.key === "ArrowLeft") nextIdx = Math.max(0, (idx = 0) ? focusables[idx] : focusables[0]; if (!btn) return; e.preventDefault(); btn.click(); } }); // Controls btnExpandAll.addEventListener(« click », () => { list.querySelectorAll(« li[data-id] »).forEach(li => setOpen(li, true, { scrollIntoView: false })); }); btnCollapseAll.addEventListener(« click », () => { list.querySelectorAll(« li[data-id] »).forEach(li => setOpen(li, false, { scrollIntoView: false })); }); btnReset.addEventListener(« click », () => { searchInput.value = «  »; render(dataAR, { preserveState: false }); resultsMeta.textContent = i18nFR.metaNoFilter; counterChip.textContent = i18nFR.chipCount(dataAR.length); // Collapse all by default after reset list.querySelectorAll(« li[data-id] »).forEach(li => setOpen(li, false, { scrollIntoView: false })); searchInput.focus(); }); // Search let searchTimer = null; searchInput.addEventListener(« input », () => { window.clearTimeout(searchTimer); searchTimer = window.setTimeout(() => { const filtered = filterData(searchInput.value); render(filtered, { preserveState: true }); counterChip.textContent = i18nFR.chipCount(filtered.length); }, 80); }); // Quick focus shortcut CTRL/⌘ K root.addEventListener(« keydown », (e) => { const isMac = navigator.platform.toUpperCase().includes(« MAC »); const mod = isMac ? e.metaKey : e.ctrlKey; if (mod && (e.key.toLowerCase() === « k »)) { e.preventDefault(); searchInput.focus(); searchInput.select(); } }); // Initialize applyI18n(); render(dataAR, { preserveState: false }); // Default: first item slightly highlighted but closed const firstLi = list.querySelector(« li[data-id] »); if (firstLi) setOpen(firstLi, false, { scrollIntoView: false });