Spaces:
Running
تصميم متقن بحيث كل واجهه تظهر بصفحه خاصه بها مع عرض اظافه واجهه speech 2speech واظافهىمشغل صوتي لكل رساله في تكيست اصوات النظام واصوات الهجه<!DOCTYPE html>
Browse files<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAHJA AI - مساعد صوتي ذكي</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>
@import
url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #fff;
min-height: 100vh;
}
.chat-container {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
border-radius: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.message-bubble {
max-width: 85%;
padding: 0.75rem 1.25rem;
border-radius: 1.25rem;
margin-bottom: 0.75rem;
position: relative;
animation: fadeIn 0.3s ease-out;
line-height: 1.6;
}
.user-message {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
align-self: flex-end;
border-bottom-right-radius: 0.5rem;
color: white;
}
.ai-message {
background: rgba(255, 255, 255, 0.08);
align-self: flex-start;
border-bottom-left-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.pulse {
animation: pulse 1.5s infinite;
}
@keyframes
pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
@keyframes
fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.waveform {
display: flex;
align-items: center;
height: 2.5rem;
gap: 0.25rem;
justify-content: flex-end;
}
.waveform-bar {
background: rgba(255, 255, 255, 0.7);
width: 0.25rem;
border-radius: 0.25rem;
animation: equalize 1.5s infinite ease-in-out;
}
@keyframes
equalize {
0%, 100% { height: 0.5rem; }
50% { height: 1.5rem; }
}
.waveform-bar:nth-child(1) { animation-delay: -0.9s; }
.waveform-bar:nth-child(2) { animation-delay: -0.7s; }
.waveform-bar:nth-child(3) { animation-delay: -0.5s; }
.waveform-bar:nth-child(4) { animation-delay: -0.3s; }
.waveform-bar:nth-child(5) { animation-delay: -0.1s; }
.typing-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
}
.typing-dot {
width: 0.5rem;
height: 0.5rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes
typingAnimation {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-0.25rem); }
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.modal-overlay {
background: rgba(0, 0, 0, 0.7);
}
.modal-content {
animation: modalFadeIn 0.3s ease-out;
}
@keyframes
modalFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.voice-btn {
transition: all 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.voice-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.voice-btn:active {
transform: translateY(0);
}
.language-badge {
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* RTL specific styles */
[dir="rtl"] .message-bubble {
text-align: right;
}
[dir="rtl"] .ai-message {
margin-right: 1rem;
}
[dir="rtl"] .user-message {
margin-left: 1rem;
}
/* Dark mode toggle animation */
.toggle-circle {
transition: all 0.3s ease;
}
input:checked ~ .toggle-circle {
transform: translateX(1.25rem);
}
</style>
</head>
<body class="flex items-center justify-center p-4 md:p-6">
<div class="chat-container w-full max-w-2xl h-[85vh] md:h-[80vh] flex flex-col">
<!-- Header -->
<div class="p-4 border-b border-slate-700 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center shadow-md">
<i class="fas fa-robot text-white text-lg"></i>
</div>
<div>
<h2 class="font-bold text-lg">مساعد لهــجة الصوتي</h2>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-300">مدعوم بالذكاء الاصطناعي</span>
<span class="language-badge">العربية</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-slate-700 transition">
<i class="fas fa-moon text-slate-300"></i>
</button>
<button id="settings-btn" class="p-2 rounded-full hover:bg-slate-700 transition">
<i class="fas fa-cog text-slate-300"></i>
</button>
</div>
</div>
<!-- Chat Messages -->
<div id="chat-messages" class="flex-1 p-4 overflow-y-auto scrollbar-hide flex flex-col">
<!-- Initial welcome message -->
<div class="message-bubble ai-message">
<p>مرحباً بك! 👋 أنا مساعدك الصوتي الذكي "لُحْجَة". يمكنك التحدث معي بالضغط على زر الميكروفون أدناه.</p>
</div>
<div class="message-bubble ai-message">
<p>أنا أستطيع الإجابة على أسئلتك، تقديم المعلومات، وحتى إجراء محادثات ذكية معك. جرب أن تسألني عن أي شيء!</p>
</div>
</div>
<!-- Input Area -->
<div class="p-4 border-t border-slate-700">
<div class="flex items-center gap-2">
<button id="voice-btn" class="voice-btn w-14 h-14 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center text-white hover:from-purple-700 hover:to-blue-600 transition-all shadow-lg">
<i class="fas fa-microphone text-xl"></i>
</button>
<div class="flex-1 bg-slate-700 rounded-full px-4 py-2 flex items-center justify-between">
<p id="voice-status" class="text-sm text-slate-300">اضغط على الميكروفون للتحدث</p>
<div id="waveform" class="waveform hidden">
<div class="waveform-bar"></div>
<div class="waveform-bar"></div>
<div class="waveform-bar"></div>
<div class="waveform-bar"></div>
<div class="waveform-bar"></div>
</div>
</div>
<button id="keyboard-btn" class="w-12 h-12 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 hover:bg-slate-600 transition">
<i class="fas fa-keyboard text-lg"></i>
</button>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="fixed inset-0 modal-overlay flex items-center justify-center hidden z-50 p-4">
<div class="bg-slate-800 rounded-xl p-6 w-full max-w-md modal-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">إعدادات المساعد</h3>
<button id="close-settings" class="text-slate-400 hover:text-white p-1 rounded-full hover:bg-slate-700">
<i class="fas fa-times text-lg"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">نموذج ا