269 lines
15 KiB
HTML
269 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>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> |