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: #f5f5f5; | |
| } | |
| .chat-bubble { | |
| border-radius: 1rem; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| background-color: #1a56db; | |
| color: white; | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .bot-bubble { | |
| background-color: #e5e7eb; | |
| color: #111827; | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| .flag-animation { | |
| animation: wave 3s infinite linear; | |
| transform-origin: center; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 25% { transform: rotate(2deg); } | |
| 75% { transform: rotate(-2deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <header class="bg-green-600 text-white py-4 shadow-lg"> | |
| <div class="container mx-auto px-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flag-animation" viewBox="0 0 640 480" fill="#fff"> | |
| <path d="M0 0h640v160H0z"/> | |
| <path d="M0 160h640v160H0z"/> | |
| <path d="M0 320h640v160H0z"/> | |
| <path fill="#007a3d" d="M0 0h220v480H0z"/> | |
| <path d="M155.6 232.2a85.6 85.6 0 1 1 171.2 0 85.6 85.6 0 0 1-171.2 0z" fill="#fff"/> | |
| <path d="M191.9 205.3a49.3 49.3 0 1 1 98.6 0 49.3 49.3 0 0 1-98.6 0z" fill="#007a3d"/> | |
| </svg> | |
| <h1 class="text-xl font-bold">روبوت اليوم الوطني السعودي</h1> | |
| </div> | |
| <div class="text-sm"> | |
| <span id="current-date"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <div class="bg-white rounded-xl shadow-md p-4 mb-6"> | |
| <h2 class="text-lg font-bold text-green-700 mb-2">🇸🇦 مرحباً بك في روبوت اليوم الوطني السعودي</h2> | |
| <p class="text-gray-700 mb-2">يمكنك سؤال الروبوت عن:</p> | |
| <ul class="list-disc pr-4 text-gray-700 space-y-1"> | |
| <li>كم سنه المملكة السعودية؟</li> | |
| <li>صاحب أول الملك؟</li> | |
| <li>متى التاريخ توحيد المملكة؟</li> | |
| </ul> | |
| </div> | |
| <div id="chat-container" class="bg-white rounded-xl shadow-md p-4 h-96 overflow-y-auto mb-4 space-y-3"> | |
| <div class="flex justify-start"> | |
| <div class="chat-bubble bot-bubble p-3"> | |
| مرحباً! أنا روبوت اليوم الوطني السعودي. كيف يمكنني مساعدتك؟ | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="user-input" placeholder="اكتب سؤالك هنا..." class="flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <button id="send-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg flex items-center"> | |
| <i data-feather="send" class="ml-1"></i> | |
| <span>إرسال</span> | |
| </button> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-4"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2023 روبوت اليوم الوطني السعودي - جميع الحقوق محفوظة</p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Display current Hijri date | |
| const hijriDate = new Intl.DateTimeFormat('ar-SA-u-ca-islamic', { | |
| day: 'numeric', | |
| month: 'long', | |
| year: 'numeric' | |
| }).format(new Date()); | |
| document.getElementById('current-date').textContent = hijriDate; | |
| // Chat functionality | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const responses = { | |
| "كم سنه المملكه": "المملكة العربية السعودية تحتفل بـ 93 عاماً من التأسيس.", | |
| "كم سنه المملكة السعودية": "المملكة العربية السعودية تحتفل بـ 93 عاماً من التأسيس.", | |
| "عمر المملكه": "المملكة العربية السعودية تحتفل بـ 93 عاماً من التأسيس.", | |
| "كم عمر السعوديه": "المملكة العربية السعودية تحتفل بـ 93 عاماً من التأسيس.", | |
| "كم سنه السعوديه": "المملكة العربية السعودية تحتفل بـ 93 عاماً من التأسيس.", | |
| "صاحب اول الملك": "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله.", | |
| "اول ملك": "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله.", | |
| "من اول ملك": "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله.", | |
| "من صاحب اول الملك": "الملك المؤسس عبدالعزيز بن عبدالرحمن آل سعود رحمه الله.", | |
| "متى التاريخ توحيد المملكه": "تم توحيد المملكة العربية السعودية في عام 1932م.", | |
| "متى تاريخ توحيد المملكه": "تم توحيد المملكة العربية السعودية في عام 1932م.", | |
| "في اي سنه تم توحيد المملكه": "تم توحيد المملكة العربية السعودية في عام 1932م.", | |
| "متى التوحيد": "تم توحيد المملكة العربية السعودية في عام 1932م.", | |
| "تاريخ التوحيد": "تم توحيد المملكة العربية السعودية في عام 1932م." | |
| }; | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (!message) return; | |
| // Add user message to chat | |
| const userDiv = document.createElement('div'); | |
| userDiv.className = 'flex justify-end'; | |
| userDiv.innerHTML = ` | |
| <div class="chat-bubble user-bubble p-3"> | |
| ${message} | |
| </div> | |
| `; | |
| chatContainer.appendChild(userDiv); | |
| // Find response | |
| let response = "لم أفهم السؤال. جرّب: «كم سنه المملكة السعودية؟» أو «صاحب أول الملك؟» أو «متى التاريخ توحيد المملكة؟»."; | |
| for (const [pattern, ans] of Object.entries(responses)) { | |
| if (message.includes(pattern)) { | |
| response = ans; | |
| break; | |
| } | |
| } | |
| // Add bot response to chat | |
| setTimeout(() => { | |
| const botDiv = document.createElement('div'); | |
| botDiv.className = 'flex justify-start'; | |
| botDiv.innerHTML = ` | |
| <div class="chat-bubble bot-bubble p-3"> | |
| ${response} | |
| </div> | |
| `; | |
| chatContainer.appendChild(botDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 500); | |
| // Clear input | |
| userInput.value = ''; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |