| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Chat UI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> |
| <style> |
| |
| .gradient-background { |
| background-image: linear-gradient(180deg, #1f2937 0%, #4b5563 100%); |
| } |
| .chat-background { |
| background-image: linear-gradient(180deg, #374151 0%, #6b7280 100%); |
| } |
| .input-background { |
| background-color: rgba(55, 65, 81, 0.5); |
| } |
| </style> |
| </head> |
| <body class="flex flex-col min-h-screen gradient-background text-white"> |
| |
| <div class="flex items-center px-4 py-3 bg-opacity-80 backdrop-blur-lg"> |
| <div class="w-full flex items-center justify-between"> |
| <h2 class="text-xl md:text-2xl lg:text-3xl font-bold truncate flex items-center"> |
| ChatUI v0.6.0 |
| </h2> |
| <a href="https://github.com/your-repo/chat-ui" target="_blank" rel="noopener noreferrer"> |
| |
| </a> |
| </div> |
| </div> |
| <div class="flex-1 p-4 md:p-8 overflow-y-auto"> |
| <div class="flex flex-col space-y-4"> |
| |
| |
| </div> |
| </div> |
|
|
| |
| <form class="flex items-center px-4 py-3 chat-background"> |
| <input |
| class="flex-1 px-4 py-2 border rounded-full input-background placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-all duration-300" |
| type="text" |
| placeholder="Ask anything..." |
| /> |
|
|
| <button |
| type="submit" |
| class="ml-4 p-2 rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500" |
| > |
| |
| </button> |
| </form> |
|
|
| <footer class="text-center p-4 text-gray-400"> |
| Model: mistralai/Mistral-7B-Instruct-v0.1 · Generated content may be inaccurate or false. |
| </footer> |
| </body> |
| </html> |
| ``` |
