ruslan/wildberries
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign login page with split promo layout

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
ruslan
2026-05-15 18:05:01 +03:00
parent 1a06979120
commit 60ea2757bc
2 changed files with 221 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/styles.css
+167 -19
View File
@@ -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; }