Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پارسگوی - دستیار هوشمند فارسی</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'vazir': ['Vazir', 'system-ui'], | |
| }, | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Vazir', sans-serif; | |
| } | |
| .rtl { | |
| direction: rtl; | |
| } | |
| .message-bubble-user { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-radius: 18px 18px 4px 18px; | |
| } | |
| .message-bubble-ai { | |
| background: #f1f5f9; | |
| color: #334155; | |
| border-radius: 18px 18px 18px 4px; | |
| } | |
| .code-block { | |
| background: #1e293b; | |
| color: #e2e8f0; | |
| border-radius: 8px; | |
| font-family: 'Monaco', 'Consolas', monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-vazir rtl"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <h1 class="text-xl font-bold text-gray-900">پارسگوی 🧠</h1> | |
| </div> | |
| <div class="hidden md:block mr-8"> | |
| <div class="flex items-baseline space-x-4 space-x-reverse"> | |
| <a href="/" class="text-gray-900 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">چت</a> | |
| <a href="/history.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">تاریخچه</a> | |
| <a href="/personas.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">شخصیتها</a> | |
| <a href="/profile.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">پروفایل</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="themeToggle" class="p-2 text-gray-500 hover:text-primary-600"> | |
| <i data-feather="moon"></i> | |
| </button> | |
| <button id="authButton" class="mr-4 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| ورود / ثبتنام | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Chat Interface --> | |
| <div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> | |
| <!-- Chat Header --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3 space-x-reverse"> | |
| <div class="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-white font-bold"> | |
| AI | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-semibold text-gray-900">دستیار هوشمند فارسی</h2> | |
| <p class="text-sm text-gray-500">همیشه در دسترس برای کمک به شما</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <button id="voiceInput" class="p-2 text-gray-500 hover:text-primary-600 rounded-full hover:bg-gray-100"> | |
| <i data-feather="mic"></i> | |
| </button> | |
| <button id="clearChat" class="p-2 text-gray-500 hover:text-red-600 rounded-full hover:bg-gray-100"> | |
| <i data-feather="trash-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div id="chatMessages" class="space-y-4 mb-6 min-h-[400px]"> | |
| <!-- Welcome Message --> | |
| <div class="flex justify-start"> | |
| <div class="message-bubble-ai p-4 max-w-[80%]"> | |
| <div class="flex items-center space-x-2 space-x-reverse mb-2"> | |
| <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs"> | |
| AI | |
| </div> | |
| <span class="text-sm text-gray-500">پارسگوی</span> | |
| </div> | |
| <p class="text-gray-800">سلام! من پارسگوی هستم، دستیار هوشمند فارسی شما. چگونه میتوانم کمکتان کنم؟</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4"> | |
| <div class="flex space-x-3 space-x-reverse"> | |
| <div class="flex-1"> | |
| <textarea | |
| id="messageInput" | |
| placeholder="پیام خود را اینجا بنویسید... (برای استفاده از گفتار، روی آیکون میکروفون کلیک کنید)" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none" | |
| rows="3" | |
| ></textarea> | |
| </div> | |
| <div class="flex flex-col space-y-2"> | |
| <button id="sendMessage" class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-lg transition-colors"> | |
| <i data-feather="send"></i> | |
| </button> | |
| <button id="attachFile" class="text-gray-500 hover:text-primary-600 p-3 rounded-lg border border-gray-300 hover:border-primary-500"> | |
| <i data-feather="paperclip"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center justify-between text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <button id="regenerateBtn" class="hover:text-primary-600"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| تولید مجدد | |
| </button> | |
| </div> | |
| <div> | |
| <span id="charCount">0/4000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Auth Modal --> | |
| <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">ورود / ثبتنام</h3> | |
| <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <form id="authForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">ایمیل</label> | |
| <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">رمز عبور</label> | |
| <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" required> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors"> | |
| ادامه | |
| </button> | |
| <div class="text-center"> | |
| <a href="#" class="text-sm text-primary-600 hover:text-primary-700">فراموشی رمز عبور</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| themeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('dark'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.body.classList.contains('dark')) { | |
| document.body.classList.add('bg-gray-900', 'text-white'); | |
| icon.setAttribute('data-feather', 'sun'); | |
| } else { | |
| document.body.classList.remove('bg-gray-900', 'text-white'); | |
| icon.setAttribute('data-feather', 'moon'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Auth Modal | |
| const authButton = document.getElementById('authButton'); | |
| const authModal = document.getElementById('authModal'); | |
| const closeAuthModal = document.getElementById('closeAuthModal'); | |
| authButton.addEventListener('click', () => { | |
| authModal.classList.remove('hidden'); | |
| }); | |
| closeAuthModal.addEventListener('click', () => { | |
| authModal.classList.add('hidden'); | |
| }); | |
| // Chat Functionality | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendMessage = document.getElementById('sendMessage'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const charCount = document.getElementById('charCount'); | |
| messageInput.addEventListener('input', () => { | |
| charCount.textContent = `${messageInput.value.length}/4000`; | |
| }); | |
| sendMessage.addEventListener('click', sendChatMessage); | |
| messageInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendChatMessage(); | |
| } | |
| }); | |
| function sendChatMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Add user message | |
| addMessage(message, 'user'); | |
| // Clear input | |
| messageInput.value = ''; | |
| charCount.textContent = '0/4000'; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| addMessage('این یک پاسخ شبیهسازی شده از هوش مصنوعی است. در نسخه کامل، پاسخ واقعی از API دریافت میشود.', 'ai'); | |
| }, 1000); | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| const bubbleClass = sender === 'user' ? 'message-bubble-user' : 'message-bubble-ai'; | |
| messageDiv.innerHTML = ` | |
| <div class="${bubbleClass} p-4 max-w-[80%]"> | |
| <div class="flex items-center space-x-2 space-x-reverse mb-2"> | |
| ${sender === 'ai' ? ` | |
| <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs"> | |
| AI | |
| </div> | |
| <span class="text-sm ${sender === 'user' ? 'text-blue-100' : 'text-gray-500'}"> | |
| ${sender === 'user' ? 'شما' : 'پارسگوی'} | |
| </span> | |
| </div> | |
| <p class="${sender === 'user' ? 'text-white' : 'text-gray-800'}">${text}</p> | |
| </div> | |
| `; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Voice Input | |
| const voiceInput = document.getElementById('voiceInput'); | |
| voiceInput.addEventListener('click', () => { | |
| // In a real implementation, this would use the Web Speech API | |
| alert('قابلیت گفتار به متن در مرورگر شما فعال شد. شروع به صحبت کنید...'); | |
| }); | |
| // Clear Chat | |
| document.getElementById('clearChat').addEventListener('click', () => { | |
| if (confirm('آیا از پاک کردن تمام پیامها مطمئن هستید؟')) { | |
| chatMessages.innerHTML = ` | |
| <div class="flex justify-start"> | |
| <div class="message-bubble-ai p-4 max-w-[80%]"> | |
| <div class="flex items-center space-x-2 space-x-reverse mb-2"> | |
| <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs"> | |
| AI | |
| </div> | |
| <span class="text-sm text-gray-500">پارسگوی</span> | |
| </div> | |
| <p class="text-gray-800">سلام! من پارسگوی هستم، دستیار هوشمند فارسی شما. چگونه میتوانم کمکتان کنم؟</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |