| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Bayan Inline Engine — Test</title> |
| <style> |
| body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #1a1a2e; color: #f0f0f5; padding: 40px; } |
| h1 { color: #818cf8; margin-bottom: 20px; } |
| textarea { width: 100%; height: 150px; font-size: 16px; padding: 12px; border-radius: 8px; |
| border: 1px solid #3a3a4d; background: #22222e; color: #f0f0f5; direction: rtl; } |
| .field-group { margin-bottom: 30px; } |
| label { display: block; margin-bottom: 8px; color: #9898ad; } |
| [contenteditable] { width: 100%; min-height: 100px; font-size: 16px; padding: 12px; border-radius: 8px; |
| border: 1px solid #3a3a4d; background: #22222e; color: #f0f0f5; direction: rtl; outline: none; } |
| [contenteditable]:focus { border-color: #6366f1; } |
| .instructions { background: #22222e; padding: 16px; border-radius: 8px; margin-bottom: 30px; font-size: 13px; color: #9898ad; } |
| .instructions code { background: #2a2a38; padding: 2px 6px; border-radius: 4px; color: #818cf8; } |
| </style> |
| </head> |
| <body> |
| <h1>🧪 اختبار محرك بيان المضمّن (Phase 6)</h1> |
|
|
| <div class="instructions"> |
| <p><strong>كيفية الاختبار:</strong></p> |
| <ol> |
| <li>اكتب أو الصق نصاً عربياً يحتوي على أخطاء في أي حقل أدناه</li> |
| <li>انتظر ثانية واحدة — ستظهر أيقونة بيان الصغيرة</li> |
| <li>ستظهر الأخطاء بخطوط حمراء/برتقالية/زرقاء</li> |
| <li>انقر على كلمة مُعلّمة لرؤية الاقتراح</li> |
| </ol> |
| <p>نص اختباري: <code>انا ذهبت الي المدرسه اليوم وكان الجو جميل جدا</code></p> |
| </div> |
|
|
| <div class="field-group"> |
| <label>📝 حقل نصي (textarea)</label> |
| <textarea id="test-textarea" placeholder="اكتب نصاً عربياً هنا..."></textarea> |
| </div> |
|
|
| <div class="field-group"> |
| <label>✏️ حقل قابل للتحرير (contenteditable)</label> |
| <div contenteditable="true" id="test-contenteditable"></div> |
| </div> |
|
|
| <div class="field-group"> |
| <label>🔤 حقل إدخال (input)</label> |
| <input type="text" id="test-input" style="width:100%;font-size:16px;padding:10px;border-radius:8px;border:1px solid #3a3a4d;background:#22222e;color:#f0f0f5;direction:rtl;" placeholder="اكتب هنا..."> |
| </div> |
|
|
| <div id="console-log" style="margin-top: 30px; padding: 12px; background: #0f0f14; border-radius: 8px; font-family: monospace; font-size: 11px; color: #6b6b80; max-height: 200px; overflow-y: auto;"> |
| <div>Bayan Inline Test Page Ready</div> |
| </div> |
|
|
| <script> |
| |
| const logDiv = document.getElementById('console-log'); |
| const origLog = console.log; |
| const origWarn = console.warn; |
| console.log = (...args) => { |
| origLog(...args); |
| if (args[0]?.includes?.('[Bayan')) { |
| const el = document.createElement('div'); |
| el.textContent = args.join(' '); |
| el.style.color = '#22c55e'; |
| logDiv.appendChild(el); |
| logDiv.scrollTop = logDiv.scrollHeight; |
| } |
| }; |
| console.warn = (...args) => { |
| origWarn(...args); |
| const el = document.createElement('div'); |
| el.textContent = args.join(' '); |
| el.style.color = '#f59e0b'; |
| logDiv.appendChild(el); |
| logDiv.scrollTop = logDiv.scrollHeight; |
| }; |
| </script> |
| </body> |
| </html> |
|
|
