| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dr X - AI Assistant</title> |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Cairo:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: radial-gradient(ellipse at center, #1a0000 0%, #000000 70%); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .chat-container { |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| } |
| |
| .status-bar { |
| height: 44px; |
| background: rgba(0, 0, 0, 0.9); |
| backdrop-filter: blur(10px); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0 20px; |
| font-size: 14px; |
| font-weight: 600; |
| border-bottom: 1px solid rgba(255, 0, 0, 0.1); |
| } |
| |
| .header { |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 20px; |
| border-bottom: 1px solid rgba(255, 0, 0, 0.2); |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(10px); |
| } |
| |
| .chat-content { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| .welcome-screen { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| position: relative; |
| } |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px; |
| display: none; |
| } |
| |
| .message { |
| margin-bottom: 16px; |
| display: flex; |
| gap: 12px; |
| } |
| |
| .message.user { |
| flex-direction: row-reverse; |
| } |
| |
| .message-content { |
| max-width: 70%; |
| padding: 12px 16px; |
| border-radius: 18px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| backdrop-filter: blur(5px); |
| } |
| |
| .message.user .message-content { |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| border: none; |
| } |
| |
| .message-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .message.user .message-avatar { |
| background: linear-gradient(45deg, #333, #555); |
| } |
| |
| .message.assistant .message-avatar { |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| animation: pulseGlow 2s ease-in-out infinite alternate; |
| } |
| |
| .logo-container { |
| position: relative; |
| margin-bottom: 24px; |
| } |
| |
| .logo { |
| width: 120px; |
| height: 120px; |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: 'Orbitron', monospace; |
| font-size: 36px; |
| font-weight: 900; |
| color: #ffffff; |
| position: relative; |
| background: linear-gradient(45deg, #000000, #1a0000, #330000); |
| border: 2px solid transparent; |
| background-clip: padding-box; |
| box-shadow: |
| 0 0 20px rgba(255, 0, 0, 0.5), |
| 0 0 40px rgba(255, 100, 0, 0.3), |
| inset 0 0 20px rgba(255, 0, 0, 0.1); |
| animation: pulseGlow 2s ease-in-out infinite alternate; |
| } |
| |
| .logo::before { |
| content: ''; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| background: linear-gradient(45deg, #ff0000, #ff4500, #ff6600, #ff0000); |
| border-radius: 22px; |
| z-index: -1; |
| animation: fireRotate 3s linear infinite; |
| } |
| |
| .logo::after { |
| content: ''; |
| position: absolute; |
| top: 10%; |
| left: 10%; |
| right: 10%; |
| bottom: 10%; |
| background: radial-gradient(circle, rgba(255, 100, 0, 0.3) 0%, rgba(255, 0, 0, 0.1) 50%, transparent 100%); |
| border-radius: 50%; |
| animation: innerFire 1.5s ease-in-out infinite alternate; |
| } |
| |
| .fire-particle { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: radial-gradient(circle, #ff4500, #ff0000); |
| border-radius: 50%; |
| animation: floatUp 2s ease-out infinite; |
| } |
| |
| @keyframes pulseGlow { |
| 0% { |
| box-shadow: |
| 0 0 20px rgba(255, 0, 0, 0.5), |
| 0 0 40px rgba(255, 100, 0, 0.3), |
| inset 0 0 20px rgba(255, 0, 0, 0.1); |
| } |
| 100% { |
| box-shadow: |
| 0 0 30px rgba(255, 0, 0, 0.8), |
| 0 0 60px rgba(255, 100, 0, 0.5), |
| inset 0 0 30px rgba(255, 0, 0, 0.2); |
| } |
| } |
| |
| @keyframes fireRotate { |
| 0% { |
| background: linear-gradient(45deg, #ff0000, #ff4500, #ff6600, #ff0000); |
| } |
| 25% { |
| background: linear-gradient(135deg, #ff4500, #ff6600, #ff0000, #ff4500); |
| } |
| 50% { |
| background: linear-gradient(225deg, #ff6600, #ff0000, #ff4500, #ff6600); |
| } |
| 75% { |
| background: linear-gradient(315deg, #ff0000, #ff4500, #ff6600, #ff0000); |
| } |
| 100% { |
| background: linear-gradient(45deg, #ff0000, #ff4500, #ff6600, #ff0000); |
| } |
| } |
| |
| @keyframes innerFire { |
| 0% { |
| opacity: 0.3; |
| transform: scale(0.8); |
| } |
| 100% { |
| opacity: 0.6; |
| transform: scale(1.2); |
| } |
| } |
| |
| @keyframes floatUp { |
| 0% { |
| opacity: 1; |
| transform: translateY(0px) scale(1); |
| } |
| 100% { |
| opacity: 0; |
| transform: translateY(-30px) scale(0.3); |
| } |
| } |
| |
| .welcome-text { |
| font-size: 18px; |
| margin-bottom: 8px; |
| text-align: center; |
| color: #ffffff; |
| text-shadow: 0 0 10px rgba(255, 0, 0, 0.3); |
| } |
| |
| .subtitle { |
| color: #ff9999; |
| font-size: 16px; |
| text-align: center; |
| text-shadow: 0 0 5px rgba(255, 0, 0, 0.2); |
| margin-bottom: 24px; |
| } |
| |
| .model-selector { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 16px; |
| overflow-x: auto; |
| padding: 0 20px; |
| } |
| |
| .model-btn { |
| min-width: 120px; |
| padding: 8px 12px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 16px; |
| color: #ff9999; |
| font-size: 12px; |
| cursor: pointer; |
| backdrop-filter: blur(5px); |
| transition: all 0.3s ease; |
| text-align: center; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 4px; |
| } |
| |
| .model-btn.active { |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| border-color: transparent; |
| color: white; |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); |
| } |
| |
| .model-btn:hover { |
| background: rgba(50, 0, 0, 0.9); |
| border-color: rgba(255, 100, 0, 0.6); |
| color: #ffffff; |
| } |
| |
| .model-icon { |
| font-size: 16px; |
| } |
| |
| .thinking-modes { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 16px; |
| justify-content: center; |
| flex-wrap: wrap; |
| padding: 0 20px; |
| } |
| |
| .thinking-btn { |
| padding: 6px 12px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 12px; |
| color: #ff9999; |
| font-size: 12px; |
| cursor: pointer; |
| backdrop-filter: blur(5px); |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| |
| .thinking-btn.active { |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| border-color: transparent; |
| color: white; |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); |
| } |
| |
| .thinking-btn:hover { |
| background: rgba(50, 0, 0, 0.9); |
| border-color: rgba(255, 100, 0, 0.6); |
| color: #ffffff; |
| } |
| |
| .input-container { |
| padding: 20px; |
| border-top: 1px solid rgba(255, 0, 0, 0.2); |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(10px); |
| } |
| |
| .message-input { |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 24px; |
| padding: 12px 48px 12px 48px; |
| width: 100%; |
| color: white; |
| font-size: 16px; |
| outline: none; |
| position: relative; |
| backdrop-filter: blur(5px); |
| resize: none; |
| min-height: 20px; |
| max-height: 120px; |
| } |
| |
| .message-input::placeholder { |
| color: #ff9999; |
| } |
| |
| .message-input:focus { |
| border-color: rgba(255, 100, 0, 0.6); |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.3); |
| } |
| |
| .send-button { |
| position: absolute; |
| right: 24px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| border: none; |
| border-radius: 50%; |
| width: 32px; |
| height: 32px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); |
| transition: all 0.3s ease; |
| } |
| |
| .send-button:hover:not(:disabled) { |
| background: linear-gradient(45deg, #ff4500, #ff6600); |
| box-shadow: 0 0 15px rgba(255, 100, 0, 0.7); |
| } |
| |
| .send-button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| |
| .compose-btn { |
| position: absolute; |
| left: 24px; |
| top: 50%; |
| transform: translateY(-50%); |
| background: linear-gradient(45deg, #ff0000, #ff4500); |
| border: none; |
| border-radius: 50%; |
| width: 32px; |
| height: 32px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); |
| transition: all 0.3s ease; |
| } |
| |
| .compose-btn:hover { |
| background: linear-gradient(45deg, #ff4500, #ff6600); |
| box-shadow: 0 0 15px rgba(255, 100, 0, 0.7); |
| } |
| |
| .input-wrapper { |
| position: relative; |
| width: 100%; |
| } |
| |
| .background-flames { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: -1; |
| opacity: 0.1; |
| background: radial-gradient(circle at 20% 80%, rgba(255, 0, 0, 0.1) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(255, 100, 0, 0.1) 0%, transparent 50%); |
| } |
| |
| .typing-indicator { |
| display: none; |
| padding: 12px 16px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 18px; |
| backdrop-filter: blur(5px); |
| margin-bottom: 16px; |
| } |
| |
| .typing-dots { |
| display: flex; |
| gap: 4px; |
| align-items: center; |
| } |
| |
| .typing-dot { |
| width: 8px; |
| height: 8px; |
| background: #ff9999; |
| border-radius: 50%; |
| animation: typingPulse 1.4s ease-in-out infinite both; |
| } |
| |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| |
| @keyframes typingPulse { |
| 0%, 80%, 100% { |
| transform: scale(0); |
| opacity: 0.5; |
| } |
| 40% { |
| transform: scale(1); |
| opacity: 1; |
| } |
| } |
| |
| .settings-panel { |
| position: fixed; |
| top: 0; |
| right: -300px; |
| width: 300px; |
| height: 100vh; |
| background: rgba(0, 0, 0, 0.95); |
| backdrop-filter: blur(10px); |
| border-left: 1px solid rgba(255, 0, 0, 0.3); |
| transition: right 0.3s ease; |
| z-index: 1000; |
| padding: 20px; |
| overflow-y: auto; |
| } |
| |
| .settings-panel.open { |
| right: 0; |
| } |
| |
| .settings-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 24px; |
| padding-bottom: 16px; |
| border-bottom: 1px solid rgba(255, 0, 0, 0.2); |
| } |
| |
| .settings-section { |
| margin-bottom: 24px; |
| } |
| |
| .settings-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: #ff9999; |
| margin-bottom: 12px; |
| } |
| |
| .file-input { |
| display: none; |
| } |
| |
| .file-upload-btn { |
| width: 100%; |
| padding: 8px 12px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 12px; |
| color: #ff9999; |
| font-size: 14px; |
| cursor: pointer; |
| backdrop-filter: blur(5px); |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| justify-content: center; |
| } |
| |
| .file-upload-btn:hover { |
| background: rgba(50, 0, 0, 0.9); |
| border-color: rgba(255, 100, 0, 0.6); |
| color: #ffffff; |
| } |
| |
| .uploaded-file { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px; |
| background: rgba(30, 0, 0, 0.8); |
| border: 1px solid rgba(255, 0, 0, 0.3); |
| border-radius: 8px; |
| margin-top: 8px; |
| font-size: 12px; |
| } |
| |
| .file-remove { |
| margin-right: auto; |
| cursor: pointer; |
| color: #ff6666; |
| } |
| |
| .overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.5); |
| z-index: 999; |
| display: none; |
| } |
| |
| .overlay.show { |
| display: block; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="background-flames"></div> |
| <div class="overlay" id="overlay"></div> |
| |
| <div class="chat-container"> |
| |
| <div class="status-bar"> |
| <div class="flex items-center gap-1"> |
| <i class="fas fa-signal text-xs"></i> |
| <span class="text-xs">●●●</span> |
| <i class="fas fa-wifi text-xs"></i> |
| <span class="text-xs">LTE</span> |
| <i class="fas fa-battery-full text-xs"></i> |
| </div> |
| <div class="text-sm font-bold" id="current-time">1:00</div> |
| <div class="flex items-center gap-1"> |
| <i class="fas fa-bluetooth text-xs"></i> |
| <i class="fas fa-volume-up text-xs"></i> |
| <i class="fas fa-battery-three-quarters text-xs"></i> |
| <span class="text-xs">87%</span> |
| </div> |
| </div> |
|
|
| |
| <div class="header"> |
| <i class="fas fa-arrow-right text-xl" style="color: #ff9999;" onclick="newChat()"></i> |
| <h1 class="text-lg font-medium" id="chat-title">محادثة جديدة</h1> |
| <i class="fas fa-cog text-xl" style="color: #ff9999;" onclick="toggleSettings()"></i> |
| </div> |
|
|
| |
| <div class="chat-content"> |
| |
| <div class="welcome-screen" id="welcome-screen"> |
| <div class="logo-container"> |
| <div class="logo"> |
| Dr |
| <div class="fire-particle"></div> |
| <div class="fire-particle"></div> |
| <div class="fire-particle"></div> |
| <div class="fire-particle"></div> |
| </div> |
| </div> |
| <div class="welcome-text"> |
| مرحباً، أنا Dr X. |
| </div> |
| <div class="subtitle"> |
| كيف يمكنني مساعدتك اليوم؟ |
| </div> |
| |
| |
| <div class="model-selector"> |
| <div class="model-btn active" data-model="llama"> |
| <div class="model-icon">🦙</div> |
| <div>Llama 3.1 70B</div> |
| <div style="font-size: 10px; opacity: 0.8;">Together</div> |
| </div> |
| <div class="model-btn" data-model="qwen"> |
| <div class="model-icon">🧠</div> |
| <div>Qwen 2.5 72B</div> |
| <div style="font-size: 10px; opacity: 0.8;">Together</div> |
| </div> |
| <div class="model-btn" data-model="mixtral"> |
| <div class="model-icon">🤗</div> |
| <div>Mixtral 8x7B</div> |
| <div style="font-size: 10px; opacity: 0.8;">HuggingFace</div> |
| </div> |
| </div> |
| |
| |
| <div class="thinking-modes"> |
| <div class="thinking-btn active" data-mode="deep"> |
| <i class="fas fa-brain"></i> |
| التفكير العميق |
| </div> |
| <div class="thinking-btn" data-mode="visual"> |
| <i class="fas fa-eye"></i> |
| التفكير المرئي |
| </div> |
| <div class="thinking-btn" data-mode="fast"> |
| <i class="fas fa-bolt"></i> |
| التفكير السريع |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="chat-messages" id="chat-messages"> |
| <div class="typing-indicator" id="typing-indicator"> |
| <div class="typing-dots"> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| <span style="margin-right: 8px; color: #ff9999;">Dr X يكتب...</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="input-container"> |
| <div class="input-wrapper"> |
| <button class="compose-btn" onclick="triggerFileUpload()"> |
| <i class="fas fa-paperclip text-sm"></i> |
| </button> |
| <textarea |
| class="message-input" |
| id="message-input" |
| placeholder="إرسال رسالة إلى Dr X" |
| rows="1" |
| onkeydown="handleKeyDown(event)" |
| oninput="autoResize(this)" |
| ></textarea> |
| <button class="send-button" id="send-button" onclick="sendMessage()"> |
| <i class="fas fa-arrow-up text-sm"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="settings-panel" id="settings-panel"> |
| <div class="settings-header"> |
| <h3 style="font-size: 18px; font-weight: 600;">الإعدادات</h3> |
| <i class="fas fa-times text-xl cursor-pointer" style="color: #ff9999;" onclick="toggleSettings()"></i> |
| </div> |
| |
| <div class="settings-section"> |
| <div class="settings-title">النموذج المحدد</div> |
| <div id="selected-model-info" style="padding: 12px; background: rgba(30, 0, 0, 0.8); border-radius: 8px; border: 1px solid rgba(255, 0, 0, 0.3);"> |
| <div style="display: flex; align-items: center; gap: 8px;"> |
| <span id="model-icon">🦙</span> |
| <div> |
| <div id="model-name">Llama 3.1 70B</div> |
| <div id="model-provider" style="font-size: 12px; opacity: 0.8;">Together AI</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="settings-section"> |
| <div class="settings-title">وضع التفكير</div> |
| <div id="selected-thinking-info" style="padding: 12px; background: rgba(30, 0, 0, 0.8); border-radius: 8px; border: 1px solid rgba(255, 0, 0, 0.3);"> |
| <div style="display: flex; align-items: center; gap: 8px;"> |
| <i class="fas fa-brain" style="color: #ff4500;"></i> |
| <span id="thinking-name">التفكير العميق</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="settings-section"> |
| <div class="settings-title">رفع الملفات</div> |
| <input type="file" id="file-input" class="file-input" multiple accept="image/*,text/*,.pdf,.doc,.docx" onchange="handleFileSelect(event)"> |
| <label for="file-input" class="file-upload-btn"> |
| <i class="fas fa-upload"></i> |
| اختيار الملفات |
| </label> |
| <div id="uploaded-files"></div> |
| </div> |
| |
| <div class="settings-section"> |
| <div class="settings-title">إحصائيات المحادثة</div> |
| <div style="padding: 12px; background: rgba(30, 0, 0, 0.8); border-radius: 8px; border: 1px solid rgba(255, 0, 0, 0.3);"> |
| <div style="display: flex; justify-content: space-between; margin-bottom: 8px;"> |
| <span>الرسائل:</span> |
| <span id="message-count">0</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; margin-bottom: 8px;"> |
| <span>الكلمات:</span> |
| <span id="word-count">0</span> |
| </div> |
| <div style="display: flex; justify-content: space-between;"> |
| <span>الملفات:</span> |
| <span id="file-count">0</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let selectedModel = 'llama'; |
| let selectedThinking = 'deep'; |
| let isTyping = false; |
| let messageCount = 0; |
| let wordCount = 0; |
| let fileCount = 0; |
| let uploadedFiles = []; |
| |
| |
| const models = { |
| llama: { |
| name: 'Llama 3.1 70B', |
| provider: 'Together AI', |
| icon: '🦙' |
| }, |
| qwen: { |
| name: 'Qwen 2.5 72B', |
| provider: 'Together AI', |
| icon: '🧠' |
| }, |
| mixtral: { |
| name: 'Mixtral 8x7B', |
| provider: 'HuggingFace', |
| icon: '🤗' |
| } |
| }; |
| |
| const thinkingModes = { |
| deep: { |
| name: 'التفكير العميق', |
| icon: 'fas fa-brain' |
| }, |
| visual: { |
| name: 'التفكير المرئي', |
| icon: 'fas fa-eye' |
| }, |
| fast: { |
| name: 'التفكير السريع', |
| icon: 'fas fa-bolt' |
| } |
| }; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| updateTime(); |
| setInterval(updateTime, 1000); |
| createFireParticles(); |
| setInterval(createFireParticles, 800); |
| |
| |
| document.querySelectorAll('.model-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.model-btn').forEach(b => b.classList.remove('active')); |
| this.classList.add('active'); |
| selectedModel = this.dataset.model; |
| updateSelectedModelInfo(); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.thinking-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| document.querySelectorAll('.thinking-btn').forEach(b => b.classList.remove('active')); |
| this.classList.add('active'); |
| selectedThinking = this.dataset.mode; |
| updateSelectedThinkingInfo(); |
| }); |
| }); |
| |
| |
| document.getElementById('overlay').addEventListener('click', function() { |
| toggleSettings(); |
| }); |
| }); |
| |
| function updateTime() { |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString('ar-SA', { |
| hour: '2-digit', |
| minute: '2-digit', |
| hour12: false |
| }); |
| document.getElementById('current-time').textContent = timeString; |
| } |
| |
| function createFireParticles() { |
| const logoContainer = document.querySelector('.logo-container'); |
| if (!logoContainer) return; |
| |
| for (let i = 0; i < 4; i++) { |
| const particle = document.createElement('div'); |
| particle.className = 'fire-particle'; |
| particle.style.position = 'absolute'; |
| particle.style.left = Math.random() * 80 + 10 + '%'; |
| particle.style.top = Math.random() * 80 + 10 + '%'; |
| particle.style.animationDelay = Math.random() * 2 + 's'; |
| |
| logoContainer.appendChild(particle); |
| |
| setTimeout(() => { |
| if (particle.parentNode) { |
| particle.remove(); |
| } |
| }, 2000); |
| } |
| } |
| |
| function autoResize(textarea) { |
| textarea.style.height = 'auto'; |
| textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'; |
| } |
| |
| function handleKeyDown(event) { |
| if (event.key === 'Enter' && !event.shiftKey) { |
| event.preventDefault(); |
| sendMessage(); |
| } |
| } |
| |
| function sendMessage() { |
| const input = document.getElementById('message-input'); |
| const message = input.value.trim(); |
| |
| if (!message || isTyping) return; |
| |
| |
| document.getElementById('welcome-screen').style.display = 'none'; |
| document.getElementById('chat-messages').style.display = 'block'; |
| document.getElementById('chat-title').textContent = 'Dr X'; |
| |
| |
| addMessage('user', message); |
| input.value = ''; |
| input.style.height = 'auto'; |
| |
| |
| messageCount++; |
| wordCount += message.split(' ').length; |
| updateStatistics(); |
| |
| |
| simulateAIResponse(message); |
| } |
| |
| function addMessage(sender, content) { |
| const messagesContainer = document.getElementById('chat-messages'); |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message ${sender}`; |
| |
| const avatarDiv = document.createElement('div'); |
| avatarDiv.className = 'message-avatar'; |
| avatarDiv.textContent = sender === 'user' ? 'أنت' : 'Dr'; |
| |
| const contentDiv = document.createElement('div'); |
| contentDiv.className = 'message-content'; |
| contentDiv.textContent = content; |
| |
| messageDiv.appendChild(avatarDiv); |
| messageDiv.appendChild(contentDiv); |
| |
| messagesContainer.appendChild(messageDiv); |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| } |
| |
| function simulateAIResponse(userMessage) { |
| isTyping = true; |
| document.getElementById('send-button').disabled = true; |
| document.getElementById('typing-indicator').style.display = 'block'; |
| |
| setTimeout(() => { |
| |
| let response = generateAIResponse(userMessage); |
| |
| document.getElementById('typing-indicator').style.display = 'none'; |
| addMessage('assistant', response); |
| |
| messageCount++; |
| wordCount += response.split(' ').length; |
| updateStatistics(); |
| |
| isTyping = false; |
| document.getElementById('send-button').disabled = false; |
| }, Math.random() * 2000 + 1000); |
| } |
| |
| function generateAIResponse(userMessage) { |
| const modelName = models[selectedModel].name; |
| const thinkingName = thinkingModes[selectedThinking].name; |
| |
| const responses = [ |
| `مرحباً! أنا Dr X، وأستخدم نموذج ${modelName} مع ${thinkingName}. كيف يمكنني مساعدتك في "${userMessage}"؟`, |
| `بناءً على استخدام ${thinkingName}، أرى أن سؤالك عن "${userMessage}" يتطلب تحليلاً دقيقاً. دعني أفكر في هذا...`, |
| `باستخدام ${modelName}، يمكنني أن أقدم لك إجابة شاملة حول "${userMessage}". هذا موضوع مثير للاهتمام!`, |
| `من خلال ${thinkingName}، أستطيع أن أفهم أنك تسأل عن "${userMessage}". إليك ما أعتقده...`, |
| `مع قوة ${modelName} و${thinkingName}، يمكنني تحليل طلبك بعمق. بخصوص "${userMessage}"، إليك رؤيتي...` |
| ]; |
| |
| return responses[Math.floor(Math.random() * responses.length)]; |
| } |
| |
| function newChat() { |
| |
| document.getElementById('welcome-screen').style.display = 'flex'; |
| document.getElementById('chat-messages').style.display = 'none'; |
| document.getElementById('chat-title').textContent = 'محادثة جديدة'; |
| document.getElementById('chat-messages').innerHTML = '<div class="typing-indicator" id="typing-indicator"><div class="typing-dots"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div><span style="margin-right: 8px; color: #ff9999;">Dr X يكتب...</span></div></div>'; |
| |
| |
| messageCount = 0; |
| wordCount = 0; |
| fileCount = 0; |
| uploadedFiles = []; |
| document.getElementById('uploaded-files').innerHTML = ''; |
| updateStatistics(); |
| } |
| |
| function toggleSettings() { |
| const panel = document.getElementById('settings-panel'); |
| const overlay = document.getElementById('overlay'); |
| |
| if (panel.classList.contains('open')) { |
| panel.classList.remove('open'); |
| overlay.classList.remove('show'); |
| } else { |
| panel.classList.add('open'); |
| overlay.classList.add('show'); |
| } |
| } |
| |
| function updateSelectedModelInfo() { |
| const model = models[selectedModel]; |
| document.getElementById('model-icon').textContent = model.icon; |
| document.getElementById('model-name').textContent = model.name; |
| document.getElementById('model-provider').textContent = model.provider; |
| } |
| |
| function updateSelectedThinkingInfo() { |
| const thinking = thinkingModes[selectedThinking]; |
| document.getElementById('thinking-name').textContent = thinking.name; |
| } |
| |
| function updateStatistics() { |
| document.getElementById('message-count').textContent = messageCount; |
| document.getElementById('word-count').textContent = wordCount; |
| document.getElementById('file-count').textContent = fileCount; |
| } |
| |
| function triggerFileUpload() { |
| document.getElementById('file-input').click(); |
| } |
| |
| function handleFileSelect(event) { |
| const files = Array.from(event.target.files); |
| const uploadedFilesContainer = document.getElementById('uploaded-files'); |
| |
| files.forEach(file => { |
| uploadedFiles.push(file); |
| fileCount++; |
| |
| const fileDiv = document.createElement('div'); |
| fileDiv.className = 'uploaded-file'; |
| fileDiv.innerHTML = ` |
| <i class="fas fa-file"></i> |
| <span>${file.name}</span> |
| <span style="font-size: 10px; opacity: 0.8;">(${(file.size / 1024).toFixed(1)} KB)</span> |
| <i class="fas fa-times file-remove" onclick="removeFile('${file.name}', this)"></i> |
| `; |
| |
| uploadedFilesContainer.appendChild(fileDiv); |
| }); |
| |
| updateStatistics(); |
| event.target.value = ''; |
| } |
| |
| function removeFile(fileName, element) { |
| uploadedFiles = uploadedFiles.filter(file => file.name !== fileName); |
| fileCount--; |
| element.parentElement.remove(); |
| updateStatistics(); |
| } |
| </script> |
| </body> |
| </html> |
