337 lines
18 KiB
HTML
337 lines
18 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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@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"/>
|
|
<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": {
|
|
"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;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface antialiased">
|
|
<aside class="h-screen w-64 fixed left-0 top-0 border-r-0 bg-slate-50 dark:bg-slate-950 flex flex-col py-6 px-4 gap-2 z-50">
|
|
<div class="mb-8 px-2">
|
|
<h1 class="font-headline font-bold text-lg text-slate-900 dark:text-slate-50 tracking-tight">Precision Sentinel</h1>
|
|
<p class="text-[10px] uppercase tracking-[0.1em] text-on-surface-variant font-medium">Enterprise Geospatial</p>
|
|
</div>
|
|
<nav class="flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-200/30 dark:hover:bg-slate-800/30 transition-all rounded-lg font-medium" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-200/30 dark:hover:bg-slate-800/30 transition-all rounded-lg font-medium" href="#">
|
|
<span class="material-symbols-outlined">map</span>
|
|
Parcels
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-200/30 dark:hover:bg-slate-800/30 transition-all rounded-lg font-medium" href="#">
|
|
<span class="material-symbols-outlined">crisis_alert</span>
|
|
Alerts
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-900 dark:text-white bg-slate-200/50 dark:bg-slate-800/50 rounded-lg font-semibold" href="#">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
Detection Insights
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-200/30 dark:hover:bg-slate-800/30 transition-all rounded-lg font-medium" href="#">
|
|
<span class="material-symbols-outlined">description</span>
|
|
Reports
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-200/30 dark:hover:bg-slate-800/30 transition-all rounded-lg font-medium" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-6 flex flex-col gap-1 border-t border-surface-container">
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-white py-2.5 px-4 rounded-xl font-semibold text-sm mb-4 transition-transform active:scale-[0.98]">
|
|
New Analysis
|
|
</button>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 text-sm" href="#">
|
|
<span class="material-symbols-outlined">contact_support</span>
|
|
Support
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 dark:text-slate-400 text-sm" href="#">
|
|
<span class="material-symbols-outlined">sensors</span>
|
|
System Status
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<main class="ml-64 min-h-screen flex flex-col">
|
|
<header class="fixed top-0 right-0 left-64 z-40 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl shadow-sm h-14 flex items-center px-6 justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-headline font-bold text-slate-900 dark:text-slate-50">Sentinel GEWS</span>
|
|
<div class="h-4 w-[1px] bg-outline-variant opacity-20"></div>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-sm font-medium">
|
|
<span>Task ID: #29402</span>
|
|
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
|
<span class="text-on-surface">Amazonia West Sector</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-colors">notifications</button>
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-colors">help</button>
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-colors">grid_view</button>
|
|
<div class="h-8 w-8 rounded-full overflow-hidden border border-outline-variant">
|
|
<img alt="User profile avatar" data-alt="close-up portrait of a professional analyst avatar with glasses and a friendly neutral expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBI9JG5CVwBzs2PoqdY4VF1qh_0KeMJ9Z-0__koMd1cvalJJhB1lCfFlytPPiIhlblGGxBn-O3b-uOxJQ2kvGGPCDiK_YxCujreMlOqcB_nc7yPK9sy_Zam0kwnEOuZBI_jQEj62O4LsCUSaDVBh35QPOgXdhVUQw5lhekR3u34o0VScq0jj7IuxLblNsCFZRl-F3Hr_eww2JhvYxWHcuLQiqURXoL7W69g-eR2pE5c5JUtwprBUGYQh-xUSD1pVMtn6f-rtSDEYTc"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="mt-14 flex-1 flex flex-col overflow-hidden">
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<div class="flex-1 flex gap-[2px] bg-slate-900 p-[1px] relative">
|
|
<div class="relative flex-1 group cursor-crosshair">
|
|
<img alt="Before satellite image" class="w-full h-full object-cover grayscale-[0.2]" data-alt="high-resolution top-down satellite view of a dense tropical rainforest with various shades of deep green canopies and no man-made structures" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOtbG_SRayVoQGjH4l_0y_SzEWpZqJFZ5IQaXNgkucuLG9JfGa1ejdB09z2AF8_2mer8OQ5ZtdqU8Qy39RPGGBQOb5XCB7n2HKvGCG5SoT9XW8nycOeUouuy6JDg5Z_0JHasw9pwUHGjoYG97RsCbA7r9TWobqH-AJCzDoZiQPCP1w73iyYkl3md25GXxk1b18kN8H9D0NiEAg2pkDyLS0zGiclrDyWmrd4XhNN63-XJ9XZskwkd-Lb4Yx2d7EY86UwoENYgKZ2_Y"/>
|
|
<div class="absolute inset-0 bg-red-500/10 pointer-events-none"></div>
|
|
<div class="absolute top-4 left-4 glass-panel px-3 py-1.5 rounded-lg">
|
|
<span class="text-[10px] font-bold tracking-widest text-on-surface-variant uppercase">TIMESTAMP: 2023-11-15</span>
|
|
<div class="text-sm font-headline font-bold">BASE REFERENCE</div>
|
|
</div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 border-2 border-dashed border-white/20 rounded-full flex items-center justify-center">
|
|
<span class="text-white/40 text-[10px] font-medium">AREA_01</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex-1 group cursor-crosshair">
|
|
<img alt="After satellite image" class="w-full h-full object-cover" data-alt="high-resolution top-down satellite view of the same tropical rainforest but with a noticeable clearing and small industrial structures visible" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBusWqGcWAKRdMuL-hM_dkPmmNwaNFyDthxw30nh3linxxDdUE94U0d2K8hSpizGRzyd7iT4nQNxTmkGaJdBxow8jbi6TN6CeSM-2qI0HWXDqQE5n-qybdyjakA27xuFIy45wnq1EmIQcQO8OrpAgEcn7QqhT8KPu9eIyqZaUAqKO42Wh-YlpNBvj2lQdpQr2NCy8e7ot-p7jgITVbefZdbwCLZBqkH71f8i4guD2ssP-skQ3vzjOPoa_DYq4rgcgO_o8SEOoVqHZI"/>
|
|
<div class="absolute top-4 left-4 glass-panel px-3 py-1.5 rounded-lg border-l-2 border-on-secondary-container">
|
|
<span class="text-[10px] font-bold tracking-widest text-on-surface-variant uppercase">TIMESTAMP: 2024-05-20</span>
|
|
<div class="text-sm font-headline font-bold text-on-secondary-container">LIVE DETECTION VIEW</div>
|
|
</div>
|
|
<div class="absolute top-[25%] left-[30%] w-[120px] h-[80px] border-2 border-on-tertiary-container shadow-[0_0_15px_rgba(239,68,68,0.5)]">
|
|
<div class="absolute -top-6 left-0 bg-on-tertiary-container text-white text-[10px] px-2 py-0.5 font-bold rounded-t-sm">
|
|
NEW STRUCTURE [98.4%]
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-[20%] right-[25%] w-[200px] h-[150px] border-2 border-amber-500 shadow-[0_0_15px_rgba(245,158,11,0.5)]">
|
|
<div class="absolute -top-6 left-0 bg-amber-500 text-white text-[10px] px-2 py-0.5 font-bold rounded-t-sm">
|
|
VEGETATION CLEARANCE [87.1%]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
|
|
<div class="bg-primary text-white p-2 rounded-full shadow-xl">
|
|
<span class="material-symbols-outlined">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<aside class="w-80 bg-surface-container-low border-l border-outline-variant/15 flex flex-col">
|
|
<div class="p-6">
|
|
<h2 class="text-lg font-headline font-bold mb-4">Object Analytics</h2>
|
|
<div class="space-y-4">
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-on-tertiary-container"></div>
|
|
<span class="text-sm font-semibold">Industrial Bldg</span>
|
|
</div>
|
|
<span class="text-xs font-label bg-tertiary-container text-on-tertiary-container px-2 py-0.5 rounded-full">Alert</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-3">
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Confidence</p>
|
|
<p class="text-sm font-bold">98.42%</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Size (Est)</p>
|
|
<p class="text-sm font-bold">1,420 m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
|
|
<span class="text-sm font-semibold">Cleared Area</span>
|
|
</div>
|
|
<span class="text-xs font-label bg-amber-500/10 text-amber-600 px-2 py-0.5 rounded-full">Review</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-3">
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Confidence</p>
|
|
<p class="text-sm font-bold">87.11%</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Size (Est)</p>
|
|
<p class="text-sm font-bold">4.2 Hec</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl opacity-60">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-on-secondary-container"></div>
|
|
<span class="text-sm font-semibold">Road Extension</span>
|
|
</div>
|
|
<span class="text-xs font-label bg-secondary-container text-on-secondary-container px-2 py-0.5 rounded-full">System</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-3">
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Confidence</p>
|
|
<p class="text-sm font-bold">64.5%</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-medium uppercase">Size (Est)</p>
|
|
<p class="text-sm font-bold">240 m</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto p-6 bg-surface-container flex flex-col gap-3">
|
|
<button class="w-full bg-on-tertiary-container text-white py-3 rounded-xl font-bold font-headline tracking-wide flex items-center justify-center gap-2 transition-transform active:scale-[0.98]">
|
|
<span class="material-symbols-outlined text-lg">warning</span>
|
|
Raise Alert
|
|
</button>
|
|
<button class="w-full bg-surface-container-highest text-on-surface py-3 rounded-xl font-bold font-headline transition-colors hover:bg-slate-300">
|
|
Ignore
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<div class="h-28 bg-surface-container-lowest border-t border-outline-variant/15 flex items-center px-10 gap-16">
|
|
<div class="flex-shrink-0">
|
|
<p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest mb-1">Change Score</p>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-4xl font-headline font-extrabold text-on-tertiary-container">82</span>
|
|
<span class="text-on-surface-variant font-medium">/ 100</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-10 w-[1px] bg-outline-variant/30"></div>
|
|
<div>
|
|
<p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest mb-1">New Objects Detected</p>
|
|
<div class="flex items-center gap-6">
|
|
<div>
|
|
<span class="text-2xl font-headline font-bold">03</span>
|
|
<span class="text-xs font-medium text-on-surface-variant ml-1">Confirmed</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-2xl font-headline font-bold text-amber-500">01</span>
|
|
<span class="text-xs font-medium text-on-surface-variant ml-1">Ambiguous</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-10 w-[1px] bg-outline-variant/30"></div>
|
|
<div class="flex-1">
|
|
<p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest mb-2">Object Types</p>
|
|
<div class="flex gap-2">
|
|
<span class="bg-surface-container text-[11px] px-3 py-1 rounded-full font-bold">STRUCTURES</span>
|
|
<span class="bg-surface-container text-[11px] px-3 py-1 rounded-full font-bold text-on-tertiary-container">DEFORESTATION</span>
|
|
<span class="bg-surface-container text-[11px] px-3 py-1 rounded-full font-bold">INFRASTRUCTURE</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-right">
|
|
<p class="text-[10px] text-on-surface-variant font-bold uppercase">Processing Mode</p>
|
|
<p class="text-xs font-bold text-on-secondary-container flex items-center justify-end gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-on-secondary-container"></span>
|
|
Neural-X Live
|
|
</p>
|
|
</div>
|
|
<button class="p-2 rounded-lg border border-outline-variant/20 hover:bg-surface-container transition-colors">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg border border-outline-variant/20 hover:bg-surface-container transition-colors">
|
|
<span class="material-symbols-outlined">download</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fixed bottom-32 left-72 flex gap-1 glass-panel p-1 rounded-xl shadow-lg border border-white/40">
|
|
<button class="p-2 hover:bg-primary/5 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">zoom_in</span>
|
|
</button>
|
|
<button class="p-2 hover:bg-primary/5 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">zoom_out</span>
|
|
</button>
|
|
<div class="w-[1px] h-4 bg-outline-variant/40 self-center mx-1"></div>
|
|
<button class="p-2 hover:bg-primary/5 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">layers</span>
|
|
</button>
|
|
<button class="p-2 hover:bg-primary/5 rounded-lg text-primary">
|
|
<span class="material-symbols-outlined">measuring_tape</span>
|
|
</button>
|
|
<button class="p-2 bg-primary text-white rounded-lg">
|
|
<span class="material-symbols-outlined">compare</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<div class="fixed bottom-4 right-4 bg-primary-container text-on-primary-container p-3 rounded-full shadow-2xl flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
|
</div>
|
|
</body></html> |