admin/39686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
39686-vm/alert_management_gews/code.html
Flatlogic Bot df11041ee0 Initial import
2026-04-16 10:51:47 +00:00

373 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
vertical-align: middle;
}
body { font-family: 'Inter', sans-serif; }
.headline-font { font-family: 'Manrope', sans-serif; }
</style>
</head>
<body class="bg-surface text-on-surface antialiased">
<!-- 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">
<div class="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 dark:text-slate-50">Sentinel GEWS</span>
<div class="hidden md:flex items-center bg-surface-container-low px-3 py-1.5 rounded-lg border border-outline-variant/10">
<span class="material-symbols-outlined text-on-surface-variant text-sm mr-2">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm w-64 placeholder:text-on-surface-variant" placeholder="Search parcels..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<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-primary-container overflow-hidden">
<img alt="User profile avatar" class="w-full h-full object-cover" data-alt="professional headshot of a geospatial analyst in a modern office setting with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuATfE2UD4NTN-PG_HkO_eKxz3Koc9FH4Uw2eSFoZVaDfj2wzYUC9LAWw8YHs3X_F9CDS05ovbzXV3mMiz1D3hZaa1ZAHIhY8F8EGxU_fhLCWV1nXDCeh2yzhgzHZWL_ClFGs9FVjgogUfmXXaLb0SOKhrWCu5PPBFE-o2jzp-o3jNIg03tWDaxw0pmXsvatn7wojadj1eaSaOhhGV06NcF2AoD0rvzsP2oQpRQPaM3uoCe7zkU-Pqlpx56AtdyUg28InYHqXLUhzD4"/>
</div>
</div>
</div>
<div class="bg-slate-200/50 dark:bg-slate-800/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 dark:bg-slate-950 flex flex-col py-6 px-4 gap-2 pt-20 border-r border-outline-variant/10">
<div class="mb-6 px-4">
<h2 class="font-['Manrope'] font-bold text-lg text-slate-900 dark:text-slate-50">Precision Sentinel</h2>
<p class="text-xs text-on-surface-variant">Enterprise Geospatial</p>
</div>
<nav class="flex-1 space-y-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 transition-all rounded-lg font-medium text-sm" 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 transition-all rounded-lg font-medium text-sm" href="#">
<span class="material-symbols-outlined">map</span> Parcels
</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 text-sm" href="#">
<span class="material-symbols-outlined">crisis_alert</span> Alerts
</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 transition-all rounded-lg font-medium text-sm" 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 transition-all rounded-lg font-medium text-sm" 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 transition-all rounded-lg font-medium text-sm" href="#">
<span class="material-symbols-outlined">settings</span> Settings
</a>
</nav>
<div class="mt-auto space-y-1 pt-6 border-t border-outline-variant/10">
<button class="w-full flex items-center justify-center gap-2 bg-primary text-on-primary py-2.5 rounded-md text-sm font-semibold mb-4 transition-all active:scale-[0.98]">
<span class="material-symbols-outlined text-sm">add</span> New Analysis
</button>
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 text-sm hover:text-slate-900" href="#"><span class="material-symbols-outlined text-sm">contact_support</span> Support</a>
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 text-sm hover:text-slate-900" href="#"><span class="material-symbols-outlined text-sm">sensors</span> System Status</a>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="ml-64 pt-20 p-8 min-h-screen">
<div class="max-w-7xl mx-auto">
<!-- Header & Page Title -->
<div class="mb-8 flex justify-between items-end">
<div>
<h1 class="text-4xl font-extrabold headline-font tracking-tight text-on-surface mb-2">Alert Management</h1>
<p class="text-on-surface-variant max-w-2xl">Review and manage geospatial change detections across monitored assets. Evaluate high-confidence anomalies triggered by neural processing.</p>
</div>
<div class="flex gap-3">
<button class="bg-surface-container-high text-on-surface px-4 py-2 rounded-md text-sm font-medium hover:bg-surface-container-highest transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm">download</span> Export List
</button>
</div>
</div>
<!-- Filters Strip -->
<div class="bg-surface-container-lowest rounded-xl p-2 mb-6 flex items-center justify-between shadow-sm border border-outline-variant/5">
<div class="flex gap-1">
<button class="px-5 py-2 rounded-lg text-sm font-semibold bg-primary text-on-primary shadow-md">Pending (14)</button>
<button class="px-5 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Approved (128)</button>
<button class="px-5 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Rejected (42)</button>
</div>
<div class="flex items-center gap-4 px-4">
<div class="flex items-center gap-2 text-sm text-on-surface-variant">
<span class="material-symbols-outlined text-sm">filter_list</span>
<span>Severity: All</span>
</div>
<div class="flex items-center gap-2 text-sm text-on-surface-variant border-l border-outline-variant/20 pl-4">
<span class="material-symbols-outlined text-sm">calendar_month</span>
<span>Last 30 Days</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<!-- Table Section -->
<div class="xl:col-span-2 space-y-4">
<div class="bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/5 shadow-sm">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50 text-[10px] uppercase tracking-widest font-bold text-on-surface-variant">
<th class="px-6 py-4">Parcel Name</th>
<th class="px-6 py-4">Detected</th>
<th class="px-6 py-4">Severity</th>
<th class="px-6 py-4">Status</th>
<th class="px-6 py-4 text-right">Confidence</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/10">
<!-- Row 1 (Active/Selected) -->
<tr class="bg-surface-container-low/30 hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-6 py-5">
<div class="font-semibold text-on-surface">Amazon Basin Sector-4</div>
<div class="text-xs text-on-surface-variant">ID: AMZ-492-BX</div>
</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Oct 24, 2023</td>
<td class="px-6 py-5">
<span class="px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-container text-on-tertiary-container">Critical</span>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2 text-sm text-amber-600 font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span> Pending
</div>
</td>
<td class="px-6 py-5 text-right">
<span class="font-mono text-sm font-bold text-on-surface">98.2%</span>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-6 py-5">
<div class="font-semibold text-on-surface">Redwood Preserve North</div>
<div class="text-xs text-on-surface-variant">ID: RWD-102-AQ</div>
</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Oct 23, 2023</td>
<td class="px-6 py-5">
<span class="px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-surface-container-high text-on-surface">Warning</span>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2 text-sm text-amber-600 font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span> Pending
</div>
</td>
<td class="px-6 py-5 text-right">
<span class="font-mono text-sm font-bold text-on-surface">84.5%</span>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-6 py-5">
<div class="font-semibold text-on-surface">Sahara Solar Array C</div>
<div class="text-xs text-on-surface-variant">ID: SHR-771-DA</div>
</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Oct 22, 2023</td>
<td class="px-6 py-5">
<span class="px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-secondary-container text-on-secondary-container">Info</span>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2 text-sm text-amber-600 font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span> Pending
</div>
</td>
<td class="px-6 py-5 text-right">
<span class="font-mono text-sm font-bold text-on-surface">72.1%</span>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-6 py-5">
<div class="font-semibold text-on-surface">Congo Basin Edge</div>
<div class="text-xs text-on-surface-variant">ID: CON-238-MK</div>
</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Oct 21, 2023</td>
<td class="px-6 py-5">
<span class="px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-container text-on-tertiary-container">Critical</span>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2 text-sm text-amber-600 font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span> Pending
</div>
</td>
<td class="px-6 py-5 text-right">
<span class="font-mono text-sm font-bold text-on-surface">99.4%</span>
</td>
</tr>
</tbody>
</table>
<div class="p-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
<span class="text-xs text-on-surface-variant font-medium">Showing 4 of 14 Pending Alerts</span>
<div class="flex gap-2">
<button class="p-1 rounded hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined text-sm">chevron_left</span></button>
<button class="p-1 rounded hover:bg-surface-container-high transition-colors"><span class="material-symbols-outlined text-sm">chevron_right</span></button>
</div>
</div>
</div>
</div>
<!-- Alert Detail Panel (Summary View) -->
<div class="xl:col-span-1">
<div class="sticky top-24 space-y-6">
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant/5 shadow-xl overflow-hidden flex flex-col">
<div class="p-6 border-b border-outline-variant/10">
<div class="flex justify-between items-start mb-4">
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-tertiary-container text-on-tertiary-container">Critical Alert</span>
<button class="text-on-surface-variant hover:text-on-surface transition-colors">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<h3 class="text-xl font-extrabold headline-font text-on-surface">Amazon Basin Sector-4</h3>
<p class="text-xs text-on-surface-variant mt-1 font-medium tracking-tight">COORDINATES: -3.4653, -62.2159 • SATELLITE: SENTINEL-2</p>
</div>
<div class="p-6 space-y-6">
<!-- Change Detection Comparison -->
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<p class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Before (Sept 12)</p>
<div class="aspect-square rounded-lg overflow-hidden relative border border-outline-variant/10">
<img alt="Satellite view of dense tropical rainforest" class="w-full h-full object-cover" data-alt="high-resolution top-down satellite view of a lush green tropical rainforest canopy with deep emerald tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuCq3i4To3DoXWG19pb9TNAANIQsRIzS6oraYnR6yGc3oKoD-1TtvZLMQz3sgL-XhM1a6kQa-RdVGxNo3SBINvcb0b76ua5f_gnHGl6PzzFzzP5ilvYTDgAZMeb_4sXYte6s0NyQ83hmHRqQMRBOEhXKHjqdcOUdaQ_A3LHisPugMbECuxI3v9GR0p-4_0MZNRSDajr9_lTwE90--YjT0cwKoAjLvtu2zCHXRYuLmLOBOmfBl3Tm6ujogtbcPN3zJjWElJOyCA2fo"/>
</div>
</div>
<div class="space-y-2">
<p class="text-[10px] font-bold uppercase tracking-widest text-on-tertiary-container">After (Oct 24)</p>
<div class="aspect-square rounded-lg overflow-hidden relative border-2 border-on-tertiary-container/30">
<img alt="Satellite view of rainforest with brown clearing area" class="w-full h-full object-cover" data-alt="satellite view of the same rainforest area showing a prominent brown patch of deforestation with high contrast" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7z-nMtRKctli7RjMTg5uSeBBdpZ6i2cU_tDnkfQ8MZy_g8qqUhys52idbr9Rfkx217KgWukGRKRX5u5qfWheM3JG9PcXXxgweiM4KP5scKolztKZ2jJIiUDwUZ82HTDvsIABIdDkoH-RJs1AcU64u3g7-i04jG9TlDbDPoV4FNVoA0tPK8LJNtXmciiF-BDX0XXVC3rtl302E-0Qn7tKQxtG5BVTIA1WX0NDe49v2UAe03XPe-YzKuaKfQ5OBCxFszzNpsSc_KRY"/>
<div class="absolute inset-0 bg-on-tertiary-container/10 flex items-center justify-center">
<div class="w-16 h-16 border-2 border-on-tertiary-container border-dashed rounded-md flex items-center justify-center">
<span class="text-[8px] font-bold text-on-tertiary-container bg-surface-container-lowest px-1">ANOMALY</span>
</div>
</div>
</div>
</div>
</div>
<!-- Analysis Details -->
<div class="space-y-4">
<div class="bg-surface-container-low p-4 rounded-lg">
<h4 class="text-xs font-bold uppercase tracking-widest text-on-surface mb-2">Change Profile</h4>
<p class="text-sm text-on-surface-variant leading-relaxed">AI detected a <span class="text-on-tertiary-container font-bold">12.4 hectare</span> reduction in primary canopy cover. Thermal signatures suggest recent heavy machinery activity in the southwestern quadrant.</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="border border-outline-variant/20 p-3 rounded-lg">
<p class="text-[10px] font-bold uppercase text-on-surface-variant mb-1">Confidence Score</p>
<p class="text-lg font-bold text-on-surface">98.2%</p>
</div>
<div class="border border-outline-variant/20 p-3 rounded-lg">
<p class="text-[10px] font-bold uppercase text-on-surface-variant mb-1">Alert Type</p>
<p class="text-lg font-bold text-on-surface">Land Clearing</p>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-3 pt-4 border-t border-outline-variant/10">
<button class="flex-1 bg-primary text-on-primary py-3 rounded-lg text-sm font-bold tracking-tight shadow-lg active:scale-[0.98] transition-all">
Approve &amp; Escalate
</button>
<button class="flex-1 bg-surface-container-high text-on-surface py-3 rounded-lg text-sm font-bold tracking-tight hover:bg-surface-container-highest transition-all">
Dismiss Alert
</button>
</div>
</div>
<!-- Metadata Footer -->
<div class="px-6 py-4 bg-surface-container-low/50 flex items-center gap-2 text-xs text-on-surface-variant font-medium">
<span class="material-symbols-outlined text-sm">history</span>
Last checked by System AI 14 minutes ago
</div>
</div>
<!-- Quick View Context Map -->
<div class="bg-surface-container-lowest rounded-xl p-4 border border-outline-variant/5 shadow-sm">
<div class="flex justify-between items-center mb-3">
<p class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Regional Context</p>
<button class="text-xs text-primary font-bold">Open Map</button>
</div>
<div class="h-32 bg-slate-200 rounded-lg overflow-hidden grayscale">
<img alt="Contextual map of the Amazon region" class="w-full h-full object-cover opacity-60" data-location="Amazon Rainforest" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDs0kJgVZPTWGArwGc8Gx-uYbKOvZaSunfbWelj2TdurmzpZ3gGrnu-l5oBTAKj35CaPVEwMCoTI2divwd2nqoDlDpv0gGbghCvD_9fahIqttdxHxj4IRf3HEdQJH-vgoryPY5UNOavO2pDsNvtXkwJjaH1zX7I9Jar9j0iQtU-TTWx-Dxpg_HJUh_qkZPJX4z-kRSVx9CF5rfPHKOngXw0IXXgrMpIyZEIwyBd7wZH_mH2iQftEiqYSUFw0sHm4uvGvdmc6pIOuXo"/>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Coordinates Strip -->
<footer class="fixed bottom-0 left-64 right-0 h-10 bg-surface-container-lowest/80 backdrop-blur-md border-t border-outline-variant/10 z-40 flex items-center px-6 justify-between text-[10px] font-bold tracking-widest text-on-surface-variant uppercase">
<div class="flex gap-6">
<span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[14px]">my_location</span> LAT: -3.465331</span>
<span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[14px]">location_searching</span> LNG: -62.215904</span>
</div>
<div class="flex gap-6">
<span class="flex items-center gap-1.5 text-secondary"><span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">sensors</span> LIVE FEED: NOMINAL</span>
<span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[14px]">schedule</span> UTC: 14:22:01</span>
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink