|
<link rel="stylesheet" href="/static/style.css"> |
|
<!DOCTYPE html> |
|
<html lang="ar" dir="rtl"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>بوت تعليمي</title> |
|
<link rel="stylesheet" href="/static/style.css" /> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>مرحبا بك في بوت التعليم</h1> |
|
</header> |
|
<main> |
|
<p>هذا بوت يستخدم اللغة العربية الفصحى فقط.</p> |
|
<p>يمكنك طرح الأسئلة وسوف أجيب عليها بأمثلة بسيطة وسهلة الفهم.</p> |
|
|
|
<form id="chat-form"> |
|
<label for="pregunta">اكتب سؤالك هنا:</label><br /> |
|
<textarea id="pregunta" name="pregunta" rows="3" cols="50"></textarea><br /> |
|
<button type="submit">اسأل</button> |
|
</form> |
|
|
|
<h3>الإجابة:</h3> |
|
<div id="respuesta" style="white-space: pre-wrap; background:#fff; padding:10px; border-radius:5px; min-height:100px;"></div> |
|
</main> |
|
|
|
<script> |
|
document.getElementById("chat-form").addEventListener("submit", async function(e) { |
|
e.preventDefault(); |
|
const pregunta = document.getElementById("pregunta").value; |
|
const respuestaDiv = document.getElementById("respuesta"); |
|
respuestaDiv.textContent = "جارٍ المعالجة..."; |
|
const formData = new FormData(); |
|
formData.append("pregunta", pregunta); |
|
|
|
const response = await fetch("/preguntar", { |
|
method: "POST", |
|
body: formData |
|
}); |
|
const data = await response.json(); |
|
respuestaDiv.textContent = data.respuesta; |
|
}); |
|
</script> |
|
<footer> |
|
<small>حقوق النشر © 2025</small> |
|
</footer> |
|
</body> |
|
</html> |
|
|