TDvorak/Containr
1
0 Fork 0
mirror of https://github.com/Dvorinka/Containr.git synced 2026-10-28 07:41:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards

Browse Source 
- Token swap to near-black grays + lime accent + yellow secondary across
  index.css, all shared chart/card components, and every feature page
- PlatformShell: 62px icon rail, 46px telemetry ticker topbar, containr
  wordmark, env pill; mobile header preserved
- ProjectsPage rebuilt: cursor heading, host stat row (CPU sparkline,
  MEM/DISK meters, DEPLOYS), Railway-style mini-canvas project cards,
  mono deployment feed table
- All layout-level max-w-[1400px] caps removed -> w-full px-8
- New lime containr.svg synced to public/, root, and dist
- Auth glow, chart series colors, service-type colors retuned to palette
- Demo mode now seeds representative host telemetry
- Smoke test updated for new heading/copy

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Tomas DvorakandDevin committed 2026-09-15 21:03:07 +02:00
1 parent 04d91bd69a
commit 37a56dc6b6
73 files changed
+2993 -472
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/frontend/public/containr.svg
+3 -3
View File
@@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f4497f"/>
<stop offset="1" stop-color="#cf1d5b"/>
<stop offset="0" stop-color="#cdf06f"/>
<stop offset="1" stop-color="#7fb524"/>
</linearGradient>
</defs>
<rect width="64" height="64" rx="15" fill="url(#bg)"/>
<g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
<g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="15" y="18" width="34" height="26" rx="4"/>
<path d="M23 18v26M31 18v26M39 18v26"/>
<path d="M20 51h24"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 582 B

