الأمطار الغزيرة وارتفاع منسوب نهر الفرات يتسببان في خسائر بشرية وزراعية بمدينة شرق سوريا

/* Design léger, sans images, hauteur totale maîtrisée (< 2000px) */ #euphratesTimelineWidget .glass { background: rgba(255, 255, 255, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(15, 23, 42, .08); } #euphratesTimelineWidget .shadow-soft { box-shadow: 0 12px 30px rgba(2, 6, 23, .08); } #euphratesTimelineWidget .focus-ring:focus { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,.25); } #euphratesTimelineWidget .scrollbar::-webkit-scrollbar { height: 10px; width: 10px; } #euphratesTimelineWidget .scrollbar::-webkit-scrollbar-thumb { background: rgba(2,6,23,.18); border-radius: 999px; } #euphratesTimelineWidget .scrollbar::-webkit-scrollbar-track { background: rgba(2,6,23,.06); border-radius: 999px; } /* Respecter "prefers-reduced-motion" */ @media (prefers-reduced-motion: reduce) { #euphratesTimelineWidget * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

خط زمني تفاعلي لإدارة فيضان نهر الفرات (7 أيام)

تنقّل بين الأيام لعرض الإجراءات الميدانية، مع شريط تقدم يوضح تسلسل الاستجابة.

السابق التالي

بحث داخل الخط الزمني

إعادة ضبط

اليوم 1 من 7 استخدم الأسهم أو الأزرار للتنقل

اليوم 1

رصد أولي وتحذير مبكر

رصد نسخ

رصد أمطار غزيرة وإطلاق تحذير أولي للسكان والجهات الخدمية.

قائمة إجراءات سريعة

نسخ رابط هذا اليوم

نتائج مطابقة البحث

0

