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