|
|
<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> |
|
|
``` |
