Spaces:
Running
Running
| <!-- Just a taste of what I can create --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern AI Chat Interface</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| min-height: 100vh; | |
| color: #fff; | |
| } | |
| .chat-container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .header { | |
| text-align: center; | |
| padding: 30px 0; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| background: linear-gradient(90deg, #00d9ff, #00ff88); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 0; | |
| } | |
| .message { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .avatar { | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| } | |
| .user .avatar { background: linear-gradient(135deg, #667eea, #764ba2); } | |
| .assistant .avatar { background: linear-gradient(135deg, #11998e, #38ef7d); } | |
| .message-content { | |
| background: rgba(255,255,255,0.05); | |
| padding: 15px 20px; | |
| border-radius: 20px; | |
| border-top-left-radius: 5px; | |
| max-width: 70%; | |
| line-height: 1.6; | |
| } | |
| .input-area { | |
| display: flex; | |
| gap: 15px; | |
| padding: 20px 0; | |
| } | |
| .input-area input { | |
| flex: 1; | |
| padding: 18px 25px; | |
| border: none; | |
| border-radius: 50px; | |
| background: rgba(255,255,255,0.1); | |
| color: #fff; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: all 0.3s; | |
| } | |
| .input-area input:focus { | |
| background: rgba(255,255,255,0.15); | |
| box-shadow: 0 0 20px rgba(0,217,255,0.3); | |
| } | |
| .input-area button { | |
| padding: 18px 35px; | |
| border: none; | |
| border-radius: 50px; | |
| background: linear-gradient(90deg, #00d9ff, #00ff88); | |
| color: #1a1a2e; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .input-area button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 30px rgba(0,217,255,0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <header class="header"> | |
| <h1>🤖 AI Assistant</h1> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: #00d9ff;">anycoder</a></p> | |
| </header> | |
| <div class="chat-messages" id="messages"> | |
| <div class="message assistant"> | |
| <div class="avatar">AI</div> | |
| <div class="message-content"> | |
| Hello! I'm your AI assistant, here to help with questions, coding, creative projects, and more. How can I assist you today? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <input type="text" id="userInput" placeholder="Type your message..." onkeypress="handleKeyPress(event)"> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| </div> | |
| <script> | |
| function handleKeyPress(e) { | |
| if (e.key === 'Enter') sendMessage(); | |
| } | |
| function sendMessage() { | |
| const input = document.getElementById('userInput'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| const messages = document.getElementById('messages'); | |
| // User message | |
| messages.innerHTML += ` | |
| <div class="message user"> | |
| <div class="avatar">👤</div> | |
| <div class="message-content">${message}</div> | |
| </div> | |
| `; | |
| input.value = ''; | |
| // Simulated AI response | |
| setTimeout(() => { | |
| messages.innerHTML += ` | |
| <div class="message assistant"> | |
| <div class="avatar">🤖</div> | |
| <div class="message-content">I'm a demo interface. In a real implementation, this would connect to an AI API like OpenAI, Anthropic, or Hugging Face. Would you like me to create a fully functional version with API integration?</div> | |
| </div> | |
| `; | |
| messages.scrollTop = messages.scrollHeight; | |
| }, 1000); | |
| } | |
| </script> | |
| </body> | |
| </html> |