From 93be1e80896d7b13eb62ce135e80272bcae7099f Mon Sep 17 00:00:00 2001 From: ruslan Date: Fri, 15 May 2026 21:21:12 +0300 Subject: [PATCH] Redesign settings UI and log entries, add wb3 logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Settings: tab per star with mini-toggle + template count badge - Templates: full-width textarea per template (not cramped columns) - Filter mode: pill-cards instead of raw radio buttons - Save button aligned right with border-top separator - Log: card-based entries (rating pill, meta row, review/reply blocks) - wb3.png logo, 160px on login, 40px in topbar with ring shadow - Fix CSS variable names (--c-* → --line/--card/--text/--muted) Co-Authored-By: Claude Sonnet 4.6 --- static/styles.css | 323 ++++++++++++++++++++++++++++++++++++++-- templates/admin.html | 2 +- templates/cabinet.html | 2 +- templates/index.html | 277 ++++++++++++++++++++-------------- templates/login.html | 4 +- templates/register.html | 2 +- wb3.png | Bin 0 -> 152990 bytes 7 files changed, 476 insertions(+), 134 deletions(-) create mode 100644 wb3.png diff --git a/static/styles.css b/static/styles.css index bad5de1..45c47b6 100644 --- a/static/styles.css +++ b/static/styles.css @@ -129,14 +129,14 @@ a:hover { color: var(--blue-dark); text-decoration: underline; } flex-shrink: 0; } .topbar__logo-img { - width: 34px; - height: 34px; - border-radius: 8px; + width: 40px; + height: 40px; + border-radius: 10px; object-fit: contain; flex-shrink: 0; background: white; - padding: 3px; - box-shadow: 0 2px 8px rgba(203,17,171,0.25); + padding: 4px; + box-shadow: 0 2px 10px rgba(203,17,171,0.3), 0 0 0 2px rgba(203,17,171,0.12); } .topbar__name { @@ -931,14 +931,14 @@ textarea:focus { } .login-promo__logo { - width: 140px; - height: 140px; + width: 160px; + height: 160px; object-fit: contain; - border-radius: 20px; - background: white; - padding: 8px; - box-shadow: 0 8px 32px rgba(0,0,0,0.25); - margin-bottom: 28px; + border-radius: 24px; + background: #fff; + padding: 16px; + box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.15); + margin-bottom: 32px; display: block; } @@ -1037,7 +1037,7 @@ textarea:focus { font-size: 1.3rem; font-weight: 700; margin-bottom: 22px; - color: var(--c-text); + color: var(--text); } /* ─── Auth card ──────────────────────────────────────────────────── */ @@ -1407,9 +1407,9 @@ textarea:focus { align-items: center; gap: 8px; font-size: 13px; - color: var(--c-text-muted); + color: var(--muted); padding: 8px 0 12px; - border-bottom: 1px solid var(--c-border); + border-bottom: 1px solid var(--line); margin-bottom: 16px; } @@ -1531,3 +1531,296 @@ fieldset:disabled button[type="submit"] { .star-chip--1 { background: #FEE2E2; color: #EF4444; } .star-chip--2 { background: #FFEDD5; color: #F97316; } .star-chip--3 { background: #FEF9C3; color: #CA8A04; } + +/* ── Filter pills ────────────────────────────────────────── */ +.filter-pills { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.filter-pill { + cursor: pointer; + flex: 1 1 160px; + min-width: 140px; +} +.filter-pill input { display: none; } +.filter-pill span { + display: flex; + flex-direction: column; + gap: 3px; + padding: 12px 16px; + border-radius: var(--r); + border: 2px solid var(--line); + background: var(--card); + transition: border-color .15s, background .15s; +} +.filter-pill span strong { font-size: 13px; font-weight: 600; } +.filter-pill span small { font-size: 11px; color: var(--muted); } +.filter-pill input:checked + span { + border-color: var(--wb); + background: var(--wb-light); +} +.filter-pill input:checked + span strong { color: var(--wb); } + +/* ── Star tabs ───────────────────────────────────────────── */ +.star-tabs { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 0; +} +.star-tab { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + border-radius: var(--r) var(--r) 0 0; + border: 2px solid var(--line); + border-bottom: none; + cursor: pointer; + background: var(--card); + opacity: 0.5; + transition: opacity .15s, background .15s, border-color .15s; + user-select: none; + position: relative; + bottom: -2px; +} +.star-tab.star-tab--on { opacity: 1; } +.star-tab.star-tab--active { + background: var(--bg); + opacity: 1; + z-index: 1; +} +.star-tab--1.star-tab--active { border-color: #EF4444; } +.star-tab--2.star-tab--active { border-color: #F97316; } +.star-tab--3.star-tab--active { border-color: #EAB308; } +.star-tab--4.star-tab--active { border-color: #3B82F6; } +.star-tab--5.star-tab--active { border-color: #22C55E; } +.star-tab__label { font-weight: 700; font-size: 15px; } +.star-tab--1 .star-tab__label { color: #EF4444; } +.star-tab--2 .star-tab__label { color: #F97316; } +.star-tab--3 .star-tab__label { color: #EAB308; } +.star-tab--4 .star-tab__label { color: #3B82F6; } +.star-tab--5 .star-tab__label { color: #22C55E; } +.star-tab__count { + font-size: 11px; + font-weight: 700; + min-width: 18px; + height: 18px; + line-height: 18px; + text-align: center; + border-radius: 99px; + background: var(--line); + color: var(--muted); + padding: 0 5px; +} +/* mini toggle inside tab */ +.star-tab__toggle { cursor: pointer; display: flex; align-items: center; } +.star-tab__toggle input { display: none; } +.star-tab__toggle-track { + display: inline-block; + width: 28px; + height: 16px; + border-radius: 8px; + background: var(--line); + position: relative; + transition: background .15s; +} +.star-tab__toggle-track::after { + content: ''; + position: absolute; + top: 2px; left: 2px; + width: 12px; height: 12px; + border-radius: 50%; + background: #fff; + transition: transform .15s; +} +.star-tab__toggle input:checked ~ .star-tab__toggle-track { background: #22C55E; } +.star-tab__toggle input:checked ~ .star-tab__toggle-track::after { transform: translateX(12px); } + +/* ── Star panel ──────────────────────────────────────────── */ +.star-panel { + border: 2px solid var(--line); + border-radius: 0 var(--r) var(--r) var(--r); + padding: 20px; + background: var(--bg); +} +.star-panel__header { + display: flex; + align-items: baseline; + gap: 12px; + margin-bottom: 16px; +} +.pool-panel-items { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 14px; +} +.pool-template-row { + display: grid; + grid-template-columns: 28px 1fr 36px; + gap: 8px; + align-items: start; +} +.pool-template-num { + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--line); + color: var(--muted); + font-size: 12px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-top: 8px; +} +.pool-template-input { + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + border: 1.5px solid var(--line); + border-radius: var(--r); + font-size: 14px; + font-family: inherit; + resize: vertical; + background: var(--card); + color: var(--text); + transition: border-color .15s; + line-height: 1.5; +} +.pool-template-input:focus { + outline: none; + border-color: var(--wb); +} +.pool-template-del { + width: 32px; + height: 32px; + border: none; + border-radius: 6px; + background: var(--red-bg); + color: var(--red); + cursor: pointer; + font-size: 13px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 8px; + transition: background .15s; + flex-shrink: 0; +} +.pool-template-del:hover { background: #fecaca; } +.btn-add-template { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 9px 16px; + border-radius: var(--r); + border: 1.5px dashed var(--line); + background: transparent; + color: var(--muted); + font-size: 13px; + cursor: pointer; + transition: border-color .15s, color .15s; +} +.btn-add-template:hover { border-color: var(--wb); color: var(--wb); } + +/* ── Save button ─────────────────────────────────────────── */ +.settings-footer { + display: flex; + justify-content: flex-end; + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid var(--line); +} +.btn-save { + padding: 10px 28px; + background: var(--wb); + color: #fff; + border: none; + border-radius: var(--r); + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: opacity .15s; +} +.btn-save:hover { opacity: 0.85; } +fieldset:disabled .btn-save { opacity: 0.4; cursor: not-allowed; } +fieldset:disabled .pool-template-input, +fieldset:disabled .pool-template-del, +fieldset:disabled .btn-add-template, +fieldset:disabled .star-tab, +fieldset:disabled .filter-pill { pointer-events: none; opacity: 0.5; } + +/* ── Log entries ─────────────────────────────────────────── */ +.log-list { + display: flex; + flex-direction: column; + gap: 0; +} +.log-entry { + display: flex; + gap: 16px; + padding: 14px 0; + border-bottom: 1px solid var(--line); + align-items: flex-start; +} +.log-entry:last-child { border-bottom: none; } +.log-entry__left { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + flex-shrink: 0; + width: 52px; +} +.log-entry__rating { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 10px; + font-weight: 800; + font-size: 13px; +} +.log-entry__status { font-size: 11px; text-align: center; white-space: nowrap; } +.log-entry__body { flex: 1; min-width: 0; } +.log-entry__meta { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: baseline; + margin-bottom: 6px; +} +.log-entry__product { font-size: 13px; font-weight: 600; color: var(--text); } +.log-entry__buyer { font-size: 12px; color: var(--muted); } +.log-entry__time { font-size: 11px; color: var(--muted); margin-left: auto; } +.log-entry__review { + font-size: 13px; + color: var(--muted); + padding: 8px 12px; + background: var(--card); + border-radius: 6px; + border-left: 3px solid var(--line); + margin-bottom: 6px; + white-space: pre-wrap; + word-break: break-word; +} +.log-entry__reply { + font-size: 13px; + color: var(--text); + padding: 8px 12px; + background: var(--wb-light); + border-radius: 6px; + border-left: 3px solid var(--wb); + white-space: pre-wrap; + word-break: break-word; +} +.log-entry__reply-ico { + color: var(--wb); + font-weight: 700; + margin-right: 6px; +} diff --git a/templates/admin.html b/templates/admin.html index 8493f99..2189930 100644 --- a/templates/admin.html +++ b/templates/admin.html @@ -11,7 +11,7 @@