|
|
<!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> |
