feat: Modern professional design overhaul
From 'Russian hacker site' to 'Tech startup' aesthetic 🎨
Color Palette:
- Switched from dark purple (#7c6fff) to elegant indigo (#6366f1)
- Softer backgrounds with better contrast
- Professional teal accent (#14b8a6) instead of neon green
- Vibrant but tasteful status colors
Typography:
- New font: Plus Jakarta Sans (modern, professional)
- Better letter-spacing and line-height
- Improved hierarchy with font weights
Components:
- Cards: Soft shadows, subtle gradients, hover lift effect
- Buttons: Gradient backgrounds, prominent shadows, smooth animations
- Inputs: Backdrop blur, focus glow effects, refined borders
- Badges: Rounded corners, glow shadows, better contrast
- Navbar: Enhanced glass effect, professional spacing
Visual Effects:
- Smooth transitions (.25s cubic-bezier)
- Hover animations (translateY, shadows)
- Multi-layer radial gradients for depth
- Subtle glow effects on interactive elements
Agent Colors (brighter):
- Orchestrator: Vibrant purple (#8b5cf6)
- Researcher: Modern teal (#14b8a6)
- Negotiator: Bold red (#f43f5e)
- AR Manager: Warm amber (#f59e0b)
Result: Clean, modern, professional interface
This commit is contained in:
parent
d48537b1fd
commit
f43bf1646d
1 changed files with 120 additions and 86 deletions
206
static/style.css
206
static/style.css
|
|
@ -1,41 +1,57 @@
|
||||||
/* ── Frankenbot Dark Theme v2 ──────────────────────────────────────────────── */
|
/* ── Frankenbot Modern Design v3 ───────────────────────────────────────────── */
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-base: #080b12;
|
/* Modern Color Palette - Professional & Clean */
|
||||||
--bg-surface: #0f1320;
|
--bg-base: #0a0e1a;
|
||||||
--bg-elevated: #181d2e;
|
--bg-surface: #141825;
|
||||||
--bg-hover: #1f2640;
|
--bg-elevated: #1e2336;
|
||||||
--bg-glass: rgba(15,19,32,.7);
|
--bg-hover: #2a3147;
|
||||||
--accent: #7c6fff;
|
--bg-glass: rgba(20,24,37,.85);
|
||||||
--accent-light: #a89eff;
|
|
||||||
--accent-dim: #4a45a0;
|
|
||||||
--accent-glow: rgba(124,111,255,.3);
|
|
||||||
--accent2: #06d6a0;
|
|
||||||
--accent2-glow: rgba(6,214,160,.25);
|
|
||||||
--success: #06d6a0;
|
|
||||||
--warning: #fbbf24;
|
|
||||||
--danger: #f43f5e;
|
|
||||||
--info: #38bdf8;
|
|
||||||
--text-primary: #e8eaf6;
|
|
||||||
--text-secondary: #94a3b8;
|
|
||||||
--text-muted: #4e5a72;
|
|
||||||
--border: rgba(255,255,255,.07);
|
|
||||||
--border-accent: rgba(124,111,255,.35);
|
|
||||||
--shadow: 0 8px 32px rgba(0,0,0,.5);
|
|
||||||
--shadow-sm: 0 2px 12px rgba(0,0,0,.3);
|
|
||||||
--radius: 14px;
|
|
||||||
--radius-sm: 9px;
|
|
||||||
--radius-xs: 6px;
|
|
||||||
--transition: .18s cubic-bezier(.4,0,.2,1);
|
|
||||||
|
|
||||||
/* Agent Colors */
|
/* Primary Brand Color - Elegant Purple/Blue */
|
||||||
--agent-orchestrator: #7c6fff;
|
--accent: #6366f1;
|
||||||
--agent-researcher: #06d6a0;
|
--accent-light: #818cf8;
|
||||||
|
--accent-dim: #4f46e5;
|
||||||
|
--accent-glow: rgba(99,102,241,.25);
|
||||||
|
|
||||||
|
/* Secondary - Modern Teal */
|
||||||
|
--accent2: #14b8a6;
|
||||||
|
--accent2-glow: rgba(20,184,166,.2);
|
||||||
|
|
||||||
|
/* Status Colors - Vibrant but Professional */
|
||||||
|
--success: #10b981;
|
||||||
|
--warning: #f59e0b;
|
||||||
|
--danger: #ef4444;
|
||||||
|
--info: #3b82f6;
|
||||||
|
|
||||||
|
/* Text Hierarchy */
|
||||||
|
--text-primary: #f1f5f9;
|
||||||
|
--text-secondary: #cbd5e1;
|
||||||
|
--text-muted: #64748b;
|
||||||
|
|
||||||
|
/* Borders & Shadows - Softer */
|
||||||
|
--border: rgba(148,163,184,.1);
|
||||||
|
--border-accent: rgba(99,102,241,.3);
|
||||||
|
--shadow: 0 20px 50px rgba(0,0,0,.4);
|
||||||
|
--shadow-md: 0 10px 30px rgba(0,0,0,.3);
|
||||||
|
--shadow-sm: 0 4px 15px rgba(0,0,0,.2);
|
||||||
|
|
||||||
|
/* Border Radius - More rounded */
|
||||||
|
--radius: 16px;
|
||||||
|
--radius-sm: 12px;
|
||||||
|
--radius-xs: 8px;
|
||||||
|
|
||||||
|
/* Smooth Transitions */
|
||||||
|
--transition: .25s cubic-bezier(.4,0,.2,1);
|
||||||
|
|
||||||
|
/* Agent Colors - Brighter, More Distinct */
|
||||||
|
--agent-orchestrator: #8b5cf6;
|
||||||
|
--agent-researcher: #14b8a6;
|
||||||
--agent-negotiator: #f43f5e;
|
--agent-negotiator: #f43f5e;
|
||||||
--agent-ar_manager: #fbbf24;
|
--agent-ar_manager: #f59e0b;
|
||||||
--agent-default: #38bdf8;
|
--agent-default: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Reset & Base ─────────────────────────────────────────────────────────── */
|
/* ── Reset & Base ─────────────────────────────────────────────────────────── */
|
||||||
|
|
@ -47,13 +63,16 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: var(--bg-base);
|
background: var(--bg-base);
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,111,255,.12) 0%, transparent 60%),
|
radial-gradient(ellipse 100% 60% at 50% -20%, rgba(99,102,241,.08) 0%, transparent 70%),
|
||||||
radial-gradient(ellipse 40% 30% at 90% 80%, rgba(6,214,160,.06) 0%, transparent 50%);
|
radial-gradient(ellipse 60% 40% at 10% 100%, rgba(20,184,166,.05) 0%, transparent 60%),
|
||||||
|
radial-gradient(ellipse 50% 50% at 90% 10%, rgba(139,92,246,.04) 0%, transparent 50%);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
|
||||||
font-size: .9375rem;
|
font-size: .9375rem;
|
||||||
line-height: 1.65;
|
line-height: 1.7;
|
||||||
|
font-weight: 400;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Scrollbar ────────────────────────────────────────────────────────────── */
|
/* ── Scrollbar ────────────────────────────────────────────────────────────── */
|
||||||
|
|
@ -68,41 +87,46 @@ body {
|
||||||
.navbar {
|
.navbar {
|
||||||
background: var(--bg-glass) !important;
|
background: var(--bg-glass) !important;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(24px) saturate(180%);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||||
padding: .6rem 0;
|
padding: .8rem 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1rem;
|
font-size: 1.125rem;
|
||||||
color: var(--text-primary) !important;
|
color: var(--text-primary) !important;
|
||||||
letter-spacing: -.02em;
|
letter-spacing: -.03em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: .5rem;
|
gap: .625rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand .brand-icon {
|
.navbar-brand .brand-icon {
|
||||||
width: 28px;
|
width: 32px;
|
||||||
height: 28px;
|
height: 32px;
|
||||||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: .75rem;
|
font-size: .875rem;
|
||||||
box-shadow: 0 0 16px var(--accent-glow);
|
box-shadow: 0 4px 12px var(--accent-glow);
|
||||||
animation: brand-pulse 3s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes brand-pulse {
|
@keyframes brand-pulse {
|
||||||
0%, 100% { box-shadow: 0 0 16px var(--accent-glow); }
|
0%, 100% { box-shadow: 0 4px 12px var(--accent-glow); }
|
||||||
50% { box-shadow: 0 0 28px var(--accent-glow), 0 0 8px var(--accent2-glow); }
|
50% { box-shadow: 0 6px 20px var(--accent-glow); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
|
|
@ -177,22 +201,24 @@ body {
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: var(--bg-surface);
|
background: var(--bg-surface);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid rgba(148,163,184,.12);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 0 0 1px rgba(99,102,241,.03);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
|
transition: all var(--transition);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.card:hover {
|
||||||
border-color: rgba(124,111,255,.2);
|
border-color: rgba(99,102,241,.25);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 8px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(99,102,241,.1);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
background: var(--bg-elevated) !important;
|
background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%) !important;
|
||||||
border-bottom: 1px solid var(--border) !important;
|
border-bottom: 1px solid rgba(148,163,184,.1) !important;
|
||||||
color: var(--text-primary) !important;
|
color: var(--text-primary) !important;
|
||||||
padding: .85rem 1.25rem;
|
padding: .85rem 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -293,26 +319,28 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, var(--accent), #6058d0);
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: 0 2px 12px rgba(124,111,255,.3);
|
box-shadow: 0 4px 14px rgba(99,102,241,.35), 0 2px 4px rgba(99,102,241,.2);
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background: linear-gradient(135deg, var(--accent-light), var(--accent));
|
background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
|
||||||
box-shadow: 0 4px 20px rgba(124,111,255,.45);
|
box-shadow: 0 6px 20px rgba(99,102,241,.5), 0 2px 6px rgba(99,102,241,.3);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-2px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success {
|
.btn-success {
|
||||||
background: linear-gradient(135deg, #059669, var(--success));
|
background: linear-gradient(135deg, #0d9488 0%, var(--success) 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: 0 2px 12px rgba(6,214,160,.25);
|
box-shadow: 0 4px 14px rgba(16,185,129,.3);
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.btn-success:hover {
|
.btn-success:hover {
|
||||||
background: linear-gradient(135deg, #06d6a0, #059669);
|
background: linear-gradient(135deg, var(--accent2) 0%, #0d9488 100%);
|
||||||
box-shadow: 0 4px 20px rgba(6,214,160,.4);
|
box-shadow: 0 6px 20px rgba(20,184,166,.45);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-2px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -386,22 +414,25 @@ body {
|
||||||
|
|
||||||
.form-control,
|
.form-control,
|
||||||
.form-select {
|
.form-select {
|
||||||
background: var(--bg-elevated);
|
background: rgba(30,35,54,.6);
|
||||||
border: 1px solid var(--border);
|
border: 1.5px solid rgba(148,163,184,.15);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
padding: .55rem .9rem;
|
padding: .625rem 1rem;
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
transition: border-color var(--transition), box-shadow var(--transition);
|
font-weight: 500;
|
||||||
|
transition: all var(--transition);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control:focus,
|
.form-control:focus,
|
||||||
.form-select:focus {
|
.form-select:focus {
|
||||||
background: var(--bg-elevated);
|
background: rgba(30,35,54,.8);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
box-shadow: 0 0 0 4px rgba(99,102,241,.12), 0 2px 8px rgba(99,102,241,.2);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control::placeholder { color: var(--text-muted); }
|
.form-control::placeholder { color: var(--text-muted); }
|
||||||
|
|
@ -458,21 +489,24 @@ textarea.form-control { resize: vertical; min-height: 80px; }
|
||||||
/* ── Badges ───────────────────────────────────────────────────────────────── */
|
/* ── Badges ───────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
padding: .28em .65em;
|
padding: .35em .75em;
|
||||||
border-radius: 5px;
|
border-radius: 8px;
|
||||||
font-size: .68rem;
|
font-size: .7rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: .05em;
|
letter-spacing: .04em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-primary { background: rgba(124,111,255,.25) !important; color: var(--accent-light) !important; border: 1px solid rgba(124,111,255,.3); }
|
.bg-primary { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; border: 1px solid rgba(99,102,241,.35); box-shadow: 0 2px 8px rgba(99,102,241,.15); }
|
||||||
.bg-success { background: rgba(6,214,160,.2) !important; color: #34d399 !important; border: 1px solid rgba(6,214,160,.3); }
|
.bg-success { background: rgba(16,185,129,.2) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,185,129,.35); box-shadow: 0 2px 8px rgba(16,185,129,.15); }
|
||||||
.bg-warning { background: rgba(251,191,36,.2) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.3); }
|
.bg-warning { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; border: 1px solid rgba(245,158,11,.35); box-shadow: 0 2px 8px rgba(245,158,11,.15); }
|
||||||
.bg-danger { background: rgba(244,63,94,.2) !important; color: #f87171 !important; border: 1px solid rgba(244,63,94,.3); }
|
.bg-danger { background: rgba(239,68,68,.2) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.35); box-shadow: 0 2px 8px rgba(239,68,68,.15); }
|
||||||
.bg-info { background: rgba(56,189,248,.2) !important; color: #38bdf8 !important; border: 1px solid rgba(56,189,248,.3); }
|
.bg-info { background: rgba(59,130,246,.2) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,.35); box-shadow: 0 2px 8px rgba(59,130,246,.15); }
|
||||||
.bg-secondary { background: var(--bg-elevated) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
|
.bg-secondary { background: rgba(100,116,139,.15) !important; color: var(--text-secondary) !important; border: 1px solid rgba(100,116,139,.25); }
|
||||||
.bg-dark { background: rgba(0,0,0,.4) !important; color: var(--text-secondary) !important; border: 1px solid var(--border); }
|
.bg-dark { background: rgba(15,23,42,.6) !important; color: var(--text-secondary) !important; border: 1px solid rgba(100,116,139,.2); }
|
||||||
|
|
||||||
/* ── Alerts ───────────────────────────────────────────────────────────────── */
|
/* ── Alerts ───────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue