ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: bolder visual refresh — lighter card surfaces, visible borders, blue glow accents 

Cards now #141418 on #0a0a0a bg for actual contrast. Borders #232329 instead
of near-invisible rgba. Pricing cards have real tier hierarchy with Pro glow
and "Popular" badge. Buttons get blue gradient glow. Status dots glow visibly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nate 2026-03-19 12:21:43 +04:00
parent c1392a7dd9
commit 096bd186ea
4 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/dashboard/app.css
View File

@ -5,27 +5,26 @@ body {
/* ─── Dashboard card overrides ─── */
.monitor-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
background: #141418;
border: 1px solid #232329;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.monitor-card:hover {
border-color: rgba(55, 55, 64, 0.8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04);
border-color: #3b82f680;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(59, 130, 246, 0.06);
transform: translateY(-1px);
}
/* ─── Stat cards ─── */
.stat-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
background: #141418;
border: 1px solid #232329;
}
/* ─── Table rows ─── */
.table-row-alt:nth-child(even) {
background: rgba(17, 17, 17, 0.3);
background: #0e0e12;
}
.table-row-alt:hover {
background: rgba(30, 30, 36, 0.5);
background: #1a1a1f;
}

2
apps/web/src/dashboard/tailwind.css
View File

File diff suppressed because one or more lines are too long

60
apps/web/src/tailwind.css
View File

@ -5,87 +5,81 @@
@theme {
--color-brand: #3b82f6;
--color-surface: rgba(17, 17, 17, 0.8);
--color-surface-hover: rgba(24, 24, 27, 0.9);
--color-surface-solid: #111111;
--color-border-subtle: rgba(38, 38, 44, 0.6);
--color-border-strong: rgba(55, 55, 64, 0.8);
--shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.06);
--shadow-glow-md: 0 0 40px rgba(59, 130, 246, 0.1);
--shadow-glow-green: 0 0 12px rgba(34, 197, 94, 0.3);
--shadow-glow-red: 0 0 12px rgba(239, 68, 68, 0.3);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04);
--color-surface: #141418;
--color-surface-hover: #1a1a1f;
--color-surface-solid: #141418;
--color-border-subtle: #232329;
--color-border-strong: #2e2e36;
--shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.08);
--shadow-glow-md: 0 0 40px rgba(59, 130, 246, 0.12);
}
/* ─── Card base ─── */
@layer components {
.card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
border-color: rgba(55, 55, 64, 0.8);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04);
border-color: #3b82f6aa;
box-shadow: 0 0 24px rgba(59, 130, 246, 0.08);
}
.card-static {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* ─── Input focus glow ─── */
.input-base {
background: rgba(17, 17, 17, 0.6);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #0f0f12;
border: 1px solid #232329;
border-radius: 0.5rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input-base:focus {
outline: none;
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.06);
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 16px rgba(59, 130, 246, 0.1);
}
/* ─── Buttons ─── */
.btn-primary {
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 100%);
color: white;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.15);
}
.btn-primary:hover {
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
}
.btn-secondary {
background: rgba(17, 17, 17, 0.6);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #1a1a1f;
border: 1px solid #2e2e36;
color: #d1d5db;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.2s;
}
.btn-secondary:hover {
background: rgba(24, 24, 27, 0.8);
border-color: rgba(55, 55, 64, 0.8);
background: #222228;
border-color: #3a3a44;
color: white;
}
/* ─── Status dot glow ─── */
.dot-up {
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 4px rgba(34, 197, 94, 0.8);
}
.dot-down {
background: #ef4444;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 4px rgba(239, 68, 68, 0.8);
}
.dot-unknown {
background: #4b5563;
@ -93,6 +87,6 @@
/* ─── Section dividers ─── */
.divider {
border-color: rgba(38, 38, 44, 0.4);
border-color: #1e1e24;
}
}

49
apps/web/src/views/landing.ejs
View File

@ -27,15 +27,15 @@
/* Terminal window */
.terminal {
background: linear-gradient(180deg, #131313 0%, #0f0f0f 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #131316;
border: 1px solid #232329;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 60px rgba(59, 130, 246, 0.06), 0 20px 60px rgba(0,0,0,0.5);
box-shadow: 0 0 80px rgba(59, 130, 246, 0.08), 0 25px 60px rgba(0,0,0,0.6);
}
.terminal-bar {
background: #1a1a1a;
border-bottom: 1px solid rgba(38, 38, 44, 0.5);
background: #191920;
border-bottom: 1px solid #232329;
padding: 12px 16px;
display: flex;
align-items: center;
@ -75,13 +75,13 @@
/* Glow card */
.glow-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.glow-card:hover {
border-color: rgba(59, 130, 246, 0.25);
box-shadow: 0 0 30px rgba(59, 130, 246, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3);
border-color: #3b82f650;
box-shadow: 0 0 30px rgba(59, 130, 246, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
@ -117,18 +117,33 @@
/* Pricing card tiers */
.pricing-free {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
}
.pricing-pro {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(59, 130, 246, 0.3);
box-shadow: 0 0 40px rgba(59, 130, 246, 0.08);
background: linear-gradient(180deg, #161a24 0%, #141418 100%);
border: 1px solid #3b82f650;
box-shadow: 0 0 40px rgba(59, 130, 246, 0.1), 0 0 80px rgba(59, 130, 246, 0.05);
position: relative;
}
.pricing-pro::before {
content: 'Popular';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #4f8ff7, #2563eb);
color: white;
font-size: 11px;
font-weight: 600;
padding: 2px 12px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.pricing-lifetime {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.06) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(234, 179, 8, 0.25);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.05);
background: linear-gradient(180deg, #1a1810 0%, #141418 100%);
border: 1px solid #eab30840;
box-shadow: 0 0 30px rgba(234, 179, 8, 0.06);
}
</style>
</head>