265 lines
15 KiB
HTML
265 lines
15 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>Analyst Validation Panel - Sentinel GEWS</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;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": {
|
|
"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;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.image-compare-handle {
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface selection:bg-secondary-container">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl shadow-sm dark:shadow-none flex justify-between items-center px-6 py-3">
|
|
<div class="flex items-center gap-8">
|
|
<h1 class="text-xl font-bold font-['Manrope'] tracking-tight text-slate-900 dark:text-slate-50">Sentinel GEWS</h1>
|
|
<nav class="hidden md:flex gap-6">
|
|
<a class="text-slate-500 dark:text-slate-400 font-['Inter'] text-sm font-medium tracking-tight hover:text-slate-900 dark:hover:text-slate-100 transition-colors" href="#">Dashboard</a>
|
|
<a class="text-slate-900 dark:text-white font-semibold border-b-2 border-slate-900 dark:border-white font-['Inter'] text-sm tracking-tight" href="#">Detection Insights</a>
|
|
<a class="text-slate-500 dark:text-slate-400 font-['Inter'] text-sm font-medium tracking-tight hover:text-slate-900 dark:hover:text-slate-100 transition-colors" href="#">Parcels</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-slate-500">notifications</span>
|
|
<span class="material-symbols-outlined text-slate-500">help</span>
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden">
|
|
<img alt="User profile avatar" class="w-full h-full object-cover" data-alt="professional male analyst headshot with neutral background, sharp focus, corporate lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBSBl4tjuWFHNK8NMhESu8QSWRwUCgXWW7MxuCp1PG_9Q4tNJoL1JHOkokULLNBYegvxfrY3SFKLSt3BSNLiSXIYHV0Zu2O2q3aKsGaYhJokCUtdNbECQRAeiLjM3X0gz9pDczrjeYGowoszjHEgMRvvvKalIE26SCCw9n36O2GXXswGqv3HF76ga4OeQfx-PeKdnBhNimHiFFebb_6IP3l7_rn-EyYEh-l90zrTq9xrYAMo2rhmTJBS15DTYKDpsviMPVD1lKdVM"/>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-200/50 dark:bg-slate-800/50 h-[1px] w-full absolute bottom-0 left-0"></div>
|
|
</header>
|
|
<!-- SideNavBar (Suppressed for focused task-flow but keeping for layout context if needed - actually applying the suppression rule as this is a focused task) -->
|
|
<main class="pt-16 min-h-screen flex">
|
|
<!-- Central Analysis Canvas -->
|
|
<section class="flex-1 p-6 flex flex-col gap-6">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant font-label mb-1 block">Task ID: #GE-8842-X</span>
|
|
<h2 class="text-2xl font-headline font-bold text-on-surface">Detection Validation: Unauthorized Clearing</h2>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-surface-container-high text-on-surface font-medium hover:bg-surface-container-highest transition-all">
|
|
<span class="material-symbols-outlined text-sm">keyboard_arrow_left</span>
|
|
<span>Previous</span>
|
|
</button>
|
|
<span class="font-label text-sm text-on-surface-variant">4 of 12 Pending</span>
|
|
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-surface-container-high text-on-surface font-medium hover:bg-surface-container-highest transition-all">
|
|
<span>Next</span>
|
|
<span class="material-symbols-outlined text-sm">keyboard_arrow_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Comparison View -->
|
|
<div class="flex-1 bg-surface-container-lowest rounded-xl overflow-hidden relative group flex">
|
|
<div class="w-1/2 relative border-r-2 border-surface-container overflow-hidden">
|
|
<img alt="Reference Imagery" class="w-full h-full object-cover" data-alt="satellite view of dense green tropical rainforest with vibrant canopy and deep shadows, high resolution terrain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlRSdJWfMbe-qMddhRdD7oWKyxDwSyvZIOb76nSSevJONX3iPfDtjBwVK02GsKapJ0hKTQGqdb8b8sKsDfjBKub9GAG56YhbLBRj_HfJKAQuKEFgK_Y_fWTBkpyJD5a8KMwllcvswf-i_zbZjTSOZKlQ82vb2fPJ8umtuO5WGo8DKU2HCtzWxF1fb3C0fVNkMepqqrZJk9b6ZNQBEdGI90NWPa6QoDmPCQqwmGlvYIH898hgmiINcLDR_SuzheNOGNP1c4Id1OIhY"/>
|
|
<div class="absolute top-4 left-4 glass-panel px-3 py-1.5 rounded-md">
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface tracking-wider">Reference: May 2023</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 relative overflow-hidden">
|
|
<img alt="Current Imagery" class="w-full h-full object-cover" data-alt="satellite view of the same rainforest area showing partial brown clearing and dirt tracks, high resolution change detection" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAR21XqZ4A3U5aVR7Lm5Lc_89zVCxIkHePC-ckswHesiJNm_9y6nCL3g0jhajPnVXqdcimqMVEkKf2stcv6NEB14BHlGUwd_9V8YIVw0pGfk465CC1vDMN66i2RBMd8atK9em68g2pfv8t-WDHSzIgisyjx2yKtx_zHjvfeecDUbIP9dic11WfmikbDbx9T-LtMEu1OXsA1k_IZvCEEdDuOQ03s_DMQWYYIcX1856LQcApCraDj2iKqV0PDoTmMgTXNzsrcoRLmXfU"/>
|
|
<div class="absolute top-4 left-4 glass-panel px-3 py-1.5 rounded-md">
|
|
<span class="text-[10px] font-bold font-label uppercase text-on-surface tracking-wider">Current: Oct 2023</span>
|
|
</div>
|
|
<!-- Detection Highlight Overlay -->
|
|
<div class="absolute inset-0 pointer-events-none border-4 border-on-tertiary-container/40 m-20 rounded-xl"></div>
|
|
</div>
|
|
<!-- Control Overlay -->
|
|
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-1 glass-panel p-1 rounded-lg">
|
|
<button class="p-2 hover:bg-surface-container rounded-md"><span class="material-symbols-outlined">zoom_in</span></button>
|
|
<button class="p-2 hover:bg-surface-container rounded-md"><span class="material-symbols-outlined">zoom_out</span></button>
|
|
<button class="p-2 hover:bg-surface-container rounded-md"><span class="material-symbols-outlined">layers</span></button>
|
|
<div class="w-px h-6 bg-outline-variant/30 self-center mx-1"></div>
|
|
<button class="p-2 hover:bg-surface-container rounded-md"><span class="material-symbols-outlined">fullscreen</span></button>
|
|
</div>
|
|
</div>
|
|
<!-- Metadata Ribbon -->
|
|
<div class="h-12 bg-surface-container-lowest rounded-lg border border-outline-variant/15 flex items-center px-4 gap-8">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-outline">location_on</span>
|
|
<span class="text-xs font-label font-bold tracking-tight">40.7128° N, 74.0060° W</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-outline">sensor_occupied</span>
|
|
<span class="text-xs font-label font-bold tracking-tight">Sentinel-2B • MSI Sensor</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-outline">cloud</span>
|
|
<span class="text-xs font-label font-bold tracking-tight">2.4% Cloud Coverage</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Right Decision Panel -->
|
|
<aside class="w-[400px] bg-surface-container-low p-6 flex flex-col gap-8">
|
|
<!-- Confidence & Risk -->
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-xs font-bold uppercase tracking-widest text-on-surface-variant font-label mb-4">AI Confidence Profile</h3>
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl">
|
|
<div class="flex justify-between items-end mb-2">
|
|
<span class="text-3xl font-headline font-bold text-on-surface">94<span class="text-lg opacity-50">%</span></span>
|
|
<span class="text-xs font-label text-on-secondary-container bg-secondary-container px-2 py-0.5 rounded-full font-bold">HIGH CERTAINTY</span>
|
|
</div>
|
|
<div class="w-full h-2 bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-secondary-container" style="width: 94%"></div>
|
|
</div>
|
|
<p class="mt-3 text-xs text-on-surface-variant leading-relaxed">
|
|
Spectral signatures suggest recent vegetation removal with 94% probability matching "Commercial Deforestation" patterns.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xs font-bold uppercase tracking-widest text-on-surface-variant font-label mb-4">Impact Risk Score</h3>
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl flex items-center gap-4">
|
|
<div class="relative w-16 h-16 flex items-center justify-center">
|
|
<svg class="w-full h-full -rotate-90">
|
|
<circle class="text-surface-container" cx="32" cy="32" fill="transparent" r="28" stroke="currentColor" stroke-width="6"></circle>
|
|
<circle class="text-on-tertiary-container" cx="32" cy="32" fill="transparent" r="28" stroke="currentColor" stroke-dasharray="175" stroke-dashoffset="40" stroke-width="6"></circle>
|
|
</svg>
|
|
<span class="absolute text-sm font-headline font-extrabold text-on-tertiary-container">7.8</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-bold block text-on-surface">Critical Zone</span>
|
|
<span class="text-xs text-on-surface-variant">Located within 2km of protected watershed.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Decision Interface -->
|
|
<div class="flex-1 flex flex-col gap-6">
|
|
<div class="space-y-4">
|
|
<h3 class="text-xs font-bold uppercase tracking-widest text-on-surface-variant font-label">Analyst Validation</h3>
|
|
<!-- Approve / Reject Toggle -->
|
|
<div class="grid grid-cols-2 gap-2 bg-surface-container p-1 rounded-xl">
|
|
<button class="flex items-center justify-center gap-2 py-3 rounded-lg bg-white shadow-sm text-secondary font-bold text-sm transition-all">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
Approve
|
|
</button>
|
|
<button class="flex items-center justify-center gap-2 py-3 rounded-lg text-on-surface-variant font-medium text-sm hover:bg-white/50 transition-all">
|
|
<span class="material-symbols-outlined">cancel</span>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
<!-- Comments -->
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-label font-semibold text-on-surface-variant">Decision Notes</label>
|
|
<textarea class="w-full h-32 bg-surface-container-lowest border-0 rounded-xl p-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-outline/50 resize-none" placeholder="Provide rationale for validation or rejection..."></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- Action Button -->
|
|
<button class="mt-auto w-full py-4 rounded-xl bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold tracking-tight text-sm shadow-lg shadow-primary/10 hover:opacity-90 transition-all flex items-center justify-center gap-2">
|
|
Submit Final Validation
|
|
<span class="material-symbols-outlined text-sm">send</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
<!-- Contextual Telemetry Strip -->
|
|
<div class="fixed bottom-0 left-0 right-0 h-12 bg-surface-container-lowest border-t border-outline-variant/15 flex items-center px-6 justify-between z-40">
|
|
<div class="flex gap-6">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-secondary animate-pulse"></div>
|
|
<span class="text-[10px] font-bold font-label uppercase tracking-widest text-on-surface-variant">Live Feed Status: Optimal</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[10px] font-bold font-label uppercase tracking-widest text-on-surface-variant">Processing Latency: 142ms</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<span class="text-[10px] font-bold font-label uppercase tracking-widest text-on-surface">Draft Saved 2m ago</span>
|
|
<span class="text-[10px] font-bold font-label uppercase tracking-widest text-outline">Session: Analyst_774</span>
|
|
</div>
|
|
</div>
|
|
</body></html> |