Initial import
This commit is contained in:
Flatlogic Bot
commit
df11041ee0
269
add_parcel_gews/code.html
Normal file
269
add_parcel_gews/code.html
Normal file
@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Add Parcel - 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;600;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;
|
||||
}
|
||||
.glass-overlay {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, #000000 0%, #131b2e 100%);
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<nav 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 gap-6 items-center">
|
||||
<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="#">Parcels</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="#">Alerts</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative hidden lg:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
|
||||
<input class="bg-surface-container-highest border-none rounded-lg pl-10 pr-4 py-1.5 text-sm w-64 focus:ring-2 focus:ring-primary/20" placeholder="Search Area" type="text"/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-surface-container rounded-full transition-all">
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant/30">
|
||||
<img alt="User profile avatar" data-alt="professional portrait of a system administrator in a tech environment, clean lighting, soft bokeh" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqHdRlZTH3lX7WuqVhzef4pTAJnkbm4NQgaxfxCyC9cMMtfX_ejxuReP7-fw2ADs7EP9TnkcxvDQFrEJ_Wtp_wMsEgg7Vp1Svpd2vzfoda06T5-LNhJU0ouqKiXMbDEA2IZe7U6kq48WLb9QEuSejtHfugSU_tFOy1MEeVKIz22HKp94a-PlX1nKcXMKl0b1b7GCVpn9pOlOCxKf5W4efywfkhGvD9FmS2d4_zqFdtTt31RZ3odJlHzvaCYM8_AA0UiIew8jSED_k"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-200/50 dark:bg-slate-800/50 h-[1px] w-full absolute bottom-0"></div>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-[60px] h-screen flex overflow-hidden">
|
||||
<!-- Map Drawing Interface (Left) -->
|
||||
<section class="flex-grow relative bg-surface-container-low overflow-hidden">
|
||||
<!-- Map Placeholder -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img class="w-full h-full object-cover" data-alt="high-resolution satellite view of geometric green and brown agricultural fields with irrigation patterns and sharp boundaries" data-location="Northern California Farmland" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDs5trkh4aIU3jsZZ3A6CxsG1Zdn8_SKyaUs-h3fbnvQ8K-TnvgvvjZyW7Q4RPIsQlDAcVg_hUYlUcXvWcsp_vSYYELQ4UYdprxnmf-qRsXVPUSWVFH6SGZp35_iCpp4RBKMlNizr_xB16STiJ0cP4fNFgxkoqL1quvxMstiV73pxU3NWGNLWdhXnDx1SX02tA7eBfOVpz_X5ae_lhEnnc1KJr9_CReVIycqnblGi5NkH43pyQjjaijrSo23LvIomqYFXYlE2GAMtc"/>
|
||||
<!-- SVG Drawing Layer Overlay -->
|
||||
<svg class="absolute inset-0 w-full h-full pointer-events-none" viewbox="0 0 1000 1000">
|
||||
<polygon fill="rgba(108, 248, 187, 0.2)" points="400,300 650,320 700,550 450,580" stroke="#006c49" stroke-width="3"></polygon>
|
||||
<circle class="pointer-events-auto cursor-move" cx="400" cy="300" fill="#ffffff" r="6" stroke="#006c49" stroke-width="2"></circle>
|
||||
<circle class="pointer-events-auto cursor-move" cx="650" cy="320" fill="#ffffff" r="6" stroke="#006c49" stroke-width="2"></circle>
|
||||
<circle class="pointer-events-auto cursor-move" cx="700" cy="550" fill="#ffffff" r="6" stroke="#006c49" stroke-width="2"></circle>
|
||||
<circle class="pointer-events-auto cursor-move" cx="450" cy="580" fill="#ffffff" r="6" stroke="#006c49" stroke-width="2"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Floating Map Tools -->
|
||||
<div class="absolute top-6 left-6 flex flex-col gap-2">
|
||||
<div class="glass-overlay p-1.5 rounded-xl shadow-xl flex flex-col gap-1 border border-outline-variant/15">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-container text-on-primary font-bold">
|
||||
<span class="material-symbols-outlined">polyline</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">edit_square</span>
|
||||
</button>
|
||||
<div class="h-px bg-outline-variant/20 mx-2"></div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">undo</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="glass-overlay p-1.5 rounded-xl shadow-xl flex flex-col gap-1 border border-outline-variant/15">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">layers</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface-variant hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">my_location</span>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="absolute bottom-24 right-6 flex flex-col gap-2">
|
||||
<div class="glass-overlay p-1 rounded-xl shadow-xl flex flex-col gap-1 border border-outline-variant/15">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
<div class="h-px bg-outline-variant/20 mx-2"></div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg text-on-surface hover:bg-surface-container transition-all">
|
||||
<span class="material-symbols-outlined">remove</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Telemetry Strip (Signature Component) -->
|
||||
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 glass-overlay border border-outline-variant/15 px-6 py-2 rounded-full shadow-lg flex items-center gap-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Lat:</span>
|
||||
<span class="font-['Inter'] text-sm font-medium">38.5449° N</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Long:</span>
|
||||
<span class="font-['Inter'] text-sm font-medium">121.7405° W</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Elev:</span>
|
||||
<span class="font-['Inter'] text-sm font-medium">16m MSL</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Parcel Details Sidebar (Right) -->
|
||||
<aside class="w-[420px] bg-surface border-l-0 shadow-2xl z-10 flex flex-col">
|
||||
<div class="p-8 flex-grow overflow-y-auto">
|
||||
<header class="mb-10">
|
||||
<h1 class="text-3xl font-extrabold tracking-tight text-on-surface mb-2">New Analysis</h1>
|
||||
<p class="text-on-surface-variant font-['Inter'] text-sm leading-relaxed">Define your parcel boundaries on the map to begin multispectral monitoring and threat detection.</p>
|
||||
</header>
|
||||
<form class="space-y-8">
|
||||
<!-- Parcel Name -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-[11px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Parcel Identity</label>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-xl px-4 py-4 text-on-surface placeholder:text-on-surface-variant/50 focus:ring-2 focus:ring-primary/10 transition-all font-['Inter']" placeholder="e.g., North Ridge Sector A" type="text"/>
|
||||
</div>
|
||||
<!-- Area (Auto-calculated) -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-[11px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Computed Geometry</label>
|
||||
<div class="bg-surface-container-highest/40 p-6 rounded-xl border border-outline-variant/10">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<span class="text-on-surface-variant text-sm font-medium">Total Area</span>
|
||||
<div class="text-right">
|
||||
<div class="text-3xl font-extrabold text-on-surface font-['Manrope']">42.85</div>
|
||||
<div class="text-xs font-bold text-on-secondary-container bg-secondary-container/30 px-2 py-0.5 rounded-full inline-block mt-1">HECTARES</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Notes -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-[11px] font-bold text-on-surface-variant tracking-widest uppercase font-['Inter']">Operational Notes</label>
|
||||
<textarea class="w-full bg-surface-container-low border-none rounded-xl px-4 py-4 text-on-surface placeholder:text-on-surface-variant/50 focus:ring-2 focus:ring-primary/10 transition-all font-['Inter']" placeholder="Describe terrain, crop type, or historical data..." rows="4"></textarea>
|
||||
</div>
|
||||
<!-- Additional Metadata (Bento-style items) -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-low p-4 rounded-xl space-y-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-tight">CROP TYPE</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-sm">Vineyards</span>
|
||||
<span class="material-symbols-outlined text-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-4 rounded-xl space-y-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-tight">SOIL CLASS</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-sm">Class II</span>
|
||||
<span class="material-symbols-outlined text-sm">info</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Footer Action -->
|
||||
<div class="p-8 bg-surface-container-lowest border-t border-outline-variant/10">
|
||||
<div class="flex gap-4">
|
||||
<button class="flex-1 py-4 text-on-surface font-bold text-sm bg-surface-container-high rounded-xl hover:bg-surface-container-highest transition-all duration-200 active:scale-[0.98]">
|
||||
Discard
|
||||
</button>
|
||||
<button class="flex-[2] py-4 primary-gradient text-on-primary font-bold text-sm rounded-xl shadow-lg shadow-primary-container/20 hover:opacity-90 transition-all duration-200 active:scale-[0.98] flex items-center justify-center gap-2">
|
||||
<span>Save Parcel</span>
|
||||
<span class="material-symbols-outlined text-base">save</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-center gap-4 text-[10px] font-bold text-on-surface-variant/40 tracking-widest uppercase">
|
||||
<span>Precision Sentinel</span>
|
||||
<span>•</span>
|
||||
<span>v2.4.0-Enterprise</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- Contextual FAB (Suppressed per rules on detail/form screens, but shown here for UI completeness as it is a creation flow) -->
|
||||
<!-- Suppressing FAB per "Contextual FAB Suppression" rule for Detail/Task-focused screens -->
|
||||
</body></html>
|
||||
BIN
add_parcel_gews/screen.png
Normal file
BIN
add_parcel_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
373
alert_management_gews/code.html
Normal file
373
alert_management_gews/code.html
Normal file
@ -0,0 +1,373 @@
|
||||
<!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&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;
|
||||
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 & 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>
|
||||
BIN
alert_management_gews/screen.png
Normal file
BIN
alert_management_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
265
analyst_validation_gews/code.html
Normal file
265
analyst_validation_gews/code.html
Normal file
@ -0,0 +1,265 @@
|
||||
<!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>
|
||||
BIN
analyst_validation_gews/screen.png
Normal file
BIN
analyst_validation_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1007 KiB |
322
dashboard_gews/code.html
Normal file
322
dashboard_gews/code.html
Normal file
@ -0,0 +1,322 @@
|
||||
<!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>
|
||||
BIN
dashboard_gews/screen.png
Normal file
BIN
dashboard_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
337
detection_analysis_gews/code.html
Normal file
337
detection_analysis_gews/code.html
Normal file
@ -0,0 +1,337 @@
|
||||
<!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>
|
||||
BIN
detection_analysis_gews/screen.png
Normal file
BIN
detection_analysis_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
105
horizon_geo_intelligence/DESIGN.md
Normal file
105
horizon_geo_intelligence/DESIGN.md
Normal file
@ -0,0 +1,105 @@
|
||||
# Design System Strategy: The Sentient Map
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
**The Creative North Star: "The Precision Sentinel"**
|
||||
|
||||
For a GeoSpatial Early Warning System (GEWS), the design must transcend standard "dashboard" aesthetics. We are building a high-stakes, enterprise-grade environment where clarity is a form of safety. This design system rejects the "boxed-in" feel of traditional GIS software in favor of **The Precision Sentinel**—a visual language defined by expansive breathing room, editorial-grade typography, and tonal depth.
|
||||
|
||||
Instead of a rigid grid of outlines, we utilize **Asymmetric Information Density**. Critical geospatial alerts are given massive "stage presence" through high-contrast layering, while secondary telemetry data is tucked into elegant, semi-transparent overlays. We break the "template" look by treating the UI as a living lens over the map, using varying levels of translucency and "glass-on-glass" stacking to represent different data altitudes.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors & Surface Philosophy
|
||||
The palette is rooted in a command-and-control "Deep Navy" foundation, punctuated by vibrant, meaningful status tones.
|
||||
|
||||
### Surface Hierarchy & Nesting (The "No-Line" Rule)
|
||||
In this system, **visible borders are a failure of hierarchy.** Explicitly prohibit 1px solid borders for sectioning. Boundaries must be defined solely through background color shifts or tonal transitions.
|
||||
- **Base Layer:** `surface` (#f7f9fb) – The global background.
|
||||
- **Sectioning:** `surface_container_low` (#f2f4f6) – Used for large sidebar or footer areas.
|
||||
- **Content Blocks:** `surface_container_lowest` (#ffffff) – Used for primary data cards to create a "lifted" feel.
|
||||
- **Nesting:** To separate a group within a card, use `surface_container` (#eceef0) rather than a line.
|
||||
|
||||
### The Glass & Gradient Rule
|
||||
To move beyond "out-of-the-box" UI, floating map controls and tooltips must use **Glassmorphism**:
|
||||
- **Background:** `surface_container_lowest` at 80% opacity.
|
||||
- **Backdrop Blur:** 12px to 20px.
|
||||
- **Effect:** This allows the map's geospatial textures to bleed through, ensuring the UI feels integrated into the environment, not "pasted" on top.
|
||||
|
||||
### Signature Textures
|
||||
Main Action CTAs should not be flat. Use a subtle **Linear Gradient (135°)** from `primary` (#000000) to `primary_container` (#131b2e). This provides a "machine-polished" depth that signifies high-grade enterprise hardware.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
We use a dual-font strategy to balance "Human Authority" with "Machine Precision."
|
||||
|
||||
- **The Display Scale (Manrope):** Chosen for its geometric, modern structure. Used for `display-lg` through `headline-sm`. This font conveys the brand's "Editorial" authority.
|
||||
- **The Data Scale (Inter):** Chosen for its exceptional legibility in dense environments. Used for all `title`, `body`, and `label` tokens.
|
||||
|
||||
**The Hierarchy Goal:**
|
||||
- Use `display-md` (Manrope) for critical alert counts (e.g., "12 Active Threats").
|
||||
- Use `label-sm` (Inter) in All Caps with 0.05em letter spacing for metadata and map coordinates to give it a "technical instrument" feel.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth
|
||||
Depth in this system is an indicator of urgency.
|
||||
|
||||
### Tonal Layering
|
||||
Do not use shadows for static layout elements. Achieve separation by stacking:
|
||||
*Place a `surface_container_lowest` card on a `surface_container_low` background.*
|
||||
|
||||
### Ambient Shadows
|
||||
For "active" floating elements (e.g., an expanded alert window), use **Ambient Shadows**:
|
||||
- **Blur:** 32px – 48px.
|
||||
- **Opacity:** 6% of `on_surface`.
|
||||
- **Color:** Tint the shadow with a hint of `primary` to make it feel like it’s reacting to the deep navy UI environment.
|
||||
|
||||
### The "Ghost Border" Fallback
|
||||
If a border is required for accessibility in complex map overlays, use a **Ghost Border**:
|
||||
- **Token:** `outline_variant` (#c6c6cd) at **15% opacity**.
|
||||
- **Rule:** Never use 100% opaque borders.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Buttons: The Command Set
|
||||
- **Primary:** Gradient from `primary` to `primary_container`. White text. Border radius: `md` (0.375rem).
|
||||
- **Secondary:** Surface-tinted. No border. Use `surface_container_high` as the background with `on_surface` text.
|
||||
- **Tertiary/Ghost:** No background. `primary` text. Transitions to `surface_container_low` on hover.
|
||||
|
||||
### Cards & Lists (No-Divider Policy)
|
||||
**Strict Rule:** Forbid the use of horizontal divider lines.
|
||||
- **Lists:** Separate items using 8px of vertical white space or a subtle background shift on hover (`surface_container_highest`).
|
||||
- **Cards:** Use `xl` (0.75rem) corner radius for high-level dashboard containers and `md` (0.375rem) for nested child elements.
|
||||
|
||||
### Geospatial Chips
|
||||
- **Safety (Green):** Background `secondary_container`, Text `on_secondary_container`.
|
||||
- **Alert (Red):** Background `tertiary_container`, Text `on_tertiary_container`.
|
||||
- **Review (Yellow):** Background #F59E0B (15% opacity), Text #F59E0B.
|
||||
- *Styling:* `full` roundedness (capsule) to contrast against the architectural squareness of the dashboard.
|
||||
|
||||
### Data Inputs
|
||||
- **Style:** Understated. Use `surface_container_highest` for the input track. No bottom border.
|
||||
- **Focus State:** 2px "Ghost Border" of `primary` at 40% opacity.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do’s and Don’ts
|
||||
|
||||
### Do:
|
||||
- **Do** use whitespace as a functional tool. If two data points feel cluttered, increase padding rather than adding a line.
|
||||
- **Do** use `on_surface_variant` for secondary labels to create a natural visual "recession."
|
||||
- **Do** use `headline-lg` for single-word statuses to give the interface an editorial, high-end magazine feel.
|
||||
|
||||
### Don’t:
|
||||
- **Don’t** use pure black (#000000) for text. Use `on_surface` (#191c1e) to maintain a premium, slightly softer contrast.
|
||||
- **Don’t** use standard "Drop Shadows." If it doesn't look like ambient light, it's too heavy.
|
||||
- **Don’t** use high-saturation backgrounds. All color should come from data-points (Alerts/Maps) or the Primary Action buttons; the shell should remain a sophisticated "Grey/Navy" stage.
|
||||
|
||||
---
|
||||
|
||||
## 7. Signature GEWS Components
|
||||
- **The Telemetry Strip:** A 48px tall `surface_container_lowest` bar with a 10% `outline_variant` Ghost Border, pinned to the bottom of the map, using `label-sm` for live-streaming coordinates.
|
||||
- **The Alert Overlay:** A `surface_container_lowest` container with 80% opacity and 20px backdrop blur. It should slide in from the right, using an asymmetric `xl` radius on the left side only, making it feel like it’s "growing" out of the map edge.
|
||||
330
parcel_detail_gews/code.html
Normal file
330
parcel_detail_gews/code.html
Normal file
@ -0,0 +1,330 @@
|
||||
<!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 - Parcel Detail</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@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 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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.map-gradient-overlay {
|
||||
background: linear-gradient(to right, rgba(247, 249, 251, 0) 80%, rgba(247, 249, 251, 1) 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface h-screen overflow-hidden flex">
|
||||
<!-- SideNavBar (Authority: JSON) -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 border-r-0 bg-slate-50 dark:bg-slate-950 flex flex-col h-full py-6 px-4 gap-2 z-50">
|
||||
<div class="mb-8 px-4">
|
||||
<h1 class="font-['Manrope'] font-bold text-lg text-slate-900 dark:text-slate-50">Precision Sentinel</h1>
|
||||
<p class="text-xs text-slate-500 font-medium uppercase tracking-widest">Enterprise Geospatial</p>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-1 flex-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-900 dark:text-white bg-slate-200/50 dark:bg-slate-800/50 rounded-lg font-semibold" 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-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">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 flex flex-col gap-1 pt-4 border-t border-slate-100 dark:border-slate-900">
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 text-sm" href="#">
|
||||
<span class="material-symbols-outlined text-base">contact_support</span> Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 text-sm" href="#">
|
||||
<span class="material-symbols-outlined text-base">sensors</span> System Status
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 ml-64 flex flex-col h-full relative">
|
||||
<!-- TopAppBar (Authority: JSON) -->
|
||||
<header class="fixed top-0 left-64 right-0 z-40 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-4">
|
||||
<div class="flex items-center gap-2 bg-slate-200/50 dark:bg-slate-800/50 px-3 py-1.5 rounded-lg">
|
||||
<span class="material-symbols-outlined text-slate-500 text-lg">search</span>
|
||||
<input class="bg-transparent border-none text-sm focus:ring-0 w-48 text-slate-900 dark:text-slate-50" placeholder="Search parcel ID..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 transition-colors">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
</button>
|
||||
<button class="text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 transition-colors">
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border-2 border-slate-200">
|
||||
<img alt="User profile avatar" data-alt="professional headshot of a geospatial analyst in a modern office environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDsnGW3TBPsjKjyIhS7UXciYsvtSk1cVDmsevvC76drc94J-4_5zzg-qzaOSl4Y7us0A3saItXHB40mZUWgv4KrqW-nHO0CfU439intIyQ6aWMw-NZa6VMk8ONOeh2E-Z5SOu9yn9obpjoU9lP6Xd_kR3RgOnxD-McgwjLaUidxOGLeXZjJjSXmVqQFp7DN3jFhnesSFvFjNqP5Z9qnoOu5g0CyjrWG9CLrvHUhWUGxl1feMKTAb7ycq0kh6JlLEdtNVZaSS-F0ENo"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-200/50 dark:bg-slate-800/50 h-[1px] w-full absolute bottom-0 left-0"></div>
|
||||
</header>
|
||||
<!-- Split Layout Content -->
|
||||
<div class="flex-1 flex pt-[57px] pb-48 overflow-hidden">
|
||||
<!-- Left: Satellite Map Section -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-slate-200">
|
||||
<img class="w-full h-full object-cover" data-alt="high altitude satellite photography of geometric agricultural fields with vibrant green crops and a neon highlighted parcel boundary line" data-location="Northern California Farmland" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqsjPdoAEXyKQCBFltr2IbR75JbY9QQCLQL9qzhYgeDGGCymJc9qbSUxfuG9J9BRa-1xyen4K9H_AXXBydsfxuVjH6vpjwwkP8nw7QGi-M-Xr9cuAKu-0QUSdNROj-AYJTRvokC_seuLH5UfDDNgktpsqGXpkCJ33jJ-u1f8A8GqzH-XWQZIeK14oAOXr8x-gLgEnodbLPBGYDW0-amHeTZRVIQSNNxpZV_WkdUOsCtGBO9xPN61uU6BBb0gO8cU-rgIlx9F6gayo"/>
|
||||
</div>
|
||||
<!-- Map UI Overlays (Glassmorphism) -->
|
||||
<div class="absolute top-6 left-6 flex flex-col gap-2">
|
||||
<div class="glass-panel p-2 rounded-xl flex flex-col gap-2 shadow-xl">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined">remove</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="glass-panel p-2 rounded-xl shadow-xl">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-highest transition-colors">
|
||||
<span class="material-symbols-outlined">layers</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Telemetry Strip (Signature GEWS Component) -->
|
||||
<div class="absolute bottom-6 left-6 right-6 h-12 glass-panel border border-outline-variant/15 rounded-xl flex items-center px-6 justify-between shadow-2xl">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-wider uppercase">LAT:</span>
|
||||
<span class="text-xs font-mono font-medium">38.5816° N</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-wider uppercase">LONG:</span>
|
||||
<span class="text-xs font-mono font-medium">121.4944° W</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-wider uppercase">ALT:</span>
|
||||
<span class="text-xs font-mono font-medium">1,240m</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex h-2 w-2 rounded-full bg-secondary"></span>
|
||||
<span class="text-[10px] font-bold text-on-surface-variant tracking-wider uppercase">Live Sync: Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Parcel Info Card Section -->
|
||||
<div class="w-[440px] bg-surface flex flex-col p-8 overflow-y-auto z-10">
|
||||
<div class="mb-8">
|
||||
<nav class="flex items-center gap-2 text-xs text-on-surface-variant mb-4 font-medium">
|
||||
<span>Parcels</span>
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
<span class="text-on-surface">PRC-992-DELTA</span>
|
||||
</nav>
|
||||
<h2 class="font-headline text-3xl font-bold tracking-tight text-on-surface">Parcel Delta-992</h2>
|
||||
<p class="text-on-surface-variant mt-1">Sacramento Valley Agricultural Zone</p>
|
||||
</div>
|
||||
<!-- Info Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl">
|
||||
<span class="block text-[10px] font-bold text-on-surface-variant tracking-widest uppercase mb-1">Total Area</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-2xl font-bold font-headline">142.5</span>
|
||||
<span class="text-xs font-medium text-on-surface-variant">Hectares</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl">
|
||||
<span class="block text-[10px] font-bold text-on-surface-variant tracking-widest uppercase mb-1">Last Scan</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-2xl font-bold font-headline">Oct 24</span>
|
||||
<span class="text-xs font-medium text-on-surface-variant">2023</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-xl col-span-2">
|
||||
<span class="block text-[10px] font-bold text-on-surface-variant tracking-widest uppercase mb-1">Land Usage</span>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="px-2 py-1 bg-secondary-container text-on-secondary-container text-[10px] font-bold rounded-full uppercase">Orchard</span>
|
||||
<span class="px-2 py-1 bg-surface-container-high text-on-surface-variant text-[10px] font-bold rounded-full uppercase">High Yield</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<button class="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary py-4 px-6 rounded-xl font-semibold flex items-center justify-center gap-3 transition-transform active:scale-[0.98]">
|
||||
<span class="material-symbols-outlined">satellite_alt</span>
|
||||
Fetch Satellite Data
|
||||
</button>
|
||||
<button class="w-full bg-surface-container-high text-on-surface py-4 px-6 rounded-xl font-semibold flex items-center justify-center gap-3 hover:bg-surface-container-highest transition-colors active:scale-[0.98]">
|
||||
<span class="material-symbols-outlined">psychology</span>
|
||||
Run AI Detection
|
||||
</button>
|
||||
</div>
|
||||
<!-- Meta Insights -->
|
||||
<div class="mt-12">
|
||||
<h3 class="text-xs font-bold text-on-surface-variant tracking-widest uppercase mb-4">Anomaly Report</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-1 h-auto bg-tertiary-container rounded-full"></div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold">Vegetation Stress Detected</p>
|
||||
<p class="text-xs text-on-surface-variant mt-1 leading-relaxed">NDVI analysis indicates a 12% drop in moisture retention in Sector B-4 since previous scan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom: Timeline Slider (Signature Section) -->
|
||||
<section class="fixed bottom-0 left-64 right-0 h-48 bg-surface-container-lowest border-t border-outline-variant/10 z-40 p-6 flex flex-col gap-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<h4 class="text-xs font-bold text-on-surface-variant tracking-widest uppercase">Temporal Evolution</h4>
|
||||
<div class="h-px w-24 bg-outline-variant/30"></div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-lg">play_arrow</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-surface-container text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-lg">settings_backup_restore</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-6 relative">
|
||||
<!-- Timeline Slider Track -->
|
||||
<div class="absolute top-[52px] left-[10%] right-[10%] h-[2px] bg-surface-container-highest"></div>
|
||||
<div class="flex-1 flex justify-between px-[5%]">
|
||||
<!-- T1 -->
|
||||
<div class="flex flex-col items-center gap-3 relative z-10 group cursor-pointer">
|
||||
<div class="w-20 h-14 rounded-lg overflow-hidden border-2 border-surface-container-highest group-hover:border-primary transition-all">
|
||||
<img class="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100 transition-all" data-alt="small thumbnail of a farm field in late spring with bright green patches and blue sky reflections in irrigation ditches" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHwtYhsQkiDgzgwsxZboLvE1x7PcOzYemNHkhP2bTIilIZ2xUkapWnC9xaybhhPOtLMTOKhXl36fjUZL9OFK96tH_gE2_aYSikHb-kx57uXFVju-FQ6MrrY_uFGfPfsm518JuRcS4jESw0YcnBIWvi790qCJ7lPBZdYSDSDKRyI0xtyKwFxUR_HKqQph1QyfZTb-ibHCM7YTCoU0gED7FcWWmOalY5S9BwjPvhYwFW6oLt1zQRfBbbj2vuEb9uWLD-09_n_mr474Q"/>
|
||||
</div>
|
||||
<div class="w-3 h-3 rounded-full bg-surface-container-highest border-2 border-surface-container-lowest group-hover:bg-primary transition-all"></div>
|
||||
<div class="text-center">
|
||||
<span class="block text-[10px] font-bold text-on-surface-variant uppercase">Aug 12</span>
|
||||
<span class="text-[9px] text-on-surface-variant/60">T1: Baseline</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- T2 -->
|
||||
<div class="flex flex-col items-center gap-3 relative z-10 group cursor-pointer">
|
||||
<div class="w-20 h-14 rounded-lg overflow-hidden border-2 border-primary ring-4 ring-primary/5 transition-all">
|
||||
<img class="w-full h-full object-cover transition-all" data-alt="satellite crop view of a field mid-summer with dense vegetation and uniform growth patterns" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIW0qs24uppsOHhcJIzoTEvvjTozaZpzIi6PI9R-VVlbVQABpu-UFLWRetkSh4Kr88do2720AKQVXwzIwCL6K1fBDv81Ylq1vnvJH7mDeTQ-pxpjS03lggEcJDDSQhXgz5yPwdtrfCzeoeqiDXUiLd3M-kqK2Oq_mubbOICnkUxxaMpeNVFTx8Wxp0adowkyL4f2Mf2er383B26zVD7rK-_aJp07iGSP_Mzb2x-mLLNTUFqJXiXeu6E9Ls7Zh1bCdF7mnTMZ0YFvE"/>
|
||||
</div>
|
||||
<div class="w-4 h-4 rounded-full bg-primary border-4 border-surface-container-lowest transition-all shadow-md"></div>
|
||||
<div class="text-center">
|
||||
<span class="block text-[10px] font-bold text-primary uppercase">Sep 28</span>
|
||||
<span class="text-[9px] text-primary/70">T2: Peak Growth</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- T3 -->
|
||||
<div class="flex flex-col items-center gap-3 relative z-10 group cursor-pointer">
|
||||
<div class="w-20 h-14 rounded-lg overflow-hidden border-2 border-surface-container-highest group-hover:border-primary transition-all">
|
||||
<img class="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100 transition-all" data-alt="aerial photography of harvested agricultural land with golden straw textures and dusty tractor paths" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnoupL_VAZBsLEbX42_fM3cXo956WKPFDkoS6t2KEqx_c2Nk5ALTUf5H99m48r1BEpGeGatMgm-zCek-pb69zas62J8QS9kFdcUEN4D5JDZXK21u_Aqdq2TF1-RupntNlZrRbZMhJ3c_RnsqPks9anM1FSCR902fAU3LCjUh4qw067FB-bv0uWE3fgdScBsIglDQgipa5WaobeZzs5NjyDzr1f2aXlcP1f4-q0ZJEckQkQahuaFAw1KbBlbcYyIPNIG7fYWAVHz_w"/>
|
||||
</div>
|
||||
<div class="w-3 h-3 rounded-full bg-surface-container-highest border-2 border-surface-container-lowest group-hover:bg-primary transition-all"></div>
|
||||
<div class="text-center">
|
||||
<span class="block text-[10px] font-bold text-on-surface-variant uppercase">Oct 24</span>
|
||||
<span class="text-[9px] text-on-surface-variant/60">T3: Current</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- T4 (Future/Scheduled) -->
|
||||
<div class="flex flex-col items-center gap-3 relative z-10 group cursor-not-allowed">
|
||||
<div class="w-20 h-14 rounded-lg bg-surface-container-low flex items-center justify-center border-2 border-dashed border-outline-variant/30">
|
||||
<span class="material-symbols-outlined text-outline-variant">schedule</span>
|
||||
</div>
|
||||
<div class="w-2 h-2 rounded-full bg-outline-variant/30"></div>
|
||||
<div class="text-center">
|
||||
<span class="block text-[10px] font-bold text-outline-variant/60 uppercase">Nov 15</span>
|
||||
<span class="text-[9px] text-outline-variant/40">Next Scan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
parcel_detail_gews/screen.png
Normal file
BIN
parcel_detail_gews/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Loading…
x
Reference in New Issue
Block a user