| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <title>بيان — لوحة التحليل</title> |
| <link rel="stylesheet" href="../shared/css/tokens.css"> |
| <link rel="stylesheet" href="sidepanel.css"> |
| </head> |
| <body> |
| |
| |
| |
| <header class="sp-header"> |
| <a href="https://bayan10-bayan-api.hf.space/" target="_blank" rel="noopener noreferrer" class="sp-header-brand" style="text-decoration:none;color:inherit;"> |
| <img src="../assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;"> |
| <div style="height:24px; width:2px; background-color:var(--color-border-strong, #d1d5db); border-radius:9999px; flex-shrink:0;"></div> |
| <span class="sp-header-title">بيان</span> |
| </a> |
|
|
| <div style="display: flex; align-items: center; gap: 12px;"> |
| <button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button"> |
| <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg> |
| <svg class="theme-icon-moon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg> |
| </button> |
| <div class="sp-header-status" id="status-indicator"> |
| <span class="sp-status-dot"></span> |
| <span class="sp-status-text" id="status-text">جاري الاتصال...</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| |
| |
| <nav class="sp-tabs" role="tablist"> |
| <button class="sp-tab active" role="tab" aria-selected="true" data-tab="correct" id="tab-correct"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| تصحيح |
| </button> |
| <button class="sp-tab" role="tab" aria-selected="false" data-tab="summarize" id="tab-summarize"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h10M4 18h14"/></svg> |
| تلخيص |
| </button> |
| <button class="sp-tab" role="tab" aria-selected="false" data-tab="dialect" id="tab-dialect"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg> |
| تحويل للفصحى |
| </button> |
| <button class="sp-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg> |
| تدقيق النص القرآني |
| </button> |
| </nav> |
|
|
| |
| |
| |
| <section class="sp-panel active" id="panel-correct" role="tabpanel"> |
| |
| <div class="sp-input-group"> |
| <div class="sp-label-row"> |
| <label class="sp-label" for="input-text">أدخل النص العربي</label> |
| <div style="display:flex; gap:4px;"> |
| <button class="sp-btn-icon" id="btn-apply-page" type="button" title="تطبيق في الصفحة"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| </button> |
| <button class="sp-btn-icon" id="btn-copy-text" type="button" title="نسخ النص"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg> |
| </button> |
| </div> |
| </div> |
| <textarea |
| id="input-text" |
| class="sp-textarea" |
| dir="rtl" |
| placeholder="أدخل النص العربي أو اختر نصاً من أي صفحة..." |
| rows="4" |
| maxlength="5000" |
| ></textarea> |
| <div class="sp-meta-row"> |
| <span class="sp-char-count"><span id="char-count">٠</span> حرف</span> |
| <span class="sp-word-count"><span id="word-count">٠</span> كلمة</span> |
| </div> |
| </div> |
|
|
| |
| <div class="sp-actions"> |
| <button class="sp-btn sp-btn-primary" id="btn-correct"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg> |
| تحليل وتصحيح |
| </button> |
| <button class="sp-btn sp-btn-ghost" id="btn-clear">مسح</button> |
| </div> |
|
|
| |
| <div class="sp-suggestions is-hidden" id="suggestions-section"> |
| <span class="sp-suggestions-title">الاقتراحات</span> |
| <div class="sp-suggestions-list" id="suggestions-list" role="list"></div> |
| <button class="sp-apply-all-btn is-hidden" id="btn-apply-all" type="button">تطبيق الكل</button> |
| </div> |
|
|
| |
| <div class="sp-score is-hidden" id="score-section"> |
| <span class="sp-score-title">تقييم الكتابة</span> |
| <div class="sp-score-ring"> |
| <svg viewBox="0 0 160 160" width="120" height="120"> |
| <defs> |
| <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| <stop offset="0%" stop-color="var(--color-primary, #6BA3E0)"/> |
| <stop offset="100%" stop-color="var(--color-secondary, #A594E8)"/> |
| </linearGradient> |
| </defs> |
| <circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/> |
| <circle cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10" |
| stroke-dasharray="440" stroke-dashoffset="440" stroke-linecap="round" |
| transform="rotate(-90 80 80)" id="score-circle"/> |
| </svg> |
| <span class="sp-score-value" id="score-value">--</span> |
| </div> |
| <span class="sp-score-hint" id="score-hint">ابدأ الكتابة لرؤية تقييمك</span> |
| <div class="sp-score-counts"> |
| <span class="sp-count sp-count-spelling"><span id="count-spelling">٠</span> إملائي</span> |
| <span class="sp-count sp-count-grammar"><span id="count-grammar">٠</span> نحوي</span> |
| <span class="sp-count sp-count-punctuation"><span id="count-punctuation">٠</span> ترقيم</span> |
| </div> |
| </div> |
|
|
| |
| <div class="sp-timing is-hidden" id="timing-section"> |
| <span id="timing-text"></span> |
| </div> |
| </section> |
|
|
| |
| |
| |
| <section class="sp-panel" id="panel-summarize" role="tabpanel"> |
| |
| <div class="sp-input-group"> |
| <label class="sp-label" for="summary-input-text">أدخل النص للتلخيص</label> |
| <textarea |
| id="summary-input-text" |
| class="sp-textarea" |
| dir="rtl" |
| placeholder="الصق النص المراد تلخيصه..." |
| rows="4" |
| maxlength="5000" |
| ></textarea> |
| <div class="sp-input-meta-row"> |
| <span class="sp-input-meta"><span id="summary-word-count-input">٠</span> كلمة</span> |
| <label class="sp-import-btn" title="استيراد ملف"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg> |
| استيراد ملف |
| <input type="file" id="summary-import-input" class="sp-sr-only" accept=".txt,.docx"> |
| </label> |
| </div> |
| </div> |
|
|
| |
| <div class="sp-mode-toggle"> |
| <button type="button" class="sp-mode-btn active" id="summary-mode-paragraph" data-mode="paragraph"> |
| <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg> |
| فقرة |
| </button> |
| <button type="button" class="sp-mode-btn" id="summary-mode-bullets" data-mode="bullets"> |
| <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg> |
| نقاط |
| </button> |
| </div> |
|
|
| |
| <div class="sp-length-selector"> |
| <label class="sp-label">طول الملخص</label> |
| <div class="sp-radio-group"> |
| <label class="sp-radio"><input type="radio" name="summary-length" value="1"> قصير</label> |
| <label class="sp-radio"><input type="radio" name="summary-length" value="2" checked> متوسط</label> |
| <label class="sp-radio"><input type="radio" name="summary-length" value="3"> طويل</label> |
| </div> |
| </div> |
|
|
| |
| <div class="sp-actions"> |
| <button class="sp-btn sp-btn-primary" id="btn-summarize"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h10M4 18h14"/></svg> |
| تلخيص |
| </button> |
| </div> |
|
|
| |
| <div class="sp-result is-hidden" id="summary-result-section"> |
| |
| <div class="sp-summary-stats is-hidden" id="summary-stats"> |
| <div class="sp-summary-stat"><span>كلمات الملخص:</span> <span class="sp-summary-stat-value" id="summary-word-count">٠</span></div> |
| <div class="sp-summary-stat"><span>نسبة الاختصار:</span> <span class="sp-summary-stat-value" id="summary-compression">٠٪</span></div> |
| </div> |
| <div class="sp-result-header"> |
| <span class="sp-result-title">الملخص</span> |
| <div class="sp-result-actions"> |
| <button class="sp-btn-icon" id="btn-apply-summary" type="button" title="تطبيق في الصفحة"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| </button> |
| <button class="sp-btn-icon" id="btn-copy-summary" type="button" title="نسخ"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg> |
| </button> |
| <div class="sp-export-dropdown" id="summary-export-wrap"> |
| <button class="sp-btn-icon" id="btn-export-summary" type="button" title="تصدير"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg> |
| </button> |
| <div class="sp-export-menu is-hidden" id="summary-export-menu"> |
| <button type="button" class="sp-export-item" data-format="txt">نصي (.txt)</button> |
| <button type="button" class="sp-export-item" data-format="docx">Word (.docx)</button> |
| <button type="button" class="sp-export-item" data-format="pdf">PDF (.pdf)</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sp-result-text" id="summary-text" dir="rtl"></div> |
| </div> |
| </section> |
|
|
| |
| |
| |
| <section class="sp-panel" id="panel-dialect" role="tabpanel"> |
| <div class="sp-input-group"> |
| <label class="sp-label" for="dialect-input-text">تحويل اللهجات للفصحى</label> |
| <p class="sp-description">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p> |
| <textarea |
| id="dialect-input-text" |
| class="sp-textarea" |
| dir="rtl" |
| placeholder="اكتب النص باللهجة هنا..." |
| rows="4" |
| maxlength="5000" |
| ></textarea> |
| <div class="sp-meta-row"> |
| <span class="sp-char-count"><span id="dialect-char-count">٠</span> حرف</span> |
| </div> |
| </div> |
| <div class="sp-actions"> |
| <button class="sp-btn sp-btn-primary" id="btn-dialect"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg> |
| تحويل للفصحى |
| </button> |
| </div> |
| <div class="sp-result is-hidden" id="dialect-result-section"> |
| <div class="sp-result-header"> |
| <span class="sp-result-title" style="color: var(--color-primary, #6BA3E0);">✓ النص بالعربية الفصحى</span> |
| <div class="sp-result-actions"> |
| <button class="sp-btn-icon" id="btn-apply-dialect" type="button" title="تطبيق في الصفحة"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| </button> |
| <button class="sp-btn-icon" id="btn-copy-dialect" type="button" title="نسخ"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg> |
| </button> |
| </div> |
| </div> |
| <div class="sp-result-text" id="dialect-text" dir="rtl"></div> |
| </div> |
| </section> |
|
|
| |
| |
| |
| <section class="sp-panel" id="panel-quran" role="tabpanel"> |
| <div class="sp-input-group"> |
| <label class="sp-label" for="quran-input-text">تدقيق الآيات القرآنية</label> |
| <textarea |
| id="quran-input-text" |
| class="sp-textarea" |
| dir="rtl" |
| placeholder="أدخل آية أو جزءاً منها..." |
| rows="4" |
| maxlength="2000" |
| ></textarea> |
| <div class="sp-meta-row"> |
| <span class="sp-char-count"><span id="quran-char-count">٠</span> حرف</span> |
| </div> |
| </div> |
| <div class="sp-actions"> |
| <button class="sp-btn sp-btn-primary" id="btn-quran"> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> |
| بحث وتدقيق |
| </button> |
| </div> |
|
|
| |
| <div class="sp-quran-result is-hidden" id="quran-result-section"> |
| <div id="quran-match-list" class="sp-quran-match-list"></div> |
| </div> |
| </section> |
|
|
| |
| |
| |
| <div class="sp-loading is-hidden" id="loading-overlay"> |
| <div class="sp-spinner"></div> |
| <span id="loading-text">جارٍ التحليل...</span> |
| </div> |
|
|
| |
| <div class="sp-toast" id="toast"></div> |
|
|
| |
| |
| |
| <script src="../shared/vendor/mammoth.browser.min.js"></script> |
| <script src="../shared/vendor/docx.umd.js"></script> |
| <script src="../shared/vendor/html2pdf.bundle.min.js"></script> |
| <script src="../shared/constants.js"></script> |
| <script src="../shared/config.js"></script> |
| <script src="../shared/bayan-renderer.js"></script> |
| <script src="../shared/bayan-ui.js"></script> |
| <script src="../shared/bayan-patches.js"></script> |
| <script src="../shared/bayan-api.js"></script> |
| <script src="sidepanel.js"></script> |
| </body> |
| </html> |
