Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Chat Interface</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', // Indigo-500 | |
| secondary: '#1e293b', // Slate-800 | |
| dark: '#0f172a', // Slate-900 | |
| lighter: '#334155', // Slate-700 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-100 h-screen overflow-hidden flex transition-colors duration-300"> | |
| <!-- Mobile Header --> | |
| <div class="md:hidden fixed top-0 left-0 right-0 h-16 bg-white dark:bg-secondary border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 z-50"> | |
| <button id="mobile-menu-btn" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-lighter"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <span class="font-bold text-lg text-primary">AI Chat</span> | |
| <div class="w-8"></div> <!-- Spacer --> | |
| </div> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 w-64 bg-white dark:bg-secondary border-r border-gray-200 dark:border-gray-700 flex flex-col transition-transform duration-300 z-40 h-full pt-16 md:pt-0"> | |
| <!-- New Chat Button --> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> | |
| <button onclick="window.location.reload()" class="w-full flex items-center justify-center gap-2 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-lighter transition-colors text-sm font-medium"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| New Chat | |
| </button> | |
| </div> | |
| <!-- History List (Scrollable) --> | |
| <div class="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar"> | |
| <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 px-2 mb-2 uppercase tracking-wider">Today</div> | |
| <button class="w-full text-left px-3 py-2 rounded-md bg-gray-100 dark:bg-lighter text-sm truncate flex items-center gap-3"> | |
| <i data-feather="message-square" class="w-4 h-4 opacity-50"></i> | |
| <span class="truncate">Quantum Physics Explanation</span> | |
| </button> | |
| <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter text-sm truncate flex items-center gap-3 text-gray-600 dark:text-gray-300"> | |
| <i data-feather="message-square" class="w-4 h-4 opacity-50"></i> | |
| <span class="truncate">React Component Ideas</span> | |
| </button> | |
| <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter text-sm truncate flex items-center gap-3 text-gray-600 dark:text-gray-300"> | |
| <i data-feather="message-square" class="w-4 h-4 opacity-50"></i> | |
| <span class="truncate">Code Refactoring Tips</span> | |
| </button> | |
| </div> | |
| <!-- User Profile / Settings --> | |
| <div class="p-3 border-t border-gray-200 dark:border-gray-700"> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-lighter transition-colors"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-primary to-purple-500 flex items-center justify-center text-white text-xs font-bold"> | |
| JS | |
| </div> | |
| <div class="flex-1 text-sm font-medium text-left">John Smith</div> | |
| <i data-feather="settings" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Overlay for mobile sidebar --> | |
| <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden opacity-0 transition-opacity duration-300"></div> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col h-full relative ml-0 md:ml-64 pt-16 md:pt-0"> | |
| <!-- Mobile padding spacer --> | |
| <div class="md:hidden h-16"></div> | |
| <!-- Chat Container --> | |
| <div id="chat-container" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 custom-scrollbar scroll-smooth"> | |
| <!-- Welcome Screen (Hidden when chat starts) --> | |
| <div id="welcome-screen" class="h-full flex flex-col items-center justify-center text-center space-y-6 pb-20"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-4"> | |
| <i data-feather="cpu" class="w-8 h-8"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-800 dark:text-white">How can I help you today?</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-2xl px-4"> | |
| <button onclick="fillInput('Explain quantum computing in simple terms')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group"> | |
| <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="book-open" class="w-5 h-5"></i></div> | |
| <div class="font-medium">Explain quantum computing</div> | |
| <div class="text-sm text-gray-500">in simple terms</div> | |
| </button> | |
| <button onclick="fillInput('Write a Python script to automate daily reports')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group"> | |
| <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="code" class="w-5 h-5"></i></div> | |
| <div class="font-medium">Write a Python script</div> | |
| <div class="text-sm text-gray-500">to automate daily reports</div> | |
| </button> | |
| <button onclick="fillInput('Brainstorm creative ideas for a birthday')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group"> | |
| <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="gift" class="w-5 h-5"></i></div> | |
| <div class="font-medium">Birthday ideas</div> | |
| <div class="text-sm text-gray-500">creative and fun</div> | |
| </button> | |
| <button onclick="fillInput('Translate the following text to French')" class="p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl hover:border-primary dark:hover:border-primary hover:shadow-lg transition-all text-left group"> | |
| <div class="text-primary mb-2 group-hover:scale-110 transition-transform"><i data-feather="globe" class="w-5 h-5"></i></div> | |
| <div class="font-medium">Translate text</div> | |
| <div class="text-sm text-gray-500">to French, Spanish, etc.</div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages will be injected here --> | |
| <div id="messages-wrapper" class="hidden space-y-6 pb-4"> | |
| <!-- Example Assistant Message --> | |
| <div class="flex gap-4 max-w-4xl mx-auto"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex-shrink-0 flex items-center justify-center text-white text-xs"> | |
| AI | |
| </div> | |
| <div class="flex-1 space-y-2"> | |
| <p class="font-medium text-sm text-gray-900 dark:text-gray-100">Assistant</p> | |
| <div class="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-7"> | |
| <p>Hello! I am your AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-gradient-to-t from-gray-50 dark:from-dark via-gray-50 dark:via-dark to-transparent pt-10 pb-6 px-4 absolute bottom-0 w-full"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative flex items-end gap-2 bg-white dark:bg-secondary border border-gray-300 dark:border-gray-700 rounded-2xl shadow-sm p-2 focus-within:ring-2 focus-within:ring-primary/50 focus-within:border-primary transition-all"> | |
| <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-lighter"> | |
| <i data-feather="plus-circle" class="w-5 h-5"></i> | |
| </button> | |
| <textarea | |
| id="chat-input" | |
| rows="1" | |
| placeholder="Send a message..." | |
| class="w-full bg-transparent border-none focus:ring-0 resize-none max-h-32 py-3 text-gray-800 dark:text-white placeholder-gray-400" | |
| oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'" | |
| onkeydown="handleEnter(event)" | |
| ></textarea> | |
| <button | |
| id="send-btn" | |
| class="p-2 bg-primary text-white rounded-xl hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-md hover:shadow-lg flex-shrink-0 mb-1" | |
| onclick="sendMessage()" | |
| > | |
| <i data-feather="send" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-center text-gray-400 mt-2">AI can make mistakes. Consider checking important information.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |