mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
422 lines
22 KiB
HTML
422 lines
22 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>ThirdEye | Knowledge Graph Mission Control</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;700&family=Space+Grotesk:wght@400;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"/>
|
|
<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: {
|
|
"surface-container-high": "#1f1f24",
|
|
"secondary-fixed": "#e8ddff",
|
|
"on-secondary-fixed": "#472894",
|
|
"secondary-dim": "#a88cfb",
|
|
"on-secondary-container": "#c7b4ff",
|
|
"primary": "#00daf3",
|
|
"primary-dim": "#00cbe2",
|
|
"on-secondary": "#260069",
|
|
"on-primary-fixed-variant": "#006571",
|
|
"background": "#09090B",
|
|
"surface-container": "#19191d",
|
|
"on-primary": "#004750",
|
|
"surface": "#0e0e10",
|
|
"secondary-container": "#432390",
|
|
"inverse-on-surface": "#565457",
|
|
"error": "#ee7d77",
|
|
"on-error": "#490106",
|
|
"error-dim": "#bb5551",
|
|
"on-surface": "#e7e4ec",
|
|
"outline": "#75757c",
|
|
"surface-container-low": "#131316",
|
|
"surface-container-highest": "#25252b",
|
|
"surface-dim": "#0e0e10",
|
|
"surface-variant": "#25252b",
|
|
"surface-container-lowest": "#000000",
|
|
"primary-fixed": "#9cf0ff",
|
|
"on-primary-container": "#00e5ff",
|
|
"tertiary": "#ff6f78",
|
|
"secondary": "#a88cfb",
|
|
"on-surface-variant": "#acaab1",
|
|
"outline-variant": "#47474e",
|
|
"tertiary-dim": "#ff6f78",
|
|
"primary-fixed-dim": "#49e7ff",
|
|
"tertiary-fixed": "#fe3c56",
|
|
"surface-tint": "#00daf3",
|
|
"on-secondary-fixed-variant": "#6448b2",
|
|
"on-tertiary": "#49000d",
|
|
"inverse-surface": "#fcf8fb",
|
|
"on-tertiary-fixed-variant": "#2c0005",
|
|
"on-tertiary-container": "#000000",
|
|
"surface-bright": "#2b2c32",
|
|
"primary-container": "#004f58",
|
|
"on-primary-fixed": "#00464f",
|
|
"tertiary-fixed-dim": "#eb2d4b",
|
|
"error-container": "#7f2927",
|
|
"tertiary-container": "#fe3c56",
|
|
"on-error-container": "#ff9993",
|
|
"secondary-fixed-dim": "#dbcdff",
|
|
"on-background": "#e7e4ec",
|
|
"inverse-primary": "#006976",
|
|
"on-tertiary-fixed": "#000000"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Space Grotesk"],
|
|
"mono": ["JetBrains Mono"],
|
|
"poppins": ["Poppins"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { background-color: #09090B; color: #F4F4F5; font-family: 'Poppins', sans-serif; overflow: hidden; }
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
.glass-card { background: rgba(25, 25, 29, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(167, 139, 250, 0.2); }
|
|
.neon-glow-violet { box-shadow: 0 0 15px rgba(167, 139, 250, 0.15); }
|
|
.neon-border { border: 1px solid rgba(167, 139, 250, 0.4); }
|
|
.node-pulse { animation: pulse 3s infinite; }
|
|
@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
|
|
.grid-bg { background-image: radial-gradient(circle at 2px 2px, rgba(167, 139, 250, 0.05) 1px, transparent 0); background-size: 40px 40px; }
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen w-full select-none">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full flex flex-col pt-20 pb-6 z-40 bg-zinc-900/60 backdrop-blur-2xl docked left-0 h-screen w-64 border-r border-violet-500/20 shadow-[4px_0_15px_-3px_rgba(167,139,250,0.2)]">
|
|
<div class="px-6 mb-8">
|
|
<h1 class="text-violet-400 font-['Poppins'] font-medium text-xs uppercase tracking-widest mb-1">ThirdEye</h1>
|
|
<p class="text-zinc-500 text-[10px] font-mono tracking-tighter">v2.0.4-Stable</p>
|
|
</div>
|
|
<nav class="flex-1 px-4 space-y-2">
|
|
<a class="flex items-center px-4 py-3 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/40 hover:translate-x-1 transition-all duration-200 rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="dashboard">dashboard</span>
|
|
<span class="font-['Poppins'] font-medium text-xs uppercase tracking-widest">Overview</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/40 hover:translate-x-1 transition-all duration-200 rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="psychology">psychology</span>
|
|
<span class="font-['Poppins'] font-medium text-xs uppercase tracking-widest">Intelligence</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/40 hover:translate-x-1 transition-all duration-200 rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="smart_toy">smart_toy</span>
|
|
<span class="font-['Poppins'] font-medium text-xs uppercase tracking-widest">Agents</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 bg-gradient-to-r from-violet-600/20 to-transparent text-violet-400 border-l-2 border-violet-500 shadow-[4px_0_15px_-3px_rgba(167,139,250,0.2)] rounded-r-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="hub">hub</span>
|
|
<span class="font-['Poppins'] font-medium text-xs uppercase tracking-widest">Knowledge Graph</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-3 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/40 hover:translate-x-1 transition-all duration-200 rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="list_alt">list_alt</span>
|
|
<span class="font-['Poppins'] font-medium text-xs uppercase tracking-widest">Logs</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-4 mt-auto space-y-1">
|
|
<a class="flex items-center px-4 py-2 text-zinc-500 hover:text-zinc-300 text-xs uppercase tracking-widest transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="flex items-center px-4 py-2 text-zinc-500 hover:text-zinc-300 text-xs uppercase tracking-widest transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3 text-lg" data-icon="help_outline">help_outline</span>
|
|
<span>Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-zinc-950/80 backdrop-blur-xl border-b border-violet-500/20 shadow-[0_8px_32px_0_rgba(0,0,0,0.8)]">
|
|
<div class="flex items-center gap-8 ml-64">
|
|
<div class="text-2xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-500 drop-shadow-[0_0_8px_rgba(167,139,250,0.4)]">
|
|
ThirdEye
|
|
</div>
|
|
<div class="relative hidden lg:block">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">search</span>
|
|
<input class="bg-zinc-900/50 border-none text-[10px] font-mono tracking-widest pl-10 pr-4 py-1.5 rounded w-64 focus:ring-1 focus:ring-violet-500/50 placeholder:text-zinc-600" placeholder="QUERY ENTITIES..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-1 border-r border-zinc-800 pr-4 mr-2">
|
|
<button class="p-2 text-zinc-500 hover:text-violet-400 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="sensors">sensors</span>
|
|
</button>
|
|
<button class="p-2 text-zinc-500 hover:text-violet-400 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
|
</button>
|
|
<button class="p-2 text-zinc-500 hover:text-violet-400 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications_active">notifications_active</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="text-[10px] font-bold text-zinc-300 leading-none">AGENT_EX_01</p>
|
|
<p class="text-[8px] font-mono text-violet-500">LEVEL 4 CLEARANCE</p>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full border border-violet-500/30 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="Cyberpunk style user profile portrait" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC4Z3xbGxBZXHtHekO0rGZX56R5pVubVjy_GxLWGP4GNlS1NpoJuMXR5D5gv-3MavedzYERCWPMw9fWiS1J-Szb-Sqnrp65rcJ4kFIJNJ0xsKMHqfxW2hgkX05_U3M3E3_ubWnPkRcGrjWxqgInAzMRwQbb9i8jMdbbasF9sPjSaTJv2Ie6VQ-B_QC2E9aMLY8Aouy_rUl8AC14pcTlJmjycDDewtToHzBUH4KoqeMNP7MYuLHpJjQFZGIGHPAuy59WgD6nL_ASsl8y"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-16 flex-1 relative overflow-hidden grid-bg">
|
|
<!-- Interactive 3D Network Map Visualization -->
|
|
<div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none">
|
|
<!-- Simulated Connections (SVG) -->
|
|
<svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none">
|
|
<defs>
|
|
<lineargradient id="edge-grad" x1="0%" x2="100%" y1="0%" y2="0%">
|
|
<stop offset="0%" stop-color="#A78BFA" stop-opacity="0"></stop>
|
|
<stop offset="50%" stop-color="#A78BFA" stop-opacity="0.8"></stop>
|
|
<stop offset="100%" stop-color="#A78BFA" stop-opacity="0"></stop>
|
|
</lineargradient>
|
|
</defs>
|
|
<line stroke="url(#edge-grad)" stroke-width="1.5" x1="40%" x2="60%" y1="30%" y2="50%"></line>
|
|
<line stroke="url(#edge-grad)" stroke-width="1.5" x1="60%" x2="45%" y1="50%" y2="70%"></line>
|
|
<line stroke="url(#edge-grad)" stroke-width="1.5" x1="60%" x2="75%" y1="50%" y2="35%"></line>
|
|
<line stroke="url(#edge-grad)" stroke-dasharray="4 4" stroke-width="1" x1="20%" x2="40%" y1="45%" y2="30%"></line>
|
|
<line stroke="url(#edge-grad)" stroke-width="1" x1="75%" x2="85%" y1="35%" y2="60%"></line>
|
|
</svg>
|
|
<!-- Node: Central AI -->
|
|
<div class="absolute left-[58%] top-[48%] pointer-events-auto cursor-pointer group">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-violet-500 rounded-full blur-xl opacity-40 group-hover:opacity-70 transition-opacity"></div>
|
|
<div class="relative w-12 h-12 glass-card rounded-xl neon-border flex items-center justify-center rotate-45 group-hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined text-violet-400 -rotate-45" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</div>
|
|
<!-- Hover Tooltip -->
|
|
<div class="absolute top-full left-1/2 -translate-x-1/2 mt-4 opacity-0 group-hover:opacity-100 transition-opacity z-10 w-48 pointer-events-none">
|
|
<div class="glass-card neon-border p-3 rounded-lg shadow-2xl">
|
|
<p class="text-[10px] font-mono text-violet-400 mb-1">NODE::CORE_AI</p>
|
|
<p class="text-xs font-bold text-zinc-200">ThirdEye Neural Engine</p>
|
|
<div class="h-[1px] bg-violet-500/20 my-2"></div>
|
|
<p class="text-[9px] font-mono text-zinc-500">UPTIME: 99.998%</p>
|
|
<p class="text-[9px] font-mono text-zinc-500">LOAD: 12.4 TFLOPs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Node: Analyst -->
|
|
<div class="absolute left-[38%] top-[28%] pointer-events-auto cursor-pointer group">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-violet-500/20 rounded-full blur-lg"></div>
|
|
<div class="relative w-10 h-10 glass-card rounded-full neon-border flex items-center justify-center group-hover:border-violet-400 transition-colors">
|
|
<span class="material-symbols-outlined text-violet-400 text-lg" data-icon="person">person</span>
|
|
</div>
|
|
<p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[9px] font-mono text-zinc-500 uppercase tracking-tighter group-hover:text-violet-400">Analyst_Beta</p>
|
|
</div>
|
|
</div>
|
|
<!-- Node: Database -->
|
|
<div class="absolute left-[43%] top-[68%] pointer-events-auto cursor-pointer group">
|
|
<div class="relative">
|
|
<div class="relative w-10 h-10 glass-card rounded-full neon-border flex items-center justify-center group-hover:scale-105 transition-all">
|
|
<span class="material-symbols-outlined text-violet-400 text-lg" data-icon="database">database</span>
|
|
</div>
|
|
<p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[9px] font-mono text-zinc-500 uppercase tracking-tighter group-hover:text-violet-400">Knowledge_Store</p>
|
|
</div>
|
|
</div>
|
|
<!-- Node: Satellite -->
|
|
<div class="absolute left-[73%] top-[33%] pointer-events-auto cursor-pointer group">
|
|
<div class="relative">
|
|
<div class="relative w-10 h-10 glass-card rounded-full neon-border flex items-center justify-center group-hover:rotate-12 transition-all">
|
|
<span class="material-symbols-outlined text-violet-400 text-lg" data-icon="radar">radar</span>
|
|
</div>
|
|
<p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[9px] font-mono text-zinc-500 uppercase tracking-tighter">Signal_Inbound</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating Controls (Left) -->
|
|
<div class="absolute bottom-10 left-10 space-y-4 w-64 z-20">
|
|
<!-- Graph Controls -->
|
|
<div class="glass-card neon-border rounded-xl p-4 shadow-2xl">
|
|
<h3 class="text-[10px] font-mono tracking-widest text-violet-400 mb-3 uppercase">Graph Controls</h3>
|
|
<div class="grid grid-cols-4 gap-2 mb-4">
|
|
<button class="aspect-square glass-card flex items-center justify-center hover:bg-violet-500/20 transition-colors text-zinc-400 hover:text-violet-300">
|
|
<span class="material-symbols-outlined" data-icon="zoom_in">zoom_in</span>
|
|
</button>
|
|
<button class="aspect-square glass-card flex items-center justify-center hover:bg-violet-500/20 transition-colors text-zinc-400 hover:text-violet-300">
|
|
<span class="material-symbols-outlined" data-icon="zoom_out">zoom_out</span>
|
|
</button>
|
|
<button class="aspect-square glass-card flex items-center justify-center hover:bg-violet-500/20 transition-colors text-zinc-400 hover:text-violet-300">
|
|
<span class="material-symbols-outlined" data-icon="center_focus_weak">center_focus_weak</span>
|
|
</button>
|
|
<button class="aspect-square glass-card flex items-center justify-center hover:bg-violet-500/20 transition-colors text-zinc-400 hover:text-violet-300">
|
|
<span class="material-symbols-outlined" data-icon="refresh">refresh</span>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex justify-between text-[9px] font-mono text-zinc-500 uppercase">
|
|
<span>Connection Force</span>
|
|
<span class="text-violet-400">0.82</span>
|
|
</div>
|
|
<div class="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
|
|
<div class="h-full w-[82%] bg-violet-500"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex justify-between text-[9px] font-mono text-zinc-500 uppercase">
|
|
<span>Cluster Density</span>
|
|
<span class="text-violet-400">0.45</span>
|
|
</div>
|
|
<div class="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
|
|
<div class="h-full w-[45%] bg-violet-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Global Activity Ticker -->
|
|
<div class="glass-card neon-border rounded-xl p-3 shadow-2xl bg-zinc-950/40">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-violet-500 node-pulse"></span>
|
|
<span class="text-[10px] font-mono text-violet-400 tracking-wider">LIVE_FEED</span>
|
|
</div>
|
|
<div class="space-y-1 overflow-hidden h-16">
|
|
<p class="text-[9px] font-mono text-zinc-500"><span class="text-zinc-600">[14:22:01]</span> NODE_ATTACH: USER_772</p>
|
|
<p class="text-[9px] font-mono text-zinc-500"><span class="text-zinc-600">[14:21:55]</span> EDGE_UPDATE: DB_PRIMARY_SYNC</p>
|
|
<p class="text-[9px] font-mono text-zinc-500"><span class="text-zinc-600">[14:21:30]</span> SIGNAL_LOCKED: SAT_4_POS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Entity Insights Panel (Right) -->
|
|
<div class="absolute right-0 top-0 bottom-0 w-80 z-20 p-6">
|
|
<div class="h-full glass-card neon-border rounded-2xl flex flex-col shadow-[-20px_0_40px_rgba(0,0,0,0.6)]">
|
|
<div class="p-6 border-b border-violet-500/10">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="text-[10px] font-mono bg-violet-500/10 text-violet-400 px-2 py-0.5 rounded border border-violet-500/20">SELECTED_NODE</span>
|
|
<span class="material-symbols-outlined text-zinc-500 text-lg cursor-pointer hover:text-white">close</span>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-zinc-100 tracking-tight leading-none mb-1">ThirdEye Core AI</h2>
|
|
<p class="text-xs text-violet-500 font-mono">ID: LL-ALPHA-01-V2</p>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-6">
|
|
<!-- Data Metrics Section -->
|
|
<div>
|
|
<h4 class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-3">Primary Insights</h4>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="p-3 bg-zinc-900/50 rounded-lg border border-zinc-800">
|
|
<p class="text-[9px] font-mono text-zinc-500 mb-1 uppercase">Reliability</p>
|
|
<p class="text-lg font-mono text-violet-400 font-bold">99.8%</p>
|
|
</div>
|
|
<div class="p-3 bg-zinc-900/50 rounded-lg border border-zinc-800">
|
|
<p class="text-[9px] font-mono text-zinc-500 mb-1 uppercase">Connections</p>
|
|
<p class="text-lg font-mono text-violet-400 font-bold">1,204</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Technical Deep Dive -->
|
|
<div>
|
|
<h4 class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-3">Logic Distribution</h4>
|
|
<div class="space-y-3">
|
|
<div class="space-y-1">
|
|
<div class="flex justify-between text-[10px] font-mono">
|
|
<span class="text-zinc-400">Pattern Recognition</span>
|
|
<span class="text-zinc-200">88%</span>
|
|
</div>
|
|
<div class="h-1 bg-zinc-800 rounded-full">
|
|
<div class="h-full w-[88%] bg-violet-600 shadow-[0_0_8px_rgba(167,139,250,0.4)]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex justify-between text-[10px] font-mono">
|
|
<span class="text-zinc-400">Anomaly Detection</span>
|
|
<span class="text-zinc-200">64%</span>
|
|
</div>
|
|
<div class="h-1 bg-zinc-800 rounded-full">
|
|
<div class="h-full w-[64%] bg-violet-600 shadow-[0_0_8px_rgba(167,139,250,0.4)]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex justify-between text-[10px] font-mono">
|
|
<span class="text-zinc-400">Natural Language</span>
|
|
<span class="text-zinc-200">92%</span>
|
|
</div>
|
|
<div class="h-1 bg-zinc-800 rounded-full">
|
|
<div class="h-full w-[92%] bg-violet-600 shadow-[0_0_8px_rgba(167,139,250,0.4)]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Associated Entities -->
|
|
<div>
|
|
<h4 class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-3">Network Neighbors</h4>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between p-2 rounded hover:bg-violet-500/10 transition-colors group cursor-pointer">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-zinc-900 flex items-center justify-center border border-zinc-800 group-hover:border-violet-500/50">
|
|
<span class="material-symbols-outlined text-sm text-zinc-500 group-hover:text-violet-400" data-icon="database">database</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-zinc-200">Main_Storage</p>
|
|
<p class="text-[9px] font-mono text-zinc-500 uppercase">Strong Link</p>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-sm text-zinc-700" data-icon="chevron_right">chevron_right</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2 rounded hover:bg-violet-500/10 transition-colors group cursor-pointer">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-zinc-900 flex items-center justify-center border border-zinc-800 group-hover:border-violet-500/50">
|
|
<span class="material-symbols-outlined text-sm text-zinc-500 group-hover:text-violet-400" data-icon="cloud_sync">cloud_sync</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-zinc-200">External_Gateway</p>
|
|
<p class="text-[9px] font-mono text-zinc-500 uppercase">Latency 12ms</p>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-sm text-zinc-700" data-icon="chevron_right">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 mt-auto">
|
|
<button class="w-full bg-transparent border border-violet-500 text-violet-400 font-mono text-[10px] tracking-widest py-3 rounded-lg hover:bg-violet-500/10 transition-all uppercase flex items-center justify-center gap-2 group">
|
|
Execute Deep Trace
|
|
<span class="material-symbols-outlined text-sm group-hover:translate-x-1 transition-transform">bolt</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Crosshair Cursor Elements (Visual Only) -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 pointer-events-none opacity-20">
|
|
<div class="absolute top-1/2 left-0 w-full h-[1px] bg-violet-400/50"></div>
|
|
<div class="absolute left-1/2 top-0 h-full w-[1px] bg-violet-400/50"></div>
|
|
<div class="absolute inset-0 border border-violet-400/30 rounded-full scale-50"></div>
|
|
<div class="absolute inset-0 border border-violet-400/10 rounded-full scale-100"></div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Status Ticker -->
|
|
<footer class="fixed bottom-0 left-64 right-0 h-8 bg-zinc-950/80 backdrop-blur-md border-t border-violet-500/10 flex items-center px-4 z-50">
|
|
<div class="flex items-center gap-4 w-full">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[9px] font-mono text-violet-500 font-bold">SYSTEM_STATUS:</span>
|
|
<span class="text-[9px] font-mono text-emerald-500">OPERATIONAL</span>
|
|
</div>
|
|
<div class="h-3 w-[1px] bg-zinc-800"></div>
|
|
<div class="flex-1 overflow-hidden">
|
|
<div class="text-[9px] font-mono text-zinc-600 whitespace-nowrap animate-marquee">
|
|
LOG_STREAM: [10:45:00] Initializing graph rendering engine... [10:45:01] Loading 12,403 entity nodes... [10:45:02] Resolving 88,402 edge relationships... [10:45:03] Encryption layer active (AES-256)... [10:45:04] Ready for interaction.
|
|
</div>
|
|
</div>
|
|
<div class="h-3 w-[1px] bg-zinc-800"></div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[9px] font-mono text-zinc-500">LATENCY:</span>
|
|
<span class="text-[9px] font-mono text-violet-400">4ms</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<style>
|
|
@keyframes marquee {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
.animate-marquee {
|
|
display: inline-block;
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
</style>
|
|
</body></html> |