|
|
<!doctype html> |
|
|
<html lang="en" class="bg0 text-fg0 dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>MoA Chat</title> |
|
|
<link |
|
|
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" |
|
|
rel="stylesheet" |
|
|
/> |
|
|
<link rel="stylesheet" href="/static/style.css" /> |
|
|
</head> |
|
|
<body class="bg0 text-fg0 transition-colors duration-300"> |
|
|
<div class="min-h-screen flex flex-col justify-between p-4"> |
|
|
<header class="flex items-center justify-between mb-4"> |
|
|
<h1 class="text-2xl font-bold">MoA Chat</h1> |
|
|
<button |
|
|
id="themeToggle" |
|
|
class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition" |
|
|
> |
|
|
Toggle Theme |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
<main |
|
|
id="chatContainer" |
|
|
class="flex-1 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4" |
|
|
> |
|
|
|
|
|
</main> |
|
|
|
|
|
<form id="chatForm" class="mt-4 flex"> |
|
|
<input |
|
|
id="userInput" |
|
|
type="text" |
|
|
placeholder="Ask something..." |
|
|
class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none" |
|
|
/> |
|
|
<button |
|
|
type="submit" |
|
|
class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition" |
|
|
> |
|
|
Send |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<script src="/static/script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
