322 lines
19 KiB
HTML
322 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Sentinel GEWS - Precision Dashboard</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet"/>
|
|
<!-- Icons -->
|
|
<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"/>
|
|
<!-- Tailwind -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-tertiary-container": "#ef4444",
|
|
"on-primary-fixed": "#131b2e",
|
|
"surface-container": "#eceef0",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed": "#002113",
|
|
"tertiary": "#000000",
|
|
"on-tertiary-fixed": "#410004",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"primary-fixed": "#dae2fd",
|
|
"on-error-container": "#93000a",
|
|
"primary": "#000000",
|
|
"on-tertiary-fixed-variant": "#930013",
|
|
"surface-container-low": "#f2f4f6",
|
|
"surface-variant": "#e0e3e5",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-primary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"secondary-fixed": "#6ffbbe",
|
|
"surface": "#f7f9fb",
|
|
"on-secondary-container": "#00714d",
|
|
"tertiary-fixed-dim": "#ffb3ad",
|
|
"on-background": "#191c1e",
|
|
"primary-container": "#131b2e",
|
|
"background": "#f7f9fb",
|
|
"secondary-container": "#6cf8bb",
|
|
"surface-container-lowest": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"secondary": "#006c49",
|
|
"tertiary-fixed": "#ffdad7",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed-dim": "#4edea3",
|
|
"inverse-surface": "#2d3133",
|
|
"tertiary-container": "#410004",
|
|
"surface-bright": "#f7f9fb",
|
|
"inverse-primary": "#bec6e0",
|
|
"surface-dim": "#d8dadc",
|
|
"on-surface": "#191c1e",
|
|
"on-secondary-fixed-variant": "#005236",
|
|
"surface-tint": "#565e74",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-fixed-dim": "#bec6e0",
|
|
"outline-variant": "#c6c6cd",
|
|
"on-primary-fixed-variant": "#3f465c",
|
|
"outline": "#76777d",
|
|
"on-surface-variant": "#45464d",
|
|
"on-primary-container": "#7c839b",
|
|
"inverse-on-surface": "#eff1f3"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.map-mesh {
|
|
background-image: radial-gradient(circle, #c6c6cd 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body selection:bg-primary-fixed">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-slate-50/80 backdrop-blur-xl shadow-sm flex justify-between items-center px-6 py-3 w-full">
|
|
<div class="flex items-center gap-8">
|
|
<span class="text-xl font-bold font-['Manrope'] tracking-tight text-slate-900">Sentinel GEWS</span>
|
|
<div class="hidden md:flex items-center gap-6 font-['Inter'] text-sm font-medium tracking-tight">
|
|
<a class="text-slate-900 font-semibold border-b-2 border-slate-900 transition-colors" href="#">Overview</a>
|
|
<a class="text-slate-500 hover:text-slate-900 transition-colors" href="#">Satellite</a>
|
|
<a class="text-slate-500 hover:text-slate-900 transition-colors" href="#">Topography</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative hidden sm:block">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
|
<input class="bg-slate-200/50 border-none rounded-full pl-10 pr-4 py-1.5 text-sm focus:ring-2 ring-primary/20 w-64" placeholder="Search coordinates..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 text-slate-500 hover:text-slate-900 transition-colors"><span class="material-symbols-outlined">notifications</span></button>
|
|
<button class="p-2 text-slate-500 hover:text-slate-900 transition-colors"><span class="material-symbols-outlined">help</span></button>
|
|
<button class="p-2 text-slate-500 hover:text-slate-900 transition-colors"><span class="material-symbols-outlined">grid_view</span></button>
|
|
<div class="h-8 w-8 rounded-full bg-slate-200 ml-2 overflow-hidden">
|
|
<img alt="User profile avatar" data-alt="professional portrait of a technical lead in a clean studio setting with soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCIc4AMEncQyPipaAyho_nKQa6vxukD6YJ8hypuaH9LrVGZWpxnZiwpISnlGaCBJSwdC9Ydxl9ibntHbNwqDg4sHP3bZAze32TGYtcr69q2O3jd60dVtPQfESjjIYEhuLO-UOcbiI1nFDfMgjEV_ZY1INcH3YIhik2hazhuhpAEhZ5bVgbuQi-q_iPsgWFlB9PRahxLKyzFL-EiJFHm_ra6T3xmDMztE2wVe5wZZWMGpSh9dnnnJJK5FKYxqxCiOOfgZHAMgXT0u6A"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-200/50 h-[1px] w-full absolute bottom-0"></div>
|
|
</header>
|
|
<!-- SideNavBar -->
|
|
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 flex flex-col py-6 px-4 gap-2 z-40 pt-20">
|
|
<div class="mb-6 px-2">
|
|
<h2 class="font-['Manrope'] font-bold text-lg text-slate-900">Precision Sentinel</h2>
|
|
<p class="text-xs text-slate-500 font-medium">Enterprise Geospatial</p>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-900 bg-slate-200/50 rounded-lg font-semibold transition-all" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-200/30 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined">map</span>
|
|
<span>Parcels</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-200/30 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined">crisis_alert</span>
|
|
<span>Alerts</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-200/30 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
<span>Detection Insights</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-200/30 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined">description</span>
|
|
<span>Reports</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-200/30 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto space-y-4 pt-6">
|
|
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg font-semibold text-sm flex items-center justify-center gap-2 shadow-lg shadow-primary/10 hover:scale-[0.98] transition-transform">
|
|
<span class="material-symbols-outlined text-sm">add_circle</span>
|
|
New Analysis
|
|
</button>
|
|
<div class="bg-slate-100 h-[1px] w-full"></div>
|
|
<div class="flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 transition-all text-sm" href="#">
|
|
<span class="material-symbols-outlined">contact_support</span>
|
|
<span>Support</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-slate-900 transition-all text-sm" href="#">
|
|
<span class="material-symbols-outlined">sensors</span>
|
|
<span>System Status</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Canvas -->
|
|
<main class="pl-64 pt-16 min-h-screen relative overflow-hidden">
|
|
<!-- Interactive Map Background -->
|
|
<div class="absolute inset-0 z-0 bg-slate-200">
|
|
<div class="absolute inset-0 map-mesh opacity-20"></div>
|
|
<img class="w-full h-full object-cover" data-alt="high resolution satellite imagery of agricultural grid patterns with vibrant green fields and irrigation circles" data-location="Northern California Agricultural Lands" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBstgalT3t4ebGbYnR3YA13DFLgvC-EKm12SFFfSqAQqvkT7rhyiMnDXCTcp9Q6kV0klgFLgq-MOanEgoY0kty_8gKXpncxFsygExGotU39DNmiXLPWTHyJIV622SYkhe3Fp_IcZ_SwspLcfyRNGxaH5edqckWgy5Hc_L-1apmJHlnddd4PN9--1Sx7kZYO4w9doROw63CefG6jmN8lPv7YnXyqkI9V0pZalvKX64anNWldBQdbYr5tcivnp2KCqxXE7Lj0KAVyE2o"/>
|
|
<!-- Map Overlay Polygons (Mockups) -->
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
<!-- Parcel A: Safe -->
|
|
<div class="absolute top-[30%] left-[25%] w-48 h-32 bg-secondary/20 border-2 border-secondary rounded-lg backdrop-blur-[2px] flex items-center justify-center">
|
|
<span class="bg-secondary text-white text-[10px] px-2 py-0.5 rounded font-bold uppercase tracking-wider">Parcel ID: 8821</span>
|
|
</div>
|
|
<!-- Parcel B: Alert -->
|
|
<div class="absolute top-[45%] left-[45%] w-64 h-48 bg-error/20 border-2 border-error rounded-xl backdrop-blur-[2px] flex items-center justify-center">
|
|
<span class="bg-error text-white text-[10px] px-2 py-0.5 rounded font-bold uppercase tracking-wider animate-pulse">Alert Active</span>
|
|
</div>
|
|
<!-- Parcel C: Review -->
|
|
<div class="absolute top-[20%] left-[60%] w-40 h-40 bg-[#F59E0B]/20 border-2 border-[#F59E0B] rounded-full backdrop-blur-[2px] flex items-center justify-center">
|
|
<span class="bg-[#F59E0B] text-white text-[10px] px-2 py-0.5 rounded font-bold uppercase tracking-wider">In Review</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Top Summary Cards (Floating) -->
|
|
<div class="relative z-10 px-8 py-6 flex gap-4 overflow-x-auto">
|
|
<div class="glass-panel min-w-[200px] p-5 rounded-xl border border-white/40 shadow-xl">
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1">Total Parcels</p>
|
|
<h3 class="font-headline text-3xl font-extrabold text-on-surface">1,248</h3>
|
|
<div class="mt-2 flex items-center gap-2">
|
|
<span class="text-[10px] font-semibold text-on-secondary-container bg-secondary-container px-1.5 py-0.5 rounded-full">+12 new</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel min-w-[200px] p-5 rounded-xl border border-white/40 shadow-xl">
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1">Active Alerts</p>
|
|
<h3 class="font-headline text-3xl font-extrabold text-on-tertiary-container">12</h3>
|
|
<div class="mt-2 flex items-center gap-2">
|
|
<span class="text-[10px] font-semibold text-on-tertiary-container bg-tertiary-container/10 px-1.5 py-0.5 rounded-full">3 Critical</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel min-w-[200px] p-5 rounded-xl border border-white/40 shadow-xl">
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1">Recent Detections</p>
|
|
<h3 class="font-headline text-3xl font-extrabold text-on-surface">342</h3>
|
|
<div class="mt-2 flex items-center gap-2 font-label text-[10px] text-on-surface-variant">Last 24 hours</div>
|
|
</div>
|
|
<div class="glass-panel min-w-[200px] p-5 rounded-xl border border-white/40 shadow-xl">
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-1">System Risk Score</p>
|
|
<div class="flex items-end gap-2">
|
|
<h3 class="font-headline text-3xl font-extrabold text-on-surface">14.2</h3>
|
|
<span class="text-secondary font-bold text-sm pb-1">Low</span>
|
|
</div>
|
|
<div class="w-full h-1.5 bg-surface-container rounded-full mt-3 overflow-hidden">
|
|
<div class="bg-secondary h-full w-[14%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side Panel -->
|
|
<div class="absolute right-0 top-16 bottom-0 w-80 glass-panel border-l border-white/40 z-20 flex flex-col p-6">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h2 class="font-headline text-xl font-bold tracking-tight">Recent Alerts</h2>
|
|
<button class="text-primary text-xs font-bold hover:underline">View All</button>
|
|
</div>
|
|
<div class="space-y-4 flex-1 overflow-y-auto pr-2">
|
|
<!-- Alert Item 1 -->
|
|
<div class="group p-4 bg-surface-container-lowest rounded-xl hover:bg-white transition-colors cursor-pointer border border-transparent hover:border-outline-variant/20 shadow-sm">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<span class="text-[10px] font-bold text-on-tertiary-container bg-tertiary-container/10 px-2 py-0.5 rounded-full">CRITICAL</span>
|
|
<span class="text-[10px] text-on-surface-variant">2m ago</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-on-surface mb-1">Illegal Deforestation</h4>
|
|
<p class="text-xs text-on-surface-variant leading-relaxed">Detected movement in Sector 4-B. Heat signature alert triggered.</p>
|
|
</div>
|
|
<!-- Alert Item 2 -->
|
|
<div class="group p-4 bg-surface-container-lowest rounded-xl hover:bg-white transition-colors cursor-pointer border border-transparent hover:border-outline-variant/20 shadow-sm">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<span class="text-[10px] font-bold text-[#F59E0B] bg-[#F59E0B]/10 px-2 py-0.5 rounded-full">WARNING</span>
|
|
<span class="text-[10px] text-on-surface-variant">14m ago</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-on-surface mb-1">Encroachment Detection</h4>
|
|
<p class="text-xs text-on-surface-variant leading-relaxed">Boundary shift detected in Parcel 912 via high-res optical imagery.</p>
|
|
</div>
|
|
<!-- Alert Item 3 -->
|
|
<div class="group p-4 bg-surface-container-lowest rounded-xl hover:bg-white transition-colors cursor-pointer border border-transparent hover:border-outline-variant/20 shadow-sm">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<span class="text-[10px] font-bold text-secondary bg-secondary-container/30 px-2 py-0.5 rounded-full">INFO</span>
|
|
<span class="text-[10px] text-on-surface-variant">1h ago</span>
|
|
</div>
|
|
<h4 class="text-sm font-bold text-on-surface mb-1">Atmospheric Scan Complete</h4>
|
|
<p class="text-xs text-on-surface-variant leading-relaxed">System successfully calibrated for Northern Quadrant.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Actions -->
|
|
<div class="mt-8 pt-6 border-t border-slate-200">
|
|
<h3 class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-4">Quick Actions</h3>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button class="flex flex-col items-center justify-center p-3 bg-slate-100 rounded-xl hover:bg-primary hover:text-white transition-all group">
|
|
<span class="material-symbols-outlined mb-2 group-hover:scale-110 transition-transform">layers</span>
|
|
<span class="text-[10px] font-bold">Compare</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 bg-slate-100 rounded-xl hover:bg-primary hover:text-white transition-all group">
|
|
<span class="material-symbols-outlined mb-2 group-hover:scale-110 transition-transform">cloud_download</span>
|
|
<span class="text-[10px] font-bold">Export Geo</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 bg-slate-100 rounded-xl hover:bg-primary hover:text-white transition-all group">
|
|
<span class="material-symbols-outlined mb-2 group-hover:scale-110 transition-transform">history</span>
|
|
<span class="text-[10px] font-bold">Timeline</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 bg-slate-100 rounded-xl hover:bg-primary hover:text-white transition-all group">
|
|
<span class="material-symbols-outlined mb-2 group-hover:scale-110 transition-transform">share</span>
|
|
<span class="text-[10px] font-bold">Share Link</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating Action Buttons -->
|
|
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-4 z-30">
|
|
<button class="flex items-center gap-2 bg-primary-container text-white px-6 py-3 rounded-full shadow-2xl hover:scale-105 transition-all group border border-white/20">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
|
|
<span class="text-sm font-bold">Add Parcel</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full shadow-2xl hover:scale-105 transition-all group border border-slate-200">
|
|
<span class="material-symbols-outlined group-hover:animate-spin" style="font-variation-settings: 'FILL' 1;">refresh</span>
|
|
<span class="text-sm font-bold">Run Detection</span>
|
|
</button>
|
|
</div>
|
|
<!-- Telemetry Strip -->
|
|
<div class="absolute bottom-0 left-64 right-80 h-12 bg-surface-container-lowest/80 backdrop-blur-md flex items-center px-6 gap-8 z-20 border-t border-outline-variant/15">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-xs text-slate-400">explore</span>
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface-variant tracking-tighter">LAT: 34.0522 N</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-l border-slate-200 pl-8">
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface-variant tracking-tighter">LONG: 118.2437 W</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-l border-slate-200 pl-8">
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface-variant tracking-tighter">ALT: 1,420M AMSL</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-l border-slate-200 pl-8">
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface-variant tracking-tighter">ZOOM: 1:25,000</span>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-tighter">Live Telemetry Active</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |