the file structure has been created and the application's basic architecture has been defined
This commit is contained in:
Александр Ебаклаков
220
docs/spotlight-design/code.html
Normal file
220
docs/spotlight-design/code.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!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 - Spotlight</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"/>
|
||||
<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": ["JetBrains Mono"],
|
||||
"mono": ["JetBrains Mono"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.ghost-border {
|
||||
outline: 1px solid rgba(87, 66, 57, 0.15);
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(58, 57, 57, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary-container selection:text-on-primary-container min-h-screen overflow-hidden">
|
||||
<!-- Background Layer (Simulating App Behind Spotlight) -->
|
||||
<div class="fixed inset-0 z-0 flex">
|
||||
<!-- NavigationDrawer -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#131313] flex flex-col py-6 px-4 opacity-20 pointer-events-none">
|
||||
<div class="mb-12">
|
||||
<span class="text-xl font-black tracking-tighter text-[#E5E2E1]">VAULT_SECURE</span>
|
||||
</div>
|
||||
<nav class="space-y-2">
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-orange-500 font-bold border-r-2 border-orange-600 bg-orange-900/10">
|
||||
<span class="material-symbols-outlined">lock</span>
|
||||
<span class="font-['Inter'] font-medium text-sm tracking-tight">Vault</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-[#DEC0B4]/60">
|
||||
<span class="material-symbols-outlined">verified_user</span>
|
||||
<span class="font-['Inter'] font-medium text-sm tracking-tight">Security Shield</span>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Main Content Placeholder -->
|
||||
<main class="ml-64 w-full p-12 opacity-10 pointer-events-none">
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<div class="col-span-8 bg-surface-container h-64 rounded-lg"></div>
|
||||
<div class="col-span-4 bg-surface-container h-64 rounded-lg"></div>
|
||||
<div class="col-span-12 bg-surface-container-low h-96 rounded-lg"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Spotlight Overlay Shell -->
|
||||
<div class="fixed inset-0 z-50 flex items-start justify-center pt-[132px] bg-[#0A0A0A]/40 backdrop-blur-md">
|
||||
<!-- Monolithic Spotlight Window -->
|
||||
<div class="w-full max-w-2xl bg-surface-container-lowest rounded-xl shadow-2xl overflow-hidden ghost-border animate-in fade-in zoom-in duration-300">
|
||||
<!-- Header/Search Bar -->
|
||||
<div class="flex items-center px-6 py-5 bg-surface-container-lowest border-b border-outline-variant/10">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-4">search</span>
|
||||
<input autofocus="" class="w-full bg-transparent border-none focus:ring-0 text-xl font-headline placeholder:text-on-surface-variant/40 text-on-surface" placeholder="Start typing..." type="text"/>
|
||||
<div class="flex items-center gap-1.5 ml-4">
|
||||
<span class="px-1.5 py-0.5 rounded bg-surface-container-highest text-[10px] font-label text-on-surface-variant border border-outline-variant/20">ESC</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Suggestion List -->
|
||||
<div class="p-2">
|
||||
<div class="px-4 py-2">
|
||||
<h3 class="text-[10px] font-label uppercase tracking-widest text-on-surface-variant/50">Actions</h3>
|
||||
</div>
|
||||
<div class="space-y-0.5">
|
||||
<!-- Action: Add account -->
|
||||
<div class="flex items-center justify-between px-4 py-3 bg-primary-container/10 group cursor-pointer border-l-2 border-primary-container">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-8 h-8 flex items-center justify-center bg-primary-container text-on-primary-container rounded-sm">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill" style="font-variation-settings: 'FILL' 1;">person_add</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-on-surface">Add account</p>
|
||||
<p class="text-xs font-label text-on-surface-variant/60">Initialize a new profile within the system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-label text-primary opacity-0 group-hover:opacity-100 transition-opacity">Press Enter</span>
|
||||
<span class="material-symbols-outlined text-sm text-primary">keyboard_return</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action: Access Vault Data -->
|
||||
<div class="flex items-center justify-between px-4 py-3 hover:bg-surface-container-highest/50 group cursor-pointer transition-colors duration-150 border-l-2 border-transparent">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-8 h-8 flex items-center justify-center bg-surface-container-highest text-on-surface-variant rounded-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">database</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-on-surface">Access Vault Data</p>
|
||||
<p class="text-xs font-label text-on-surface-variant/60">Query the encrypted storage nodes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-sm text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action: Recovery Code -->
|
||||
<div class="flex items-center justify-between px-4 py-3 hover:bg-surface-container-highest/50 group cursor-pointer transition-colors duration-150 border-l-2 border-transparent">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-8 h-8 flex items-center justify-center bg-surface-container-highest text-on-surface-variant rounded-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">shield_moon</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-on-surface">Recovery Code</p>
|
||||
<p class="text-xs font-label text-on-surface-variant/60">Backup phrase or 2FA seed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-sm text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section: Advanced -->
|
||||
<div class="px-4 py-2 mt-2">
|
||||
<h3 class="text-[10px] font-label uppercase tracking-widest text-on-surface-variant/50">Search Engine</h3>
|
||||
</div>
|
||||
<div class="px-2 pb-2">
|
||||
<div class="flex items-center gap-3 px-4 py-3 hover:bg-surface-container-highest/30 rounded cursor-pointer transition-all duration-200">
|
||||
<span class="material-symbols-outlined text-on-surface-variant/40">history</span>
|
||||
<span class="text-sm text-on-surface-variant">Search in activity log...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Meta -->
|
||||
<div class="px-6 py-3 bg-surface-container border-t border-outline-variant/10 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">keyboard_arrow_up</span>
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">keyboard_arrow_down</span>
|
||||
<span class="text-[10px] font-label text-on-surface-variant">Navigate</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-xs text-on-surface-variant">keyboard_return</span>
|
||||
<span class="text-[10px] font-label text-on-surface-variant">Select</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
|
||||
<span class="text-[10px] font-label text-on-surface-variant">SECURE_TUNNEL_ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Polish: Grain Overlay -->
|
||||
<div class="fixed inset-0 pointer-events-none opacity-[0.03] z-[100]" data-alt="Subtle noise texture for cinematic UI finish" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAbfbfnVqdPzvsgoJIgZ55zFdozHNw52My4wLiSZfshpua5KaAtfDNsNyVJUd2OqMPubD3XTXnd4QKMGHL0shcM099MqtqUd4TVLoC_cKEr6_alJ1OHvwtHTtQGfzBB53yIH_uBiuGOT95b9VYp7NtpnV1yPiPOCxbEk9r2fmoToy-uTsYLPbwlB0wPkCTkha9Abfl3bsYRgQub7h2nHqBzb2mz5FUm1VDe7xAb7eG2nswCmh3l7HG8nVAdde72qPeGTZcMiq2YyKH8');">
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user