"""Arabic-only presentation layer shared by the Gradio app and the static (in-browser) page. Colour rules: green = verified, red = a real mismatch or a missing reference, amber = needs a human. Verified items never use red. Every user-facing string is Arabic. """ from __future__ import annotations import html from typing import List, Optional from benchmark_format import official_payload _e = html.escape APP_TITLE = "التحقق من هلوسة القرآن والحديث وتصحيحها" APP_TAGLINE = "تحقّق من آيات القرآن والأحاديث النبوية بالدليل" COPIED_MESSAGE = "تم نسخ النص بنجاح" GROUP_LABEL = {"verified": "موثّق", "mismatch": "غير مطابق", "review": "تحتاج مراجعة بشرية"} TYPE_LABEL = {"Ayah": "آية قرآنية", "Hadith": "حديث نبوي"} INDICATORS = [ ("composite", "الدرجة المركبة"), ("coverage", "تغطية الكلمات"), ("lcs_ratio", "التسلسل النصي"), ("token_overlap", "تداخل الكلمات"), ("edit_sim", "تشابه الحروف"), ("diacritic_sim", "التشكيل"), ] METHODS = { "substring_match": "الاقتباس واردٌ كاملًا في المصدر", "threshold_pass": "تجاوز عتبة التطابق", "threshold_fail": "دون عتبة التطابق", "borderline_multi_cov": "حالة حدّية: عدة مصادر متقاربة", "borderline_default": "حالة حدّية", "borderline_low_retrieval": "حالة حدّية: استرجاع ضعيف", "no_candidates": "لا توجد مصادر مرشحة", "empty_span": "نص فارغ", "error": "تعذّرت المعالجة", } def _pct(value: float) -> str: return f"{round(value * 100)}%" def source_label(source: dict) -> str: if source["type"] == "Quran": start, end = source["ayah_start"], source["ayah_end"] verses = f"{start}" if start == end else f"{start}–{end}" return f"سورة {source['surah_name']} — الآية {verses}" return f"حديث رقم {source['hadithID']} — {source['title']}" def reason_text(reason: dict) -> str: """Arabic explanation of a decision code produced by the pipeline.""" code = reason["code"] src = reason.get("source", "") if code == "exact_match": return f"تطابق تام مع {src} بعد تجاهل اختلافات الرسم والتشكيل." if code == "close_match": return f"تطابق شبه كامل مع {src}." if code == "altered_passage": n = reason.get("n", 0) how = "تغيّر ترتيب الكلمات" if reason.get("reordered") else f"{n} موضع مختلف" return f"النص يخالف {src} ({how}). التصحيح المقترح هو نص المصدر حرفيًا ولم يُولَّد." if code == "weak_match": return "وُجد مصدر قريب لكن التطابق غير كافٍ للحكم الآلي." if code == "too_short": return "الاقتباس قصير جدًا (كلمتان فقط) فلا يمكن تحديد مصدره بيقين؛ يلزم الرجوع إلى مختص." if code == "no_source": return "لا يوجد في المراجع المضمّنة نصٌّ يشبه هذا الاقتباس، وقد يكون مختلَقًا." if code == "insufficient_evidence": return "الأدلة غير كافية: لا مصدر واضح، ودرجة اليقين منخفضة." if code == "candidate_not_strong": return f"وُجد مرشح ({src}، قوة المطابقة {round(reason.get('strength', 0) * 100)}%) لكن الدليل لا يكفي للتصحيح الآلي." if code == "hadith_candidate": return f"وُجدت رواية مشابهة ({src}) لكن لا يُصحَّح الحديث آليًا لاختلاف الروايات؛ يلزم الرجوع إلى مختص." return "تعذّرت معالجة هذا الاقتباس آليًا." def note_text(note: dict) -> str: n = note.get("n", 0) code = note["code"] if code == "diacritic_conflict": return f"تنبيه: تشكيل {n} كلمة يخالف المصحف (الكلمات صحيحة لكن الحركات مختلفة)." if code == "orthographic_variant": return f"ملاحظة: {n} اختلاف إملائي (رسم أو مسافات) لا يغيّر الكلمة." if code == "hadith_minor_diffs": return f"ملاحظة: {n} اختلاف طفيف عن أقرب رواية في المراجع." return "" def _diff_html(comparison: dict) -> str: """Red = words only in the quotation; green = the source words that should be there.""" parts = [] for op in comparison["word_diff"]: if op["op"] == "equal": parts.append(f'{_e(op["span"])}') continue if op["span"]: parts.append(f'{_e(op["span"])}') if op["source"]: parts.append(f'{_e(op["source"])}') return " ".join(parts) def _legend(group: str, comparison: Optional[dict]) -> str: if group == "verified" or not comparison or all(op["op"] == "equal" for op in comparison["word_diff"]): return "" return '

