Zuev/magistr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete UI redesign with glassmorphism and custom multi-select equipment dropdown

Browse Source
This commit is contained in:
Zuev
2026-02-21 01:35:56 +03:00
parent eea444409e
commit 74d937f6dc
7 changed files with 820 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/style.css
View File

@@ -8,50 +8,64 @@
}
:root {
--bg-primary: #0f0f1a;
--bg-card: rgba(255, 255, 255, 0.05);
--bg-card-border: rgba(255, 255, 255, 0.08);
--bg-input: rgba(255, 255, 255, 0.06);
--bg-input-focus: rgba(255, 255, 255, 0.1);
--text-primary: #f0f0f5;
--text-secondary: #9ca3af;
--text-placeholder: #6b7280;
--accent: #6366f1;
--accent-hover: #818cf8;
--accent-glow: rgba(99, 102, 241, 0.35);
--error: #f87171;
--success: #34d399;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
/* Deep dark premium background */
--bg-primary: #0a0a0f;
--bg-card: rgba(255, 255, 255, 0.03);
--bg-card-border: rgba(255, 255, 255, 0.05);
--bg-input: rgba(255, 255, 255, 0.04);
--bg-input-focus: rgba(255, 255, 255, 0.08);
/* Typography */
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-placeholder: #475569;
/* Vibrant Accents */
--accent: #8b5cf6;
--accent-hover: #a78bfa;
--accent-glow: rgba(139, 92, 246, 0.4);
--accent-secondary: #ec4899;
/* Status Colors */
--error: #ef4444;
--success: #10b981;
--warning: #f59e0b;
/* Spatial */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* ===== Light Theme ===== */
[data-theme="light"] {
--bg-primary: #e8eaef;
--bg-card: rgba(255, 255, 255, 0.95);
--bg-card-border: rgba(0, 0, 0, 0.22);
--bg-input: rgba(0, 0, 0, 0.08);
--bg-input-focus: rgba(0, 0, 0, 0.12);
--bg-primary: #f8fafc;
--bg-card: rgba(255, 255, 255, 0.7);
--bg-card-border: rgba(0, 0, 0, 0.08);
--bg-input: rgba(0, 0, 0, 0.03);
--bg-input-focus: rgba(0, 0, 0, 0.06);
--text-primary: #0f172a;
--text-secondary: #374151;
--text-placeholder: #6b7280;
--text-secondary: #475569;
--text-placeholder: #94a3b8;
--accent: #6366f1;
--accent-hover: #4f46e5;
--accent-glow: rgba(99, 102, 241, 0.25);
--error: #dc2626;
--success: #16a34a;
--accent-glow: rgba(99, 102, 241, 0.3);
--accent-secondary: #d946ef;
--error: #ef4444;
--success: #10b981;
--warning: #f59e0b;
}
[data-theme="light"] .shape {
opacity: 0.25;
opacity: 0.15;
}
[data-theme="light"] .login-card {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
0 20px 40px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 0 20px rgba(255, 255, 255, 0.5);
}
html {
@@ -83,38 +97,39 @@ body {
.shape {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
animation: float 20s ease-in-out infinite;
transition: opacity 0.4s ease;
filter: blur(90px);
opacity: 0.4;
animation: float 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
transition: opacity 0.5s ease;
will-change: transform;
}
.shape-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, #6366f1, transparent 70%);
top: -15%;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--accent), transparent 60%);
top: -20%;
left: -10%;
animation-delay: 0s;
}
.shape-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, #8b5cf6, transparent 70%);
bottom: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, var(--accent-secondary), transparent 60%);
bottom: -20%;
right: -10%;
animation-delay: -7s;
animation-delay: -5s;
}
.shape-3 {
width: 300px;
height: 300px;
background: radial-gradient(circle, #a78bfa, transparent 70%);
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background: radial-gradient(circle, #3b82f6, transparent 60%);
top: 40%;
left: 60%;
transform: translate(-50%, -50%);
animation-delay: -14s;
animation-delay: -10s;
}
@keyframes float {
@@ -162,15 +177,29 @@ body {
/* ===== Login Card (Glassmorphism) ===== */
.login-card {
background: var(--bg-card);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border: 1px solid var(--bg-card-border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem 2rem;
padding: 3rem 2.5rem 2.5rem;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
0 24px 48px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 32px rgba(255, 255, 255, 0.02);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
z-index: 1;
}
/* ===== Header ===== */
@@ -241,9 +270,9 @@ body {
.input-wrapper input {
width: 100%;
padding: 0.8rem 0.8rem 0.8rem 2.75rem;
padding: 0.9rem 1rem 0.9rem 2.8rem;
background: var(--bg-input);
border: 1px solid transparent;
border: 1px solid var(--bg-card-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
@@ -252,17 +281,24 @@ body {
transition:
background var(--transition),
border-color var(--transition),
box-shadow var(--transition);
box-shadow var(--transition),
transform var(--transition);
}
.input-wrapper input::placeholder {
color: var(--text-placeholder);
transition: opacity var(--transition);
}
.input-wrapper input:focus {
background: var(--bg-input-focus);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
box-shadow: 0 0 0 4px var(--accent-glow);
transform: translateY(-1px);
}
.input-wrapper input:focus::placeholder {
opacity: 0.5;
}
.input-wrapper input:focus~.input-icon,
@@ -356,14 +392,15 @@ body {
position: relative;
overflow: hidden;
width: 100%;
padding: 0.85rem;
padding: 0.95rem;
border: none;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--accent), #8b5cf6);
background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
color: #fff;
font-family: inherit;
font-size: 0.95rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
display: flex;
align-items: center;
@@ -373,22 +410,38 @@ body {
transform var(--transition),
box-shadow var(--transition),
opacity var(--transition);
box-shadow: 0 4px 16px var(--accent-glow);
box-shadow: 0 4px 15px var(--accent-glow);
}
.btn-submit::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(255,255,255,0.2), transparent);
border-radius: inherit;
opacity: 0;
transition: opacity var(--transition);
}
.btn-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px var(--accent-glow);
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--accent-glow);
}
.btn-submit:hover::before {
opacity: 1;
}
.btn-submit:active {
transform: translateY(0);
transform: translateY(1px);
box-shadow: 0 2px 10px var(--accent-glow);
}
.btn-submit:disabled {
opacity: 0.7;
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ===== Ripple Effect ===== */