anc
Интерфейс по руководству «Стиль Skillok»; одни часы записи на весь экран
По skillok/skillok-develop design/SKILLOK_STYLE.md:
- кнопки и поля — --radius-control 2px; поля — --field-bg, 9/11, 13px,
фокус терракотой внутрь; неактивная кнопка — 0,5; .ui-danger; мишени
44px под пальцем;
- подписи полей — 12px капс с разрядкой; карточки без заливки,
отступы 14–16px; вкладки 32px без жирного; моноширинный — только код,
числа — tabular-nums; тень — только у сообщения;
- значки — icons.ts (SVG 16, контур 1,5) вместо «★ ▶ ❚❚ ✕»;
- обращение на «ты» в интерфейсе и сообщениях ядра; сняты пояснения
«как пользоваться»; блок проверки звука — .audio-check (не пересекается
с галочкой .check).
Светлая тема остаётся единственной — решение владельца для Meet
(руководство просит обе темы).
Шапка и меню показывают время по записанному звуку, как панель записи.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
955f445
4 октября 2026 г.
icons.ts
// Значки — по руководству «Стиль Skillok»: SVG 16 × 16, контур currentColor
// толщиной 1,5, скруглённые концы, без заливки. Рисунки — на сетке 24 (как
// Lucide), поэтому контур 2,25: при показе в 16 px это ровно 1,5 px. Эмодзи и
// символы («★», «▶», «✕») вместо значков не используются.
const icon = (paths: string) =>
`<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
export const ICONS = {
home: icon('<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>'),
mic: icon('<path d="M12 19v3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><rect x="9" y="2" width="6" height="13" rx="3"/>'),
file: icon('<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 12v6"/><path d="m15 15-3-3-3 3"/>'),
settings: icon('<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>'),
search: icon('<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>'),
record: icon('<rect x="5" y="5" width="14" height="14"/>'),
close: icon('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
play: icon('<path d="M7 4.5v15l12-7.5z"/>'),
pause: icon('<path d="M8 5v14"/><path d="M16 5v14"/>'),
star: icon('<path d="M12 3.5l2.6 5.3 5.9.9-4.25 4.1 1 5.85L12 16.9l-5.25 2.75 1-5.85L3.5 9.7l5.9-.9z"/>'),
};