mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
296
thirdeye/stitch_dashboard.html
Normal file
296
thirdeye/stitch_dashboard.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!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_CORE | 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;800&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: {
|
||||
"primary": "#A78BFA",
|
||||
"primary-dim": "rgba(167, 139, 250, 0.6)",
|
||||
"primary-muted": "rgba(167, 139, 250, 0.1)",
|
||||
"background": "#09090B",
|
||||
"surface": "#0C0C0E",
|
||||
"surface-variant": "#141419",
|
||||
"outline": "rgba(255, 255, 255, 0.05)",
|
||||
"card-gradient-start": "#0F0B1A",
|
||||
"card-gradient-end": "#1A142E",
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Poppins", "sans-serif"],
|
||||
"body": ["Poppins", "sans-serif"],
|
||||
"label": ["Poppins", "sans-serif"],
|
||||
"mono": ["Poppins", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #09090B;
|
||||
color: #E2E2E2;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.glass { backdrop-filter: blur(24px); }
|
||||
.primary-glow { box-shadow: 0 0 15px rgba(167, 139, 250, 0.08); }
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 3px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.1); border-radius: 10px; }
|
||||
* { border-color: rgba(255, 255, 255, 0.05) !important; }
|
||||
.neon-card-gradient {
|
||||
background: linear-gradient(135deg, #0F0B1A 0%, #1A142E 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex min-h-screen overflow-hidden">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen w-[240px] fixed left-0 top-0 bg-surface flex flex-col border-r z-50">
|
||||
<div class="p-8">
|
||||
<div class="text-xl font-bold tracking-tight text-primary">THIRDEYE</div>
|
||||
<div class="text-[10px] uppercase tracking-[0.2em] font-medium text-zinc-500 mt-1">SOVEREIGN_V1</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-2">
|
||||
<!-- Active: Mission -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-primary bg-primary-muted rounded-lg transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="target">target</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Mission</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-surface-variant rounded-lg transition-all duration-300" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="group">group</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Agents</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-surface-variant rounded-lg transition-all duration-300" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="psychology">psychology</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Intelligence</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-surface-variant rounded-lg transition-all duration-300" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="radar">radar</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Signals</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-surface-variant rounded-lg transition-all duration-300" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="history">history</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Archive</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-6 border-t">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-surface-variant rounded-lg transition-all duration-300 mb-6" href="#">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="settings">settings</span>
|
||||
<span class="text-[11px] uppercase tracking-wider font-semibold">Settings</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-3 px-4 py-3 bg-surface-variant/50 rounded-xl">
|
||||
<div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center overflow-hidden">
|
||||
<img alt="User" class="w-full h-full object-cover grayscale opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDPDNKrhVYd9xCwVZGKYui6CqO50DWGzqYtXMvFeFctabpgqezZrxuwjTTZDuXLknUhWHbgNIHKJZr5LMhMr02ev53Hbgc3EDse7tPD9YKpkeSscQNiov4UrsDIisCS-55WnpDRZ3w121FN3fBDDofdEtEBluem4BeUpBk-qQQ82-RenSp4YIfwxvQbzg1xzvOGMPk8oYz45DZfnsfHvV5vKTlxj2gSPOZLUQLgGdYpHt5ebL0c9gUmMBqibm8t_Kd1KTqQaOxHVBj"/>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-[11px] text-zinc-200 font-semibold truncate">CMD_DECKARD</p>
|
||||
<p class="text-[9px] text-zinc-500 uppercase tracking-tighter">Clearance L4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="h-20 flex justify-between items-center px-10 w-full bg-surface/80 backdrop-blur-xl border-b z-40 sticky top-0">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative group">
|
||||
<span class="absolute left-0 top-1/2 -translate-y-1/2 material-symbols-outlined text-zinc-600 text-sm" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none text-[13px] focus:ring-0 rounded py-2 pl-8 pr-4 w-72 placeholder:text-zinc-700 transition-all" placeholder="Query the system..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-6 text-zinc-500">
|
||||
<span class="material-symbols-outlined text-lg hover:text-primary cursor-pointer transition-colors" data-icon="notifications">notifications</span>
|
||||
<span class="material-symbols-outlined text-lg hover:text-primary cursor-pointer transition-colors" data-icon="terminal">terminal</span>
|
||||
</div>
|
||||
<div class="h-6 w-px bg-white/5"></div>
|
||||
<div class="text-[10px] text-primary font-bold px-4 py-1.5 bg-primary/5 rounded-full border border-primary/20 tracking-wide">
|
||||
THIRDEYE_CORE_PROMPT: READY
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Dashboard Content -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-10 space-y-10">
|
||||
<!-- Metric Tile Grid -->
|
||||
<section class="grid grid-cols-4 gap-6">
|
||||
<div class="neon-card-gradient border p-6 rounded-xl flex flex-col justify-between hover:brightness-110 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">Active Agents</span>
|
||||
<span class="material-symbols-outlined text-primary/60 text-sm" data-icon="sensors">sensors</span>
|
||||
</div>
|
||||
<div class="text-3xl font-semibold text-white">14</div>
|
||||
<div class="text-[11px] text-primary mt-3 flex items-center gap-1.5 font-medium">
|
||||
<span class="material-symbols-outlined text-[11px]" data-icon="trending_up">trending_up</span>
|
||||
<span>+2 Synced</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="neon-card-gradient border p-6 rounded-xl flex flex-col justify-between hover:brightness-110 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">Signals Processed</span>
|
||||
<span class="material-symbols-outlined text-primary/60 text-sm" data-icon="data_exploration">data_exploration</span>
|
||||
</div>
|
||||
<div class="text-3xl font-semibold text-white">8.4k</div>
|
||||
<div class="text-[11px] text-zinc-400 mt-3 uppercase tracking-tighter">Last 24h Cycle</div>
|
||||
</div>
|
||||
<div class="neon-card-gradient border p-6 rounded-xl flex flex-col justify-between hover:brightness-110 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">Open Insights</span>
|
||||
<span class="material-symbols-outlined text-primary/60 text-sm" data-icon="lightbulb">lightbulb</span>
|
||||
</div>
|
||||
<div class="text-3xl font-semibold text-white">23</div>
|
||||
<div class="text-[11px] text-primary mt-3 font-semibold uppercase tracking-tighter">4 Critical Priority</div>
|
||||
</div>
|
||||
<div class="neon-card-gradient border p-6 rounded-xl flex flex-col justify-between hover:brightness-110 transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">Avg Latency</span>
|
||||
<span class="material-symbols-outlined text-primary/60 text-sm" data-icon="timer">timer</span>
|
||||
</div>
|
||||
<div class="text-3xl font-semibold text-white">184ms</div>
|
||||
<div class="text-[11px] text-zinc-400 mt-3 uppercase tracking-tighter">Optimal Range</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hero Section: Cross-Group Insight Card -->
|
||||
<section class="relative neon-card-gradient rounded-2xl border-l-[3px] border-primary primary-glow overflow-hidden">
|
||||
<div class="p-10 grid md:grid-cols-3 gap-10 relative z-10">
|
||||
<div class="md:col-span-2 space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="px-3 py-1 bg-primary/20 text-primary text-[10px] font-bold tracking-[0.1em] rounded-full border border-primary/30">SYSTEM_ALERT</span>
|
||||
<span class="text-zinc-400 text-[11px] uppercase tracking-widest font-semibold">Cross-Group Intelligence Analysis</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-white leading-tight">Discrepancy in Strategy Alignment: Product vs Engineering</h2>
|
||||
<p class="text-zinc-300 text-[15px] leading-relaxed max-w-2xl font-light">
|
||||
Insight explanation: Discrepancy in Q3 roadmap priorities identified across 4 cross-functional meetings. Product prioritizes feature velocity, while Engineering focuses on technical debt reduction.
|
||||
</p>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button class="px-6 py-3 bg-primary text-background text-[11px] font-bold uppercase tracking-widest rounded-lg hover:opacity-90 transition-all">Schedule Sync</button>
|
||||
<button class="px-6 py-3 bg-white/5 text-zinc-300 text-[11px] font-bold uppercase tracking-widest rounded-lg hover:bg-white/10 transition-all">Dismiss Signal</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="bg-black/20 p-5 rounded-xl border">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-[11px] text-zinc-300 font-semibold">Group A (Product)</span>
|
||||
<span class="text-xs text-white">72%</span>
|
||||
</div>
|
||||
<div class="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary/60" style="width: 72%"></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">Alignment on Speed-to-Market</p>
|
||||
</div>
|
||||
<div class="bg-black/20 p-5 rounded-xl border">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-[11px] text-zinc-300 font-semibold">Group B (Eng)</span>
|
||||
<span class="text-xs text-white">84%</span>
|
||||
</div>
|
||||
<div class="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 84%"></div>
|
||||
</div>
|
||||
<p class="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">Focus on System Stability</p>
|
||||
</div>
|
||||
<div class="p-5 border border-primary/20 bg-primary/10 rounded-xl">
|
||||
<p class="text-[12px] text-primary font-medium leading-relaxed">
|
||||
<span class="font-bold">RECOMMENDATION:</span> Schedule immediate alignment session for Q3 priority sync.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Abstract visual element -->
|
||||
<div class="absolute right-0 top-0 h-full w-96 opacity-10 pointer-events-none bg-gradient-to-l from-primary to-transparent"></div>
|
||||
</section>
|
||||
<!-- Main Grid: Signal Cards -->
|
||||
<section class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-[11px] uppercase tracking-[0.25em] font-bold text-zinc-500 flex items-center gap-3">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-primary primary-glow"></span>
|
||||
Live Signals Stream
|
||||
</h3>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-zinc-600 text-lg cursor-pointer hover:text-primary transition-colors" data-icon="filter_list">filter_list</span>
|
||||
<span class="material-symbols-outlined text-zinc-600 text-lg cursor-pointer hover:text-primary transition-colors" data-icon="sort">sort</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Card 1: Warning -->
|
||||
<div class="neon-card-gradient rounded-xl p-6 relative border-l-[3px] border-primary/30 flex flex-col h-full group hover:brightness-110 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="p-2.5 bg-primary/10 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl" data-icon="warning">warning</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-zinc-400 uppercase tracking-tighter">T-2m ago</span>
|
||||
</div>
|
||||
<p class="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">Unusual spike in security mentions in DevOps channels. Analyzing 12 recent signals...</p>
|
||||
<div class="mt-auto flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-primary uppercase tracking-[0.1em]">Security Risk</span>
|
||||
<span class="material-symbols-outlined text-zinc-500 group-hover:text-primary transition-all cursor-pointer" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Success -->
|
||||
<div class="neon-card-gradient rounded-xl p-6 relative border-l-[3px] border-primary flex flex-col h-full group hover:brightness-110 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="p-2.5 bg-primary/10 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-zinc-400 uppercase tracking-tighter">T-14m ago</span>
|
||||
</div>
|
||||
<p class="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">High consensus reached on Microservices architecture for project 'Aurora'. 95% alignment.</p>
|
||||
<div class="mt-auto flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-primary uppercase tracking-[0.1em]">Consensus Met</span>
|
||||
<span class="material-symbols-outlined text-zinc-500 group-hover:text-primary transition-all cursor-pointer" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: Brand -->
|
||||
<div class="neon-card-gradient rounded-xl p-6 relative border-l-[3px] border-primary/50 flex flex-col h-full group hover:brightness-110 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="p-2.5 bg-primary/10 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl" data-icon="campaign">campaign</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-zinc-400 uppercase tracking-tighter">T-1h ago</span>
|
||||
</div>
|
||||
<p class="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">New 'ThirdEye Sovereign' feature mentioned across all leadership streams. Tracking adoption...</p>
|
||||
<div class="mt-auto flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-primary uppercase tracking-[0.1em]">Brand Sync</span>
|
||||
<span class="material-symbols-outlined text-zinc-500 group-hover:text-primary transition-all cursor-pointer" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Trend -->
|
||||
<div class="neon-card-gradient rounded-xl p-6 relative border-l-[3px] border-primary/70 flex flex-col h-full group hover:brightness-110 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="p-2.5 bg-primary/10 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl" data-icon="psychology_alt">psychology_alt</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-zinc-400 uppercase tracking-tighter">T-2h ago</span>
|
||||
</div>
|
||||
<p class="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">Ongoing trend: Focus shift to AI-assisted development across 5 engineering squads.</p>
|
||||
<div class="mt-auto flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-primary uppercase tracking-[0.1em]">Trend Vector</span>
|
||||
<span class="material-symbols-outlined text-zinc-500 group-hover:text-primary transition-all cursor-pointer" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Intelligence Ticker -->
|
||||
<footer class="bg-surface p-4 rounded-xl border overflow-hidden">
|
||||
<div class="flex items-center gap-6 whitespace-nowrap overflow-hidden">
|
||||
<span class="text-[10px] font-extrabold text-primary uppercase tracking-widest bg-primary/10 px-3 py-1 rounded-full border border-primary/20">System_Log</span>
|
||||
<div class="flex gap-12 text-[10px] font-medium text-zinc-600 uppercase tracking-wide opacity-80">
|
||||
<span>[Signal_Rcv] :: Offset=0x3f4 :: Status=Stable</span>
|
||||
<span>[Agent_Sync] :: UUID_4492 :: Auth_Granted</span>
|
||||
<span>[IO_Wait] :: 0.042ms :: Vector_Validated</span>
|
||||
<span>[Core_Idle] :: Temp_Optimal</span>
|
||||
<span>[Log_Dump] :: Stream_Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user