c090bfcf47
Full project: Svelte 5 frontend, Vite 7 backend API, Pug email templates (email-gen), Docker deployment. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
908 lines
60 KiB
HTML
908 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Aspekter — Визуальный конструктор email-рассылок</title>
|
||
<link rel="icon" type="image/jpeg" href="/favicon.jpg" />
|
||
<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=Onest:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #130F33;
|
||
--bg2: #0e0b28;
|
||
--bg3: #1c1848;
|
||
--bgw: #ffffff;
|
||
--bgg: #f5f6fb;
|
||
--accent: #7ED0D6;
|
||
--text: #ffffff;
|
||
--textd: #130F33;
|
||
--muted: rgba(255,255,255,0.5);
|
||
--border: rgba(126,208,214,0.15);
|
||
--bord-w: rgba(19,15,51,0.1);
|
||
--max: 1216px;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'Onest', -apple-system, sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* NAV */
|
||
nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
background: var(--bg2);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-inner {
|
||
max-width: var(--max); margin: 0 auto; padding: 0 40px;
|
||
height: 72px; display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.nav-logo { font-size: 20px; font-weight: 800; letter-spacing: 0.06em; color: var(--text); text-decoration: none; }
|
||
.nav-logo span { color: var(--accent); }
|
||
|
||
/* BUTTONS */
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 14px 36px; min-height: 54px;
|
||
font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 700;
|
||
letter-spacing: 0.02em; text-decoration: none; border: none; cursor: pointer;
|
||
transition: background 0.2s, color 0.2s, transform 0.15s;
|
||
}
|
||
.btn:hover { transform: translateY(-1px); }
|
||
.btn-accent { background: var(--accent); color: var(--textd); }
|
||
.btn-accent:hover { background: #9ee3e9; }
|
||
.btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
|
||
.btn-outline:hover { background: var(--accent); color: var(--textd); }
|
||
.btn-dark { background: var(--textd); color: var(--text); }
|
||
.btn-dark:hover { background: #1e1850; }
|
||
.btn-sm { padding: 10px 24px; min-height: 42px; font-size: 14px; }
|
||
.btn-white { background: var(--bgw); color: var(--textd); }
|
||
.btn-white:hover { background: #eef0fc; }
|
||
|
||
/* CONTAINERS */
|
||
.wrap { max-width: var(--max); margin: 0 auto; }
|
||
|
||
/* SECTION TYPES */
|
||
.s { padding: 100px 40px; }
|
||
.s-dark { background: var(--bg); }
|
||
.s-navy { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
.s-deep { background: var(--bg3); }
|
||
.s-white { background: var(--bgw); color: var(--textd); }
|
||
.s-gray { background: var(--bgg); color: var(--textd); }
|
||
.s-accent { background: var(--accent); }
|
||
|
||
/* LABELS */
|
||
.lbl {
|
||
display: inline-block; font-size: 11px; font-weight: 800;
|
||
letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px; margin-bottom: 24px;
|
||
}
|
||
.s-dark .lbl, .s-navy .lbl, .s-deep .lbl { background: rgba(126,208,214,0.1); color: var(--accent); }
|
||
.s-white .lbl, .s-gray .lbl { background: rgba(19,15,51,0.07); color: var(--textd); }
|
||
.s-accent .lbl { background: rgba(19,15,51,0.12); color: var(--textd); }
|
||
|
||
/* SECTION TITLES */
|
||
.h2 {
|
||
font-size: clamp(32px, 4vw, 52px); font-weight: 900;
|
||
letter-spacing: -0.025em; line-height: 1.04; margin-bottom: 18px;
|
||
}
|
||
.s-dark .h2, .s-navy .h2, .s-deep .h2 { color: var(--text); }
|
||
.s-white .h2, .s-gray .h2 { color: var(--textd); }
|
||
.s-accent .h2 { color: var(--textd); }
|
||
.h2 em { font-style: normal; }
|
||
.s-dark .h2 em, .s-navy .h2 em, .s-deep .h2 em { color: var(--accent); }
|
||
.s-white .h2 em, .s-gray .h2 em { color: #162668; }
|
||
.s-accent .h2 em { color: rgba(19,15,51,0.5); }
|
||
|
||
.lead {
|
||
font-size: 18px; font-weight: 400; line-height: 1.7;
|
||
max-width: 580px; margin-bottom: 56px;
|
||
}
|
||
.s-dark .lead, .s-navy .lead, .s-deep .lead { color: var(--muted); }
|
||
.s-white .lead, .s-gray .lead { color: rgba(19,15,51,0.6); }
|
||
.s-accent .lead { color: rgba(19,15,51,0.65); }
|
||
|
||
/* GRID WALLS (cells separated by 2px border lines) */
|
||
.wall {
|
||
display: grid; gap: 2px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.s-white .wall, .s-gray .wall { background: var(--bord-w); border-color: var(--bord-w); }
|
||
.wall-2 { grid-template-columns: 1fr 1fr; }
|
||
.wall-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.wall-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
||
|
||
.cell {
|
||
padding: 44px 40px;
|
||
}
|
||
.s-dark .cell, .s-navy .cell, .s-deep .cell { background: var(--bg); }
|
||
.s-white .cell { background: var(--bgw); }
|
||
.s-gray .cell { background: var(--bgg); }
|
||
|
||
.cell-n {
|
||
font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
|
||
text-transform: uppercase; margin-bottom: 16px;
|
||
}
|
||
.s-dark .cell-n, .s-navy .cell-n, .s-deep .cell-n { color: rgba(126,208,214,0.6); }
|
||
.s-white .cell-n, .s-gray .cell-n { color: rgba(22,38,104,0.4); }
|
||
|
||
.cell-icon { font-size: 32px; margin-bottom: 18px; line-height: 1; }
|
||
|
||
.cell-title {
|
||
font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
|
||
line-height: 1.2; margin-bottom: 12px;
|
||
}
|
||
.s-dark .cell-title, .s-navy .cell-title, .s-deep .cell-title { color: var(--text); }
|
||
.s-white .cell-title, .s-gray .cell-title { color: var(--textd); }
|
||
|
||
.cell-desc { font-size: 15px; line-height: 1.7; }
|
||
.s-dark .cell-desc, .s-navy .cell-desc, .s-deep .cell-desc { color: var(--muted); }
|
||
.s-white .cell-desc, .s-gray .cell-desc { color: rgba(19,15,51,0.65); }
|
||
|
||
/* TAGS */
|
||
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
|
||
.tag {
|
||
font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 11px;
|
||
}
|
||
.s-dark .tag, .s-navy .tag, .s-deep .tag { background: rgba(126,208,214,0.08); color: var(--accent); }
|
||
.s-white .tag, .s-gray .tag { background: rgba(22,38,104,0.07); color: #162668; }
|
||
|
||
/* TWO-COL SPLIT */
|
||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
|
||
.split.rev { direction: rtl; }
|
||
.split.rev > * { direction: ltr; }
|
||
|
||
/* CHECKLIST */
|
||
.checks { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
|
||
.checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.55; }
|
||
.s-dark .checks li, .s-navy .checks li, .s-deep .checks li { color: var(--muted); }
|
||
.s-white .checks li, .s-gray .checks li { color: rgba(19,15,51,0.65); }
|
||
.chk {
|
||
width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.s-dark .chk, .s-navy .chk, .s-deep .chk { background: rgba(126,208,214,0.12); }
|
||
.s-white .chk, .s-gray .chk { background: rgba(22,38,104,0.09); }
|
||
.chk svg { width: 11px; height: 11px; }
|
||
|
||
/* VISUAL BOX */
|
||
.vbox { border: 1px solid var(--border); overflow: hidden; }
|
||
.s-white .vbox, .s-gray .vbox { border-color: var(--bord-w); }
|
||
.vbox-head {
|
||
padding: 12px 20px; font-size: 11px; font-weight: 800;
|
||
letter-spacing: 0.1em; text-transform: uppercase;
|
||
}
|
||
.s-dark .vbox-head, .s-navy .vbox-head, .s-deep .vbox-head {
|
||
background: var(--bg2); border-bottom: 1px solid var(--border); color: var(--accent);
|
||
}
|
||
.s-white .vbox-head, .s-gray .vbox-head {
|
||
background: rgba(22,38,104,0.05); border-bottom: 1px solid var(--bord-w); color: #162668;
|
||
}
|
||
.vbox-body { padding: 20px; }
|
||
|
||
/* STEPS (3-col) */
|
||
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); margin-top: 56px; }
|
||
.step-cell { padding: 48px 36px; }
|
||
.s-dark .step-cell, .s-navy .step-cell { background: var(--bg); }
|
||
.s-white .step-cell, .s-gray .step-cell { background: var(--bgw); }
|
||
.step-n {
|
||
font-size: 68px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 22px;
|
||
}
|
||
.s-dark .step-n, .s-navy .step-n { color: rgba(255,255,255,0.06); }
|
||
.s-white .step-n { color: rgba(19,15,51,0.06); }
|
||
.step-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
|
||
.s-dark .step-title, .s-navy .step-title { color: var(--text); }
|
||
.s-white .step-title { color: var(--textd); }
|
||
.step-desc { font-size: 15px; line-height: 1.7; }
|
||
.s-dark .step-desc, .s-navy .step-desc { color: var(--muted); }
|
||
.s-white .step-desc { color: rgba(19,15,51,0.6); }
|
||
|
||
/* ═══ HERO ═══ */
|
||
.hero { background: var(--bg); padding: 96px 40px 80px; position: relative; overflow: hidden; }
|
||
.hero::before {
|
||
content: ''; position: absolute; top: -150px; right: -100px;
|
||
width: 600px; height: 600px;
|
||
background: radial-gradient(circle, rgba(126,208,214,0.07) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
.hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
||
.hero-lbl {
|
||
display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
|
||
text-transform: uppercase; padding: 7px 14px; margin-bottom: 26px;
|
||
background: rgba(126,208,214,0.1); color: var(--accent);
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(40px, 5vw, 64px); font-weight: 900; line-height: 1.03;
|
||
letter-spacing: -0.025em; margin-bottom: 22px;
|
||
}
|
||
.hero h1 em { font-style: normal; color: var(--accent); }
|
||
.hero-sub { font-size: 18px; color: var(--muted); line-height: 1.7; margin-bottom: 36px; max-width: 440px; }
|
||
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
|
||
|
||
/* Mockup */
|
||
.mockup { background: var(--bg3); border: 1px solid var(--border); overflow: hidden; }
|
||
.mockup-bar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 11px 18px; display: flex; align-items: center; gap: 7px; }
|
||
.m-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
.mockup-layout { display: grid; grid-template-columns: 188px 1fr; }
|
||
.m-sidebar { background: var(--bg2); border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 5px; }
|
||
.m-slbl { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.18); padding: 0 4px; margin-bottom: 3px; }
|
||
.m-item { padding: 8px 10px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 7px; }
|
||
.m-item.on { background: rgba(126,208,214,0.1); border: 1px solid rgba(126,208,214,0.2); color: var(--accent); }
|
||
.m-item-ic { width: 14px; height: 14px; background: rgba(126,208,214,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; }
|
||
.m-canvas { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
|
||
.m-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
||
.m-tabs { display: flex; gap: 2px; }
|
||
.m-tab { font-size: 10px; font-weight: 800; padding: 4px 10px; color: rgba(255,255,255,0.22); }
|
||
.m-tab.on { background: rgba(126,208,214,0.1); color: var(--accent); }
|
||
.m-gender { display: flex; gap: 2px; }
|
||
.m-g { font-size: 10px; font-weight: 800; padding: 4px 9px; color: rgba(255,255,255,0.22); }
|
||
.m-g.f { background: rgba(126,208,214,0.12); color: var(--accent); }
|
||
.m-banner { height: 56px; background: linear-gradient(90deg, #1c1848 0%, #251f5a 100%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255,255,255,0.12); }
|
||
.m-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
|
||
.m-prod { border: 1px solid var(--border); overflow: hidden; }
|
||
.m-prod-img { aspect-ratio: 3/4; background: linear-gradient(160deg, #1c1848, #0e0b28); }
|
||
.m-prod-info { padding: 4px 6px; font-size: 8px; color: rgba(255,255,255,0.3); }
|
||
.m-prod-price { font-weight: 700; color: rgba(255,255,255,0.6); margin-top: 1px; font-size: 9px; }
|
||
.m-copy-bar { display: flex; gap: 5px; justify-content: flex-end; }
|
||
.m-btn { font-size: 10px; font-weight: 700; padding: 5px 12px; background: rgba(126,208,214,0.1); color: var(--accent); border: 1px solid rgba(126,208,214,0.2); }
|
||
|
||
/* ═══ SMALL VISUALS ═══ */
|
||
|
||
/* preview modes */
|
||
.pv-tabs { display: flex; border-bottom: 1px solid var(--border); }
|
||
.pv-tab { padding: 9px 18px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: rgba(255,255,255,0.22); border-bottom: 2px solid transparent; }
|
||
.pv-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
|
||
.pv-screen { aspect-ratio: 16/9; background: linear-gradient(160deg, #1c1848, #0e0b28); display: flex; align-items: center; justify-content: center; }
|
||
.pv-inner { width: 60%; display: flex; flex-direction: column; gap: 7px; }
|
||
.pv-line { height: 9px; background: rgba(255,255,255,0.05); }
|
||
.pv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 5px; }
|
||
.pv-p { aspect-ratio: 2/3; background: rgba(126,208,214,0.05); border: 1px solid var(--border); }
|
||
|
||
/* gender */
|
||
.gv { display: flex; border: 1px solid var(--border); overflow: hidden; margin-top: 18px; }
|
||
.gv-btn { flex: 1; padding: 13px; text-align: center; font-size: 13px; font-weight: 800; }
|
||
.gv-btn.f { background: rgba(126,208,214,0.12); color: var(--accent); }
|
||
.gv-btn.m { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.22); }
|
||
.gv-sep { width: 42px; background: rgba(126,208,214,0.06); border-left: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--accent); }
|
||
|
||
/* stock */
|
||
.stock { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; }
|
||
.stock-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); font-size: 12px; }
|
||
.stock-thumb { width: 30px; height: 30px; background: rgba(126,208,214,0.07); flex-shrink: 0; }
|
||
.stock-name { flex: 1; font-weight: 600; color: rgba(255,255,255,0.75); }
|
||
.badge { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; }
|
||
.badge-r { background: rgba(255,80,80,0.12); color: #ff6b6b; }
|
||
.badge-g { background: rgba(126,208,214,0.12); color: var(--accent); }
|
||
|
||
/* id pool */
|
||
.id-pool { border: 1px solid var(--border); overflow: hidden; margin-top: 20px; }
|
||
.id-head { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 8px 14px; font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; display: flex; justify-content: space-between; }
|
||
.id-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
|
||
.id-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; }
|
||
.id-lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35); }
|
||
.id-val { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); background: rgba(126,208,214,0.06); padding: 4px 10px; border: 1px solid var(--border); }
|
||
|
||
/* plan */
|
||
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
|
||
.plan-row { display: grid; grid-template-columns: 72px 1fr 68px; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); }
|
||
.plan-row.active { border-color: rgba(126,208,214,0.3); background: rgba(126,208,214,0.06); }
|
||
.plan-date { font-size: 12px; font-weight: 700; }
|
||
.plan-row.active .plan-date { color: var(--accent); }
|
||
.plan-row:not(.active) .plan-date { color: rgba(255,255,255,0.3); }
|
||
.plan-title { font-size: 13px; font-weight: 600; }
|
||
.plan-row.active .plan-title { color: rgba(255,255,255,0.9); }
|
||
.plan-row:not(.active) .plan-title { color: rgba(255,255,255,0.5); }
|
||
.plan-status { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; text-align: center; }
|
||
.st-done { background: rgba(126,208,214,0.12); color: var(--accent); }
|
||
.st-work { background: rgba(255,190,0,0.1); color: rgba(255,200,0,0.8); }
|
||
.st-plan { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.2); }
|
||
|
||
/* ftp */
|
||
.ftp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 18px; }
|
||
.ftp-thumb { aspect-ratio: 1; background: rgba(126,208,214,0.05); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
||
.ftp-thumb.on { border-color: var(--accent); background: rgba(126,208,214,0.1); }
|
||
.ftp-upload { margin-top: 10px; padding: 10px; border: 2px dashed rgba(126,208,214,0.2); text-align: center; font-size: 12px; font-weight: 700; color: rgba(126,208,214,0.4); }
|
||
|
||
/* text toolbar */
|
||
.txt-toolbar { display: flex; gap: 4px; margin-top: 18px; flex-wrap: wrap; }
|
||
.txt-btn { font-size: 11px; font-weight: 700; padding: 7px 12px; background: rgba(126,208,214,0.08); color: var(--accent); border: 1px solid rgba(126,208,214,0.15); }
|
||
|
||
/* spell */
|
||
.spell-line { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); font-size: 12px; margin-top: 18px; }
|
||
.spell-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; flex-shrink: 0; }
|
||
.spell-word { color: rgba(255,255,255,0.7); flex: 1; }
|
||
.spell-hint { font-size: 11px; color: var(--accent); font-weight: 700; }
|
||
|
||
/* link check */
|
||
.lchk { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
|
||
.lchk-row { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--border); font-size: 11px; }
|
||
.lchk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||
.lchk-url { flex: 1; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.lchk-st { font-size: 10px; font-weight: 800; }
|
||
.ok { background: rgba(74,222,128,0.08); }
|
||
.ok .lchk-dot { background: #4ade80; }
|
||
.ok .lchk-st { color: #4ade80; }
|
||
.err .lchk-dot { background: #ff6b6b; }
|
||
.err .lchk-st { color: #ff6b6b; }
|
||
|
||
/* presets */
|
||
.preset-list { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
|
||
.preset-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); font-size: 13px; }
|
||
.preset-ic { width: 28px; height: 28px; background: rgba(126,208,214,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
||
.preset-name { flex: 1; font-weight: 600; color: rgba(255,255,255,0.8); }
|
||
.preset-date { font-size: 11px; color: rgba(255,255,255,0.25); }
|
||
|
||
/* history */
|
||
.hist-list { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
|
||
.hist-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); font-size: 12px; }
|
||
.hist-time { font-size: 11px; font-weight: 700; color: rgba(126,208,214,0.7); width: 72px; flex-shrink: 0; }
|
||
.hist-label { flex: 1; color: rgba(255,255,255,0.55); }
|
||
.hist-restore { font-size: 10px; font-weight: 800; color: var(--accent); }
|
||
|
||
/* cert */
|
||
.cert-blocks { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
|
||
.cert-block { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); font-size: 12px; }
|
||
.cert-drag { color: rgba(255,255,255,0.15); font-size: 14px; cursor: grab; }
|
||
.cert-text { flex: 1; color: rgba(255,255,255,0.6); }
|
||
.cert-del { font-size: 14px; color: rgba(255,80,80,0.4); }
|
||
|
||
/* stats */
|
||
.stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; background: var(--border); border: 1px solid var(--border); margin-top: 20px; }
|
||
.stat-cell { background: var(--bg); padding: 20px; }
|
||
.stat-val { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 4px; }
|
||
.stat-lbl { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.35); }
|
||
|
||
/* user table */
|
||
.user-table { border: 1px solid var(--border); overflow: hidden; margin-top: 18px; }
|
||
.user-row { display: grid; grid-template-columns: 1fr 80px 100px 60px; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
|
||
.user-row:last-child { border-bottom: none; }
|
||
.user-name { font-weight: 700; color: rgba(255,255,255,0.8); }
|
||
.user-role { font-size: 10px; font-weight: 800; padding: 3px 9px; }
|
||
.role-admin { background: rgba(126,208,214,0.12); color: var(--accent); }
|
||
.role-user { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); }
|
||
.user-last { font-size: 11px; color: rgba(255,255,255,0.3); }
|
||
.user-edit { font-size: 11px; font-weight: 700; color: rgba(126,208,214,0.5); }
|
||
|
||
/* quick edit */
|
||
.qe-popup { border: 1px solid rgba(126,208,214,0.35); background: var(--bg2); padding: 14px; margin-top: 18px; }
|
||
.qe-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(126,208,214,0.5); margin-bottom: 8px; }
|
||
.qe-field { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 9px 12px; font-family: 'Onest', sans-serif; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 500; resize: none; }
|
||
.qe-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
|
||
.qe-btn { font-size: 11px; font-weight: 700; padding: 6px 14px; }
|
||
.qe-btn.ok { background: var(--accent); color: var(--textd); }
|
||
.qe-btn.cl { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); }
|
||
|
||
/* CTA */
|
||
.cta-s { background: var(--accent); padding: 100px 40px; text-align: center; }
|
||
.cta-s .wrap { max-width: 680px; }
|
||
.cta-s h2 { font-size: clamp(36px, 5vw, 58px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; color: var(--textd); margin-bottom: 18px; }
|
||
.cta-s p { font-size: 18px; color: rgba(19,15,51,0.6); line-height: 1.65; margin-bottom: 36px; }
|
||
|
||
/* FOOTER */
|
||
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 44px 40px; }
|
||
.foot-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
|
||
.foot-logo { font-size: 17px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
|
||
.foot-copy { font-size: 13px; color: rgba(255,255,255,0.22); }
|
||
.foot-link { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
|
||
.foot-link:hover { text-decoration: underline; }
|
||
|
||
/* RESPONSIVE */
|
||
@media (max-width: 980px) {
|
||
.nav-inner { padding: 0 20px; }
|
||
.hero { padding: 56px 20px; }
|
||
.hero-inner, .split { grid-template-columns: 1fr; }
|
||
.split.rev { direction: ltr; }
|
||
.mockup { display: none; }
|
||
.hero h1 { font-size: 38px; }
|
||
.s { padding: 64px 20px; }
|
||
.wall-2, .wall-3, .wall-4 { grid-template-columns: 1fr; }
|
||
.steps { grid-template-columns: 1fr; }
|
||
.stats-row { grid-template-columns: 1fr 1fr; }
|
||
footer { padding: 28px 20px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a href="/" class="nav-logo">ASPEKT<span>ER</span></a>
|
||
<a href="/builder" class="btn btn-accent btn-sm">Войти →</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div>
|
||
<div class="hero-lbl">Профессиональный email-конструктор</div>
|
||
<h1>Письма, которые<br /><em>продают.</em><br />Без кода.</h1>
|
||
<p class="hero-sub">
|
||
Единый инструмент для маркетолога: план → конструктор → проверка →
|
||
экспорт. Всё в одном интерфейсе, без переключений между сервисами.
|
||
</p>
|
||
<div class="hero-btns">
|
||
<a href="/builder" class="btn btn-accent">Войти в систему →</a>
|
||
</div>
|
||
</div>
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="m-dot" style="background:#ff5f57"></div>
|
||
<div class="m-dot" style="background:#febc2e"></div>
|
||
<div class="m-dot" style="background:#28c840"></div>
|
||
</div>
|
||
<div class="mockup-layout">
|
||
<div class="m-sidebar">
|
||
<div class="m-slbl">Блоки</div>
|
||
<div class="m-item"><div class="m-item-ic">▬</div>Баннер</div>
|
||
<div class="m-item on"><div class="m-item-ic">▦</div>4 товара</div>
|
||
<div class="m-item"><div class="m-item-ic">▦</div>6 товаров</div>
|
||
<div class="m-item"><div class="m-item-ic">—</div>Разделитель</div>
|
||
<div class="m-item"><div class="m-item-ic">¶</div>Текст</div>
|
||
<div class="m-item"><div class="m-item-ic">◉</div>Кнопка</div>
|
||
</div>
|
||
<div class="m-canvas">
|
||
<div class="m-toolbar">
|
||
<div class="m-tabs">
|
||
<div class="m-tab">PUG</div>
|
||
<div class="m-tab on">Превью</div>
|
||
<div class="m-tab">HTML</div>
|
||
</div>
|
||
<div class="m-gender">
|
||
<div class="m-g f">Жен</div>
|
||
<div class="m-g">Муж</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-banner">BANNER</div>
|
||
<div class="m-products">
|
||
<div class="m-prod"><div class="m-prod-img"></div><div class="m-prod-info"><div>Платье</div><div class="m-prod-price">18 990 ₽</div></div></div>
|
||
<div class="m-prod"><div class="m-prod-img" style="background:linear-gradient(160deg,#1e1648,#130F33)"></div><div class="m-prod-info"><div>Блузка</div><div class="m-prod-price">12 490 ₽</div></div></div>
|
||
<div class="m-prod"><div class="m-prod-img" style="background:linear-gradient(160deg,#16183a,#0e0b28)"></div><div class="m-prod-info"><div>Жакет</div><div class="m-prod-price">24 990 ₽</div></div></div>
|
||
<div class="m-prod"><div class="m-prod-img" style="background:linear-gradient(160deg,#1a1540,#130F33)"></div><div class="m-prod-info"><div>Юбка</div><div class="m-prod-price">9 490 ₽</div></div></div>
|
||
</div>
|
||
<div class="m-copy-bar">
|
||
<div class="m-btn">Копировать HTML</div>
|
||
<div class="m-btn">↓ Скачать</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── КОНСТРУКТОР ── -->
|
||
<section class="s s-white">
|
||
<div class="wrap">
|
||
<div class="lbl">Конструктор</div>
|
||
<h2 class="h2">Собери письмо<br /><em>из готовых блоков</em></h2>
|
||
<p class="lead">Drag & drop, поиск блоков, collapse, история — всё для быстрой сборки без кода.</p>
|
||
|
||
<div class="wall wall-2">
|
||
<div class="cell">
|
||
<div class="cell-icon">⚡</div>
|
||
<div class="cell-title">Блоки и их управление</div>
|
||
<div class="cell-desc">Добавляй блоки через поиск, меняй порядок перетаскиванием или стрелками. Сворачивай ненужные блоки — рабочая область остаётся чистой. Переиспользуй любимые блоки через Quick Blocks на панели.</div>
|
||
<div class="tags"><span class="tag">Drag & Drop</span><span class="tag">Поиск блоков</span><span class="tag">Collapse</span><span class="tag">Quick Blocks</span></div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">📦</div>
|
||
<div class="cell-title">Пресеты сборок</div>
|
||
<div class="cell-desc">Сохрани текущую структуру письма как пресет — и применяй к следующим кампаниям одним кликом. Поиск, сортировка, удаление. Пресеты хранятся на сервере и доступны всей команде.</div>
|
||
<div class="preset-list">
|
||
<div class="preset-item"><div class="preset-ic">📧</div><div class="preset-name">Баннер + 4 товара + кнопка</div><div class="preset-date">12.03</div></div>
|
||
<div class="preset-item"><div class="preset-ic">📧</div><div class="preset-name">Sale: баннер + 6 товаров × 2</div><div class="preset-date">05.03</div></div>
|
||
<div class="preset-item"><div class="preset-ic">📧</div><div class="preset-name">Welcome-серия</div><div class="preset-date">18.02</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">🕐</div>
|
||
<div class="cell-title">История изменений</div>
|
||
<div class="cell-desc">Каждое сохранение создаёт снимок. Откати письмо к любой точке в истории — без потери текущей версии. Просматривай все снимки с датой и временем.</div>
|
||
<div class="hist-list">
|
||
<div class="hist-item"><div class="hist-time">14:32</div><div class="hist-label">Добавлен блок «4 товара»</div><div class="hist-restore">↩ Откат</div></div>
|
||
<div class="hist-item"><div class="hist-time">14:18</div><div class="hist-label">Изменён текст баннера</div><div class="hist-restore">↩ Откат</div></div>
|
||
<div class="hist-item"><div class="hist-time">13:55</div><div class="hist-label">Создано письмо</div><div class="hist-restore">↩ Откат</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">💾</div>
|
||
<div class="cell-title">Автосохранение и Ctrl+S</div>
|
||
<div class="cell-desc">Изменения сохраняются автоматически через 600мс после остановки. Индикатор-точка в интерфейсе показывает статус: сохраняется / сохранено / ошибка. Принудительное сохранение — Ctrl+S.</div>
|
||
<div class="tags"><span class="tag">Автосохранение</span><span class="tag">Ctrl+S</span><span class="tag">Ctrl+Z — Undo</span><span class="tag">Ctrl+G — Рендер</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── РЕДАКТИРОВАНИЕ ТЕКСТА ── -->
|
||
<section class="s s-dark">
|
||
<div class="wrap">
|
||
<div class="lbl">Редактор текста</div>
|
||
<h2 class="h2">Текст,<br /><em>который выглядит правильно</em></h2>
|
||
<p class="lead">Встроенные инструменты форматирования — типограф, жирный, переносы — прямо в интерфейсе конструктора.</p>
|
||
|
||
<div class="split">
|
||
<div>
|
||
<ul class="checks">
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Типограф</strong> — автоматически исправляет кавычки, тире, пробелы по правилам русской типографики (SOAP API)</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Жирный</strong> — оборачивает выделенный текст в span с font-weight: 700</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Авто-перенос</strong> — умно разбивает текст по ширине блока, предотвращает висячие слова</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Перенос строки</strong> и <strong>буллет</strong> — быстрая вставка <br> и • кнопками</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Вставка ссылки</strong> с настраиваемым шаблоном UTM-меток</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><strong>Shift+Enter</strong> — ручной перенос строки прямо в поле редактирования</li>
|
||
</ul>
|
||
<div class="txt-toolbar">
|
||
<div class="txt-btn">Тф</div>
|
||
<div class="txt-btn"><b>B</b></div>
|
||
<div class="txt-btn">⏎</div>
|
||
<div class="txt-btn">•</div>
|
||
<div class="txt-btn">↵ Авто</div>
|
||
<div class="txt-btn">🔗 Ссылка</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="vbox">
|
||
<div class="vbox-head">⚡ Quick Edit — редактирование в превью</div>
|
||
<div class="vbox-body">
|
||
<p style="font-size:13px;color:var(--muted);margin-bottom:12px;">Кликни на любой элемент в превью — появится плавающий попап для быстрого редактирования прямо на месте. Без поиска поля в списке блоков.</p>
|
||
<div class="qe-popup">
|
||
<div class="qe-label">Текст баннера</div>
|
||
<textarea class="qe-field" rows="2">Весенняя коллекция 2026</textarea>
|
||
<div class="qe-foot">
|
||
<div class="qe-btn cl">Отмена</div>
|
||
<div class="qe-btn ok">Сохранить</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── ПРЕВЬЮ И ЭКСПОРТ ── -->
|
||
<section class="s s-gray">
|
||
<div class="wrap">
|
||
<div class="lbl">Предпросмотр</div>
|
||
<h2 class="h2">Три режима.<br /><em>Один клик.</em></h2>
|
||
<p class="lead">Превью, HTML-код и Pug-исходник — в правой панели. Рендер кэшируется по хэшу контента — повторный просмотр мгновенный.</p>
|
||
|
||
<div class="wall wall-3">
|
||
<div class="cell">
|
||
<div class="cell-n">Режим 1</div>
|
||
<div class="cell-title">Живое превью</div>
|
||
<div class="cell-desc">Отрендеренное письмо в iframe. Масштаб 40–100% — меняй ползунком, значение сохраняется в профиле. Рендер запускается автоматически или по Ctrl+G.</div>
|
||
<div class="preview-vis" style="margin-top:16px;">
|
||
<div class="pv-tabs">
|
||
<div class="pv-tab">PUG</div>
|
||
<div class="pv-tab on">ПРЕВЬЮ</div>
|
||
<div class="pv-tab">HTML</div>
|
||
</div>
|
||
<div class="pv-screen">
|
||
<div class="pv-inner">
|
||
<div class="pv-line wide"></div>
|
||
<div class="pv-grid3">
|
||
<div class="pv-p"></div><div class="pv-p"></div><div class="pv-p"></div>
|
||
</div>
|
||
<div class="pv-line mid" style="width:70%;margin-top:5px;"></div>
|
||
<div class="pv-line" style="width:45%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-n">Режим 2</div>
|
||
<div class="cell-title">HTML-код</div>
|
||
<div class="cell-desc">Готовый HTML для вставки в ESP. Копируй в буфер одной кнопкой — с нормализацией разметки. Или скачивай как файл.</div>
|
||
<div class="tags" style="margin-top:20px;">
|
||
<span class="tag">Копировать HTML</span>
|
||
<span class="tag">Скачать .html</span>
|
||
<span class="tag">Нормализация</span>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-n">Режим 3</div>
|
||
<div class="cell-title">Pug-исходник</div>
|
||
<div class="cell-desc">Собранный Pug-код письма — для версионирования и архива. Копируй или скачивай. Можно импортировать обратно в другой проект.</div>
|
||
<div class="tags" style="margin-top:20px;">
|
||
<span class="tag">Копировать PUG</span>
|
||
<span class="tag">Скачать .pug</span>
|
||
<span class="tag">Импорт блоков</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── ГЕНДЕРНАЯ СЕГМЕНТАЦИЯ ── -->
|
||
<section class="s s-dark">
|
||
<div class="wrap">
|
||
<div class="split">
|
||
<div>
|
||
<div class="lbl">Сегментация</div>
|
||
<h2 class="h2">Одно письмо —<br /><em>две версии</em></h2>
|
||
<p class="lead">Женская и мужская подборка в одном файле. Переключение — одной кнопкой, рендер — мгновенно.</p>
|
||
<ul class="checks">
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Кнопки <b>Ж / М</b> — рендер с соответствующим хедером и футером</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Кнопка <b>⇅</b> — переставляет блоки относительно блока-разделителя</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Каждый блок получает сегмент: Общий / Женский / Мужской</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Пути хедера/футера настраиваются в настройках проекта</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Версии Ж и М кэшируются <b>отдельно</b> — скорость не страдает</li>
|
||
</ul>
|
||
<div class="gv">
|
||
<div class="gv-btn f">♀ Женская версия</div>
|
||
<div class="gv-sep">⇅</div>
|
||
<div class="gv-btn m">♂ Мужская версия</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="vbox">
|
||
<div class="vbox-head">📦 Пул ID из плана</div>
|
||
<div class="vbox-body">
|
||
<p style="font-size:13px;color:var(--muted);margin-bottom:12px;">Вставь список ID товаров — система автоматически распределит их по блокам (3–4 ID на блок). Женские ID — первыми, мужские — следом. Счётчик показывает использованные/всего.</p>
|
||
<div class="id-pool">
|
||
<div class="id-head"><span>Пул ID</span><span style="color:rgba(126,208,214,0.5)">8 / 20 использовано</span></div>
|
||
<div class="id-body">
|
||
<div class="id-row"><div class="id-lbl">Блок 1 (Жен)</div><div class="id-val">112233, 445566, 778899, 001122</div></div>
|
||
<div class="id-row"><div class="id-lbl">Блок 2 (Муж)</div><div class="id-val">334455, 667788, 990011, 223344</div></div>
|
||
<div class="id-row"><div class="id-lbl">Осталось</div><div class="id-val" style="color:var(--accent)">12 ID в очереди</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── ПРОВЕРКА НАЛИЧИЯ ── -->
|
||
<section class="s s-white">
|
||
<div class="wrap">
|
||
<div class="lbl">Контроль качества</div>
|
||
<h2 class="h2">Ни один<br /><em>«нет в наличии»</em> не пройдёт</h2>
|
||
<p class="lead">Система парсит XML-фид VipAvenue и автоматически находит проблемные товары прямо в превью письма.</p>
|
||
|
||
<div class="wall wall-2">
|
||
<div class="cell">
|
||
<div class="cell-icon">🔎</div>
|
||
<div class="cell-title">Автопроверка наличия</div>
|
||
<div class="cell-desc">Кликни «Проверить» — система сверяет каждый артикул в письме с актуальным фидом. Товары без остатка подсвечиваются красным прямо в превью. Никакой ручной проверки перед отправкой.</div>
|
||
<div class="stock">
|
||
<div class="stock-row"><div class="stock-thumb"></div><div class="stock-name">Платье Jacquemus Rouge</div><div class="badge badge-r">НЕТ В НАЛИЧИИ</div></div>
|
||
<div class="stock-row"><div class="stock-thumb" style="background:rgba(126,208,214,0.08)"></div><div class="stock-name">Блузка Self-Portrait</div><div class="badge badge-g">В НАЛИЧИИ</div></div>
|
||
<div class="stock-row"><div class="stock-thumb"></div><div class="stock-name">Жакет Max Mara</div><div class="badge badge-r">НЕТ В НАЛИЧИИ</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">✨</div>
|
||
<div class="cell-title">Умный подбор замен</div>
|
||
<div class="cell-desc">Для каждого отсутствующего товара — список замен. Алгоритм учитывает тип изделия, бренд, гендер и ценовой диапазон. Товары дороже ×3 — исключаются автоматически. Hover на фото замены — показывает крупное изображение, название и цену.</div>
|
||
<div class="tags"><span class="tag">Тип товара</span><span class="tag">Бренд</span><span class="tag">Гендер</span><span class="tag">Цена ±</span><span class="tag">Hover-превью</span></div>
|
||
<div class="stock" style="margin-top:16px;">
|
||
<div class="stock-row"><div class="stock-thumb" style="background:rgba(126,208,214,0.1)"></div><div class="stock-name">Платье Rotate → замена: A.W.A.K.E Mode</div><div class="badge badge-g">+12%</div></div>
|
||
<div class="stock-row"><div class="stock-thumb" style="background:rgba(126,208,214,0.1)"></div><div class="stock-name">Платье Rotate → замена: LoveShackFancy</div><div class="badge badge-g">-8%</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">🔗</div>
|
||
<div class="cell-title">Проверка всех ссылок</div>
|
||
<div class="cell-desc">Система извлекает все href и src из письма и проверяет их доступность. Результат — список с цветовыми индикаторами. Сломанные ссылки и 404 заметны сразу.</div>
|
||
<div class="lchk">
|
||
<div class="lchk-row ok"><div class="lchk-dot"></div><div class="lchk-url">https://vipavenue.ru/sale/spring</div><div class="lchk-st">200 OK</div></div>
|
||
<div class="lchk-row ok"><div class="lchk-dot"></div><div class="lchk-url">https://img.vipavenue.ru/banner.jpg</div><div class="lchk-st">200 OK</div></div>
|
||
<div class="lchk-row err"><div class="lchk-dot"></div><div class="lchk-url">https://vipavenue.ru/old-page</div><div class="lchk-st">404</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">✏️</div>
|
||
<div class="cell-title">Проверка орфографии</div>
|
||
<div class="cell-desc">Яндекс.Спеллер проверяет русский и английский текст прямо в превью письма. Ошибки подсвечиваются, счётчик показывает их количество. Проверяются только первые 9 500 символов.</div>
|
||
<div class="spell-line"><div class="spell-dot"></div><div class="spell-word">«весеная» коллекция</div><div class="spell-hint">→ весенняя</div></div>
|
||
<div class="spell-line"><div class="spell-dot"></div><div class="spell-word">Ограниченое предложение</div><div class="spell-hint">→ ограниченное</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── ПЛАН ── -->
|
||
<section class="s s-navy">
|
||
<div class="wrap">
|
||
<div class="split rev">
|
||
<div>
|
||
<div class="lbl">Планирование</div>
|
||
<h2 class="h2">Редакционный<br /><em>календарь внутри</em></h2>
|
||
<p class="lead">Все предстоящие рассылки — в одной вкладке. Переход из плана в конструктор нужного письма — одним кликом.</p>
|
||
<ul class="checks">
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Загрузка рассылок из внешнего источника (Yonote)</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Фильтры: просрочено / сегодня / завтра / неделя / позже</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Тема, прехедер и ID писем подтягиваются в конструктор автоматически</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Кнопка «Отправлено» — обновляет статус в источнике</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Пуш-уведомления о новых рассылках в браузере</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Гендерные ID (Ж / М) в одной строке плана</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="vbox">
|
||
<div class="vbox-head">📅 План рассылок — Март 2026</div>
|
||
<div class="vbox-body">
|
||
<div class="plan-rows">
|
||
<div class="plan-row active"><span class="plan-date">14.03</span><span class="plan-title">Весенняя коллекция</span><span class="plan-status st-done">ГОТОВО</span></div>
|
||
<div class="plan-row active"><span class="plan-date">18.03</span><span class="plan-title">Sale до –40%</span><span class="plan-status st-work">В РАБОТЕ</span></div>
|
||
<div class="plan-row"><span class="plan-date">22.03</span><span class="plan-title">Новые поступления</span><span class="plan-status st-plan">ПЛАН</span></div>
|
||
<div class="plan-row"><span class="plan-date">25.03</span><span class="plan-title">Тренды сезона</span><span class="plan-status st-plan">ПЛАН</span></div>
|
||
<div class="plan-row"><span class="plan-date">28.03</span><span class="plan-title">Бренд-фокус: Max Mara</span><span class="plan-status st-plan">ПЛАН</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── FTP ── -->
|
||
<section class="s s-dark">
|
||
<div class="wrap">
|
||
<div class="split">
|
||
<div>
|
||
<div class="lbl">Медиабиблиотека</div>
|
||
<h2 class="h2">FTP-галерея<br /><em>прямо в браузере</em></h2>
|
||
<p class="lead">Загружай изображения для писем без FTP-клиентов. Пакетная загрузка, просмотр, копирование URL — не выходя из конструктора.</p>
|
||
<ul class="checks">
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Пакетная загрузка — несколько файлов одним выбором</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Папки организованы по дате письма — автоматически</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Клик по миниатюре — копирует URL в буфер</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Прогресс загрузки: N из M / процент</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Удаление файлов с подтверждением</li>
|
||
<li><div class="chk"><svg viewBox="0 0 11 11" fill="none"><path d="M1.5 5.5l3 3 5-5" stroke="#7ED0D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>Поддержка FTP и SFTP</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<div class="vbox">
|
||
<div class="vbox-head">🖼 FTP Галерея — 03-14</div>
|
||
<div class="vbox-body">
|
||
<div class="ftp-grid">
|
||
<div class="ftp-thumb on">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
<div class="ftp-thumb on">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
<div class="ftp-thumb">🖼</div>
|
||
</div>
|
||
<div class="ftp-upload">+ Загрузить файлы (3/5 загружается...)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── СЕРТИФИКАТЫ И ДОППОП ── -->
|
||
<section class="s s-white">
|
||
<div class="wrap">
|
||
<div class="lbl">Специальные блоки</div>
|
||
<h2 class="h2">Сертификаты<br />и <em>расширенные блоки</em></h2>
|
||
<p class="lead">Специализированный редактор сертификатов — отдельный тип контента с перетаскиванием, типографом и форматированием.</p>
|
||
|
||
<div class="wall wall-2">
|
||
<div class="cell">
|
||
<div class="cell-icon">🏆</div>
|
||
<div class="cell-title">Редактор сертификатов</div>
|
||
<div class="cell-desc">Отдельный режим для блоков-сертификатов. Добавляй строки, меняй их порядок перетаскиванием. Жирный, перенос, буллеты, Типограф — всё как в основном редакторе. Готовый сертификат сохраняется в письмо.</div>
|
||
<div class="cert-blocks">
|
||
<div class="cert-block"><div class="cert-drag">⠿</div><div class="cert-text">Дорогой клиент, дарим вам</div></div>
|
||
<div class="cert-block"><div class="cert-drag">⠿</div><div class="cert-text" style="font-weight:700;color:rgba(255,255,255,0.8)">Сертификат на 5 000 ₽</div></div>
|
||
<div class="cert-block"><div class="cert-drag">⠿</div><div class="cert-text">действителен до 31 декабря 2026</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-icon">⚙️</div>
|
||
<div class="cell-title">Опции товарных блоков</div>
|
||
<div class="cell-desc">Для каждого блока с товарами — набор переключаемых опций (скидка, новинка, хит и т.д.). Включай и выключай опцию для конкретного блока или сразу для всех. Визуальный индикатор состояния: вкл / частично / выкл.</div>
|
||
<div class="tags"><span class="tag">Скидка</span><span class="tag">Новинка</span><span class="tag">Хит</span><span class="tag">Эксклюзив</span><span class="tag">+ Свои опции</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── КАК РАБОТАЕТ ── -->
|
||
<section class="s s-navy">
|
||
<div class="wrap">
|
||
<div class="lbl">Процесс</div>
|
||
<h2 class="h2">От плана до<br /><em>готового HTML</em></h2>
|
||
<p class="lead">Три шага без переключений между инструментами.</p>
|
||
<div class="steps">
|
||
<div class="step-cell">
|
||
<div class="step-n">01</div>
|
||
<div class="step-title">Открой план</div>
|
||
<div class="step-desc">Перейди в редакционный календарь. Найди нужную рассылку — дата, тема и прехедер уже заполнены. Нажми «Собрать» — письмо откроется в конструкторе с нужными данными.</div>
|
||
</div>
|
||
<div class="step-cell">
|
||
<div class="step-n">02</div>
|
||
<div class="step-title">Собери письмо</div>
|
||
<div class="step-desc">Добавляй блоки, редактируй тексты, загружай баннеры через FTP-галерею. Вставь ID из пула — распределятся сами. Переключи гендерную версию — убедись, что обе выглядят идеально.</div>
|
||
</div>
|
||
<div class="step-cell">
|
||
<div class="step-n">03</div>
|
||
<div class="step-title">Проверь и отправь</div>
|
||
<div class="step-desc">Проверь наличие товаров, орфографию и ссылки. Всё чисто — копируй HTML и вставляй в платформу. Обнови статус «Отправлено» прямо из интерфейса.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── НАСТРОЙКИ И АДМИНИСТРИРОВАНИЕ ── -->
|
||
<section class="s s-dark">
|
||
<div class="wrap">
|
||
<div class="lbl">Платформа</div>
|
||
<h2 class="h2">Настраивается<br /><em>под проект</em></h2>
|
||
<p class="lead">Детальные настройки для каждого проекта, ролевой доступ и статистика трудозатрат.</p>
|
||
|
||
<div class="wall wall-4">
|
||
<div class="cell">
|
||
<div class="cell-n">Настройки</div>
|
||
<div class="cell-title">Гибкая конфигурация</div>
|
||
<div class="cell-desc">Логотип, акцентный цвет, отступы. Для каждого блока — шаблон, видимость полей, подписи. Редактор Pug-частей (хедер/футер) прямо из интерфейса. Шаблон ссылок с UTM, авто-нумерация изображений.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-n">Авторизация</div>
|
||
<div class="cell-title">Безопасность</div>
|
||
<div class="cell-desc">scrypt-хэши паролей. Сессии 7 дней, хранятся на сервере (переживают перезапуск). Тема, zoom, активная страница — сохраняются в профиле. Настройки доступны сразу на любом устройстве.</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-n">Команда</div>
|
||
<div class="cell-title">Управление пользователями</div>
|
||
<div class="cell-desc">Создавай пользователей, назначай роли (admin / user) и проекты. Каждый видит только свои проекты. Смена пароля и настроек профиля — из интерфейса.</div>
|
||
<div class="user-table">
|
||
<div class="user-row"><div class="user-name">s.zotov</div><div class="user-role role-admin">admin</div><div class="user-last">сегодня</div><div class="user-edit">Ред.</div></div>
|
||
<div class="user-row"><div class="user-name">marketing</div><div class="user-role role-user">user</div><div class="user-last">вчера</div><div class="user-edit">Ред.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell-n">Аналитика</div>
|
||
<div class="cell-title">Статистика времени</div>
|
||
<div class="cell-desc">Трекер фиксирует время работы над каждым письмом. Статусы: черновик, в работе, отправлено. Агрегированная статистика по месяцам — чтобы планировать нагрузку команды.</div>
|
||
<div class="stats-row" style="margin-top:16px;">
|
||
<div class="stat-cell"><div class="stat-val">47</div><div class="stat-lbl">Писем в марте</div></div>
|
||
<div class="stat-cell"><div class="stat-val">3.2ч</div><div class="stat-lbl">Среднее время</div></div>
|
||
<div class="stat-cell"><div class="stat-val">98%</div><div class="stat-lbl">Отправлено</div></div>
|
||
<div class="stat-cell"><div class="stat-val">0</div><div class="stat-lbl">Ошибок</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── CTA ── -->
|
||
<section class="cta-s">
|
||
<div class="wrap">
|
||
<h2>Готовы делать<br />письма быстрее?</h2>
|
||
<p>Войдите в систему и начните прямо сейчас.</p>
|
||
<a href="/builder" class="btn btn-dark">Войти в Aspekter →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="foot-inner">
|
||
<div class="foot-logo">ASPEKTER</div>
|
||
<div class="foot-copy">© 2026 Aspekter — VipAvenue</div>
|
||
<a href="/builder" class="foot-link">Войти →</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|