Photography Weather Dashboard

A dense, mobile-first weather website designed for photographers to quickly check upcoming weather conditions with focus on cloud cover, visibility, and lighting conditions.

• 📱 Stable grid layout - Consistent time positioning across all devices
• 📊 Detailed weather data - Cloud layers (low/mid/high), surface pressure, visibility
• 🎨 Toned-down colors - Subtle gradients with colored left borders for easy scanning
• ⚡ Visual cloud layers - Three-bar visualization showing cloud distribution by altitude
• 🌅 Golden hour highlighting - Subtle glow effects for optimal lighting times
• 📈 Photography scoring - 1-10 rating system with visual progress bars
• 📍 Smart location - Auto-detects location with city/area search and coordinate override
• 🎯 Today highlighting - Special border for current day
• 📋 Comprehensive data - Temperature, total clouds, pressure, visibility in each card
• 📄 Minimizable past days - Auto-minimizes past weather with toggle to show/hide details

Each hourly card shows:

• Time - Consistent positioning at top
• Cloud Coverage % - FRONT AND CENTER in large, bold text
• Condition emoji - Quick visual reference below cloud %
• Score bar - Photography quality (1-10) visual indicator
• Temperature - In °C (degrees Celsius)
• Cloud layers - Visual bars showing low/mid/high cloud coverage
• Surface pressure - In hPa (hectopascals) with units
• Visibility - In km (kilometers) with units, when available
• Golden hour indicator - Special marking for optimal times

• Cloud % prominence - Main metric displayed in large, bold font
• Proper units - All measurements include units (°C, hPa, km)
• No rain emoji - Uses cloud emoji for poor conditions instead
• Clear hierarchy - Cloud coverage → condition → supporting data
• Consistent layout - Same data positioning across all cards

• Responsive breakpoints: 6 → 8 → 12 → 24 columns based on screen size
• Fixed card heights - Consistent 120px for uniform appearance
• Toned-down palette - Subtle backgrounds with accent borders
• Visual hierarchy - Time always at top, data in consistent positions

Uses Open-Meteo KNMI API with official SDK:

• Hourly: temperature, cloud cover (total, low, mid, high), surface pressure, visibility
• Daily: sunrise, sunset times
• Timezone: Auto-detected
• Model: KNMI Seamless for high accuracy

├── backend/
│   └── index.ts          # Hono server with Open-Meteo SDK integration
├── frontend/
│   ├── index.html        # Main page
│   ├── index.tsx         # Dense React app
│   └── style.css         # Mobile-optimized styles
└── README.md

The main endpoint serves the weather dashboard. The API automatically detects location or allows manual coordinates input.

• Photography Score: 1-10 rating based on cloud cover, visibility, and lighting conditions
• Golden Hour Detection: Automatically identifies optimal lighting times (±1 hour from sunrise/sunset)
• 7-Day Forecast: Hourly weather data for the next week
• Location Detection: Auto-detects your location or allows city/area search and coordinate input
• Mobile Responsive: Works great on all devices
• Past Day Minimization: Past weather days are automatically minimized to show just hour + cloud percentage, with toggle to expand for full details

• Excellent (☀️): <20% cloud cover - Perfect for most photography
• Very Good (🌤️): 20-40% cloud cover - Great conditions with some interesting clouds
• Good (⛅): 40-60% cloud cover - Good for dramatic skies
• Fair (☁️): 60-80% cloud cover - Overcast but workable
• Poor (🌧️): >80% cloud cover - Limited lighting options
• Golden Hour (🌅): Special highlighting for optimal portrait/landscape times

• GET / - Main dashboard
• GET /api/weather?lat={lat}&lon={lon} - Weather data with photography insights
• GET /api/location - Auto-detect location from IP
• GET /api/geocode?q={query} - Search for locations by city/area name