Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Claude AI Chat</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://js.puter.com/v2/"></script> | |
| <script src="components/header.js"></script> | |
| <script src="components/status-bar.js"></script> | |
| </head> | |
| <body class="bg-gray-900 h-screen flex flex-col overflow-hidden"> | |
| <!-- Header Component --> | |
| <app-header></app-header> | |
| <!-- Status Indicator --> | |
| <status-bar></status-bar> | |
| <!-- Main Content Container --> | |
| <main class="flex-1 flex flex-col max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 pt-4 pb-2"> | |
| <!-- Example Prompts Section --> | |
| <section id="examplesSection" class="mb-4 transition-all duration-300"> | |
| <div class="flex flex-wrap gap-2 justify-center"> | |
| <button class="example-btn px-4 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg border border-gray-600 hover:border-gray-500 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5" data-prompt="Explain quantum computing in simple terms"> | |
| <i data-feather="cpu" class="inline-block w-4 h-4 mr-2"></i> | |
| Explain quantum computing | |
| </button> | |
| <button class="example-btn px-4 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg border border-gray-600 hover:border-gray-500 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5" data-prompt="Write a detailed essay on AI impact"> | |
| <i data-feather="edit-3" class="inline-block w-4 h-4 mr-2"></i> | |
| Essay on AI impact | |
| </button> | |
| <button class="example-btn px-4 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg border border-gray-600 hover:border-gray-500 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5" data-prompt="Write a short poem about coding"> | |
| <i data-feather="feather" class="inline-block w-4 h-4 mr-2"></i> | |
| Poem about coding | |
| </button> | |
| <button class="example-btn px-4 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg border border-gray-600 hover:border-gray-500 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5" data-prompt="Generate a JavaScript function to sort an array"> | |
| <i data-feather="code" class="inline-block w-4 h-4 mr-2"></i> | |
| JS array sorter | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Chat Container --> | |
| <section id="chatContainer" class="flex-1 overflow-y-auto bg-white rounded-xl shadow-sm border border-gray-200 mb-4 relative"> | |
| <div id="messageThread" class="p-4 space-y-4"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div id="typingIndicator" class="hidden absolute bottom-4 left-4 flex items-center space-x-2 text-gray-400"> | |
| <div class="flex space-x-1"> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms"></span> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms"></span> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms"></span> | |
| </div> | |
| <span class="text-sm">Claude is typing...</span> | |
| </div> | |
| <!-- Scroll to Bottom Button --> | |
| <button id="scrollToBottom" class="hidden absolute bottom-4 right-4 p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition-all duration-200 transform hover:scale-110" aria-label="Scroll to bottom"> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </section> | |
| <!-- Input Area --> | |
| <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> | |
| <div class="relative"> | |
| <textarea | |
| id="messageInput" | |
| class="w-full resize-none rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 p-3 pr-24 text-gray-700 placeholder-gray-400" | |
| placeholder="Type your message here... (Shift+Enter for new line)" | |
| rows="1" | |
| maxlength="10000" | |
| ></textarea> | |
| <div class="absolute bottom-3 right-3 flex space-x-2"> | |
| <button | |
| id="sendBtn" | |
| class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95" | |
| aria-label="Send message" | |
| > | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| <span class="hidden sm:inline">Send</span> | |
| </button> | |
| <button | |
| id="streamBtn" | |
| class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105 active:scale-95" | |
| aria-label="Stream response" | |
| > | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| <span class="hidden sm:inline">Stream</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Character Counter --> | |
| <div id="charCounter" class="mt-2 text-xs text-gray-400 text-right hidden"> | |
| <span id="charCount">0</span> / 10000 | |
| </div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |