310 lines
16 KiB
HTML
310 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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary-container": "#2563eb",
|
|
"surface-container": "#1c1f2c",
|
|
"surface-container-lowest": "#0b0d1a",
|
|
"secondary-fixed-dim": "#d2bbff",
|
|
"primary-fixed": "#dbe1ff",
|
|
"primary": "#b4c5ff",
|
|
"on-error-container": "#ffdad6",
|
|
"outline-variant": "#434655",
|
|
"surface-container-high": "#272937",
|
|
"on-tertiary-fixed": "#181b24",
|
|
"on-primary": "#002a78",
|
|
"surface-container-low": "#181b28",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"on-secondary-fixed-variant": "#5a00c6",
|
|
"on-secondary-fixed": "#25005a",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"surface-bright": "#363847",
|
|
"inverse-primary": "#0053db",
|
|
"outline": "#8d90a0",
|
|
"on-secondary-container": "#c9aeff",
|
|
"surface": "#10131f",
|
|
"surface-tint": "#b4c5ff",
|
|
"surface-dim": "#10131f",
|
|
"on-error": "#690005",
|
|
"error-container": "#93000a",
|
|
"secondary-fixed": "#eaddff",
|
|
"surface-variant": "#323442",
|
|
"on-surface": "#e0e1f4",
|
|
"on-background": "#e0e1f4",
|
|
"secondary": "#d2bbff",
|
|
"inverse-surface": "#e0e1f4",
|
|
"surface-container-highest": "#323442",
|
|
"on-secondary": "#3f008e",
|
|
"on-primary-container": "#eeefff",
|
|
"tertiary-fixed-dim": "#c4c6d2",
|
|
"tertiary-fixed": "#e0e2ee",
|
|
"secondary-container": "#6001d1",
|
|
"inverse-on-surface": "#2d303e",
|
|
"tertiary": "#c4c6d2",
|
|
"on-tertiary-fixed-variant": "#444650",
|
|
"on-tertiary": "#2d3039",
|
|
"on-primary-fixed": "#00174b",
|
|
"tertiary-container": "#6a6d78",
|
|
"on-tertiary-container": "#eef0fc",
|
|
"error": "#ffb4ab",
|
|
"on-surface-variant": "#c3c6d7",
|
|
"background": "#10131f"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
background-color: #10131f;
|
|
color: #e0e1f4;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
|
.glass-panel {
|
|
background: rgba(28, 31, 44, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 w-full z-50 h-16 bg-[#10131f] bg-opacity-90 backdrop-blur-xl flex items-center justify-between px-6 shadow-2xl shadow-black/50 font-['Inter'] antialiased tracking-tight">
|
|
<div class="flex items-center gap-8 w-full max-w-7xl mx-auto">
|
|
<!-- Brand -->
|
|
<div class="text-xl font-bold tracking-tighter text-slate-100 shrink-0">
|
|
The Digital Atelier
|
|
</div>
|
|
<!-- Search Bar (on_left) -->
|
|
<div class="relative max-w-md w-full ml-4">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">search</span>
|
|
<input class="w-full bg-white/5 border-none rounded-full py-2 pl-10 pr-4 text-sm text-slate-200 focus:ring-2 focus:ring-blue-600 transition-all placeholder:text-slate-500" placeholder="Search the vault..." type="text"/>
|
|
</div>
|
|
<!-- Centered Stats -->
|
|
<div class="hidden lg:flex items-center gap-6 mx-auto">
|
|
<div class="flex flex-col items-center">
|
|
<span class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Games</span>
|
|
<span class="text-blue-500 font-bold">12,482</span>
|
|
</div>
|
|
<div class="w-px h-6 bg-white/10"></div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Storage</span>
|
|
<span class="text-blue-500 font-bold">4.2 TB</span>
|
|
</div>
|
|
</div>
|
|
<!-- Trailing Icons -->
|
|
<div class="flex items-center gap-4 shrink-0">
|
|
<button class="p-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-full transition-all duration-200 active:scale-95 cursor-pointer">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="p-2 text-blue-500 font-semibold hover:bg-white/5 rounded-full transition-all duration-200 active:scale-95 cursor-pointer">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 p-[1px] cursor-pointer">
|
|
<img alt="User profile" class="w-full h-full rounded-full object-cover" data-alt="Close up of a professional male user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfAtckX2He7yTMWIUG51cWyX7GKRwshh3bKOee22jc3QzbdJC3fx8P3sJ82Jb7qA6YmxFeMPKy2Ej82Lw1Y8HBRrEAJQl7TafEV-Avp0SblYlSfrIGczUawU4ArCXZ7X2dl4Auk0fHxsmVLNCj1BZKGO_JMIThDgLGF4EPpl64PdTNF0P5UAk-thHYvZ0xJ5sOK-sbfUO_HLhu100AKc4Py-DZAXMUSqrm9ozK2yO2xErKKqkOZC_m6_iyED4mk5rtRb4vaZ07TEg"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full w-64 z-[60] bg-[#181b28] shadow-[10px_0_30px_rgba(0,0,0,0.3)] flex flex-col p-4 gap-y-4 font-['Inter'] text-sm font-medium uppercase tracking-widest hidden md:flex">
|
|
<div class="mt-4 mb-8 px-4">
|
|
<div class="text-lg font-black bg-gradient-to-br from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
The Vault
|
|
</div>
|
|
<div class="text-[10px] text-slate-500 font-bold -mt-1">Digital Preservation</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-2">
|
|
<a class="flex items-center gap-3 text-slate-500 hover:text-slate-200 px-4 py-3 hover:bg-white/5 rounded-full transition-all hover:translate-x-1 duration-300" href="#">
|
|
<span class="material-symbols-outlined">home</span>
|
|
<span>Home</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-slate-500 hover:text-slate-200 px-4 py-3 hover:bg-white/5 rounded-full transition-all hover:translate-x-1 duration-300" href="#">
|
|
<span class="material-symbols-outlined">grid_view</span>
|
|
<span>Platforms</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-slate-500 hover:text-slate-200 px-4 py-3 hover:bg-white/5 rounded-full transition-all hover:translate-x-1 duration-300" href="#">
|
|
<span class="material-symbols-outlined">library_books</span>
|
|
<span>Collections</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-slate-500 hover:text-slate-200 px-4 py-3 hover:bg-white/5 rounded-full transition-all hover:translate-x-1 duration-300" href="#">
|
|
<span class="material-symbols-outlined">videogame_asset</span>
|
|
<span>Console</span>
|
|
</a>
|
|
</nav>
|
|
<div class="pt-4 border-t border-white/5 space-y-2">
|
|
<a class="flex items-center gap-3 bg-white/10 backdrop-blur-md text-blue-400 rounded-full shadow-[0_0_15px_rgba(37,99,235,0.2)] px-4 py-3" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-slate-500 hover:text-slate-200 px-4 py-3 hover:bg-white/5 rounded-full transition-all hover:translate-x-1 duration-300" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span>Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="md:ml-64 pt-24 px-8 pb-12">
|
|
<div class="max-w-5xl mx-auto">
|
|
<!-- Page Header -->
|
|
<header class="mb-10">
|
|
<h1 class="text-4xl font-extrabold tracking-tight text-on-surface mb-2">Vault Console</h1>
|
|
<p class="text-on-surface-variant font-medium">Configure your library experience and server connections.</p>
|
|
</header>
|
|
<!-- Horizontal Tab Bar -->
|
|
<div class="flex items-center gap-2 mb-10 overflow-x-auto hide-scrollbar bg-surface-container-low p-1.5 rounded-full w-fit">
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:text-on-surface transition-all">Profile</button>
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold bg-primary-container text-on-primary-container shadow-lg shadow-primary-container/20 transition-all">User Interface</button>
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:text-on-surface transition-all">Library Management</button>
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:text-on-surface transition-all">Metadata Sources</button>
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:text-on-surface transition-all">Administration</button>
|
|
<button class="px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:text-on-surface transition-all whitespace-nowrap">Server Stats</button>
|
|
</div>
|
|
<!-- Settings Content Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
<!-- Left Column: Visual Identity -->
|
|
<section class="lg:col-span-7 space-y-6">
|
|
<div class="bg-surface-container-high rounded-lg p-8 shadow-xl">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">palette</span>
|
|
<h2 class="text-xl font-bold tracking-tight text-on-surface">Visual Identity</h2>
|
|
</div>
|
|
<div class="space-y-8">
|
|
<!-- Toggle: Dark Mode -->
|
|
<div class="flex items-center justify-between group">
|
|
<div>
|
|
<p class="font-bold text-on-surface">Enable Dark Mode</p>
|
|
<p class="text-sm text-on-surface-variant">Switch between obsidian and slate themes.</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-12 h-6 bg-surface-bright rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
</label>
|
|
</div>
|
|
<!-- Toggle: Notifications -->
|
|
<div class="flex items-center justify-between group">
|
|
<div>
|
|
<p class="font-bold text-on-surface">Show Notifications</p>
|
|
<p class="text-sm text-on-surface-variant">Get alerts for scan completions and updates.</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-12 h-6 bg-surface-bright rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
</label>
|
|
</div>
|
|
<!-- Toggle: Glassmorphism -->
|
|
<div class="flex items-center justify-between group">
|
|
<div>
|
|
<p class="font-bold text-on-surface">Glassmorphism Effects</p>
|
|
<p class="text-sm text-on-surface-variant">Enable translucent blurs and layered depth.</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-12 h-6 bg-surface-bright rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Layout Preview Card (Editorial Touch) -->
|
|
<div class="bg-gradient-to-br from-primary-container/20 to-secondary-container/20 rounded-lg p-8 border border-white/5 relative overflow-hidden group">
|
|
<div class="relative z-10">
|
|
<h3 class="text-lg font-bold text-white mb-2">Interface Preview</h3>
|
|
<p class="text-sm text-blue-200/70 mb-6">Current: Ultra-Modern / Editorial</p>
|
|
<div class="flex gap-2">
|
|
<div class="w-12 h-2 bg-white/20 rounded-full"></div>
|
|
<div class="w-24 h-2 bg-white/40 rounded-full"></div>
|
|
<div class="w-8 h-2 bg-white/20 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-9xl text-white/5 rotate-12 transition-transform group-hover:rotate-0 duration-700">dashboard_customize</span>
|
|
</div>
|
|
</section>
|
|
<!-- Right Column: Connection & API -->
|
|
<section class="lg:col-span-5">
|
|
<div class="bg-surface-container-high rounded-lg p-8 shadow-xl h-full border border-white/5">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">cloud_sync</span>
|
|
<h2 class="text-xl font-bold tracking-tight text-on-surface">Connection & API</h2>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<!-- Input: Server Address -->
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2 ml-1">Server Address</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-md px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary transition-all font-mono text-sm" type="text" value="romm.vault-local.io"/>
|
|
</div>
|
|
</div>
|
|
<!-- Input: API Port -->
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2 ml-1">API Port</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-md px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary transition-all font-mono text-sm" type="text" value="8080"/>
|
|
</div>
|
|
</div>
|
|
<!-- Input: IGDB Master API Key -->
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2 ml-1">IGDB Master API Key</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface-container-highest border-none rounded-md px-4 py-3 text-on-surface focus:ring-2 focus:ring-primary transition-all font-mono text-sm" type="password" value="••••••••••••••••"/>
|
|
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-[10px] text-on-surface-variant/60 italic leading-relaxed">Required for fetching high-resolution box art and historical metadata.</p>
|
|
</div>
|
|
<!-- Action Buttons -->
|
|
<div class="pt-6 flex flex-col gap-3">
|
|
<button class="w-full bg-gradient-to-br from-primary-container to-secondary-container text-white py-3 rounded-xl font-bold text-sm shadow-lg shadow-primary-container/30 hover:shadow-primary-container/50 transition-all active:scale-[0.98]">
|
|
Save Connections
|
|
</button>
|
|
<button class="w-full bg-white/5 text-on-surface-variant py-3 rounded-xl font-bold text-sm hover:bg-white/10 transition-all">
|
|
Test Latency
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Footer Section: System Status -->
|
|
<footer class="mt-12 flex flex-col md:flex-row items-center justify-between gap-6 p-8 bg-surface-container-low rounded-lg border border-white/5">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-3 h-3 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]"></div>
|
|
<div>
|
|
<p class="text-sm font-bold text-on-surface">System Status: Optimal</p>
|
|
<p class="text-xs text-on-surface-variant">Last library scan: 42 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="text-center">
|
|
<p class="text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-1">Cores</p>
|
|
<p class="text-lg font-black text-on-surface">16</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-1">Latency</p>
|
|
<p class="text-lg font-black text-on-surface">12ms</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</body></html> |