app/frontend/src/app/App.smoke.test.tsx
+3 -3
View File
@@ -30,9 +30,9 @@ describe('App smoke routes', () => {
it('renders projects page in demo mode', async () => {
renderApp('/projects?demo=1');
expect(await screen.findByRole('heading', { name: /^projects$/i })).toBeInTheDocument();
expect(screen.getByText(/demo mode active/i)).toBeInTheDocument();
expect(screen.getByText(/deploy, manage, and monitor containerized services/i)).toBeInTheDocument();
expect(await screen.findByRole('heading', { name: /^projects\s*_?$/i })).toBeInTheDocument();
expect(screen.getByText(/recent deployments/i)).toBeInTheDocument();
expect(screen.getAllByText(/core-services/i).length).toBeGreaterThan(0);
});
it('renders builds page in demo mode', async () => {
app/frontend/src/app/layout/PlatformShell.tsx
+48 -59
View File
@@ -130,26 +130,18 @@ export function PlatformShell() {
<div className="relative flex min-h-screen">
<aside
className="hidden h-screen shrink-0 flex-col border-r md:flex"
className="hidden h-screen shrink-0 flex-col items-center border-r py-4 md:flex"
style={{
width: '232px',
width: '62px',
background: 'var(--bg-base)',
borderRightColor: 'var(--border-subtle)',
}}
>
<NavLink
to={href('/projects')}
className="flex h-[58px] shrink-0 items-center gap-3 border-b px-4"
style={{ borderBottomColor: 'var(--border-subtle)' }}
>
<img src="/containr.svg" alt="Containr" className="h-9 w-9 rounded-[var(--radius-md)]" />
<div className="min-w-0">
<p className="text-sm font-semibold text-[var(--text-primary)]">Containr</p>
<p className="text-[11px] text-[var(--text-tertiary)]">Deploy platform</p>
</div>
<NavLink to={href('/projects')} className="mb-3" title="Containr">
<img src="/containr.svg" alt="Containr" className="h-[38px] w-[38px] rounded-xl" />
</NavLink>
<nav className="flex min-h-0 flex-1 flex-col gap-1 px-3 py-4">
<nav className="flex flex-col items-center gap-1.5">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = isActiveRoute(item.href);
@@ -157,75 +149,72 @@ export function PlatformShell() {
<NavLink
key={item.href}
to={href(item.href)}
className={`flex h-10 items-center gap-3 rounded-[var(--radius-md)] px-3 text-sm font-medium transition-colors ${
title={item.label}
className={`relative flex h-10 w-10 items-center justify-center rounded-[11px] transition-colors ${
isActive
? 'bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
: 'text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]'
: 'text-[var(--text-tertiary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-secondary)]'
}`}
>
{isActive ? (
<span
className="absolute -left-[11px] h-4 w-[2.5px] rounded-full"
style={{ background: 'var(--accent-primary)' }}
/>
) : null}
<Icon size={17} />
{item.label}
</NavLink>
);
})}
</nav>
<div className="shrink-0 border-t p-3" style={{ borderTopColor: 'var(--border-subtle)' }}>
<NavLink
to={href('/settings')}
className="mb-2 flex items-center gap-3 rounded-[var(--radius-md)] p-2 hover:bg-[var(--surface-muted)]"
<div className="flex-1" />
<div className="flex flex-col items-center gap-2">
<button
type="button"
onClick={() => void signOut()}
title={`Sign out (${userName})`}
className="flex h-10 w-10 items-center justify-center rounded-[11px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--error-soft)] hover:text-[var(--error)]"
>
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--surface-card-hover)] text-xs font-semibold text-[var(--text-primary)]">
{initials}
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-[var(--text-primary)]">{userName}</p>
<p className="truncate text-xs text-[var(--text-tertiary)]">{userEmail}</p>
</div>
</NavLink>
<div className="grid grid-cols-2 gap-2">
<NavLink
to={href('/settings')}
className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
style={{ borderColor: 'var(--border-subtle)' }}
>
<Settings size={14} />
Settings
</NavLink>
<button
type="button"
onClick={() => void signOut()}
className="inline-flex h-9 items-center justify-center gap-2 rounded-[var(--radius-md)] border text-xs font-medium text-[var(--error)] hover:bg-[var(--error-soft)]"
style={{ borderColor: 'var(--error-soft)' }}
>
<LogOut size={14} />
Sign out
</button>
<LogOut size={16} />
</button>
<div
title={userEmail}
className="flex h-[30px] w-[30px] items-center justify-center rounded-full text-[11px] font-bold"
style={{ background: 'linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))', color: 'var(--accent-on)' }}
>
{initials}
</div>
</div>
</aside>
<div className="relative z-10 flex min-h-screen min-w-0 flex-1 flex-col overflow-hidden">
<header
className="hidden h-[58px] shrink-0 items-center border-b px-5 md:flex"
className="hidden h-[46px] shrink-0 items-center border-b px-5 md:flex"
style={{
background: 'var(--bg-base)',
borderBottomColor: 'var(--border-subtle)',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '11px',
}}
>
<NavLink to={href('/projects')} className="mr-4 flex items-center gap-2 text-[var(--text-primary)]">
<div className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]">
<Container size={15} />
</div>
<span className="text-sm font-semibold">Containr</span>
<NavLink to={href('/projects')} className="mr-5 text-sm font-extrabold tracking-tight text-[var(--text-primary)]" style={{ fontFamily: 'Inter, sans-serif' }}>
contain<span style={{ color: 'var(--accent-primary)' }}>r</span>
</NavLink>
<div className="search-box max-w-[420px]">
<Search size={14} />
<input type="text" placeholder="Search projects, builds, logs..." />
<div className="flex items-center gap-5">
<span className="v-tick"><i className="sig" /><b>{isDemoMode ? 'demo' : 'nominal'}</b></span>
<span className="v-tick"><i className="sig" style={{ background: 'var(--text-tertiary)' }} />node <b>local</b></span>
</div>
<div className="ml-auto flex items-center gap-2">
<div className="search-box ml-6 max-w-[300px]" style={{ height: 30 }}>
<Search size={13} />
<input type="text" placeholder="search…" className="v-mono" style={{ fontSize: 11.5 }} />
</div>
<div className="ml-auto flex items-center gap-4">
<span className="v-env">env:production</span>
<button
type="button"
onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
@@ -240,8 +229,8 @@ export function PlatformShell() {
type="button"
onClick={() => pullMutation.mutate()}
disabled={isDemoMode || pullMutation.isPending || !upgradeQuery.data?.imageRef}
className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
style={{ background: '#e8316a' }}
className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-[var(--accent-on)] disabled:cursor-not-allowed disabled:opacity-50"
style={{ background: 'var(--accent-primary)' }}
title={upgradeQuery.data?.message || 'Pull latest configured image'}
>
{pullMutation.isPending ? <RefreshCw size={14} className="animate-spin" /> : <UploadCloud size={14} />}
@@ -305,7 +294,7 @@ export function PlatformShell() {
<header className="md:hidden sticky top-0 z-50 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/85 backdrop-blur-2xl">
<div className="flex items-center justify-between p-4">
<NavLink to={href('/projects')} className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-white">
<div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)]">
<Container size={16} />
</div>
<span className="font-headline font-semibold text-[var(--text-primary)]">Containr</span>
app/frontend/src/features/auth/pages.tsx
+5 -5
View File
@@ -69,7 +69,7 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
<div className="ambient-glow" />
<div
className="absolute left-1/2 top-0 h-[420px] w-[720px] -translate-x-1/2 -translate-y-1/2 rounded-full"
style={{ background: 'radial-gradient(ellipse at center, rgba(232,49,106,0.16) 0%, transparent 65%)' }}
style={{ background: 'radial-gradient(ellipse at center, rgba(180,227,74,0.10) 0%, transparent 65%)' }}
/>
<div className="relative flex min-h-screen flex-col items-center justify-center px-5 py-10">
<div className="mb-8 flex flex-col items-center">
@@ -203,8 +203,8 @@ export function SignInPage() {
<button
type="submit"
disabled={isSubmitting || sessionQuery.isPending}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: '#e8316a' }}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <Mail size={15} />}
Continue
@@ -336,8 +336,8 @@ export function SignUpPage() {
<button
type="submit"
disabled={isSubmitting || sessionQuery.isPending}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-white shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: '#e8316a' }}
className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
Create Account
app/frontend/src/features/builds/pages/BuildsPage.tsx
+7 -7
View File
@@ -164,10 +164,10 @@ export function BuildsPage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">Build Pipeline</h1>
<h1 className="v-title">Build Pipeline<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">Monitor build progress and manage jobs</p>
</div>
@@ -192,7 +192,7 @@ export function BuildsPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -203,7 +203,7 @@ export function BuildsPage() {
)}
{/* Stats Overview */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="panel p-4">
<div className="flex items-center justify-between mb-3">
@@ -245,7 +245,7 @@ export function BuildsPage() {
</div>
{/* Filters */}
<div className="mx-auto w-full max-w-[1400px] px-6">
<div className="w-full px-8">
<div className="panel p-4">
<div className="flex items-center gap-2 mb-4">
<Filter size={16} className="text-[var(--text-tertiary)]" />
@@ -307,7 +307,7 @@ export function BuildsPage() {
</div>
{/* Build Table */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="panel overflow-hidden">
{!isDemoMode && buildsQuery.isLoading ? (
<div className="p-12 text-center">
@@ -397,7 +397,7 @@ export function BuildsPage() {
<div className="h-2 rounded-full bg-[var(--surface-muted)] overflow-hidden">
<div
className="h-full rounded-full transition-all duration-300"
style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: '#e8316a' }}
style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: 'var(--accent-primary)' }}
/>
</div>
</div>
app/frontend/src/features/projects/pages/ProjectsPage.tsx
+219 -212
View File
@@ -1,39 +1,46 @@
import { useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { createProject, listProjects, type ProjectEntity, type ProjectStats } from '@/lib/api-client';
import {
Plus,
createProject,
getHostMonitoring,
listBuilds,
listProjects,
type ProjectEntity,
type ProjectStats,
} from '@/lib/api-client';
import {
Search,
ArrowRight,
Layers,
Clock,
Sparkles,
FolderOpen,
X,
Check,
AlertTriangle
} from 'lucide-react';
const demoProjects: ProjectEntity[] = [
{
id: 'project-demo',
name: 'Demo Project',
name: 'core-services',
description: 'Sample project with mock services for UI preview.',
createdAt: new Date(Date.now() - 14 * 86_400_000).toISOString(),
updatedAt: new Date().toISOString(),
stats: { service_count: 3, deployment_count: 12, running_services: 2 },
stats: { service_count: 5, deployment_count: 12, running_services: 5 },
},
{
id: 'project-staging',
name: 'Staging Environment',
name: 'ml-pipeline',
description: 'Pre-production environment for testing new releases.',
createdAt: new Date(Date.now() - 7 * 86_400_000).toISOString(),
updatedAt: new Date(Date.now() - 2 * 86_400_000).toISOString(),
stats: { service_count: 1, deployment_count: 5, running_services: 1 },
stats: { service_count: 2, deployment_count: 5, running_services: 1 },
},
];
const demoDeploys = [
{ id: 'd1', name: 'api-gateway', project: 'core-services', status: 'DEPLOYED', when: '4m' },
{ id: 'd2', name: 'web-frontend', project: 'core-services', status: 'BUILDING', when: '6m' },
{ id: 'd3', name: 'worker', project: 'ml-pipeline', status: 'FAILED', when: '1h' },
{ id: 'd4', name: 'site', project: 'growth-site', status: 'DEPLOYED', when: '2h' },
];
function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
if (stats.service_count === 0) return 'healthy';
if (stats.running_services === stats.service_count) return 'healthy';
@@ -41,145 +48,85 @@ function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critica
return 'critical';
}
function healthConfig(health: ReturnType<typeof getHealthStatus>) {
function healthBadge(health: ReturnType<typeof getHealthStatus>) {
switch (health) {
case 'healthy':
return {
label: 'Operational',
color: 'var(--success)',
bg: 'var(--success-soft)',
Icon: Check
};
return { label: 'RUNNING', cls: 'v-st-ok' };
case 'degraded':
return {
label: 'Degraded',
color: 'var(--warning)',
bg: 'var(--warning-soft)',
Icon: AlertTriangle
};
return { label: 'DEGRADED', cls: 'v-st-warn' };
case 'critical':
return {
label: 'Critical',
color: 'var(--error)',
bg: 'var(--error-soft)',
Icon: X
};
return { label: 'DOWN', cls: 'v-st-fail' };
}
}
function formatRelative(date?: string): string {
if (!date) return '—';
const now = Date.now();
const then = new Date(date).getTime();
const diff = now - then;
const diff = Date.now() - new Date(date).getTime();
if (diff < 60_000) return 'just now';
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
return `${Math.floor(diff / 86_400_000)}d ago`;
}
function MiniCanvas({ project }: { project: ProjectEntity }) {
const count = project.stats.service_count;
const running = project.stats.running_services;
const shown = Math.min(count, 4);
const extra = count - shown;
const positions = [
{ left: 14, top: 22 },
{ left: 96, top: 22 },
{ left: 14, top: 62 },
{ left: 96, top: 62 },
];
return (
<div className="v-mini">
{count >= 2 ? <div className="v-edge" style={{ left: 46, top: 38, width: 50 }} /> : null}
{count >= 4 ? <div className="v-edge" style={{ left: 46, top: 78, width: 50 }} /> : null}
{Array.from({ length: shown }).map((_, i) => (
<div key={i} className="v-node" style={positions[i]}>
<b className={`v-nd ${i < running ? '' : 'r'}`} />
svc{i + 1}
</div>
))}
{extra > 0 ? (
<div className="v-more" style={{ left: 178, top: 22 }}>+{extra}</div>
) : null}
</div>
);
}
function ProjectCard({ project, href }: { project: ProjectEntity; href: string }) {
const navigate = useNavigate();
const health = getHealthStatus(project.stats);
const config = healthConfig(health);
const Icon = config.Icon;
const healthPercent = project.stats.service_count === 0
? 100
: Math.round((project.stats.running_services / project.stats.service_count) * 100);
const badge = healthBadge(health);
const envOk = health === 'healthy';
return (
<article
className="group panel p-0 overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-[var(--shadow-lg)] hover:border-[var(--border-default)]"
className="group panel p-4 cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)]"
onClick={() => navigate(href)}
>
{/* Header with solid accent */}
<div className="relative px-5 pt-5 pb-4">
<div className="absolute inset-0 h-28 bg-[#e8316a]/10" />
<div className="relative flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<h3 className="font-headline text-lg font-semibold tracking-tight text-[var(--text-primary)] truncate group-hover:text-[var(--accent-primary)] transition-colors">
{project.name}
</h3>
<p className="mt-1.5 text-sm text-[var(--text-secondary)] line-clamp-2 leading-relaxed">
{project.description || 'No description provided'}
</p>
</div>
<div
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-xs font-medium ring-1 ring-inset"
style={{ background: config.bg, color: config.color, borderColor: `${config.color}30` }}
>
<Icon size={12} />
{config.label}
</div>
</div>
<div className="mb-3 flex items-center gap-2">
<h3 className="truncate text-[14.5px] font-bold tracking-tight text-[var(--text-primary)]">
{project.name}
</h3>
<span className={`v-st ml-auto ${badge.cls}`}>{badge.label}</span>
</div>
{/* Service Topology Preview */}
<div className="px-5 py-3 border-y border-[var(--border-subtle)] bg-[var(--surface-muted)]/30">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(project.stats.service_count, 5) }).map((_, i) => (
<div
key={i}
className="w-8 h-8 rounded-lg bg-[var(--surface-card)] border border-[var(--border-subtle)] flex items-center justify-center transition-colors group-hover:border-[var(--border-default)]"
>
<Layers size={14} className="text-[var(--text-tertiary)]" />
</div>
))}
{project.stats.service_count > 5 && (
<div className="w-8 h-8 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)] flex items-center justify-center text-xs text-[var(--text-tertiary)] font-medium">
+{project.stats.service_count - 5}
</div>
)}
</div>
<span className="text-xs text-[var(--text-tertiary)] font-medium">
{project.stats.service_count} service{project.stats.service_count !== 1 ? 's' : ''}
</span>
</div>
</div>
{/* Stats Grid */}
<div className="p-5">
<div className="grid grid-cols-3 gap-4">
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Services</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{project.stats.service_count}</p>
</div>
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Running</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--success)]">{project.stats.running_services}</p>
</div>
<div>
<p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-medium">Health</p>
<p className="mt-1.5 text-xl font-semibold text-[var(--text-primary)]">{healthPercent}%</p>
</div>
</div>
{/* Health Progress Bar */}
<div className="mt-4">
<div className="h-1.5 rounded-full bg-[var(--surface-muted)] overflow-hidden">
<div
className="h-full rounded-full transition-all duration-500"
style={{
width: `${healthPercent}%`,
background: config.color
}}
/>
</div>
</div>
{/* Footer */}
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)]">
<Clock size={12} />
<span>Updated {formatRelative(project.updatedAt)}</span>
</div>
<div className="flex items-center gap-1 text-xs font-medium text-[var(--accent-primary)] opacity-0 group-hover:opacity-100 transition-all duration-200 translate-x-2 group-hover:translate-x-0">
<span>Open</span>
<ArrowRight size={12} />
</div>
</div>
<MiniCanvas project={project} />
<div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
<i
className="inline-block h-1.5 w-1.5 rounded-full"
style={{ background: envOk ? 'var(--success)' : 'var(--warning)' }}
/>
<span className="text-[var(--text-secondary)]">
{envOk ? 'production' : 'degraded'}
</span>
<span>·</span>
<span>
{project.stats.running_services}/{project.stats.service_count} online
</span>
<span className="ml-auto">{formatRelative(project.updatedAt)}</span>
</div>
</article>
);
@@ -203,6 +150,18 @@ export function ProjectsPage() {
enabled: !isDemoMode,
queryFn: listProjects,
});
const hostQuery = useQuery({
queryKey: ['host-monitoring'],
enabled: !isDemoMode,
queryFn: getHostMonitoring,
refetchInterval: 30_000,
});
const buildsQuery = useQuery({
queryKey: ['recent-deploys'],
enabled: !isDemoMode,
queryFn: () => listBuilds({ page: 1, limit: 5 }),
refetchInterval: 30_000,
});
const createProjectMutation = useMutation({
mutationFn: () => createProject({ name: form.name.trim(), description: form.description.trim() || undefined }),
@@ -224,82 +183,119 @@ export function ProjectsPage() {
);
}, [isDemoMode, projectsQuery.data, search]);
const projects = isDemoMode ? demoProjects : projectsQuery.data ?? [];
const totalServices = projects.reduce((sum, p) => sum + p.stats.service_count, 0);
const runningServices = projects.reduce((sum, p) => sum + p.stats.running_services, 0);
const host = hostQuery.data;
const cpuPct = isDemoMode ? 14 : host && host.cpu.cores > 0
? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
: null;
const memPct = isDemoMode ? 72 : host ? Math.round(host.memory.usagePercent) : null;
const diskPct = isDemoMode ? 73 : host ? Math.round(host.storage.usagePercent) : null;
const fmtGB = (v: number) => `${(v / (1024 * 1024 * 1024)).toFixed(0)}G`;
const builds = isDemoMode ? [] : buildsQuery.data?.builds ?? [];
const deployCount = buildsQuery.data?.total ?? builds.length;
const feed = isDemoMode
? demoDeploys
: builds.map((b) => ({
id: b.id,
name: b.imageName || b.serviceId || b.id,
project: '',
status: (b.status || 'queued').toUpperCase(),
when: formatRelative(b.startedAt ?? b.completedAt),
}));
const statusClass = (status: string) =>
status === 'DEPLOYED' || status === 'SUCCESS' || status === 'SUCCEEDED'
? 'v-st-ok'
: status === 'BUILDING' || status === 'RUNNING' || status === 'QUEUED'
? 'v-st-run'
: status === 'FAILED' || status === 'CANCELLED'
? 'v-st-fail'
: 'v-st-off';
return (
<div className="min-h-screen relative">
{/* Header */}
<div className="border-b border-[var(--border-subtle)]">
<div className="mx-auto w-full max-w-[1400px] px-6 py-5 flex items-center justify-between">
<div className="flex items-center gap-3">
<div
className="flex items-center justify-center rounded-[var(--radius-md)]"
style={{ width: '36px', height: '36px', background: '#e8316a' }}
>
<FolderOpen size={17} className="text-white" />
</div>
<div>
<h1 className="font-headline text-xl font-semibold tracking-tight text-[var(--text-primary)]">
Projects
</h1>
<p className="text-xs text-[var(--text-tertiary)]">
Deploy, manage, and monitor containerized services
</p>
</div>
<div className="min-h-screen">
<div className="w-full px-8 py-6">
{/* Page head */}
<div className="mb-6 flex items-center justify-between gap-5">
<div>
<h1 className="v-title">Projects<span className="v-cursor">_</span></h1>
<p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
<b className="text-[var(--text-secondary)]">{String(projects.length).padStart(2, '0')}</b> projects ·{' '}
<b className="text-[var(--text-secondary)]">{String(totalServices).padStart(2, '0')}</b> services ·{' '}
<b className="text-[var(--text-secondary)]">{runningServices}</b> online
</p>
</div>
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
<div className="w-1.5 h-1.5 rounded-full bg-[var(--success)] live-pulse" />
<span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-tertiary)]">
Workspace
</span>
<div className="flex items-center gap-2.5">
<div className="search-box" style={{ width: 240 }}>
<Search size={13} />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="search projects…"
className="v-mono"
style={{ fontSize: 11.5 }}
/>
</div>
<button onClick={() => setCreateOpen(true)} className="v-btn">
+ new project
</button>
</div>
</div>
</div>
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
{/* Toolbar */}
<div className="flex flex-col sm:flex-row gap-4 mb-8">
<div className="relative flex-1">
<Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]" />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search projects by name or description..."
className="w-full h-11 pl-11 pr-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
/>
</div>
<button
onClick={() => setCreateOpen(true)}
className="flex items-center justify-center gap-2 h-11 px-5 rounded-[var(--radius-md)] text-white font-medium text-sm shadow-lg hover:shadow-xl transition-all duration-300"
style={{ background: '#e8316a' }}
>
<Plus size={16} />
<span>New Project</span>
</button>
</div>
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mb-6 px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
<span>Demo mode active — using sample data for preview</span>
{/* Host stat row */}
<div className="mb-7 grid grid-cols-2 gap-3 lg:grid-cols-4">
<div className="v-stat">
<div className="v-k"><span>HOST.CPU</span><span className="v-live" /></div>
<div className="v-v">{cpuPct ?? '—'}<span>%</span></div>
{isDemoMode ? (
<div className="v-spark">
{[28, 44, 36, 58, 42, 66, 50, 34, 56, 40, 30, 20].map((h, i) => (
<i key={i} style={{ height: `${h}%` }} />
))}
</div>
) : null}
<div className="v-d">
{isDemoMode || host ? (
<><b style={{ color: 'var(--success)' }}>healthy</b> · {host?.cpu.cores ?? 16} cores</>
) : 'no telemetry'}
</div>
</div>
)}
<div className="v-stat">
<div className="v-k"><span>HOST.MEM</span><span className="v-live" /></div>
<div className="v-v">{memPct ?? '—'}<span>%</span></div>
<div className="v-meter"><i className={memPct !== null && memPct > 85 ? 'r' : 'y'} style={{ width: `${memPct ?? 0}%` }} /></div>
<div className="v-d">{isDemoMode ? '9.8G / 13G' : host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)}` : 'no telemetry'}</div>
</div>
<div className="v-stat">
<div className="v-k"><span>HOST.DISK</span><span className="v-live" /></div>
<div className="v-v">{diskPct ?? '—'}<span>%</span></div>
<div className="v-meter"><i className="r" style={{ width: `${diskPct ?? 0}%` }} /></div>
<div className="v-d">{isDemoMode ? '338G of 465G · high' : host ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}` : 'no telemetry'}</div>
</div>
<div className="v-stat">
<div className="v-k"><span>DEPLOYS</span></div>
<div className="v-v">{isDemoMode ? 18 : deployCount}</div>
<div className="v-meter"><i style={{ width: '94%' }} /></div>
<div className="v-d"><b style={{ color: 'var(--success)' }}>{isDemoMode ? '17 ok' : `${builds.filter((b) => (b.status ?? '').toLowerCase() !== 'failed').length} recent`}</b></div>
</div>
</div>
{/* Projects grid */}
<p className="v-sect">PROJECTS <span className="v-sect-r">{filteredProjects.length} records</span></p>
{/* Loading State */}
{!isDemoMode && projectsQuery.isLoading && (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="panel h-[320px] animate-pulse bg-[var(--surface-card)]" />
<div key={i} className="panel h-[210px] animate-pulse" />
))}
</div>
)}
{/* Error State */}
{!isDemoMode && projectsQuery.isError && (
<div className="panel p-8 text-center">
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--error-soft)]">
<X size={24} className="text-[var(--error)]" />
</div>
<p className="text-lg font-medium text-[var(--text-primary)]">Failed to load projects</p>
@@ -307,34 +303,49 @@ export function ProjectsPage() {
</div>
)}
{/* Empty State */}
{((isDemoMode && filteredProjects.length === 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length === 0)) && (
{filteredProjects.length === 0 && !projectsQuery.isLoading && !projectsQuery.isError ? (
<div className="panel p-12 text-center">
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[var(--accent-primary-soft)] flex items-center justify-center">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--accent-primary-soft)]">
<FolderOpen size={28} className="text-[var(--accent-primary)]" />
</div>
<p className="text-xl font-semibold text-[var(--text-primary)]">No projects yet</p>
<p className="mt-2 text-[var(--text-secondary)] max-w-md mx-auto">
<p className="mx-auto mt-2 max-w-md text-[var(--text-secondary)]">
Create your first project to start deploying services with visual topology management.
</p>
<button
onClick={() => setCreateOpen(true)}
className="mt-6 inline-flex items-center gap-2 px-5 py-2.5 rounded-[var(--radius-md)] border border-[var(--accent-primary)] text-[var(--accent-primary)] font-medium text-sm hover:bg-[var(--accent-primary-soft)] transition-colors"
>
<Plus size={16} />
Create Project
<button onClick={() => setCreateOpen(true)} className="v-btn mt-6">
+ create project
</button>
</div>
)}
) : null}
{/* Project Grid */}
{((isDemoMode && filteredProjects.length > 0) || (!isDemoMode && !projectsQuery.isLoading && !projectsQuery.isError && filteredProjects.length > 0)) && (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
{filteredProjects.length > 0 && (
<div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{filteredProjects.map((project) => (
<ProjectCard key={project.id} project={project} href={projectHref(project.id)} />
))}
</div>
)}
{/* Deploy feed */}
<p className="v-sect mt-7">RECENT DEPLOYMENTS <span className="v-sect-r">latest</span></p>
<div className="v-tbl">
<table>
<thead>
<tr><th>SERVICE</th><th>STATUS</th><th style={{ textAlign: 'right' }}>WHEN</th></tr>
</thead>
<tbody>
{feed.length === 0 ? (
<tr><td colSpan={3} className="text-center" style={{ color: 'var(--text-tertiary)' }}>no deployments yet</td></tr>
) : feed.map((d) => (
<tr key={d.id}>
<td className="v-lead">{d.name}{d.project ? <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{d.project}</span> : null}</td>
<td><span className={`v-st ${statusClass(d.status)}`}>{d.status}</span></td>
<td style={{ textAlign: 'right' }}>{d.when}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Create Modal */}
@@ -349,18 +360,18 @@ export function ProjectsPage() {
<div className="mt-6 space-y-4">
<div>
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
<label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
Project Name
</label>
<input
value={form.name}
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
placeholder="my-awesome-project"
className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
className="h-11 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
/>
</div>
<div>
<label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
<label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
Description <span className="normal-case text-[var(--text-muted)]">(optional)</span>
</label>
<textarea
@@ -368,29 +379,25 @@ export function ProjectsPage() {
onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
placeholder="Describe your project..."
rows={3}
className="w-full px-4 py-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all resize-none"
className="w-full resize-none rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 py-3 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
/>
</div>
</div>
{createProjectMutation.isError && (
<div className="mt-4 px-4 py-3 rounded-[var(--radius-md)] bg-[var(--error-soft)] text-sm text-[var(--error)]">
<div className="mt-4 rounded-[var(--radius-md)] bg-[var(--error-soft)] px-4 py-3 text-sm text-[var(--error)]">
{(createProjectMutation.error as Error).message}
</div>
)}
<div className="mt-6 flex justify-end gap-3">
<button
onClick={() => setCreateOpen(false)}
className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-[var(--text-secondary)] text-sm font-medium hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors"
>
<button onClick={() => setCreateOpen(false)} className="v-btn-ghost">
Cancel
</button>
<button
onClick={() => createProjectMutation.mutate()}
disabled={!form.name.trim() || createProjectMutation.isPending}
className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="v-btn"
>
{createProjectMutation.isPending ? 'Creating...' : 'Create Project'}
</button>
app/frontend/src/features/secondary/pages.tsx
+19 -19
View File
@@ -54,10 +54,10 @@ import {
function SecondaryPageHeader({ title, description }: { title: string; description: string }) {
return (
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<h1 className="text-xl font-semibold text-[var(--text-primary)]">{title}</h1>
<p className="text-sm text-[var(--text-secondary)] mt-1">{description}</p>
<div className="border-b border-[var(--border-subtle)]">
<div className="w-full px-8 py-5">
<h1 className="v-title">{title}<span className="v-cursor">_</span></h1>
<p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">{description}</p>
</div>
</div>
);
@@ -302,7 +302,7 @@ containr-agent`;
title="Usage"
description="Platform usage metrics and operational summaries"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="flex items-center gap-2 mb-6">
<div className={`w-2 h-2 rounded-full ${liveStatus === 'live' ? 'bg-[var(--success)] animate-pulse' : 'bg-[var(--text-muted)]'}`} />
<span className={`text-sm ${liveStatus === 'live' ? 'text-[var(--success)]' : 'text-[var(--text-muted)]'}`}>
@@ -340,7 +340,7 @@ containr-agent`;
statusText={failedBuilds > 0 ? `${failedBuilds} failed` : 'Healthy'}
subtitle={buildActivityBody}
icon={<Activity size={18} />}
chart={<BarChart data={buildsPerDay} color="#e8316a" height={72} gap={3} />}
chart={<BarChart data={buildsPerDay} color="var(--accent-primary)" height={72} gap={3} />}
/>
<EnhancedMetricCard
title="Capacity"
@@ -392,7 +392,7 @@ containr-agent`;
status={hostStatus(hostLoadPercent)}
statusText={host ? { good: 'Good', average: 'Average', warning: 'High' }[hostStatus(hostLoadPercent)] : ''}
subtitle={host ? `${host.cpu.cores} cores · 5m ${host.load.load5m.toFixed(2)} · 15m ${host.load.load15m.toFixed(2)}` : 'Loading CPU telemetry.'}
chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#ff7043" height={72} />}
chart={<LineAreaChart data={loadHistory.length > 0 ? loadHistory : [0]} color="#b4e34a" height={72} />}
/>
<EnhancedMetricCard
title="Memory"
@@ -403,7 +403,7 @@ containr-agent`;
subtitle={host ? `${formatBytes(host.memory.available)} free` : 'Loading memory telemetry.'}
chart={
<div className="relative mx-auto" style={{ width: 150 }}>
<DonutChart percentage={host?.memory.usagePercent ?? 0} color="#9c7ef0" size={150} thickness={14} />
<DonutChart percentage={host?.memory.usagePercent ?? 0} color="#f2c94c" size={150} thickness={14} />
<div className="absolute inset-x-0 bottom-0 text-center">
<div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
<div className="text-sm font-bold text-[#e8e9f0]">
@@ -600,7 +600,7 @@ export function PeoplePage() {
title="People"
description="Team management and access control"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
{profileQuery.isLoading ? (
<div className="py-16 text-center">
<Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
@@ -677,8 +677,8 @@ export function PeoplePage() {
<button
type="submit"
disabled={createUserMutation.isPending}
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-white disabled:opacity-60"
style={{ background: '#e8316a' }}
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-[var(--accent-on)] disabled:opacity-60"
style={{ background: 'var(--accent-primary)' }}
>
{createUserMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <UserPlus size={14} />}
Create
@@ -764,8 +764,8 @@ function GitProvidersSection() {
</div>
<button
onClick={() => setFormOpen((open) => !open)}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg transition-all"
style={{ background: 'var(--accent-primary)' }}
>
<Link2 size={14} />
{formOpen ? 'Close' : 'Connect'}
@@ -880,8 +880,8 @@ function GitProvidersSection() {
<button
onClick={() => createMutation.mutate()}
disabled={!form.accessToken.trim() || createMutation.isPending}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{createMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
Connect Provider
@@ -964,7 +964,7 @@ export function SettingsPage() {
title="Settings"
description="Manage account profile and local configuration"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
{/* Profile Section */}
<section className="panel p-6">
@@ -1015,8 +1015,8 @@ export function SettingsPage() {
<button
onClick={() => updateProfileMutation.mutate()}
disabled={!hasProfileChanges || updateProfileMutation.isPending}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{updateProfileMutation.isPending ? (
<>
@@ -1185,7 +1185,7 @@ export function DocsPage() {
title="Docs"
description="Operational references and API documentation"
/>
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
{/* API Status Grid */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div className="panel p-4">
app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
+20 -20
View File
@@ -37,15 +37,15 @@ export function ComponentShowcase() {
<div className="min-h-screen p-8" style={{ background: '#16171c' }}>
<div className="ambient-glow" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="w-full relative z-10">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
<div
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ background: '#e8316a' }}
style={{ background: 'var(--accent-primary)' }}
>
<Activity size={24} className="text-white" />
<Activity size={24} className="text-[var(--accent-on)]" />
</div>
<div>
<h1 className="text-3xl font-bold text-[var(--text-primary)]">
@@ -97,7 +97,7 @@ export function ComponentShowcase() {
</h3>
<LineChart
data={sampleLineData}
color="#ff7043"
color="#b4e34a"
height={120}
showDots={true}
smooth={true}
@@ -109,7 +109,7 @@ export function ComponentShowcase() {
</h3>
<LineChart
data={sampleLineData}
color="#6c8ef0"
color="#7ab8ff"
height={120}
showDots={false}
smooth={true}
@@ -129,7 +129,7 @@ export function ComponentShowcase() {
</h3>
<LineAreaChart
data={sampleAreaData}
color="#e8316a"
color="var(--accent-primary)"
fillOpacity={0.15}
height={150}
/>
@@ -140,7 +140,7 @@ export function ComponentShowcase() {
</h3>
<LineAreaChart
data={sampleAreaData}
color="#3dd68c"
color="#5ee6a0"
fillOpacity={0.2}
height={150}
/>
@@ -159,8 +159,8 @@ export function ComponentShowcase() {
</h3>
<MultiLineChart
datasets={[
{ data: sampleLineData.map(v => v + 10), color: '#6c8ef0', fillOpacity: 0.15 },
{ data: sampleLineData, color: '#9c7ef0', fillOpacity: 0.15 }
{ data: sampleLineData.map(v => v + 10), color: '#7ab8ff', fillOpacity: 0.15 },
{ data: sampleLineData, color: '#f2c94c', fillOpacity: 0.15 }
]}
height={120}
/>
@@ -171,7 +171,7 @@ export function ComponentShowcase() {
</h3>
<BarChart
data={sampleBarData}
color="#3dd68c"
color="#5ee6a0"
height={120}
gap={2}
/>
@@ -188,19 +188,19 @@ export function ComponentShowcase() {
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
RAM Usage (65%)
</h3>
<DonutChart percentage={65} color="#9c7ef0" size={160} />
<DonutChart percentage={65} color="#f2c94c" size={160} />
</div>
<div className="panel p-6 flex flex-col items-center">
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Disk Usage (82%)
</h3>
<DonutChart percentage={82} color="#ff7043" size={160} />
<DonutChart percentage={82} color="#b4e34a" size={160} />
</div>
<div className="panel p-6 flex flex-col items-center">
<h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
Network (45%)
</h3>
<DonutChart percentage={45} color="#6c8ef0" size={160} />
<DonutChart percentage={45} color="#7ab8ff" size={160} />
</div>
</div>
</section>
@@ -222,7 +222,7 @@ export function ComponentShowcase() {
status="good"
statusText="Good"
icon={<Cpu size={16} />}
chart={<LineChart data={sampleLineData} color="#ff7043" height={76} />}
chart={<LineChart data={sampleLineData} color="#b4e34a" height={76} />}
onClick={() => handleCardClick('CPU Usage')}
animationDelay={0.04}
/>
@@ -233,7 +233,7 @@ export function ComponentShowcase() {
status="average"
statusText="Average"
icon={<MemoryStick size={16} />}
chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#9c7ef0" height={76} />}
chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#f2c94c" height={76} />}
onClick={() => handleCardClick('Memory')}
animationDelay={0.09}
/>
@@ -242,7 +242,7 @@ export function ComponentShowcase() {
value="2.4K"
subtitle="Last 60 minutes"
icon={<Zap size={16} />}
chart={<BarChart data={sampleBarData} color="#3dd68c" height={76} gap={2} />}
chart={<BarChart data={sampleBarData} color="#5ee6a0" height={76} gap={2} />}
onClick={() => handleCardClick('Requests')}
animationDelay={0.14}
/>
@@ -259,7 +259,7 @@ export function ComponentShowcase() {
value="475 K"
subtitle="Users active right now"
icon={<Users size={16} />}
chart={<LineAreaChart data={sampleAreaData} color="#e8316a" height={130} />}
chart={<LineAreaChart data={sampleAreaData} color="var(--accent-primary)" height={130} />}
details={
<div className="flex items-center gap-1.5 flex-wrap">
{['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
@@ -276,7 +276,7 @@ export function ComponentShowcase() {
value="12.5K"
subtitle="Queries per minute"
icon={<Database size={16} />}
chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#6c8ef0" height={130} />}
chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#7ab8ff" height={130} />}
details={
<div className="flex items-center gap-3 text-xs">
<div className="flex items-center gap-1.5">
@@ -313,8 +313,8 @@ export function ComponentShowcase() {
upSpeed={10.4}
downSpeed={5.2}
datasets={[
{ data: sampleLineData.map(v => v + 20), color: '#6c8ef0', fillOpacity: 0.15 },
{ data: sampleLineData.map(v => v + 10), color: '#9c7ef0', fillOpacity: 0.15 }
{ data: sampleLineData.map(v => v + 20), color: '#7ab8ff', fillOpacity: 0.15 },
{ data: sampleLineData.map(v => v + 10), color: '#f2c94c', fillOpacity: 0.15 }
]}
onClick={() => handleCardClick('Performance')}
animationDelay={0.09}
app/frontend/src/features/service/pages/ServiceDetailPage.tsx
+10 -10
View File
@@ -302,7 +302,7 @@ export function ServiceDetailPage() {
style={{
width: '46px',
height: '46px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginRight: '14px'
}}
>
@@ -379,7 +379,7 @@ export function ServiceDetailPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -390,7 +390,7 @@ export function ServiceDetailPage() {
)}
{/* Metrics Overview */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<EnhancedMetricCard
title="CPU Usage"
@@ -404,7 +404,7 @@ export function ServiceDetailPage() {
data={isDemoMode
? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:cpu:${i}`, 8, 80))
: metricHistory.cpu.length > 0 ? metricHistory.cpu : [0]}
color="#ff7043"
color="#b4e34a"
height={72}
/>
}
@@ -418,7 +418,7 @@ export function ServiceDetailPage() {
subtitle={isDemoMode ? 'Container footprint' : hasLiveTelemetry ? `${formatBytes(liveMetrics!.memory_usage_bytes)} used` : 'No running containers'}
chart={
<div className="relative mx-auto" style={{ width: 150 }}>
<DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#9c7ef0" size={150} thickness={14} />
<DonutChart percentage={isDemoMode ? metricSet?.memory ?? 0 : memoryPercent} color="#f2c94c" size={150} thickness={14} />
<div className="absolute inset-x-0 bottom-0 text-center">
<div className="text-[10px] uppercase tracking-wide text-[#6b6e7d]">Used</div>
<div className="text-sm font-bold text-[#e8e9f0]">
@@ -444,7 +444,7 @@ export function ServiceDetailPage() {
data={isDemoMode
? Array.from({ length: 24 }, (_, i) => seededMetric(`${service.id}:net:${i}`, 15, 70))
: metricHistory.net.length > 0 ? metricHistory.net : [0]}
color="#6c8ef0"
color="#7ab8ff"
height={72}
/>
}
@@ -555,7 +555,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
style={{ height: `${value}%`, background: '#ff7043' }}
style={{ height: `${value}%`, background: '#b4e34a' }}
title={`${value}%`}
/>
);
@@ -564,7 +564,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
style={{ height: `${Math.max(3, value)}%`, background: '#ff7043' }}
style={{ height: `${Math.max(3, value)}%`, background: '#b4e34a' }}
title={`${value.toFixed(1)}%`}
/>
))}
@@ -596,7 +596,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80 cursor-pointer"
style={{ height: `${value}%`, background: '#3dd68c' }}
style={{ height: `${value}%`, background: '#5ee6a0' }}
title={`${value}%`}
/>
);
@@ -605,7 +605,7 @@ export function ServiceDetailPage() {
<div
key={i}
className="flex-1 rounded-[var(--radius-xs)] transition-all hover:opacity-80"
style={{ height: `${Math.max(3, value)}%`, background: '#3dd68c' }}
style={{ height: `${Math.max(3, value)}%`, background: '#5ee6a0' }}
title={`${value.toFixed(1)}%`}
/>
))}
app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
+8 -8
View File
@@ -78,8 +78,8 @@ export function ServiceMetricsDashboard() {
userData,
perf: perfPercent,
perfData: [
{ data: perfData1, color: '#6c8ef0', fillOpacity: 0.15 },
{ data: perfData2, color: '#9c7ef0', fillOpacity: 0.15 }
{ data: perfData1, color: '#7ab8ff', fillOpacity: 0.15 },
{ data: perfData2, color: '#f2c94c', fillOpacity: 0.15 }
],
upSpeed: seededRandom(`${serviceId}:upspeed`, 8, 13).toFixed(1),
downSpeed: seededRandom(`${serviceId}:downspeed`, 4, 7).toFixed(1),
@@ -129,7 +129,7 @@ export function ServiceMetricsDashboard() {
style={{
width: '38px',
height: '38px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginBottom: '14px'
}}
>
@@ -270,7 +270,7 @@ export function ServiceMetricsDashboard() {
style={{
width: '46px',
height: '46px',
background: '#e8316a',
background: 'var(--accent-primary)',
marginRight: '14px'
}}
>
@@ -408,7 +408,7 @@ export function ServiceMetricsDashboard() {
status="good"
statusText="Good"
icon={<Cpu size={16} />}
chart={<LineChart data={metrics.cpuData} color="#ff7043" height={76} />}
chart={<LineChart data={metrics.cpuData} color="#b4e34a" height={76} />}
animationDelay={0.04}
/>
@@ -424,10 +424,10 @@ export function ServiceMetricsDashboard() {
{metrics.ram}%
</div>
<div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>Average</span> Daily usage
<span style={{ color: '#f2c94c', fontWeight: 700 }}>Average</span> Daily usage
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
<DonutChart percentage={metrics.ram} color="#9c7ef0" />
<DonutChart percentage={metrics.ram} color="#f2c94c" />
<div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
<div style={{ fontSize: 10.5, color: '#6b6e7d', marginBottom: 1 }}>Used</div>
<div style={{ fontSize: 12.5, fontWeight: 700, color: '#e8e9f0' }}>{metrics.ramUsedGB} GB / 8GB</div>
@@ -460,7 +460,7 @@ export function ServiceMetricsDashboard() {
value={`${metrics.users} K`}
subtitle="User active right now"
icon={<Users size={16} />}
chart={<LineAreaChart data={metrics.userData} color="#e8316a" height={130} />}
chart={<LineAreaChart data={metrics.userData} color="var(--accent-primary)" height={130} />}
details={
<div className="flex items-center gap-1.5 flex-wrap">
{['🇨🇳', '🇮🇩', '🇲🇲', '🇲🇾', '🇯🇵', '🇮🇳', '🇰🇷', '🇵🇭'].map((flag, i) => (
app/frontend/src/features/templates/pages/TemplatesPage.tsx
+7 -7
View File
@@ -557,10 +557,10 @@ export function TemplatesPage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">Template Catalog</h1>
<h1 className="v-title">Template Catalog<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">Deploy services from pre-configured templates</p>
</div>
<div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
@@ -573,7 +573,7 @@ export function TemplatesPage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -584,7 +584,7 @@ export function TemplatesPage() {
)}
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 xl:grid-cols-[380px_1fr] gap-6">
{/* Template List */}
<section className="panel overflow-hidden">
@@ -657,7 +657,7 @@ export function TemplatesPage() {
{filteredTemplates.map((template) => {
const selected = template.id === selectedTemplateId;
const Icon = categoryIcon(template.category);
const categoryColor = template.category === 'database' ? '#9c7ef0' : template.category === 'frontend' ? '#6c8ef0' : template.category === 'web' ? '#e8316a' : '#9295a4';
const categoryColor = template.category === 'database' ? '#7ab8ff' : template.category === 'frontend' ? '#f2c94c' : template.category === 'web' ? 'var(--accent-primary)' : '#9295a4';
return (
<button
key={template.id}
@@ -935,8 +935,8 @@ export function TemplatesPage() {
<button
onClick={() => deployMutation.mutate()}
disabled={isDeployDisabled}
className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{deployMutation.isPending ? (
<>
app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
+3 -3
View File
@@ -107,7 +107,7 @@ function toFlowEdges(links: ReturnType<typeof inferAutoConnections>): CanvasEdge
height: 14,
},
style: {
stroke: '#e8316a',
stroke: 'var(--accent-primary)',
strokeWidth: 2,
},
className: 'edge-premium',
@@ -362,8 +362,8 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
<button
type="button"
onClick={onAddService}
className="flex items-center gap-2 h-9 px-4 rounded-lg text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-200"
style={{ background: 'var(--accent-primary)' }}
>
<Plus size={15} />
Add Service
app/frontend/src/features/workspace/canvas/nodes.tsx
+4 -4
View File
@@ -33,11 +33,11 @@ function serviceTypeIcon(type: string): typeof Box {
function serviceTypeColor(type: string): string {
switch (type) {
case 'web':
return '#6c8ef0'; // Blue
return '#7ab8ff'; // Blue
case 'database':
return '#9c7ef0'; // Purple
return '#b4e34a'; // Purple
case 'worker':
return '#e8316a'; // Pink
return 'var(--accent-primary)'; // Pink
default:
return '#9295a4'; // Gray
}
@@ -124,7 +124,7 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
onClick={() => onOpen(service.id)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold transition-all duration-200 ${
selected
? 'bg-[var(--accent-primary)] text-white shadow-lg shadow-[var(--accent-primary-glow)]'
? 'bg-[var(--accent-primary)] text-[var(--accent-on)] shadow-lg shadow-[var(--accent-primary-glow)]'
: 'border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)]'
}`}
>
app/frontend/src/features/workspace/components/MetricsDashboard.tsx
+9 -9
View File
@@ -131,13 +131,13 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentCpu}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: currentCpu < 50 ? '#3dd68c' : currentCpu < 75 ? '#f0a040' : '#ff7043', fontWeight: 700 }}>
<span style={{ color: currentCpu < 50 ? '#5ee6a0' : currentCpu < 75 ? '#f2c94c' : '#b4e34a', fontWeight: 700 }}>
{currentCpu < 50 ? 'Good' : currentCpu < 75 ? 'Average' : 'High'}
</span>{' '}
Daily usage
</div>
<div style={{ height: 76, margin: '12px 0 6px' }}>
<LineMetricChart data={data.cpu} color="#ff7043" height={76} />
<LineMetricChart data={data.cpu} color="#b4e34a" height={76} />
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '4px' }}>
<span style={{ fontSize: '13px', color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}>Details</span>
@@ -155,13 +155,13 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.ram}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: data.ram < 60 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
<span style={{ color: data.ram < 60 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
{data.ram < 60 ? 'Good' : 'Average'}
</span>{' '}
Daily usage
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
<DonutChart percent={data.ram} color="#9c7ef0" size={160} thickness={16} />
<DonutChart percent={data.ram} color="#f2c94c" size={160} thickness={16} />
<div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
<div style={{ fontSize: '10.5px', color: '#6b6e7d', marginBottom: 1 }}>Used</div>
<div style={{ fontSize: '12.5px', fontWeight: 700, color: '#e8e9f0' }}>{data.ramUsed} / 8GB</div>
@@ -183,7 +183,7 @@ export function MetricsDashboard({
</div>
<div style={{ fontSize: '38px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{data.cache} MB</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>220MB Average</span>{' '}
<span style={{ color: '#f2c94c', fontWeight: 700 }}>220MB Average</span>{' '}
cached images and files
</div>
@@ -257,7 +257,7 @@ export function MetricsDashboard({
</div>
</div>
<div style={{ width: '50%', padding: '16px 14px 46px 0', display: 'flex', alignItems: 'flex-end' }}>
<LineMetricChart data={data.users} color="#e8316a" fillOpacity={0.15} showArea height={130} />
<LineMetricChart data={data.users} color="var(--accent-primary)" fillOpacity={0.15} showArea height={130} />
</div>
</div>
@@ -271,7 +271,7 @@ export function MetricsDashboard({
<div style={{ flex: 1 }}>
<div style={{ fontSize: '36px', fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>{currentPerf}%</div>
<div style={{ fontSize: '12px', color: '#6b6e7d', marginTop: '4px' }}>
<span style={{ color: currentPerf > 85 ? '#3dd68c' : '#f0a040', fontWeight: 700 }}>
<span style={{ color: currentPerf > 85 ? '#5ee6a0' : '#f2c94c', fontWeight: 700 }}>
{currentPerf > 85 ? 'Good' : 'Average'}
</span>{' '}
Last scan
@@ -282,11 +282,11 @@ export function MetricsDashboard({
<DualLineChart data1={data.performance} data2={data.performanceAlt} height={58} />
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'flex-end' }}>
<div className="speed-row" style={{ color: '#6c8ef0' }}>
<div className="speed-row" style={{ color: '#7ab8ff' }}>
<svg viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 19 19 12"/></svg>
<span>{data.upSpeed}</span> Mbps
</div>
<div className="speed-row" style={{ color: '#e8316a' }}>
<div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 5 5 12"/></svg>
<span>{data.downSpeed}</span> Mbps
</div>
app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
+8 -8
View File
@@ -367,8 +367,8 @@ function ServiceCreateDialog(props: {
build_path: source === 'git' ? form.build_path?.trim() : '',
})
}
className="px-5 py-2 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: '#e8316a' }}
className="px-5 py-2 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
style={{ background: 'var(--accent-primary)' }}
>
{props.loading ? 'Creating...' : 'Create Service'}
</button>
@@ -526,7 +526,7 @@ export function ProjectWorkspacePage() {
<div className="min-h-screen">
{/* Header */}
<div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-4">
<button
@@ -538,7 +538,7 @@ export function ProjectWorkspacePage() {
</button>
<div className="w-px h-5 bg-[var(--border-subtle)]" />
<div>
<h1 className="text-xl font-semibold text-[var(--text-primary)]">{project.name}</h1>
<h1 className="v-title">{project.name}<span className="v-cursor">_</span></h1>
<p className="text-sm text-[var(--text-secondary)]">{project.description || 'No description'}</p>
</div>
</div>
@@ -577,8 +577,8 @@ export function ProjectWorkspacePage() {
{!isDemoMode && (
<button
onClick={() => setCreateOpen(true)}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all"
style={{ background: '#e8316a' }}
className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all"
style={{ background: 'var(--accent-primary)' }}
>
<Plus size={16} />
<span className="hidden sm:inline">Add Service</span>
@@ -591,7 +591,7 @@ export function ProjectWorkspacePage() {
{/* Demo Mode Banner */}
{isDemoMode && (
<div className="mx-auto w-full max-w-[1400px] px-6 py-4">
<div className="w-full px-8 py-4">
<div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
<div className="flex items-center gap-2 text-sm text-[var(--warning)]">
<Sparkles size={16} />
@@ -602,7 +602,7 @@ export function ProjectWorkspacePage() {
)}
{/* Main Content */}
<div className="mx-auto w-full max-w-[1400px] px-6 py-6">
<div className="w-full px-8 py-6">
<div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-6">
{/* Sidebar Navigation */}
<aside className="lg:sticky lg:top-6 lg:h-fit">
app/frontend/src/index.css
+259 -73
View File
@@ -2,56 +2,55 @@
/* Inter font - exact match from self.html */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root {
/* Exact colors from self.html */
--bg-void: #16171c;
--bg-base: #111217;
--bg-surface: #0f1017;
--bg-elevated: #1c1d24;
--bg-overlay: #1a1b26;
/* Vertice palette — near-black gray, lime accent */
--bg-void: #0c0d0f;
--bg-base: #0e0f12;
--bg-surface: #101214;
--bg-elevated: #131518;
--bg-overlay: #16181d;
/* Surface cards - matching self.html card */
--surface-card: #1c1d24;
--surface-card-hover: #22233a;
--surface-card: #131518;
--surface-card-hover: #1a1d22;
--surface-muted: rgba(255, 255, 255, 0.05);
--surface-glass: rgba(20, 22, 32, 0.6);
--surface-base: #1c1d24;
--surface-glass: rgba(16, 18, 21, 0.7);
--surface-base: #131518;
/* Text hierarchy - matching self.html */
--text-primary: #e8e9f0;
--text-secondary: #9295a4;
--text-tertiary: #6b6e7d;
--text-muted: #6b6e7d;
--text-primary: #ecedf0;
--text-secondary: #8b919e;
--text-tertiary: #575d68;
--text-muted: #575d68;
/* Accent colors - exact from self.html */
--accent-primary: #e8316a;
--accent-primary-soft: rgba(232, 49, 106, 0.15);
--accent-primary-glow: rgba(232, 49, 106, 0.4);
--accent-secondary: #9c7ef0;
--accent-tertiary: #6c8ef0;
/* Lime accent + subtle yellow secondary */
--accent-primary: #b4e34a;
--accent-primary-soft: rgba(180, 227, 74, 0.1);
--accent-primary-glow: rgba(180, 227, 74, 0.35);
--accent-on: #131507;
--accent-secondary: #f2c94c;
--accent-tertiary: #7ab8ff;
/* Status colors - exact from self.html */
--success: #3dd68c;
--success-soft: rgba(61, 214, 140, 0.15);
--success-glow: rgba(61, 214, 140, 0.3);
--success: #5ee6a0;
--success-soft: rgba(94, 230, 160, 0.1);
--success-glow: rgba(94, 230, 160, 0.3);
--warning: #ff7043;
--warning-soft: rgba(255, 112, 67, 0.15);
--warning-glow: rgba(255, 112, 67, 0.3);
--warning: #f2c94c;
--warning-soft: rgba(242, 201, 76, 0.1);
--warning-glow: rgba(242, 201, 76, 0.3);
--error: #ff6b5b;
--error-soft: rgba(255, 107, 91, 0.15);
--error-glow: rgba(255, 107, 91, 0.3);
--error: #ff6f5c;
--error-soft: rgba(255, 111, 92, 0.1);
--error-glow: rgba(255, 111, 92, 0.3);
--info: #6c8ef0;
--info-soft: rgba(108, 142, 240, 0.15);
--info: #7ab8ff;
--info-soft: rgba(122, 184, 255, 0.12);
/* Border system - matching self.html */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-default: rgba(255, 255, 255, 0.14);
--border-strong: rgba(232, 49, 106, 0.4);
--border-glow: rgba(232, 49, 106, 0.6);
/* Border system */
--border-subtle: rgba(255, 255, 255, 0.065);
--border-default: rgba(255, 255, 255, 0.13);
--border-strong: rgba(180, 227, 74, 0.35);
--border-glow: rgba(180, 227, 74, 0.55);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -105,10 +104,11 @@
--text-tertiary: #7b8498;
--text-muted: #7b8498;
--accent-primary: #d92d64;
--accent-primary-soft: rgba(217, 45, 100, 0.12);
--accent-primary-glow: rgba(217, 45, 100, 0.22);
--accent-secondary: #7357d8;
--accent-primary: #7ba91e;
--accent-primary-soft: rgba(123, 169, 30, 0.14);
--accent-primary-glow: rgba(123, 169, 30, 0.28);
--accent-on: #ffffff;
--accent-secondary: #b8860b;
--accent-tertiary: #2f67d8;
--success: #168a55;
@@ -128,8 +128,8 @@
--border-subtle: rgba(21, 24, 33, 0.1);
--border-default: rgba(21, 24, 33, 0.16);
--border-strong: rgba(217, 45, 100, 0.35);
--border-glow: rgba(217, 45, 100, 0.45);
--border-strong: rgba(123, 169, 30, 0.4);
--border-glow: rgba(123, 169, 30, 0.5);
--shadow-sm: 0 1px 2px rgba(17, 18, 23, 0.08);
--shadow-md: 0 4px 12px rgba(17, 18, 23, 0.1);
@@ -199,10 +199,10 @@ body {
content: '';
position: fixed;
top: -20%;
left: -10%;
width: 50%;
height: 50%;
background: radial-gradient(ellipse at center, rgba(232, 49, 106, 0.08) 0%, transparent 70%);
right: -5%;
width: 45%;
height: 45%;
background: radial-gradient(ellipse at center, rgba(180, 227, 74, 0.05) 0%, transparent 70%);
filter: blur(60px);
}
@@ -210,10 +210,10 @@ body {
content: '';
position: fixed;
bottom: -30%;
right: -10%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse at center, rgba(156, 126, 240, 0.06) 0%, transparent 70%);
left: -10%;
width: 55%;
height: 55%;
background: radial-gradient(ellipse at center, rgba(242, 201, 76, 0.03) 0%, transparent 70%);
filter: blur(80px);
}
@@ -292,9 +292,9 @@ textarea {
/* Card - self.html exact match */
.card {
background: #1c1d24;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 20px;
display: flex;
flex-direction: column;
@@ -314,9 +314,9 @@ textarea {
/* Panel - alias for card for backwards compatibility */
.panel {
background: #1c1d24;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 20px;
transition: border-color 0.2s, box-shadow 0.2s;
}
@@ -645,14 +645,14 @@ textarea {
/* Distinctive headline styles */
.headline-display {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
}
.headline-section {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
@@ -702,9 +702,9 @@ textarea {
/* Gradient mesh background */
.gradient-mesh {
background:
radial-gradient(ellipse at 20% 30%, rgba(232, 49, 106, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(156, 126, 240, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(108, 142, 240, 0.04) 0%, transparent 50%);
radial-gradient(ellipse at 20% 30%, rgba(180, 227, 74, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(122, 184, 255, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(242, 201, 76, 0.03) 0%, transparent 50%);
}
/* Spotlight effect on hover */
@@ -739,9 +739,9 @@ textarea {
============================================ */
/* Service type color coding */
.service-web { --service-color: #6c8ef0; }
.service-database { --service-color: #9c7ef0; }
.service-worker { --service-color: #e8316a; }
.service-web { --service-color: #7ab8ff; }
.service-database { --service-color: #f2c94c; }
.service-worker { --service-color: var(--accent-primary); }
/* Status bar animation */
@keyframes status-pulse {
@@ -909,7 +909,7 @@ textarea {
.tab.active {
color: #e8e9f0;
border-bottom-color: #e8316a;
border-bottom-color: var(--accent-primary);
}
.tab svg {
@@ -972,7 +972,7 @@ textarea {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
color: #3dd68c;
color: #5ee6a0;
text-transform: uppercase;
display: inline-flex;
align-items: center;
@@ -1018,7 +1018,7 @@ textarea {
width: 30px;
height: 30px;
border-radius: 9px;
background: #e8316a;
background: var(--accent-primary);
display: flex;
align-items: center;
justify-content: center;
@@ -1034,7 +1034,7 @@ textarea {
.arrow-btn svg {
width: 13px;
height: 13px;
stroke: white;
stroke: var(--accent-on);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
@@ -1133,7 +1133,7 @@ textarea {
border-radius: 11px;
border: none;
background: var(--accent-primary);
color: white;
color: var(--accent-on);
font-size: 13.5px;
font-weight: 700;
font-family: inherit;
@@ -1145,7 +1145,7 @@ textarea {
}
.btn-restart:hover {
background: #d12960;
background: #cdf06f;
}
.btn-restart.disabled {
@@ -1379,3 +1379,189 @@ textarea {
animation: counter-flip 0.3s ease-out;
transform-origin: bottom;
}
/* ============================================
VERTICE SYSTEM — lime-on-graphite primitives
============================================ */
.v-mono {
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
font-variant-numeric: tabular-nums;
}
/* Section header: `// LABEL` */
.v-sect {
display: flex;
align-items: center;
font: 600 10px 'JetBrains Mono', monospace;
letter-spacing: 0.22em;
color: var(--text-tertiary);
margin-bottom: 13px;
}
.v-sect::before {
content: '//';
color: var(--accent-primary);
font-weight: 700;
margin-right: 8px;
}
.v-sect .v-sect-r {
margin-left: auto;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 500;
text-transform: none;
}
/* Page heading with lime cursor */
.v-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text-primary);
}
.v-title .v-cursor { color: var(--accent-primary); font-weight: 400; }
/* Pulsing live dot (lime) */
.v-live {
width: 5.5px;
height: 5.5px;
border-radius: 50%;
background: var(--accent-primary);
box-shadow: 0 0 7px rgba(180, 227, 74, 0.8);
animation: v-pulse 2.4s infinite;
flex-shrink: 0;
}
@keyframes v-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Stat card: mono label + big tabular value + meter/spark */
.v-stat {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 13px;
padding: 14px 17px 12px;
transition: border-color 0.15s;
}
.v-stat:hover { border-color: rgba(180, 227, 74, 0.2); }
.v-stat .v-k {
display: flex; align-items: center; justify-content: space-between;
font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em;
color: var(--text-tertiary);
}
.v-stat .v-v {
font: 500 28px/1.1 'JetBrains Mono', monospace;
letter-spacing: -1.2px; margin-top: 8px;
font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.v-stat .v-v span { font-size: 13px; color: var(--text-tertiary); }
.v-stat .v-d { font: 10.5px 'JetBrains Mono', monospace; color: var(--text-tertiary); margin-top: 2px; }
.v-stat .v-d b { font-weight: 600; }
/* Thin meter */
.v-meter {
height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px;
margin: 12px 0 7px; overflow: hidden;
}
.v-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent-primary); }
.v-meter i.y { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.v-meter i.r { background: linear-gradient(90deg, var(--accent-secondary), var(--error)); }
/* Bar sparkline */
.v-spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin: 10px 0 6px; }
.v-spark i {
flex: 1; border-radius: 1.5px;
background: linear-gradient(180deg, var(--accent-primary), rgba(180,227,74,0.1));
opacity: 0.7;
}
/* Project mini-canvas (dot grid + service tiles) */
.v-mini {
position: relative; height: 104px; border-radius: 10px; overflow: hidden;
background: #0e1013; border: 1px solid rgba(255,255,255,0.04);
background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.5px);
background-size: 14px 14px;
}
.v-mini .v-node {
position: absolute; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
background: var(--surface-card-hover); border: 1px solid rgba(255,255,255,0.09);
display: flex; align-items: center; justify-content: center; gap: 5px;
font: 700 9px 'JetBrains Mono', monospace; color: var(--text-secondary);
}
.v-mini .v-node .v-nd {
position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
border-radius: 50%; background: var(--success); border: 2px solid #0e1013;
}
.v-mini .v-node .v-nd.r { background: var(--error); }
.v-mini .v-node .v-nd.y { background: var(--accent-secondary); }
.v-mini .v-node .v-nd.off { background: var(--text-tertiary); }
.v-mini .v-more {
position: absolute; width: 32px; height: 32px; border-radius: 9px;
border: 1px dashed rgba(255,255,255,0.16);
display: flex; align-items: center; justify-content: center;
font: 600 9px 'JetBrains Mono', monospace; color: var(--text-tertiary);
}
.v-mini .v-edge { position: absolute; height: 1px; background: rgba(255,255,255,0.12); }
/* Lime primary button */
.v-btn {
background: var(--accent-primary); color: var(--accent-on);
border: none; border-radius: 8px; padding: 9px 17px;
font: 700 12px 'JetBrains Mono', monospace; cursor: pointer;
transition: background 0.15s, transform 0.15s;
box-shadow: 0 2px 12px rgba(180, 227, 74, 0.22);
}
.v-btn:hover { background: var(--accent-primary); filter: brightness(1.1); transform: translateY(-1px); }
.v-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Ghost button */
.v-btn-ghost {
background: var(--surface-card); color: var(--text-secondary);
border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 16px;
font: 600 12px 'JetBrains Mono', monospace; cursor: pointer; transition: 0.15s;
}
.v-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-default); }
/* Env pill */
.v-env {
font: 10px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
color: var(--accent-primary); display: inline-flex; align-items: center; gap: 8px;
}
.v-env::before { content: ''; width: 5px; height: 5px; background: var(--accent-primary); }
/* Table — mono body, quiet rows */
.v-tbl {
background: var(--surface-card); border: 1px solid var(--border-subtle);
border-radius: 14px; overflow: hidden;
}
.v-tbl table { width: 100%; border-collapse: collapse; }
.v-tbl th {
text-align: left; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: 0.2em;
color: var(--text-tertiary); padding: 11px 18px; border-bottom: 1px solid var(--border-subtle);
}
.v-tbl td {
padding: 11.5px 18px; border-bottom: 1px solid rgba(255,255,255,0.035);
font: 11.5px 'JetBrains Mono', monospace; color: var(--text-secondary);
}
.v-tbl tbody tr:last-child td { border-bottom: none; }
.v-tbl tbody tr { transition: background 0.12s; }
.v-tbl tbody tr:hover td { background: rgba(180,227,74,0.025); }
.v-tbl td.v-lead { color: var(--text-primary); font: 600 12.5px 'Inter', sans-serif; }
/* Status pill */
.v-st {
font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
padding: 3px 9px; border-radius: 5px; display: inline-block;
}
.v-st-ok { background: var(--success-soft); color: var(--success); }
.v-st-run { background: var(--info-soft); color: var(--info); }
.v-st-warn { background: var(--warning-soft); color: var(--warning); }
.v-st-fail { background: var(--error-soft); color: var(--error); }
.v-st-off { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
/* Ticker segments */
.v-tick { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); }
.v-tick b { color: var(--text-secondary); font-weight: 500; }
.v-tick .sig { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.v-tick .sig.y { background: var(--accent-secondary); }
.v-tick .sig.r { background: var(--error); }
/* Rail active indicator handled via .nav-item.active::before */
app/frontend/src/shared/components/Button.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
};
const variantStyles: Record<ButtonVariant, string> = {
primary: 'text-white shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
primary: 'text-[var(--accent-on)] shadow-lg hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]',
secondary: 'border border-[var(--border-subtle)] bg-[var(--surface-card)] text-[var(--text-primary)] hover:border-[var(--border-default)] hover:bg-[var(--surface-card-hover)] active:scale-[0.98]',
ghost: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)] active:scale-[0.98]',
danger: 'border border-[var(--error-soft)] text-[var(--error)] hover:bg-[var(--error-soft)] hover:shadow-lg hover:shadow-[var(--error-glow)] active:scale-[0.98]',
@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
${sizeStyles[size]}
${className}
`}
style={variant === 'primary' ? { background: '#e8316a' } : undefined}
style={variant === 'primary' ? { background: 'var(--accent-primary)' } : undefined}
{...props}
>
{loading ? (
app/frontend/src/shared/components/Charts.tsx
+6 -6
View File
@@ -68,7 +68,7 @@ function gradientId(prefix: string, color: string, index = 0) {
export function LineChart({
data,
color = '#ff7043',
color = '#b4e34a',
fillColor = 'transparent',
height = 76,
showDots = true,
@@ -96,7 +96,7 @@ export function LineChart({
export function LineAreaChart({
data,
color = '#e8316a',
color = 'var(--accent-primary)',
fillOpacity = 0.15,
height = 130,
}: LineAreaChartProps) {
@@ -181,7 +181,7 @@ export function MultiLineChart({
export function LineMetricChart({
data,
color = '#ff7043',
color = '#b4e34a',
fillOpacity = 0.15,
height = 76,
showArea = false,
@@ -204,8 +204,8 @@ export function DualLineChart({
data1,
data2,
height = 58,
color1 = '#6c8ef0',
color2 = '#9c7ef0',
color1 = '#7ab8ff',
color2 = '#f2c94c',
fillOpacity1 = 0.15,
fillOpacity2 = 0.15,
}: DualLineChartProps) {
@@ -222,7 +222,7 @@ export function DualLineChart({
export function BarChart({
data,
color = '#3dd68c',
color = '#5ee6a0',
height = 128,
gap = 4,
}: BarChartProps) {
app/frontend/src/shared/components/DonutChart.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function DonutChart({
percentage,
size = 160,
thickness = 16,
color = '#9c7ef0',
color = '#b4e34a',
trackColor = 'rgba(255, 255, 255, 0.07)',
segments = 28,
gap = 0.048,
app/frontend/src/shared/components/EnhancedMetricCard.tsx
+7 -7
View File
@@ -30,9 +30,9 @@ export function EnhancedMetricCard({
horizontal = false,
}: EnhancedMetricCardProps) {
const statusColors: Record<string, string> = {
good: '#3dd68c',
average: '#f0a040',
warning: '#ff7043',
good: '#5ee6a0',
average: '#f2c94c',
warning: '#f2c94c',
};
// Horizontal layout for cards like Active User
@@ -216,7 +216,7 @@ export function CacheMetricCard({
</div>
<div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
<span style={{ color: '#f0a040', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
<span style={{ color: '#f2c94c', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
</div>
{/* Segmented Bar */}
@@ -319,7 +319,7 @@ export function PerformanceMetricCard({
animationDelay = 0,
}: PerformanceMetricCardProps) {
const status = percentage >= 85 ? 'Good' : percentage >= 70 ? 'Average' : 'Warning';
const statusColor = percentage >= 85 ? '#3dd68c' : percentage >= 70 ? '#f0a040' : '#ff7043';
const statusColor = percentage >= 85 ? '#5ee6a0' : percentage >= 70 ? '#f2c94c' : '#ff6f5c';
return (
<div
@@ -363,14 +363,14 @@ export function PerformanceMetricCard({
<div style={{ width: 134, height: 58, background: 'rgba(255,255,255,0.03)', borderRadius: 8 }} />
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
<div className="speed-row" style={{ color: '#6c8ef0' }}>
<div className="speed-row" style={{ color: '#7ab8ff' }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="12" y1="19" x2="12" y2="5"/>
<polyline points="5 12 12 19 19 12"/>
</svg>
<span>{upSpeed}</span> Mbps
</div>
<div className="speed-row" style={{ color: '#e8316a' }}>
<div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="12" y1="5" x2="12" y2="19"/>
<polyline points="19 12 12 5 5 12"/>
app/frontend/src/shared/components/MetricCard.tsx
+3 -3
View File
@@ -50,9 +50,9 @@ export function MetricCard({
}, [animationDelay]);
const statusColors: Record<string, string> = {
good: '#3dd68c',
average: '#f0a040',
warning: '#ff7043',
good: '#5ee6a0',
average: '#f2c94c',
warning: '#f2c94c',
};
// Horizontal layout for cards like Active User
containr.svg
+3 -3
View File
@@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f4497f"/>
<stop offset="1" stop-color="#cf1d5b"/>
<stop offset="0" stop-color="#cdf06f"/>
<stop offset="1" stop-color="#7fb524"/>
</linearGradient>
</defs>
<rect width="64" height="64" rx="15" fill="url(#bg)"/>
<g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
<g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="15" y="18" width="34" height="26" rx="4"/>
<path d="M23 18v26M31 18v26M39 18v26"/>
<path d="M20 51h24"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 582 B

docs/design/explorations/01-midnight-ops.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>01 — Midnight Ops</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0d0e12; color:#e8e9f0; display:flex; min-height:100vh; }
.rail { width:64px; border-right:1px solid rgba(255,255,255,.06); background:#101116; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:22px; }
.rail .mark { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; }
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#5c5f6e; }
.rail .ic.on { background:rgba(232,49,106,.14); color:#e8316a; }
main { flex:1; }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.search { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:280px; }
.btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:none; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:600; }
.crumb { padding:14px 24px 10px; font-size:13px; color:#6b6e7d; }
.crumb b { color:#9295a4; font-weight:500; }
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
.avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
.svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(61,214,140,.12); color:#3dd68c; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.05em; }
.badge i { width:5px; height:5px; border-radius:50%; background:#3dd68c; }
.sub { font-size:12.5px; color:#6b6e7d; margin-top:4px; }
.acts { margin-left:auto; display:flex; gap:10px; }
.btn-stop { background:#f5f6f8; color:#0d0e12; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; letter-spacing:.02em; }
.btn-restart { background:#e8316a; color:#fff; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; }
.tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; }
.tab { padding:11px 2px; color:#6b6e7d; }
.tab.on { color:#e8e9f0; font-weight:600; border-bottom:2px solid #e8316a; }
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; display:flex; flex-direction:column; }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:600; }
.cicon { width:34px; height:34px; border-radius:9px; background:#1e1f27; border:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:#9295a4; font-size:15px; }
.big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
.meta { font-size:12px; color:#6b6e7d; margin-top:5px; }
.meta b { font-weight:700; } .g{color:#3dd68c}.a{color:#f0a040}
.segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
.segbar div { border-radius:6px; }
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.foot span { font-size:13px; color:#6b6e7d; font-weight:500; }
.arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#6b6e7d; }
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.wide { grid-column:span 1; }
.bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
.bars div { flex:1; background:linear-gradient(180deg,#e8316a,#e8316a33); border-radius:4px 4px 0 0; }
.speed { font-size:12px; color:#6b6e7d; display:flex; gap:6px; align-items:center; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
<div class="svc">
<div class="avatar">⏸</div>
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
</div>
<div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
<div class="grid">
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> Daily usage</div>
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)" opacity=".6"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5c" stop-opacity=".25"/><stop offset="1" stop-color="#ff8a5c" stop-opacity="0"/></linearGradient></defs></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> Daily usage</div>
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.07)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#6b6e7d" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e8e9f0" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff8a5c">220MB Average</b> cached images and files</div>
<div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:rgba(255,255,255,.07)"></div></div>
<div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b style="color:#e8e9f0">212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b style="color:#e8e9f0">85 MB</b> 4%</span><span><i style="background:#444"></i>Total <b style="color:#e8e9f0">1.75 GB</b></span></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> Last scan today</div>
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
</div>
</main></body></html>
docs/design/explorations/02-terminal.html
+72
View File
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>02 — Terminal</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'JetBrains Mono','SF Mono',monospace; background:#0a0a0a; color:#d4d4d4; display:flex; min-height:100vh; font-size:13px; }
.rail { width:56px; border-right:1px solid #1f1f1f; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
.rail .mark { width:32px; height:32px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
.rail .ic { color:#404040; font-size:14px; } .rail .ic.on { color:#4ade80; }
main { flex:1; }
.topbar { display:flex; align-items:center; gap:14px; padding:10px 24px; border-bottom:1px solid #1f1f1f; }
.search { border:1px solid #262626; padding:6px 12px; color:#525252; width:300px; font-size:12px; }
.search::before { content:'$ '; color:#4ade80; }
.btn-upgrade { margin-left:auto; background:#4ade80; color:#0a0a0a; border:none; padding:7px 16px; font-family:inherit; font-size:12px; font-weight:700; }
.crumb { padding:12px 24px 8px; font-size:12px; color:#525252; }
.crumb b { color:#a3a3a3; font-weight:400; }
.svc { display:flex; align-items:center; padding:0 24px 16px; gap:14px; }
.avatar { width:42px; height:42px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
.svc h1 { font-size:17px; font-weight:700; }
.badge { color:#4ade80; font-size:11px; border:1px solid #4ade8033; padding:2px 8px; }
.badge::before { content:'● '; }
.sub { font-size:11px; color:#525252; margin-top:4px; }
.acts { margin-left:auto; display:flex; gap:8px; }
.btn-stop { background:transparent; color:#d4d4d4; border:1px solid #404040; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
.btn-restart { background:#4ade80; color:#0a0a0a; border:none; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
.tabs { display:flex; gap:22px; padding:0 24px; border-bottom:1px solid #1f1f1f; font-size:12px; }
.tab { padding:10px 2px; color:#525252; }
.tab.on { color:#4ade80; border-bottom:1px solid #4ade80; }
.grid { padding:18px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid #1f1f1f; padding:18px; display:flex; flex-direction:column; background:#0e0e0e; }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:#a3a3a3; }
.card .hd::before { content:'▣'; color:#4ade80; font-size:11px; }
.big { font-size:30px; font-weight:700; color:#e5e5e5; }
.meta { font-size:11px; color:#525252; margin-top:4px; }
.g{color:#4ade80}.a{color:#fbbf24}
.segbar { display:flex; gap:3px; height:26px; margin-top:14px; }
.legend { display:flex; gap:20px; margin-top:12px; font-size:11px; color:#525252; }
.legend b { color:#d4d4d4; font-weight:400; }
.foot { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#525252; }
.foot .arrow { color:#4ade80; }
.bars { display:flex; align-items:flex-end; gap:4px; height:70px; margin-top:10px; }
.bars div { flex:1; background:#4ade80; opacity:.85; }
.speed { font-size:11px; color:#525252; display:flex; gap:6px; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic">~</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar"><div class="search">search projects, builds, logs_</div><button class="btn-upgrade">upgrade --pro</button></div>
<div class="crumb">~/servers/<b>api-gateway</b></div>
<div class="svc">
<div class="avatar">AG</div>
<div><h1>api-gateway <span class="badge">ACTIVE</span></h1><div class="sub">→ https://api.containr.dev &nbsp;·&nbsp; ./project-info</div></div>
<div class="acts"><button class="btn-stop">[ stop ]</button><button class="btn-restart">[ restart ]</button></div>
</div>
<div class="tabs"><div class="tab on">metrics</div><div class="tab">requests</div><div class="tab">apis</div><div class="tab">config</div></div>
<div class="grid">
<div class="card"><div class="hd">cpu_usage</div><div class="big">12%</div><div class="meta"><span class="g">[OK]</span> daily usage</div>
<svg viewBox="0 0 200 55" style="margin-top:12px;width:100%"><path d="M0 42 L18 40 L36 44 L54 38 L72 41 L90 33 L108 37 L126 28 L144 32 L162 20 L180 24 L200 12" fill="none" stroke="#4ade80" stroke-width="1.5"/></svg>
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
<div class="card"><div class="hd">ram_usage</div><div class="big">65%</div><div class="meta"><span class="a">[WARN]</span> daily usage</div>
<svg viewBox="0 0 160 80" style="margin:8px auto 0;display:block"><path d="M14 72 A 62 62 0 0 1 146 72" fill="none" stroke="#262626" stroke-width="10"/><path d="M14 72 A 62 62 0 0 1 115 32" fill="none" stroke="#fbbf24" stroke-width="10" stroke-dasharray="4 3"/><text x="80" y="58" text-anchor="middle" fill="#525252" font-size="8">USED</text><text x="80" y="72" text-anchor="middle" fill="#d4d4d4" font-size="11" font-weight="700">5.4G/8G</text></svg>
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
<div class="card"><div class="hd">cache</div><div class="big">352M</div><div class="meta"><span class="a">220M avg</span> cached images/files</div>
<div class="segbar"><div style="width:48%;background:#4ade80"></div><div style="width:20%;background:#fbbf24"></div><div style="width:32%;background:#1f1f1f"></div></div>
<div class="legend"><span>cache <b>212M</b></span><span>other <b>85M</b></span><span>total <b>1.75G</b></span></div>
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
<div class="card" style="grid-column:span 2"><div class="hd">active_users</div><div class="big">475,231</div><div class="meta">users online right now</div>
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
<div class="card"><div class="hd">performance</div><div class="big">89%</div><div class="meta"><span class="g">[OK]</span> last scan today</div>
<div style="display:flex;flex-direction:column;gap:6px;margin-top:12px"><div class="speed">↓ 10.4 Mbps</div><div class="speed">↑ 5.2 Mbps</div></div>
<div class="foot"><span>[ check speed ]</span><span class="arrow">→</span></div></div>
</div>
</main></body></html>
docs/design/explorations/03-aurora-glass.html
+81
View File
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>03 — Aurora Glass</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; color:#eef0ff; display:flex; min-height:100vh;
background:radial-gradient(1200px 800px at 15% -10%, #3b2a6e 0%, transparent 55%),
radial-gradient(1000px 700px at 90% 10%, #6e1f4a 0%, transparent 55%),
radial-gradient(900px 900px at 50% 110%, #1f3a5e 0%, transparent 55%), #0b0d18; }
.rail { width:68px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
.rail .mark { width:40px; height:40px; border-radius:14px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(255,92,138,.4); }
.rail .ic { width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:rgba(238,240,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.07); }
.rail .ic.on { background:linear-gradient(135deg,rgba(255,92,138,.25),rgba(160,108,255,.25)); color:#fff; border-color:rgba(255,140,180,.3); }
main { flex:1; padding:0 8px; }
.topbar { display:flex; align-items:center; gap:14px; padding:16px 24px 4px; }
.search { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:9px 16px; color:rgba(238,240,255,.5); font-size:13px; width:280px; backdrop-filter:blur(12px); }
.btn-upgrade { margin-left:auto; background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:9px 20px; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(200,80,160,.35); }
.crumb { padding:14px 24px 8px; font-size:13px; color:rgba(238,240,255,.45); }
.crumb b { color:rgba(238,240,255,.8); font-weight:500; }
.svc { display:flex; align-items:center; padding:0 24px 20px; gap:14px; }
.avatar { width:50px; height:50px; border-radius:16px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; box-shadow:0 6px 24px rgba(255,92,138,.35); }
.svc h1 { font-size:21px; font-weight:700; letter-spacing:-.4px; }
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(80,227,194,.14); color:#50e3c2; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge i { width:5px; height:5px; border-radius:50%; background:#50e3c2; box-shadow:0 0 8px #50e3c2; }
.sub { font-size:12.5px; color:rgba(238,240,255,.45); margin-top:4px; }
.acts { margin-left:auto; display:flex; gap:10px; }
.btn-stop { background:rgba(255,255,255,.09); color:#eef0ff; border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:10px 20px; font-weight:600; font-size:13px; backdrop-filter:blur(10px); }
.btn-restart { background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:10px 20px; font-weight:700; font-size:13px; box-shadow:0 4px 20px rgba(200,80,160,.35); }
.tabs { display:flex; gap:8px; padding:0 24px 18px; font-size:13px; }
.tab { padding:8px 16px; color:rgba(238,240,255,.5); border-radius:11px; }
.tab.on { color:#fff; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.grid { padding:0 24px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:20px; display:flex; flex-direction:column; backdrop-filter:blur(18px); box-shadow:0 8px 32px rgba(0,0,0,.25); }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13.5px; font-weight:600; }
.cicon { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center; font-size:14px; }
.big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
.meta { font-size:12px; color:rgba(238,240,255,.45); margin-top:5px; }
.meta b { font-weight:600; } .g{color:#50e3c2}.a{color:#fbbf24}
.segbar { display:flex; gap:5px; height:32px; margin-top:14px; }
.segbar div { border-radius:9px; }
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.foot span { font-size:13px; color:rgba(238,240,255,.5); font-weight:500; }
.arrow { width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; box-shadow:0 3px 14px rgba(200,80,160,.4); }
.legend { display:flex; gap:24px; margin-top:12px; font-size:12px; color:rgba(238,240,255,.5); }
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.legend b { color:#eef0ff; font-weight:600; }
.bars { display:flex; align-items:flex-end; gap:6px; height:76px; margin-top:10px; }
.bars div { flex:1; background:linear-gradient(180deg,#ff5c8a,#a06cff88); border-radius:5px 5px 0 0; }
.speed { font-size:12px; color:rgba(238,240,255,.5); display:flex; gap:6px; align-items:center; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
<div class="svc">
<div class="avatar">⏸</div>
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
</div>
<div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
<div class="grid">
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff9a6c" stroke-width="2.5" stroke-linecap="round"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9a6c" stop-opacity=".3"/><stop offset="1" stop-color="#ff9a6c" stop-opacity="0"/></linearGradient></defs></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#a06cff"/><stop offset="1" stop-color="#ff5c8a"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="rgba(238,240,255,.45)" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#eef0ff" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff9a6c">220MB Average</b> · cached images and files</div>
<div class="segbar"><div style="width:48%;background:linear-gradient(135deg,#ff9a6c,#ff5c8a)"></div><div style="width:20%;background:linear-gradient(135deg,#a06cff,#6c8ef0)"></div><div style="width:32%;background:rgba(255,255,255,.08)"></div></div>
<div class="legend"><span><i style="background:#ff9a6c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#a06cff"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:rgba(255,255,255,.25)"></i>Total <b>1.75 GB</b></span></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#ff5c8a">↑</span> 5.2 Mbps up</div></div>
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
</div>
</main></body></html>
docs/design/explorations/04-paper-ops.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>04 — Paper Ops (Light)</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#f2f0ea; color:#17171c; display:flex; min-height:100vh; }
.rail { width:64px; border-right:1.5px solid #17171c; background:#faf9f6; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
.rail .mark { width:38px; height:38px; border-radius:11px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; }
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#8a8a92; }
.rail .ic.on { background:#fff; color:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; }
main { flex:1; }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1.5px solid #17171c; background:#faf9f6; }
.search { background:#fff; border:1.5px solid #17171c; border-radius:9px; padding:7px 14px; color:#8a8a92; font-size:13px; width:280px; }
.btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:700; box-shadow:3px 3px 0 #17171c; }
.crumb { padding:14px 24px 10px; font-size:13px; color:#8a8a92; }
.crumb b { color:#17171c; font-weight:600; }
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
.avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff; }
.svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
.badge { display:inline-flex; align-items:center; gap:5px; background:#d9f5e5; color:#0d7a45; font-size:10px; font-weight:800; padding:3px 9px; border-radius:4px; border:1.5px solid #17171c; letter-spacing:.05em; }
.sub { font-size:12.5px; color:#8a8a92; margin-top:4px; }
.sub a { color:#17171c; }
.acts { margin-left:auto; display:flex; gap:10px; }
.btn-stop { background:#fff; color:#17171c; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
.btn-restart { background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
.tabs { display:flex; gap:24px; padding:0 24px; border-bottom:1.5px solid #17171c; font-size:13.5px; }
.tab { padding:11px 2px; color:#8a8a92; font-weight:600; }
.tab.on { color:#17171c; border-bottom:3px solid #e8316a; }
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1.5px solid #17171c; border-radius:14px; padding:20px; display:flex; flex-direction:column; box-shadow:4px 4px 0 rgba(23,23,28,.9); }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:700; }
.cicon { width:34px; height:34px; border-radius:9px; background:#f2f0ea; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; font-size:15px; }
.big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
.meta { font-size:12px; color:#8a8a92; margin-top:5px; }
.meta b { font-weight:800; } .g{color:#0d7a45}.a{color:#c47a00}
.segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
.segbar div { border:1.5px solid #17171c; border-radius:6px; }
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.foot span { font-size:13px; color:#8a8a92; font-weight:600; }
.arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; box-shadow:2px 2px 0 #17171c; }
.legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#8a8a92; }
.legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; border:1.5px solid #17171c; }
.legend b { color:#17171c; }
.bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
.bars div { flex:1; background:#e8316a; border:1.5px solid #17171c; border-radius:3px 3px 0 0; }
.speed { font-size:12px; color:#8a8a92; display:flex; gap:6px; align-items:center; font-weight:600; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
<div class="svc">
<div class="avatar">⏸</div>
<div><h1>api-gateway <span class="badge">● ACTIVE</span></h1><div class="sub"><a href="#">https://api.containr.dev ↗</a> &nbsp;·&nbsp; Project Information ›</div></div>
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
</div>
<div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
<div class="grid">
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2.5"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="#ff8a5c" opacity=".12"/></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="#e3e0d8" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#8a8a92" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#17171c" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff6a3c">220MB Average</b> cached images and files</div>
<div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:#e3e0d8"></div></div>
<div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#e3e0d8"></i>Total <b>1.75 GB</b></span></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
</div>
</main></body></html>
docs/design/explorations/05-orbit-slate.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>05 — Orbit Slate</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0f1420; color:#e2e8f2; display:flex; min-height:100vh; }
.rail { width:66px; border-right:1px solid rgba(148,163,184,.1); background:#0c101a; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
.rail .mark { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(34,211,238,.35); }
.rail .ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#475569; font-size:15px; }
.rail .ic.on { color:#22d3ee; background:rgba(34,211,238,.1); }
main { flex:1; }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(148,163,184,.1); }
.search { background:#151b2a; border:1px solid rgba(148,163,184,.12); border-radius:999px; padding:7px 16px; color:#64748b; font-size:13px; width:300px; }
.btn-upgrade { margin-left:auto; background:transparent; color:#22d3ee; border:1px solid rgba(34,211,238,.4); border-radius:999px; padding:7px 18px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.crumb { padding:14px 24px 10px; font-size:11px; color:#64748b; letter-spacing:.14em; text-transform:uppercase; }
.crumb b { color:#94a3b8; font-weight:600; }
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
.avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; box-shadow:0 0 22px rgba(34,211,238,.3); }
.svc h1 { font-size:19px; font-weight:700; letter-spacing:-.3px; }
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(52,211,153,.1); color:#34d399; font-size:9px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.12em; border:1px solid rgba(52,211,153,.25); }
.badge i { width:5px; height:5px; border-radius:50%; background:#34d399; box-shadow:0 0 6px #34d399; }
.sub { font-size:12px; color:#64748b; margin-top:4px; }
.acts { margin-left:auto; display:flex; gap:10px; }
.btn-stop { background:transparent; color:#e2e8f2; border:1px solid rgba(148,163,184,.3); border-radius:999px; padding:9px 20px; font-weight:600; font-size:12px; letter-spacing:.08em; }
.btn-restart { background:linear-gradient(135deg,#22d3ee,#6366f1); color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:700; font-size:12px; letter-spacing:.08em; box-shadow:0 0 18px rgba(34,211,238,.3); }
.tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(148,163,184,.1); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.tab { padding:11px 2px; color:#64748b; }
.tab.on { color:#22d3ee; font-weight:700; border-bottom:2px solid #22d3ee; }
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#131a29; border:1px solid rgba(148,163,184,.1); border-radius:14px; padding:20px; display:flex; flex-direction:column; }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
.cicon { width:32px; height:32px; border-radius:50%; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.18); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:13px; }
.big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
.meta { font-size:11px; color:#64748b; margin-top:5px; letter-spacing:.04em; }
.meta b { font-weight:700; } .g{color:#34d399}.a{color:#fbbf24}
.segbar { display:flex; gap:4px; height:30px; margin-top:14px; }
.segbar div { border-radius:999px; }
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.foot span { font-size:12px; color:#64748b; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.arrow { width:28px; height:28px; border-radius:50%; border:1px solid rgba(34,211,238,.4); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:14px; }
.legend { display:flex; gap:24px; margin-top:12px; font-size:11px; color:#64748b; }
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.legend b { color:#e2e8f2; font-weight:600; }
.bars { display:flex; align-items:flex-end; gap:5px; height:76px; margin-top:10px; }
.bars div { flex:1; background:linear-gradient(180deg,#22d3ee,#6366f1); border-radius:3px; opacity:.85; }
.speed { font-size:11px; color:#64748b; display:flex; gap:6px; align-items:center; letter-spacing:.05em; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="19" height="19" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
<div class="crumb">Servers / <b>api-gateway</b></div>
<div class="svc">
<div class="avatar">⏸</div>
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ &nbsp;·&nbsp; Project Information ›</div></div>
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
</div>
<div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
<div class="grid">
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">GOOD</b> · DAILY USAGE</div>
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#22d3ee" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#22d3ee" stop-opacity=".22"/><stop offset="1" stop-color="#22d3ee" stop-opacity="0"/></linearGradient></defs></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">AVERAGE</b> · DAILY USAGE</div>
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#22d3ee"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(148,163,184,.12)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#64748b" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e2e8f2" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#22d3ee">220MB AVG</b> · CACHED IMAGES AND FILES</div>
<div class="segbar"><div style="width:48%;background:#22d3ee"></div><div style="width:20%;background:#6366f1"></div><div style="width:32%;background:rgba(148,163,184,.12)"></div></div>
<div class="legend"><span><i style="background:#22d3ee"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#6366f1"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#475569"></i>Total <b>1.75 GB</b></span></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">USERS ACTIVE RIGHT NOW</div>
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">GOOD</b> · LAST SCAN TODAY</div>
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#22d3ee">↑</span> 5.2 Mbps up</div></div>
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
</div>
</main></body></html>
docs/design/explorations/06-midnight-v2.html
+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>06 — Midnight v2 (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c10; color:#eceef4; display:flex; min-height:100vh; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.07), transparent 60%); pointer-events:none; }
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 4px 18px rgba(232,49,106,.35); }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
.rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
.rail .lbl { font-size:8.5px; color:#43465300; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; display:flex; align-items:center; gap:10px; }
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:300px; display:flex; justify-content:space-between; }
.search kbd { font-size:10px; background:#1e1f27; border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:1px 6px; color:#565a68; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill { font-size:12px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; }
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pagehead p { font-size:13px; color:#6b6e7d; margin-top:3px; }
.btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; }
.stat::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ac,#e8316a); opacity:.85; }
.stat .k { font-size:10.5px; color:#6b6e7d; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:5px; }
.stat .d { font-size:11px; color:#565a68; margin-top:3px; }
.stat .d b { color:#3dd68c; font-weight:600; }
.secttl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#565a68; margin:0 0 12px; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
.proj:hover { border-color:rgba(232,49,106,.35); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; }
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; }
.badge { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 9px; border-radius:20px; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:6px; margin-bottom:14px; }
.svcs span { width:26px; height:26px; border-radius:8px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:10px; color:#8a8d9c; font-weight:600; }
.svcs span.more { color:#565a68; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; }
.proj .ft .arrow { color:#f4557f; font-size:14px; }
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; }
td:first-child { color:#eceef4; font-weight:600; }
.st { font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; letter-spacing:.06em; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar">
<div class="brand">Containr</div>
<div class="search">Search… <kbd>⌘K</kbd></div>
<div class="topright"><span class="pill">production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat" style="--ac:#3dd68c"><div class="k">Host CPU</div><div class="v">14%</div><div class="d"><b>healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat" style="--ac:#9c7ef0"><div class="k">Memory</div><div class="v">72%</div><div class="d">9.8 GB / 13 GB used</div></div>
<div class="stat" style="--ac:#ff8a5c"><div class="k">Disk</div><div class="v">73%</div><div class="d">338 GB of 465 GB</div></div>
<div class="stat" style="--ac:#e8316a"><div class="k">Deploys · 7d</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
</div>
<p class="secttl">Projects</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#e8316a">C</div><div><h3>core-services</h3><div class="env">production · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>w</span><span class="more">+1</span></div>
<div class="ft"><span>5 services · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">G</div><div><h3>growth-site</h3><div class="env">production · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>site</span><span>api</span><span>rds</span></div>
<div class="ft"><span>3 services · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">M</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span>api</span><span>wrk</span></div>
<div class="ft"><span>2 services · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">Recent Deployments</p>
<table>
<tr><th>Service</th><th>Project</th><th>Status</th><th>Duration</th><th>When</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m 32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/07-terminal-v2.html
+95
View File
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>07 — Terminal v2 (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'JetBrains Mono',monospace; background:#070807; color:#c9d1c9; display:flex; min-height:100vh; font-size:13px; }
body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px); pointer-events:none; }
.rail { width:58px; border-right:1px solid #1c1f1c; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:14px; }
.rail .mark { width:34px; height:34px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.rail .ic { color:#3d443d; font-size:14px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.rail .ic.on { color:#4ade80; background:#4ade8014; border:1px solid #4ade8030; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:10px 24px; border-bottom:1px solid #1c1f1c; font-size:12px; }
.brand { color:#4ade80; font-weight:800; }
.brand::before { content:'▮ '; }
.search { border:1px solid #242824; padding:5px 12px; color:#4a5049; width:320px; font-size:12px; }
.search::before { content:'$ '; color:#4ade80; }
.topright { margin-left:auto; display:flex; gap:14px; color:#4a5049; font-size:11px; align-items:center; }
.topright .env { color:#fbbf24; }
.content { padding:22px 26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; border-bottom:1px dashed #242824; padding-bottom:14px; }
.pagehead h1 { font-size:18px; font-weight:800; color:#e8ede8; }
.pagehead h1::before { content:'## '; color:#4ade80; }
.pagehead p { font-size:11px; color:#4a5049; margin-top:4px; }
.btn-primary { background:#4ade80; color:#070807; border:none; padding:8px 16px; font-family:inherit; font-size:12px; font-weight:800; }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat { border:1px solid #1c1f1c; padding:14px 16px; background:#0b0d0b; position:relative; }
.stat .k { font-size:10px; color:#4a5049; letter-spacing:.1em; }
.stat .k::before { content:'● '; color:#4ade80; font-size:8px; }
.stat .v { font-size:24px; font-weight:800; color:#e8ede8; margin-top:6px; }
.stat .d { font-size:10.5px; color:#4a5049; margin-top:4px; }
.stat .d b { color:#4ade80; font-weight:400; }
.secttl { font-size:11px; color:#4a5049; margin:0 0 10px; letter-spacing:.12em; }
.secttl::before { content:'── '; color:#2a2f2a; } .secttl::after { content:' ──────────'; color:#2a2f2a; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.proj { border:1px solid #1c1f1c; background:#0b0d0b; padding:16px; }
.proj:hover { border-color:#4ade80; }
.proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.proj .ic { width:32px; height:32px; border:1px solid #2a2f2a; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.proj h3 { font-size:13px; font-weight:700; color:#e8ede8; }
.proj .env { font-size:10px; color:#4a5049; margin-top:2px; }
.badge { margin-left:auto; font-size:9px; font-weight:700; padding:2px 8px; letter-spacing:.08em; }
.b-run { border:1px solid #4ade8044; color:#4ade80; } .b-warn { border:1px solid #fbbf2444; color:#fbbf24; }
.svcs { font-size:11px; color:#5a6159; margin-bottom:12px; line-height:1.7; }
.svcs b { color:#c9d1c9; font-weight:400; }
.proj .ft { display:flex; justify-content:space-between; font-size:10.5px; color:#4a5049; border-top:1px dashed #1c1f1c; padding-top:10px; }
.proj .ft .arrow { color:#4ade80; }
table { width:100%; border-collapse:collapse; border:1px solid #1c1f1c; font-size:12px; background:#0b0d0b; }
th { text-align:left; font-size:9.5px; letter-spacing:.14em; color:#4a5049; font-weight:700; padding:9px 16px; border-bottom:1px solid #1c1f1c; }
td { padding:9px 16px; border-bottom:1px solid #141714; color:#8a918a; }
td:first-child { color:#e8ede8; }
.st { font-size:10px; font-weight:700; }
.st-ok { color:#4ade80; } .st-run { color:#6c8ef0; } .st-fail { color:#f87171; }
.st-ok::before{content:'[OK] '}.st-run::before{content:'[..] '}.st-fail::before{content:'[!!] '}
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">containr</div>
<div class="search">search --projects --builds --logs_</div>
<div class="topright"><span class="env">env:production</span><span>tdvorak@containr</span></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>projects</h1><p># 3 projects · 9 services · 1 host · uptime 7h 41m</p></div>
<button class="btn-primary">+ new-project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b>ok</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs">├─ <b>api</b> · <b>web</b> · <b>db</b> · <b>worker</b><br>└─ 5 services total</div>
<div class="ft"><span>deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs">├─ <b>site</b> · <b>api</b> · <b>redis</b><br>└─ 3 services total</div>
<div class="ft"><span>deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs">├─ <b>api</b> · <b>worker</b><br>└─ 2 services · 1 failed</div>
<div class="ft"><span>last deploy failed</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/08-midnight-terminal.html
+98
View File
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>08 — Midnight × Terminal (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.06), transparent 60%); pointer-events:none; }
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
.rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:#f4557f; }
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
.search::before { content:'$ '; color:#f4557f; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.stat .d b { font-weight:600; }
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#f4557f}
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
.secttl::before { content:'// '; color:#f4557f; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
.proj:hover { border-color:rgba(232,49,106,.4); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
.proj h3 { font-size:14.5px; font-weight:700; }
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:6px; margin-bottom:14px; }
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
.proj .ft .arrow { color:#f4557f; }
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="search">search projects, builds, logs…</div>
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#e8316a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span>api</span><span>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/09-ledger.html
+86
View File
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>09 — Ledger (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#121214; color:#e9e7e2; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
.rail { width:60px; border-right:1px solid rgba(233,231,226,.12); display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
.rail .mark { width:34px; height:34px; border-radius:50%; background:#ff4d2e; display:flex; align-items:center; justify-content:center; font-weight:800; color:#121214; font-family:'JetBrains Mono',monospace; font-size:14px; }
.rail .ic { color:#5c5c60; font-size:15px; } .rail .ic.on { color:#ff4d2e; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:baseline; gap:18px; padding:14px 30px; border-bottom:1px solid rgba(233,231,226,.12); }
.brand { font-family:'Instrument Serif',serif; font-size:24px; letter-spacing:-.5px; }
.brand i { color:#ff4d2e; font-style:normal; }
.search { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5c5c60; border-bottom:1px solid rgba(233,231,226,.2); padding-bottom:3px; width:260px; }
.topright { display:flex; gap:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8a8e; }
.content { padding:30px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; }
.pagehead h1 { font-family:'Instrument Serif',serif; font-size:56px; font-weight:400; letter-spacing:-1.5px; line-height:1; }
.pagehead h1 em { color:#ff4d2e; }
.btn-primary { background:#ff4d2e; color:#121214; border:none; border-radius:999px; padding:10px 22px; font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.rule { border:none; border-top:1px solid rgba(233,231,226,.14); margin:14px 0 24px; }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(233,231,226,.14); border-bottom:1px solid rgba(233,231,226,.14); margin-bottom:30px; }
.stat { padding:18px 20px; border-right:1px solid rgba(233,231,226,.14); }
.stat:last-child { border-right:none; }
.stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; letter-spacing:.16em; }
.stat .v { font-family:'Instrument Serif',serif; font-size:44px; font-weight:400; letter-spacing:-1px; margin-top:6px; line-height:1; }
.stat .v span { font-size:20px; color:#5c5c60; }
.stat .d { font-size:11px; color:#8a8a8e; margin-top:6px; }
.stat .d b { color:#ff4d2e; font-weight:500; }
.secttl { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; }
.secttl .no { font-family:'JetBrains Mono',monospace; font-size:11px; color:#ff4d2e; }
.secttl h2 { font-family:'Instrument Serif',serif; font-size:24px; font-weight:400; letter-spacing:-.4px; }
.secttl .cnt { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; }
.projlist { margin-bottom:32px; }
.proj { display:grid; grid-template-columns:70px 1fr auto auto; align-items:center; gap:20px; padding:18px 4px; border-bottom:1px solid rgba(233,231,226,.12); transition:.15s; }
.proj:hover { background:rgba(255,77,46,.04); }
.proj .idx { font-family:'JetBrains Mono',monospace; font-size:12px; color:#5c5c60; }
.proj h3 { font-family:'Instrument Serif',serif; font-size:26px; font-weight:400; letter-spacing:-.5px; }
.proj .env { font-size:11.5px; color:#8a8a8e; margin-top:3px; font-family:'JetBrains Mono',monospace; }
.proj .svcs { font-size:11px; color:#8a8a8e; font-family:'JetBrains Mono',monospace; text-align:right; line-height:1.7; }
.proj .svcs b { color:#e9e7e2; font-weight:500; }
.badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.12em; padding:5px 12px; border-radius:999px; border:1px solid; }
.b-run { border-color:rgba(52,211,153,.4); color:#34d399; }
.b-warn { border-color:rgba(251,191,36,.4); color:#fbbf24; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em; color:#5c5c60; font-weight:500; padding:8px 4px; border-bottom:1px solid rgba(233,231,226,.18); }
td { padding:13px 4px; border-bottom:1px solid rgba(233,231,226,.08); color:#a8a6a0; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
td:first-child { color:#e9e7e2; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; }
.st { font-size:10px; letter-spacing:.1em; }
.st-ok { color:#34d399; } .st-run { color:#8ab4f8; } .st-fail { color:#ff4d2e; }
.st::before { content:'■ '; font-size:7px; vertical-align:2px; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">⌗</div><div class="ic">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">Containr<i>.</i></div>
<div class="search">search projects, builds, logs</div>
<div class="topright"><span>production</span><span>tdvorak</span></div>
</div>
<div class="content">
<div class="pagehead"><h1>Projects<em>.</em></h1><button class="btn-primary">+ new project</button></div>
<p class="mono" style="font-size:11px;color:#5c5c60">03 projects — 09 services — 01 host — uptime 7h 41m</p>
<hr class="rule">
<div class="statrow">
<div class="stat"><div class="k">HOST / CPU</div><div class="v">14<span>%</span></div><div class="d">healthy — 16 cores — load 2.41</div></div>
<div class="stat"><div class="k">HOST / MEMORY</div><div class="v">72<span>%</span></div><div class="d">9.8 GB of 13 GB used</div></div>
<div class="stat"><div class="k">HOST / DISK</div><div class="v">73<span>%</span></div><div class="d">338 GB of 465 GB</div></div>
<div class="stat"><div class="k">DEPLOYS / 7D</div><div class="v">18</div><div class="d"><b>17 ok</b> — 1 failed</div></div>
</div>
<div class="secttl"><span class="no">01</span><h2>Projects</h2><span class="cnt">3 entries</span></div>
<div class="projlist">
<div class="proj"><span class="idx">01</span><div><h3>core-services</h3><div class="env">production · containr.dev · deployed 4m ago</div></div><div class="svcs"><b>api web db worker cache</b><br>5 services</div><span class="badge b-run">RUNNING</span></div>
<div class="proj"><span class="idx">02</span><div><h3>growth-site</h3><div class="env">production · growth.app · deployed 2h ago</div></div><div class="svcs"><b>site api redis</b><br>3 services</div><span class="badge b-run">RUNNING</span></div>
<div class="proj"><span class="idx">03</span><div><h3>ml-pipeline</h3><div class="env">staging · internal · last deploy failed</div></div><div class="svcs"><b>api worker</b><br>2 services</div><span class="badge b-warn">DEGRADED</span></div>
</div>
<div class="secttl"><span class="no">02</span><h2>Recent deployments</h2><span class="cnt">last 24h</span></div>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/10-softcell.html
+99
View File
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>10 — Softcell (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito',system-ui,sans-serif; background:#1e2028; color:#e8e6f2; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
/* soft extruded surface */
.cell { background:#262932; border-radius:22px; box-shadow:6px 6px 14px rgba(0,0,0,.45), -3px -3px 10px rgba(255,255,255,.045); }
.cell-in { background:#22252e; border-radius:14px; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4), inset -2px -2px 6px rgba(255,255,255,.04); }
.rail { width:70px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:12px; }
.rail .mark { width:42px; height:42px; border-radius:16px; background:linear-gradient(145deg,#ff7ab8,#e8569a); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:15px; box-shadow:4px 4px 10px rgba(0,0,0,.4); }
.rail .ic { width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#5f6474; font-size:16px; box-shadow:4px 4px 10px rgba(0,0,0,.35), -2px -2px 8px rgba(255,255,255,.04); background:#242730; }
.rail .ic.on { color:#ff7ab8; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4); }
main { flex:1; min-width:0; padding-right:26px; }
.topbar { display:flex; align-items:center; gap:16px; padding:20px 6px 14px; }
.brand { font-weight:900; font-size:22px; letter-spacing:-.5px; }
.brand em { font-style:normal; color:#ff7ab8; }
.search { margin-left:auto; padding:10px 18px; width:300px; font-size:12.5px; color:#8a8ea0; font-family:'JetBrains Mono',monospace; }
.topright { display:flex; align-items:center; gap:10px; }
.pill { padding:9px 18px; border-radius:999px; font-size:11.5px; font-weight:700; color:#9fa3b5; }
.avatar-t { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#7ab8ff,#b07aff); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:13px; box-shadow:3px 3px 8px rgba(0,0,0,.4); }
.content { padding:6px 6px 30px; max-width:1240px; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-size:30px; font-weight:900; letter-spacing:-.8px; }
.pagehead p { font-size:12px; color:#7b7f92; font-family:'JetBrains Mono',monospace; margin-top:3px; }
.btn-primary { background:linear-gradient(145deg,#ff8ac0,#f15fa0); color:#2a1220; border:none; border-radius:18px; padding:12px 24px; font-size:13.5px; font-weight:900; box-shadow:4px 4px 12px rgba(0,0,0,.45); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat { padding:18px 20px; }
.stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#7b7f92; letter-spacing:.12em; font-weight:600; }
.stat .v { font-size:32px; font-weight:900; letter-spacing:-1px; margin-top:6px; }
.stat .v span { font-size:16px; color:#7b7f92; font-weight:700; }
.meter { height:10px; margin-top:12px; padding:2px; display:flex; gap:3px; }
.meter i { flex:1; border-radius:4px; background:rgba(255,255,255,.06); }
.stat .d { font-size:11px; color:#7b7f92; margin-top:9px; font-family:'JetBrains Mono',monospace; }
.secttl { font-size:12px; font-weight:800; letter-spacing:.16em; color:#7b7f92; margin:0 0 14px 6px; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.proj { padding:20px; transition:.15s; }
.proj:hover { transform:translateY(-2px); }
.proj .top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.proj .ic { width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:#1e2028; box-shadow:3px 3px 8px rgba(0,0,0,.35); }
.proj h3 { font-size:16px; font-weight:800; }
.proj .env { font-size:10.5px; color:#7b7f92; margin-top:2px; font-family:'JetBrains Mono',monospace; }
.badge { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; padding:6px 12px; border-radius:999px; box-shadow:inset 2px 2px 6px rgba(0,0,0,.35); background:#22252e; }
.b-run { color:#5ee6a0; } .b-warn { color:#ffc46b; }
.svcs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.svcs span { font-size:10.5px; font-weight:700; color:#9fa3b5; padding:6px 12px; border-radius:999px; font-family:'JetBrains Mono',monospace; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#7b7f92; font-family:'JetBrains Mono',monospace; }
.proj .ft .arrow { color:#ff7ab8; font-weight:900; }
.tbl { padding:6px; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#7b7f92; font-weight:600; padding:12px 16px; }
td { padding:12px 16px; color:#b9bcc9; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
td:first-child { color:#e8e6f2; font-weight:800; font-family:'Nunito',sans-serif; font-size:13px; }
tbody tr { border-radius:12px; } tbody tr:hover td { background:rgba(255,255,255,.02); }
tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,.04); }
.st { font-size:10px; font-weight:600; padding:4px 10px; border-radius:999px; box-shadow:inset 2px 2px 5px rgba(0,0,0,.35); background:#1e2028; }
.st-ok { color:#5ee6a0; } .st-run { color:#7ab8ff; } .st-fail { color:#ff8a8a; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="search cell-in">search…</div>
<div class="topright"><span class="pill cell">production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat cell"><div class="k">HOST CPU</div><div class="v">14<span>%</span></div><div class="meter cell-in"><i style="background:#5ee6a0"></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">healthy · 16 cores · load 2.41</div></div>
<div class="stat cell"><div class="k">MEMORY</div><div class="v">72<span>%</span></div><div class="meter cell-in"><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i></i><i></i></div><div class="d">9.8 GB / 13 GB used</div></div>
<div class="stat cell"><div class="k">DISK</div><div class="v">73<span>%</span></div><div class="meter cell-in"><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i></i><i></i></div><div class="d">338 GB of 465 GB</div></div>
<div class="stat cell"><div class="k">DEPLOYS · 7D</div><div class="v">18</div><div class="d" style="margin-top:16px"><b style="color:#5ee6a0">17 ok</b> · <b style="color:#ff8a8a">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ff8ac0,#f15fa0)">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">● running</span></div>
<div class="svcs"><span class="cell-in">api</span><span class="cell-in">web</span><span class="cell-in">db</span><span class="cell-in">worker</span><span class="cell-in">+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#9db4ff,#7a8ef0)">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">● running</span></div>
<div class="svcs"><span class="cell-in">site</span><span class="cell-in">api</span><span class="cell-in">redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ffc46b,#f0a050)">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">● degraded</span></div>
<div class="svcs"><span class="cell-in">api</span><span class="cell-in">worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<div class="tbl cell"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/11-flightdeck.html
+108
View File
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>11 — Flight Deck (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0a0f16; color:#dbe4ee; display:flex; min-height:100vh;
background-image:linear-gradient(rgba(140,180,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(140,180,255,.03) 1px, transparent 1px);
background-size:44px 44px; }
.mono { font-family:'IBM Plex Mono',monospace; }
.rail { width:58px; border-right:1px solid rgba(140,180,255,.1); background:#0a0f16; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:10px; }
.rail .mark { width:36px; height:36px; border:1.5px solid #ffb224; color:#ffb224; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'IBM Plex Mono',monospace; font-size:14px; margin-bottom:10px; }
.rail .ic { width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#3d4d63; font-size:15px; border:1px solid transparent; }
.rail .ic.on { color:#ffb224; border-color:rgba(255,178,36,.35); background:rgba(255,178,36,.06); }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:20px; padding:10px 24px; border-bottom:1px solid rgba(140,180,255,.1); font-family:'IBM Plex Mono',monospace; font-size:11px; }
.brand { font-weight:600; font-size:12px; letter-spacing:.22em; color:#dbe4ee; }
.brand em { font-style:normal; color:#ffb224; }
.tlm { color:#3d4d63; display:flex; gap:18px; }
.tlm b { color:#8fb4dd; font-weight:500; }
.search { margin-left:auto; color:#3d4d63; }
.topright { display:flex; gap:14px; align-items:center; }
.envp { color:#ffb224; border:1px solid rgba(255,178,36,.35); padding:3px 10px; font-size:10px; letter-spacing:.14em; }
.usr { color:#8fb4dd; }
.content { padding:24px; max-width:1240px; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.pagehead h1::before { content:'▸ '; color:#ffb224; }
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#3d4d63; margin-top:5px; letter-spacing:.06em; }
.btn-primary { background:transparent; color:#ffb224; border:1px solid rgba(255,178,36,.5); padding:8px 18px; font-size:10.5px; font-weight:600; letter-spacing:.16em; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; }
.btn-primary:hover { background:rgba(255,178,36,.1); }
/* HUD panel: corner brackets */
.panel { position:relative; background:rgba(13,20,30,.75); border:1px solid rgba(140,180,255,.1); }
.panel::before, .panel::after { content:''; position:absolute; width:10px; height:10px; }
.panel::before { top:-1px; left:-1px; border-top:1.5px solid #ffb224; border-left:1.5px solid #ffb224; }
.panel::after { bottom:-1px; right:-1px; border-bottom:1.5px solid #ffb224; border-right:1.5px solid #ffb224; }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat { padding:14px 16px 12px; }
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#3d4d63; display:flex; justify-content:space-between; }
.stat .k i { font-style:normal; color:#ffb224; }
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:500; letter-spacing:-1px; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
.stat .v span { font-size:15px; color:#3d4d63; }
.ticks { display:flex; gap:3px; margin:8px 0; }
.ticks i { width:8px; height:4px; background:rgba(140,180,255,.12); }
.stat .d { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#5c7ba3; letter-spacing:.05em; }
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.24em; color:#5c7ba3; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.secttl::before { content:''; width:8px; height:8px; border:1px solid #ffb224; }
.secttl .r { margin-left:auto; color:#3d4d63; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.proj { padding:16px 18px; }
.proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.proj .id { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#ffb224; letter-spacing:.14em; }
.proj h3 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; margin-top:2px; letter-spacing:.06em; }
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; padding:3px 8px; border:1px solid; }
.b-run { border-color:rgba(63,217,160,.4); color:#3fd9a0; } .b-warn { border-color:rgba(255,178,36,.5); color:#ffb224; }
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb4dd; border:1px solid rgba(140,180,255,.18); padding:3px 8px; }
.proj .ft { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; border-top:1px solid rgba(140,180,255,.08); padding-top:10px; letter-spacing:.05em; }
.proj .ft .arrow { color:#ffb224; }
table { width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11px; }
th { text-align:left; font-size:9px; letter-spacing:.22em; color:#3d4d63; font-weight:500; padding:10px 18px; border-bottom:1px solid rgba(140,180,255,.12); }
td { padding:11px 18px; border-bottom:1px solid rgba(140,180,255,.06); color:#8fb4dd; letter-spacing:.03em; }
td:first-child { color:#dbe4ee; font-weight:600; }
.st { font-size:9.5px; letter-spacing:.12em; }
.st-ok { color:#3fd9a0; } .st-run { color:#8ab4f8; } .st-fail { color:#ff5f56; }
.st::before { content:'['; color:#3d4d63; } .st::after { content:']'; color:#3d4d63; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">CONTAIN<em>R</em></div>
<div class="tlm"><span>LINK <b>NOMINAL</b></span><span>UPTIME <b>7H 41M</b></span><span>NODE <b>cnr-node-01</b></span></div>
<div class="search">search_</div>
<div class="topright"><span class="envp">PRODUCTION</span><span class="usr">tdvorak</span></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 PROJECTS / 9 SERVICES / 1 HOST</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat panel"><div class="k"><span>HOST.CPU</span><i>◉</i></div><div class="v">14<span>%</span></div><div class="ticks"><i style="background:#3fd9a0"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">NOMINAL · 16 CORES · LOAD 2.41</div></div>
<div class="stat panel"><div class="k"><span>HOST.MEM</span><i>◉</i></div><div class="v">72<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">9.8G / 13G USED</div></div>
<div class="stat panel"><div class="k"><span>HOST.DISK</span><i>◉</i></div><div class="v">73<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">338G OF 465G</div></div>
<div class="stat panel"><div class="k"><span>DEPLOYS.7D</span><i>◉</i></div><div class="v">18</div><div class="ticks"><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#ff5f56"></i><i></i><i></i></div><div class="d">17 OK · 1 FAILED</div></div>
</div>
<p class="secttl">PROJECTS <span class="r">3 RECORDS</span></p>
<div class="projgrid">
<div class="proj panel"><div class="top"><span class="id">P.01</span><div><h3>core-services</h3><div class="env">PROD · CONTAINR.DEV</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
<div class="ft"><span>5 SVC · DEPLOYED 4M AGO</span><span class="arrow">→</span></div></div>
<div class="proj panel"><div class="top"><span class="id">P.02</span><div><h3>growth-site</h3><div class="env">PROD · GROWTH.APP</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
<div class="ft"><span>3 SVC · DEPLOYED 2H AGO</span><span class="arrow">→</span></div></div>
<div class="proj panel"><div class="top"><span class="id">P.03</span><div><h3>ml-pipeline</h3><div class="env">STAGING · INTERNAL</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span>api</span><span>worker</span></div>
<div class="ft"><span>2 SVC · 1 FAILED BUILD</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS <span class="r">LAST 24H</span></p>
<div class="panel"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/12-vector.html
+104
View File
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>12 — Vector (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0a0c10; color:#e4e9f1; display:flex; min-height:100vh;
background-image:linear-gradient(rgba(110,160,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(110,160,255,.028) 1px, transparent 1px);
background-size:48px 48px; }
.mono { font-family:'IBM Plex Mono',monospace; }
.rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0c0e13; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
.rail .mark { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#4da1ff,#1f6fe8); display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0c10; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#49556b; font-size:15px; }
.rail .ic.on { background:rgba(77,161,255,.12); color:#6db1ff; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
.brand em { font-style:normal; color:#4da1ff; }
.tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; display:flex; gap:16px; margin-left:8px; }
.tlm b { color:#8fb8e8; font-weight:500; }
.search { margin-left:auto; background:#12141b; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#5c6577; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
.search::before { content:'⌕ '; color:#4da1ff; }
.topright { display:flex; align-items:center; gap:10px; }
.envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#6db1ff; border:1px solid rgba(77,161,255,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
.avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#4da1ff,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; margin-top:5px; letter-spacing:.04em; }
.btn-primary { background:#4da1ff; color:#06101f; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:700; }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
.stat { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:12px; padding:14px 17px; }
.stat::before { content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:1.5px solid #4da1ff; border-left:1.5px solid #4da1ff; border-radius:12px 0 0 0; }
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#49556b; display:flex; justify-content:space-between; }
.stat .k i { font-style:normal; color:#4da1ff; }
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
.stat .v span { font-size:14px; color:#49556b; }
.stat .d { font-size:11px; color:#5c6577; margin-top:6px; font-family:'IBM Plex Mono',monospace; }
.stat .d b { font-weight:500; }
.ok{color:#3dd68c}.warn{color:#f0a040}.blue{color:#6db1ff}
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#49556b; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.secttl::before { content:''; width:7px; height:7px; background:#4da1ff; border-radius:2px; }
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#3a4356; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
.proj { background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; padding:17px; transition:.15s; }
.proj:hover { border-color:rgba(77,161,255,.4); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; color:#fff; font-family:'IBM Plex Mono',monospace; }
.proj h3 { font-size:14px; font-weight:700; }
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#49556b; margin-top:2px; letter-spacing:.05em; }
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:4px; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb8e8; border:1px solid rgba(110,160,255,.16); border-radius:6px; padding:3px 8px; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#49556b; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
.proj .ft .arrow { color:#6db1ff; }
.tbl { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#49556b; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#a9b4c6; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
td:first-child { color:#e4e9f1; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
.st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:4px; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(77,161,255,.12); color:#6db1ff; } .st-fail { background:rgba(255,95,86,.1); color:#ff5f56; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
<div class="search">search projects, builds, logs</div>
<div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><i>◦</i></div><div class="v">14<span>%</span></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><i>◦</i></div><div class="v">72<span>%</span></div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><i>◦</i></div><div class="v">73<span>%</span></div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span><i>◦</i></div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS <span class="r">3</span></p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#4da1ff">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#7c5cf0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#f0a040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span>api</span><span>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
<div class="tbl"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/13-meridian.html
+104
View File
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>13 — Meridian (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0d0e0c; color:#e8ece4; display:flex; min-height:100vh;
background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size:52px 52px; }
.mono { font-family:'IBM Plex Mono',monospace; }
.rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0f100e; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
.rail .mark { width:36px; height:36px; border-radius:50%; border:1.5px solid #b8e34d; color:#b8e34d; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#525a4c; font-size:15px; }
.rail .ic.on { background:rgba(184,227,77,.1); color:#c8ee6a; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
.brand em { font-style:normal; color:#b8e34d; }
.tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; display:flex; gap:16px; margin-left:8px; }
.tlm b { color:#a9b39a; font-weight:500; }
.search { margin-left:auto; background:#141512; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6a7260; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
.search::before { content:'⌕ '; color:#b8e34d; }
.topright { display:flex; align-items:center; gap:10px; }
.envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#c8ee6a; border:1px solid rgba(184,227,77,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
.avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#b8e34d,#4dc88a); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#0d0e0c; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; margin-top:5px; letter-spacing:.04em; }
.btn-primary { background:#b8e34d; color:#13180a; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:800; }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
.stat { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:14px 17px; border-left:2px solid rgba(184,227,77,.5); }
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#525a4c; display:flex; justify-content:space-between; }
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
.stat .v span { font-size:14px; color:#525a4c; }
.meter { height:6px; background:rgba(255,255,255,.05); border-radius:3px; margin-top:10px; overflow:hidden; }
.meter i { display:block; height:100%; border-radius:3px; }
.stat .d { font-size:11px; color:#6a7260; margin-top:8px; font-family:'IBM Plex Mono',monospace; }
.stat .d b { font-weight:500; }
.ok{color:#5ee6a0}.warn{color:#f0c040}.lime{color:#c8ee6a}
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#525a4c; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.secttl::before { content:''; width:14px; height:1.5px; background:#b8e34d; }
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#3d433a; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
.proj { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:17px; transition:.15s; }
.proj:hover { border-color:rgba(184,227,77,.4); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; font-family:'IBM Plex Mono',monospace; }
.proj h3 { font-size:14px; font-weight:700; }
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#525a4c; margin-top:2px; letter-spacing:.05em; }
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:999px; border:1px solid; }
.b-run { border-color:rgba(94,230,160,.3); color:#5ee6a0; } .b-warn { border-color:rgba(240,192,64,.35); color:#f0c040; }
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#a9b39a; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#525a4c; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
.proj .ft .arrow { color:#c8ee6a; }
.tbl { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#525a4c; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b0b8a4; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
td:first-child { color:#e8ece4; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
.st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:999px; }
.st-ok { background:rgba(94,230,160,.1); color:#5ee6a0; } .st-run { background:rgba(184,227,77,.12); color:#c8ee6a; } .st-fail { background:rgba(255,110,100,.1); color:#ff7a70; }
</style></head><body>
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
<div class="search">search projects, builds, logs</div>
<div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span></div><div class="v">14<span>%</span></div><div class="meter"><i style="width:14%;background:#5ee6a0"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span></div><div class="v">72<span>%</span></div><div class="meter"><i style="width:72%;background:#b8e34d"></i></div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span></div><div class="v">73<span>%</span></div><div class="meter"><i style="width:73%;background:#f0c040"></i></div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="d" style="margin-top:14px"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS <span class="r">3</span></p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:rgba(184,227,77,.15);color:#c8ee6a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">running</span></div>
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:rgba(94,230,160,.12);color:#5ee6a0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">running</span></div>
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:rgba(240,192,64,.12);color:#f0c040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">degraded</span></div>
<div class="svcs"><span>api</span><span>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
<div class="tbl"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/14-midnight-violet.html
+109
View File
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>14 — Midnight Violet</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(139,124,246,.07), transparent 60%); pointer-events:none; }
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#8b7cf6,#6b5ce0); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
.rail .ic.on { background:rgba(139,124,246,.14); color:#a89bff; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:#a89bff; }
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
.search::before { content:'$ '; color:#a89bff; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#8b7cf6,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.btn-primary { background:#8b7cf6; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(139,124,246,.35); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.stat .d b { font-weight:600; }
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#a89bff}
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
.secttl::before { content:'// '; color:#a89bff; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
.proj:hover { border-color:rgba(139,124,246,.45); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
.proj h3 { font-size:14.5px; font-weight:700; }
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:6px; margin-bottom:14px; }
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
.proj .ft .arrow { color:#a89bff; }
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
.stat .k { display:flex; justify-content:space-between; align-items:center; }
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
.spark i { flex:1; background:linear-gradient(180deg, #8b7cf6, transparent); opacity:.7; border-radius:1px; }
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
.bar i { display:block; height:100%; background:#8b7cf6; border-radius:3px; }
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
tr:hover td { background:rgba(255,255,255,.02); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="search">search projects, builds, logs…</div>
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#8b7cf6">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/15-midnight-cyan.html
+109
View File
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>15 — Midnight Cyan</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(45,212,191,.07), transparent 60%); pointer-events:none; }
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#2dd4bf,#0d9488); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
.rail .ic.on { background:rgba(45,212,191,.14); color:#5eead4; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:#5eead4; }
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
.search::before { content:'$ '; color:#5eead4; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#2dd4bf,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.btn-primary { background:#2dd4bf; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(45,212,191,.35); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.stat .d b { font-weight:600; }
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#5eead4}
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
.secttl::before { content:'// '; color:#5eead4; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
.proj:hover { border-color:rgba(45,212,191,.45); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
.proj h3 { font-size:14.5px; font-weight:700; }
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:6px; margin-bottom:14px; }
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
.proj .ft .arrow { color:#5eead4; }
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
.stat .k { display:flex; justify-content:space-between; align-items:center; }
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
.spark i { flex:1; background:linear-gradient(180deg, #2dd4bf, transparent); opacity:.7; border-radius:1px; }
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
.bar i { display:block; height:100%; background:#2dd4bf; border-radius:3px; }
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
tr:hover td { background:rgba(255,255,255,.02); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="search">search projects, builds, logs…</div>
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#2dd4bf">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/16-midnight-sunset.html
+109
View File
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>16 — Midnight Sunset</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(251,146,60,.07), transparent 60%); pointer-events:none; }
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#fb923c,#ea6f1f); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
.rail .ic.on { background:rgba(251,146,60,.14); color:#fbb06a; }
main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:#fbb06a; }
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
.search::before { content:'$ '; color:#fbb06a; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#fb923c,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.content { padding:26px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.btn-primary { background:#fb923c; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(251,146,60,.35); }
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
.stat .d b { font-weight:600; }
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#fbb06a}
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
.secttl::before { content:'// '; color:#fbb06a; }
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
.proj:hover { border-color:rgba(251,146,60,.45); transform:translateY(-1px); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
.proj h3 { font-size:14.5px; font-weight:700; }
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
.svcs { display:flex; gap:6px; margin-bottom:14px; }
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
.proj .ft .arrow { color:#fbb06a; }
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
.stat .k { display:flex; justify-content:space-between; align-items:center; }
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
.spark i { flex:1; background:linear-gradient(180deg, #fb923c, transparent); opacity:.7; border-radius:1px; }
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
.bar i { display:block; height:100%; background:#fb923c; border-radius:3px; }
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
tr:hover td { background:rgba(255,255,255,.02); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="search">search projects, builds, logs…</div>
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS</p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic" style="background:#fb923c">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS</p>
<table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table>
</div>
</main></body></html>
docs/design/explorations/17-vertice.html
+195
View File
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>17 — Vertice (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.06);
--ink:#e9ebee; --dim:#8b919e; --faint:#575d69;
--lime:#b4e34a; --lime-soft:#cdf06f; --lime-glow:rgba(180,227,74,.1);
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
}
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
/* ── rail ── */
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 14px rgba(180,227,74,.35); }
.mark svg { width:19px; height:19px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; }
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
.rail .ic.on { background:var(--lime-glow); color:var(--lime-soft); }
.rail .spacer { flex:1; }
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
main { flex:1; min-width:0; }
/* ── topbar ── */
.topbar { display:flex; align-items:center; gap:18px; padding:0 26px; height:52px;
border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:var(--lime); }
.tlm { display:flex; gap:16px; font:11px 'JetBrains Mono',monospace; color:var(--faint); }
.tlm b { color:var(--dim); font-weight:500; }
.search { margin-left:auto; width:290px; padding:7px 14px; border-radius:9px;
background:var(--surface); border:1px solid var(--line);
font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
.search:hover, .search:focus-within { border-color:rgba(180,227,74,.35); }
.search::before { content:'$ '; color:var(--lime); }
.envp { font:10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--lime-soft);
border:1px solid rgba(180,227,74,.3); border-radius:999px; padding:5px 13px; }
/* ── content ── */
.content { padding:24px 26px 34px; max-width:1240px; }
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
.pagehead .sub { font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
.pagehead .sub b { color:var(--dim); font-weight:500; }
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:9px;
padding:9px 18px; font-size:12.5px; font-weight:800; cursor:pointer;
box-shadow:0 3px 14px rgba(180,227,74,.28); transition:.15s; }
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
/* ── stat row ── */
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:24px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
padding:15px 17px 13px; transition:.15s; }
.stat:hover { border-color:rgba(180,227,74,.22); }
.stat .k { display:flex; align-items:center; justify-content:space-between;
font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
.live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.stat .v { font:500 30px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
margin-top:9px; font-variant-numeric:tabular-nums; }
.stat .v span { font-size:14px; color:var(--faint); }
.spark { display:flex; gap:3px; align-items:flex-end; height:24px; margin:11px 0 7px; }
.spark i { flex:1; border-radius:1.5px;
background:linear-gradient(180deg, var(--lime), rgba(180,227,74,.12)); opacity:.75; }
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:13px 0 8px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:3px;
background:linear-gradient(90deg,var(--lime),var(--yellow)); }
.stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.02em; }
.stat .d b { font-weight:600; }
.ok-t{color:var(--ok)} .warn-t{color:var(--yellow)} .err-t{color:var(--err)}
/* ── sections ── */
.secttl { display:flex; align-items:center; gap:9px; margin:0 0 13px;
font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
.secttl::before { content:'//'; color:var(--lime); font-weight:700; }
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
/* ── project cards ── */
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:24px; }
.proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
padding:17px 18px 15px; transition:.18s; cursor:pointer; position:relative; overflow:hidden; }
.proj::before { content:''; position:absolute; inset:0 0 auto; height:1px;
background:linear-gradient(90deg,transparent,rgba(180,227,74,0),transparent); transition:.25s; }
.proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
.proj:hover::before { background:linear-gradient(90deg,transparent,var(--lime),transparent); }
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.proj .ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
justify-content:center; font:700 12.5px 'JetBrains Mono',monospace; flex-shrink:0; }
.ic-lime { background:var(--lime-glow); color:var(--lime-soft); }
.ic-mint { background:rgba(94,230,160,.12); color:var(--ok); }
.ic-amber { background:rgba(242,201,76,.12); color:var(--yellow); }
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.proj .env { font:10px 'JetBrains Mono',monospace; color:var(--faint); margin-top:2.5px; }
.badge { margin-left:auto; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em;
padding:4px 10px; border-radius:5px; }
.b-run { background:rgba(94,230,160,.1); color:var(--ok); }
.b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.svcs span { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
border-radius:7px; background:var(--surface2); border:1px solid rgba(255,255,255,.06);
font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
.dot { width:4.5px; height:4.5px; border-radius:50%; }
.dot-ok { background:var(--ok); } .dot-err { background:var(--err); } .dot-warn { background:var(--yellow); }
.proj .ft { display:flex; justify-content:space-between; align-items:center;
border-top:1px solid rgba(255,255,255,.05); padding-top:11px;
font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
.proj .ft .arrow { color:var(--lime); font-weight:700; transition:.15s; }
.proj:hover .ft .arrow { transform:translateX(3px); }
/* ── table ── */
.tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.03); }
td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
.st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
.st-run { background:rgba(122,184,255,.12); color:var(--run); }
.st-fail { background:rgba(255,111,92,.1); color:var(--err); }
.svc-tag { font:9px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
border-radius:4px; padding:2px 6px; margin-right:8px; vertical-align:1px; }
</style></head><body>
<nav class="rail">
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
<div class="spacer"></div>
<div class="ic">⚙</div>
<div class="usr">TD</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span><span>ver <b>0.4.2</b></span></div>
<div class="search">search projects, builds, logs…</div>
<span class="envp">env:production</span>
</div>
<div class="content">
<div class="pagehead">
<div><h1>Projects</h1><p class="sub"><b>3</b> projects · <b>9</b> services · <b>1</b> host · all systems nominal</p></div>
<button class="btn-primary">+ New Project</button>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
<div class="v">14<span>%</span></div>
<div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
<div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
<div class="v">72<span>%</span></div>
<div class="bar"><i style="width:72%"></i></div>
<div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
<div class="v">73<span>%</span></div>
<div class="bar"><i style="width:73%;background:linear-gradient(90deg,var(--yellow),var(--err))"></i></div>
<div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
<div class="v">18</div>
<div class="bar"><i style="width:94%"></i></div>
<div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS <span class="r">3 records</span></p>
<div class="projgrid">
<div class="proj"><div class="top"><div class="ic ic-lime">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic ic-mint">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
<div class="proj"><div class="top"><div class="ic ic-amber">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
<div class="tbl"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td><span class="svc-tag">svc</span>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td><span class="svc-tag">svc</span>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td><span class="svc-tag">svc</span>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td><span class="svc-tag">svc</span>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/18-vertice2.html
+215
View File
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>18 — Vertice v2 (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.07);
--ink:#ecedf0; --dim:#8b919e; --faint:#565d68;
--lime:#b4e34a; --lime-soft:#cdf06f;
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
}
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
/* ── rail ── */
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 14px rgba(180,227,74,.3); }
.mark svg { width:19px; height:19px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
.rail .ic.on { background:rgba(180,227,74,.1); color:var(--lime-soft); }
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
.rail .spacer { flex:1; }
.rail .kbd { font:700 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
border-radius:5px; padding:3px 6px; letter-spacing:.05em; }
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
main { flex:1; min-width:0; }
/* ── ticker topbar ── */
.topbar { display:flex; align-items:center; gap:0; height:46px; border-bottom:1px solid var(--line);
font:11px 'JetBrains Mono',monospace; overflow:hidden; }
.topbar .brand { padding:0 22px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; border-right:1px solid var(--line); height:100%; display:flex; align-items:center; }
.topbar .brand em { font-style:normal; color:var(--lime); }
.tick { display:flex; gap:0; flex:1; height:100%; }
.tick span { display:flex; align-items:center; gap:7px; padding:0 18px; border-right:1px solid var(--line); color:var(--faint); white-space:nowrap; }
.tick span b { color:var(--dim); font-weight:500; }
.tick .sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
.tick .sig.y { background:var(--yellow); }
.topbar .envp { padding:0 22px; height:100%; display:flex; align-items:center; gap:8px; color:var(--lime-soft); border-left:1px solid var(--line); }
.topbar .envp::before { content:''; width:5px; height:5px; background:var(--lime); }
/* ── masthead ── */
.mast { display:flex; align-items:flex-end; gap:26px; padding:30px 32px 24px; border-bottom:1px solid var(--line); }
.mast h1 { font-size:54px; font-weight:800; letter-spacing:-2.5px; line-height:.95; }
.mast h1 .cursor { color:var(--lime); font-weight:400; }
.mast .meta { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.14em; }
.mast .count b { color:var(--ink); font-weight:600; }
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
padding:10px 20px; font-size:12.5px; font-weight:800; cursor:pointer; transition:.15s;
font-family:'JetBrains Mono',monospace; }
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
.btn-primary .k { opacity:.55; font-weight:500; margin-left:8px; }
/* ── asymmetric body ── */
.body { display:grid; grid-template-columns:1fr 340px; }
/* left: project index */
.pindex { padding:8px 0 0; border-right:1px solid var(--line); }
.pindex .ph { display:flex; align-items:baseline; gap:12px; padding:14px 32px 10px;
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
.pindex .ph .r { margin-left:auto; }
.prow { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:18px;
padding:20px 32px; border-top:1px solid var(--line); cursor:pointer; transition:.15s; position:relative; }
.prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
font-family:'JetBrains Mono',monospace; transition:.15s; }
.prow:hover { background:rgba(255,255,255,.02); }
.prow:hover::after { opacity:1; transform:translateX(4px); }
.prow:hover .stwrap { opacity:0; }
.prow .no { font:600 13px 'JetBrains Mono',monospace; color:var(--faint); }
.prow .no i { font-style:normal; color:var(--lime); }
.prow h3 { font-size:19px; font-weight:700; letter-spacing:-.4px; }
.prow .env { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:4px; }
.prow .env b { color:var(--dim); font-weight:500; }
.prow .svcs { display:flex; gap:5px; margin-top:10px; }
.prow .svcs span { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
border-radius:6px; background:var(--surface2); font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
.dot { width:4.5px; height:4.5px; border-radius:50%; }
.dot-ok { background:var(--ok); } .dot-err { background:var(--err); }
.stwrap { display:flex; flex-direction:column; align-items:flex-end; gap:7px; transition:.15s; }
.badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
.b-run { background:rgba(94,230,160,.1); color:var(--ok); }
.b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
.stwrap .ago { font:10px 'JetBrains Mono',monospace; color:var(--faint); }
/* left: deploy feed below index */
.feed-h { display:flex; align-items:baseline; padding:16px 32px 10px; border-top:1px solid var(--line);
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
.feed-h .r { margin-left:auto; }
.frow { display:grid; grid-template-columns:14px 1fr auto auto auto; align-items:center; gap:16px;
padding:12px 32px; border-top:1px solid rgba(255,255,255,.04); font:11px 'JetBrains Mono',monospace; }
.frow:hover { background:rgba(255,255,255,.02); }
.frow .g { color:var(--faint); }
.frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
.frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:9px; }
.frow .dur { color:var(--faint); }
.frow .ago { color:var(--faint); width:64px; text-align:right; }
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
.st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
.st-run { background:rgba(122,184,255,.12); color:var(--run); }
.st-fail { background:rgba(255,111,92,.1); color:var(--err); }
/* right: host panel */
.host { padding:0; }
.host .hh { padding:14px 22px 12px; font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em;
color:var(--faint); display:flex; align-items:center; gap:8px; }
.host .hh::before { content:''; width:5px; height:5px; background:var(--lime); }
.host .hh .r { margin-left:auto; letter-spacing:.06em; color:#41474f; }
.hstat { padding:13px 22px; border-top:1px solid rgba(255,255,255,.045); }
.hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
.hstat .k { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.14em; color:var(--faint); }
.hstat .v { font:600 19px 'JetBrains Mono',monospace; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.hstat .v span { font-size:11px; color:var(--faint); font-weight:500; }
.meter { height:4px; border-radius:2px; background:rgba(255,255,255,.06); margin-top:9px; overflow:hidden; }
.meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
.meter i.y { background:var(--yellow); }
.meter i.r { background:var(--err); }
.hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
.sparkline { display:flex; gap:2.5px; align-items:flex-end; height:30px; margin-top:10px; }
.sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.5); }
.host .foot { padding:14px 22px 18px; border-top:1px solid rgba(255,255,255,.045);
font:10px 'JetBrains Mono',monospace; color:var(--faint); line-height:1.9; }
.host .foot b { color:var(--dim); font-weight:500; }
.linkrow { display:flex; gap:0; border-top:1px solid var(--line); }
.linkrow a { flex:1; text-align:center; padding:12px 0; font:600 9.5px 'JetBrains Mono',monospace;
letter-spacing:.14em; color:var(--faint); text-decoration:none; border-right:1px solid var(--line); transition:.15s; }
.linkrow a:last-child { border-right:none; }
.linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.04); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
<div class="spacer"></div>
<div class="kbd">⌘K</div>
<div class="ic">⚙</div>
<div class="usr">TD</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tick">
<span><i class="sig"></i>all systems <b>nominal</b></span>
<span>uptime <b>7h 41m</b></span>
<span>node <b>cnr-node-01</b></span>
<span><i class="sig y"></i>1 build <b>failed</b></span>
<span>ver <b>0.4.2</b></span>
</div>
<div class="envp">env:production</div>
</div>
<div class="mast">
<h1>Projects<span class="cursor">_</span></h1>
<div class="meta">
<div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES · <b>01</b> HOST</div>
<button class="btn-primary">+ new project <span class="k">N</span></button>
</div>
</div>
<div class="body">
<div class="pindex">
<div class="ph"><span>// PROJECT INDEX</span><span class="r">sorted by last deploy</span></div>
<div class="prow">
<span class="no"><i>/</i>01</span>
<div><h3>core-services</h3><div class="env">production · <b>containr.dev</b> · 5 services</div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span><b class="dot dot-ok"></b>cache</span></div></div>
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
</div>
<div class="prow">
<span class="no"><i>/</i>02</span>
<div><h3>growth-site</h3><div class="env">production · <b>growth.app</b> · 3 services</div>
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div></div>
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
</div>
<div class="prow">
<span class="no"><i>/</i>03</span>
<div><h3>ml-pipeline</h3><div class="env">staging · <b>internal</b> · 2 services</div>
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div></div>
<div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
</div>
<div class="feed-h"><span>// DEPLOY FEED</span><span class="r">last 24h</span></div>
<div class="frow"><span class="g">▸</span><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">48s</span><span class="ago">4m</span></div>
<div class="frow"><span class="g">▸</span><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="dur">—</span><span class="ago">6m</span></div>
<div class="frow"><span class="g">▸</span><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="dur">1m32s</span><span class="ago">1h</span></div>
<div class="frow"><span class="g">▸</span><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">39s</span><span class="ago">2h</span></div>
<div class="frow"><span class="g">▸</span><span class="name">api<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">41s</span><span class="ago">3h</span></div>
</div>
<aside class="host">
<div class="hh">HOST VITALS <span class="r">cnr-node-01</span></div>
<div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
<div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
<div class="note">16 cores · load 2.41 · healthy</div></div>
<div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
<div class="meter"><i style="width:72%"></i></div>
<div class="note">9.8G / 13G used</div></div>
<div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
<div class="meter"><i class="y" style="width:73%"></i></div>
<div class="note">338G of 465G · high usage</div></div>
<div class="hstat"><div class="top"><span class="k">NETWORK</span><span class="v">84<span>MB/s</span></span></div>
<div class="meter"><i style="width:34%"></i></div>
<div class="note">rx 52 · tx 32</div></div>
<div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
<div class="meter"><i style="width:94%"></i></div>
<div class="note">17 ok · 1 failed</div></div>
<div class="foot">docker <b>26.1.4</b> · containerd <b>1.7</b><br>traefik <b>v3.1</b> · 9 containers<br>last gc <b>12m ago</b></div>
<div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
</aside>
</div>
</main></body></html>
docs/design/explorations/19-vertice3.html
+201
View File
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>19 — Vertice v3 (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
--ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
--lime:#b4e34a; --lime-soft:#cdf06f;
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
}
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
.mono { font-family:'JetBrains Mono',monospace; }
/* ── rail ── */
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 14px rgba(180,227,74,.28); }
.mark svg { width:19px; height:19px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
.rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
.rail .spacer { flex:1; }
.rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
border-radius:5px; padding:3px 6px; }
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
main { flex:1; min-width:0; }
/* ── topbar: one quiet line ── */
.topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
font:11px 'JetBrains Mono',monospace; }
.topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
.topbar .brand em { font-style:normal; color:var(--lime); }
.tick { display:flex; gap:22px; padding-left:8px; }
.tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
.tick b { color:var(--dim); font-weight:500; }
.sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
.sig.y { background:var(--yellow); }
.topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
.topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
/* ── masthead ── */
.mast { display:flex; align-items:flex-end; justify-content:space-between;
padding:34px 32px 26px; }
.mast h1 { font-size:44px; font-weight:800; letter-spacing:-2px; line-height:1; }
.mast h1 .cursor { color:var(--lime); font-weight:400; }
.mast .meta { display:flex; align-items:center; gap:22px; }
.mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.12em; }
.mast .count b { color:var(--dim); font-weight:600; }
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
padding:10px 18px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s; }
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
/* ── body split ── */
.body { display:grid; grid-template-columns:1fr 300px; border-top:1px solid var(--line); }
/* left */
.pindex { padding:6px 0 20px; border-right:1px solid var(--line); }
.ph { padding:16px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
.ph::before { content:'//'; color:var(--lime); margin-right:8px; }
.prow { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
padding:22px 32px; cursor:pointer; transition:.15s; position:relative; }
.prow + .prow { border-top:1px solid rgba(255,255,255,.04); }
.prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
font-family:'JetBrains Mono',monospace; font-size:13px; transition:.15s; }
.prow:hover { background:rgba(255,255,255,.018); }
.prow:hover::after { opacity:1; transform:translateX(4px); }
.prow:hover .stwrap { opacity:0; }
.prow .no { font:500 12px 'JetBrains Mono',monospace; color:var(--faint); }
.prow .no i { font-style:normal; color:var(--lime); }
.prow h3 { font-size:17px; font-weight:700; letter-spacing:-.3px; display:inline; }
.prow .meta { display:inline; font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-left:12px; }
.prow .meta b { color:var(--dim); font-weight:500; }
.prow .svcline { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
.prow .svcline i { font-style:normal; }
.prow .svcline .g { color:var(--ok); } .prow .svcline .r { color:var(--err); }
.stwrap { display:flex; align-items:center; gap:12px; transition:.15s; }
.stwrap .ago { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); width:52px; text-align:right; }
.badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
.b-run { background:rgba(94,230,160,.09); color:var(--ok); }
.b-warn { background:rgba(242,201,76,.09); color:var(--yellow); }
.feed-h { padding:20px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
.feed-h::before { content:'//'; color:var(--lime); margin-right:8px; }
.frow { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px;
padding:11px 32px; font:11px 'JetBrains Mono',monospace; transition:.12s; }
.frow + .frow { border-top:1px solid rgba(255,255,255,.035); }
.frow:hover { background:rgba(255,255,255,.018); }
.frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
.frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:10px; }
.frow .right { display:flex; align-items:center; gap:16px; }
.frow .ago { color:var(--faint); width:44px; text-align:right; }
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
.st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
.st-run { background:rgba(122,184,255,.11); color:var(--run); }
.st-fail { background:rgba(255,111,92,.09); color:var(--err); }
/* right: host vitals */
.host { padding-bottom:20px; }
.host .hh { padding:16px 24px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em;
color:var(--faint); }
.host .hh::before { content:'//'; color:var(--lime); margin-right:8px; }
.hstat { padding:15px 24px 4px; }
.hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
.hstat .k { font:500 10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--faint); }
.hstat .v { font:600 18px 'JetBrains Mono',monospace; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.hstat .v span { font-size:10.5px; color:var(--faint); font-weight:500; }
.meter { height:3px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:10px; overflow:hidden; }
.meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
.meter i.y { background:var(--yellow); }
.hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
.sparkline { display:flex; gap:3px; align-items:flex-end; height:26px; margin-top:10px; }
.sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.4); }
.host .foot { margin-top:8px; padding:14px 24px 4px; font:10px 'JetBrains Mono',monospace;
color:var(--faint); line-height:2; }
.host .foot b { color:var(--dim); font-weight:500; }
.linkrow { display:flex; margin:14px 24px 0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.linkrow a { flex:1; text-align:center; padding:9px 0; font:600 9px 'JetBrains Mono',monospace;
letter-spacing:.14em; color:var(--faint); text-decoration:none; transition:.15s; }
.linkrow a + a { border-left:1px solid var(--line); }
.linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.05); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
<div class="spacer"></div>
<div class="kbd">⌘K</div>
<div class="ic">⚙</div>
<div class="usr">TD</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tick">
<span><i class="sig"></i><b>nominal</b></span>
<span><i class="sig y"></i>1 build <b>failed</b></span>
<span>node <b>cnr-node-01</b></span>
</div>
<div class="envp">env:production</div>
</div>
<div class="mast">
<h1>Projects<span class="cursor">_</span></h1>
<div class="meta">
<div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES</div>
<button class="btn-primary">+ new project</button>
</div>
</div>
<div class="body">
<div class="pindex">
<div class="ph">PROJECT INDEX</div>
<div class="prow">
<span class="no"><i>/</i>01</span>
<div><h3>core-services</h3><span class="meta">prod · <b>containr.dev</b></span>
<div class="svcline"><i class="g">●</i> api &nbsp;<i class="g">●</i> web &nbsp;<i class="g">●</i> db &nbsp;<i class="g">●</i> worker &nbsp;<i class="g">●</i> cache</div></div>
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
</div>
<div class="prow">
<span class="no"><i>/</i>02</span>
<div><h3>growth-site</h3><span class="meta">prod · <b>growth.app</b></span>
<div class="svcline"><i class="g">●</i> site &nbsp;<i class="g">●</i> api &nbsp;<i class="g">●</i> redis</div></div>
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
</div>
<div class="prow">
<span class="no"><i>/</i>03</span>
<div><h3>ml-pipeline</h3><span class="meta">staging · <b>internal</b></span>
<div class="svcline"><i class="g">●</i> api &nbsp;<i class="r">●</i> worker</div></div>
<div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
</div>
<div class="feed-h">DEPLOY FEED</div>
<div class="frow"><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">4m</span></div>
<div class="frow"><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="ago">6m</span></div>
<div class="frow"><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="ago">1h</span></div>
<div class="frow"><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">2h</span></div>
</div>
<aside class="host">
<div class="hh">HOST VITALS</div>
<div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
<div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
<div class="note">16 cores · load 2.41</div></div>
<div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
<div class="meter"><i style="width:72%"></i></div>
<div class="note">9.8G / 13G</div></div>
<div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
<div class="meter"><i class="y" style="width:73%"></i></div>
<div class="note">338G of 465G</div></div>
<div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
<div class="note" style="margin-top:10px"><b style="color:var(--ok)">17 ok</b> · <b style="color:var(--yellow)">1 failed</b></div></div>
<div class="foot">docker <b>26.1.4</b> · traefik <b>v3.1</b><br>9 containers · last gc <b>12m</b></div>
<div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
</aside>
</div>
</main></body></html>
docs/design/explorations/20-vertice4.html
+223
View File
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>20 — Vertice (Dashboard)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
--ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
--lime:#b4e34a; --lime-soft:#cdf06f;
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
}
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
/* ── rail ── */
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 14px rgba(180,227,74,.28); }
.mark svg { width:19px; height:19px; }
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
.rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
.rail .spacer { flex:1; }
.rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:3px 6px; }
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
main { flex:1; min-width:0; }
/* ── topbar ── */
.topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
font:11px 'JetBrains Mono',monospace; }
.topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
.topbar .brand em { font-style:normal; color:var(--lime); }
.tick { display:flex; gap:22px; padding-left:8px; }
.tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
.tick b { color:var(--dim); font-weight:500; }
.sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
.sig.y { background:var(--yellow); }
.topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
.topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
/* ── content ── */
.content { padding:26px 32px 36px; max-width:1280px; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:20px; }
.pagehead .left h1 { font-size:24px; font-weight:800; letter-spacing:-.8px; }
.pagehead .left h1 .cursor { color:var(--lime); font-weight:400; }
.pagehead .left .sub { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
.pagehead .left .sub b { color:var(--dim); font-weight:600; }
.pagehead .right { display:flex; align-items:center; gap:10px; }
.search { width:230px; padding:8px 14px; border-radius:9px; background:var(--surface);
border:1px solid var(--line); font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
.search:hover { border-color:rgba(180,227,74,.3); }
.search::before { content:'⌕ '; color:var(--lime); }
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
padding:9px 17px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s;
box-shadow:0 2px 12px rgba(180,227,74,.22); }
.btn-primary:hover { background:var(--lime-soft); }
/* ── stat row ── */
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:26px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
padding:14px 17px 12px; transition:.15s; }
.stat:hover { border-color:rgba(180,227,74,.2); }
.stat .k { display:flex; align-items:center; justify-content:space-between;
font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
.live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.stat .v { font:500 28px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
margin-top:8px; font-variant-numeric:tabular-nums; }
.stat .v span { font-size:13px; color:var(--faint); }
.spark { display:flex; gap:3px; align-items:flex-end; height:22px; margin:10px 0 6px; }
.spark i { flex:1; border-radius:1.5px; background:linear-gradient(180deg,var(--lime),rgba(180,227,74,.1)); opacity:.7; }
.bar { height:4px; background:rgba(255,255,255,.07); border-radius:2px; margin:12px 0 7px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:2px; background:var(--lime); }
.bar i.y { background:linear-gradient(90deg,var(--lime),var(--yellow)); }
.bar i.r { background:linear-gradient(90deg,var(--yellow),var(--err)); }
.stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
.stat .d b { font-weight:600; }
.ok-t{color:var(--ok)} .warn-t{color:var(--yellow)}
/* ── section header ── */
.secttl { display:flex; align-items:center; margin:0 0 13px;
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
.secttl::before { content:'//'; color:var(--lime); margin-right:8px; font-weight:700; }
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
/* ── project cards: railway-style canvas ── */
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
.proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
padding:15px 16px; transition:.18s; cursor:pointer; }
.proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
.proj .top { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.proj .star { margin-left:auto; color:var(--faint); font-size:14px; transition:.15s; }
.proj:hover .star { color:var(--yellow); }
.mini { position:relative; height:104px; border-radius:10px; margin-bottom:12px; overflow:hidden;
background:#0e1013; border:1px solid rgba(255,255,255,.04);
background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px); background-size:14px 14px; }
.mini .node { position:absolute; width:32px; height:32px; border-radius:9px;
background:var(--surface2); border:1px solid rgba(255,255,255,.09);
display:flex; align-items:center; justify-content:center;
font:700 9px 'JetBrains Mono',monospace; color:var(--dim); }
.mini .node .nd { position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%;
background:var(--ok); border:2px solid #0e1013; }
.mini .node .nd.r { background:var(--err); }
.mini .more { position:absolute; width:32px; height:32px; border-radius:9px;
border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
font:600 9px 'JetBrains Mono',monospace; color:var(--faint); }
.mini .edge { position:absolute; height:1px; background:rgba(255,255,255,.12); }
.proj .ft { display:flex; align-items:center; gap:8px; font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
.proj .ft .env-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); }
.proj .ft .env-dot.y { background:var(--yellow); }
.proj .ft b { color:var(--dim); font-weight:500; }
.proj .ft .ago { margin-left:auto; }
/* ── deploy table ── */
.tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.025); }
td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
.st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
.st-run { background:rgba(122,184,255,.11); color:var(--run); }
.st-fail { background:rgba(255,111,92,.09); color:var(--err); }
</style></head><body>
<nav class="rail">
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
<div class="spacer"></div>
<div class="kbd">⌘K</div>
<div class="ic">⚙</div>
<div class="usr">TD</div>
</nav>
<main>
<div class="topbar">
<div class="brand">contain<em>r</em></div>
<div class="tick">
<span><i class="sig"></i><b>nominal</b></span>
<span><i class="sig y"></i>1 build <b>failed</b></span>
<span>node <b>cnr-node-01</b></span>
</div>
<div class="envp">env:production</div>
</div>
<div class="content">
<div class="pagehead">
<div class="left"><h1>Projects<span class="cursor">_</span></h1>
<p class="sub"><b>03</b> projects · <b>09</b> services · <b>01</b> host</p></div>
<div class="right">
<div class="search">search projects…</div>
<button class="btn-primary">+ new</button>
</div>
</div>
<div class="statrow">
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
<div class="v">14<span>%</span></div>
<div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
<div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
<div class="v">72<span>%</span></div>
<div class="bar"><i class="y" style="width:72%"></i></div>
<div class="d">9.8G / 13G used</div></div>
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
<div class="v">73<span>%</span></div>
<div class="bar"><i class="r" style="width:73%"></i></div>
<div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
<div class="v">18</div>
<div class="bar"><i style="width:94%"></i></div>
<div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
</div>
<p class="secttl">PROJECTS <span class="r">3 records</span></p>
<div class="projgrid">
<div class="proj"><div class="top"><h3>core-services</h3><span class="star">☆</span></div>
<div class="mini">
<div class="edge" style="left:44px;top:36px;width:44px"></div>
<div class="edge" style="left:44px;top:64px;width:80px"></div>
<div class="node" style="left:14px;top:22px"><b class="nd"></b>api</div>
<div class="node" style="left:88px;top:22px"><b class="nd"></b>web</div>
<div class="node" style="left:14px;top:64px"><b class="nd"></b>db</div>
<div class="node" style="left:124px;top:64px"><b class="nd"></b>wrk</div>
<div class="more" style="left:88px;top:64px">+1</div>
</div>
<div class="ft"><i class="env-dot"></i><b>production</b> · 5/5 online <span class="ago">4m ago</span></div></div>
<div class="proj"><div class="top"><h3>growth-site</h3><span class="star">☆</span></div>
<div class="mini">
<div class="edge" style="left:44px;top:36px;width:44px"></div>
<div class="node" style="left:14px;top:36px"><b class="nd"></b>site</div>
<div class="node" style="left:88px;top:36px"><b class="nd"></b>api</div>
<div class="node" style="left:162px;top:36px"><b class="nd"></b>rds</div>
</div>
<div class="ft"><i class="env-dot"></i><b>production</b> · 3/3 online <span class="ago">2h ago</span></div></div>
<div class="proj"><div class="top"><h3>ml-pipeline</h3><span class="star">☆</span></div>
<div class="mini">
<div class="edge" style="left:44px;top:36px;width:44px"></div>
<div class="node" style="left:14px;top:36px"><b class="nd"></b>api</div>
<div class="node" style="left:88px;top:36px"><b class="nd r"></b>wrk</div>
</div>
<div class="ft"><i class="env-dot y"></i><b>staging</b> · 1/2 online <span class="ago">1h ago</span></div></div>
</div>
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
<div class="tbl"><table>
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
</table></div>
</div>
</main></body></html>
docs/design/explorations/d06.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

docs/design/explorations/d07.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

docs/design/explorations/d08.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

docs/design/explorations/d09.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

docs/design/explorations/d10.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

docs/design/explorations/d11.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

docs/design/explorations/d12.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

docs/design/explorations/d13.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

docs/design/explorations/d14.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

docs/design/explorations/d15.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

docs/design/explorations/d16.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

docs/design/explorations/d17.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

docs/design/explorations/d18.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

docs/design/explorations/d19.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

docs/design/explorations/d20-app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/design/explorations/d20-app2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

docs/design/explorations/d20.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

docs/design/explorations/final-projects.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

docs/design/explorations/s02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

docs/design/explorations/s03.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

docs/design/explorations/s04.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

docs/design/explorations/s05.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

docs/design/explorations/s1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

docs/design/explorations/sw2-set.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

docs/design/explorations/sw2-svc2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

docs/design/explorations/sw2-usage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

docs/design/explorations/sweep-auth.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

docs/design/explorations/sweep-builds.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

docs/design/explorations/sweep-svc.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

docs/design/explorations/sweep-tpl.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

docs/design/explorations/sweep-ws.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB