Created
February 21, 2026 06:15
-
-
Save davekennewell/1accb0be074c3ed8cbfec65cb74453e7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hydrata - Surface Water Modeling, Simplified</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --blue-900: #1a3354; | |
| --blue-800: #1e3d6b; | |
| --blue-700: #264b82; | |
| --blue-600: #346094; | |
| --blue-500: #4078b4; | |
| --blue-400: #5a92cc; | |
| --blue-300: #7daed8; | |
| --blue-200: #a8cbe8; | |
| --blue-100: #d4e5f4; | |
| --blue-50: #eef5fb; | |
| --teal-600: #0d7377; | |
| --teal-500: #0f8b8d; | |
| --teal-400: #14a3a8; | |
| --teal-300: #3dbfc3; | |
| --teal-200: #7dd5d8; | |
| --teal-100: #c2ecee; | |
| --teal-50: #e8f7f8; | |
| --gray-900: #111827; | |
| --gray-800: #1f2937; | |
| --gray-700: #374151; | |
| --gray-600: #4b5563; | |
| --gray-500: #6b7280; | |
| --gray-400: #9ca3af; | |
| --gray-300: #d1d5db; | |
| --gray-200: #e5e7eb; | |
| --gray-100: #f3f4f6; | |
| --gray-50: #f9fafb; | |
| --white: #ffffff; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); | |
| --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04); | |
| --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| color: var(--gray-800); | |
| background: var(--white); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ── NAV ── */ | |
| nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| background: rgba(255,255,255,0.92); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--gray-200); | |
| transition: box-shadow 0.3s ease; | |
| } | |
| nav.scrolled { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .nav-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| height: 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--blue-800); | |
| } | |
| .nav-logo-icon { | |
| width: 36px; | |
| height: 36px; | |
| background: linear-gradient(135deg, var(--blue-600), var(--teal-500)); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-logo-icon svg { | |
| width: 20px; | |
| height: 20px; | |
| fill: white; | |
| } | |
| .nav-logo-text { | |
| font-size: 20px; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 32px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--gray-600); | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--blue-600); | |
| } | |
| .nav-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 8px 20px; | |
| background: var(--blue-600); | |
| color: var(--white) !important; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| transition: background 0.2s, transform 0.1s; | |
| } | |
| .nav-cta:hover { | |
| background: var(--blue-700); | |
| transform: translateY(-1px); | |
| } | |
| .nav-mobile-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 8px; | |
| } | |
| .nav-mobile-toggle span { | |
| display: block; | |
| width: 22px; | |
| height: 2px; | |
| background: var(--gray-700); | |
| margin: 5px 0; | |
| border-radius: 2px; | |
| transition: all 0.3s; | |
| } | |
| /* ── HERO ── */ | |
| .hero { | |
| padding: 140px 24px 80px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%); | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(ellipse 800px 400px at 20% 30%, rgba(52,96,148,0.04) 0%, transparent 70%), | |
| radial-gradient(ellipse 600px 300px at 80% 60%, rgba(15,139,141,0.04) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-inner { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 16px; | |
| background: var(--white); | |
| border: 1px solid var(--blue-200); | |
| border-radius: 100px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--blue-600); | |
| margin-bottom: 28px; | |
| } | |
| .hero-badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--teal-500); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.6; transform: scale(1.3); } | |
| } | |
| .hero h1 { | |
| font-size: clamp(36px, 5.5vw, 64px); | |
| font-weight: 800; | |
| line-height: 1.08; | |
| letter-spacing: -0.03em; | |
| color: var(--gray-900); | |
| margin-bottom: 20px; | |
| } | |
| .hero h1 span { | |
| background: linear-gradient(135deg, var(--blue-600) 0%, var(--teal-500) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| font-size: clamp(17px, 2vw, 20px); | |
| color: var(--gray-500); | |
| max-width: 580px; | |
| margin: 0 auto 36px; | |
| line-height: 1.6; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .btn-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 14px 28px; | |
| background: var(--blue-600); | |
| color: var(--white); | |
| text-decoration: none; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| transition: all 0.2s; | |
| box-shadow: 0 1px 3px rgba(52,96,148,0.3); | |
| } | |
| .btn-primary:hover { | |
| background: var(--blue-700); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(52,96,148,0.3); | |
| } | |
| .btn-primary svg { | |
| width: 18px; | |
| height: 18px; | |
| transition: transform 0.2s; | |
| } | |
| .btn-primary:hover svg { | |
| transform: translateX(2px); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 14px 28px; | |
| background: var(--white); | |
| color: var(--gray-700); | |
| text-decoration: none; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| border: 1px solid var(--gray-300); | |
| transition: all 0.2s; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--gray-50); | |
| border-color: var(--gray-400); | |
| transform: translateY(-1px); | |
| } | |
| /* ── WORKFLOW STRIP ── */ | |
| .workflow-strip { | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 2; | |
| margin-top: -20px; | |
| } | |
| .workflow-strip-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| background: var(--white); | |
| border-radius: var(--radius-xl); | |
| box-shadow: var(--shadow-xl); | |
| border: 1px solid var(--gray-200); | |
| padding: 40px 32px; | |
| position: relative; | |
| } | |
| .workflow-strip-label { | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--blue-600); | |
| color: var(--white); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| padding: 4px 20px; | |
| border-radius: 100px; | |
| } | |
| .workflow-steps { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| position: relative; | |
| } | |
| /* connecting line */ | |
| .workflow-steps::before { | |
| content: ''; | |
| position: absolute; | |
| top: 24px; | |
| left: 48px; | |
| right: 48px; | |
| height: 2px; | |
| background: linear-gradient(90deg, | |
| var(--blue-300) 0%, | |
| var(--blue-400) 25%, | |
| var(--teal-400) 50%, | |
| var(--teal-300) 75%, | |
| var(--teal-200) 100% | |
| ); | |
| z-index: 0; | |
| } | |
| .workflow-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| flex: 1; | |
| padding: 0 8px; | |
| } | |
| .step-number { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--white); | |
| margin-bottom: 14px; | |
| position: relative; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| .step-1 .step-number { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); } | |
| .step-2 .step-number { background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); } | |
| .step-3 .step-number { background: linear-gradient(135deg, var(--blue-500), var(--teal-500)); } | |
| .step-4 .step-number { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); } | |
| .step-5 .step-number { background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); } | |
| .step-icon { | |
| width: 22px; | |
| height: 22px; | |
| margin-bottom: 10px; | |
| opacity: 0.7; | |
| } | |
| .step-title { | |
| font-size: 13px; | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| margin-bottom: 4px; | |
| letter-spacing: -0.01em; | |
| } | |
| .step-desc { | |
| font-size: 12px; | |
| color: var(--gray-500); | |
| line-height: 1.4; | |
| max-width: 140px; | |
| } | |
| /* ── FEATURE SECTIONS ── */ | |
| .features { | |
| padding: 100px 24px 60px; | |
| } | |
| .feature-section { | |
| max-width: 1100px; | |
| margin: 0 auto 100px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .feature-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .feature-section.reverse .feature-visual { | |
| order: 2; | |
| } | |
| .feature-section.reverse .feature-content { | |
| order: 1; | |
| } | |
| .feature-content { | |
| padding: 20px 0; | |
| } | |
| .feature-step-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 16px; | |
| } | |
| .feature-step-num { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--white); | |
| } | |
| .feature-step-label { | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .feature-step-1 .feature-step-num { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); } | |
| .feature-step-1 .feature-step-label { color: var(--blue-600); } | |
| .feature-step-2 .feature-step-num { background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); } | |
| .feature-step-2 .feature-step-label { color: var(--blue-500); } | |
| .feature-step-3 .feature-step-num { background: linear-gradient(135deg, var(--blue-500), var(--teal-500)); } | |
| .feature-step-3 .feature-step-label { color: var(--teal-600); } | |
| .feature-step-4 .feature-step-num { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); } | |
| .feature-step-4 .feature-step-label { color: var(--teal-500); } | |
| .feature-step-5 .feature-step-num { background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); } | |
| .feature-step-5 .feature-step-label { color: var(--teal-500); } | |
| .feature-content h2 { | |
| font-size: clamp(26px, 3vw, 34px); | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--gray-900); | |
| margin-bottom: 16px; | |
| line-height: 1.15; | |
| } | |
| .feature-content > p { | |
| font-size: 16px; | |
| color: var(--gray-500); | |
| margin-bottom: 24px; | |
| line-height: 1.65; | |
| } | |
| .feature-bullets { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .feature-bullets li { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| font-size: 15px; | |
| color: var(--gray-700); | |
| line-height: 1.5; | |
| } | |
| .feature-bullets li .bullet-icon { | |
| flex-shrink: 0; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 1px; | |
| } | |
| .feature-step-1 .bullet-icon { background: var(--blue-100); color: var(--blue-600); } | |
| .feature-step-2 .bullet-icon { background: var(--blue-100); color: var(--blue-500); } | |
| .feature-step-3 .bullet-icon { background: var(--teal-100); color: var(--teal-600); } | |
| .feature-step-4 .bullet-icon { background: var(--teal-100); color: var(--teal-500); } | |
| .feature-step-5 .bullet-icon { background: var(--teal-100); color: var(--teal-500); } | |
| .bullet-icon svg { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| /* ── PLACEHOLDER VISUALS (CSS-only "screenshots") ── */ | |
| .feature-visual { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-xl); | |
| border: 1px solid var(--gray-200); | |
| aspect-ratio: 4 / 3; | |
| background: var(--gray-50); | |
| } | |
| /* Shared toolbar */ | |
| .mock-toolbar { | |
| height: 36px; | |
| background: var(--white); | |
| border-bottom: 1px solid var(--gray-200); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 12px; | |
| gap: 6px; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| z-index: 5; | |
| } | |
| .mock-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--gray-300); | |
| } | |
| .mock-dot:nth-child(1) { background: #ff5f57; } | |
| .mock-dot:nth-child(2) { background: #febc2e; } | |
| .mock-dot:nth-child(3) { background: #28c840; } | |
| .mock-tab { | |
| margin-left: 12px; | |
| height: 22px; | |
| padding: 0 12px; | |
| background: var(--gray-100); | |
| border-radius: 4px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| color: var(--gray-500); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .mock-content { | |
| position: absolute; | |
| top: 36px; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| overflow: hidden; | |
| } | |
| /* Visual 1: Upload / terrain */ | |
| .visual-upload .mock-content { | |
| background: linear-gradient(160deg, #e3eef8 0%, #d0e4f3 40%, #b8d8e8 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .upload-zone { | |
| width: 65%; | |
| height: 55%; | |
| border: 2px dashed var(--blue-300); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(255,255,255,0.7); | |
| backdrop-filter: blur(4px); | |
| } | |
| .upload-zone-icon { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--blue-100); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 12px; | |
| } | |
| .upload-zone-icon svg { | |
| width: 24px; | |
| height: 24px; | |
| stroke: var(--blue-500); | |
| fill: none; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| } | |
| .upload-zone-text { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--blue-600); | |
| } | |
| .upload-zone-sub { | |
| font-size: 10px; | |
| color: var(--gray-400); | |
| margin-top: 4px; | |
| } | |
| /* floating file chips */ | |
| .file-chip { | |
| position: absolute; | |
| background: var(--white); | |
| border-radius: 8px; | |
| padding: 6px 12px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| box-shadow: var(--shadow-md); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .file-chip-icon { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 7px; | |
| font-weight: 800; | |
| color: white; | |
| } | |
| .chip-tif { right: 8%; top: 48px; color: var(--blue-700); } | |
| .chip-tif .file-chip-icon { background: var(--blue-500); } | |
| .chip-shp { left: 6%; bottom: 22%; color: var(--teal-600); } | |
| .chip-shp .file-chip-icon { background: var(--teal-500); } | |
| .chip-csv { right: 12%; bottom: 16%; color: var(--gray-600); } | |
| .chip-csv .file-chip-icon { background: var(--gray-500); } | |
| /* Visual 2: Configure parameters */ | |
| .visual-configure .mock-content { | |
| display: grid; | |
| grid-template-columns: 200px 1fr; | |
| } | |
| .config-sidebar { | |
| background: var(--white); | |
| border-right: 1px solid var(--gray-200); | |
| padding: 16px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .config-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .config-label { | |
| font-size: 9px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--gray-400); | |
| } | |
| .config-input { | |
| height: 28px; | |
| background: var(--gray-100); | |
| border-radius: 6px; | |
| border: 1px solid var(--gray-200); | |
| padding: 0 8px; | |
| font-size: 11px; | |
| color: var(--gray-700); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .config-input.active { | |
| border-color: var(--blue-400); | |
| background: var(--blue-50); | |
| color: var(--blue-700); | |
| } | |
| .config-slider { | |
| height: 4px; | |
| background: var(--gray-200); | |
| border-radius: 2px; | |
| position: relative; | |
| margin-top: 6px; | |
| } | |
| .config-slider::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; top: 0; | |
| width: 65%; | |
| height: 100%; | |
| background: var(--blue-500); | |
| border-radius: 2px; | |
| } | |
| .config-slider-thumb { | |
| position: absolute; | |
| top: -4px; | |
| left: 62%; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| border: 2px solid var(--blue-500); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .config-map { | |
| background: | |
| linear-gradient(135deg, #c8dff0 0%, #a8d1e0 30%, #8cc5b8 60%, #a8d4a0 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Terrain grid lines */ | |
| .config-map::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(255,255,255,0.15) 24px, rgba(255,255,255,0.15) 25px), | |
| repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255,255,255,0.15) 24px, rgba(255,255,255,0.15) 25px); | |
| } | |
| /* mesh triangles suggestion */ | |
| .config-map::after { | |
| content: ''; | |
| position: absolute; | |
| top: 20%; | |
| left: 15%; | |
| width: 70%; | |
| height: 60%; | |
| border: 2px solid rgba(52,96,148,0.3); | |
| border-radius: 4px; | |
| background: repeating-linear-gradient( | |
| 60deg, | |
| transparent, | |
| transparent 30px, | |
| rgba(52,96,148,0.06) 30px, | |
| rgba(52,96,148,0.06) 31px | |
| ), | |
| repeating-linear-gradient( | |
| -60deg, | |
| transparent, | |
| transparent 30px, | |
| rgba(52,96,148,0.06) 30px, | |
| rgba(52,96,148,0.06) 31px | |
| ); | |
| } | |
| .boundary-marker { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--blue-500); | |
| border: 2px solid var(--white); | |
| box-shadow: var(--shadow-sm); | |
| z-index: 2; | |
| } | |
| .boundary-marker:nth-child(1) { top: 30%; left: 25%; } | |
| .boundary-marker:nth-child(2) { top: 25%; left: 55%; } | |
| .boundary-marker:nth-child(3) { top: 50%; left: 70%; } | |
| .boundary-marker:nth-child(4) { top: 70%; left: 45%; } | |
| .boundary-marker:nth-child(5) { top: 55%; left: 20%; } | |
| /* Visual 3: Run simulation */ | |
| .visual-simulate .mock-content { | |
| background: var(--gray-900); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .sim-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .sim-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sim-status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #34d399; | |
| animation: pulse-dot 1.5s ease-in-out infinite; | |
| } | |
| .sim-status-text { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: #34d399; | |
| } | |
| .sim-progress-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sim-progress-bar { | |
| width: 100px; | |
| height: 4px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .sim-progress-fill { | |
| width: 73%; | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--blue-400), var(--teal-400)); | |
| border-radius: 2px; | |
| animation: progress-pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes progress-pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .sim-percent { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: rgba(255,255,255,0.7); | |
| } | |
| .sim-console { | |
| flex: 1; | |
| padding: 12px 16px; | |
| font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; | |
| font-size: 10px; | |
| line-height: 1.8; | |
| color: rgba(255,255,255,0.5); | |
| overflow: hidden; | |
| } | |
| .sim-console .highlight { | |
| color: var(--teal-300); | |
| } | |
| .sim-console .dim { | |
| color: rgba(255,255,255,0.25); | |
| } | |
| .sim-console .timestamp { | |
| color: rgba(255,255,255,0.2); | |
| margin-right: 8px; | |
| } | |
| .sim-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1px; | |
| background: rgba(255,255,255,0.05); | |
| border-top: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .sim-metric { | |
| padding: 10px 14px; | |
| background: var(--gray-900); | |
| } | |
| .sim-metric-label { | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: rgba(255,255,255,0.35); | |
| margin-bottom: 2px; | |
| } | |
| .sim-metric-value { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--white); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Visual 4: Results */ | |
| .visual-results .mock-content { | |
| background: linear-gradient(160deg, #dbeef8 0%, #b0d8ea 35%, #6db9c4 60%, #3a8c96 85%, #1a5f6c 100%); | |
| position: relative; | |
| } | |
| .results-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,0.08) 19px, rgba(255,255,255,0.08) 20px), | |
| repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,255,255,0.08) 19px, rgba(255,255,255,0.08) 20px); | |
| } | |
| /* water depth blobs */ | |
| .depth-blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(8px); | |
| opacity: 0.6; | |
| } | |
| .depth-blob:nth-child(1) { | |
| width: 120px; height: 80px; | |
| background: rgba(26,63,84,0.5); | |
| top: 30%; left: 20%; | |
| border-radius: 40% 60% 50% 50%; | |
| } | |
| .depth-blob:nth-child(2) { | |
| width: 80px; height: 60px; | |
| background: rgba(26,63,84,0.4); | |
| top: 50%; left: 45%; | |
| border-radius: 50% 40% 60% 50%; | |
| } | |
| .depth-blob:nth-child(3) { | |
| width: 60px; height: 40px; | |
| background: rgba(26,63,84,0.3); | |
| top: 35%; left: 60%; | |
| border-radius: 60% 40% 50% 50%; | |
| } | |
| .results-legend { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 12px; | |
| background: rgba(255,255,255,0.92); | |
| backdrop-filter: blur(6px); | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| box-shadow: var(--shadow-md); | |
| z-index: 3; | |
| } | |
| .results-legend-title { | |
| font-size: 9px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--gray-500); | |
| margin-bottom: 6px; | |
| } | |
| .results-legend-bar { | |
| width: 100px; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #dbeef8, #6db9c4, #1a5f6c); | |
| margin-bottom: 4px; | |
| } | |
| .results-legend-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 8px; | |
| font-weight: 600; | |
| color: var(--gray-500); | |
| } | |
| .results-info-card { | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| background: rgba(255,255,255,0.92); | |
| backdrop-filter: blur(6px); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| box-shadow: var(--shadow-md); | |
| z-index: 3; | |
| } | |
| .results-info-card h4 { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| margin-bottom: 3px; | |
| } | |
| .results-info-card p { | |
| font-size: 9px; | |
| color: var(--gray-500); | |
| } | |
| /* Visual 5: Share */ | |
| .visual-share .mock-content { | |
| background: var(--gray-50); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| padding: 20px; | |
| } | |
| .share-card { | |
| width: 85%; | |
| background: var(--white); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--gray-200); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .share-card-header { | |
| padding: 10px 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--gray-100); | |
| } | |
| .share-card-title { | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| } | |
| .share-badge { | |
| font-size: 9px; | |
| font-weight: 700; | |
| padding: 2px 8px; | |
| border-radius: 100px; | |
| background: #dcfce7; | |
| color: #166534; | |
| } | |
| .share-card-preview { | |
| height: 70px; | |
| background: linear-gradient(135deg, #c8dff0, #a8d1c8, #8cc5a0); | |
| position: relative; | |
| } | |
| .share-card-preview::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(255,255,255,0.12) 9px, rgba(255,255,255,0.12) 10px), | |
| repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(255,255,255,0.12) 9px, rgba(255,255,255,0.12) 10px); | |
| } | |
| .share-card-footer { | |
| padding: 8px 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .share-avatar { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--blue-200); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: var(--blue-700); | |
| } | |
| .share-meta { | |
| font-size: 10px; | |
| color: var(--gray-500); | |
| } | |
| .share-actions { | |
| display: flex; | |
| gap: 8px; | |
| width: 85%; | |
| } | |
| .share-action-btn { | |
| flex: 1; | |
| padding: 8px; | |
| border-radius: 8px; | |
| border: 1px solid var(--gray-200); | |
| background: var(--white); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| color: var(--gray-600); | |
| } | |
| .share-action-btn.primary { | |
| background: var(--blue-600); | |
| border-color: var(--blue-600); | |
| color: var(--white); | |
| } | |
| /* ── WHY HYDRATA ── */ | |
| .why-section { | |
| padding: 100px 24px; | |
| background: var(--gray-50); | |
| border-top: 1px solid var(--gray-200); | |
| border-bottom: 1px solid var(--gray-200); | |
| } | |
| .why-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .section-header h2 { | |
| font-size: clamp(28px, 4vw, 42px); | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| color: var(--gray-900); | |
| margin-bottom: 12px; | |
| } | |
| .section-header p { | |
| font-size: 17px; | |
| color: var(--gray-500); | |
| max-width: 520px; | |
| margin: 0 auto; | |
| } | |
| .benefits-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 24px; | |
| } | |
| .benefit-card { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| padding: 32px 24px; | |
| border: 1px solid var(--gray-200); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .benefit-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--blue-500), var(--teal-400)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .benefit-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .benefit-card:hover::before { | |
| opacity: 1; | |
| } | |
| .benefit-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| .benefit-card:nth-child(1) .benefit-icon { background: var(--blue-100); } | |
| .benefit-card:nth-child(2) .benefit-icon { background: var(--teal-100); } | |
| .benefit-card:nth-child(3) .benefit-icon { background: var(--blue-100); } | |
| .benefit-card:nth-child(4) .benefit-icon { background: var(--teal-100); } | |
| .benefit-icon svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .benefit-card h3 { | |
| font-size: 17px; | |
| font-weight: 700; | |
| color: var(--gray-900); | |
| margin-bottom: 8px; | |
| letter-spacing: -0.01em; | |
| } | |
| .benefit-card p { | |
| font-size: 14px; | |
| color: var(--gray-500); | |
| line-height: 1.6; | |
| } | |
| /* ── CTA ── */ | |
| .cta-section { | |
| padding: 100px 24px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-section::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 600px 300px at 30% 50%, rgba(52,96,148,0.04) 0%, transparent 70%), | |
| radial-gradient(ellipse 400px 200px at 70% 50%, rgba(15,139,141,0.04) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .cta-inner { | |
| max-width: 620px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .cta-inner h2 { | |
| font-size: clamp(28px, 4vw, 42px); | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| color: var(--gray-900); | |
| margin-bottom: 14px; | |
| } | |
| .cta-inner p { | |
| font-size: 17px; | |
| color: var(--gray-500); | |
| margin-bottom: 32px; | |
| max-width: 480px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .cta-actions { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .cta-note { | |
| margin-top: 20px; | |
| font-size: 13px; | |
| color: var(--gray-400); | |
| } | |
| /* ── FOOTER ── */ | |
| footer { | |
| background: var(--gray-900); | |
| color: rgba(255,255,255,0.5); | |
| padding: 60px 24px 40px; | |
| } | |
| .footer-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 40px; | |
| } | |
| .footer-brand h3 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--white); | |
| margin-bottom: 10px; | |
| } | |
| .footer-brand p { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| max-width: 280px; | |
| } | |
| .footer-col h4 { | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: rgba(255,255,255,0.7); | |
| margin-bottom: 16px; | |
| } | |
| .footer-col ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .footer-col a { | |
| text-decoration: none; | |
| color: rgba(255,255,255,0.45); | |
| font-size: 14px; | |
| transition: color 0.2s; | |
| } | |
| .footer-col a:hover { | |
| color: var(--white); | |
| } | |
| .footer-bottom { | |
| max-width: 1100px; | |
| margin: 40px auto 0; | |
| padding-top: 24px; | |
| border-top: 1px solid rgba(255,255,255,0.08); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 13px; | |
| } | |
| .footer-bottom a { | |
| color: rgba(255,255,255,0.4); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-bottom a:hover { | |
| color: var(--white); | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 1024px) { | |
| .feature-section { | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| } | |
| .feature-section.reverse .feature-visual, | |
| .feature-section.reverse .feature-content { | |
| order: unset; | |
| } | |
| .feature-visual { | |
| max-width: 560px; | |
| margin: 0 auto; | |
| } | |
| .benefits-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .footer-inner { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .nav-mobile-toggle { | |
| display: block; | |
| } | |
| .nav-links.open { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 64px; | |
| left: 0; | |
| right: 0; | |
| background: var(--white); | |
| border-bottom: 1px solid var(--gray-200); | |
| padding: 20px 24px; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .hero { | |
| padding: 120px 24px 60px; | |
| } | |
| .workflow-strip-inner { | |
| padding: 36px 20px; | |
| overflow-x: auto; | |
| } | |
| .workflow-steps { | |
| min-width: 600px; | |
| } | |
| .workflow-steps::before { | |
| left: 40px; | |
| right: 40px; | |
| } | |
| .feature-section { | |
| margin-bottom: 60px; | |
| } | |
| .config-sidebar { | |
| display: none; | |
| } | |
| .visual-configure .mock-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .benefits-grid { | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .footer-inner { | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| } | |
| .footer-bottom { | |
| flex-direction: column; | |
| gap: 10px; | |
| text-align: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-actions { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .btn-primary, .btn-secondary { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .cta-actions { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| } | |
| /* ── ANIMATIONS ── */ | |
| .fade-up { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .fade-up.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav id="nav"> | |
| <div class="nav-inner"> | |
| <a href="/" class="nav-logo"> | |
| <div class="nav-logo-icon"> | |
| <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg> | |
| </div> | |
| <span class="nav-logo-text">Hydrata</span> | |
| </a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#workflow">How It Works</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#why">Why Hydrata</a></li> | |
| <li><a href="/catalogue/#/?f=map">Explore Maps</a></li> | |
| <li><a href="/account/signup/" class="nav-cta">Get Started</a></li> | |
| </ul> | |
| <button class="nav-mobile-toggle" id="navToggle" aria-label="Toggle menu"> | |
| <span></span><span></span><span></span> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="hero-inner"> | |
| <div class="hero-badge"> | |
| <span class="hero-badge-dot"></span> | |
| Powered by ANUGA Open Source Engine | |
| </div> | |
| <h1>Surface Water Modeling, <span>Simplified</span></h1> | |
| <p>Bring the power of ANUGA hydraulic simulation to your browser. Upload terrain, configure your model, run simulations, and share publication-ready results -- all from one platform.</p> | |
| <div class="hero-actions"> | |
| <a href="/account/signup/" class="btn-primary"> | |
| Start Modeling Free | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg> | |
| </a> | |
| <a href="/catalogue/#/?f=map" class="btn-secondary"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg> | |
| Explore Maps | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- WORKFLOW STRIP --> | |
| <section class="workflow-strip" id="workflow"> | |
| <div class="workflow-strip-inner fade-up"> | |
| <div class="workflow-strip-label">The Modeling Pipeline</div> | |
| <div class="workflow-steps"> | |
| <div class="workflow-step step-1"> | |
| <div class="step-number">1</div> | |
| <svg class="step-icon" viewBox="0 0 24 24" fill="none" stroke="var(--blue-600)" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> | |
| <div class="step-title">Upload Terrain</div> | |
| <div class="step-desc">Import DEMs, shapefiles, and boundary data</div> | |
| </div> | |
| <div class="workflow-step step-2"> | |
| <div class="step-number">2</div> | |
| <svg class="step-icon" viewBox="0 0 24 24" fill="none" stroke="var(--blue-500)" stroke-width="2" stroke-linecap="round"><path d="M12 3v3m6.36-.64l-2.12 2.12M21 12h-3M18.36 18.36l-2.12-2.12M12 21v-3M5.64 18.36l2.12-2.12M3 12h3M5.64 5.64l2.12 2.12"/><circle cx="12" cy="12" r="4"/></svg> | |
| <div class="step-title">Configure</div> | |
| <div class="step-desc">Set boundaries, friction, rainfall and inflows</div> | |
| </div> | |
| <div class="workflow-step step-3"> | |
| <div class="step-number">3</div> | |
| <svg class="step-icon" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="2" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> | |
| <div class="step-title">Run ANUGA</div> | |
| <div class="step-desc">Cloud-powered simulation with live progress</div> | |
| </div> | |
| <div class="workflow-step step-4"> | |
| <div class="step-number">4</div> | |
| <svg class="step-icon" viewBox="0 0 24 24" fill="none" stroke="var(--teal-500)" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 15l5-5 4 4 8-8"/></svg> | |
| <div class="step-title">Visualize</div> | |
| <div class="step-desc">Interactive maps of depth, velocity and hazard</div> | |
| </div> | |
| <div class="workflow-step step-5"> | |
| <div class="step-number">5</div> | |
| <svg class="step-icon" viewBox="0 0 24 24" fill="none" stroke="var(--teal-400)" stroke-width="2" stroke-linecap="round"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"/></svg> | |
| <div class="step-title">Share</div> | |
| <div class="step-desc">Publish and collaborate with stakeholders</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FEATURE SECTIONS --> | |
| <section class="features" id="features"> | |
| <!-- STEP 1: Upload --> | |
| <div class="feature-section fade-up"> | |
| <div class="feature-visual visual-upload"> | |
| <div class="mock-toolbar"> | |
| <span class="mock-dot"></span><span class="mock-dot"></span><span class="mock-dot"></span> | |
| <span class="mock-tab">Upload Data</span> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="upload-zone"> | |
| <div class="upload-zone-icon"> | |
| <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> | |
| </div> | |
| <span class="upload-zone-text">Drop your terrain files here</span> | |
| <span class="upload-zone-sub">GeoTIFF, Shapefile, CSV, or NetCDF</span> | |
| </div> | |
| <div class="file-chip chip-tif"><span class="file-chip-icon">TIF</span> terrain_dem.tif</div> | |
| <div class="file-chip chip-shp"><span class="file-chip-icon">SHP</span> boundary.shp</div> | |
| <div class="file-chip chip-csv"><span class="file-chip-icon">CSV</span> rainfall.csv</div> | |
| </div> | |
| </div> | |
| <div class="feature-content feature-step-1"> | |
| <div class="feature-step-badge"> | |
| <div class="feature-step-num">1</div> | |
| <span class="feature-step-label">Upload Terrain Data</span> | |
| </div> | |
| <h2>Start with the data you already have</h2> | |
| <p>Import your existing terrain and boundary data directly. Hydrata handles the coordinate systems, projections, and format conversions automatically.</p> | |
| <ul class="feature-bullets"> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Drag-and-drop upload for GeoTIFF DEMs, shapefiles, CSV gauge data, and NetCDF files</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Automatic CRS detection and reprojection -- no manual GDAL commands required</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Spatial data stored in PostGIS, versioned and accessible through standard OGC services</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- STEP 2: Configure --> | |
| <div class="feature-section reverse fade-up"> | |
| <div class="feature-visual visual-configure"> | |
| <div class="mock-toolbar"> | |
| <span class="mock-dot"></span><span class="mock-dot"></span><span class="mock-dot"></span> | |
| <span class="mock-tab">Model Configuration</span> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="config-sidebar"> | |
| <div class="config-field"> | |
| <span class="config-label">Mesh Resolution</span> | |
| <div class="config-input active">5.0 m</div> | |
| </div> | |
| <div class="config-field"> | |
| <span class="config-label">Manning's n</span> | |
| <div class="config-input">0.035</div> | |
| </div> | |
| <div class="config-field"> | |
| <span class="config-label">Duration</span> | |
| <div class="config-input">3600 s</div> | |
| </div> | |
| <div class="config-field"> | |
| <span class="config-label">Rainfall Intensity</span> | |
| <div class="config-slider"> | |
| <div class="config-slider-thumb"></div> | |
| </div> | |
| </div> | |
| <div class="config-field"> | |
| <span class="config-label">Boundary Type</span> | |
| <div class="config-input">Reflective</div> | |
| </div> | |
| </div> | |
| <div class="config-map"> | |
| <div class="boundary-marker"></div> | |
| <div class="boundary-marker"></div> | |
| <div class="boundary-marker"></div> | |
| <div class="boundary-marker"></div> | |
| <div class="boundary-marker"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-content feature-step-2"> | |
| <div class="feature-step-badge"> | |
| <div class="feature-step-num">2</div> | |
| <span class="feature-step-label">Configure Model Parameters</span> | |
| </div> | |
| <h2>Set up your model visually</h2> | |
| <p>Define boundaries, friction coefficients, and forcing conditions through an intuitive interface. Draw directly on the map to set domain extents and internal structures.</p> | |
| <ul class="feature-bullets"> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Interactive map-based boundary and mesh configuration -- draw polygons, set inflow points</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Full ANUGA parameter control: Manning's roughness, mesh resolution, time stepping, and operator selection</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Save and reuse configurations as templates for scenario comparison studies</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- STEP 3: Simulate --> | |
| <div class="feature-section fade-up"> | |
| <div class="feature-visual visual-simulate"> | |
| <div class="mock-toolbar" style="background: var(--gray-900); border-color: rgba(255,255,255,0.08);"> | |
| <span class="mock-dot"></span><span class="mock-dot"></span><span class="mock-dot"></span> | |
| <span class="mock-tab" style="background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);">ANUGA Engine</span> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="sim-header"> | |
| <div class="sim-status"> | |
| <span class="sim-status-dot"></span> | |
| <span class="sim-status-text">Simulation Running</span> | |
| </div> | |
| <div class="sim-progress-wrap"> | |
| <div class="sim-progress-bar"> | |
| <div class="sim-progress-fill"></div> | |
| </div> | |
| <span class="sim-percent">73%</span> | |
| </div> | |
| </div> | |
| <div class="sim-console"> | |
| <div><span class="timestamp">14:23:01</span> <span class="dim">Initializing ANUGA domain...</span></div> | |
| <div><span class="timestamp">14:23:03</span> <span class="dim">Mesh generated: 24,891 triangles</span></div> | |
| <div><span class="timestamp">14:23:04</span> <span class="dim">Setting boundary conditions...</span></div> | |
| <div><span class="timestamp">14:23:05</span> <span class="dim">Applying rainfall operator: 120mm/hr</span></div> | |
| <div><span class="timestamp">14:25:12</span> <span class="highlight">Time step 2640/3600 | dt=0.42s | depth_max=1.83m</span></div> | |
| <div><span class="timestamp">14:25:13</span> <span class="highlight">Time step 2641/3600 | dt=0.41s | depth_max=1.85m</span></div> | |
| </div> | |
| <div class="sim-metrics"> | |
| <div class="sim-metric"> | |
| <div class="sim-metric-label">Elapsed</div> | |
| <div class="sim-metric-value">2:12</div> | |
| </div> | |
| <div class="sim-metric"> | |
| <div class="sim-metric-label">Triangles</div> | |
| <div class="sim-metric-value">24.9K</div> | |
| </div> | |
| <div class="sim-metric"> | |
| <div class="sim-metric-label">Max Depth</div> | |
| <div class="sim-metric-value">1.85m</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-content feature-step-3"> | |
| <div class="feature-step-badge"> | |
| <div class="feature-step-num">3</div> | |
| <span class="feature-step-label">Run ANUGA Simulation</span> | |
| </div> | |
| <h2>Cloud-powered computation, real-time feedback</h2> | |
| <p>Submit your model and let Hydrata handle the heavy lifting. ANUGA runs on dedicated cloud compute with live progress tracking -- no local installation or HPC queue.</p> | |
| <ul class="feature-bullets"> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Full ANUGA finite-volume engine running in the cloud -- same solver, same accuracy, zero setup</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Live progress dashboard with time step, convergence metrics, and estimated completion</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Run multiple scenarios in parallel -- compare design alternatives without waiting</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- STEP 4: Visualize --> | |
| <div class="feature-section reverse fade-up"> | |
| <div class="feature-visual visual-results"> | |
| <div class="mock-toolbar"> | |
| <span class="mock-dot"></span><span class="mock-dot"></span><span class="mock-dot"></span> | |
| <span class="mock-tab">Results Viewer</span> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="results-overlay"></div> | |
| <div class="depth-blob"></div> | |
| <div class="depth-blob"></div> | |
| <div class="depth-blob"></div> | |
| <div class="results-info-card"> | |
| <h4>Max Water Depth</h4> | |
| <p>t = 2640s | Peak: 1.85m</p> | |
| </div> | |
| <div class="results-legend"> | |
| <div class="results-legend-title">Depth (m)</div> | |
| <div class="results-legend-bar"></div> | |
| <div class="results-legend-labels"> | |
| <span>0.0</span> | |
| <span>0.5</span> | |
| <span>1.0</span> | |
| <span>1.5+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-content feature-step-4"> | |
| <div class="feature-step-badge"> | |
| <div class="feature-step-num">4</div> | |
| <span class="feature-step-label">Visualize Results</span> | |
| </div> | |
| <h2>Explore your results interactively</h2> | |
| <p>Simulation outputs render as interactive map layers. Pan, zoom, query depth at any point, and scrub through time steps to understand how water moves across your domain.</p> | |
| <ul class="feature-bullets"> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Interactive WebGIS viewer with depth, velocity, and hazard layers served through OGC WMS</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Time-series animation of flood progression -- see how inundation evolves across your domain</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Point queries, cross-section profiles, and exportable charts for technical reporting</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- STEP 5: Share --> | |
| <div class="feature-section fade-up"> | |
| <div class="feature-visual visual-share"> | |
| <div class="mock-toolbar"> | |
| <span class="mock-dot"></span><span class="mock-dot"></span><span class="mock-dot"></span> | |
| <span class="mock-tab">Catalogue</span> | |
| </div> | |
| <div class="mock-content"> | |
| <div class="share-card"> | |
| <div class="share-card-header"> | |
| <span class="share-card-title">Downtown Flood Risk Assessment</span> | |
| <span class="share-badge">Published</span> | |
| </div> | |
| <div class="share-card-preview"></div> | |
| <div class="share-card-footer"> | |
| <div class="share-avatar">JC</div> | |
| <span class="share-meta">Shared with 12 collaborators</span> | |
| </div> | |
| </div> | |
| <div class="share-actions"> | |
| <div class="share-action-btn"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg> | |
| Copy Link | |
| </div> | |
| <div class="share-action-btn"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 12h8M12 8v8"/></svg> | |
| Embed | |
| </div> | |
| <div class="share-action-btn primary"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"/></svg> | |
| Publish | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-content feature-step-5"> | |
| <div class="feature-step-badge"> | |
| <div class="feature-step-num">5</div> | |
| <span class="feature-step-label">Share with Stakeholders</span> | |
| </div> | |
| <h2>Publish and collaborate seamlessly</h2> | |
| <p>Share your models, results, and maps with team members and external stakeholders. Control who can view, edit, or download -- all through a searchable catalogue.</p> | |
| <ul class="feature-bullets"> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Granular permissions -- share maps publicly, with specific users, or within your organization</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Embeddable maps and direct OGC service links for integration into reports and dashboards</span> | |
| </li> | |
| <li> | |
| <span class="bullet-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12l5 5L20 7"/></svg></span> | |
| <span>Full metadata catalogue with search, tagging, and version history for audit trails</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- WHY HYDRATA --> | |
| <section class="why-section" id="why"> | |
| <div class="why-inner"> | |
| <div class="section-header fade-up"> | |
| <h2>Why Hydrata?</h2> | |
| <p>Built by hydrologists for hydrologists. Every design decision serves one goal: making rigorous modeling accessible.</p> | |
| </div> | |
| <div class="benefits-grid"> | |
| <div class="benefit-card fade-up"> | |
| <div class="benefit-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--blue-600)" stroke-width="2" stroke-linecap="round"> | |
| <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/> | |
| <path d="M2 12h20"/> | |
| <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/> | |
| </svg> | |
| </div> | |
| <h3>Open Source Engine</h3> | |
| <p>Built on ANUGA, a peer-reviewed open source solver developed by the Australian National University and Geoscience Australia. Your models are transparent and reproducible.</p> | |
| </div> | |
| <div class="benefit-card fade-up"> | |
| <div class="benefit-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="2" stroke-linecap="round"> | |
| <rect x="2" y="3" width="20" height="14" rx="2"/> | |
| <path d="M8 21h8M12 17v4"/> | |
| </svg> | |
| </div> | |
| <h3>No Install Required</h3> | |
| <p>Run simulations from any modern browser. No Python environments, no dependency conflicts, no HPC queue. Just log in and model.</p> | |
| </div> | |
| <div class="benefit-card fade-up"> | |
| <div class="benefit-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--blue-600)" stroke-width="2" stroke-linecap="round"> | |
| <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/> | |
| <circle cx="9" cy="7" r="4"/> | |
| <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/> | |
| </svg> | |
| </div> | |
| <h3>Real-time Collaboration</h3> | |
| <p>Share projects with your team, reviewers, and clients. Everyone sees the same data, the same results, the same maps -- no more emailing zip files.</p> | |
| </div> | |
| <div class="benefit-card fade-up"> | |
| <div class="benefit-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="2" stroke-linecap="round"> | |
| <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/> | |
| <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/> | |
| </svg> | |
| </div> | |
| <h3>Publication-Ready Results</h3> | |
| <p>Export styled maps, cross-section profiles, and time-series charts directly into technical reports. OGC-compliant WMS/WFS layers integrate into any GIS workflow.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="cta-section"> | |
| <div class="cta-inner fade-up"> | |
| <h2>Start modeling in minutes</h2> | |
| <p>Create a free account and run your first ANUGA simulation today. No credit card, no installation, no gatekeeping.</p> | |
| <div class="cta-actions"> | |
| <a href="/account/signup/" class="btn-primary"> | |
| Create Free Account | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" width="18" height="18"><path d="M5 12h14M12 5l7 7-7 7"/></svg> | |
| </a> | |
| <a href="/catalogue/#/?f=map" class="btn-secondary"> | |
| Browse the Catalogue | |
| </a> | |
| </div> | |
| <p class="cta-note">Free tier includes full simulation capabilities for personal and academic use.</p> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="footer-inner"> | |
| <div class="footer-brand"> | |
| <h3>Hydrata</h3> | |
| <p>Collaborative, transparent surface water modeling. Bringing the ANUGA open source hydraulic engine to the browser.</p> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Platform</h4> | |
| <ul> | |
| <li><a href="/catalogue/#/?f=map">Map Catalogue</a></li> | |
| <li><a href="/account/signup/">Create Account</a></li> | |
| <li><a href="#">Documentation</a></li> | |
| <li><a href="#">API Reference</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Resources</h4> | |
| <ul> | |
| <li><a href="https://github.com/anuga-community/anuga_core" target="_blank" rel="noopener">ANUGA on GitHub</a></li> | |
| <li><a href="#">Case Studies</a></li> | |
| <li><a href="#">Tutorials</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Company</h4> | |
| <ul> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| <li><a href="#">Terms of Service</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>© 2026 Hydrata. All rights reserved.</span> | |
| <a href="https://github.com/anuga-community/anuga_core" target="_blank" rel="noopener">Powered by ANUGA Open Source</a> | |
| </div> | |
| </footer> | |
| <script> | |
| // Nav scroll effect | |
| const nav = document.getElementById('nav'); | |
| window.addEventListener('scroll', () => { | |
| nav.classList.toggle('scrolled', window.scrollY > 20); | |
| }); | |
| // Mobile menu toggle | |
| const navToggle = document.getElementById('navToggle'); | |
| const navLinks = document.getElementById('navLinks'); | |
| navToggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| // Close mobile menu on link click | |
| navLinks.querySelectorAll('a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| navLinks.classList.remove('open'); | |
| }); | |
| }); | |
| // Intersection Observer for fade-up animations | |
| const observer = new IntersectionObserver( | |
| (entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, | |
| { threshold: 0.15, rootMargin: '0px 0px -40px 0px' } | |
| ); | |
| document.querySelectorAll('.fade-up').forEach(el => observer.observe(el)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment