subochev
d5aa844fa0
- design/mockups/ — 15 макетов (одно состояние = один файл), из /tmp перенесены в репо - design/screenshots/ — те же экраны PNG - design/PRINCIPLES.md — принципы: что берём у десктопа, что на телефоне иначе - design/BORROW.md — что откуда: ядро (Nexus), тема (десктопный макет), отрисовка Markdown (ai/assistent) - design/gen_mockups.py — генератор макетов, путь вывода теперь рядом с ним - README: разделы «Принципы» и «Откуда код» со ссылками
324 lines
17 KiB
HTML
324 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Группы — список</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
|
||
--fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --badge: #5EB5F7;
|
||
--err: #EC3942; --ok: #63C88A; --user-bubble: #2B5278; --bot-bubble: #1C2733;
|
||
--a1: #6AB2F2; --a2: #86C99A; --a3: #C9A886; --a4: #B79AE0; --a5: #E28C8C;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
background: #0A0A0F; color: var(--fg); line-height: 1.45;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
min-height: 100vh; padding: 20px; gap: 12px;
|
||
}
|
||
.caption { font-size: 12.5px; color: var(--dim); letter-spacing: .2px; }
|
||
|
||
/* ── корпус телефона ── */
|
||
.phone {
|
||
width: 390px; height: 800px; flex: 0 0 auto; background: var(--bg);
|
||
border-radius: 38px; overflow: hidden; position: relative;
|
||
border: 1px solid #2A3340; display: flex; flex-direction: column;
|
||
box-shadow: 0 30px 90px rgba(0,0,0,.75);
|
||
}
|
||
.status { height: 38px; flex: 0 0 38px; display: flex; align-items: center;
|
||
justify-content: space-between; padding: 0 24px; font-size: 12px;
|
||
font-variant-numeric: tabular-nums; color: var(--fg); }
|
||
.status .r { display: flex; gap: 6px; align-items: center; font-size: 11px; }
|
||
|
||
/* ── шапки ── */
|
||
.appbar { height: 56px; flex: 0 0 56px; display: flex; align-items: center;
|
||
gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line);
|
||
background: var(--panel); }
|
||
.appbar.plain { background: var(--bg); }
|
||
.appbar .nm { font-size: 16px; font-weight: 600; }
|
||
.grow { flex: 1; min-width: 0; }
|
||
.ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; border: none;
|
||
background: transparent; color: var(--dim); font-size: 17px; cursor: pointer;
|
||
display: grid; place-items: center; font-family: inherit; }
|
||
.ic:hover { background: var(--panel2); color: var(--fg); }
|
||
.ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
|
||
display: grid; place-items: center; font-size: 15px; font-weight: 700;
|
||
color: #0F1922; }
|
||
.hd { flex: 1; min-width: 0; }
|
||
.hd .t1 { font-size: 15px; font-weight: 600; white-space: nowrap;
|
||
overflow: hidden; text-overflow: ellipsis; }
|
||
.hd .t2 { font-size: 11.5px; color: var(--dim); }
|
||
.ok { color: var(--ok); }
|
||
.bad { color: var(--err); }
|
||
|
||
/* ── поиск и лента групп ── */
|
||
.search { margin: 10px 14px 8px; height: 40px; border-radius: 12px;
|
||
border: 1px solid var(--line); background: var(--panel); color: var(--dim);
|
||
font-size: 13.5px; display: flex; align-items: center; gap: 9px; padding: 0 13px; }
|
||
.chips { display: flex; gap: 7px; padding: 2px 14px 10px; align-items: center; }
|
||
.chip { padding: 7px 12px; border-radius: 16px; font-size: 12.5px; color: var(--dim);
|
||
background: var(--panel); white-space: nowrap; border: 1px solid transparent; }
|
||
.chip.on { color: var(--fg); border-color: var(--accent);
|
||
background: rgba(106,178,242,.13); }
|
||
.chip b { color: var(--badge); font-weight: 700; margin-left: 3px; }
|
||
.chip.act { margin-left: auto; background: transparent; padding: 7px 9px; }
|
||
|
||
/* ── список диалогов ── */
|
||
.list { flex: 1; overflow: hidden; padding: 2px 10px 12px; position: relative; }
|
||
.row { display: flex; align-items: center; gap: 11px; padding: 11px 10px;
|
||
border-radius: 13px; position: relative; }
|
||
.row.on { background: #233040; }
|
||
.row .strip { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
|
||
border-radius: 3px; }
|
||
.row .rava { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
|
||
display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #0F1922; }
|
||
.rmid { flex: 1; min-width: 0; }
|
||
.l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
|
||
.l1 .n { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
|
||
text-overflow: ellipsis; }
|
||
.l1 .t { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
|
||
.l2 { display: flex; justify-content: space-between; gap: 8px; align-items: center;
|
||
margin-top: 2px; }
|
||
.l2 .p { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
|
||
text-overflow: ellipsis; }
|
||
.bg { background: var(--badge); color: #0F1922; border-radius: 11px; font-size: 11px;
|
||
font-weight: 700; padding: 1px 7px; flex: 0 0 auto; }
|
||
|
||
.fab { position: absolute; right: 20px; bottom: 22px; width: 56px; height: 56px;
|
||
border-radius: 18px; border: none; background: var(--accent); color: #0F1922;
|
||
font-size: 26px; font-weight: 600; display: grid; place-items: center;
|
||
box-shadow: 0 10px 26px rgba(106,178,242,.35); font-family: inherit; }
|
||
|
||
/* ── чат: сообщения ── */
|
||
.msgs { flex: 1; overflow: hidden; padding: 14px 14px 4px; display: flex;
|
||
flex-direction: column; gap: 10px; }
|
||
.msg { max-width: 84%; padding: 9px 13px; border-radius: 15px; font-size: 13.5px; }
|
||
.msg.user { align-self: flex-end; background: var(--user-bubble);
|
||
border-bottom-right-radius: 5px; }
|
||
.msg.bot { align-self: flex-start; background: var(--bot-bubble);
|
||
border-bottom-left-radius: 5px; }
|
||
.msg .meta { font-size: 10.5px; color: var(--dim); margin-top: 6px; }
|
||
.msg b { font-weight: 650; }
|
||
.msg code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 1px 5px;
|
||
font-size: 12px; font-family: "DejaVu Sans Mono", monospace; }
|
||
.msg ul { margin: 6px 0 2px 16px; }
|
||
.msg li { margin-bottom: 3px; }
|
||
|
||
/* ход работы агента */
|
||
.act-line { align-self: stretch; display: flex; align-items: center; gap: 9px;
|
||
background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
|
||
padding: 8px 12px; font-size: 12.5px; color: var(--dim); }
|
||
.act-line .g { color: var(--accent); font-size: 13px; }
|
||
.act-line .nm { color: var(--fg); }
|
||
.act-line .ch { margin-left: auto; font-size: 11px; }
|
||
.act-line.think { border-left: 2px solid var(--accent); border-radius: 0 11px 11px 0;
|
||
background: rgba(106,178,242,.07); }
|
||
.act-open { align-self: stretch; background: var(--panel); border: 1px solid var(--line);
|
||
border-radius: 11px; padding: 10px 12px; font-size: 12px; color: var(--dim); }
|
||
.act-open .h { display: flex; align-items: center; gap: 9px; color: var(--dim);
|
||
margin-bottom: 7px; }
|
||
.act-open .h .nm { color: var(--fg); }
|
||
.act-open .kv { display: flex; gap: 8px; margin-top: 4px; }
|
||
.act-open .kv .k { color: var(--dim); flex: 0 0 78px; }
|
||
.act-open .kv .v { color: var(--fg); }
|
||
.cur { display: inline-block; width: 7px; height: 14px; background: var(--accent);
|
||
vertical-align: -2px; margin-left: 2px; }
|
||
|
||
/* ── панель ввода ── */
|
||
.composer { border-top: 1px solid var(--line); background: var(--panel);
|
||
padding: 10px 12px 14px; }
|
||
.irow { display: flex; align-items: center; gap: 9px; }
|
||
.field { flex: 1; min-width: 0; height: 44px; border-radius: 14px; background: var(--bg);
|
||
border: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px;
|
||
font-size: 13.5px; color: var(--dim); }
|
||
.mic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
|
||
border: 1px solid var(--line); background: var(--bg); color: var(--dim);
|
||
font-size: 17px; display: grid; place-items: center; font-family: inherit; }
|
||
.mic.rec { background: var(--err); border-color: var(--err); color: #fff; }
|
||
.send { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; border: none;
|
||
background: var(--accent); color: #0F1922; font-size: 17px;
|
||
display: grid; place-items: center; font-family: inherit; }
|
||
.stop { height: 44px; flex: 1; border-radius: 14px; border: 1px solid rgba(236,57,66,.45);
|
||
background: rgba(236,57,66,.10); color: #F0A6AA; font-size: 13.5px; font-weight: 600;
|
||
display: flex; align-items: center; justify-content: center; gap: 9px;
|
||
font-family: inherit; }
|
||
|
||
/* запись */
|
||
.recpanel { display: flex; align-items: center; gap: 11px; background: var(--bg);
|
||
border: 1px solid var(--err); border-radius: 14px; padding: 10px 13px;
|
||
margin-bottom: 10px; }
|
||
.wave { display: flex; align-items: center; gap: 3px; height: 22px; flex: 1; }
|
||
.wave i { width: 3px; background: var(--err); border-radius: 2px; }
|
||
.wave i:nth-child(1) { height: 30%; } .wave i:nth-child(2) { height: 70%; }
|
||
.wave i:nth-child(3) { height: 45%; } .wave i:nth-child(4) { height: 100%; }
|
||
.wave i:nth-child(5) { height: 55%; } .wave i:nth-child(6) { height: 80%; }
|
||
.wave i:nth-child(7) { height: 35%; } .wave i:nth-child(8) { height: 65%; }
|
||
.wave i:nth-child(9) { height: 25%; }
|
||
.rectime { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--err);
|
||
font-weight: 700; }
|
||
.recnote { font-size: 11.5px; color: var(--dim); margin-top: 8px; text-align: center; }
|
||
|
||
/* ── модалки: нижний лист ── */
|
||
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
|
||
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel);
|
||
border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
|
||
max-height: 78%; display: flex; flex-direction: column; overflow: hidden; }
|
||
.sheet .grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line);
|
||
margin: 10px auto 4px; flex: 0 0 auto; }
|
||
.sheet .hd2 { padding: 8px 18px 12px; }
|
||
.sheet .hd2 h2 { font-size: 17px; font-weight: 650; }
|
||
.sheet .hd2 p { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
|
||
.sheet .body { flex: 1; overflow: hidden; padding: 0 14px 8px; }
|
||
.sheet .foot { padding: 12px 16px 18px; display: flex; gap: 10px;
|
||
border-top: 1px solid var(--line); }
|
||
|
||
/* ── карточка по центру ── */
|
||
.center { position: absolute; inset: 0; display: flex; align-items: center;
|
||
justify-content: center; padding: 22px; }
|
||
.card { width: 100%; max-height: 84%; background: var(--panel);
|
||
border: 1px solid var(--line); border-radius: 20px; display: flex;
|
||
flex-direction: column; overflow: hidden; }
|
||
|
||
/* ── кнопки ── */
|
||
.btn { border-radius: 13px; padding: 13px 16px; font-size: 14px; cursor: pointer;
|
||
border: 1px solid var(--line); background: transparent; color: var(--fg);
|
||
font-family: inherit; white-space: nowrap; }
|
||
.btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922;
|
||
font-weight: 650; }
|
||
.btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
|
||
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF;
|
||
font-weight: 650; }
|
||
.btn.off { background: var(--panel2); border-color: var(--panel2); color: var(--dim); }
|
||
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center;
|
||
gap: 9px; border-style: dashed; color: var(--dim); padding: 15px; }
|
||
.btn.grow { flex: 1; }
|
||
.mini-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; border: none;
|
||
background: transparent; color: var(--dim); font-size: 15px; display: grid;
|
||
place-items: center; font-family: inherit; }
|
||
.mini-ic:hover { background: var(--panel2); color: var(--fg); }
|
||
.mini-ic.del { color: #B4666B; }
|
||
|
||
/* ── строки-объекты (агенты, группы) ── */
|
||
.obj { display: flex; align-items: center; gap: 12px; padding: 13px 12px;
|
||
border-bottom: 1px solid var(--line); }
|
||
.obj .sign { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
|
||
display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #0F1922; }
|
||
.obj .mid { flex: 1; min-width: 0; }
|
||
.obj .nm { font-size: 14.5px; font-weight: 550; }
|
||
.obj .sb { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden;
|
||
text-overflow: ellipsis; }
|
||
.obj .acts { display: flex; gap: 2px; flex: 0 0 auto; }
|
||
.obj .lock { font-size: 10.5px; color: var(--dim); border: 1px dashed var(--line);
|
||
border-radius: 8px; padding: 3px 8px; }
|
||
.sys .nm { color: var(--dim); }
|
||
|
||
/* ── формы ── */
|
||
.form { padding: 6px 16px 12px; overflow: hidden; }
|
||
.lbl { font-size: 12px; color: var(--dim); margin: 14px 0 6px; }
|
||
.inp { height: 46px; border-radius: 13px; background: var(--bg);
|
||
border: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px;
|
||
font-size: 13.5px; }
|
||
.inp.ph { color: var(--dim); }
|
||
.inp.focus { border-color: var(--accent); }
|
||
.inp .tail { margin-left: auto; font-size: 12px; color: var(--accent); }
|
||
.note { font-size: 11.5px; color: var(--dim); margin-top: 6px; line-height: 1.5; }
|
||
.tabs { display: flex; gap: 8px; margin: 14px 0 12px; }
|
||
.tab { flex: 1; text-align: center; padding: 11px; border-radius: 12px;
|
||
font-size: 13.5px; color: var(--dim); background: var(--panel2); }
|
||
.tab.on { color: var(--fg); background: rgba(106,178,242,.14);
|
||
border: 1px solid var(--accent); padding: 10px; }
|
||
.swatches { display: flex; gap: 13px; padding: 4px 2px; }
|
||
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; }
|
||
.sw.on { border-color: var(--fg); }
|
||
|
||
/* ── проверка связи ── */
|
||
.chk { display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
padding: 24px 18px 18px; }
|
||
.ring { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--panel2);
|
||
border-top-color: var(--accent); margin-bottom: 14px; }
|
||
.tick { width: 62px; height: 62px; border-radius: 50%; background: rgba(99,200,138,.14);
|
||
border: 2px solid var(--ok); color: var(--ok); font-size: 28px; display: grid;
|
||
place-items: center; margin-bottom: 14px; }
|
||
.cross { width: 62px; height: 62px; border-radius: 50%; background: rgba(236,57,66,.12);
|
||
border: 2px solid var(--err); color: var(--err); font-size: 26px; display: grid;
|
||
place-items: center; margin-bottom: 14px; }
|
||
.chk .st { font-size: 16px; font-weight: 600; }
|
||
.chk .ds { font-size: 12.5px; color: var(--dim); margin-top: 5px; }
|
||
.kv2 { width: 100%; margin-top: 16px; border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line); padding: 10px 0; }
|
||
.kv2 .r { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
|
||
padding: 4px 0; }
|
||
.kv2 .r .k { color: var(--dim); }
|
||
.kv2 .r .v { color: var(--fg); text-align: right; }
|
||
.kv2 .r .v.ok { color: var(--ok); } .kv2 .r .v.bad { color: var(--err); }
|
||
|
||
/* ── предупреждение ── */
|
||
.warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px;
|
||
border-radius: 12px; background: rgba(236,57,66,.09);
|
||
border: 1px solid rgba(236,57,66,.32); font-size: 12px; color: #F0A6AA;
|
||
line-height: 1.5; }
|
||
.warn b { color: #FFC9CB; }
|
||
.danger-blk { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
|
||
.danger-blk .cap { font-size: 11px; letter-spacing: .8px; color: var(--err);
|
||
font-weight: 700; margin-bottom: 8px; }
|
||
|
||
/* ── пустое состояние ── */
|
||
.empty { flex: 1; display: flex; flex-direction: column; align-items: center;
|
||
justify-content: center; text-align: center; padding: 30px 34px; gap: 12px; }
|
||
.empty .big { width: 74px; height: 74px; border-radius: 22px; background: var(--panel);
|
||
border: 1px solid var(--line); display: grid; place-items: center; font-size: 30px;
|
||
color: var(--dim); }
|
||
.empty h3 { font-size: 16.5px; font-weight: 600; }
|
||
.empty p { font-size: 13px; color: var(--dim); line-height: 1.55; }
|
||
|
||
/* ── радио в выборе ассистента ── */
|
||
.radio { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
|
||
border: 2px solid var(--line); }
|
||
.radio.on { border-color: var(--accent); background: radial-gradient(circle,
|
||
var(--accent) 0 6px, transparent 7px); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="caption">Группы — список</div>
|
||
<div class="phone">
|
||
<div class="status"><span>9:41</span><span class="r">▮▮▮ ⏸ 82%</span></div>
|
||
<div class="appbar">
|
||
<button class="ic">←</button>
|
||
<div class="nm">Группы</div>
|
||
<div class="grow"></div>
|
||
</div>
|
||
<div style="flex:1;overflow:hidden;padding:8px 10px">
|
||
<div class="obj sys">
|
||
<div class="mid"><div class="nm">Все чаты</div>
|
||
<div class="sb">Показывает все диалоги, из любой группы</div></div>
|
||
<div class="lock">встроенная</div>
|
||
</div>
|
||
<div class="obj">
|
||
<div class="mid"><div class="nm">Работа</div><div class="sb">12 диалогов</div></div>
|
||
<div class="acts"><button class="mini-ic">✎</button>
|
||
<button class="mini-ic del">⌫</button></div>
|
||
</div>
|
||
<div class="obj">
|
||
<div class="mid"><div class="nm">Дом</div><div class="sb">4 диалога</div></div>
|
||
<div class="acts"><button class="mini-ic">✎</button>
|
||
<button class="mini-ic del">⌫</button></div>
|
||
</div>
|
||
<div class="obj">
|
||
<div class="mid"><div class="nm">Учёба</div><div class="sb">2 диалога</div></div>
|
||
<div class="acts"><button class="mini-ic">✎</button>
|
||
<button class="mini-ic del">⌫</button></div>
|
||
</div>
|
||
<div class="obj" style="border:none">
|
||
<div class="mid"><div class="nm">Пустая</div>
|
||
<div class="sb">Ни одного диалога</div></div>
|
||
<div class="acts"><button class="mini-ic">✎</button>
|
||
<button class="mini-ic del">⌫</button></div>
|
||
</div>
|
||
<div style="padding:14px 2px"><button class="btn wide">＋ Добавить группу</button></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|