Spaces:
Sleeping
Sleeping
| # ui_theme.py | |
| # -*- coding: utf-8 -*- | |
| """مواد واجهة عامة مستخرجة من Divid Teacher UI Raw Kit ومكيّفة مع Gradio. | |
| لا تحتوي أي منطق أعمال أو صوت أو تخزين. | |
| """ | |
| VERSION = "aiocr_radar_ui_theme_v5_voice_studio_routes" | |
| APP_CSS = r""" | |
| :root { | |
| --dt-bg: #f6f8fc; | |
| --dt-surface: #ffffff; | |
| --dt-surface-2: #eef2f7; | |
| --dt-border: #dbe2ea; | |
| --dt-text: #172033; | |
| --dt-muted: #64748b; | |
| --dt-primary: #2563eb; | |
| --dt-primary-soft: rgba(37, 99, 235, .10); | |
| --dt-success: #059669; | |
| --dt-warning: #d97706; | |
| --dt-danger: #dc2626; | |
| --dt-info: #0891b2; | |
| --dt-radius: 14px; | |
| --dt-radius-lg: 18px; | |
| --dt-shadow: 0 8px 28px rgba(15, 23, 42, .10); | |
| } | |
| html[data-dt-theme="dark"] { | |
| --dt-bg: #0b1020; | |
| --dt-surface: #121a2b; | |
| --dt-surface-2: #182238; | |
| --dt-border: #27334b; | |
| --dt-text: #edf2f7; | |
| --dt-muted: #9aa8bd; | |
| --dt-primary: #60a5fa; | |
| --dt-primary-soft: rgba(96,165,250,.12); | |
| --dt-shadow: 0 8px 30px rgba(0,0,0,.28); | |
| } | |
| html[data-dt-theme="contrast"] { | |
| --dt-bg: #000; | |
| --dt-surface: #000; | |
| --dt-surface-2: #111; | |
| --dt-border: #fff; | |
| --dt-text: #fff; | |
| --dt-muted: #e5e5e5; | |
| --dt-primary: #ffd400; | |
| --dt-primary-soft: rgba(255,212,0,.18); | |
| --dt-shadow: none; | |
| } | |
| .gradio-container { | |
| background: var(--dt-bg) !important; | |
| color: var(--dt-text) !important; | |
| max-width: 1320px !important; | |
| margin: 0 auto !important; | |
| } | |
| .gradio-container, .gradio-container * { box-sizing: border-box; } | |
| .gradio-container :focus-visible { outline: 3px solid var(--dt-primary) !important; outline-offset: 2px; } | |
| .dt-hero { | |
| display:flex; justify-content:space-between; gap:18px; align-items:center; | |
| background:var(--dt-surface); border:1px solid var(--dt-border); | |
| border-radius:var(--dt-radius-lg); box-shadow:var(--dt-shadow); | |
| padding:18px 20px; margin:4px 0 16px; | |
| } | |
| .dt-hero h1 { margin:0 0 5px; font-size:1.35rem; color:var(--dt-text); } | |
| .dt-hero p { margin:0; color:var(--dt-muted); } | |
| .dt-manager-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } | |
| .dt-chip { border:1px solid var(--dt-border); background:var(--dt-surface-2); color:var(--dt-text); border-radius:999px; padding:5px 9px; font-size:.78rem; } | |
| .dt-theme-picker { display:flex; gap:7px; flex:0 0 auto; } | |
| .dt-theme-btn { width:38px; height:38px; border-radius:50%; border:2px solid var(--dt-border); background:var(--dt-surface-2); color:var(--dt-text); cursor:pointer; font-size:1rem; } | |
| .dt-theme-btn:hover, .dt-theme-btn.active { border-color:var(--dt-primary); box-shadow:0 0 0 2px var(--dt-primary-soft); } | |
| .dt-section-title { | |
| background:var(--dt-surface); border:1px solid var(--dt-border); border-radius:var(--dt-radius); | |
| padding:12px 14px; margin:8px 0 12px; color:var(--dt-text); | |
| } | |
| .dt-section-title strong { color:var(--dt-primary); } | |
| .dt-report-intro { | |
| border:1px solid var(--dt-border); border-right:5px solid var(--dt-primary); | |
| background:var(--dt-surface); color:var(--dt-text); border-radius:var(--dt-radius); | |
| padding:12px 14px; margin-bottom:10px; | |
| } | |
| .dt-report-intro small { color:var(--dt-muted); } | |
| .dt-report-table, .dt-status, .dt-summary { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-surface) !important; | |
| box-shadow:var(--dt-shadow) !important; | |
| } | |
| .dt-status textarea, .dt-summary textarea { background:var(--dt-surface) !important; color:var(--dt-text) !important; } | |
| .gradio-container button.primary, .gradio-container button.primary:hover { | |
| background:var(--dt-primary) !important; border-color:var(--dt-primary) !important; | |
| } | |
| .gradio-container button { border-radius:12px !important; } | |
| .gradio-container .tab-nav { gap:6px; padding:5px; background:var(--dt-surface); border:1px solid var(--dt-border); border-radius:14px; } | |
| .gradio-container .tab-nav button { border-radius:10px !important; color:var(--dt-text) !important; } | |
| .gradio-container .tab-nav button.selected { background:var(--dt-primary-soft) !important; border-color:var(--dt-primary) !important; } | |
| @media (max-width: 760px) { | |
| .gradio-container { padding-left:8px !important; padding-right:8px !important; } | |
| .dt-hero { align-items:flex-start; flex-direction:column; padding:14px; } | |
| .dt-theme-picker { align-self:flex-end; } | |
| .dt-manager-chips { gap:4px; } | |
| .dt-chip { font-size:.72rem; padding:4px 7px; } | |
| .dt-editor-toolbar { gap:6px !important; padding:8px !important; } | |
| .dt-editor-toolbar > * { min-width:min(100%, 150px) !important; } | |
| .dt-card { padding:9px !important; } | |
| } | |
| /* بطاقات وشريط أدوات مستخلصان من نمط Divid Teacher UI Raw Kit ومكيّفان مع Gradio */ | |
| .dt-card { | |
| background:var(--dt-surface) !important; | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| box-shadow:var(--dt-shadow) !important; | |
| padding:12px !important; | |
| margin-bottom:12px !important; | |
| } | |
| .dt-editor-intro { | |
| border:1px solid var(--dt-border); | |
| border-right:5px solid var(--dt-primary); | |
| background:var(--dt-surface); | |
| color:var(--dt-text); | |
| border-radius:var(--dt-radius); | |
| padding:12px 14px; | |
| margin-bottom:12px; | |
| } | |
| .dt-editor-toolbar { | |
| display:flex !important; | |
| flex-wrap:wrap !important; | |
| gap:8px !important; | |
| align-items:end !important; | |
| padding:10px !important; | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface) !important; | |
| } | |
| .dt-editor-toolbar button { | |
| min-height:42px !important; | |
| } | |
| .dt-editor-grid { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface) !important; | |
| box-shadow:var(--dt-shadow) !important; | |
| overflow:auto !important; | |
| } | |
| .dt-editor-actions { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface) !important; | |
| } | |
| .dt-report-table { | |
| overflow:auto !important; | |
| } | |
| .dt-report-table table { | |
| min-width:720px; | |
| } | |
| .dt-editor-grid table { | |
| min-width:680px; | |
| } | |
| /* ========================================================= | |
| تحسينات الحقول والاختيارات والمحرر - مستوحاة من UI Raw Kit | |
| ========================================================= */ | |
| .dt-field { | |
| border-radius:var(--dt-radius) !important; | |
| } | |
| .dt-field label, | |
| .dt-choice label, | |
| .dt-analysis label, | |
| .dt-editor-text label { | |
| font-weight:700 !important; | |
| color:var(--dt-text) !important; | |
| } | |
| .dt-field input, | |
| .dt-field textarea, | |
| .dt-editor-text textarea, | |
| .dt-analysis textarea, | |
| .dt-choice input { | |
| background:var(--dt-surface) !important; | |
| color:var(--dt-text) !important; | |
| border-color:var(--dt-border) !important; | |
| } | |
| .dt-editor-text { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface) !important; | |
| box-shadow:var(--dt-shadow) !important; | |
| overflow:hidden !important; | |
| } | |
| .dt-editor-text textarea { | |
| min-height:420px !important; | |
| line-height:1.9 !important; | |
| font-size:1.03rem !important; | |
| padding:16px !important; | |
| resize:vertical !important; | |
| } | |
| .dt-editor-text:focus-within, | |
| .dt-field:focus-within, | |
| .dt-choice:focus-within, | |
| .dt-editor-grid:focus-within { | |
| border-color:var(--dt-primary) !important; | |
| box-shadow:0 0 0 3px var(--dt-primary-soft) !important; | |
| } | |
| .dt-analysis { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-surface-2) !important; | |
| } | |
| .dt-analysis textarea { | |
| background:var(--dt-surface-2) !important; | |
| color:var(--dt-muted) !important; | |
| line-height:1.7 !important; | |
| } | |
| .dt-source-panel { | |
| align-items:stretch !important; | |
| } | |
| .dt-source-panel > div { | |
| background:var(--dt-surface) !important; | |
| border-radius:var(--dt-radius) !important; | |
| } | |
| .dt-quality-toolbar { | |
| border-right:4px solid var(--dt-primary) !important; | |
| } | |
| .dt-tool button, | |
| button.dt-tool { | |
| min-height:42px !important; | |
| border:1px solid var(--dt-border) !important; | |
| background:var(--dt-surface-2) !important; | |
| color:var(--dt-text) !important; | |
| font-weight:700 !important; | |
| transition:transform 140ms ease, border-color 140ms ease, background 140ms ease !important; | |
| } | |
| .dt-tool button:hover, | |
| button.dt-tool:hover { | |
| border-color:var(--dt-primary) !important; | |
| background:var(--dt-primary-soft) !important; | |
| } | |
| .dt-tool button:active, | |
| button.dt-tool:active { | |
| transform:scale(.98); | |
| } | |
| .dt-tool-primary button, | |
| button.dt-tool-primary { | |
| background:var(--dt-primary) !important; | |
| border-color:var(--dt-primary) !important; | |
| color:#fff !important; | |
| } | |
| html[data-dt-theme="contrast"] .dt-tool-primary button, | |
| html[data-dt-theme="contrast"] button.dt-tool-primary { | |
| color:#000 !important; | |
| } | |
| .dt-editor-fields { | |
| display:flex !important; | |
| flex-wrap:wrap !important; | |
| gap:10px !important; | |
| align-items:end !important; | |
| padding:8px 0 !important; | |
| } | |
| .dt-editor-actions { | |
| padding:8px 12px 12px !important; | |
| } | |
| .dt-editor-actions > button { | |
| font-weight:700 !important; | |
| } | |
| .dt-page-nav { | |
| justify-content:space-between !important; | |
| } | |
| .dt-page-nav > * { | |
| flex:1 1 180px !important; | |
| } | |
| .dt-range input[type="range"] { | |
| accent-color:var(--dt-primary); | |
| } | |
| .dt-download { | |
| border:1px dashed var(--dt-border) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-surface-2) !important; | |
| } | |
| .dt-audio-field { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-surface-2) !important; | |
| } | |
| /* إبراز الاختيارات الحالية بطريقة قريبة من Multi Selection Pattern */ | |
| .gradio-container input[type="radio"]:checked + span, | |
| .gradio-container input[type="checkbox"]:checked + span { | |
| color:var(--dt-primary) !important; | |
| font-weight:700 !important; | |
| } | |
| .gradio-container label:has(input[type="radio"]:checked), | |
| .gradio-container label:has(input[type="checkbox"]:checked) { | |
| border-color:var(--dt-primary) !important; | |
| background:var(--dt-primary-soft) !important; | |
| border-radius:10px !important; | |
| } | |
| /* الحالة المرئية */ | |
| .dt-status { | |
| position:relative; | |
| } | |
| .dt-status::before { | |
| content:""; | |
| position:absolute; | |
| top:10px; | |
| right:8px; | |
| width:7px; | |
| height:7px; | |
| border-radius:50%; | |
| background:var(--dt-info); | |
| z-index:2; | |
| } | |
| /* Toast بصري؛ الإعلان الصوتي يستمر عبر aria-live الحالي لمنع التكرار */ | |
| .dt-toast-container { | |
| position:fixed; | |
| left:16px; | |
| bottom:16px; | |
| z-index:9999; | |
| display:grid; | |
| gap:8px; | |
| width:min(380px, calc(100vw - 32px)); | |
| pointer-events:none; | |
| } | |
| .dt-toast { | |
| padding:12px 14px; | |
| border-radius:var(--dt-radius); | |
| color:#fff; | |
| box-shadow:var(--dt-shadow); | |
| font-weight:700; | |
| opacity:0; | |
| transform:translateY(8px); | |
| animation:dtToastIn .18s ease forwards; | |
| } | |
| .dt-toast.info { background:var(--dt-info); } | |
| .dt-toast.success { background:var(--dt-success); } | |
| .dt-toast.warning { background:var(--dt-warning); } | |
| .dt-toast.error { background:var(--dt-danger); } | |
| @keyframes dtToastIn { | |
| to { opacity:1; transform:none; } | |
| } | |
| @media (max-width:760px) { | |
| .dt-editor-text textarea { | |
| min-height:340px !important; | |
| font-size:1rem !important; | |
| padding:12px !important; | |
| } | |
| .dt-editor-fields > *, | |
| .dt-quality-toolbar > * { | |
| flex:1 1 100% !important; | |
| min-width:0 !important; | |
| } | |
| .dt-page-nav > * { | |
| flex:1 1 calc(50% - 6px) !important; | |
| } | |
| .dt-toast-container { | |
| left:8px; | |
| bottom:8px; | |
| width:calc(100vw - 16px); | |
| } | |
| } | |
| /* وصول قارئات الشاشة */ | |
| .dt-sr-only { | |
| position:absolute !important; | |
| width:1px !important; | |
| height:1px !important; | |
| padding:0 !important; | |
| margin:-1px !important; | |
| overflow:hidden !important; | |
| clip:rect(0,0,0,0) !important; | |
| white-space:nowrap !important; | |
| border:0 !important; | |
| } | |
| .dt-status, .dt-summary { scroll-margin-top:12px; } | |
| /* ========================================================= | |
| Voice Studio — توليد النصوص مقابل تحويل الكتب | |
| ========================================================= */ | |
| .dt-route-card { | |
| border:1px solid var(--dt-border); | |
| border-right:5px solid var(--dt-primary); | |
| border-radius:var(--dt-radius-lg); | |
| background:linear-gradient(135deg,var(--dt-surface),var(--dt-surface-2)); | |
| box-shadow:var(--dt-shadow); | |
| padding:14px 16px; | |
| margin:8px 0 12px; | |
| } | |
| .dt-generator-card { border-right-color:var(--dt-info); } | |
| .dt-book-convert-card { border-right-color:var(--dt-success); } | |
| .dt-route-kicker { font-weight:800; color:var(--dt-primary); margin-bottom:4px; } | |
| .dt-route-title { font-size:1.06rem; font-weight:800; color:var(--dt-text); } | |
| .dt-route-note { color:var(--dt-muted); margin-top:5px; line-height:1.65; } | |
| .dt-generator-layout, | |
| .dt-book-layout, | |
| .dt-audio-result-card { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface) !important; | |
| box-shadow:var(--dt-shadow) !important; | |
| padding:12px !important; | |
| gap:12px !important; | |
| } | |
| .dt-engine-options { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius-lg) !important; | |
| background:var(--dt-surface-2) !important; | |
| padding:10px !important; | |
| } | |
| .dt-engine-options > div { margin-bottom:7px !important; } | |
| .dt-clone-panel { | |
| border:1px dashed var(--dt-primary) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-primary-soft) !important; | |
| padding:9px !important; | |
| } | |
| .dt-action-generate button, | |
| button.dt-action-generate { | |
| min-height:48px !important; | |
| font-weight:800 !important; | |
| font-size:1rem !important; | |
| background:var(--dt-info) !important; | |
| border-color:var(--dt-info) !important; | |
| color:#fff !important; | |
| } | |
| .dt-action-convert button, | |
| button.dt-action-convert { | |
| min-height:48px !important; | |
| font-weight:800 !important; | |
| font-size:1rem !important; | |
| background:var(--dt-success) !important; | |
| border-color:var(--dt-success) !important; | |
| color:#fff !important; | |
| } | |
| .dt-audio-result-card audio { | |
| width:100% !important; | |
| min-height:54px !important; | |
| accent-color:var(--dt-primary); | |
| } | |
| .dt-audio-result-card [class*="waveform"], | |
| .dt-audio-result-card .ui-waveform-host { | |
| border:1px solid var(--dt-border) !important; | |
| border-radius:var(--dt-radius) !important; | |
| background:var(--dt-surface-2) !important; | |
| } | |
| /* Dropdowns: keep the selected value compact; options open only when requested. */ | |
| .gradio-container [role="listbox"] { max-height:320px !important; overflow:auto !important; } | |
| .gradio-container select, | |
| .gradio-container input, | |
| .gradio-container textarea { border-radius:10px !important; } | |
| @media (max-width:760px) { | |
| .dt-generator-layout, | |
| .dt-book-layout, | |
| .dt-audio-result-card { padding:8px !important; } | |
| .dt-route-card { padding:11px 12px; } | |
| .dt-action-generate button, | |
| button.dt-action-generate, | |
| .dt-action-convert button, | |
| button.dt-action-convert { width:100% !important; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } | |
| } | |
| """ | |
| APP_HEAD = r""" | |
| <script> | |
| (function(){ | |
| const KEY='aiocr-radar-ui-theme'; | |
| const ERROR_WORDS=['خطأ','فشل','فشلت','تعذر','غير موجود','error','failed','failure','exception']; | |
| const SUCCESS_WORDS=['تم ','نجح','جاهز','اكتمل','حُفظ','حفظ','✅','success','completed']; | |
| function debounce(fn,delay){ | |
| let timer=null; | |
| return function(){ | |
| const args=arguments; | |
| clearTimeout(timer); | |
| timer=setTimeout(function(){fn.apply(null,args);},delay||180); | |
| }; | |
| } | |
| function toastType(text){ | |
| const lower=(text||'').toLowerCase(); | |
| if(ERROR_WORDS.some(function(w){return lower.includes(w.toLowerCase());})) return 'error'; | |
| if(SUCCESS_WORDS.some(function(w){return lower.includes(w.toLowerCase());})) return 'success'; | |
| if(lower.includes('تحذير') || lower.includes('⚠')) return 'warning'; | |
| return 'info'; | |
| } | |
| function showToast(message){ | |
| const text=(message||'').trim(); | |
| if(!text) return; | |
| const container=document.getElementById('dt-toast-container'); | |
| if(!container) return; | |
| const node=document.createElement('div'); | |
| node.className='dt-toast '+toastType(text); | |
| node.setAttribute('aria-hidden','true'); | |
| node.textContent=text.length>220 ? text.slice(0,217)+'…' : text; | |
| container.appendChild(node); | |
| window.setTimeout(function(){node.remove();},3000); | |
| } | |
| function applyTheme(name){ | |
| const allowed=['light','dark','contrast']; | |
| if(!allowed.includes(name)) name='light'; | |
| document.documentElement.setAttribute('data-dt-theme',name); | |
| try{localStorage.setItem(KEY,name);}catch(e){} | |
| document.querySelectorAll('[data-dt-theme-choice]').forEach(function(btn){ | |
| const active=btn.getAttribute('data-dt-theme-choice')===name; | |
| btn.classList.toggle('active',active); | |
| btn.setAttribute('aria-pressed',active ? 'true' : 'false'); | |
| }); | |
| } | |
| function announce(message, assertive){ | |
| const text=(message||'').trim(); | |
| if(!text) return; | |
| const id=assertive ? 'dt-live-assertive' : 'dt-live-polite'; | |
| const node=document.getElementById(id); | |
| if(!node) return; | |
| node.textContent=''; | |
| window.setTimeout(function(){ node.textContent=text; },35); | |
| } | |
| function isError(text){ | |
| const lower=(text||'').toLowerCase(); | |
| return ERROR_WORDS.some(function(w){return lower.includes(w.toLowerCase());}); | |
| } | |
| const lastValues=new WeakMap(); | |
| const pollingFields=new WeakSet(); | |
| function enhanceBox(box){ | |
| if(!box) return; | |
| box.setAttribute('role','status'); | |
| box.setAttribute('aria-live','polite'); | |
| box.setAttribute('aria-atomic','true'); | |
| const field=box.querySelector('textarea, input'); | |
| if(!field || pollingFields.has(field)) return; | |
| pollingFields.add(field); | |
| field.setAttribute('aria-readonly','true'); | |
| lastValues.set(field,field.value||''); | |
| window.setInterval(function(){ | |
| const current=(field.value||'').trim(); | |
| const previous=(lastValues.get(field)||'').trim(); | |
| if(current!==previous){ | |
| lastValues.set(field,current); | |
| if(current){ | |
| announce(current,isError(current)); | |
| if(box.classList.contains('dt-toast-source')) showToast(current); | |
| } | |
| } | |
| },300); | |
| } | |
| function enhanceAll(root){ | |
| if(!root || !root.querySelectorAll) return; | |
| if(root.matches && (root.matches('.dt-status') || root.matches('.dt-summary'))){ | |
| enhanceBox(root); | |
| } | |
| root.querySelectorAll('.dt-status, .dt-summary').forEach(enhanceBox); | |
| } | |
| function captureAlerts(root){ | |
| if(!root || !root.querySelectorAll) return; | |
| const nodes=[]; | |
| if(root.matches && root.matches('[role="alert"]')) nodes.push(root); | |
| root.querySelectorAll('[role="alert"]').forEach(function(x){nodes.push(x);}); | |
| nodes.forEach(function(node){ | |
| if(node.id==='dt-live-assertive') return; | |
| const text=(node.innerText||node.textContent||'').trim(); | |
| if(text) announce(text,true); | |
| }); | |
| } | |
| function syncSelectedState(root){ | |
| const scope=(root && root.querySelectorAll) ? root : document; | |
| scope.querySelectorAll('.tab-nav button').forEach(function(btn){ | |
| btn.setAttribute('aria-selected',btn.classList.contains('selected') ? 'true' : 'false'); | |
| }); | |
| scope.querySelectorAll('.dt-editor-text textarea').forEach(function(field){ | |
| field.setAttribute('spellcheck','false'); | |
| field.setAttribute('autocomplete','off'); | |
| }); | |
| } | |
| const syncSelectedStateDebounced=debounce(function(){syncSelectedState(document);},120); | |
| function initAccessibility(){ | |
| enhanceAll(document); | |
| syncSelectedState(document); | |
| const observer=new MutationObserver(function(mutations){ | |
| mutations.forEach(function(m){ | |
| m.addedNodes.forEach(function(node){ | |
| if(node.nodeType!==1) return; | |
| enhanceAll(node); | |
| captureAlerts(node); | |
| }); | |
| }); | |
| syncSelectedStateDebounced(); | |
| }); | |
| observer.observe(document.body,{childList:true,subtree:true}); | |
| } | |
| try{applyTheme(localStorage.getItem(KEY)||'light');}catch(e){applyTheme('light');} | |
| document.addEventListener('click',function(ev){ | |
| const btn=ev.target.closest('[data-dt-theme-choice]'); | |
| if(btn){ | |
| ev.preventDefault(); | |
| applyTheme(btn.getAttribute('data-dt-theme-choice')); | |
| announce('تم تغيير مظهر الواجهة إلى '+(btn.getAttribute('aria-label')||''),false); | |
| } | |
| }); | |
| if(document.readyState==='loading'){ | |
| document.addEventListener('DOMContentLoaded',initAccessibility); | |
| }else{ | |
| initAccessibility(); | |
| } | |
| window.setTimeout(function(){ | |
| try{applyTheme(localStorage.getItem(KEY)||'light');}catch(e){} | |
| enhanceAll(document); | |
| syncSelectedState(document); | |
| },800); | |
| })(); | |
| </script> | |
| """ | |
| APP_HEADER_HTML = r""" | |
| <div id="dt-live-polite" class="dt-sr-only" role="status" aria-live="polite" aria-atomic="true"></div> | |
| <div id="dt-live-assertive" class="dt-sr-only" role="alert" aria-live="assertive" aria-atomic="true"></div> | |
| <div id="dt-toast-container" class="dt-toast-container" aria-hidden="true"></div> | |
| <div class="dt-hero" dir="rtl"> | |
| <div> | |
| <h1>🎙️ Aiocr Radar — محطة الصوت والكتب</h1> | |
| <p>توليد النصوص القصيرة وتحويل الكتب في مسارين واضحين، مع إدارة المحركات والصوت والتقارير.</p> | |
| <div class="dt-manager-chips" aria-label="المدراء الفعالون"> | |
| <span class="dt-chip">SystemManager</span> | |
| <span class="dt-chip">BookPreparationManager</span> | |
| <span class="dt-chip">SmartEditorManager</span> | |
| <span class="dt-chip">TextQualityManager</span> | |
| <span class="dt-chip">AIManager</span> | |
| <span class="dt-chip">AITaskManager</span> | |
| <span class="dt-chip">VoiceManager</span> | |
| <span class="dt-chip">StorageManager</span> | |
| <span class="dt-chip">ReportManager</span> | |
| </div> | |
| </div> | |
| <div class="dt-theme-picker" role="group" aria-label="مظهر الواجهة"> | |
| <button class="dt-theme-btn" type="button" data-dt-theme-choice="light" aria-label="الوضع الفاتح" title="فاتح">☀️</button> | |
| <button class="dt-theme-btn" type="button" data-dt-theme-choice="dark" aria-label="الوضع الداكن" title="داكن">🌙</button> | |
| <button class="dt-theme-btn" type="button" data-dt-theme-choice="contrast" aria-label="تباين عالٍ" title="تباين عالٍ">◐</button> | |
| </div> | |
| </div> | |
| """ | |