|
|
<!doctype html> |
|
|
<html lang="uk"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Локальний Чат — каркас</title> |
|
|
<style> |
|
|
:root { color-scheme: light dark; } |
|
|
* { box-sizing: border-box; } |
|
|
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; } |
|
|
header { position: sticky; top: 0; padding: 12px 16px; border-bottom: 1px solid rgba(127,127,127,.25); backdrop-filter: blur(6px); } |
|
|
main { padding: 16px; } |
|
|
.row { display: flex; gap: 8px; } |
|
|
input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid rgba(127,127,127,.35); border-radius: 10px; background: transparent; color: inherit; } |
|
|
button { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; cursor: pointer; } |
|
|
button:disabled { opacity: .6; cursor: not-allowed; } |
|
|
#messages { min-height: 40vh; padding-bottom: 12px; } |
|
|
.msg { padding: 10px 12px; margin: 8px 0; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; max-width: 70ch; } |
|
|
.me { background: color-mix(in oklab, Canvas 92%, transparent); } |
|
|
.bot { background: color-mix(in oklab, Canvas 85%, transparent); } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<strong>Локальний Чат (каркас)</strong> |
|
|
<div style="opacity:.75">Цей файл підключає <code>chat.js</code> для логіки.</div> |
|
|
</header> |
|
|
<main> |
|
|
<div id="messages"></div> |
|
|
<div class="row"> |
|
|
<input id="prompt" type="text" placeholder="Напишіть повідомлення..." /> |
|
|
<button id="send">Надіслати</button> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script src="./chat.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
