From 60ea2757bc23f1c8f1be6f8ec5200fac960b3211 Mon Sep 17 00:00:00 2001 From: ruslan Date: Fri, 15 May 2026 18:05:01 +0300 Subject: [PATCH] Redesign login page with split promo layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Left panel: logo, headline, feature list, price (200 ₽/мес). Right panel: login form. Responsive for mobile. Fix topbar logo display with white bg and shadow. Co-Authored-By: Claude Sonnet 4.6 --- static/styles.css | 186 ++++++++++++++++++++++++++++++++++++++----- templates/login.html | 58 +++++++++++++- 2 files changed, 221 insertions(+), 23 deletions(-) diff --git a/static/styles.css b/static/styles.css index e3ec628..8783034 100644 --- a/static/styles.css +++ b/static/styles.css @@ -131,9 +131,12 @@ a:hover { color: var(--blue-dark); text-decoration: underline; } .topbar__logo-img { width: 34px; height: 34px; - border-radius: var(--r-sm); + border-radius: 8px; object-fit: contain; flex-shrink: 0; + background: white; + padding: 3px; + box-shadow: 0 2px 8px rgba(203,17,171,0.25); } .topbar__name { @@ -878,7 +881,7 @@ textarea:focus { .token-actions button { font-size: 13px; padding: 7px 14px; } -/* ─── Auth ───────────────────────────────────────────────────────── */ +/* ─── Auth legacy shell ──────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; @@ -887,16 +890,164 @@ textarea:focus { padding: 24px; } +/* ─── Login split layout ─────────────────────────────────────────── */ +.login-split { + display: flex; + min-height: 100vh; +} + +.login-promo { + flex: 1 1 55%; + background: linear-gradient(145deg, #3D0066 0%, #6B0FA8 45%, #CB11AB 100%); + display: flex; + align-items: center; + justify-content: center; + padding: 60px 48px; + position: relative; + overflow: hidden; +} +.login-promo::before { + content: ''; + position: absolute; + width: 500px; height: 500px; + border-radius: 50%; + background: rgba(255,255,255,0.04); + top: -120px; right: -120px; +} +.login-promo::after { + content: ''; + position: absolute; + width: 300px; height: 300px; + border-radius: 50%; + background: rgba(255,255,255,0.04); + bottom: -80px; left: -80px; +} + +.login-promo__inner { + position: relative; + z-index: 1; + max-width: 480px; +} + +.login-promo__logo { + width: 96px; + height: 96px; + object-fit: contain; + border-radius: 20px; + background: white; + padding: 8px; + box-shadow: 0 8px 32px rgba(0,0,0,0.25); + margin-bottom: 28px; + display: block; +} + +.login-promo__title { + font-size: 2rem; + font-weight: 800; + color: white; + line-height: 1.25; + margin-bottom: 14px; +} + +.login-promo__sub { + font-size: 15px; + color: rgba(255,255,255,0.78); + line-height: 1.65; + margin-bottom: 36px; +} + +.login-features { + list-style: none; + padding: 0; + margin: 0 0 36px; + display: flex; + flex-direction: column; + gap: 18px; +} + +.login-features__item { + display: flex; + align-items: flex-start; + gap: 14px; + color: white; +} + +.login-features__icon { + font-size: 20px; + line-height: 1; + flex-shrink: 0; + margin-top: 1px; +} + +.login-features__item strong { + display: block; + font-size: 14px; + font-weight: 700; + margin-bottom: 2px; + color: white; +} + +.login-features__item span { + font-size: 13px; + color: rgba(255,255,255,0.7); + line-height: 1.5; +} + +.login-price { + display: inline-flex; + align-items: center; + gap: 16px; + background: rgba(255,255,255,0.12); + border: 1px solid rgba(255,255,255,0.2); + border-radius: 14px; + padding: 16px 22px; + backdrop-filter: blur(8px); +} + +.login-price__amount { + font-size: 2rem; + font-weight: 900; + color: white; + white-space: nowrap; +} +.login-price__amount span { + font-size: 1rem; + font-weight: 500; + opacity: 0.7; +} + +.login-price__desc { + font-size: 13px; + color: rgba(255,255,255,0.75); + line-height: 1.5; + max-width: 200px; +} + +.login-form-wrap { + flex: 0 0 420px; + display: flex; + align-items: center; + justify-content: center; + padding: 40px 32px; + background: var(--bg); +} + +.login-form-title { + font-size: 1.3rem; + font-weight: 700; + margin-bottom: 22px; + color: var(--c-text); +} + +/* ─── Auth card ──────────────────────────────────────────────────── */ .auth-card { width: 100%; max-width: 440px; - background: rgba(255,255,255,0.93); + background: rgba(255,255,255,0.97); border: 1px solid rgba(229,231,235,0.9); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--shadow-lg); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); } .auth-kicker { @@ -906,23 +1057,11 @@ textarea:focus { margin-bottom: 20px; } -.auth-kicker-logo { +.auth-kicker-logo-img { width: 36px; height: 36px; - border-radius: var(--r-sm); - background: linear-gradient(135deg, #D914B5, var(--wb-dark)); - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 13px; - font-weight: 800; - box-shadow: 0 4px 14px var(--wb-glow); -} -.auth-kicker-logo-img { - width: 48px; - height: 48px; object-fit: contain; + border-radius: 8px; } .auth-kicker-text { @@ -962,6 +1101,15 @@ textarea:focus { text-align: center; } +@media (max-width: 768px) { + .login-split { flex-direction: column; } + .login-promo { padding: 40px 24px; flex: none; } + .login-promo__title { font-size: 1.5rem; } + .login-form-wrap { flex: none; padding: 32px 20px; } + .login-price { flex-direction: column; gap: 8px; text-align: center; } + .login-price__desc { max-width: none; } +} + /* ─── Utility ────────────────────────────────────────────────────── */ .hint { font-size: 14px; color: var(--muted); } .inline-form { margin: 0; } diff --git a/templates/login.html b/templates/login.html index bc73a73..23a4228 100644 --- a/templates/login.html +++ b/templates/login.html @@ -7,14 +7,62 @@ -
+