كلمات في الاقتباس تخالف المصدر الصواب من المصدر

' def _indicator_table(signals: Optional[dict]) -> str: if not signals: return "" rows = [] for key, label in INDICATORS: value = float(signals.get(key, 0.0)) rows.append( f'
{label}
' f'
{_pct(value)}
' ) rows.append(f'
وروده كاملًا في المصدر
{"نعم" if signals.get("is_substring") else "لا"}
') return '
' + "".join(rows) + "
" def _match_percent(span: dict) -> int: evidence = span["evidence"] if evidence and evidence.get("comparison"): return round(evidence["comparison"]["word_similarity"] * 100) if evidence and evidence.get("signals"): return round(evidence["signals"]["composite"] * 100) return 0 def _evidence_panel(span: dict) -> str: evidence, verification = span["evidence"], span["verification"] rows = [ f'
الاقتباس المكتشف

{_e(span["text"])}

', f'
النوع

{TYPE_LABEL[span["type"]]}

', ] if evidence: comparison = evidence["comparison"] rows += [ f'
المصدر المرشح

{_e(source_label(evidence["source"]))}

', f'
نص المصدر الأصلي

{_e(comparison["source_excerpt"])}

', f'
المقارنة كلمةً بكلمة

{_diff_html(comparison)}

{_legend(span["group"], comparison)}
', f'
مؤشرات التحقق{_indicator_table(evidence.get("signals"))}
', ] if comparison["diacritic_notes"]: items = "، ".join(f"{_e(n['word'])} ← {_e(n['source_word'])}" for n in comparison["diacritic_notes"]) rows.append(f'
اختلافات التشكيل

{items}

') else: rows.append('
المصدر المرشح

لم يُسترجع أي مصدر.

') rows += [ f'
درجة اليقين في الحكم

{_pct(verification["confidence"])} · {METHODS.get(verification["method"], "")}

', f'
القرار

{_e(span["status_ar"])}

', f'
سبب القرار

{_e(reason_text(span["reason"]))}

', ] return "".join(rows) def _card(span: dict) -> str: group, evidence = span["group"], span["evidence"] label = GROUP_LABEL[group] chip = f'نسبة المطابقة {_match_percent(span)}%' scan_badge = ('اقتباس غير معلَن' if span["detection"]["backend"] == "scan" else "") fields = [f'

{_e(span["text"])}

'] if evidence: comparison = evidence["comparison"] fields.append(f'

{_e(source_label(evidence["source"]))}

') if group != "verified": # a verified quotation equals its source: no need to print it twice fields.append( f'

{_diff_html(comparison)}

{_legend(group, comparison)}
' ) else: fields.append('

لا يوجد

') fields.append(f'

{_e(reason_text(span["reason"]))}

') notes = "".join(f'

{_e(note_text(n))}

' for n in span["notes"] if note_text(n)) action = "" correction, suggestion = span["correction"], span["suggestion"] if correction: action = ( '
التصحيح المقترح من المصدر' f'

{_e(correction["display_text"])}

' f'

{_e(source_label(correction["source"]))}

' ) elif group == "review": closest = "" if suggestion: closest = (f'

أقرب مصدر وُجد للمراجِع، وليس تصحيحًا آليًا: {_e(source_label(suggestion["source"]))}

' f'

