File size: 3,531 Bytes
58f3290 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!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>
// Capture console.log/warn to show on page
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>
|