| <!DOCTYPE html> |
| <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> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 6px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .chat-message { |
| animation: fadeIn 0.3s ease-out; |
| } |
| |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .typing-dot { |
| animation: blink 1.5s infinite; |
| } |
| .typing-dot:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-dot:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 h-screen flex flex-col"> |
| |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold">AI</div> |
| <h1 class="text-lg font-semibold text-gray-800">مساعد الذكاء الاصطناعي</h1> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> |
| <i class="fas fa-ellipsis-vertical"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="flex-1 overflow-hidden flex flex-col"> |
| |
| <div id="chat-messages" class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4 rtl"> |
| |
| <div class="chat-message"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm max-w-3xl"> |
| <p class="text-gray-800">مرحبًا! أنا مساعدك الذكي. كيف يمكنني مساعدتك اليوم؟</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">اقترح وصفة طعام</button> |
| <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">اشرح لي الذكاء الاصطناعي</button> |
| <button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition">ساعدني في البرمجة</button> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 mt-1 mr-1">اليوم على الساعة <span id="current-time"></span></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="typing-indicator" class="hidden px-4 pb-3"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="flex space-x-1"> |
| <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div> |
| <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div> |
| <div class="typing-dot w-2 h-2 bg-gray-400 rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-gray-200 bg-white p-3"> |
| <form id="chat-form" class="flex items-end space-x-2"> |
| <button type="submit" id="send-button" class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 text-white flex items-center justify-center hover:opacity-90 transition disabled:opacity-50" disabled> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| <div class="flex-1 bg-gray-100 rounded-lg flex items-end"> |
| <textarea id="message-input" rows="1" placeholder="اكتب رسالتك هنا..." class="flex-1 bg-transparent p-3 max-h-32 resize-none outline-none text-gray-700 rtl"></textarea> |
| <button type="button" class="p-2 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-paperclip"></i> |
| </button> |
| </div> |
| </form> |
| <p class="text-xs text-gray-500 mt-2 text-center">قد يقدم المساعد معلومات غير دقيقة عن الأشخاص، الأماكن أو الحقائق.</p> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' }); |
| document.getElementById('current-time').textContent = timeString; |
| |
| |
| const textarea = document.getElementById('message-input'); |
| textarea.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| |
| |
| document.getElementById('send-button').disabled = this.value.trim() === ''; |
| }); |
| |
| |
| const chatForm = document.getElementById('chat-form'); |
| const chatMessages = document.getElementById('chat-messages'); |
| |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = textarea.value.trim(); |
| if (message === '') return; |
| |
| |
| addMessage(message, 'user'); |
| textarea.value = ''; |
| textarea.style.height = 'auto'; |
| document.getElementById('send-button').disabled = true; |
| |
| |
| document.getElementById('typing-indicator').classList.remove('hidden'); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.add('hidden'); |
| const responses = [ |
| `أنا أفهم سؤالك حول "${message}". اسمح لي أن أقدم لك المعلومات التالية حول هذا الموضوع...`, |
| `سؤال مثير للاهتمام! دعني أفكر في "${message}" للحظة...`, |
| `سأكون سعيدًا بمساعدتك بخصوص "${message}". إليك بعض المعلومات التي قد تكون مفيدة...`, |
| `بخصوص "${message}"، لدي هذه التفاصيل التي قد تجيب على سؤالك...`, |
| `شكرًا لسؤالك عن "${message}". المعلومات المتوفرة لدي تشير إلى أن...`, |
| `لقد بحثت عن "${message}" وهذه هي النتائج التي توصلت إليها...`, |
| `سؤالك مهم. فيما يلي تحليلي لموضوع "${message}"...`, |
| `فهمت أنك تريد معرفة المزيد عن "${message}". اسمح لي أن أشرح لك...` |
| ]; |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
| addMessage(randomResponse, 'ai'); |
| }, 1500 + Math.random() * 2000); |
| }); |
| |
| |
| document.querySelectorAll('.suggestion-btn').forEach(button => { |
| button.addEventListener('click', function() { |
| textarea.value = this.textContent; |
| textarea.dispatchEvent(new Event('input')); |
| textarea.focus(); |
| }); |
| }); |
| |
| |
| function addMessage(content, sender) { |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' }); |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'chat-message'; |
| |
| if (sender === 'user') { |
| messageDiv.innerHTML = ` |
| <div class="flex items-start justify-end"> |
| <div class="flex-1 max-w-3xl"> |
| <div class="bg-blue-500 text-white p-4 rounded-lg shadow-sm mr-auto"> |
| <p>${content}</p> |
| </div> |
| <div class="text-xs text-gray-500 mt-1 ml-1 text-left">${timeString}</div> |
| </div> |
| </div> |
| `; |
| } else { |
| messageDiv.innerHTML = ` |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold ml-3">AI</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm max-w-3xl"> |
| <p class="text-gray-800">${content}</p> |
| </div> |
| <div class="text-xs text-gray-500 mt-1 mr-1">${timeString}</div> |
| </div> |
| </div> |
| `; |
| } |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| textarea.addEventListener('keydown', function(e) { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| chatForm.dispatchEvent(new Event('submit')); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
