mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
440 lines
22 KiB
HTML
440 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 | Agent Operations</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&family=Poppins:wght@300;400;600&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: {
|
|
"tertiary": "#ff6f78",
|
|
"surface-container-high": "#1f1f24",
|
|
"secondary-dim": "#a88cfb",
|
|
"on-background": "#e7e4ec",
|
|
"error-dim": "#bb5551",
|
|
"secondary-fixed-dim": "#dbcdff",
|
|
"surface-container": "#19191d",
|
|
"on-tertiary-fixed-variant": "#2c0005",
|
|
"on-tertiary-container": "#000000",
|
|
"on-secondary-fixed-variant": "#6448b2",
|
|
"outline": "#75757c",
|
|
"on-primary-fixed-variant": "#006571",
|
|
"on-error-container": "#ff9993",
|
|
"inverse-on-surface": "#565457",
|
|
"secondary-container": "#432390",
|
|
"primary-fixed": "#9cf0ff",
|
|
"primary": "#00daf3",
|
|
"surface-bright": "#2b2c32",
|
|
"background": "#0e0e10",
|
|
"on-primary": "#004750",
|
|
"surface-container-lowest": "#000000",
|
|
"on-error": "#490106",
|
|
"on-secondary-container": "#c7b4ff",
|
|
"primary-container": "#004f58",
|
|
"on-surface": "#e7e4ec",
|
|
"primary-dim": "#00cbe2",
|
|
"on-secondary": "#260069",
|
|
"surface-container-highest": "#25252b",
|
|
"on-tertiary": "#49000d",
|
|
"on-surface-variant": "#acaab1",
|
|
"error": "#ee7d77",
|
|
"surface-dim": "#0e0e10",
|
|
"error-container": "#7f2927",
|
|
"surface": "#0e0e10",
|
|
"inverse-surface": "#fcf8fb",
|
|
"surface-variant": "#25252b",
|
|
"secondary-fixed": "#e8ddff",
|
|
"inverse-primary": "#006976",
|
|
"primary-fixed-dim": "#49e7ff",
|
|
"tertiary-container": "#fe3c56",
|
|
"secondary": "#a88cfb",
|
|
"outline-variant": "#47474e",
|
|
"tertiary-fixed-dim": "#eb2d4b",
|
|
"tertiary-dim": "#ff6f78",
|
|
"on-secondary-fixed": "#472894",
|
|
"on-primary-container": "#00e5ff",
|
|
"surface-container-low": "#131316",
|
|
"tertiary-fixed": "#fe3c56",
|
|
"on-tertiary-fixed": "#000000",
|
|
"surface-tint": "#00daf3",
|
|
"on-primary-fixed": "#00464f"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter Tight", "sans-serif"],
|
|
"body": ["Poppins", "sans-serif"],
|
|
"label": ["Space Grotesk", "sans-serif"],
|
|
"mono": ["JetBrains Mono", "monospace"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #09090B;
|
|
font-family: 'Poppins', sans-serif;
|
|
color: #f9f5f8;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.font-mono-data {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
/* Updated Glass Card Style based on SCREEN_17 */
|
|
.glass-card {
|
|
background: linear-gradient(180deg, rgba(28, 20, 45, 0.7) 0%, rgba(18, 14, 28, 0.9) 100%);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.glass-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 20%;
|
|
height: 60%;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, transparent, #A78BFA, transparent);
|
|
opacity: 0.4;
|
|
}
|
|
.glass-card:hover {
|
|
border-color: rgba(167, 139, 250, 0.3);
|
|
box-shadow: 0 0 30px rgba(167, 139, 250, 0.1);
|
|
}
|
|
.neon-glow-violet {
|
|
box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
|
|
}
|
|
.active-pulse {
|
|
box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .7; transform: scale(1.1); }
|
|
}
|
|
.terminal-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.terminal-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(167, 139, 250, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
@keyframes marquee {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body selection:bg-secondary/30">
|
|
<!-- Sidebar Navigation (SideNavBar) -->
|
|
<aside class="fixed left-0 top-0 h-full w-64 z-40 bg-[#0C0C0E] flex flex-col py-8 gap-4 border-r border-outline-variant/10">
|
|
<div class="px-6 mb-8 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">hub</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="font-headline font-black text-on-surface tracking-tighter text-lg leading-tight">Sovereign</h2>
|
|
<p class="font-label text-[10px] uppercase tracking-[0.2em] text-outline">ThirdEye Protocol</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-4 px-6 py-3 text-zinc-500 hover:bg-[#1A1A21] transition-all group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-secondary">grid_view</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-6 py-3 border-l-2 border-[#00E5FF] bg-[#141419] text-[#00E5FF] transition-all" href="#" style="border-color: #a88cfb; color: #a88cfb;">
|
|
<span class="material-symbols-outlined text-xl" style="font-variation-settings: 'FILL' 1;">hub</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Agents</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-6 py-3 text-zinc-500 hover:bg-[#1A1A21] transition-all group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-secondary">security</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Intelligence</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-6 py-3 text-zinc-500 hover:bg-[#1A1A21] transition-all group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-secondary">database</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Assets</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-6 py-3 text-zinc-500 hover:bg-[#1A1A21] transition-all group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-secondary">terminal</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Logs</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto px-6 pt-4 border-t border-outline-variant/10 space-y-1">
|
|
<a class="flex items-center gap-4 py-3 text-zinc-500 hover:text-zinc-300 transition-all" href="#">
|
|
<span class="material-symbols-outlined text-xl">help</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Support</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 py-3 text-zinc-500 hover:text-zinc-300 transition-all" href="#">
|
|
<span class="material-symbols-outlined text-xl">logout</span>
|
|
<span class="font-headline text-xs font-medium uppercase tracking-widest">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation (TopNavBar) -->
|
|
<header class="fixed top-0 right-0 left-64 h-16 bg-[#09090B]/80 backdrop-blur-xl z-50 flex items-center justify-between px-8 shadow-[0_0_8px_#a88cfb15]">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline font-black text-secondary tracking-tighter text-xl uppercase">Agent Operations</span>
|
|
<div class="h-4 w-[1px] bg-outline-variant/30 mx-2"></div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="font-mono text-[10px] text-emerald-500 uppercase tracking-widest">System Nominal</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4 text-outline">
|
|
<button class="material-symbols-outlined hover:text-secondary transition-colors">notifications</button>
|
|
<button class="material-symbols-outlined hover:text-secondary transition-colors">settings</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 bg-surface-container-high pl-3 pr-1 py-1 rounded-full border border-outline-variant/20">
|
|
<span class="font-label text-xs font-bold text-on-surface">SYS_ADMIN</span>
|
|
<img class="w-8 h-8 rounded-full border border-secondary/50 object-cover" data-alt="Cyberpunk style user profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCroUsxXkBGf-mp8iCWyL3ofoFvJYkJcYkASmYuk3SMNQfy5DrJUsMM-UTQD5xlGMUJD2w7pe71QVyCJpeQXIMLWQaDK-rCv9eoHH9tKJ9MXGgdvCPsQkBfw9ziOuk7PuX66KTEkuVQw5du5qnSdRrVSm3HPqthifff1H6dy6slApCpNLEWqWuyEUeDLCAswYSuYd2JZKhglfVBpBNaydxTPe5AlPHld1ir5E0sexK8QV4x0F6dgpYGN6Eb_QSibqctgZiffTf7x0pv"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-24 px-8 pb-12">
|
|
<!-- Header & Stats -->
|
|
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-10 gap-6">
|
|
<div class="space-y-1">
|
|
<h1 class="font-headline text-3xl font-black tracking-tighter text-on-surface flex items-center gap-3">
|
|
Fleet Management
|
|
<span class="px-2 py-0.5 bg-secondary/10 text-secondary text-[10px] rounded border border-secondary/20 font-mono tracking-widest uppercase">Live Status</span>
|
|
</h1>
|
|
<p class="text-on-surface-variant max-w-xl text-sm leading-relaxed">Active deployment of neural processing agents across ThirdEye node clusters. Monitoring real-time throughput and cognitive load.</p>
|
|
</div>
|
|
<button class="bg-secondary text-on-secondary font-headline font-bold text-sm px-6 py-3 rounded-lg flex items-center gap-3 neon-glow-violet active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-lg">add_circle</span>
|
|
Deploy New Agent
|
|
</button>
|
|
</div>
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
|
|
<div class="glass-card p-5 rounded-xl border-l-4 border-secondary">
|
|
<p class="font-label text-[10px] uppercase tracking-widest text-outline mb-1 font-body">Active Agents</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="text-2xl font-bold text-on-surface font-body font-mono-data">12 / 16</h3>
|
|
<span class="text-secondary material-symbols-outlined">memory</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card p-5 rounded-xl border-l-4 border-primary">
|
|
<p class="font-label text-[10px] uppercase tracking-widest text-outline mb-1 font-body">Fleet Throughput</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="text-2xl font-bold text-on-surface font-body font-mono-data">4.2 GB/s</h3>
|
|
<span class="text-primary material-symbols-outlined">speed</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card p-5 rounded-xl border-l-4 border-tertiary">
|
|
<p class="font-label text-[10px] uppercase tracking-widest text-outline mb-1 font-body">Error Frequency</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="text-2xl font-bold text-on-surface font-body font-mono-data">0.02%</h3>
|
|
<span class="text-tertiary material-symbols-outlined">warning</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card p-5 rounded-xl border-l-4 border-emerald-500">
|
|
<p class="font-label text-[10px] uppercase tracking-widest text-outline mb-1 font-body">Network Uptime</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="text-2xl font-bold text-on-surface font-body font-mono-data">99.99%</h3>
|
|
<span class="text-emerald-500 material-symbols-outlined">verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Agent Cards Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Agent Card 1 -->
|
|
<div class="glass-card rounded-xl overflow-hidden group hover:bg-[#1A1A21] transition-all duration-300">
|
|
<div class="h-1 bg-gradient-to-r from-secondary via-primary to-transparent"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="space-y-1">
|
|
<h4 class="font-headline font-bold text-secondary text-sm font-body">Semantic_Processor_01</h4>
|
|
<p class="text-[10px] text-outline font-body font-mono-data">ID: AF-01-SP-2023</p>
|
|
</div>
|
|
<span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 font-mono-data">RUNNING</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-3 rounded-lg border border-outline-variant/10">
|
|
<p class="font-label text-[10px] text-outline uppercase tracking-wider mb-2 font-body">Current Task</p>
|
|
<p class="text-xs font-medium text-on-surface font-body">Analyzing Q3 Sales Call Transcripts</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 py-2 border-y border-outline-variant/10">
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Uptime</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">142h 12m 04s</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Throughput</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">854 ops/sec</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<p class="font-label text-[10px] text-outline uppercase font-body">Terminal Output</p>
|
|
<span class="material-symbols-outlined text-[12px] text-outline">open_in_full</span>
|
|
</div>
|
|
<div class="bg-black/40 text-[10px] p-3 rounded-lg border border-outline-variant/10 text-zinc-400 terminal-scroll overflow-y-auto max-h-24 font-mono-data">
|
|
<p class="font-body"><span class="text-secondary-dim">info:</span> buffering stream_04...</p>
|
|
<p class="font-body"><span class="text-secondary-dim">exec:</span> mapping entities -> vector_db</p>
|
|
<p class="font-body"><span class="text-secondary-dim">done:</span> shard 012 commitment complete</p>
|
|
<p class="animate-pulse font-body">_</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Agent Card 2 -->
|
|
<div class="glass-card rounded-xl overflow-hidden group hover:bg-[#1A1A21] transition-all duration-300">
|
|
<div class="h-1 bg-gradient-to-r from-secondary-container via-secondary-dim to-transparent"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="space-y-1">
|
|
<h4 class="font-headline font-bold text-secondary text-sm font-body">Sentiment_Miner_04</h4>
|
|
<p class="text-[10px] text-outline font-body font-mono-data">ID: AF-04-SM-2024</p>
|
|
</div>
|
|
<span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 font-mono-data">RUNNING</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-3 rounded-lg border border-outline-variant/10">
|
|
<p class="font-label text-[10px] text-outline uppercase tracking-wider mb-2 font-body">Current Task</p>
|
|
<p class="text-xs font-medium text-on-surface font-body">Processing Global Sentiment Feed</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 py-2 border-y border-outline-variant/10">
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Uptime</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">48h 05m 21s</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Throughput</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">1,210 ops/sec</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<p class="font-label text-[10px] text-outline uppercase font-body">Terminal Output</p>
|
|
<span class="material-symbols-outlined text-[12px] text-outline">open_in_full</span>
|
|
</div>
|
|
<div class="bg-black/40 text-[10px] p-3 rounded-lg border border-outline-variant/10 text-zinc-400 terminal-scroll overflow-y-auto max-h-24 font-mono-data">
|
|
<p class="font-body"><span class="text-secondary-dim">info:</span> extracting mood vectors</p>
|
|
<p class="font-body"><span class="text-secondary-dim">warn:</span> noise threshold spike detected</p>
|
|
<p class="font-body"><span class="text-secondary-dim">info:</span> normalizing data across nodes</p>
|
|
<p class="animate-pulse font-body">_</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Agent Card 3 -->
|
|
<div class="glass-card rounded-xl overflow-hidden group hover:bg-[#1A1A21] transition-all duration-300">
|
|
<div class="h-1 bg-gradient-to-r from-secondary via-error to-transparent"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex justify-between items-start">
|
|
<div class="space-y-1">
|
|
<h4 class="font-headline font-bold text-secondary text-sm font-body">Graph_Builder_02</h4>
|
|
<p class="text-[10px] text-outline font-body font-mono-data">ID: AF-02-GB-2024</p>
|
|
</div>
|
|
<span class="px-2 py-0.5 rounded text-[10px] bg-secondary-container text-secondary border border-secondary/20 font-mono-data">RE-INDEXING</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-3 rounded-lg border border-outline-variant/10">
|
|
<p class="font-label text-[10px] text-outline uppercase tracking-wider mb-2 font-body">Current Task</p>
|
|
<p class="text-xs font-medium text-on-surface font-body">Updating Social Graph Topology</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 py-2 border-y border-outline-variant/10">
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Uptime</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">02h 44m 12s</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-label text-[10px] text-outline uppercase mb-1 font-body">Throughput</p>
|
|
<p class="text-xs text-on-surface font-body font-mono-data">322 ops/sec</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<p class="font-label text-[10px] text-outline uppercase font-body">Terminal Output</p>
|
|
<span class="material-symbols-outlined text-[12px] text-outline">open_in_full</span>
|
|
</div>
|
|
<div class="bg-black/40 text-[10px] p-3 rounded-lg border border-outline-variant/10 text-zinc-400 terminal-scroll overflow-y-auto max-h-24 font-mono-data">
|
|
<p class="font-body"><span class="text-secondary-dim">init:</span> graph builder v2.1.0-beta</p>
|
|
<p class="font-body"><span class="text-secondary-dim">task:</span> refreshing edge weightings</p>
|
|
<p class="font-body"><span class="text-tertiary">error:</span> circular dependency in block 44</p>
|
|
<p class="animate-pulse font-body">_</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Ticker Section -->
|
|
<div class="mt-12 p-3 bg-surface-container-low border border-outline-variant/10 rounded overflow-hidden">
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-secondary text-sm">pulse_alert</span>
|
|
<div class="flex-1 overflow-hidden whitespace-nowrap">
|
|
<div class="inline-block animate-[marquee_20s_linear_infinite] font-mono text-[10px] text-outline uppercase tracking-widest">
|
|
SYSTEM_UPDATE: Node 14 synchronized. New encryption keys deployed. Agent 'Graph_Builder_02' memory usage spike detected at 14:22:01. Global latency remains within 40ms threshold.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<style>
|
|
body {
|
|
background-color: #09090B;
|
|
font-family: 'Poppins', sans-serif;
|
|
color: #f9f5f8;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.font-mono-data {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
/* Updated Glass Card Style based on SCREEN_17 */
|
|
.glass-card {
|
|
background: linear-gradient(180deg, rgba(28, 20, 45, 0.7) 0%, rgba(18, 14, 28, 0.9) 100%);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(167, 139, 250, 0.12);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.glass-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 20%;
|
|
height: 60%;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, transparent, #A78BFA, transparent);
|
|
opacity: 0.4;
|
|
}
|
|
.glass-card:hover {
|
|
border-color: rgba(167, 139, 250, 0.3);
|
|
box-shadow: 0 0 30px rgba(167, 139, 250, 0.1);
|
|
}
|
|
.neon-glow-violet {
|
|
box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
|
|
}
|
|
.active-pulse {
|
|
box-shadow: 0 0 15px rgba(167, 139, 250, 0.4);
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .7; transform: scale(1.1); }
|
|
}
|
|
.terminal-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.terminal-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(167, 139, 250, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
@keyframes marquee {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
</style>
|
|
</body></html> |