330 lines
20 KiB
HTML
330 lines
20 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>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> |