643 lines
28 KiB
HTML
643 lines
28 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>v8 · Палитры на выбор — Лидпоток</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; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: #ECEEF1;
|
|||
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|||
|
|
font-feature-settings: 'cv11', 'ss01';
|
|||
|
|
color: #0A1319;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
padding: 28px 24px 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-h {
|
|||
|
|
max-width: 1280px;
|
|||
|
|
margin: 0 auto 24px;
|
|||
|
|
}
|
|||
|
|
.page-h h1 {
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: -0.018em;
|
|||
|
|
margin: 0 0 6px;
|
|||
|
|
}
|
|||
|
|
.page-h .meta {
|
|||
|
|
font-size: 12.5px;
|
|||
|
|
color: #60676C;
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-feature-settings: 'tnum';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option {
|
|||
|
|
max-width: 1280px;
|
|||
|
|
margin: 0 auto 16px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid #D4D8DB;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 280px 1fr;
|
|||
|
|
}
|
|||
|
|
.option-meta {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
padding: 18px 18px;
|
|||
|
|
border-right: 1px solid #E8EBED;
|
|||
|
|
display: flex; flex-direction: column; gap: 8px;
|
|||
|
|
}
|
|||
|
|
.option-tag {
|
|||
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.04em;
|
|||
|
|
color: #60676C;
|
|||
|
|
width: fit-content;
|
|||
|
|
}
|
|||
|
|
.option-tag .seq {
|
|||
|
|
width: 18px; height: 18px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
background: #0A1319;
|
|||
|
|
color: #fff;
|
|||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
.option-name {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: -0.012em;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.option-desc {
|
|||
|
|
font-size: 12.5px;
|
|||
|
|
color: #343C41;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.option-swatches {
|
|||
|
|
display: flex; gap: 4px;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
.option-swatches .sw {
|
|||
|
|
width: 22px; height: 22px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid rgba(10,19,25,0.08);
|
|||
|
|
}
|
|||
|
|
.option-wcag {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 10.5px;
|
|||
|
|
color: #60676C;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
font-feature-settings: 'tnum';
|
|||
|
|
letter-spacing: -0.005em;
|
|||
|
|
display: flex; flex-direction: column; gap: 2px;
|
|||
|
|
}
|
|||
|
|
.option-wcag .ok { color: #0F6E56; }
|
|||
|
|
.option-wcag .fail { color: #B94837; }
|
|||
|
|
|
|||
|
|
/* preview area */
|
|||
|
|
.preview {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 100px 1fr;
|
|||
|
|
height: 220px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.p-side {
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
padding: 14px 8px;
|
|||
|
|
gap: 1px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.p-brand {
|
|||
|
|
display: flex; align-items: center; gap: 6px;
|
|||
|
|
padding: 4px 6px 12px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.p-brand .mark {
|
|||
|
|
width: 16px; height: 16px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background: #0A1319;
|
|||
|
|
color: #fff;
|
|||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 8px; font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.p-nav { display: flex; flex-direction: column; gap: 1px; }
|
|||
|
|
.p-nav-item {
|
|||
|
|
height: 22px; padding: 0 6px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: flex; align-items: center; gap: 6px;
|
|||
|
|
font-size: 10.5px;
|
|||
|
|
letter-spacing: -0.005em;
|
|||
|
|
}
|
|||
|
|
.p-nav-item .ico { width: 11px; height: 11px; flex-shrink: 0; }
|
|||
|
|
.p-divider {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0; bottom: 0; right: -0.5px;
|
|||
|
|
width: 1px;
|
|||
|
|
}
|
|||
|
|
.p-main {
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.p-bar {
|
|||
|
|
display: flex; align-items: center; gap: 8px;
|
|||
|
|
font-size: 10.5px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
.p-bar .crumb { font-weight: 500; }
|
|||
|
|
.p-cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr 1.3fr;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.p-kpi {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 10px 12px;
|
|||
|
|
border: 1px solid;
|
|||
|
|
display: flex; flex-direction: column; gap: 6px;
|
|||
|
|
min-height: 76px;
|
|||
|
|
}
|
|||
|
|
.p-kpi .lbl { font-size: 9px; }
|
|||
|
|
.p-kpi .val {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-feature-settings: 'tnum';
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
letter-spacing: -0.025em;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.p-kpi .delta {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 9px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: -0.005em;
|
|||
|
|
}
|
|||
|
|
.p-balance {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 10px 12px;
|
|||
|
|
border: 1px solid;
|
|||
|
|
display: flex; flex-direction: column; gap: 6px;
|
|||
|
|
min-height: 76px;
|
|||
|
|
}
|
|||
|
|
.p-balance .lbl { font-size: 9px; }
|
|||
|
|
.p-balance .val {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-feature-settings: 'tnum';
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: -0.025em;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.p-balance .runway {
|
|||
|
|
display: grid; grid-template-columns: repeat(7, 1fr);
|
|||
|
|
gap: 2px; height: 4px;
|
|||
|
|
}
|
|||
|
|
.p-balance .runway span { border-radius: 1px; }
|
|||
|
|
|
|||
|
|
.p-row {
|
|||
|
|
display: flex; align-items: center; gap: 10px;
|
|||
|
|
padding: 6px 8px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 10.5px;
|
|||
|
|
}
|
|||
|
|
.p-row .pa {
|
|||
|
|
width: 18px; height: 18px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(10,19,25,0.08);
|
|||
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 7.5px; font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.p-row .pn { font-weight: 500; }
|
|||
|
|
.p-row .pchip {
|
|||
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
margin-left: auto;
|
|||
|
|
}
|
|||
|
|
.p-row .pchip .pdot {
|
|||
|
|
width: 6px; height: 6px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
PER-VARIANT colour overrides
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
/* А · Graphite */
|
|||
|
|
.opt-a .p-side { background: #12181C; }
|
|||
|
|
.opt-a .p-divider { background: #12181C; }
|
|||
|
|
.opt-a .p-main { background: #F1F4F6; }
|
|||
|
|
.opt-a .p-side, .opt-a .p-side .p-brand { color: #B5B8BA; }
|
|||
|
|
.opt-a .p-brand .mark { background: #FFFFFF; color: #12181C; }
|
|||
|
|
.opt-a .p-nav-item { color: #B5B8BA; }
|
|||
|
|
.opt-a .p-nav-item .ico { color: #5D6469; }
|
|||
|
|
.opt-a .p-nav-item.active { background: #272F35; color: #FFFFFF; }
|
|||
|
|
.opt-a .p-nav-item.active .ico { color: #32C8A9; }
|
|||
|
|
.opt-a .p-bar .crumb { color: #0A1319; }
|
|||
|
|
.opt-a .p-bar .sub { color: #5D6469; }
|
|||
|
|
.opt-a .p-kpi { background: #FFFFFF; border-color: #D4D8DB; }
|
|||
|
|
.opt-a .p-kpi .lbl { color: #5D6469; }
|
|||
|
|
.opt-a .p-kpi .delta { color: #0F6E56; }
|
|||
|
|
.opt-a .p-balance { background: #FFFFFF; border-color: #0F6E56; }
|
|||
|
|
.opt-a .p-balance .lbl { color: #5D6469; }
|
|||
|
|
.opt-a .p-balance .val { color: #0A1319; }
|
|||
|
|
.opt-a .p-balance .runway span { background: #E9EDF0; }
|
|||
|
|
.opt-a .p-balance .runway span.f { background: #0F6E56; }
|
|||
|
|
.opt-a .p-row .pn { color: #0A1319; }
|
|||
|
|
.opt-a .p-row .sub { color: #5D6469; }
|
|||
|
|
.opt-a .p-row .pchip { color: #0A1319; }
|
|||
|
|
.opt-a .p-row.sel { background: #0A1319; color: #FFFFFF; }
|
|||
|
|
.opt-a .p-row.sel .pn,
|
|||
|
|
.opt-a .p-row.sel .sub,
|
|||
|
|
.opt-a .p-row.sel .pchip { color: #FFFFFF; }
|
|||
|
|
|
|||
|
|
/* Б · Forest */
|
|||
|
|
.opt-b .p-side { background: #012019; }
|
|||
|
|
.opt-b .p-divider { background: #012019; }
|
|||
|
|
.opt-b .p-main { background: #F6F3EC; }
|
|||
|
|
.opt-b .p-side, .opt-b .p-side .p-brand { color: #B1C2BD; }
|
|||
|
|
.opt-b .p-brand .mark { background: #FFFFFF; color: #012019; }
|
|||
|
|
.opt-b .p-nav-item { color: #B1C2BD; }
|
|||
|
|
.opt-b .p-nav-item .ico { color: #5C7A72; }
|
|||
|
|
.opt-b .p-nav-item.active { background: #13382F; color: #FFFFFF; }
|
|||
|
|
.opt-b .p-nav-item.active .ico { color: #32C8A9; }
|
|||
|
|
.opt-b .p-bar .crumb { color: #081319; }
|
|||
|
|
.opt-b .p-bar .sub { color: #66635C; }
|
|||
|
|
.opt-b .p-kpi { background: #FFFDFA; border-color: #D9D5CD; }
|
|||
|
|
.opt-b .p-kpi .lbl { color: #66635C; }
|
|||
|
|
.opt-b .p-kpi .delta { color: #0F6E56; }
|
|||
|
|
.opt-b .p-balance { background: #FFFDFA; border-color: #0F6E56; }
|
|||
|
|
.opt-b .p-balance .lbl { color: #66635C; }
|
|||
|
|
.opt-b .p-balance .val { color: #081319; }
|
|||
|
|
.opt-b .p-balance .runway span { background: #F0EDE4; }
|
|||
|
|
.opt-b .p-balance .runway span.f { background: #0F6E56; }
|
|||
|
|
.opt-b .p-row .pn { color: #081319; }
|
|||
|
|
.opt-b .p-row .sub { color: #66635C; }
|
|||
|
|
.opt-b .p-row .pchip { color: #081319; }
|
|||
|
|
.opt-b .p-row.sel { background: #081319; color: #FFFFFF; }
|
|||
|
|
.opt-b .p-row.sel .pn,
|
|||
|
|
.opt-b .p-row.sel .sub,
|
|||
|
|
.opt-b .p-row.sel .pchip { color: #FFFFFF; }
|
|||
|
|
|
|||
|
|
/* В · Slate-Blue */
|
|||
|
|
.opt-v .p-side { background: #131F2C; }
|
|||
|
|
.opt-v .p-divider { background: #131F2C; }
|
|||
|
|
.opt-v .p-main { background: #E7EEF3; }
|
|||
|
|
.opt-v .p-side, .opt-v .p-side .p-brand { color: #B7BFC7; }
|
|||
|
|
.opt-v .p-brand .mark { background: #FFFFFF; color: #131F2C; }
|
|||
|
|
.opt-v .p-nav-item { color: #B7BFC7; }
|
|||
|
|
.opt-v .p-nav-item .ico { color: #5D646B; }
|
|||
|
|
.opt-v .p-nav-item.active { background: #2A394A; color: #FFFFFF; }
|
|||
|
|
.opt-v .p-nav-item.active .ico { color: #32C8A9; }
|
|||
|
|
.opt-v .p-bar .crumb { color: #0A131A; }
|
|||
|
|
.opt-v .p-bar .sub { color: #5D646B; }
|
|||
|
|
.opt-v .p-kpi { background: #FFFFFF; border-color: #C9D2D9; }
|
|||
|
|
.opt-v .p-kpi .lbl { color: #5D646B; }
|
|||
|
|
.opt-v .p-kpi .delta { color: #0F6E56; }
|
|||
|
|
.opt-v .p-balance { background: #FFFFFF; border-color: #0F6E56; }
|
|||
|
|
.opt-v .p-balance .lbl { color: #5D646B; }
|
|||
|
|
.opt-v .p-balance .val { color: #0A131A; }
|
|||
|
|
.opt-v .p-balance .runway span { background: #DEE6EC; }
|
|||
|
|
.opt-v .p-balance .runway span.f { background: #0F6E56; }
|
|||
|
|
.opt-v .p-row .pn { color: #0A131A; }
|
|||
|
|
.opt-v .p-row .sub { color: #5D646B; }
|
|||
|
|
.opt-v .p-row .pchip { color: #0A131A; }
|
|||
|
|
.opt-v .p-row.sel { background: #0A131A; color: #FFFFFF; }
|
|||
|
|
.opt-v .p-row.sel .pn,
|
|||
|
|
.opt-v .p-row.sel .sub,
|
|||
|
|
.opt-v .p-row.sel .pchip { color: #FFFFFF; }
|
|||
|
|
|
|||
|
|
/* Г · Champagne */
|
|||
|
|
.opt-g .p-side { background: #EEE3D2; }
|
|||
|
|
.opt-g .p-divider { background: #D9D0C1; }
|
|||
|
|
.opt-g .p-main { background: #FFFFFF; }
|
|||
|
|
.opt-g .p-side, .opt-g .p-side .p-brand { color: #37322A; }
|
|||
|
|
.opt-g .p-brand .mark { background: #09131A; color: #fff; }
|
|||
|
|
.opt-g .p-nav-item { color: #615D56; }
|
|||
|
|
.opt-g .p-nav-item .ico { color: #615D56; }
|
|||
|
|
.opt-g .p-nav-item.active { background: #09131A; color: #FFFFFF; }
|
|||
|
|
.opt-g .p-nav-item.active .ico { color: #0F6E56; }
|
|||
|
|
.opt-g .p-bar .crumb { color: #09131A; }
|
|||
|
|
.opt-g .p-bar .sub { color: #615D56; }
|
|||
|
|
.opt-g .p-kpi { background: #FCFAF6; border-color: #D9D0C1; }
|
|||
|
|
.opt-g .p-kpi .lbl { color: #615D56; }
|
|||
|
|
.opt-g .p-kpi .delta { color: #0F6E56; }
|
|||
|
|
.opt-g .p-balance { background: #FCFAF6; border-color: #0F6E56; }
|
|||
|
|
.opt-g .p-balance .lbl { color: #615D56; }
|
|||
|
|
.opt-g .p-balance .val { color: #09131A; }
|
|||
|
|
.opt-g .p-balance .runway span { background: #F2EADE; }
|
|||
|
|
.opt-g .p-balance .runway span.f { background: #0F6E56; }
|
|||
|
|
.opt-g .p-row .pn { color: #09131A; }
|
|||
|
|
.opt-g .p-row .sub { color: #615D56; }
|
|||
|
|
.opt-g .p-row .pchip { color: #09131A; }
|
|||
|
|
.opt-g .p-row.sel { background: #09131A; color: #FFFFFF; }
|
|||
|
|
.opt-g .p-row.sel .pn,
|
|||
|
|
.opt-g .p-row.sel .sub,
|
|||
|
|
.opt-g .p-row.sel .pchip { color: #FFFFFF; }
|
|||
|
|
|
|||
|
|
/* Д · Inverted Hero */
|
|||
|
|
.opt-d .p-side { background: #FFFFFF; border-right: 1px solid #BCC6CD; }
|
|||
|
|
.opt-d .p-divider { display: none; }
|
|||
|
|
.opt-d .p-main { background: #DAE3E9; }
|
|||
|
|
.opt-d .p-side, .opt-d .p-side .p-brand { color: #2D3439; }
|
|||
|
|
.opt-d .p-brand .mark { background: #09131A; color: #fff; }
|
|||
|
|
.opt-d .p-nav-item { color: #585F65; }
|
|||
|
|
.opt-d .p-nav-item .ico { color: #585F65; }
|
|||
|
|
.opt-d .p-nav-item.active { background: #09131A; color: #FFFFFF; }
|
|||
|
|
.opt-d .p-nav-item.active .ico { color: #0F6E56; }
|
|||
|
|
.opt-d .p-bar .crumb { color: #0A131A; }
|
|||
|
|
.opt-d .p-bar .sub { color: #585F65; }
|
|||
|
|
.opt-d .p-kpi { background: #FFFFFF; border-color: #BCC6CD; }
|
|||
|
|
.opt-d .p-kpi .lbl { color: #585F65; }
|
|||
|
|
.opt-d .p-kpi .delta { color: #0F6E56; }
|
|||
|
|
.opt-d .p-balance { background: #FFFFFF; border-color: #0F6E56; }
|
|||
|
|
.opt-d .p-balance .lbl { color: #585F65; }
|
|||
|
|
.opt-d .p-balance .val { color: #0A131A; }
|
|||
|
|
.opt-d .p-balance .runway span { background: #D0D9DF; }
|
|||
|
|
.opt-d .p-balance .runway span.f { background: #0F6E56; }
|
|||
|
|
.opt-d .p-row .pn { color: #0A131A; }
|
|||
|
|
.opt-d .p-row .sub { color: #585F65; }
|
|||
|
|
.opt-d .p-row .pchip { color: #0A131A; }
|
|||
|
|
.opt-d .p-row.sel { background: #0A131A; color: #FFFFFF; }
|
|||
|
|
.opt-d .p-row.sel .pn,
|
|||
|
|
.opt-d .p-row.sel .sub,
|
|||
|
|
.opt-d .p-row.sel .pchip { color: #FFFFFF; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<header class="page-h">
|
|||
|
|
<h1>Палитры на выбор · v8</h1>
|
|||
|
|
<p class="meta">5 вариантов · Teal #0F6E56 (брендбук) сохранён везде · все proverено OKLCH + WCAG (palette_options.py)</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- Variant А — Graphite -->
|
|||
|
|
<section class="option opt-a" aria-label="Variant А Graphite Sidebar">
|
|||
|
|
<div class="option-meta">
|
|||
|
|
<span class="option-tag"><span class="seq">А</span>RECOMMENDED</span>
|
|||
|
|
<h2 class="option-name">Graphite Sidebar</h2>
|
|||
|
|
<p class="option-desc">Тёмный графитовый sidebar + холодный near-white main. Линия Linear/Vercel — самый «технологичный».</p>
|
|||
|
|
<div class="option-swatches">
|
|||
|
|
<span class="sw" style="background:#12181C" title="sidebar #12181C"></span>
|
|||
|
|
<span class="sw" style="background:#272F35" title="sidebar-active #272F35"></span>
|
|||
|
|
<span class="sw" style="background:#F1F4F6" title="bg #F1F4F6"></span>
|
|||
|
|
<span class="sw" style="background:#FFFFFF" title="surface #FFFFFF"></span>
|
|||
|
|
<span class="sw" style="background:#0F6E56" title="accent Teal"></span>
|
|||
|
|
<span class="sw" style="background:#32C8A9" title="accent-bright (icon on dark)"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-wcag">
|
|||
|
|
<span class="ok">✓ sidebar/bg 16.18:1</span>
|
|||
|
|
<span class="ok">✓ accent-bright/sidebar 8.52:1</span>
|
|||
|
|
<span class="ok">✓ ink/bg 16.98:1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="preview">
|
|||
|
|
<div class="p-side">
|
|||
|
|
<div class="p-brand"><span class="mark">L</span>Лидпоток</div>
|
|||
|
|
<div class="p-nav">
|
|||
|
|
<div class="p-nav-item active"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>Дашборд</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6"/></svg>Сделки</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg>Канбан</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>Напоминания</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-divider"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-main">
|
|||
|
|
<div class="p-bar"><span class="crumb">Дашборд</span><span class="sub">· 247 лидов · +3 с утра</span></div>
|
|||
|
|
<div class="p-cards">
|
|||
|
|
<div class="p-kpi"><span class="lbl">Лиды · 7д</span><span class="val">247</span><span class="delta">↑ 12.3%</span></div>
|
|||
|
|
<div class="p-kpi"><span class="lbl">Конверсия</span><span class="val">18.4%</span><span class="delta">↑ 2.1pp</span></div>
|
|||
|
|
<div class="p-balance">
|
|||
|
|
<span class="lbl">Баланс · хватит на 4 дня</span>
|
|||
|
|
<span class="val">14 250 ₽</span>
|
|||
|
|
<div class="runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-row sel">
|
|||
|
|
<span class="pa">АС</span>
|
|||
|
|
<span class="pn">Анна Соколова</span>
|
|||
|
|
<span class="sub">· Окна Москва</span>
|
|||
|
|
<span class="pchip"><span class="pdot" style="background:#B94837"></span>Новая</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Variant Б — Forest -->
|
|||
|
|
<section class="option opt-b" aria-label="Variant Б Forest Sidebar">
|
|||
|
|
<div class="option-meta">
|
|||
|
|
<span class="option-tag"><span class="seq">Б</span>BRAND-NATIVE</span>
|
|||
|
|
<h2 class="option-name">Forest Sidebar</h2>
|
|||
|
|
<p class="option-desc">Глубокий тёмно-тиловый sidebar (родственник брендового Teal) + тёплый ivory main. Корпоративная фундаментальность.</p>
|
|||
|
|
<div class="option-swatches">
|
|||
|
|
<span class="sw" style="background:#012019" title="sidebar #012019"></span>
|
|||
|
|
<span class="sw" style="background:#13382F" title="sidebar-active #13382F"></span>
|
|||
|
|
<span class="sw" style="background:#F6F3EC" title="bg #F6F3EC"></span>
|
|||
|
|
<span class="sw" style="background:#FFFDFA" title="surface #FFFDFA"></span>
|
|||
|
|
<span class="sw" style="background:#0F6E56" title="accent Teal"></span>
|
|||
|
|
<span class="sw" style="background:#32C8A9" title="accent-bright"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-wcag">
|
|||
|
|
<span class="ok">✓ sidebar/bg 15.46:1</span>
|
|||
|
|
<span class="ok">✓ accent-bright/sidebar 8.15:1</span>
|
|||
|
|
<span class="ok">✓ ink/bg 16.96:1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="preview">
|
|||
|
|
<div class="p-side">
|
|||
|
|
<div class="p-brand"><span class="mark">L</span>Лидпоток</div>
|
|||
|
|
<div class="p-nav">
|
|||
|
|
<div class="p-nav-item active"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>Дашборд</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6"/></svg>Сделки</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg>Канбан</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>Напоминания</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-divider"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-main">
|
|||
|
|
<div class="p-bar"><span class="crumb">Дашборд</span><span class="sub">· 247 лидов · +3 с утра</span></div>
|
|||
|
|
<div class="p-cards">
|
|||
|
|
<div class="p-kpi"><span class="lbl">Лиды · 7д</span><span class="val">247</span><span class="delta">↑ 12.3%</span></div>
|
|||
|
|
<div class="p-kpi"><span class="lbl">Конверсия</span><span class="val">18.4%</span><span class="delta">↑ 2.1pp</span></div>
|
|||
|
|
<div class="p-balance">
|
|||
|
|
<span class="lbl">Баланс · хватит на 4 дня</span>
|
|||
|
|
<span class="val">14 250 ₽</span>
|
|||
|
|
<div class="runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-row sel">
|
|||
|
|
<span class="pa">АС</span>
|
|||
|
|
<span class="pn">Анна Соколова</span>
|
|||
|
|
<span class="sub">· Окна Москва</span>
|
|||
|
|
<span class="pchip"><span class="pdot" style="background:#B94837"></span>Новая</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Variant В — Slate-Blue -->
|
|||
|
|
<section class="option opt-v" aria-label="Variant В Slate-Blue Financial">
|
|||
|
|
<div class="option-meta">
|
|||
|
|
<span class="option-tag"><span class="seq">В</span>FINANCIAL</span>
|
|||
|
|
<h2 class="option-name">Slate-Blue</h2>
|
|||
|
|
<p class="option-desc">Sidebar — глубокий синий слейт, main — холодный mist. Stripe Atlas/Mercury вайб, финансовый инструмент.</p>
|
|||
|
|
<div class="option-swatches">
|
|||
|
|
<span class="sw" style="background:#131F2C"></span>
|
|||
|
|
<span class="sw" style="background:#2A394A"></span>
|
|||
|
|
<span class="sw" style="background:#E7EEF3"></span>
|
|||
|
|
<span class="sw" style="background:#FFFFFF"></span>
|
|||
|
|
<span class="sw" style="background:#0F6E56"></span>
|
|||
|
|
<span class="sw" style="background:#32C8A9"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-wcag">
|
|||
|
|
<span class="ok">✓ sidebar/bg 14.20:1</span>
|
|||
|
|
<span class="ok">✓ accent-bright/sidebar 7.93:1</span>
|
|||
|
|
<span class="ok">✓ ink/bg 16.02:1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="preview">
|
|||
|
|
<div class="p-side">
|
|||
|
|
<div class="p-brand"><span class="mark">L</span>Лидпоток</div>
|
|||
|
|
<div class="p-nav">
|
|||
|
|
<div class="p-nav-item active"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>Дашборд</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6"/></svg>Сделки</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg>Канбан</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>Напоминания</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-divider"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-main">
|
|||
|
|
<div class="p-bar"><span class="crumb">Дашборд</span><span class="sub">· 247 лидов · +3 с утра</span></div>
|
|||
|
|
<div class="p-cards">
|
|||
|
|
<div class="p-kpi"><span class="lbl">Лиды · 7д</span><span class="val">247</span><span class="delta">↑ 12.3%</span></div>
|
|||
|
|
<div class="p-kpi"><span class="lbl">Конверсия</span><span class="val">18.4%</span><span class="delta">↑ 2.1pp</span></div>
|
|||
|
|
<div class="p-balance">
|
|||
|
|
<span class="lbl">Баланс · хватит на 4 дня</span>
|
|||
|
|
<span class="val">14 250 ₽</span>
|
|||
|
|
<div class="runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-row sel">
|
|||
|
|
<span class="pa">АС</span>
|
|||
|
|
<span class="pn">Анна Соколова</span>
|
|||
|
|
<span class="sub">· Окна Москва</span>
|
|||
|
|
<span class="pchip"><span class="pdot" style="background:#B94837"></span>Новая</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Variant Г — Champagne -->
|
|||
|
|
<section class="option opt-g" aria-label="Variant Г Warm Champagne">
|
|||
|
|
<div class="option-meta">
|
|||
|
|
<span class="option-tag"><span class="seq">Г</span>WARM</span>
|
|||
|
|
<h2 class="option-name">Warm Champagne</h2>
|
|||
|
|
<p class="option-desc">Sidebar — насыщенный кремово-бежевый, main — pure white. Тёплый «кабинет», Notion/Things с бо́льшей строгостью.</p>
|
|||
|
|
<div class="option-swatches">
|
|||
|
|
<span class="sw" style="background:#EEE3D2"></span>
|
|||
|
|
<span class="sw" style="background:#09131A"></span>
|
|||
|
|
<span class="sw" style="background:#FFFFFF"></span>
|
|||
|
|
<span class="sw" style="background:#FCFAF6"></span>
|
|||
|
|
<span class="sw" style="background:#0F6E56"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-wcag">
|
|||
|
|
<span class="fail">✗ sidebar/bg 1.27:1 (формально <3:1)</span>
|
|||
|
|
<span class="ok">✓ ink/bg 18.78:1</span>
|
|||
|
|
<span class="ok">✓ sidebar-text/sidebar 10.01:1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="preview">
|
|||
|
|
<div class="p-side">
|
|||
|
|
<div class="p-brand"><span class="mark">L</span>Лидпоток</div>
|
|||
|
|
<div class="p-nav">
|
|||
|
|
<div class="p-nav-item active"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>Дашборд</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6"/></svg>Сделки</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg>Канбан</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>Напоминания</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-divider"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-main">
|
|||
|
|
<div class="p-bar"><span class="crumb">Дашборд</span><span class="sub">· 247 лидов · +3 с утра</span></div>
|
|||
|
|
<div class="p-cards">
|
|||
|
|
<div class="p-kpi"><span class="lbl">Лиды · 7д</span><span class="val">247</span><span class="delta">↑ 12.3%</span></div>
|
|||
|
|
<div class="p-kpi"><span class="lbl">Конверсия</span><span class="val">18.4%</span><span class="delta">↑ 2.1pp</span></div>
|
|||
|
|
<div class="p-balance">
|
|||
|
|
<span class="lbl">Баланс · хватит на 4 дня</span>
|
|||
|
|
<span class="val">14 250 ₽</span>
|
|||
|
|
<div class="runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-row sel">
|
|||
|
|
<span class="pa">АС</span>
|
|||
|
|
<span class="pn">Анна Соколова</span>
|
|||
|
|
<span class="sub">· Окна Москва</span>
|
|||
|
|
<span class="pchip"><span class="pdot" style="background:#B94837"></span>Новая</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Variant Д — Inverted Hero -->
|
|||
|
|
<section class="option opt-d" aria-label="Variant Д Inverted Hero">
|
|||
|
|
<div class="option-meta">
|
|||
|
|
<span class="option-tag"><span class="seq">Д</span>STRIPE-LIKE</span>
|
|||
|
|
<h2 class="option-name">Inverted Hero</h2>
|
|||
|
|
<p class="option-desc">Sidebar — pure white, main — насыщенный cool grey. Карточки «плавают» над полотном, классика премиум B2B (Stripe Dashboard).</p>
|
|||
|
|
<div class="option-swatches">
|
|||
|
|
<span class="sw" style="background:#FFFFFF"></span>
|
|||
|
|
<span class="sw" style="background:#09131A"></span>
|
|||
|
|
<span class="sw" style="background:#DAE3E9"></span>
|
|||
|
|
<span class="sw" style="background:#FFFFFF"></span>
|
|||
|
|
<span class="sw" style="background:#0F6E56"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="option-wcag">
|
|||
|
|
<span class="fail">✗ sidebar/bg 1.30:1 (компенсируется hairline)</span>
|
|||
|
|
<span class="ok">✓ ink/bg 14.41:1</span>
|
|||
|
|
<span class="ok">✓ accent/bg 4.76:1</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="preview">
|
|||
|
|
<div class="p-side">
|
|||
|
|
<div class="p-brand"><span class="mark">L</span>Лидпоток</div>
|
|||
|
|
<div class="p-nav">
|
|||
|
|
<div class="p-nav-item active"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>Дашборд</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6"/></svg>Сделки</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/></svg>Канбан</div>
|
|||
|
|
<div class="p-nav-item"><svg class="ico" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>Напоминания</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-main">
|
|||
|
|
<div class="p-bar"><span class="crumb">Дашборд</span><span class="sub">· 247 лидов · +3 с утра</span></div>
|
|||
|
|
<div class="p-cards">
|
|||
|
|
<div class="p-kpi"><span class="lbl">Лиды · 7д</span><span class="val">247</span><span class="delta">↑ 12.3%</span></div>
|
|||
|
|
<div class="p-kpi"><span class="lbl">Конверсия</span><span class="val">18.4%</span><span class="delta">↑ 2.1pp</span></div>
|
|||
|
|
<div class="p-balance">
|
|||
|
|
<span class="lbl">Баланс · хватит на 4 дня</span>
|
|||
|
|
<span class="val">14 250 ₽</span>
|
|||
|
|
<div class="runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-row sel">
|
|||
|
|
<span class="pa">АС</span>
|
|||
|
|
<span class="pn">Анна Соколова</span>
|
|||
|
|
<span class="sub">· Окна Москва</span>
|
|||
|
|
<span class="pchip"><span class="pdot" style="background:#B94837"></span>Новая</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|