291 lines
16 KiB
HTML
291 lines
16 KiB
HTML
<!DOCTYPE html><html class="dark" lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>VAULT_SECURE | Password Management</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<style>
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
.font-sans { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
/* Custom scrollbar for the monolithic look */
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: #0E0E0E; }
|
|
::-webkit-scrollbar-thumb { background: #353534; }
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"secondary-fixed": "#ffdbcc",
|
|
"on-primary": "#571f00",
|
|
"on-error-container": "#ffdad6",
|
|
"tertiary-fixed": "#cce5ff",
|
|
"primary-container": "#c2571a",
|
|
"outline-variant": "#574239",
|
|
"on-tertiary-container": "#00050d",
|
|
"on-tertiary": "#003351",
|
|
"surface": "#131313",
|
|
"surface-bright": "#3a3939",
|
|
"surface-dim": "#131313",
|
|
"on-tertiary-fixed-variant": "#004b73",
|
|
"primary-fixed": "#ffdbcc",
|
|
"on-error": "#690005",
|
|
"inverse-on-surface": "#313030",
|
|
"on-tertiary-fixed": "#001d31",
|
|
"on-primary-fixed-variant": "#7b2f00",
|
|
"inverse-surface": "#e5e2e1",
|
|
"on-secondary-fixed": "#351000",
|
|
"outline": "#a58b80",
|
|
"on-secondary-fixed-variant": "#6b3a22",
|
|
"tertiary-container": "#007dbd",
|
|
"surface-container": "#201f1f",
|
|
"secondary-fixed-dim": "#fdb696",
|
|
"background": "#131313",
|
|
"on-background": "#e5e2e1",
|
|
"surface-variant": "#353534",
|
|
"on-secondary-container": "#eaa586",
|
|
"error-container": "#93000a",
|
|
"on-surface-variant": "#dec0b4",
|
|
"secondary-container": "#6b3a22",
|
|
"on-surface": "#e5e2e1",
|
|
"on-primary-container": "#0f0200",
|
|
"surface-container-low": "#1c1b1b",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"tertiary-fixed-dim": "#93ccff",
|
|
"on-primary-fixed": "#351000",
|
|
"inverse-primary": "#a14000",
|
|
"error": "#ffb4ab",
|
|
"surface-container-high": "#2a2a2a",
|
|
"secondary": "#fdb696",
|
|
"surface-container-highest": "#353534",
|
|
"primary-fixed-dim": "#ffb694",
|
|
"on-secondary": "#4f240e",
|
|
"primary": "#ffb694",
|
|
"surface-tint": "#ffb694",
|
|
"tertiary": "#93ccff"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
min-height: 100dvh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-sans selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- Main Content Canvas -->
|
|
<main class="min-h-screen flex flex-col relative">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 left-0 right-0 z-40 bg-[#131313]/80 backdrop-blur-xl flex items-center justify-between px-8 h-16 border-b border-[#574239]/10">
|
|
<div class="flex items-center gap-6">
|
|
<span class="text-xl font-black tracking-tighter text-[#E5E2E1]" style="">VAULT_SECURE</span>
|
|
<div class="h-6 w-px bg-outline-variant/20 mx-2"></div>
|
|
<div class="flex items-center gap-4 text-orange-600">
|
|
<span class="material-symbols-outlined" data-icon="search" style="">search</span>
|
|
<span class="font-['Inter'] font-semibold text-sm text-[#DEC0B4]" style="">Search Vault (⌘K)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="hidden md:flex items-center gap-2 px-3 py-1 rounded bg-surface-container-highest border border-outline-variant/10">
|
|
<span class="text-[10px] font-mono text-primary uppercase tracking-widest" style="">Master Key Status:</span>
|
|
<span class="text-[10px] font-mono text-green-500 uppercase" style="">Verified</span>
|
|
</div>
|
|
<button class="text-[#DEC0B4] hover:bg-[#353534]/30 p-2 rounded transition-colors" style="">
|
|
<span class="material-symbols-outlined" data-icon="account_circle" style="">account_circle</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Notification Toast -->
|
|
<div class="fixed top-20 left-1/2 -translate-x-1/2 z-50 flex animate-in fade-in slide-in-from-top-4 duration-300">
|
|
<div class="bg-surface-container border border-primary-container/50 px-6 py-3 rounded-lg flex items-center gap-4 shadow-2xl">
|
|
<span class="material-symbols-outlined text-primary text-sm" data-icon="check_circle" style="">check_circle</span>
|
|
<span class="text-sm font-medium" style="">Password Copied</span>
|
|
<div class="h-4 w-px bg-outline-variant/30"></div>
|
|
<span class="text-[10px] font-mono text-on-surface-variant" style="">0.4ms</span>
|
|
</div>
|
|
</div>
|
|
<!-- Scrollable Content Area -->
|
|
<div class="mt-16 p-4 md:p-10 flex-1 max-w-7xl mx-auto w-full">
|
|
<!-- Action Header -->
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div class="flex gap-4">
|
|
<button class="text-xs font-mono uppercase tracking-widest text-primary border-b-2 border-primary pb-1" style="">All Items</button>
|
|
<button class="text-xs font-mono uppercase tracking-widest text-on-surface-variant/60 hover:text-on-surface transition-colors pb-1" style="">Favorites</button>
|
|
</div>
|
|
<button class="bg-primary-container text-on-primary-container px-6 py-2 text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-opacity" style="">
|
|
<span class="material-symbols-outlined text-sm" data-icon="add" style="">add</span>
|
|
NEW ENTITY
|
|
</button>
|
|
</div>
|
|
<!-- Monolithic Data Grid -->
|
|
<div class="bg-surface-container-lowest rounded-lg border border-outline-variant/10 overflow-hidden shadow-2xl">
|
|
<!-- Grid Headers -->
|
|
<div class="hidden md:grid grid-cols-12 gap-4 px-8 py-4 bg-surface-container-highest/40 border-b border-outline-variant/10">
|
|
<div class="col-span-3 text-[10px] font-mono text-on-surface-variant uppercase tracking-widest" style="">Site / Application</div>
|
|
<div class="col-span-2 text-[10px] font-mono text-on-surface-variant uppercase tracking-widest" style="">Login</div>
|
|
<div class="col-span-2 text-[10px] font-mono text-on-surface-variant uppercase tracking-widest" style="">Email Address</div>
|
|
<div class="col-span-3 text-[10px] font-mono text-on-surface-variant uppercase tracking-widest" style="">Security String</div>
|
|
<div class="col-span-1 text-[10px] font-mono text-on-surface-variant uppercase tracking-widest" style="">Tags</div>
|
|
<div class="col-span-1 text-right"></div>
|
|
</div>
|
|
<!-- Password Rows -->
|
|
<div class="divide-y divide-outline-variant/5">
|
|
<!-- Row 1 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-8 py-6 items-center hover:bg-surface-bright/5 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-primary">
|
|
<div class="col-span-1 md:col-span-3 flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-surface-container-high flex items-center justify-center rounded-sm shrink-0">
|
|
<span class="material-symbols-outlined text-primary" data-icon="play_circle" style="font-variation-settings: "FILL" 1;">play_circle</span>
|
|
</div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<span class="text-sm font-bold truncate" style="">Disney Plus</span>
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate" style="">disney.com</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-xs font-medium truncate block" style="">disney_premium_admin</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate block" style="">admin@disney.corp</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-3">
|
|
<span class="font-mono text-on-surface-variant tracking-[0.2em] text-lg select-none" style="">••••••••••••••••</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-1 flex gap-1 flex-wrap">
|
|
<span class="px-2 py-0.5 bg-surface-variant text-[9px] font-mono text-on-surface-variant border border-outline-variant/20" style="">ENT.</span>
|
|
</div>
|
|
<div class="col-span-1 flex justify-end gap-2 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="content_copy" style="">content_copy</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="more_vert" style="">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Row 2 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-8 py-6 items-center hover:bg-surface-bright/5 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-primary">
|
|
<div class="col-span-1 md:col-span-3 flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-surface-container-high flex items-center justify-center rounded-sm shrink-0">
|
|
<span class="material-symbols-outlined text-[#DEC0B4]" data-icon="shield" style="">shield</span>
|
|
</div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<span class="text-sm font-bold truncate" style="">AWS Console</span>
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate" style="">console.aws.amazon.com</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-xs font-medium truncate block" style="">iam_root_security</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate block" style="">root@sys.internal</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-3">
|
|
<span class="font-mono text-on-surface-variant tracking-[0.2em] text-lg select-none opacity-50" style="">••••••••••••••••</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-1 flex gap-1 flex-wrap">
|
|
<span class="px-2 py-0.5 bg-surface-variant text-[9px] font-mono text-on-surface-variant border border-outline-variant/20" style="">INFRA</span>
|
|
</div>
|
|
<div class="col-span-1 flex justify-end gap-2 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="content_copy" style="">content_copy</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="more_vert" style="">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Row 3 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-8 py-6 items-center hover:bg-surface-bright/5 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-primary">
|
|
<div class="col-span-1 md:col-span-3 flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-surface-container-high flex items-center justify-center rounded-sm shrink-0">
|
|
<span class="material-symbols-outlined text-[#DEC0B4]" data-icon="terminal" style="">terminal</span>
|
|
</div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<span class="text-sm font-bold truncate" style="">GitHub Enterprise</span>
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate" style="">github.com</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-xs font-medium truncate block" style="">dev_ops_internal</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate block" style="">dev@github.com</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-3">
|
|
<span class="font-mono text-on-surface-variant tracking-[0.2em] text-lg select-none opacity-50" style="">••••••••••••••••</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-1 flex gap-1 flex-wrap">
|
|
<span class="px-2 py-0.5 bg-surface-variant text-[9px] font-mono text-on-surface-variant border border-outline-variant/20" style="">DEV</span>
|
|
</div>
|
|
<div class="col-span-1 flex justify-end gap-2 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="content_copy" style="">content_copy</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="more_vert" style="">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Row 4 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-8 py-6 items-center hover:bg-surface-bright/5 transition-colors group cursor-pointer border-l-2 border-transparent hover:border-primary">
|
|
<div class="col-span-1 md:col-span-3 flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-surface-container-high flex items-center justify-center rounded-sm shrink-0">
|
|
<span class="material-symbols-outlined text-[#DEC0B4]" data-icon="token" style="">token</span>
|
|
</div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<span class="text-sm font-bold truncate" style="">Stripe Merchant</span>
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate" style="">dashboard.stripe.com</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-xs font-medium truncate block" style="">finance_primary_vault</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2">
|
|
<span class="text-[10px] text-on-surface-variant font-mono truncate block" style="">billing@stripe.com</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-3">
|
|
<span class="font-mono text-on-surface-variant tracking-[0.2em] text-lg select-none opacity-50" style="">••••••••••••••••</span>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-1 flex gap-1 flex-wrap">
|
|
<span class="px-2 py-0.5 bg-surface-variant text-[9px] font-mono text-on-surface-variant border border-outline-variant/20" style="">FIN</span>
|
|
</div>
|
|
<div class="col-span-1 flex justify-end gap-2 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="content_copy" style="">content_copy</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1" style="">
|
|
<span class="material-symbols-outlined text-lg" data-icon="more_vert" style="">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Visual Decoration -->
|
|
<footer class="mt-auto px-10 py-6 flex justify-between items-center border-t border-outline-variant/5 bg-surface-container-lowest/50">
|
|
<div class="flex gap-8">
|
|
<div class="flex flex-col">
|
|
<span class="text-[8px] font-mono text-on-surface-variant uppercase" style="">End-to-End Encryption</span>
|
|
<span class="text-[10px] font-mono text-green-500" style="">AES-256-GCM ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-[10px] font-mono text-on-surface-variant/40" style="">
|
|
© 2024 VAULT_SECURE / VER_4.1.0_MINIMAL
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</body></html> |