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

/* 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();