File size: 1,880 Bytes
a79ad88 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!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>
|