{_e(suggestion["display_text"][:420])}

') action = ('
الأدلة غير كافية للتصحيح الآلي. يُوصى بالمراجعة البشرية.' + closest + "
") elif span["status"] == "UNSUPPORTED": action = '
لا يوجد مصدر مطابق في المراجع المتاحة. لم يُقترح أي نص بديل.
' return f"""
{span["id"]} {TYPE_LABEL[span["type"]]}{scan_badge} {label} {chip}
{"".join(fields)} {notes} {action}
عرض الدليل
{_evidence_panel(span)}
""" def _summary(summary: dict) -> str: tiles = [ (summary["n_spans"], "إجمالي الاقتباسات", ""), (summary["n_ayah"], "آيات قرآنية", ""), (summary["n_hadith"], "أحاديث نبوية", ""), (summary["VERIFIED"], "موثّق", "verified"), (summary["CORRECTED"] + summary["UNSUPPORTED"], "غير مطابق", "mismatch"), (summary["HUMAN_REVIEW"], "تحتاج مراجعة", "review"), ] return '
' + "".join( f'
{value}{label}
' for value, label, cls in tiles ) + "
" def _highlighted_text(result: dict, title: str) -> str: text, pieces, cursor = result["input_text"], [], 0 for span in result["spans"]: pieces.append(_e(text[cursor:span["start"]])) pieces.append(f'{_e(text[span["start"]:span["end"]])}') cursor = span["end"] pieces.append(_e(text[cursor:])) legend = ('
موثّقغير مطابق' 'مراجعة بشرية
') return f'

' + "".join(pieces) + "

" + legend + "
" def final_text(result: dict) -> str: """Corrected text with an inline Arabic flag after every quotation that still needs attention.""" text, reports = result["input_text"], result["spans"] for report in sorted(reports, key=lambda r: r["start"], reverse=True): if report["status"] == "CORRECTED" and report["correction"]: text = text[: report["start"]] + report["correction"]["display_text"] + text[report["end"]:] elif report["status"] == "UNSUPPORTED": text = text[: report["end"]] + " [⚠ لا يوجد مصدر مطابق]" + text[report["end"]:] elif report["status"] == "HUMAN_REVIEW": text = text[: report["end"]] + " [⚠ يحتاج مراجعة بشرية]" + text[report["end"]:] return text def _final_block(result: dict) -> str: summary = result["summary"] fixed = summary["CORRECTED"] open_items = summary["UNSUPPORTED"] + summary["HUMAN_REVIEW"] if fixed == 0 and open_items == 0: headline = "كل الاقتباسات المكتشفة مطابقة للمصادر." else: headline = f"صُحِّح {fixed} اقتباس من نص المصدر، وبقي {open_items} اقتباس يحتاج مراجعة بشرية ومعلَّم بعلامة تنبيه." text = final_text(result) return ( '
النسخة المصحّحة' f'
' f'

{headline}

{_e(text)}

' ) _EXPORT_LABELS = (("task1A_predictions.tsv", "ملف الكشف (1A)", "أماكن الاقتباسات ونوعها"), ("task1B_predictions.tsv", "ملف التحقق (1B)", "صحيح أو خطأ لكل اقتباس"), ("task1C_predictions.tsv", "ملف التصحيح (1C)", "النص الصحيح من المصدر")) def _export_block(result: dict) -> str: """Download buttons for the three official submission files (client-side Blob download, nothing is uploaded).""" payload = official_payload(result) buttons = "".join( f'' for name, label, sub in _EXPORT_LABELS ) return ('
للمقيِّمين: تنزيل النتائج بصيغة ملفات المسابقة الرسمية' '

هذه الملفات الثلاثة هي صيغة تسليم المهمة الأولى في مسابقة الذكاء الاصطناعي لخدمة المحتوى الإسلامي: ' 'الكشف عن مواضع الآيات والأحاديث، ثم الحكم على كل اقتباس، ثم تصحيح الخاطئ منها. ' 'لا تحتاجها لقراءة النتيجة أعلاه؛ تفيد لجان التحكيم ومن يقيس الأداء على بيانات المسابقة.

' f'
{buttons}
') def render_results(result: dict, generated_answer: Optional[str] = None) -> str: """HTML report for a pipeline result. Pass the model's answer (mode B) to show it first and label the text as generated.""" header = render_generated_header(generated_answer) if generated_answer is not None else "" if not result["spans"]: body = ( '
لم يُعثر على اقتباسات قرآنية أو حديثية في هذا النص. يتعرّف النظام على الاقتباسات بمطابقتها مع المراجع، ' 'سواء وُضعت بين علامات تنصيص أو أقواس أو وردت داخل الكلام دون أي عبارة تمهيدية.
' ) return f'
{header}{body}
' generated = generated_answer is not None title = "إجابة النموذج مع الاقتباسات المكتشفة" if generated else "النص مع الاقتباسات المكتشفة" parts = [_summary(result["summary"]), _highlighted_text(result, title), "".join(_card(s) for s in result["spans"])] summary = result["summary"] if generated or summary["CORRECTED"] or summary["UNSUPPORTED"] or summary["HUMAN_REVIEW"]: parts.append(_final_block(result)) parts.append(_export_block(result)) return f'
{header}{"".join(parts)}
' def render_generated_header(answer: str) -> str: return f'

