approved/006-groups-manage: одобренные модалки групп; подписи-заметки из макетов убраны
This commit is contained in:
Porfiry
@@ -0,0 +1,296 @@
|
||||
<!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;
|
||||
}
|
||||
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; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
|
||||
}
|
||||
|
||||
/* ============ окно клиента на фоне ============ */
|
||||
.window {
|
||||
width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
|
||||
display: flex; overflow: hidden; border: 1px solid var(--line); position: relative;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,.6);
|
||||
}
|
||||
.sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
|
||||
.sb-head { padding: 14px 16px 10px; }
|
||||
.sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
|
||||
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
|
||||
color: var(--dim); cursor: pointer; display: grid; place-items: center; font-size: 17px; }
|
||||
.icon-btn:hover { background: var(--panel2); color: var(--fg); }
|
||||
.search {
|
||||
margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
|
||||
background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
|
||||
}
|
||||
.search::placeholder { color: var(--dim); }
|
||||
|
||||
/* ── лента групп ── */
|
||||
.folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
|
||||
.folder {
|
||||
padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
|
||||
background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
|
||||
}
|
||||
.folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
|
||||
.folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
|
||||
/* кнопка «Группы» — не папка, а действие: справа, отдельно от чипов */
|
||||
.folder.act { margin-left: auto; background: transparent; color: var(--dim);
|
||||
display: grid; place-items: center; padding: 5px 9px; font-size: 13px; }
|
||||
.folder.act:hover { color: var(--fg); background: var(--panel2); }
|
||||
|
||||
.chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
|
||||
.chat-row:hover { background: var(--panel2); }
|
||||
.chat-row.active { background: #233040; }
|
||||
.chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
|
||||
.avatar {
|
||||
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
|
||||
font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
|
||||
}
|
||||
.avatar.g2 { background: #86C99A; }
|
||||
.avatar.g3 { background: #C9A886; }
|
||||
.avatar.g4 { background: #B79AE0; }
|
||||
.chat-mid { flex: 1; min-width: 0; }
|
||||
.chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
|
||||
.chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
|
||||
.chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden;
|
||||
text-overflow: ellipsis; margin-top: 2px; }
|
||||
.badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
|
||||
border-radius: 10px; padding: 1px 7px; }
|
||||
|
||||
.main { flex: 1; display: flex; flex-direction: column; }
|
||||
.chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex;
|
||||
align-items: center; gap: 11px; padding: 0 16px; }
|
||||
.chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
|
||||
.head-name { font-size: 14.5px; font-weight: 600; }
|
||||
.head-sub { font-size: 11.5px; color: var(--dim); }
|
||||
.head-sub .dot { color: var(--ok); }
|
||||
.messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
|
||||
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
|
||||
.msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
|
||||
.msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
|
||||
|
||||
/* ============ затемнение и модалка ============ */
|
||||
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; }
|
||||
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 150; }
|
||||
|
||||
.dialog {
|
||||
width: 520px; min-width: 520px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
|
||||
border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
|
||||
overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
|
||||
}
|
||||
.d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
|
||||
.d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
|
||||
.x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
|
||||
color: var(--dim); cursor: pointer; font-size: 17px; }
|
||||
.x-btn:hover { background: var(--panel2); color: var(--fg); }
|
||||
.d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
|
||||
.d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
|
||||
|
||||
/* ── строка группы ── */
|
||||
.grp {
|
||||
display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
|
||||
background: var(--panel2); margin-bottom: 9px; border: 1px solid transparent;
|
||||
}
|
||||
.grp:hover { border-color: var(--line); }
|
||||
.grp .mid { flex: 1; min-width: 0; }
|
||||
.grp .nm { font-size: 14px; font-weight: 550; }
|
||||
.grp .sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
|
||||
.grp .acts { display: flex; gap: 4px; flex: 0 0 auto; }
|
||||
.mini-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
|
||||
color: var(--dim); cursor: pointer; font-size: 14px; }
|
||||
.mini-ic:hover { background: var(--panel); color: var(--fg); }
|
||||
.mini-ic.del:hover { color: var(--err); }
|
||||
|
||||
/* служебная группа — «Все чаты»: не правится и не удаляется */
|
||||
.grp.sys { background: transparent; border: 1px dashed var(--line); }
|
||||
.grp.sys .nm { color: var(--fg); }
|
||||
.grp .lock { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
|
||||
|
||||
.btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
|
||||
background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
|
||||
.btn:hover { border-color: var(--dim); }
|
||||
.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:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
|
||||
.btn.dang.solid { background: var(--err); border-color: var(--err); color: #FFF; font-weight: 650; }
|
||||
.btn.sm { padding: 8px 13px; font-size: 12.5px; }
|
||||
.btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
border-style: dashed; color: var(--dim); }
|
||||
.btn.wide:hover { color: var(--fg); border-color: var(--dim); }
|
||||
|
||||
/* ── форма ── */
|
||||
.field { margin-bottom: 15px; }
|
||||
.field label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
|
||||
.field input {
|
||||
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
|
||||
background: var(--bg); color: var(--fg); font-size: 13.5px; outline: none; font-family: inherit;
|
||||
}
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
.field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
|
||||
|
||||
/* ── предупреждение ── */
|
||||
.warn {
|
||||
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 15px; padding: 11px 13px;
|
||||
border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
|
||||
font-size: 12px; color: #F0A6AA; line-height: 1.5;
|
||||
}
|
||||
.warn .i { flex: 0 0 auto; font-size: 13px; }
|
||||
.info {
|
||||
display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
|
||||
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
|
||||
font-size: 11.5px; color: var(--dim); line-height: 1.5;
|
||||
}
|
||||
.danger-zone { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
|
||||
.danger-zone .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
|
||||
color: var(--dim); font-weight: 700; margin-bottom: 9px; }
|
||||
|
||||
@media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.82); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="window">
|
||||
<aside class="sidebar">
|
||||
<div class="sb-head">
|
||||
<div class="sb-title">
|
||||
<span>Диалоги</span>
|
||||
<button class="icon-btn" title="Новый диалог">＋</button>
|
||||
</div>
|
||||
</div>
|
||||
<input class="search" placeholder="Поиск диалога…">
|
||||
|
||||
<div class="folders">
|
||||
<div class="folder active">Все чаты <span class="cnt">3</span></div>
|
||||
<div class="folder">Работа</div>
|
||||
<div class="folder">Дом</div>
|
||||
<div class="folder">Учёба</div>
|
||||
<div class="folder">Личное</div>
|
||||
<div class="folder act" title="Группы: добавить, изменить, удалить">✎</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-list">
|
||||
<div class="chat-row active">
|
||||
<div class="avatar">АГ</div>
|
||||
<div class="chat-mid">
|
||||
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
|
||||
<div class="chat-prev">Собрал отчёт, жду правок</div>
|
||||
</div>
|
||||
<div class="row-tail"><span class="badge">2</span></div>
|
||||
</div>
|
||||
<div class="chat-row">
|
||||
<div class="avatar g2">ОЧ</div>
|
||||
<div class="chat-mid">
|
||||
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
|
||||
<div class="chat-prev">Файл лежит на диске</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-row">
|
||||
<div class="avatar g3">РЗ</div>
|
||||
<div class="chat-mid">
|
||||
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
|
||||
<div class="chat-prev">Нашёл 3 ошибки 502</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-row">
|
||||
<div class="avatar g4">ПО</div>
|
||||
<div class="chat-mid">
|
||||
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
|
||||
<div class="chat-prev">Девайт-нет стартовал</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<header class="chat-head">
|
||||
<div class="avatar">АГ</div>
|
||||
<div>
|
||||
<div class="head-name">agentik · рабочий</div>
|
||||
<div class="head-sub"><span class="dot">●</span> на связи</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="messages">
|
||||
<div class="msg user">Проверь, почему падает CI</div>
|
||||
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="scrim"></div>
|
||||
<div class="layer">
|
||||
<div class="dialog">
|
||||
<div class="d-head">
|
||||
<h2>Группы</h2>
|
||||
<button class="x-btn">✕</button>
|
||||
</div>
|
||||
<div class="d-body">
|
||||
<div class="grp sys">
|
||||
<div class="mid">
|
||||
<div class="nm">Все чаты</div>
|
||||
<div class="sub">Показывает все диалоги, из любой группы</div>
|
||||
</div>
|
||||
<div class="lock">встроенная</div>
|
||||
</div>
|
||||
|
||||
<div class="grp">
|
||||
<div class="mid">
|
||||
<div class="nm">Работа</div>
|
||||
<div class="sub">12 диалогов</div>
|
||||
</div>
|
||||
<div class="acts">
|
||||
<button class="mini-ic" title="Изменить">✎</button>
|
||||
<button class="mini-ic del" title="Удалить">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grp">
|
||||
<div class="mid">
|
||||
<div class="nm">Дом</div>
|
||||
<div class="sub">4 диалога</div>
|
||||
</div>
|
||||
<div class="acts">
|
||||
<button class="mini-ic" title="Изменить">✎</button>
|
||||
<button class="mini-ic del" title="Удалить">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grp">
|
||||
<div class="mid">
|
||||
<div class="nm">Учёба</div>
|
||||
<div class="sub">2 диалога</div>
|
||||
</div>
|
||||
<div class="acts">
|
||||
<button class="mini-ic" title="Изменить">✎</button>
|
||||
<button class="mini-ic del" title="Удалить">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grp">
|
||||
<div class="mid">
|
||||
<div class="nm">Личное</div>
|
||||
<div class="sub">пустая</div>
|
||||
</div>
|
||||
<div class="acts">
|
||||
<button class="mini-ic" title="Изменить">✎</button>
|
||||
<button class="mini-ic del" title="Удалить">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn wide">＋ Добавить группу</button>
|
||||
</div>
|
||||
<div class="d-foot">
|
||||
<button class="btn prim" style="flex:1">Готово</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user