Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flood Vulnerability Assessment</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: #000; | |
| color: #fff; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| /* Animated background */ | |
| .hero-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); | |
| z-index: 0; | |
| } | |
| .hero-background::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%); | |
| animation: pulse 8s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .page-wrapper { | |
| position: relative; | |
| z-index: 1; | |
| min-height: 100vh; | |
| } | |
| /* Header with hero section */ | |
| .hero-header { | |
| position: relative; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%); | |
| border-bottom: 2px solid rgba(59, 130, 246, 0.3); | |
| } | |
| .hero-header h1 { | |
| font-size: 3.5em; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| background-size: 200% auto; | |
| animation: shine 3s linear infinite; | |
| } | |
| @keyframes shine { | |
| to { | |
| background-position: 200% center; | |
| } | |
| } | |
| .hero-header .subtitle { | |
| font-size: 1.3em; | |
| color: #94a3b8; | |
| font-weight: 300; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| /* Side navigation */ | |
| .main-container { | |
| display: flex; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| gap: 2rem; | |
| } | |
| .side-nav { | |
| width: 280px; | |
| flex-shrink: 0; | |
| position: sticky; | |
| top: 2rem; | |
| height: fit-content; | |
| } | |
| .nav-card { | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); | |
| } | |
| .nav-card h3 { | |
| color: #e2e8f0; | |
| font-size: 1.1em; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .nav-link { | |
| display: block; | |
| padding: 1rem 1.25rem; | |
| margin-bottom: 0.5rem; | |
| background: transparent; | |
| border: none; | |
| color: #94a3b8; | |
| text-align: left; | |
| cursor: pointer; | |
| border-radius: 12px; | |
| font-size: 0.95em; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 3px; | |
| background: linear-gradient(180deg, #3b82f6, #8b5cf6); | |
| transform: scaleY(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| background: rgba(59, 130, 246, 0.1); | |
| color: #e2e8f0; | |
| transform: translateX(5px); | |
| } | |
| .nav-link.active { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2)); | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .nav-link.active::before { | |
| transform: scaleY(1); | |
| } | |
| /* Content area */ | |
| .content-area { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .assessment-card { | |
| display: none; | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); | |
| animation: slideIn 0.4s ease; | |
| } | |
| .assessment-card.active { | |
| display: block; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .card-header { | |
| margin-bottom: 2rem; | |
| } | |
| .card-header h2 { | |
| font-size: 2em; | |
| color: #e2e8f0; | |
| margin-bottom: 0.5rem; | |
| } | |
| .card-header p { | |
| color: #94a3b8; | |
| font-size: 1.05em; | |
| } | |
| /* Form styling */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .input-card { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .input-card:hover { | |
| border-color: rgba(59, 130, 246, 0.4); | |
| background: rgba(15, 23, 42, 0.8); | |
| transform: translateY(-2px); | |
| } | |
| .input-card label { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| color: #cbd5e1; | |
| font-weight: 600; | |
| font-size: 0.95em; | |
| } | |
| .input-card label::before { | |
| content: ''; | |
| width: 4px; | |
| height: 16px; | |
| background: linear-gradient(180deg, #3b82f6, #8b5cf6); | |
| border-radius: 2px; | |
| } | |
| .input-card input, | |
| .input-card select { | |
| width: 100%; | |
| padding: 0.875rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| border-radius: 10px; | |
| color: #e2e8f0; | |
| font-size: 1em; | |
| transition: all 0.3s ease; | |
| } | |
| .input-card input:focus, | |
| .input-card select:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| background: rgba(0, 0, 0, 0.5); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .input-card .helper-text { | |
| margin-top: 0.5rem; | |
| font-size: 0.8em; | |
| color: #64748b; | |
| font-style: italic; | |
| } | |
| /* Height group with predict button */ | |
| .height-group { | |
| display: flex; | |
| align-items: stretch; | |
| gap: 0; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| border-radius: 10px; | |
| overflow: visible; | |
| transition: all 0.3s ease; | |
| } | |
| .height-group input { | |
| border-radius: 10px 0 0 10px; | |
| } | |
| .height-group button:last-child { | |
| border-radius: 0 10px 10px 0; | |
| } | |
| .input-card { | |
| overflow: visible; | |
| } | |
| .height-group:focus-within { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .height-group input { | |
| flex: 1; | |
| padding: 0.875rem; | |
| background: transparent ; | |
| border: none ; | |
| border-radius: 0 ; | |
| color: #e2e8f0; | |
| font-size: 1em; | |
| box-shadow: none ; | |
| } | |
| .height-group input:focus { | |
| outline: none; | |
| } | |
| .height-group button { | |
| width: auto ; | |
| padding: 0.875rem 1.5rem ; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6) ; | |
| color: white; | |
| border: none; | |
| border-left: 1px solid rgba(148, 163, 184, 0.3); | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| transition: opacity 0.2s ease; | |
| border-radius: 0 10px 10px 0 ; | |
| transform: none ; | |
| } | |
| .height-group button:hover { | |
| opacity: 0.9; | |
| transform: none ; | |
| } | |
| .height-group button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .gba-height-btn { | |
| margin-top: 0.4rem; | |
| align-self: flex-start; | |
| background: rgba(96, 165, 250, 0.08); | |
| border: 1px solid rgba(96, 165, 250, 0.25); | |
| border-radius: 8px; | |
| padding: 0.25rem 0.6rem; | |
| font-size: 0.7em; | |
| font-weight: 500; | |
| color: #93c5fd; | |
| cursor: pointer; | |
| transition: background 0.2s ease, border 0.2s ease, color 0.2s ease; | |
| } | |
| .secondary-btn-style { | |
| margin-top: 0.4rem; | |
| align-self: flex-start; | |
| background: rgba(96, 165, 250, 0.08); | |
| border: 1px solid rgba(96, 165, 250, 0.25); | |
| border-radius: 8px; | |
| padding: 0.25rem 0.6rem; | |
| font-size: 0.7em; | |
| font-weight: 500; | |
| color: #93c5fd; | |
| cursor: pointer; | |
| transition: background 0.2s ease, border 0.2s ease, color 0.2s ease; | |
| } | |
| .gba-height-btn:hover, | |
| .secondary-btn-style:hover { | |
| background: rgba(96, 165, 250, 0.18); | |
| border-color: rgba(96, 165, 250, 0.5); | |
| color: #bfdbfe; | |
| } | |
| .gba-height-btn:disabled, | |
| .secondary-btn-style:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .height-group .gba-height-btn { | |
| margin-top: 0; | |
| align-self: auto; | |
| border-radius: 0; | |
| border-left: 1px solid rgba(148, 163, 184, 0.3); | |
| height: auto; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| color: white; | |
| border: none; | |
| padding: 0.875rem 1.5rem; | |
| } | |
| .height-group .gba-height-btn:hover { | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| opacity: 0.9; | |
| color: white; | |
| border-color: transparent; | |
| } | |
| /* Custom tooltip styling for buttons */ | |
| .tooltip-btn { | |
| position: relative; | |
| } | |
| .tooltip-btn::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: calc(100% + 10px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 10px 14px; | |
| background: rgba(15, 23, 42, 0.95); | |
| color: #e2e8f0; | |
| font-size: 1em; | |
| font-weight: 400; | |
| border-radius: 8px; | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| white-space: normal; | |
| width: max-content; | |
| max-width: 280px; | |
| text-align: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.2s ease, visibility 0.2s ease; | |
| z-index: 1000; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); | |
| pointer-events: none; | |
| line-height: 1.4; | |
| } | |
| .tooltip-btn::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: calc(100% + 2px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-width: 8px; | |
| border-style: solid; | |
| border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.2s ease, visibility 0.2s ease; | |
| z-index: 1001; | |
| } | |
| .tooltip-btn:hover::after, | |
| .tooltip-btn:hover::before { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Checkbox styling */ | |
| .checkbox-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 1rem; | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .checkbox-row:hover { | |
| background: rgba(15, 23, 42, 0.8); | |
| border-color: rgba(59, 130, 246, 0.4); | |
| } | |
| .checkbox-row input[type="checkbox"] { | |
| width: 20px; | |
| height: 20px; | |
| cursor: pointer; | |
| accent-color: #3b82f6; | |
| } | |
| .checkbox-row label { | |
| margin: 0 ; | |
| color: #cbd5e1; | |
| font-weight: 500; | |
| cursor: pointer; | |
| flex: 1; | |
| } | |
| .checkbox-row label::before { | |
| display: none; | |
| } | |
| /* Action buttons */ | |
| .action-section { | |
| margin-top: 2rem; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .primary-button { | |
| position: relative; | |
| width: 100%; | |
| padding: 1.25rem 2rem; | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 1.1em; | |
| font-weight: 700; | |
| cursor: pointer; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .primary-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.5s; | |
| } | |
| .primary-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4); | |
| } | |
| .primary-button:hover::before { | |
| left: 100%; | |
| } | |
| .primary-button:active { | |
| transform: translateY(-1px); | |
| } | |
| .primary-button:disabled { | |
| background: #334155; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* Loading state */ | |
| .loading-state { | |
| display: none; | |
| text-align: center; | |
| padding: 3rem; | |
| } | |
| .loading-spinner { | |
| width: 60px; | |
| height: 60px; | |
| margin: 0 auto 1rem; | |
| border: 4px solid rgba(59, 130, 246, 0.2); | |
| border-top-color: #3b82f6; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .loading-state p { | |
| color: #94a3b8; | |
| font-size: 1.1em; | |
| } | |
| /* Results section */ | |
| .results-section { | |
| display: none; | |
| margin-top: 2rem; | |
| } | |
| .results-header { | |
| text-align: center; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15)); | |
| border-radius: 16px; | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| } | |
| .results-header h2 { | |
| font-size: 2em; | |
| margin-bottom: 1rem; | |
| color: #e2e8f0; | |
| } | |
| .risk-badge { | |
| display: inline-block; | |
| padding: 0.75rem 2rem; | |
| border-radius: 30px; | |
| font-weight: 700; | |
| font-size: 1.2em; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .risk-very-high { | |
| background: linear-gradient(135deg, #dc2626, #b91c1c); | |
| box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4); | |
| } | |
| .risk-high { | |
| background: linear-gradient(135deg, #ea580c, #c2410c); | |
| box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4); | |
| } | |
| .risk-moderate { | |
| background: linear-gradient(135deg, #ca8a04, #a16207); | |
| box-shadow: 0 4px 15px rgba(202, 138, 4, 0.4); | |
| } | |
| .risk-low { | |
| background: linear-gradient(135deg, #16a34a, #15803d); | |
| box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4); | |
| } | |
| .risk-very-low { | |
| background: linear-gradient(135deg, #0891b2, #0e7490); | |
| box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4); | |
| } | |
| /* Stats grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| border-color: rgba(59, 130, 246, 0.5); | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .stat-label { | |
| font-size: 0.9em; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-value { | |
| font-size: 2em; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #60a5fa, #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Detail sections */ | |
| .detail-section { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .detail-section h3 { | |
| font-size: 1.5em; | |
| color: #e2e8f0; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .metric-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid rgba(59, 130, 246, 0.1); | |
| } | |
| .metric-row:last-child { | |
| border-bottom: none; | |
| } | |
| .metric-label { | |
| color: #94a3b8; | |
| font-weight: 500; | |
| } | |
| .metric-value { | |
| color: #e2e8f0; | |
| font-weight: 700; | |
| font-size: 1.1em; | |
| } | |
| /* Confidence visualization */ | |
| .confidence-section { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .confidence-bar-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin: 1.5rem 0; | |
| } | |
| .confidence-bar-wrapper span { | |
| font-size: 0.85em; | |
| color: #64748b; | |
| font-weight: 600; | |
| } | |
| .confidence-bar { | |
| flex: 1; | |
| height: 40px; | |
| background: rgba(0, 0, 0, 0.4); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| position: relative; | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .confidence-fill { | |
| height: 100%; | |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| } | |
| .confidence-high { | |
| background: linear-gradient(90deg, #16a34a, #22c55e); | |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); | |
| } | |
| .confidence-moderate-fill { | |
| background: linear-gradient(90deg, #ca8a04, #fbbf24); | |
| box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); | |
| } | |
| .confidence-low-fill { | |
| background: linear-gradient(90deg, #ea580c, #f97316); | |
| box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); | |
| } | |
| .confidence-text { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: 800; | |
| color: white; | |
| font-size: 1.1em; | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); | |
| z-index: 2; | |
| } | |
| /* Hazard breakdown */ | |
| .hazard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin: 1.5rem 0; | |
| } | |
| .hazard-card { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .hazard-card:hover { | |
| transform: scale(1.05); | |
| border-color: rgba(59, 130, 246, 0.5); | |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); | |
| } | |
| .hazard-type { | |
| font-size: 0.9em; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 1rem; | |
| } | |
| .hazard-value { | |
| font-size: 3em; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #60a5fa, #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Explanation section */ | |
| .explanation-section { | |
| background: rgba(15, 23, 42, 0.6); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .factor-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| padding: 1rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| } | |
| .factor-name { | |
| min-width: 200px; | |
| color: #cbd5e1; | |
| font-weight: 600; | |
| } | |
| .factor-bar { | |
| flex: 1; | |
| height: 28px; | |
| background: rgba(59, 130, 246, 0.1); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .factor-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .factor-percentage { | |
| min-width: 60px; | |
| text-align: right; | |
| color: #e2e8f0; | |
| font-weight: 700; | |
| font-size: 1.05em; | |
| } | |
| /* Quality warnings */ | |
| .quality-warning { | |
| background: linear-gradient(135deg, rgba(202, 138, 4, 0.2), rgba(161, 98, 7, 0.2)); | |
| border: 1px solid rgba(202, 138, 4, 0.4); | |
| border-left: 4px solid #ca8a04; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin: 1.5rem 0; | |
| } | |
| .quality-warning h4 { | |
| color: #fbbf24; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .quality-warning ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .quality-warning li { | |
| padding: 0.5rem 0; | |
| color: #fde047; | |
| padding-left: 1.5rem; | |
| position: relative; | |
| } | |
| .quality-warning li::before { | |
| content: '⚠'; | |
| position: absolute; | |
| left: 0; | |
| } | |
| /* Error state */ | |
| .error-message { | |
| background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2)); | |
| border: 1px solid rgba(220, 38, 38, 0.4); | |
| border-left: 4px solid #dc2626; | |
| color: #fca5a5; | |
| padding: 1.5rem; | |
| border-radius: 12px; | |
| margin: 1.5rem 0; | |
| display: none; | |
| } | |
| /* Footer */ | |
| footer { | |
| margin-top: 4rem; | |
| padding: 2rem; | |
| text-align: center; | |
| color: #64748b; | |
| border-top: 1px solid rgba(59, 130, 246, 0.2); | |
| background: rgba(15, 23, 42, 0.6); | |
| } | |
| /* File upload styling */ | |
| input[type="file"] { | |
| cursor: pointer; | |
| padding: 1rem ; | |
| } | |
| input[type="file"]::file-selector-button { | |
| padding: 0.5rem 1rem; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| margin-right: 1rem; | |
| transition: all 0.3s; | |
| } | |
| input[type="file"]::file-selector-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| /* Pulse animation for predicted height */ | |
| @keyframes height-pulse { | |
| 0%, | |
| 100% { | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| 50% { | |
| background: rgba(59, 130, 246, 0.3); | |
| } | |
| } | |
| .height-pulse { | |
| animation: height-pulse 0.8s ease; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 1024px) { | |
| .main-container { | |
| flex-direction: column; | |
| } | |
| .side-nav { | |
| width: 100%; | |
| position: static; | |
| } | |
| .nav-card { | |
| display: flex; | |
| overflow-x: auto; | |
| padding: 1rem; | |
| } | |
| .nav-card h3 { | |
| display: none; | |
| } | |
| .nav-link { | |
| white-space: nowrap; | |
| margin-right: 0.5rem; | |
| margin-bottom: 0; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-header h1 { | |
| font-size: 2em; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .assessment-card { | |
| padding: 1.5rem; | |
| } | |
| .factor-name { | |
| min-width: 120px; | |
| font-size: 0.9em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero-background"></div> | |
| <div class="page-wrapper"> | |
| <header class="hero-header" style="position: relative; padding-top: 40px; text-align: center;"> | |
| <!-- <div style="position: absolute; top: 7%; left: 1%; font-size: 3.2vw; line-height: 0.8;"> | |
| 💦💧🌊 | |
| </div> --> | |
| <div style="display: inline-block; text-align: center; max-width: 90%; margin: 0 auto;"> | |
| <h1 style="margin: 0; font-size: 3rem; line-height: 1.2;"> | |
| Flood Vulnerability Assessment | |
| </h1> | |
| <p class="subtitle" style="margin: 0.2rem 0 0 0; font-size: 1rem; line-height: 1.2;"> | |
| Global building-level assessment | |
| </p> | |
| </div> | |
| </header> | |
| <div class="main-container"> | |
| <!-- Side Navigation --> | |
| <aside class="side-nav"> | |
| <div class="nav-card"> | |
| <h3>Assessment Tools</h3> | |
| <button class="nav-link active" onclick="switchTab('basic')">Basic Assessment</button> | |
| <button class="nav-link" onclick="switchTab('explained')">Detailed Explanation</button> | |
| <button class="nav-link" onclick="switchTab('multihazard')">Multi-Hazard Analysis</button> | |
| <button class="nav-link" onclick="switchTab('batch')">Batch Processing</button> | |
| </div> | |
| </aside> | |
| <!-- Content Area --> | |
| <main class="content-area"> | |
| <!-- Basic Assessment --> | |
| <div id="basic-card" class="assessment-card active"> | |
| <div class="card-header"> | |
| <h2>Basic Assessment</h2> | |
| <p>Quick vulnerability analysis for a single location</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/assess', 'basic-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude">Latitude</label> | |
| <input type="text" id="latitude" name="latitude" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" required placeholder="40.7128"> | |
| <p class="helper-text">Range: -90 to 90</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude">Longitude</label> | |
| <input type="text" id="longitude" name="longitude" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" autocomplete="off" required placeholder="-74.0060"> | |
| <p class="helper-text">Range: -180 to 180</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height" step="any" value="0" placeholder="5.0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude" | |
| data-lon-id="longitude" data-height-id="height" data-error-id="basic-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude" data-lon-id="longitude" data-height-id="height" | |
| data-error-id="basic-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text"> | |
| Meters above ground (0 = ground level) | |
| </p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement">Basement Depth</label> | |
| <input type="text" id="basement" name="basement" value="0" max="0" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" placeholder="-2.0"> | |
| <p class="helper-text">Meters below ground (negative values)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Analyze Location</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="basic-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing terrain and water proximity...</p> | |
| </div> | |
| <div class="error-message" id="basic-error"></div> | |
| <div class="results-section" id="basic-results"></div> | |
| </div> | |
| <!-- Explained Assessment --> | |
| <div id="explained-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Detailed Explanation</h2> | |
| <p>Get comprehensive risk factor analysis with SHAP explanations</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/explain', 'explained-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude2">Latitude</label> | |
| <input type="text" id="latitude2" name="latitude2" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="40.7128"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude2">Longitude</label> | |
| <input type="text" id="longitude2" name="longitude2" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="-74.0060"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height2">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height2" step="any" value="0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude2" | |
| data-lon-id="longitude2" data-height-id="height2" | |
| data-error-id="explained-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude2" data-lon-id="longitude2" data-height-id="height2" | |
| data-error-id="explained-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text">Meters above ground</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement2">Basement Depth</label> | |
| <input type="text" id="basement2" name="basement2" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" step="0.1" value="0" max="0"> | |
| <p class="helper-text">Meters below ground (negative)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Analyze with Explanation</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="explained-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing and generating explanation...</p> | |
| </div> | |
| <div class="error-message" id="explained-error"></div> | |
| <div class="results-section" id="explained-results"></div> | |
| </div> | |
| <!-- Multi-Hazard Assessment --> | |
| <div id="multihazard-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Multi-Hazard Analysis</h2> | |
| <p>Comprehensive assessment across fluvial, coastal, and pluvial hazards</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/assess_multihazard', 'multihazard-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude3">Latitude</label> | |
| <input type="text" id="latitude3" name="latitude3" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="40.7128"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude3">Longitude</label> | |
| <input type="text" id="longitude3" name="longitude3" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="-74.0060"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height3">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height3" step="any" value="0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude3" | |
| data-lon-id="longitude3" data-height-id="height3" | |
| data-error-id="multihazard-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude3" data-lon-id="longitude3" data-height-id="height3" | |
| data-error-id="multihazard-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text">Meters above ground</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement3">Basement Depth</label> | |
| <input type="text" id="basement3" name="basement3" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" step="0.1" value="0" max="0"> | |
| <p class="helper-text">Meters below ground (negative)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Run Multi-Hazard Analysis</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="multihazard-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing multiple flood hazards...</p> | |
| </div> | |
| <div class="error-message" id="multihazard-error"></div> | |
| <div class="results-section" id="multihazard-results"></div> | |
| </div> | |
| <!-- Batch Processing --> | |
| <div id="batch-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Batch Processing</h2> | |
| <p>Upload a CSV file to assess multiple locations simultaneously</p> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="batchMode">Analysis Mode</label> | |
| <select id="batchMode"> | |
| <option value="standard">Basic Assessment Model</option> | |
| <option value="multihazard">Multi-Hazard Analysis</option> | |
| </select> | |
| <p class="helper-text">Choose the assessment type for batch processing</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="csvFile">CSV File</label> | |
| <input type="file" id="csvFile" accept=".csv"> | |
| <p class="helper-text">Required columns: latitude, longitude in decimal degrees (e.g. 29.17, | |
| -95.31). Optional: height(meters), basement (should be negative).</p> | |
| </div> | |
| </div> | |
| <div class="input-card" style="margin-top: 1.5rem;"> | |
| <label for="heightSource">Building Height Source</label> | |
| <select id="heightSource"> | |
| <option value="csv">Use height from CSV (default)</option> | |
| <option value="gba">Use height from Global Buildings Atlas (GBA)</option> | |
| <option value="predicted">Use DL-predicted building height</option> | |
| </select> | |
| <p class="helper-text"> | |
| Choose how to obtain building height for each row in the vulnerability assessment. | |
| </p> | |
| </div> | |
| <div class="action-section"> | |
| <button class="primary-button" onclick="uploadBatch()">Process Batch</button> | |
| </div> | |
| <div class="loading-state" id="batch-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Processing batch assessments...</p> | |
| </div> | |
| <div class="error-message" id="batch-error"></div> | |
| <div class="results-section" id="batch-results"></div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer> | |
| © 2025 Flood Vulnerability Assessment | Powered by Google Earth Engine | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const buttons = document.querySelectorAll('.predict-height-btn'); | |
| if (!buttons.length) { | |
| return; | |
| } | |
| buttons.forEach(button => { | |
| const latId = button.dataset.latId; | |
| const lonId = button.dataset.lonId; | |
| const heightId = button.dataset.heightId; | |
| const errorId = button.dataset.errorId; | |
| button.addEventListener('click', () => { | |
| predictHeight(latId, lonId, heightId, errorId, button); | |
| }); | |
| }); | |
| }); | |
| async function predictHeight(latId, lonId, heightId, errorId, button) { | |
| const latInput = document.getElementById(latId); | |
| const lonInput = document.getElementById(lonId); | |
| const heightInput = document.getElementById(heightId); | |
| const errorBox = document.getElementById(errorId); | |
| if (!latInput || !lonInput || !heightInput || !errorBox) { | |
| return; | |
| } | |
| errorBox.style.display = 'none'; | |
| errorBox.textContent = ''; | |
| const latitude = parseFloat(latInput.value); | |
| const longitude = parseFloat(lonInput.value); | |
| if (isNaN(latitude) || isNaN(longitude)) { | |
| errorBox.textContent = 'Please enter latitude and longitude first.'; | |
| errorBox.style.display = 'block'; | |
| return; | |
| } | |
| const originalText = button.textContent; | |
| button.disabled = true; | |
| button.textContent = 'Predicting...'; | |
| try { | |
| const response = await fetch('/predict_height', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| latitude, | |
| longitude, | |
| height: 0, | |
| basement: 0 | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok || data.status !== 'success' || data.predicted_height == null) { | |
| const message = data.detail || data.error || 'Height prediction failed.'; | |
| throw new Error(message); | |
| } | |
| const h = Number(data.predicted_height); | |
| heightInput.value = h.toFixed(2); | |
| heightInput.classList.add('height-pulse'); | |
| setTimeout(() => { | |
| heightInput.classList.remove('height-pulse'); | |
| }, 800); | |
| } catch (err) { | |
| errorBox.textContent = err.message || 'Height prediction failed.'; | |
| errorBox.style.display = 'block'; | |
| } finally { | |
| button.disabled = false; | |
| button.textContent = originalText; | |
| } | |
| } | |
| function switchTab(tabName) { | |
| document.querySelectorAll('.assessment-card').forEach(card => { | |
| card.classList.remove('active'); | |
| }); | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| }); | |
| document.getElementById(tabName + '-card').classList.add('active'); | |
| event.target.classList.add('active'); | |
| } | |
| async function assessLocation(event, endpoint, resultsId) { | |
| event.preventDefault(); | |
| const tabName = resultsId.split('-')[0]; | |
| const suffix = endpoint === '/assess' ? '' : (endpoint === '/explain' ? '2' : '3'); | |
| const latitude = parseFloat(document.getElementById('latitude' + suffix).value); | |
| const longitude = parseFloat(document.getElementById('longitude' + suffix).value); | |
| const height = parseFloat(document.getElementById('height' + suffix).value) || 0; | |
| const basement = parseFloat(document.getElementById('basement' + suffix).value) || 0; | |
| document.getElementById(tabName + '-loading').style.display = 'block'; | |
| document.getElementById(resultsId).style.display = 'none'; | |
| document.getElementById(tabName + '-error').style.display = 'none'; | |
| try { | |
| const response = await fetch(endpoint, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ latitude, longitude, height, basement }) | |
| }); | |
| const data = await response.json(); | |
| if (data.status === 'success') { | |
| displayResults(data, resultsId, endpoint); | |
| } else { | |
| throw new Error(data.detail || 'Assessment failed'); | |
| } | |
| } catch (error) { | |
| document.getElementById(tabName + '-error').textContent = error.message; | |
| document.getElementById(tabName + '-error').style.display = 'block'; | |
| } finally { | |
| document.getElementById(tabName + '-loading').style.display = 'none'; | |
| } | |
| } | |
| function formatFlag(flag) { | |
| const flagMessages = { | |
| 'missing_elevation': 'Elevation data unavailable', | |
| 'missing_tpi': 'Topographic position data incomplete', | |
| 'missing_slope': 'Slope data incomplete', | |
| 'water_distance_unknown': 'Water proximity uncertain', | |
| 'far_from_water_search_limited': 'Far from major water bodies (search radius limited)', | |
| 'steep_terrain_dem_error_high': 'Steep terrain increases measurement uncertainty', | |
| 'coastal_surge_risk_not_modeled': 'Coastal surge dynamics not fully captured' | |
| }; | |
| return flagMessages[flag] || flag.replace(/_/g, ' '); | |
| } | |
| function displayResults(data, resultsId, endpoint) { | |
| const resultsDiv = document.getElementById(resultsId); | |
| const assessment = data.assessment; | |
| let html = '<div class="results-header">'; | |
| html += '<h2>Assessment Complete</h2>'; | |
| const riskClass = 'risk-' + assessment.risk_level.replace(/_/g, '-'); | |
| html += `<div class="risk-badge ${riskClass}">${assessment.risk_level.replace(/_/g, ' ')}</div>`; | |
| html += '</div>'; | |
| html += '<div class="stats-grid">'; | |
| if (assessment.confidence_interval) { | |
| const ci = assessment.confidence_interval; | |
| html += ` | |
| <div class="stat-card"> | |
| <div class="stat-label">Vulnerability Index</div> | |
| <div class="stat-value">${ci.point_estimate}</div> | |
| <p style="font-size: 0.85em; color: #64748b; margin-top: 0.5rem;"> | |
| 95% CI: ${ci.lower_bound_95}–${ci.upper_bound_95} | |
| </p> | |
| </div> | |
| `; | |
| } else { | |
| html += ` | |
| <div class="stat-card"> | |
| <div class="stat-label">Vulnerability Index</div> | |
| <div class="stat-value">${assessment.vulnerability_index}</div> | |
| </div> | |
| `; | |
| } | |
| html += ` | |
| <div class="stat-card"> | |
| <div class="stat-label">Elevation</div> | |
| <div class="stat-value">${assessment.elevation_m}m</div> | |
| </div> | |
| `; | |
| if (assessment.distance_to_water_m !== null) { | |
| html += ` | |
| <div class="stat-card"> | |
| <div class="stat-label">Distance to Water</div> | |
| <div class="stat-value">${assessment.distance_to_water_m}m</div> | |
| </div> | |
| `; | |
| } | |
| html += '</div>'; | |
| if (assessment.uncertainty_analysis) { | |
| const ua = assessment.uncertainty_analysis; | |
| const confidenceValue = parseFloat(ua.confidence) || 0; | |
| const barWidth = Math.round(confidenceValue * 100); | |
| let confidenceClass = 'confidence-low-fill'; | |
| if (confidenceValue >= 0.75) confidenceClass = 'confidence-high'; | |
| else if (confidenceValue >= 0.55) confidenceClass = 'confidence-moderate-fill'; | |
| html += ` | |
| <div class="confidence-section"> | |
| <h3>Assessment Confidence</h3> | |
| <div class="confidence-bar-wrapper"> | |
| <span>Low</span> | |
| <div class="confidence-bar"> | |
| <div class="confidence-fill ${confidenceClass}" style="width: ${barWidth}%;"></div> | |
| <span class="confidence-text">${barWidth}%</span> | |
| </div> | |
| <span>High</span> | |
| </div> | |
| <p style="margin-top: 1rem; color: #94a3b8; font-style: italic;"> | |
| ${ua.interpretation} | |
| </p> | |
| </div> | |
| `; | |
| if (ua.data_quality_flags && ua.data_quality_flags.length > 0) { | |
| const criticalFlags = ua.data_quality_flags.filter(flag => | |
| flag === 'steep_terrain_dem_error_high' || | |
| flag === 'coastal_surge_risk_not_modeled' | |
| ); | |
| if (criticalFlags.length > 0) { | |
| html += '<div class="quality-warning"><h4>⚠ Data Quality Notes</h4><ul>'; | |
| criticalFlags.forEach(flag => { | |
| html += `<li>${formatFlag(flag)}</li>`; | |
| }); | |
| html += '</ul></div>'; | |
| } | |
| } | |
| } | |
| html += '<div class="detail-section"><h3>Terrain Analysis</h3>'; | |
| html += ` | |
| <div class="metric-row"> | |
| <span class="metric-label">Elevation</span> | |
| <span class="metric-value">${assessment.elevation_m} m</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">Relative Elevation (TPI)</span> | |
| <span class="metric-value">${assessment.relative_elevation_m !== null ? assessment.relative_elevation_m + ' m' : 'N/A'}</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">Slope</span> | |
| <span class="metric-value">${assessment.slope_degrees !== null ? assessment.slope_degrees + '°' : 'N/A'}</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label">Distance to Water</span> | |
| <span class="metric-value">${assessment.distance_to_water_m !== null ? assessment.distance_to_water_m + ' m' : 'N/A'}</span> | |
| </div> | |
| `; | |
| html += '</div>'; | |
| if (assessment.hazard_breakdown) { | |
| const hb = assessment.hazard_breakdown; | |
| html += '<div class="detail-section"><h3>Hazard Breakdown</h3>'; | |
| html += '<div class="hazard-grid">'; | |
| html += ` | |
| <div class="hazard-card"> | |
| <div class="hazard-type">Fluvial/Riverine</div> | |
| <div class="hazard-value">${hb.fluvial_riverine}</div> | |
| </div> | |
| <div class="hazard-card"> | |
| <div class="hazard-type">Coastal Surge</div> | |
| <div class="hazard-value">${hb.coastal_surge}</div> | |
| </div> | |
| <div class="hazard-card"> | |
| <div class="hazard-type">Pluvial/Drainage</div> | |
| <div class="hazard-value">${hb.pluvial_drainage}</div> | |
| </div> | |
| `; | |
| html += '</div>'; | |
| html += `<p style="margin-top: 1.5rem;"><strong>Dominant Hazard:</strong> ${assessment.dominant_hazard.replace(/_/g, ' ').toUpperCase()}</p>`; | |
| html += '</div>'; | |
| } | |
| if (data.explanation) { | |
| const exp = data.explanation; | |
| html += '<div class="explanation-section">'; | |
| html += '<h3>Risk Factor Analysis</h3>'; | |
| html += `<p style="margin-bottom: 1.5rem; color: #cbd5e1;"><strong>Top Risk Driver:</strong> ${exp.top_risk_driver}</p>`; | |
| exp.explanations.forEach(factor => { | |
| html += ` | |
| <div class="factor-item"> | |
| <span class="factor-name">${factor.factor}</span> | |
| <div class="factor-bar"> | |
| <div class="factor-fill" style="width: ${factor.contribution_pct}%"></div> | |
| </div> | |
| <span class="factor-percentage">${factor.contribution_pct}%</span> | |
| </div> | |
| `; | |
| }); | |
| html += '</div>'; | |
| } | |
| resultsDiv.innerHTML = html; | |
| resultsDiv.style.display = 'block'; | |
| } | |
| async function getHeightFromGBA(latId, lonId, heightId, errorId, button) { | |
| const lat = parseFloat(document.getElementById(latId).value); | |
| const lon = parseFloat(document.getElementById(lonId).value); | |
| const errorBox = document.getElementById(errorId); | |
| if (errorBox) errorBox.textContent = ''; | |
| if (Number.isNaN(lat) || Number.isNaN(lon)) { | |
| if (errorBox) errorBox.textContent = 'Please enter valid latitude and longitude.'; | |
| return; | |
| } | |
| const originalText = button.textContent; | |
| button.disabled = true; | |
| button.textContent = 'Fetching...'; | |
| try { | |
| const resp = await fetch('/get_height_gba', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ latitude: lat, longitude: lon, height: 0, basement: 0 }) | |
| }); | |
| const data = await resp.json(); | |
| if (!resp.ok) { | |
| const msg = data?.detail || 'Failed to get GBA height'; | |
| throw new Error(msg); | |
| } | |
| const h = data.predicted_height; | |
| if (h === null || h === undefined) { | |
| throw new Error('No height returned'); | |
| } | |
| document.getElementById(heightId).value = Number(h).toFixed(2); | |
| } catch (e) { | |
| if (errorBox) { | |
| errorBox.textContent = String(e.message || e); | |
| errorBox.style.display = 'block'; | |
| } | |
| } finally { | |
| button.disabled = false; | |
| button.textContent = originalText; | |
| } | |
| } | |
| document.querySelectorAll('.gba-height-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| getHeightFromGBA( | |
| btn.dataset.latId, | |
| btn.dataset.lonId, | |
| btn.dataset.heightId, | |
| btn.dataset.errorId, | |
| btn | |
| ); | |
| }); | |
| }); | |
| async function uploadBatch() { | |
| const fileInput = document.getElementById('csvFile'); | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| alert('Please select a CSV file'); | |
| return; | |
| } | |
| document.getElementById('batch-loading').style.display = 'block'; | |
| document.getElementById('batch-results').style.display = 'none'; | |
| document.getElementById('batch-error').style.display = 'none'; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| try { | |
| const mode = document.getElementById('batchMode').value; | |
| const heightSource = document.getElementById('heightSource').value; | |
| let endpoint = mode === 'multihazard' ? '/assess_batch_multihazard' : '/assess_batch'; | |
| if (heightSource === 'gba') { | |
| const sep = endpoint.includes('?') ? '&' : '?'; | |
| endpoint = endpoint + sep + 'use_gba_height=true'; | |
| } else if (heightSource === 'predicted') { | |
| const sep = endpoint.includes('?') ? '&' : '?'; | |
| endpoint = endpoint + sep + 'use_predicted_height=true'; | |
| } | |
| const response = await fetch(endpoint, { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| const filename = mode === 'multihazard' | |
| ? 'multihazard_results.csv' | |
| : 'vulnerability_results.csv'; | |
| a.download = filename; | |
| document.body.appendChild(a); | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| document.getElementById('batch-results').innerHTML = ` | |
| <div class="results-header"> | |
| <h2>✓ Processing Complete</h2> | |
| <p style="color: #94a3b8; margin-top: 1rem;">Results downloaded as ${filename}</p> | |
| </div> | |
| `; | |
| document.getElementById('batch-results').style.display = 'block'; | |
| } else { | |
| throw new Error('Batch processing failed'); | |
| } | |
| } catch (error) { | |
| document.getElementById('batch-error').textContent = error.message; | |
| document.getElementById('batch-error').style.display = 'block'; | |
| } finally { | |
| document.getElementById('batch-loading').style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |