Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سؤال وجواب - اليوم الوطني السعودي</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0b5 0%, #059669 100%); | |
| } | |
| .chat-bubble { | |
| border-radius: 1.5rem; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| border-bottom-right-radius: 0.25rem; | |
| background-color: #e2e8f0; | |
| } | |
| .bot-bubble { | |
| border-bottom-left-radius: 0.25rem; | |
| background-color: #ffffff; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .chip { | |
| transition: all 0.2s ease; | |
| } | |
| .chip:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-2xl bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="gradient-bg text-white p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold">روبوت اليوم الوطني السعودي</h1> | |
| <p class="text-white/90 mt-1">اسأل عن تاريخ المملكة وأبرز الأحداث</p> | |
| </div> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i data-feather="flag" class="text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Questions --> | |
| <div class="p-4 bg-gray-50 border-b"> | |
| <h2 class="text-gray-600 mb-2 text-sm font-medium">أسئلة سريعة</h2> | |
| <div class="flex flex-wrap gap-2"> | |
| <button onclick="askQuestion('كم سنة المملكة السعودية؟')" class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm font-medium hover:bg-gray-100"> | |
| كم سنة المملكة؟ | |
| </button> | |
| <button onclick="askQuestion('من هو مؤسس المملكة؟')" class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm font-medium hover:bg-gray-100"> | |
| مؤسس المملكة | |
| </button> | |
| <button onclick="askQuestion('متى تم توحيد المملكة؟')" class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm font-medium hover:bg-gray-100"> | |
| تاريخ التوحيد | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Area --> | |
| <div id="chat" class="h-96 overflow-y-auto p-4 space-y-3"></div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t bg-gray-50"> | |
| <div class="flex gap-2"> | |
| <input id="questionInput" type="text" placeholder="اكتب سؤالك هنا..." | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"> | |
| <button onclick="sendQuestion()" class="gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition"> | |
| <i data-feather="send" class="inline mr-1"></i> إرسال | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| function normalizeArabic(text) { | |
| if (!text) return ""; | |
| return text | |
| .toLowerCase() | |
| .replace(/[\u064B-\u0652]/g, "") | |
| .replace(/[\u0640]/g, "") | |
| .replace(/[إأآٱ]/g, "ا") | |
| .replace(/ى/g, "ي") | |
| .replace(/ؤ/g, "و") | |
| .replace(/ئ/g, "ي") | |
| .replace(/ة/g, "ه") | |
| .trim(); | |
| } | |
| const knowledgeBase = [ | |
| { | |
| patterns: [ | |
| "كم سنه المملكه", | |
| "عمر المملكه", | |
| "كم عمر السعوديه", | |
| "كم سنه السعوديه", | |
| "كم سنه المملكة السعودية" | |
| ], | |
| answer: "تحتفل المملكة العربية السعودية هذا العام بالذكرى الـ92 لتوحيد المملكة تحت قيادة الملك عبدالعزيز آل سعود رحمه الله." | |
| }, | |
| { | |
| patterns: [ | |
| "صاحب اول الملك", | |
| "اول ملك", | |
| "من اول ملك", | |
| "من صاحب اول الملك", | |
| "صاحب اول المملك", | |
| "مؤسس المملكة" | |
| ], | |
| answer: "الملك عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو مؤسس المملكة العربية السعودية وأول ملوكها. قام بتوحيد المملكة في عام 1932م." | |
| }, | |
| { | |
| patterns: [ | |
| "متى التاريخ التوحيد المملكه", | |
| "متى تاريخ توحيد المملكه", | |
| "في اي سنه تم توحيد المملكه", | |
| "متى التوحيد", | |
| "تاريخ التوحيد", | |
| "متى التاريخ التوحيد المملكة" | |
| ], | |
| answer: "تم توحيد المملكة العربية السعودية في 23 سبتمبر 1932م الموافق 21 جمادى الأولى 1351هـ بموجب مرسوم ملكي أصدره الملك عبدالعزيز آل سعود رحمه الله." | |
| } | |
| ]; | |
| function findAnswer(question) { | |
| const normalizedQuestion = normalizeArabic(question); | |
| for (const item of knowledgeBase) { | |
| for (const pattern of item.patterns) { | |
| if (normalizedQuestion.includes(normalizeArabic(pattern)) || | |
| normalizeArabic(pattern).includes(normalizedQuestion)) { | |
| return item.answer; | |
| } | |
| } | |
| } | |
| if (normalizedQuestion.match(/(عمر|سنه).*(مملك|سعوديه)/)) { | |
| return "تحتفل المملكة العربية السعودية هذا العام بالذكرى الـ92 لتوحيد المملكة."; | |
| } | |
| if (normalizedQuestion.match(/(اول|اولى|مؤسس).*(ملك|الملك|المملكة)/)) { | |
| return "الملك عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو مؤسس المملكة العربية السعودية."; | |
| } | |
| if (normalizedQuestion.match(/(تاريخ|متى).*(توحيد|تأسيس|تاسيس)/)) { | |
| return "تم توحيد المملكة في 23 سبتمبر 1932م."; | |
| } | |
| return "عذرًا، لم أفهم سؤالك. يمكنك طرح أسئلة عن تاريخ المملكة مثل:<br>" + | |
| "- كم سنة المملكة السعودية؟<br>" + | |
| "- من هو مؤسس المملكة؟<br>" + | |
| "- متى تم توحيد المملكة؟"; | |
| } | |
| function addMessage(text, isUser = false) { | |
| const chat = document.getElementById('chat'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `px-4 py-3 chat-bubble ${isUser ? 'user-bubble' : 'bot-bubble'}`; | |
| bubble.innerHTML = text; | |
| messageDiv.appendChild(bubble); | |
| chat.appendChild(messageDiv); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| function askQuestion(question) { | |
| document.getElementById('questionInput').value = question; | |
| sendQuestion(); | |
| } | |
| function sendQuestion() { | |
| const input = document.getElementById('questionInput'); | |
| const question = input.value.trim(); | |
| if (!question) return; | |
| addMessage(question, true); | |
| input.value = ''; | |
| setTimeout(() => { | |
| const answer = findAnswer(question); | |
| addMessage(answer, false); | |
| }, 500); | |
| } | |
| document.getElementById('questionInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendQuestion(); | |
| } | |
| }); | |
| // Add welcome message | |
| setTimeout(() => { | |
| addMessage("مرحبًا بك في روبوت اليوم الوطني السعودي. يمكنك طرح أسئلة عن تاريخ المملكة وأبرز الأحداث.", false); | |
| }, 500); | |
| </script> | |
| </body> | |
| </html> | |