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-image: linear-gradient(to bottom right, #f8fafc, #f0fdf4); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #046a38 0%, #0b5 100%); | |
| } | |
| .chat-message { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl mx-auto" dir="rtl"> | |
| <!-- Header --> | |
| <div class="gradient-bg text-white rounded-t-xl p-6 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-xl sm:text-2xl font-bold">روبوت اليوم الوطني السعودي</h1> | |
| <p class="mt-2 opacity-90 text-sm sm:text-base">اسأل عن تاريخ المملكة، مآثر الملوك، وقصة التوحيد</p> | |
| </div> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i data-feather="message-circle" class="text-white w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="bg-white rounded-b-xl shadow-xl overflow-hidden"> | |
| <!-- Quick Questions Chips --> | |
| <div class="p-6 border-b border-gray-100"> | |
| <h2 class="text-gray-700 font-medium mb-3">أسئلة شائعة</h2> | |
| <div class="flex flex-wrap gap-2"> | |
| <button onclick="askQuickQuestion('كم سنة المملكة السعودية؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200"> | |
| كم سنة المملكة؟ | |
| </button> | |
| <button onclick="askQuickQuestion('من أول ملك للمملكة؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200"> | |
| من أول ملك؟ | |
| </button> | |
| <button onclick="askQuickQuestion('متى تم توحيد المملكة؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200"> | |
| متى تم التوحيد؟ | |
| </button> | |
| <button onclick="askQuickQuestion('ما شعار اليوم الوطني؟')" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium transition-all duration-200"> | |
| ما الشعار؟ | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div id="chatContainer" class="h-80 sm:h-96 overflow-y-auto p-4 bg-gray-50"> | |
| <div id="chatMessages" class="space-y-3"> | |
| <div class="chat-message flex justify-start"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md border border-gray-100"> | |
| <p class="text-sm text-emerald-700 font-medium">مرحباً! أنا روبوت اليوم الوطني السعودي. يمكنك سؤالي عن تاريخ المملكة وملوكها.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-gray-100 bg-white"> | |
| <div class="flex gap-2"> | |
| <input id="questionInput" type="text" placeholder="اكتب سؤالك هنا..." | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all duration-200"> | |
| <button onclick="askQuestion()" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all duration-200 flex items-center gap-2"> | |
| <span>إرسال</span> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>بمناسبة الذكرى الـ93 ليومنا الوطني المجيد 🇸🇦</p> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Knowledge Base for Saudi National Day | |
| const knowledgeBase = [ | |
| { | |
| patterns: [ | |
| "كم سنه المملكه", | |
| "عمر المملكه", | |
| "كم عمر السعوديه", | |
| "كم سنه السعوديه", | |
| "كم سنه المملكة السعودية" | |
| ], | |
| answer: "تحتفل المملكة العربية السعودية هذا العام بالذكرى الـ93 لتوحيدها على يد الملك المؤسس عبدالعزيز آل سعود رحمه الله." | |
| }, | |
| { | |
| patterns: [ | |
| "صاحب اول الملك", | |
| "اول ملك", | |
| "من اول ملك", | |
| "من صاحب اول الملك", | |
| "صاحب اول المملك" | |
| ], | |
| answer: "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو أول ملك للمملكة العربية السعودية الموحدة." | |
| }, | |
| { | |
| patterns: [ | |
| "متى التاريخ التوحيد المملكه", | |
| "متى تاريخ توحيد المملكه", | |
| "في اي سنه تم توحيد المملكه", | |
| "متى التوحيد", | |
| "تاريخ التوحيد", | |
| "متى التاريخ التوحيد المملكة" | |
| ], | |
| answer: "تم توحيد المملكة العربية السعودية بتاريخ 23 سبتمبر 1932م الموافق 21 جمادى الأولى 1351هـ." | |
| }, | |
| { | |
| patterns: [ | |
| "شعار اليوم الوطني", | |
| "ما شعار اليوم الوطني", | |
| "شعار السعودية" | |
| ], | |
| answer: "شعار اليوم الوطني السعودي هو سيفان متقاطعان مع نخلة في المنتصف، ويرمز السيفان إلى العدل والقوة، بينما ترمز النخلة للخير والازدهار." | |
| } | |
| ]; | |
| // Arabic text normalization | |
| function normalizeArabic(text) { | |
| return text.toLowerCase() | |
| .replace(/[\u064B-\u0652]/g, "") | |
| .replace(/[\u0640]/g, "") | |
| .replace(/[إأآٱ]/g, "ا") | |
| .replace(/ى/g, "ي") | |
| .replace(/ؤ/g, "و") | |
| .replace(/ئ/g, "ي") | |
| .replace(/ة/g, "ه") | |
| .trim(); | |
| } | |
| // Find answer in knowledge base | |
| 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; | |
| } | |
| } | |
| } | |
| // Fallback for similar questions | |
| if (normalizedQuestion.match(/(عمر|سنه).*(مملك|سعوديه)/)) { | |
| return "تحتفل المملكة هذا العام بالذكرى الـ93 لتوحيدها، ويصادف يوم 23 سبتمبر."; | |
| } | |
| if (normalizedQuestion.match(/(اول|اولى).*(ملك|الملك)/)) { | |
| return "الملك عبدالعزيز بن عبدالرحمن آل سعود رحمه الله هو مؤسس المملكة وأول ملك لها."; | |
| } | |
| if (normalizedQuestion.match(/(تاريخ|متى).*(توحيد|تأسيس|تاسيس)/)) { | |
| return "تم توحيد المملكة في 23 سبتمبر 1932م الموافق 21 جمادى الأولى 1351هـ."; | |
| } | |
| return "عذراً، لم أفهم سؤالك. يمكنك أن تسأل عن:<br>- كم سنة المملكة؟<br>- من أول ملك؟<br>- متى تم التوحيد؟<br>- ما شعار اليوم الوطني؟"; | |
| } | |
| // Add message to chat | |
| function addMessage(text, sender) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const messageElement = document.createElement('div'); | |
| if (sender === 'user') { | |
| messageElement.className = 'chat-message flex justify-end'; | |
| messageElement.innerHTML = ` | |
| <div class="bg-emerald-100 p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md"> | |
| <p class="text-sm text-gray-800">${text}</p> | |
| </div> | |
| `; | |
| } else { | |
| messageElement.className = 'chat-message flex justify-start'; | |
| messageElement.innerHTML = ` | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs sm:max-w-md border border-gray-100"> | |
| <p class="text-sm text-gray-700">${text}</p> | |
| </div> | |
| `; | |
| } | |
| chatMessages.appendChild(messageElement); | |
| document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight; | |
| } | |
| // Ask question | |
| function askQuestion() { | |
| const input = document.getElementById('questionInput'); | |
| const question = input.value.trim(); | |
| if (question) { | |
| addMessage(question, 'user'); | |
| input.value = ''; | |
| setTimeout(() => { | |
| const answer = findAnswer(question); | |
| addMessage(answer, 'bot'); | |
| }, 500); | |
| } | |
| } | |
| // Quick question button | |
| function askQuickQuestion(question) { | |
| document.getElementById('questionInput').value = question; | |
| askQuestion(); | |
| } | |
| // Handle Enter key | |
| document.getElementById('questionInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| askQuestion(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |