Update templates/index.html

templates/index.html

@@ -5,1050 +5,7 @@
     <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 !important;
-            border: none !important;
-            border-radius: 0 !important;
-            color: #e2e8f0;
-            font-size: 1em;
-            box-shadow: none !important;
-        }
-
-        .height-group input:focus {
-            outline: none;
-        }
-
-        .height-group button {
-            width: auto !important;
-            padding: 0.875rem 1.5rem !important;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
-            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 !important;
-            transform: none !important;
-        }
-
-        .height-group button:hover {
-            opacity: 0.9;
-            transform: none !important;
-        }
-
-        .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 !important;
-            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 !important;
-        }
-
-        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;
-        }
-
-        input[type="text"]::-webkit-calendar-picker-indicator,
-        input[type="number"]::-webkit-calendar-picker-indicator {
-            filter: invert(1);
-            cursor: pointer;
-        }
-
-        /* 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>
+    <link rel="stylesheet" href="/static/css/styles.css">
 </head>
 
 <body>
@@ -1056,8 +13,6 @@
 
     <div class="page-wrapper">
         <header class="hero-header" style="position: relative; padding-top: 40px; text-align: center;">
-
-
             <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
@@ -1066,7 +21,6 @@
                     Global building-level assessment
                 </p>
             </div>
-
         </header>
 
         <div class="main-container">
@@ -1338,584 +292,7 @@
     <datalist id="height-suggestions"></datalist>
     <datalist id="basement-suggestions"></datalist>
 
-    <script>
-        const CACHE_KEY = 'flood_assessment_cache';
-        const MAX_CACHE_SIZE = 5;
-
-        // Get cached entries 
-        function getCachedEntries() {
-            try {
-                const cached = localStorage.getItem(CACHE_KEY);
-                return cached ? JSON.parse(cached) : [];
-            } catch (e) {
-                console.error('Error reading cache:', e);
-                return [];
-            }
-        }
-
-        function saveToCacheFunction(latitude, longitude, height, basement) {
-            try {
-                let entries = getCachedEntries();
-
-                const newEntry = {
-                    latitude: parseFloat(latitude).toFixed(6),
-                    longitude: parseFloat(longitude).toFixed(6),
-                    height: parseFloat(height).toFixed(2),
-                    basement: parseFloat(basement).toFixed(2),
-                    timestamp: Date.now()
-                };
-
-                // checknig if entry already exists
-                const exists = entries.some(entry =>
-                    entry.latitude === newEntry.latitude &&
-                    entry.longitude === newEntry.longitude &&
-                    entry.height === newEntry.height &&
-                    entry.basement === newEntry.basement
-                );
-
-                if (!exists) {
-                    entries.unshift(newEntry);
-
-                    if (entries.length > MAX_CACHE_SIZE) {
-                        entries = entries.slice(0, MAX_CACHE_SIZE);
-                    }
-
-                    localStorage.setItem(CACHE_KEY, JSON.stringify(entries));
-                    updateDatalistSuggestions();
-                }
-            } catch (e) {
-                console.error('Error saving to cache:', e);
-            }
-        }
-
-        function updateDatalistSuggestions() {
-            const entries = getCachedEntries();
-
-            updateDatalist('lat-suggestions', entries, 'latitude');
-
-            updateDatalist('lon-suggestions', entries, 'longitude');
-
-            updateDatalist('height-suggestions', entries, 'height');
-
-            updateDatalist('basement-suggestions', entries, 'basement');
-        }
-
-        function updateDatalist(datalistId, entries, field) {
-            const datalist = document.getElementById(datalistId);
-            if (!datalist) return;
-
-            datalist.innerHTML = '';
-
-            entries.forEach((entry) => {
-                const option = document.createElement('option');
-                option.value = entry[field];
-
-                if (field === 'latitude') {
-                    option.label = `${entry.latitude} | Lon: ${entry.longitude}, H: ${entry.height}m, B: ${entry.basement}m`;
-                } else if (field === 'longitude') {
-                    option.label = `${entry.longitude} | Lat: ${entry.latitude}, H: ${entry.height}m, B: ${entry.basement}m`;
-                } else if (field === 'height') {
-                    option.label = `${entry.height}m | At: ${entry.latitude}, ${entry.longitude}`;
-                } else if (field === 'basement') {
-                    option.label = `${entry.basement}m | At: ${entry.latitude}, ${entry.longitude}`;
-                }
-
-                datalist.appendChild(option);
-            });
-        }
-
-        function setupAutoFill() {
-            const forms = [
-                { suffix: '', latId: 'latitude', lonId: 'longitude' },
-                { suffix: '2', latId: 'latitude2', lonId: 'longitude2' },
-                { suffix: '3', latId: 'latitude3', lonId: 'longitude3' }
-            ];
-
-            forms.forEach(({ suffix, latId, lonId }) => {
-                const latInput = document.getElementById(latId);
-                const lonInput = document.getElementById(lonId);
-
-                if (!latInput || !lonInput) return;
-
-                let lastChangeTime = 0;
-                let pendingAutoFill = null;
-
-                const tryAutoFill = () => {
-                    const latValue = parseNumber(latInput.value);
-                    const lonValue = parseNumber(lonInput.value);
-
-                    if (isNaN(latValue) || isNaN(lonValue)) return;
-
-                    const entries = getCachedEntries();
-                    const normalizedLat = latValue.toFixed(6);
-                    const normalizedLon = lonValue.toFixed(6);
-
-                    // Find entry matching BOTH lat and lon
-                    const match = entries.find(entry =>
-                        entry.latitude === normalizedLat &&
-                        entry.longitude === normalizedLon
-                    );
-
-                    if (match) {
-                        const heightInput = document.getElementById('height' + suffix);
-                        const basementInput = document.getElementById('basement' + suffix);
-
-                        if (heightInput && basementInput) {
-                            heightInput.value = match.height;
-                            basementInput.value = match.basement;
-
-                            [latInput, lonInput, heightInput, basementInput].forEach(input => {
-                                input.classList.add('height-pulse');
-                                setTimeout(() => input.classList.remove('height-pulse'), 800);
-                            });
-                        }
-                    }
-                };
-
-                latInput.addEventListener('change', () => {
-                    setTimeout(tryAutoFill, 100);
-                });
-
-                lonInput.addEventListener('change', () => {
-                    setTimeout(tryAutoFill, 100);
-                });
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            updateDatalistSuggestions();
-            setupAutoFill();
-
-            const buttons = document.querySelectorAll('.predict-height-btn');
-            if (buttons.length > 0) {
-                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 to parse numbers with comma or dot as decimal separator
-        function parseNumber(value) {
-            if (typeof value === 'string') {
-                value = value.replace(',', '.');
-            }
-            return parseFloat(value);
-        }
-
-        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') {
-                    // Save to cache on successful assessment
-                    saveToCacheFunction(latitude, longitude, height, basement);
-                    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 = parseNumber(document.getElementById(latId).value);
-            const lon = parseNumber(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>
+    <script src="/static/js/app.js"></script>
 </body>
 
 </html>