Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MyChatUI - AI Assistant</title> | |
| <style> | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f2f5; } | |
| .chat-container { width: 100%; max-width: 600px; height: 80vh; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; } | |
| .header { background: #0084ff; color: white; padding: 16px; text-align: center; font-weight: bold; font-size: 1.2rem; } | |
| .messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } | |
| .message { padding: 10px 14px; border-radius: 16px; max-width: 80%; line-height: 1.4; } | |
| .message.bot { background: #f0f0f0; color: #333; align-self: flex-start; border-bottom-left-radius: 4px; } | |
| .message.user { background: #0084ff; color: white; align-self: flex-end; border-bottom-right-radius: 4px; } | |
| .input-area { padding: 16px; border-top: 1px solid #eee; display: flex; gap: 8px; } | |
| .input-area input { flex: 1; padding: 12px; border: 1px solid #ccc; border-radius: 24px; outline: none; } | |
| .input-area button { background: #0084ff; color: white; border: none; border-radius: 24px; padding: 0 20px; font-weight: bold; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="header">MyChatUI Assistant</div> | |
| <div class="messages" id="chat-messages"> | |
| <div class="message bot">Hello! I am MyChatUI. How can I help you today?</div> | |
| </div> | |
| <div class="input-area"> | |
| <input type="text" id="chat-input" placeholder="Type a message..." disabled> | |
| <button onclick="alert('Demo environment. API disconnected.')">Send</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |