Alpha Region — Geopolitical Market Predictor Dashboard

A production-quality enterprise dashboard built with only HTML5, CSS3, and vanilla JavaScript (ES6+). No frameworks, no CSS libraries, no UI kits.

Getting started

This is a static site — no build step required.

# from the project directory
python3 -m http.server 8080
# then open http://localhost:8080

Or simply open index.html directly in a browser.

Project structure

project/
│
├── index.html
│
├── css/
│   ├── reset.css        # minimal modern reset
│   ├── variables.css    # design tokens (color, type, spacing, radius, shadow)
│   ├── layout.css       # page skeleton & grid system
│   ├── sidebar.css      # left navigation
│   ├── header.css       # top bar
│   ├── cards.css        # KPI cards, heatmap card, chart card, alerts card
│   ├── tables.css       # sortable data tables
│   ├── charts.css       # canvas chart & svg map styling
│   ├── animations.css   # transitions, keyframes, tooltip/notification panel
│   └── responsive.css   # tablet + mobile breakpoints
│
├── js/
│   ├── utils.js          # shared helpers (debounce, counters, formatting)
│   ├── data.js            # mock data (trend series, tables, alerts, map regions)
│   ├── sidebar.js         # nav active-state + mobile sidebar toggle
│   ├── charts.js          # hand-rolled canvas line chart + SVG heatmap
│   ├── table.js           # click-to-sort tables
│   ├── notifications.js   # notification bell dropdown
│   ├── dashboard.js       # counters, live clock, tooltips
│   └── app.js             # bootstraps all modules
│
├── assets/
│   ├── icons/
│   ├── images/
│   └── fonts/
│
└── README.md

Design tokens

Token	Value
Background	#F5F6FA
Sidebar	#1D2330
Card	#FFFFFF
Border	#E8EAF2
Primary Blue	#4F6EF7
Secondary Blue	#6D8EFF
Text Primary	#101828
Text Secondary	#667085
Success / Warning / Danger	#22C55E / #F59E0B / #EF4444
Card radius	16px
Card shadow	0 6px 18px rgba(15,23,42,0.05)

Typography uses Inter throughout: 32px dashboard title, 18px card titles, 56px metric values, 15px body, 14px labels.

Functionality implemented

• Sidebar: active-state highlighting, hover transitions, collapsible on mobile with hamburger + overlay
• Header: live UTC clock, notification bell with dropdown panel, profile menu
• Animated counters on KPI cards (ease-out count-up)
• Custom canvas-drawn trend line chart with 7D / 30D / 90D / 1Y filters and hover tooltip — no charting library
• SVG world risk heatmap with zoom controls and hover tooltips per region/marker
• Click-to-sort data tables (Sector Impact Predictions, Top Risk Drivers)
• Reusable tooltip system driven by data-tooltip attributes
• Card fade-in on load, hover elevation, button press micro-interactions
• Fully responsive: desktop (matches design), tablet (2-column), mobile (1-column, collapsible sidebar)

Notes

• The world heatmap uses lightweight, stylized continent shapes (not a geographic library) so the dashboard has zero external map data dependencies — swap in real GeoJSON/TopoJSON in data.js + charts.js if pixel-accurate country borders are needed.
• All chart/table data lives in js/data.js, ready to be replaced by real API calls.