{_e(answer)}

' def render_message(message: str, kind: str = "info") -> str: return f'
{_e(message)}
' # -------------------------------------------------------------------------------------------------------------- # Static markup and CSS # -------------------------------------------------------------------------------------------------------------- STAR = ( '' ) HERO = f"""
{STAR}

{APP_TITLE}

{APP_TAGLINE}

يكتشف النظام الاقتباسات داخل أي نص، ويسترجع نصوصها من المصادر، ويقارنها كلمةً بكلمة، ثم يعرض الدليل. وإذا لم تكفِ الأدلة فلن يختلق تصحيحًا، بل يحيل الحالة إلى المراجعة البشرية.

كشف‹استرجاع‹محاذاة‹دليل‹قرار
""" DISCLAIMER = """
أداة مساعدة للتدقيق النصي وليست فتوى ولا بديلًا عن المراجعة المتخصصة. النتائج مبنية على مراجع القرآن الكريم والكتب الستة المضمّنة فقط.
""" PLACEHOLDER = "الصق هنا النص الذي ولّده نموذج لغوي. يكتشف النظام الآيات والأحاديث الواردة فيه، بعلامات تنصيص أو بدونها…" PROMPT_PLACEHOLDER = "اكتب سؤالك، مثل: اشرح لي فضل الصبر في القرآن والسنة مع ذكر الأدلة." _PATTERN = ( "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E" "%3Cg fill='none' stroke='%230F4C3A' stroke-opacity='0.07' stroke-width='1'%3E" "%3Crect x='22' y='22' width='44' height='44'/%3E%3Crect x='22' y='22' width='44' height='44' transform='rotate(45 44 44)'/%3E" "%3C/g%3E%3C/svg%3E\")" ) CSS = """ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Amiri:wght@400;700&display=swap'); :root { --green:#0F4C3A; --green-2:#17694F; --gold:#B8912F; --gold-2:#E2C06E; --cream:#FBF6EA; --paper:#FFFFFF; --ink:#1F2933; --muted:#55626D; --line:#E6DCC3; --ok:#1B7A4B; --ok-bg:#EAF6EF; --ok-line:#BFE3CD; --bad:#B3261E; --bad-bg:#FDECEA; --bad-line:#F4B8B3; --warn:#7A5B0C; --warn-bg:#FFF6DA; --warn-line:#EBD28A; } .gradio-container, body.icv-page { background:var(--cream) PATTERN !important; font-family:'Cairo','Segoe UI',Tahoma,sans-serif; color:var(--ink); } .gradio-container { max-width:1060px !important; --body-text-color:#1F2933; --block-background-fill:#FFFFFF; --block-border-color:#E6DCC3; --input-background-fill:#FFFFFF; --block-label-text-color:#55626D; --button-primary-background-fill:#0F4C3A; --button-primary-background-fill-hover:#17694F; --button-primary-text-color:#FFFFFF; --button-secondary-background-fill:#FFFFFF; --button-secondary-text-color:#0F4C3A; --button-secondary-border-color:#B8912F; --color-accent:#B8912F; } .icv { direction:rtl; text-align:right; color:var(--ink); line-height:1.9; } .icv .hero { background:linear-gradient(135deg,#0F4C3A,#17694F); border-radius:20px; padding:30px 22px 26px; margin:10px 0 18px; text-align:center; box-shadow:0 6px 22px rgba(15,76,58,.18); border-bottom:4px solid var(--gold); } .icv .hero .mark { width:54px; height:54px; display:block; margin:0 auto 4px; } .icv .hero h1 { font-size:2.3rem; margin:.1rem 0; color:#FFFFFF; font-weight:700; } .icv .hero .tagline { color:var(--gold-2); font-size:1.2rem; font-weight:600; margin:.1rem 0 .6rem; } .icv .hero .sub { max-width:720px; margin:0 auto; color:#E9F2EE; font-size:1rem; } .icv .flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:16px; } .icv .flow span { background:rgba(255,255,255,.12); border:1px solid rgba(226,192,110,.55); color:#FFF; border-radius:999px; padding:3px 16px; font-size:.9rem; } .icv .flow i { color:var(--gold-2); font-style:normal; font-size:1.2rem; } .icv .disclaimer { font-size:.85rem; color:var(--muted); text-align:center; padding:14px 8px; } .icv .en-free { direction:rtl; } .input-area textarea { direction:rtl; text-align:right; font-family:'Amiri','Cairo',serif !important; font-size:1.25rem !important; line-height:2.1 !important; background:#FFFFFF !important; color:#1F2933 !important; } .llm-row label, .gradio-container label span { font-family:'Cairo',sans-serif; } .results { direction:rtl; } .icv .summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:8px 0 14px; } .icv .tile { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; } .icv .tile b { display:block; font-size:1.8rem; color:var(--green); line-height:1.3; } .icv .tile span { font-size:.92rem; color:var(--muted); } .icv .tile.verified { background:var(--ok-bg); border-color:var(--ok-line); } .icv .tile.verified b { color:var(--ok); } .icv .tile.mismatch { background:var(--bad-bg); border-color:var(--bad-line); } .icv .tile.mismatch b { color:var(--bad); } .icv .tile.review { background:var(--warn-bg); border-color:var(--warn-line); } .icv .tile.review b { color:var(--warn); } .icv .tile.zero { background:var(--paper); border-color:var(--line); opacity:.6; } .icv .tile.zero b { color:var(--muted); } .icv .highlight, .icv .generated, .icv .final { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:14px; } .icv label { display:block; color:var(--muted); font-size:.82rem; font-weight:600; margin-bottom:4px; } .icv .highlight p, .icv .generated p, .icv .final-text { font-family:'Amiri','Cairo',serif; font-size:1.2rem; line-height:2.2; margin:0; white-space:pre-wrap; } .icv mark { color:var(--ink); border-radius:6px; padding:1px 5px; } .icv mark.verified { background:#D5EEDF; } .icv mark.mismatch { background:#F8CFCB; } .icv mark.review { background:#F7E3A6; } .icv .hl-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:.78rem; } .icv .qcard { background:var(--paper); border:1px solid var(--line); border-inline-start:6px solid var(--line); border-radius:16px; padding:16px 18px; margin:12px 0; } .icv .qcard.verified { border-inline-start-color:var(--ok); } .icv .qcard.mismatch { border-inline-start-color:var(--bad); } .icv .qcard.review { border-inline-start-color:var(--gold); } .icv .qhead { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; } .icv .idx { background:var(--green); color:#FFF; border-radius:50%; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; } .icv .badge { padding:2px 14px; border-radius:999px; font-size:.84rem; background:#F3EEDD; border:1px solid var(--line); color:var(--ink); } .icv .badge.st.verified { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); font-weight:600; } .icv .badge.st.mismatch { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); font-weight:600; } .icv .badge.st.review { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); font-weight:600; } .icv .badge.scan { background:#EEF3FB; border-color:#C9D8EE; color:#2F4F7F; } .icv .conf { margin-inline-start:auto; color:var(--muted); font-size:.88rem; } .icv .conf b { color:var(--green); } .icv .field { margin:8px 0; } .icv .field p { margin:0; } .icv .quote { font-family:'Amiri','Cairo',serif; font-size:1.25rem; line-height:2.2; color:var(--ink); } .icv .quote.small { font-size:1.05rem; color:#3a4651; } .icv .diff { font-family:'Amiri','Cairo',serif; font-size:1.2rem; line-height:2.2; } .icv .w-extra { background:var(--bad-bg); color:var(--bad); border-radius:4px; padding:0 4px; text-decoration:line-through; } .icv .w-missing { background:var(--ok-bg); color:var(--ok); border-radius:4px; padding:0 4px; font-weight:700; } .icv .legend { color:var(--muted); font-size:.82rem; margin:4px 0 0; } .icv .legend span { text-decoration:none; font-size:.8rem; } .icv .reason { color:var(--muted); font-size:.92rem; margin:6px 0 0; } .icv .note { color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px; padding:5px 12px; font-size:.88rem; margin:8px 0 0; } .icv .action { border-radius:12px; padding:10px 14px; margin-top:10px; } .icv .action.ok { background:var(--ok-bg); border:1px solid var(--ok-line); } .icv .action.ok b { color:var(--ok); } .icv .action.warn { background:var(--warn-bg); border:1px solid var(--warn-line); } .icv .action.warn b { color:var(--warn); } .icv .action.bad { background:var(--bad-bg); border:1px solid var(--bad-line); } .icv .action.bad b { color:var(--bad); } .icv .evidence { margin-top:12px; border-top:1px dashed var(--line); padding-top:8px; } .icv .evidence summary { cursor:pointer; color:var(--green); font-weight:700; } .icv .ev-row { margin:10px 0; } .icv .ev-row b { color:var(--gold); font-size:.88rem; } .icv .ev-row p { margin:2px 0; } .icv .indicators { display:grid; gap:6px; margin-top:6px; } .icv .ind { display:grid; grid-template-columns:150px 1fr 48px; gap:10px; align-items:center; font-size:.88rem; } .icv .bar { background:#EFE8D3; border-radius:999px; height:9px; overflow:hidden; direction:rtl; } .icv .bar span { display:block; height:100%; background:linear-gradient(270deg,var(--green),var(--gold)); } .icv .ind-val { text-align:left; direction:ltr; color:var(--ink); } .icv .ind-val.wide { grid-column:2 / span 2; text-align:right; direction:rtl; } .icv .final { border-color:var(--gold); background:#FFFDF6; } .icv .final-head { display:flex; justify-content:space-between; align-items:center; } .icv .final-head b { color:var(--green); font-size:1.05rem; } .icv .copy { background:var(--green); color:#FFF; border:0; border-radius:10px; padding:5px 16px; font-family:inherit; cursor:pointer; } .icv .notice { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; } .icv .notice.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); } .icv .notice.bad { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); } @media (max-width:640px){ .icv .hero h1{font-size:1.7rem;} .icv .ind{grid-template-columns:104px 1fr 40px;} } """.replace("PATTERN", _PATTERN) # -------------------------------------------------------------------------------------------------------------- # Visual layer: soft glassmorphism, dynamic gradients, RTL-safe text, toast and skeleton loaders # -------------------------------------------------------------------------------------------------------------- GLASS_CSS = """ :root { --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.82); --glass-line:rgba(255,255,255,.75); --shadow-1:0 1px 2px rgba(15,76,58,.06), 0 8px 24px rgba(15,76,58,.08); --shadow-2:0 2px 4px rgba(15,76,58,.08), 0 18px 44px rgba(15,76,58,.16); } .gradio-container, body.icv-page { background: radial-gradient(900px 520px at 88% -8%, rgba(226,192,110,.34), transparent 60%), radial-gradient(760px 520px at 6% 4%, rgba(23,105,79,.20), transparent 62%), linear-gradient(180deg,#FBF6EA 0%,#F3EBD3 100%) !important; background-attachment:fixed !important; } /* RTL safety: long words, URLs and mixed Latin/digit runs wrap inside their box instead of spilling out */ .icv, .icv * { box-sizing:border-box; min-width:0; } .icv p, .icv span, .icv b, .icv label, .icv summary, .icv button, .icv .badge, .icv .tile { overflow-wrap:anywhere; } .icv .quote, .icv .diff, .icv .final-text, .icv .highlight p, .icv .generated p { unicode-bidi:plaintext; text-align:start; } .icv .hero { position:relative; overflow:hidden; border-bottom:0; border:1px solid rgba(226,192,110,.45); background:linear-gradient(120deg,#0B3B2D,#17694F 45%,#0F4C3A 70%,#1d7a5c); background-size:240% 240%; animation:icv-flow 16s ease-in-out infinite; box-shadow:var(--shadow-2); } .icv .hero::before { content:""; position:absolute; inset:-40% -10% auto auto; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(226,192,110,.38), transparent 65%); pointer-events:none; } .icv .hero::after { content:""; position:absolute; inset:auto auto 0 0; width:100%; height:4px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); } .icv .hero h1 { font-size:clamp(1.45rem,4.2vw,2.3rem); line-height:1.5; text-wrap:balance; position:relative; } .icv .hero .tagline, .icv .hero .sub, .icv .flow { position:relative; } .icv .flow span { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } @keyframes icv-flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .icv .tile, .icv .highlight, .icv .generated, .icv .final, .icv .qcard, .icv .notice, .icv .export { background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--shadow-1); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); transition:transform .25s ease, box-shadow .25s ease; } .icv .qcard { border-inline-start:6px solid var(--line); } .icv .qcard:hover, .icv .tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); } .icv .tile.verified { background:linear-gradient(160deg,rgba(234,246,239,.92),rgba(255,255,255,.6)); } .icv .tile.mismatch { background:linear-gradient(160deg,rgba(253,236,234,.92),rgba(255,255,255,.6)); } .icv .tile.review { background:linear-gradient(160deg,rgba(255,246,218,.95),rgba(255,255,255,.6)); } .icv .final { background:linear-gradient(160deg,rgba(255,253,246,.92),rgba(250,240,208,.55)); border-color:rgba(184,145,47,.55); } .icv .final-head { flex-wrap:wrap; gap:10px; } .icv .qhead .badge { max-width:100%; white-space:normal; } .icv .ind { grid-template-columns:minmax(96px,150px) minmax(0,1fr) 48px; } .icv .bar span { background:linear-gradient(270deg,var(--green),var(--gold-2)); transition:width .6s ease; } .icv .copy, .icv .dl { background:linear-gradient(135deg,var(--green),var(--green-2)); color:#FFF; border:0; border-radius:12px; padding:7px 18px; font-family:inherit; font-weight:600; cursor:pointer; box-shadow:0 4px 12px rgba(15,76,58,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .icv .copy:hover, .icv .dl:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 8px 18px rgba(15,76,58,.3); } .icv .copy:active, .icv .dl:active { transform:translateY(0); } .icv .copy:focus-visible, .icv .dl:focus-visible { outline:3px solid rgba(184,145,47,.55); outline-offset:2px; } .icv .copy.done { background:linear-gradient(135deg,#1B7A4B,#2a9d66); } .icv .export { border-radius:16px; padding:12px 18px; margin:12px 0; } .icv .export summary { cursor:pointer; color:var(--green); font-weight:700; } .icv .dls { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; } /* toast */ #icv-toast { position:fixed; inset-inline:0; bottom:28px; margin-inline:auto; width:max-content; max-width:calc(100vw - 32px); z-index:99999; direction:rtl; text-align:center; font:600 1rem 'Cairo','Segoe UI',Tahoma,sans-serif; color:#FFF; padding:12px 24px; border-radius:999px; background:linear-gradient(135deg,rgba(15,76,58,.94),rgba(23,105,79,.94)); border:1px solid rgba(226,192,110,.6); box-shadow:0 14px 40px rgba(15,76,58,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transform:translateY(18px) scale(.97); pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.2); } #icv-toast.show { opacity:1; transform:none; } #icv-toast.bad { background:linear-gradient(135deg,rgba(179,38,30,.95),rgba(214,69,58,.95)); } /* skeleton loaders */ .skel { position:relative; overflow:hidden; background:rgba(15,76,58,.08); border-radius:10px; } .skel::after { content:""; position:absolute; inset:0; transform:translateX(100%); animation:icv-shimmer 1.4s infinite; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); } @keyframes icv-shimmer { 100% { transform:translateX(-100%); } } .skel-card { background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; padding:16px 18px; margin:12px 0; box-shadow:var(--shadow-1); } .skel-line { height:14px; margin:10px 0; } .skel-line.w60 { width:60%; } .skel-line.w85 { width:85%; } .skel-line.w40 { width:40%; } .skel-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:8px 0 14px; } .skel-tile { height:78px; border-radius:14px; } .icv-spinner { width:18px; height:18px; border-radius:50%; border:3px solid rgba(15,76,58,.18); border-top-color:var(--gold); display:inline-block; vertical-align:middle; margin-inline-end:10px; animation:icv-spin .8s linear infinite; } @keyframes icv-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .icv .hero, .skel::after, .icv-spinner { animation:none; } .icv .qcard, .icv .tile, #icv-toast { transition:none; } } @media (max-width:640px){ .icv .ind{grid-template-columns:minmax(84px,104px) minmax(0,1fr) 40px;} .icv .final-head{flex-direction:column; align-items:stretch;} .icv .copy{width:100%;} } /* layout polish: centred, compact, professional */ .icv .notice, .icv .disclaimer, .icv .export { text-align:center; } .icv .export .legend { max-width:640px; margin:8px auto 0; font-size:.9rem; line-height:1.9; color:var(--muted); } .icv .dls { justify-content:center; } .icv .dl { display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-width:170px; } .icv .dl .t { font-weight:700; } .icv .dl .s { font-size:.78rem; font-weight:500; opacity:.85; } .icv .hero .flow { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } """ CSS += GLASS_CSS SKELETON = ( '
' '
' + '
' * 4 + '
' + ('
' '
') * 2 + '
' ) COPY_JS = r""" (function () { if (window.icvCopy) return; function toast(message, bad) { var t = document.getElementById('icv-toast'); if (!t) { t = document.createElement('div'); t.id = 'icv-toast'; t.setAttribute('role', 'status'); t.setAttribute('aria-live', 'polite'); document.body.appendChild(t); } t.textContent = message; t.className = 'show' + (bad ? ' bad' : ''); clearTimeout(window.__icvToast); window.__icvToast = setTimeout(function () { t.className = bad ? 'bad' : ''; }, 2400); } function legacyCopy(text) { var area = document.createElement('textarea'); area.value = text; area.setAttribute('readonly', ''); area.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none'; document.body.appendChild(area); area.select(); area.setSelectionRange(0, text.length); var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; } document.body.removeChild(area); return ok; } window.icvToast = toast; window.icvCopy = function (button) { var text = button.getAttribute('data-text') || ''; function finish(ok) { toast(ok ? '__COPIED__' : 'تعذّر النسخ، حدّد النص وانسخه يدويًا', !ok); if (ok) { button.classList.add('done'); setTimeout(function () { button.classList.remove('done'); }, 1600); } } if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(function () { finish(true); }, function () { finish(legacyCopy(text)); }); } else { finish(legacyCopy(text)); } }; window.icvDownload = function (button) { var blob = new Blob([button.getAttribute('data-text') || ''], { type: 'text/tab-separated-values;charset=utf-8' }); var link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = button.getAttribute('data-name') || 'results.tsv'; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(function () { URL.revokeObjectURL(link.href); }, 1000); }; })(); """.replace("__COPIED__", COPIED_MESSAGE)