Дмитрий
887abf444e
Получен handoff-пакет liderra_v8_handoff/ от дизайнера Платона (kpd9363@gmail.com) от 07.05.2026 — v8 Forest. Заказчик 08.05 решил применить только в части дизайна, имени, логотипа. Функционал, состав страниц и правила (CTO-11, click-wrap, SSO break-glass, 14 статусов воронки) — без изменений (источник — ТЗ v8.5/schema v8.5). Что сделано: - Массовая замена Лидпоток→Лидерра (с учётом падежей: Лидерры/Лидерре) в 33 файлах (449 вхождений) — все .md/.sql/.json/.toml/.yml/.txt/.html, кроме исторических упоминаний внутри liderra_v8_handoff/ - Удалён docs/brandbook.md v1.1 — заменён на BRANDBOOK_v2.md из handoff - Скопированы 13 концептов liderra_v8_handoff/concepts/v8_*.html в web/v8/. Удалены старые web/01-login.html, 02-dashboard.html, 03-deals.html, index.html (палитра v1.1 deprecated) - CLAUDE.md v1.0→v1.1: §0 (BRANDBOOK_v2 + DEVELOPER_HANDOFF в источниках), §2 (палитра Forest, Inter+JBM, Lucide), §5 п.6 (anti-pattern Inter снят — в Forest Inter наш основной шрифт), §6 (13 концептов в web/v8/) - Реестр Открытые_вопросы_v8_3.md v1.12→v1.13: добавлена запись о ребрендинге + 4 точечных расхождений handoff vs ТЗ (статусы воронки, click-wrap чекбоксы, SSO fallback, axe violations) - package.json/package-lock.json: name lidpotok→liderra 4 расхождения handoff vs ТЗ (НЕ применены, источник истины — ТЗ/schema): 1. 14 «обобщённых» статусов в BRANDBOOK_v2 §3.6 ≠ 14 slug'ов в schema.sql:2076 (совпадает 2 из 14: «Переговоры», «Оплачено»). Источник — schema/ТЗ §6.4 (реселлерская модель из аудита crm.bp-gr.ru, 6 системных + 8 настраиваемых статусов). 2. 3-й click-wrap в v8_login.html («маркетинг-опционально») ≠ ТЗ §1.5/§4.1 («согласие на ПДн», обязательное, OPEN-Ж-3). 3. SSO в v8_admin.html («локальный 2FA fallback») ≠ ТЗ OPEN-И-13 (break-glass super_admin, локальный 2FA выключен). 4. Заявление «axe-core 4.10.2 — 0 violations» в README handoff — локально Pa11y 9.1.1 + axe нашёл 81 violation на 10/13 HTML (преимущественно color-contrast на декоративных separator'ах с --ink-disabled). Чисто: settings/errors/palette_options. Что НЕ включено в коммит: - лендинг/TZ_landing_v1_0.md — untracked, не моя работа в этой сессии - .tmp/ — gitignored Что осталось (для следующих сессий): - Возможное переименование GitHub-репо CoralMinister/lidpotok → liderra (отдельное решение заказчика) - Опционально: обратная связь Платону по 4 расхождениям handoff vs ТЗ Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
371 lines
27 KiB
HTML
371 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>v8 · Биллинг — Лидерра (Forest)</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; }
|
||
@media (prefers-reduced-motion: reduce) { .has-motion { animation: none !important; transition: none !important; } }
|
||
|
||
:root {
|
||
--bg: #F6F3EC; --surface: #FFFDFA; --sunken: #F0EDE4;
|
||
--hairline: #D9D5CD; --hairline-soft:#E8E3D6;
|
||
--ink: #081319; --ink-2: #343C41; --ink-3: #66635C; --ink-disabled: #92907B;
|
||
--accent: #0F6E56; --accent-tint: #E1EEEA; --accent-deep: #084635;
|
||
--side-bg: #012019; --side-text: #B1C2BD; --side-text-2: #7A8C87;
|
||
--side-active: #13382F; --side-icon: #5C7A72; --side-icon-act: #32C8A9;
|
||
--side-hover: #0A2A22; --side-border: #1A3A30;
|
||
--st-paid-solid: #007EB8; --st-wait-solid: #00889B; --st-fail-solid: #6C60C4;
|
||
--st-new-solid: #B94837; --st-quote-solid: #008A4D; --st-call-solid: #9A6700;
|
||
--r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px;
|
||
--font-ui:'Inter',system-ui,sans-serif;
|
||
--font-mono:'JetBrains Mono',ui-monospace,monospace;
|
||
}
|
||
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-feature-settings: 'cv11','ss01','ss03'; -webkit-font-smoothing: antialiased; font-variation-settings: 'opsz' 14; min-height: 100vh; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; }
|
||
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
|
||
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
|
||
}
|
||
.skip-link { position: absolute; top: -40px; left: 12px; background: var(--ink); color: #fff; padding: 9px 16px; z-index: 200; font-weight: 600; border-radius: var(--r-sm); }
|
||
.skip-link:focus { top: 12px; }
|
||
|
||
/* Shell — same as v8_dashboard */
|
||
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
|
||
.side { background: var(--side-bg); border-right: 1px solid var(--side-border); padding: 18px 12px 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; color: var(--side-text); }
|
||
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 18; color: #FFFFFF; }
|
||
.brand-mark { width: 22px; height: 22px; border-radius: var(--r-xs); background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
|
||
.brand-mark svg { width: 100%; height: 100%; display: block; }
|
||
.brand-dot { color: var(--side-icon-act); }
|
||
.nav { display: flex; flex-direction: column; gap: 1px; }
|
||
.nav-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--side-text-2); padding: 14px 10px 6px; }
|
||
.nav-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--side-text); }
|
||
.nav-item:hover { background: var(--side-hover); color: #FFFFFF; }
|
||
.nav-item.active { background: var(--side-active); color: #FFFFFF; font-weight: 500; }
|
||
.nav-item.active .nav-icon { color: var(--side-icon-act); }
|
||
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--side-icon); stroke-width: 1.6; }
|
||
.nav-item:hover .nav-icon { color: #FFFFFF; }
|
||
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.nav-count { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; font-feature-settings: 'tnum'; background: rgba(255,255,255,0.10); color: var(--side-text); padding: 2px 6px; border-radius: 4px; }
|
||
.main { display: flex; flex-direction: column; min-width: 0; }
|
||
.topbar { height: 48px; border-bottom: 1px solid var(--hairline); background: var(--surface); padding: 0 24px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 50; }
|
||
.crumb { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
|
||
.crumb strong { color: var(--ink); font-weight: 500; }
|
||
.crumb svg { width: 11px; height: 11px; color: var(--ink-3); opacity: 0.5; }
|
||
.topbar-spacer { flex: 1; }
|
||
.user-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 4px; border-radius: 100px; border: 1px solid var(--hairline); background: var(--surface); }
|
||
.user-chip .ava { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; }
|
||
.user-chip .uname { font-size: 12px; color: var(--ink); font-weight: 500; }
|
||
|
||
/* Page */
|
||
.content { padding: 24px 28px 80px; max-width: 1500px; margin: 0 auto; }
|
||
.page-h { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
|
||
.page-title { font-size: 28px; font-weight: 600; font-variation-settings: 'opsz' 28; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; }
|
||
.page-meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; align-items: center; }
|
||
.page-meta .num { font-family: var(--font-mono); font-feature-settings: 'tnum'; color: var(--ink-2); font-weight: 500; }
|
||
.page-meta .accent-num { color: var(--accent); font-weight: 600; }
|
||
.page-meta .sep { color: var(--ink-disabled); }
|
||
|
||
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; font-family: inherit; letter-spacing: -0.005em; }
|
||
.btn:hover { border-color: var(--ink-disabled); background: var(--sunken); }
|
||
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
|
||
.btn svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
/* Wallet hero — 2 islands: ₽ + ГЦК */
|
||
.wallet-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
|
||
.wallet-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px 22px; min-height: 158px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
|
||
.wallet-card.primary::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--accent); opacity: 0.55; border-radius: var(--r-md); pointer-events: none; }
|
||
.wallet-h { display: flex; align-items: center; justify-content: space-between; }
|
||
.wallet-label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
|
||
.wallet-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; background: var(--accent-tint); color: var(--accent-deep); }
|
||
.wallet-amount { display: flex; align-items: baseline; gap: 4px; }
|
||
.wallet-amount .num { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-weight: 600; font-size: 38px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
|
||
.wallet-amount .ru { font-family: var(--font-mono); font-size: 16px; color: var(--ink-3); }
|
||
.wallet-actions { display: flex; gap: 8px; margin-top: auto; }
|
||
.wallet-actions .btn { flex: 1; justify-content: center; }
|
||
.wallet-foot { font-size: 11.5px; color: var(--ink-2); font-family: var(--font-mono); font-feature-settings: 'tnum'; }
|
||
.wallet-foot strong { color: var(--accent); font-weight: 600; }
|
||
|
||
/* Tariff card */
|
||
.tariff-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 20px; min-height: 158px; display: flex; flex-direction: column; gap: 10px; }
|
||
.tariff-name { font-size: 16px; font-weight: 600; font-variation-settings: 'opsz' 18; letter-spacing: -0.012em; }
|
||
.tariff-feats { font-size: 11.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
|
||
.tariff-feats span { display: flex; align-items: center; gap: 6px; }
|
||
.tariff-feats .check { color: var(--accent); flex-shrink: 0; width: 11px; height: 11px; }
|
||
|
||
/* History panel */
|
||
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; }
|
||
.panel-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; gap: 12px; flex-wrap: wrap; }
|
||
.panel-h h2 { font-size: 16px; font-weight: 600; font-variation-settings: 'opsz' 18; letter-spacing: -0.012em; margin: 0; }
|
||
.panel-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--sunken); border-radius: var(--r-sm); }
|
||
.panel-tabs button { height: 26px; padding: 0 10px; border: none; background: transparent; font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; border-radius: 4px; }
|
||
.panel-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
|
||
|
||
.tx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
|
||
.tx-table thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.005em; color: var(--ink-2); padding: 9px 14px; background: var(--sunken); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
|
||
.tx-table thead th.num { text-align: right; }
|
||
.tx-table tbody tr { border-bottom: 1px solid var(--hairline-soft); }
|
||
.tx-table tbody tr:last-child { border-bottom: none; }
|
||
.tx-table tbody tr:hover { background: var(--sunken); }
|
||
.tx-table tbody td { padding: 9px 14px; vertical-align: middle; }
|
||
.tx-table .tx-when { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 11.5px; color: var(--ink-3); }
|
||
.tx-table .tx-id { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 11.5px; color: var(--accent); }
|
||
.tx-table .tx-amount { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-weight: 500; text-align: right; }
|
||
.tx-amount.up { color: var(--accent); }
|
||
.tx-amount.down { color: var(--ink); }
|
||
.tx-amount.refund { color: var(--st-fail-solid); }
|
||
|
||
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; }
|
||
.chip .dot { width: 6px; height: 6px; border-radius: 50%; position: relative; }
|
||
.chip .dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(10,19,25,0.10); }
|
||
.chip-paid .dot { background: var(--st-quote-solid); }
|
||
.chip-pending .dot { background: var(--st-call-solid); }
|
||
.chip-failed .dot { background: var(--st-new-solid); }
|
||
.chip-refund .dot { background: var(--st-fail-solid); }
|
||
|
||
.pending-banner { background: #FFF8E5; border: 1px solid #F0D89E; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #614209; }
|
||
.pending-banner .ico { width: 18px; height: 18px; color: #B35100; flex-shrink: 0; }
|
||
.pending-banner strong { color: #4A2F00; font-weight: 600; }
|
||
|
||
.invoices-list { display: flex; flex-direction: column; }
|
||
.inv-row { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--hairline-soft); align-items: center; font-size: 12.5px; }
|
||
.inv-row:last-child { border-bottom: none; }
|
||
.inv-row:hover { background: var(--sunken); }
|
||
.inv-when { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 11.5px; color: var(--ink-3); }
|
||
.inv-name { color: var(--ink); }
|
||
.inv-name .sub { font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }
|
||
.inv-amount { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-weight: 500; text-align: right; }
|
||
.inv-action { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--r-sm); font-size: 11.5px; color: var(--ink-2); cursor: pointer; font-family: inherit; }
|
||
.inv-action:hover { border-color: var(--ink-disabled); color: var(--ink); }
|
||
.inv-action svg { width: 11px; height: 11px; }
|
||
|
||
@media (max-width: 1100px) {
|
||
.app { grid-template-columns: 56px 1fr; }
|
||
.side { padding: 14px 6px; }
|
||
.brand .brand-text, .nav-eyebrow, .nav-text, .nav-item:not(.active) .nav-count { display: none; }
|
||
.nav-item { justify-content: center; padding: 0; }
|
||
.topbar { padding: 0 16px; }
|
||
.content { padding: 18px 18px 60px; }
|
||
.wallet-row { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.app { grid-template-columns: 1fr; }
|
||
.side { display: none; }
|
||
.topbar .crumb span:first-child { display: none; }
|
||
.page-h { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||
.wallet-row { grid-template-columns: 1fr; }
|
||
.tx-table thead { display: none; }
|
||
.tx-table, .tx-table tbody, .tx-table tr, .tx-table td { display: block; width: 100%; }
|
||
.tx-table tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--hairline-soft); }
|
||
.tx-table tbody td { padding: 3px 0; border: none; }
|
||
.inv-row { grid-template-columns: 1fr; }
|
||
.inv-row .inv-amount, .inv-row .inv-action { justify-self: flex-start; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="#main" class="skip-link">К контенту</a>
|
||
<div class="app">
|
||
<aside class="side" aria-label="Главное меню">
|
||
<div class="brand">
|
||
<span class="brand-mark" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>
|
||
<span class="brand-text">Лидерра<span class="brand-dot">.</span></span>
|
||
</div>
|
||
<nav class="nav">
|
||
<div class="nav-eyebrow">Работа</div>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg><span class="nav-text">Дашборд</span></a>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M6 12h12M9 18h6"/></svg><span class="nav-text">Сделки</span><span class="nav-count">247</span></a>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg><span class="nav-text">Канбан</span></a>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg><span class="nav-text">Напоминания</span><span class="nav-count">12</span></a>
|
||
<div class="nav-eyebrow">Финансы</div>
|
||
<a class="nav-item active" href="#" aria-current="page"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="1"/><path d="M3 10h18M7 15h3"/></svg><span class="nav-text">Биллинг</span></a>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h18M3 6h18M3 18h18"/></svg><span class="nav-text">Отчёты</span></a>
|
||
<div class="nav-eyebrow">Команда</div>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="nav-text">Менеджеры</span><span class="nav-count">4</span></a>
|
||
<a class="nav-item" href="#"><svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/></svg><span class="nav-text">Настройки</span></a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<div class="crumb"><span>Рабочая область</span><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg><strong>Биллинг</strong></div>
|
||
<div class="topbar-spacer"></div>
|
||
<button type="button" class="user-chip" aria-label="Профиль · Иван Петров"><span class="ava" aria-hidden="true">ИП</span><span class="uname">Иван П.</span></button>
|
||
</div>
|
||
|
||
<main id="main" class="content">
|
||
<header class="page-h">
|
||
<div>
|
||
<h1 class="page-title">Биллинг и тарифы</h1>
|
||
<div class="page-meta">
|
||
<span><span class="accent-num num">14 250 ₽</span> кошелёк</span>
|
||
<span class="sep">·</span>
|
||
<span><span class="num">285</span> лидов запас</span>
|
||
<span class="sep">·</span>
|
||
<span>хватит на <span class="num">4 дня</span></span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="btn btn-primary"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Пополнить баланс</button>
|
||
</header>
|
||
|
||
<!-- Pending banner -->
|
||
<div class="pending-banner" role="status" aria-live="polite">
|
||
<svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
<span><strong>1 платёж в обработке</strong> — 5 000 ₽ от ЮKassa, начат 14:21. Авто-восстановление в 14:51 (30 мин). Кнопки «Отменить» нет — это техническое решение.</span>
|
||
</div>
|
||
|
||
<!-- Wallet + Tariff -->
|
||
<div class="wallet-row">
|
||
<article class="wallet-card primary" aria-labelledby="wallet-rub">
|
||
<div class="wallet-h"><span id="wallet-rub" class="wallet-label">Кошелёк ₽</span><span class="wallet-tag">LIVE</span></div>
|
||
<div class="wallet-amount"><span class="num">14 250</span><span class="ru">₽</span></div>
|
||
<div class="wallet-foot">мин. пополнение <strong>100 ₽</strong> · округление вниз ₽→лиды</div>
|
||
<div class="wallet-actions">
|
||
<button type="button" class="btn btn-primary"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Пополнить</button>
|
||
<button type="button" class="btn"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h18M3 6h18M3 18h18"/></svg>Автопополнение</button>
|
||
</div>
|
||
</article>
|
||
<article class="wallet-card" aria-labelledby="wallet-leads">
|
||
<div class="wallet-h"><span id="wallet-leads" class="wallet-label">Баланс лидов (ГЦК)</span></div>
|
||
<div class="wallet-amount"><span class="num">285</span><span class="ru" style="font-style:normal">лидов</span></div>
|
||
<div class="wallet-foot">средняя цена <strong>50 ₽/лид</strong> · потрачено за месяц 412</div>
|
||
</article>
|
||
<article class="tariff-card" aria-labelledby="tariff-name">
|
||
<div class="wallet-label">Тариф</div>
|
||
<div id="tariff-name" class="tariff-name">Команда <span style="font-family:var(--font-mono);color:var(--accent);font-size:13px;font-weight:500">· 990 ₽/мес</span></div>
|
||
<div class="tariff-feats">
|
||
<span><svg class="check" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>до 10 проектов</span>
|
||
<span><svg class="check" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>4 менеджера + расширение</span>
|
||
<span><svg class="check" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Канбан, Webhook, API</span>
|
||
</div>
|
||
<button type="button" class="btn" style="margin-top:auto;justify-content:center">Сменить тариф →</button>
|
||
</article>
|
||
</div>
|
||
|
||
<!-- Transactions -->
|
||
<section class="panel" aria-labelledby="tx-title">
|
||
<div class="panel-h">
|
||
<h2 id="tx-title">История транзакций</h2>
|
||
<div class="panel-tabs" role="tablist" aria-label="Тип операций">
|
||
<button type="button" role="tab" aria-selected="true" class="active">Все</button>
|
||
<button type="button" role="tab" aria-selected="false">Пополнения</button>
|
||
<button type="button" role="tab" aria-selected="false">Списания</button>
|
||
<button type="button" role="tab" aria-selected="false">Возвраты</button>
|
||
</div>
|
||
</div>
|
||
<table class="tx-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Дата</th>
|
||
<th scope="col">Операция</th>
|
||
<th scope="col">ID</th>
|
||
<th scope="col">Статус</th>
|
||
<th class="num" scope="col">Сумма</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="tx-when">07.05 · 14:21</td>
|
||
<td>Пополнение через ЮKassa</td>
|
||
<td class="tx-id">#TX-89421</td>
|
||
<td><span class="chip chip-pending"><span class="dot" aria-hidden="true"></span>В обработке</span></td>
|
||
<td class="tx-amount up">+ 5 000 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">07.05 · 11:14</td>
|
||
<td>Списание · 3 лида проект «Окна Москва»</td>
|
||
<td class="tx-id">#TX-89384</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount down">− 6 600 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">07.05 · 09:48</td>
|
||
<td>Возврат лида #1018 · дубликат</td>
|
||
<td class="tx-id">#TX-89370</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount refund">+ 2 200 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">06.05 · 22:06</td>
|
||
<td>Пополнение через ЮKassa</td>
|
||
<td class="tx-id">#TX-89312</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount up">+ 10 000 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">06.05 · 18:32</td>
|
||
<td>Списание · 5 лидов проект «Натяжные потолки»</td>
|
||
<td class="tx-id">#TX-89286</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount down">− 9 250 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">05.05 · 12:00</td>
|
||
<td>Списание абонентской платы тарифа «Команда»</td>
|
||
<td class="tx-id">#TX-89108</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount down">− 990 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">04.05 · 16:42</td>
|
||
<td>Попытка пополнения через банковский перевод</td>
|
||
<td class="tx-id">#TX-88937</td>
|
||
<td><span class="chip chip-failed"><span class="dot" aria-hidden="true"></span>Отклонено</span></td>
|
||
<td class="tx-amount" style="color:var(--ink-3)">— 0 ₽</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="tx-when">03.05 · 09:18</td>
|
||
<td>Возврат лида #998 · спам</td>
|
||
<td class="tx-id">#TX-88714</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Проведён</span></td>
|
||
<td class="tx-amount refund">+ 1 850 ₽</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- Invoices -->
|
||
<section class="panel" aria-labelledby="inv-title">
|
||
<div class="panel-h">
|
||
<h2 id="inv-title">Счета и УПД</h2>
|
||
<button type="button" class="btn"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Реестр XLSX</button>
|
||
</div>
|
||
<div class="invoices-list">
|
||
<div class="inv-row">
|
||
<span class="inv-when">07.05.2026</span>
|
||
<span class="inv-name">Счёт № 2026-0512<span class="sub">Тариф «Команда» · май 2026</span></span>
|
||
<span class="inv-amount">990 ₽</span>
|
||
<button type="button" class="inv-action"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>PDF</button>
|
||
</div>
|
||
<div class="inv-row">
|
||
<span class="inv-when">06.05.2026</span>
|
||
<span class="inv-name">УПД № УПД-2026-0492<span class="sub">Списания за апрель · 18 лидов</span></span>
|
||
<span class="inv-amount">29 850 ₽</span>
|
||
<button type="button" class="inv-action"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>1С 8.3 XML</button>
|
||
</div>
|
||
<div class="inv-row">
|
||
<span class="inv-when">05.05.2026</span>
|
||
<span class="inv-name">УПД № УПД-2026-0488<span class="sub">Списания за март · 24 лида</span></span>
|
||
<span class="inv-amount">38 100 ₽</span>
|
||
<button type="button" class="inv-action"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>1С 8.3 XML</button>
|
||
</div>
|
||
<div class="inv-row">
|
||
<span class="inv-when">01.04.2026</span>
|
||
<span class="inv-name">Счёт № 2026-0411<span class="sub">Тариф «Команда» · апрель 2026</span></span>
|
||
<span class="inv-amount">990 ₽</span>
|
||
<button type="button" class="inv-action"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>PDF</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|