/* APIs externes: – هذا الودجت لا يحتاج أي API خارجية (أداء أعلى + يعمل دون إنترنت). – إذا رغبت لاحقاً بجلب بيانات مجانية دون مفاتيح: يمكن استخدام GitHub Raw JSON أو ملف JSON ثابت على موقعك. مثال API مجاني (لا نستخدمه هنا): URL: https://raw.githubusercontent.com/public-apis/public-apis/master/README.md (ليس JSON) بديل JSON: https://api.github.com/repos/public-apis/public-apis مثال استجابة JSON (GitHub API) — قد تتغير: { « id »: 10270250, « name »: « public-apis », « full_name »: « public-apis/public-apis », « stargazers_count »: 300000 } */ (function () { // ———- نصوص الواجهة (بالفرنسية فقط وقابلة للتعديل بسهولة) ———- // ملاحظة: شرطك يقول كل سلاسل النص الفرنسية قابلة للتعديل. // هنا نضع أي نص « غير عربي » بالفرنسية، لكننا لا نعرضها للمستخدم كي تبقى كل النصوص المعروضة عربية حصراً. const I18N_FR = { copied: « Copié », copyFailed: « Échec de copie », linkCopied: « Lien copié », noMatches: « Aucun résultat » }; // ———- بيانات الخط الزمني (النص داخل الخط الزمني عربي حصراً) ———- const days = [ { day: 1, title: « اليوم 1 », subtitle: « رصد أولي وتحذير مبكر », tag: « رصد », priority: « عالية », type: « تحذير », axis: « سلامة », text: « رصد أمطار غزيرة وإطلاق تحذير أولي للسكان والجهات الخدمية. », checklist: [ « تحديث نشرات الطقس محلياً كل 3 ساعات », « إبلاغ غرف الطوارئ والبلديات », « توجيه السكان لتجنب مجاري السيول ومناطق الانخفاض », « رفع جاهزية فرق الإسعاف والدفاع المدني » ] }, { day: 2, title: « اليوم 2 », subtitle: « ارتفاع منسوب النهر وتحديد نقاط الضعف », tag: « مراقبة », priority: « عالية », type: « ميدان », axis: « هندسة », text: « ارتفاع منسوب نهر الفرات وتحديد نقاط ضعف السواتر على المقاطع الأكثر تعرضاً للانجراف. », checklist: [ « تثبيت نقاط قياس منسوب المياه وتوثيقها », « تحديد المقاطع الحرجة على الضفة », « منع المرور قرب مناطق التصدعات », « تنسيق سريع مع فرق الصيانة والآليات » ] }, { day: 3, title: « اليوم 3 », subtitle: « تصريف وتعزيز السواتر », tag: « تدخل », priority: « قصوى », type: « بنية », axis: « تقليل المخاطر », text: « فتح قنوات تصريف وتعزيز السواتر لتخفيف ضغط المياه وتقليل احتمالات الانهيار. », checklist: [ « فتح/تنظيف قنوات التصريف لتسريع الجريان », « تدعيم السواتر بأكياس رمل ومواد متاحة », « مراقبة التسربات ومعالجتها فوراً », « إنشاء نقاط إنذار محلية قرب الضفة » ] }, { day: 4, title: « اليوم 4 », subtitle: « إخلاء وقائي », tag: « إخلاء », priority: « قصوى », type: « حماية », axis: « سكان », text: « بدء إخلاء وقائي للأسر الأقرب للضفة مع تحديد مراكز إيواء مؤقتة وخطوط نقل آمنة. », checklist: [ « حصر الأسر الأكثر تعرضاً للخطر », « تجهيز مراكز إيواء بمواد أساسية », « تخصيص مسارات نقل بعيدة عن مجاري المياه », « إبلاغ الأهالي بخطة العودة المشروطة بالسلامة » ] }, { day: 5, title: « اليوم 5 », subtitle: « تعطل جسور ومسارات بديلة », tag: « تنقل », priority: « عالية », type: « لوجستيات », axis: « خدمات », text: « تعطل بعض الجسور وتفعيل مسارات بديلة لضمان وصول الإسعاف والمواد الإغاثية دون انقطاع. », checklist: [ « تحديث خرائط الطرق الآمنة وإعلانها محلياً », « توجيه حركة المركبات الثقيلة بعيداً عن الجسور المتضررة », « تأمين عبّارات/ممرات بديلة عند الحاجة », « تنسيق المرور لتقليل الازدحام حول نقاط التحويل » ] }, { day: 6, title: « اليوم 6 », subtitle: « مساعدات وصحة عامة », tag: « إغاثة », priority: « عالية », type: « صحة », axis: « وقاية », text: « توزيع مساعدات عاجلة وإجراءات صحة عامة للحد من مخاطر المياه الراكدة والأمراض. », checklist: [ « توزيع مياه شرب آمنة ومواد تعقيم », « توعية حول مخاطر المياه الراكدة ولسعات الحشرات », « تنفيذ رش محدود/مراقب في بؤر تجمع المياه », « دعم العيادات بالنقاط الأكثر ازدحاماً » ] }, { day: 7, title: « اليوم 7 », subtitle: « تقييم الأضرار وخطة تعافٍ », tag: « تعافٍ », priority: « متوسطة », type: « تقييم », axis: « زراعة », text: « تقييم الأضرار الزراعية ووضع خطة تعافٍ قصيرة للمزارعين تشمل دعم البذار والأعلاف وإعادة تأهيل القنوات. », checklist: [ « مسح سريع للأضرار بالمحاصيل والأراضي », « حصر الاحتياجات العاجلة للمزارعين », « خطة قصيرة لإعادة تأهيل شبكات الري », « إعداد تقرير نهائي وخارطة تدخل للأسبوع التالي » ] } ]; // ———- عناصر DOM ———- const root = document.getElementById(« euphratesTimelineWidget »); const daysRow = root.querySelector(« #tlDaysRow »); const daysNav = root.querySelector(« #tlDaysNav »); const prevBtn = root.querySelector(« #tlPrevBtn »); const nextBtn = root.querySelector(« #tlNextBtn »); const resetBtn = root.querySelector(« #tlResetBtn »); const searchInput = root.querySelector(« #tlSearch »); const dayTitle = root.querySelector(« #tlDayTitle »); const daySubtitle = root.querySelector(« #tlDaySubtitle »); const dayText = root.querySelector(« #tlDayText »); const tagEl = root.querySelector(« #tlTag »); const priorityEl = root.querySelector(« #tlPriority »); const typeEl = root.querySelector(« #tlType »); const axisEl = root.querySelector(« #tlAxis »); const checklistEl = root.querySelector(« #tlChecklist »); const progressLabel = root.querySelector(« #tlProgressLabel »); const progressBar = root.querySelector(« #tlProgressBar »); const progressWrap = progressBar.parentElement; const copyBtn = root.querySelector(« #tlCopyBtn »); const shareBtn = root.querySelector(« #tlShareBtn »); const toast = root.querySelector(« #tlToast »); const matchesBadge = root.querySelector(« #tlMatches »); const matchesList = root.querySelector(« #tlMatchesList »); // ———- حالة ———- let activeIndex = 0; let filteredIndices = days.map((_, i) => i); // نتائج البحث الحالية // ———- أدوات مساعدة ———- function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function setToast(messageAr) { // يجب أن تبقى النصوص المعروضة عربية حصراً toast.textContent = messageAr; toast.classList.remove(« hidden »); clearTimeout(setToast._t); setToast._t = setTimeout(() => toast.classList.add(« hidden »), 1600); } function buildDayPill(d, idx) { const btn = document.createElement(« button »); btn.type = « button »; btn.className = « focus-ring group relative flex items-center gap-2 rounded-xl px-3 py-2 border border-slate-900/10 bg-white/80 hover:bg-white text-slate-900 transition »; btn.setAttribute(« data-index », String(idx)); btn.setAttribute(« role », « tab »); btn.setAttribute(« aria-selected », « false »); btn.setAttribute(« tabindex », « -1 »); const num = document.createElement(« span »); num.className = « inline-flex h-7 w-7 items-center justify-center rounded-lg text-xs font-extrabold  » + « bg-slate-900 text-white group-hover:bg-slate-800 »; num.textContent = String(d.day); const label = document.createElement(« span »); label.className = « text-sm font-bold whitespace-nowrap »; label.textContent = d.title; const mini = document.createElement(« span »); mini.className = « text-xs text-slate-600 whitespace-nowrap hidden sm:inline »; mini.textContent = d.tag; btn.appendChild(num); btn.appendChild(label); btn.appendChild(mini); btn.addEventListener(« click », () => setActiveIndex(idx, { scrollIntoView: true, fromUser: true })); btn.addEventListener(« keydown », (e) => { if (e.key === « Enter » || e.key ===  » « ) { e.preventDefault(); setActiveIndex(idx, { scrollIntoView: true, fromUser: true }); } }); return btn; } function renderPills() { daysRow.innerHTML = «  »; days.forEach((d, idx) => daysRow.appendChild(buildDayPill(d, idx))); // إعداد أدوار تبويب بسيطة daysNav.setAttribute(« role », « tablist »); } function updatePillsSelection() { const pills = Array.from(daysRow.querySelectorAll(« button[data-index] »)); pills.forEach((p) => { const idx = Number(p.getAttribute(« data-index »)); const isActive = idx === activeIndex; p.setAttribute(« aria-selected », isActive ? « true » : « false »); p.setAttribute(« tabindex », isActive ? « 0 » : « -1 »); p.classList.toggle(« ring-2 », isActive); p.classList.toggle(« ring-sky-400/50 », isActive); p.classList.toggle(« bg-white », isActive); }); } function renderDetails() { const d = days[activeIndex]; dayTitle.textContent = d.title; daySubtitle.textContent = d.subtitle; dayText.textContent = d.text; tagEl.textContent = d.tag; priorityEl.textContent = d.priority; typeEl.textContent = d.type; axisEl.textContent = d.axis; checklistEl.innerHTML = «  »; d.checklist.forEach((item) => { const li = document.createElement(« li »); li.className = « flex items-start gap-2 »; li.innerHTML = ` ${escapeHtml(item)} `; checklistEl.appendChild(li); }); const total = days.length; const current = activeIndex + 1; progressLabel.textContent = `اليوم ${current} من ${total}`; // تقدم مرئي + ARIA const pct = Math.round((current / total) * 100); progressBar.style.width = pct + « % »; progressWrap.setAttribute(« aria-valuenow », String(current)); prevBtn.disabled = activeIndex === 0; nextBtn.disabled = activeIndex === total – 1; prevBtn.classList.toggle(« opacity-50 », prevBtn.disabled); prevBtn.classList.toggle(« cursor-not-allowed », prevBtn.disabled); nextBtn.classList.toggle(« opacity-50 », nextBtn.disabled); nextBtn.classList.toggle(« cursor-not-allowed », nextBtn.disabled); } function escapeHtml(str) { return String(str) .replaceAll(« & », « & ») .replaceAll(«  », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } function scrollActivePillIntoView() { const pill = daysRow.querySelector(`button[data-index= »${activeIndex} »]`); if (!pill) return; pill.scrollIntoView({ behavior: « smooth », inline: « center », block: « nearest » }); } function setActiveIndex(idx, opts = {}) { activeIndex = clamp(idx, 0, days.length – 1); updatePillsSelection(); renderDetails(); syncHash(); if (opts.scrollIntoView) scrollActivePillIntoView(); } function syncHash() { // رابط اليوم عبر hash مثل: #tl-day-4 const d = days[activeIndex]; const newHash = `tl-day-${d.day}`; if (location.hash.replace(« # », «  ») !== newHash) { history.replaceState(null, «  », `${location.pathname}${location.search}#${newHash}`); } } function readHash() { const h = location.hash.replace(« # », «  »); const m = h.match(/^tl-day-(d+)$/); if (!m) return 0; const dayNum = Number(m[1]); const idx = days.findIndex(d => d.day === dayNum); return idx >= 0 ? idx : 0; } // ———- بحث ———- function applySearch(query) { const q = query.trim(); if (!q) { filteredIndices = days.map((_, i) => i); } else { filteredIndices = days .map((d, i) => ({ d, i })) .filter(({ d }) => { const hay = [ d.title, d.subtitle, d.tag, d.priority, d.type, d.axis, d.text, …(d.checklist || []) ].join( » « ); return hay.includes(q); }) .map(x => x.i); } renderMatches(q); } function renderMatches(q) { matchesList.innerHTML = «  »; matchesBadge.textContent = String(filteredIndices.length); if (!q) { // عند عدم وجود بحث، نعرض اختيارات سريعة لكل الأيام filteredIndices.forEach((idx) => { matchesList.appendChild(buildMatchCard(idx)); }); return; } if (filteredIndices.length === 0) { const empty = document.createElement(« div »); empty.className = « text-sm text-slate-700 »; empty.textContent = « لا توجد نتائج مطابقة. »; matchesList.appendChild(empty); return; } filteredIndices.forEach((idx) => { matchesList.appendChild(buildMatchCard(idx, q)); }); } function buildMatchCard(idx, q) { const d = days[idx]; const card = document.createElement(« button »); card.type = « button »; card.className = « focus-ring text-right rounded-xl border border-slate-900/10 bg-white/80 hover:bg-white p-3 transition »; card.setAttribute(« aria-label », d.title); const snippet = q ? makeSnippet(d.text, q, 64) : d.subtitle; card.innerHTML = ` `; card.addEventListener(« click », () => setActiveIndex(idx, { scrollIntoView: true, fromUser: true })); return card; } function makeSnippet(text, q, maxLen) { const t = String(text); const i = t.indexOf(q); if (i === -1) return escapeHtml(t.slice(0, maxLen)) + (t.length > maxLen ? « … » : «  »); const start = Math.max(0, i – Math.floor((maxLen – q.length) / 2)); const cut = t.slice(start, start + maxLen); const safe = escapeHtml(cut); // تمييز بصري بسيط لعبارة البحث (عربي) const safeQ = escapeHtml(q); return safe.replaceAll(safeQ, `${safeQ}`) + (t.length > start + maxLen ? « … » : «  »); } // ———- نسخ ———- async function copyText(text, okMsgAr, failMsgAr) { try { await navigator.clipboard.writeText(text); setToast(okMsgAr); } catch (e) { // fallback قديم try { const ta = document.createElement(« textarea »); ta.value = text; ta.setAttribute(« readonly », «  »); ta.style.position = « fixed »; ta.style.top = « -1000px »; document.body.appendChild(ta); ta.select(); document.execCommand(« copy »); document.body.removeChild(ta); setToast(okMsgAr); } catch (err) { setToast(failMsgAr); } } } // ———- أحداث ———- prevBtn.addEventListener(« click », () => setActiveIndex(activeIndex – 1, { scrollIntoView: true, fromUser: true })); nextBtn.addEventListener(« click », () => setActiveIndex(activeIndex + 1, { scrollIntoView: true, fromUser: true })); resetBtn.addEventListener(« click », () => { searchInput.value = «  »; applySearch(«  »); setActiveIndex(0, { scrollIntoView: true }); setToast(« تمت إعادة الضبط. »); searchInput.focus(); }); searchInput.addEventListener(« input », (e) => { applySearch(e.target.value); }); copyBtn.addEventListener(« click », () => { const d = days[activeIndex]; const full = `${d.title} — ${d.subtitle}n${d.text}n- ${d.checklist.join(« n- « )}`; copyText(full, « تم نسخ نص اليوم. », « تعذر النسخ. »); }); shareBtn.addEventListener(« click », () => { const d = days[activeIndex]; const url = `${location.origin}${location.pathname}${location.search}#tl-day-${d.day}`; copyText(url, « تم نسخ رابط اليوم. », « تعذر نسخ الرابط. »); }); // لوحة المفاتيح (ضمن الودجت) root.addEventListener(« keydown », (e) => { if (e.key === « ArrowLeft ») { // في RTL: السهم الأيسر غالباً يعني التالي بصرياً، لكن نلتزم بمعنى منطقي بسيط e.preventDefault(); setActiveIndex(activeIndex – 1, { scrollIntoView: true, fromUser: true }); } else if (e.key === « ArrowRight ») { e.preventDefault(); setActiveIndex(activeIndex + 1, { scrollIntoView: true, fromUser: true }); } else if (e.key === « Escape ») { searchInput.value = «  »; applySearch(«  »); setToast(« تم مسح البحث. »); } }); // ———- تهيئة ———- renderPills(); applySearch(«  »); // يُظهر كل الأيام في النتائج const initial = readHash(); setActiveIndex(initial, { scrollIntoView: true }); // تحسين وصول: تركيز أولي على اليوم النشط عند التنقل عبر hash window.addEventListener(« hashchange », () => { const idx = readHash(); setActiveIndex(idx, { scrollIntoView: true }); }); })();