شكل الجرب في بدايته: علامات وأعراض يجب معرفتها

/* Design: sobre, médical, RTL */ #scabiesTimelineApp { font-family: ui-sans-serif, system-ui, -apple-system, « Segoe UI », Roboto, « Noto Kufi Arabic », « Noto Sans Arabic », Arial, « Apple Color Emoji », « Segoe UI Emoji »; max-height: 2000px; } .st-card { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)); backdrop-filter: blur(8px); } .st-shadow { box-shadow: 0 10px 30px rgba(2, 6, 23, .10); } .st-ring { box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) inset; } .st-dot { box-shadow: 0 0 0 6px rgba(59, 130, 246, .12); } .st-focus:focus-visible { outline: 3px solid rgba(59, 130, 246, .55); outline-offset: 3px; } .st-scroll { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.9) transparent; } .st-scroll::-webkit-scrollbar { height: 10px; width: 10px; } .st-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.85); border-radius: 999px; } .st-scroll::-webkit-scrollbar-track { background: transparent; } .st-badge { border: 1px solid rgba(2,6,23,.10); } .st-animate { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .st-animate:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(2, 6, 23, .12); } .st-muted { color: rgba(15,23,42,.72); } .st-subtle { color: rgba(15,23,42,.58); } .st-divider { background: linear-gradient(90deg, transparent, rgba(148,163,184,.65), transparent); height: 1px; } /** * Internationalisation (FR uniquement, éditable facilement) * Note: l’interface demandée est en arabe, mais toutes les chaînes FR (si besoin) sont centralisées ici. */ const I18N_FR = { appName: « Timeline gale (scabies) », storageKey: « scabies_timeline_state_v1 », remindersKey: « scabies_timeline_reminders_v1 », noteNoExternalApi: « Aucune API externe n’est utilisée (outil autonome). » }; /** * APIs gratuites: * – Non utilisée ici (outil autonome, pas besoin de données externes). * – Si vous voulez enrichir: par ex. WorldTimeAPI (gratuit) pour afficher l’heure locale. * URL: https://worldtimeapi.org/api/ip * Exemple réponse JSON: * { * « abbreviation »: »CEST », * « client_ip »: »0.0.0.0″, * « datetime »: »2026-06-02T12:34:56.789+02:00″, * « timezone »: »Europe/Paris », * « utc_offset »: »+02:00″ * } */ // —————————- // Data (AR uniquement) // —————————- const TIMELINE = [ { id: « d0 », title: « اليوم 0 — بدء العلاج », type: « action », badge: « خطوة أساسية », summary: « ابدأ العلاج في نفس اليوم، ونسّق علاج المخالطين لتقليل إعادة العدوى. », bullets: [ « ابدأ العلاج حسب وصف الطبيب (مثل الكريمات/الأدوية الموصوفة). », « عالج المخالطين المقربين في نفس اليوم إن أمكن (أفراد المنزل/الشريك). », « قصّ الأظافر ونظّف تحتها لتقليل خدش الجلد ونقل الطفيليات. », « ارتدِ ملابس نظيفة بعد العلاج مباشرة. » ], reminders: [ « ضع العلاج في الوقت المحدد وبالطريقة الصحيحة. », « لا تنسَ علاج المخالطين لتجنب الرجوع لنقطة الصفر. » ], warnings: [ « ظهور حبوب جديدة بعد أيام قليلة قد يعني إعادة عدوى أو علاج غير مكتمل. », « حكة شديدة مع تورم/قيح قد تشير لالتهاب ثانوي. » ] }, { id: « d1 », title: « اليوم 1 — غسل المفارش والملابس », type: « action », badge: « تنظيف », summary: « اغسل كل ما لامس الجلد لتقليل بقاء الطفيليات في البيئة المنزلية. », bullets: [ « اغسل المفارش، أغطية الوسائد، المناشف، والملابس المستخدمة مؤخرًا. », « استخدم ماءً ساخنًا إن توفر، ثم تجفيفًا حراريًا/شمسًا قدر الإمكان. », « نظّف الأسطح كثيرة اللمس (مقابض، هاتف، ريموت) بشكل معقول دون مبالغة. » ], reminders: [ « ابدأ بالغسيل للأشياء الأكثر تماسًا: ملابس النوم + المفارش. », « خصّص كيسًا/سلة منفصلة للأغراض قبل غسلها. » ], warnings: [ « إذا بدأ أحد أفراد البيت بالحكة/طفح مشابه، اعتبره مخالطًا يحتاج خطة علاج. » ] }, { id: « d3 », title: « اليوم 3 — عزل الأغراض غير القابلة للغسل لمدة 72 ساعة », type: « action », badge: « عزل », summary: « اعزل ما لا يمكن غسله (مثل بعض الوسائد/الألعاب/المعاطف) لمدة 72 ساعة. », bullets: [ « ضع الأغراض غير القابلة للغسل في أكياس محكمة الإغلاق. », « اتركها معزولة لمدة 72 ساعة (3 أيام). », « بعد انتهاء المدة، أعد استخدامها أو نظّفها تنظيفًا جافًا إن أمكن. » ], reminders: [ « اكتب تاريخ/وقت العزل على الكيس لتتبع 72 ساعة بدقة. » ], warnings: [ « تجنّب مشاركة الأغراض الشخصية خلال هذه الفترة. » ] }, { id: « d7_14 », title: « اليوم 7–14 — مراقبة الحكة المتبقية », type: « care », badge: « متابعة », summary: « قد تستمر الحكة حتى مع نجاح العلاج؛ المهم متابعة الاتجاه العام وظهور علامات جديدة. », bullets: [ « راقب هل الحكة تقل تدريجيًا أم تزداد. », « لاحظ أي أماكن جديدة للطفح أو خطوط/حفر صغيرة على الجلد. », « حافظ على ترطيب الجلد وتجنّب الحك قدر الإمكان. », « راجع الالتزام بخطة التنظيف وعلاج المخالطين. » ], reminders: [ « دوّن يوميًا: شدة الحكة (0–10) وهل ظهرت حبوب جديدة. » ], warnings: [ « ظهور حبوب جديدة متزايدة بعد اليوم 7 قد يشير لاستمرار العدوى. », « إذا أصيب مخالطون جدد خلال هذه الفترة، راجع خطة العلاج. » ] }, { id: « w4 », title: « الأسبوع 4 — متى يلزم مراجعة الطبيب؟ », type: « warning », badge: « متى تراجع الطبيب », summary: « إذا استمرت الأعراض أو ظهرت مؤشرات فشل العلاج، اطلب تقييمًا طبيًا. », bullets: [ « حكة شديدة لا تتحسن أو تزداد بعد أسابيع. », « ظهور طفح/حبوب جديدة مستمرة. », « أعراض عدوى جلدية: احمرار شديد، سخونة موضعية، قيح، ألم. », « تكرار العدوى داخل المنزل رغم الالتزام بالنظافة والعلاج. » ], reminders: [ « حضّر قائمة بالمخالطين وخطوات التنظيف التي قمت بها لتسهيل التشخيص. » ], warnings: [ « الأطفال/الرضع/الحوامل وكبار السن يحتاجون تقييمًا أدق عند الشك. », « إذا كانت الأعراض شديدة أو منتشرة بسرعة، لا تنتظر الأسبوع 4. » ] } ]; // —————————- // State management (localStorage) // —————————- const $ = (sel, root = document) => root.querySelector(sel); const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel)); const els = { list: $(« #stList »), filter: $(« #stFilter »), search: $(« #stSearch »), openAll: $(« #stOpenAll »), closeAll: $(« #stCloseAll »), resetChecks: $(« #stResetChecks »), progressBar: $(« #stProgressBar »), progressLabel: $(« #stProgressLabel »), toggleReminders: $(« #stToggleReminders »), reminderHint: $(« #stReminderHint ») }; const defaultState = { expanded: Object.fromEntries(TIMELINE.map(x => [x.id, false])), checked: Object.fromEntries(TIMELINE.map(x => [x.id, false])), focusIndex: 0 }; function loadState() { try { const raw = localStorage.getItem(I18N_FR.storageKey); if (!raw) return structuredClone(defaultState); const parsed = JSON.parse(raw); // Merge to avoid missing keys on updates const merged = structuredClone(defaultState); for (const k of [« expanded », »checked »]) { if (parsed && parsed[k] && typeof parsed[k] === « object ») { for (const id of Object.keys(merged[k])) { if (typeof parsed[k][id] === « boolean ») merged[k][id] = parsed[k][id]; } } } if (Number.isFinite(parsed.focusIndex)) merged.focusIndex = parsed.focusIndex; return merged; } catch { return structuredClone(defaultState); } } function saveState() { localStorage.setItem(I18N_FR.storageKey, JSON.stringify(state)); } let state = loadState(); // —————————- // Reminders (in-page only) // —————————- const remindersState = (() => { try { const raw = localStorage.getItem(I18N_FR.remindersKey); if (!raw) return { enabled: false, queue: [] }; const parsed = JSON.parse(raw); return { enabled: !!parsed.enabled, queue: Array.isArray(parsed.queue) ? parsed.queue : [] }; } catch { return { enabled: false, queue: [] }; } })(); function saveRemindersState() { localStorage.setItem(I18N_FR.remindersKey, JSON.stringify(remindersState)); } function typeToPill(type) { if (type === « action ») return { cls: « bg-sky-100 text-sky-800 », txt: « خطوة عملية » }; if (type === « care ») return { cls: « bg-emerald-100 text-emerald-800 », txt: « متابعة وأعراض » }; return { cls: « bg-rose-100 text-rose-900 », txt: « تحذير » }; } function escapeHtml(s) { return String(s) .replaceAll(« & », « & ») .replaceAll(«  », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } function matchesQuery(item, q) { if (!q) return true; const hay = [ item.title, item.badge, item.summary, …(item.bullets || []), …(item.reminders || []), …(item.warnings || []) ].join( » « ); return hay.toLowerCase().includes(q.toLowerCase()); } function computeProgress() { const total = TIMELINE.length; const done = TIMELINE.reduce((acc, item) => acc + (state.checked[item.id] ? 1 : 0), 0); const pct = Math.round((done / total) * 100); els.progressBar.style.width = pct + « % »; els.progressLabel.textContent = pct + « % »; const pb = els.progressBar.parentElement; pb.setAttribute(« aria-valuenow », String(pct)); } function render() { const typeFilter = els.filter.value; const q = els.search.value.trim(); const visible = TIMELINE.filter(item => { if (typeFilter !== « all » && item.type !== typeFilter) return false; return matchesQuery(item, q); }); els.list.innerHTML = visible.map((item, idx) => { const pill = typeToPill(item.type); const expanded = !!state.expanded[item.id]; const checked = !!state.checked[item.id]; const detailsId = `stDetails_${item.id}`; const headerId = `stHeader_${item.id}`; return ` `; }).join(«  »); computeProgress(); // If list changed (filter/search), keep focusIndex within bounds const cards = $$(« #stList [data-id] »); if (cards.length === 0) return; state.focusIndex = Math.min(state.focusIndex, cards.length – 1); saveState(); } function getVisibleCards() { return $$(« #stList [data-id] »); } function setExpanded(id, value) { state.expanded[id] = !!value; saveState(); render(); // Restore focus to header button for accessibility const btn = $(`#stHeader_${CSS.escape(id)}`); if (btn) btn.focus(); } function openAllVisible(open) { const cards = getVisibleCards(); for (const card of cards) { const id = card.getAttribute(« data-id »); if (id in state.expanded) state.expanded[id] = !!open; } saveState(); render(); } function resetChecks() { for (const item of TIMELINE) state.checked[item.id] = false; saveState(); render(); } function gotoByDelta(delta) { const cards = getVisibleCards(); if (cards.length === 0) return; state.focusIndex = Math.max(0, Math.min(cards.length – 1, state.focusIndex + delta)); saveState(); const card = cards[state.focusIndex]; const id = card.getAttribute(« data-id »); const header = $(`#stHeader_${CSS.escape(id)}`); if (header) header.focus({ preventScroll: true }); card.scrollIntoView({ behavior: « smooth », block: « nearest » }); } function findIndexById(id) { const cards = getVisibleCards(); return cards.findIndex(c => c.getAttribute(« data-id ») === id); } function goNextPrev(currentId, dir) { const idx = findIndexById(currentId); if (idx === -1) return; state.focusIndex = idx; saveState(); gotoByDelta(dir === « next » ? 1 : -1); } function addInPageReminder(itemId) { // Build a small inline reminder « toast » within the tool (no system notifications) const item = TIMELINE.find(x => x.id === itemId); if (!item) return; const now = new Date(); const payload = { id: `${itemId}_${now.getTime()}`, itemId, title: item.title, time: now.toISOString() }; remindersState.queue.push(payload); // keep last 6 remindersState.queue = remindersState.queue.slice(-6); saveRemindersState(); showReminder(payload); } function showReminder(payload) { if (!remindersState.enabled) return; // Create container if absent let tray = $(« #stReminderTray »); if (!tray) { tray = document.createElement(« div »); tray.id = « stReminderTray »; tray.className = « fixed z-50 left-4 bottom-4 right-4 sm:right-auto sm:w-[420px] space-y-2 »; // Keep within tool constraints; fixed doesn’t increase tool height. document.body.appendChild(tray); } const card = document.createElement(« div »); card.className = « rounded-2xl border border-slate-200 bg-white st-shadow st-ring p-3 »; card.setAttribute(« role », « status »); card.innerHTML = ` `; const closeBtn = card.querySelector(« button »); closeBtn.addEventListener(« click », () => card.remove()); tray.appendChild(card); // Auto-dismiss after 10s window.setTimeout(() => { if (card.isConnected) card.remove(); }, 10000); } function syncReminderButton() { els.toggleReminders.textContent = remindersState.enabled ? « إيقاف التذكيرات داخل الصفحة » : « تفعيل التذكيرات داخل الصفحة »; els.reminderHint.textContent = remindersState.enabled ? « التذكيرات مفعّلة: اضغط «تذكير» بجانب أي مرحلة لإظهار بطاقة تذكير. » : « التذكيرات غير مفعّلة: يمكنك تفعيلها لإظهار بطاقات داخل الصفحة (بدون إشعارات نظام). »; } // —————————- // Event delegation // —————————- els.list.addEventListener(« click », (e) => { const t = e.target.closest(« [data-action] »); if (!t) return; const action = t.getAttribute(« data-action »); const id = t.getAttribute(« data-id »); if (!id) return; if (action === « toggle ») { setExpanded(id, !state.expanded[id]); } else if (action === « check ») { // checkbox handles state on change; keep for robustness } else if (action === « next ») { goNextPrev(id, « next »); } else if (action === « prev ») { goNextPrev(id, « prev »); } else if (action === « remind ») { addInPageReminder(id); } }); els.list.addEventListener(« change », (e) => { const cb = e.target.closest(‘input[type= »checkbox »][data-action= »check »]’); if (!cb) return; const id = cb.getAttribute(« data-id »); state.checked[id] = cb.checked; saveState(); computeProgress(); }); // Keyboard accessibility on list: ↑/↓ to navigate, Enter/Space to toggle current document.addEventListener(« keydown », (e) => { // Don’t hijack when typing in search/select const tag = (e.target && e.target.tagName) ? e.target.tagName.toLowerCase() : «  »; const isTyping = tag === « input » || tag === « select » || tag === « textarea »; if (isTyping) return; if (e.key === « ArrowDown ») { e.preventDefault(); gotoByDelta(1); } else if (e.key === « ArrowUp ») { e.preventDefault(); gotoByDelta(-1); } else if (e.key === « Enter » || e.key ===  » « ) { const cards = getVisibleCards(); const card = cards[state.focusIndex]; if (!card) return; const id = card.getAttribute(« data-id »); // toggle e.preventDefault(); setExpanded(id, !state.expanded[id]); } }); els.openAll.addEventListener(« click », () => openAllVisible(true)); els.closeAll.addEventListener(« click », () => openAllVisible(false)); els.resetChecks.addEventListener(« click », resetChecks); els.filter.addEventListener(« change », () => { state.focusIndex = 0; saveState(); render(); }); let searchDebounce = null; els.search.addEventListener(« input », () => { window.clearTimeout(searchDebounce); searchDebounce = window.setTimeout(() => { state.focusIndex = 0; saveState(); render(); }, 120); }); els.toggleReminders.addEventListener(« click », () => { remindersState.enabled = !remindersState.enabled; saveRemindersState(); syncReminderButton(); // Show last reminder(s) if enabling if (remindersState.enabled && remindersState.queue.length) { const last = remindersState.queue[remindersState.queue.length – 1]; showReminder(last); } }); // Initial render syncReminderButton(); render();