| <!doctype html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8" /> |
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>HyperFlow | Operations Dashboard</title> |
| |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> |
| |
| |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" /> |
| |
| |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" /> |
|
|
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
|
|
| |
| <style> |
| :root { |
| --color-background: #fdfdfd; |
| --color-on-surface: #12131a; |
| --color-surface-container-lowest: #ffffff; |
| --color-surface-container-low: #f3f3f6; |
| --color-surface-container: #eaeaf0; |
| --color-surface-container-high: #e2e2e8; |
| --color-surface-container-highest: #d5d5dd; |
| --color-surface-dim: #f3f3f6; |
| --color-secondary: #4a4a58; |
| --color-on-secondary-container: #302f3a; |
| --color-surface-variant: #e2e2e8; |
| --color-primary: #ff535a; |
| --color-primary-container: #ffdad8; |
| --color-error: #ba1a1a; |
| --color-error-container: #ffdad6; |
| --color-on-error-container: #410002; |
| --color-tertiary: #006a65; |
| --color-tertiary-container: #8ef4eb; |
| --color-on-tertiary-container: #00201e; |
| --color-inverse-surface: #1b1b20; |
| } |
| |
| .dark { |
| --color-background: #131318; |
| --color-on-surface: #e4e1e9; |
| --color-surface-container-lowest: #0e0e13; |
| --color-surface-container-low: #1b1b20; |
| --color-surface-container: #1f1f25; |
| --color-surface-container-high: #2a292f; |
| --color-surface-container-highest: #35343a; |
| --color-surface-dim: #131318; |
| --color-secondary: #c7c5d3; |
| --color-on-secondary-container: #b9b7c4; |
| --color-surface-variant: #35343a; |
| --color-primary: #ffb3b1; |
| --color-primary-container: #ff535a; |
| --color-error: #ffb4ab; |
| --color-error-container: #93000a; |
| --color-on-error-container: #ffdad6; |
| --color-tertiary: #71d7cf; |
| --color-tertiary-container: #32a099; |
| --color-on-tertiary-container: #00302d; |
| --color-inverse-surface: #e4e1e9; |
| } |
| </style> |
| <script> |
| var tailwind = { |
| config: { |
| darkMode: "class", |
| theme: { |
| extend: { |
| "colors": { |
| "error": "var(--color-error)", |
| "inverse-surface": "var(--color-inverse-surface)", |
| "on-secondary-container": "var(--color-on-secondary-container)", |
| "surface-variant": "var(--color-surface-variant)", |
| "primary-fixed": "#ffdad8", |
| "tertiary": "var(--color-tertiary)", |
| "surface-dim": "var(--color-surface-dim)", |
| "surface-container-high": "var(--color-surface-container-high)", |
| "tertiary-container": "var(--color-tertiary-container)", |
| "on-tertiary-fixed-variant": "#00504c", |
| "on-error-container": "var(--color-on-error-container)", |
| "primary-fixed-dim": "#ffb3b1", |
| "on-tertiary-container": "var(--color-on-tertiary-container)", |
| "on-surface": "var(--color-on-surface)", |
| "outline-variant": "#5b403f", |
| "on-primary-fixed": "#410007", |
| "on-background": "var(--color-on-surface)", |
| "tertiary-fixed": "#8ef4eb", |
| "surface-container-lowest": "var(--color-surface-container-lowest)", |
| "on-primary-fixed-variant": "#92001c", |
| "primary-container": "var(--color-primary-container)", |
| "surface-tint": "#ffb3b1", |
| "primary": "var(--color-primary)", |
| "on-secondary": "#302f3a", |
| "surface-bright": "#39383e", |
| "on-secondary-fixed": "#1b1b25", |
| "outline": "#ab8987", |
| "surface": "var(--color-surface-container)", |
| "inverse-primary": "#bb162c", |
| "on-primary-container": "var(--color-on-surface)", |
| "background": "var(--color-background)", |
| "on-primary": "#680011", |
| "surface-container-low": "var(--color-surface-container-low)", |
| "tertiary-fixed-dim": "#71d7cf", |
| "surface-container-highest": "var(--color-surface-container-highest)", |
| "surface-container": "var(--color-surface-container)", |
| "secondary-fixed-dim": "#c7c5d3", |
| "on-tertiary-fixed": "#00201e", |
| "on-surface-variant": "#e4bebc", |
| "on-secondary-fixed-variant": "#464651", |
| "secondary-container": "var(--color-on-secondary-container)", |
| "error-container": "var(--color-error-container)", |
| "secondary": "var(--color-secondary)", |
| "on-error": "#690005", |
| "secondary-fixed": "#e3e1ef", |
| "on-tertiary": "#003734", |
| "inverse-on-surface": "#303036", |
| "zomato-red": "#ff535a", |
| "district-pink": "var(--hf-primary)", |
| "district-purple": "var(--hf-accent)", |
| "district-obsidian": "var(--hf-surface-0)", |
| "surface-panel": "var(--hf-surface-1)" |
| }, |
| "borderRadius": { |
| "DEFAULT": "0.25rem", |
| "lg": "0.5rem", |
| "xl": "0.75rem", |
| "full": "9999px" |
| }, |
| "spacing": { |
| "md": "16px", |
| "lg": "24px", |
| "sm": "8px", |
| "xs": "4px", |
| "unit": "4px", |
| "xl": "40px", |
| "container-margin": "32px", |
| "gutter": "20px" |
| }, |
| "fontFamily": { |
| "mono-label": ["JetBrains Mono"], |
| "body-md": ["Inter"], |
| "headline-sm": ["Geist"], |
| "body-lg": ["Inter"], |
| "body-sm": ["Inter"], |
| "display-lg": ["Geist"], |
| "headline-md": ["Geist"], |
| "hero-display": ["Geist", "sans-serif"], |
| "body-default": ["Inter", "sans-serif"], |
| "body-medium": ["Inter", "sans-serif"], |
| "section-header": ["Geist", "sans-serif"], |
| "metric-mono": ["JetBrains Mono", "monospace"], |
| "label-small": ["Inter", "sans-serif"] |
| }, |
| "fontSize": { |
| "hero-display": ["3rem", { lineHeight: "1.1", fontWeight: "700" }], |
| "section-header": ["1.25rem", { lineHeight: "1.3", fontWeight: "600" }], |
| "body-medium": ["1.125rem", { lineHeight: "1.6" }], |
| "body-default": ["1rem", { lineHeight: "1.5" }], |
| "metric-mono": ["0.875rem", { lineHeight: "1.4" }], |
| "label-small": ["0.75rem", { lineHeight: "1.2" }] |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div id="root"></div> |
| <script type="module" src="/src/main.jsx"></script> |
| </body> |
| </html> |
|
|
