\n \n \n\n",[],[173,180],{"_102":188,"_95":189,"_143":190,"_145":174,"_146":132,"_147":131,"_149":150,"_104":191,"_99":192,"_152":193,"_154":194,"_155":27,"_156":-5,"_157":195,"_98":196},"8045d1a2-3cd8-11f0-89a3-9e149126039e","index.tsx","2110e54a-3cd4-11f0-908d-9e149126039e",["D",1748556101105],15,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter((h, i) => isDaytime(h.time, Object.keys(groupedInsights).indexOf(date)) && h.score >= 8).length} excellent daylight hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n // Calculate the actual hour index in the full dataset\n const globalHourIndex = weatherData.photography_insights.findIndex(i => i.time === insight.time);\n const hourData = getHourlyData(globalHourIndex);\n if (!hourData) return null;\n \n // Determine if this is daytime (between sunrise and sunset)\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const isDay = isDaytime(insight.time, dayIndex);\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n {!isDay && 🌙}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : '🌙'}\n

\n\n {/* Score bar - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator - only show during actual daytime */}\n {isDay && insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n if (daytimeHours.length === 0) return 'N/A';\n const bestHour = daytimeHours.reduce((best, current) => \n current.score > best.score ? current : best\n );\n return formatTime(bestHour.time);\n })()}\n

Golden Hours

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n return dayInsights.filter(h => isDaytime(h.time, dayIndex) && h.isGoldenHour).length;\n })()}\n

Avg Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n if (daytimeHours.length === 0) return 'N/A';\n return (daytimeHours.reduce((sum, h) => sum + h.score, 0) / daytimeHours.length).toFixed(1);\n })()}/10\n

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[173,189],{"_102":198,"_95":199,"_143":200,"_145":174,"_146":132,"_147":201,"_149":150,"_104":202,"_99":203,"_152":183,"_154":204,"_155":27,"_156":-5,"_157":205,"_98":206},"b81d959e-3cd6-11f0-84d4-9e149126039e","style.css","088bb108-3cd4-11f0-b471-9e149126039e",24,["D",1748555335802],5,"/* Dense mobile-first photography weather dashboard with detailed data */\n\n.weather-card {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.hour-card {\n min-height: 130px;\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.hour-card:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Toned down color scheme */\n.condition-excellent {\n background: linear-gradient(135deg, #e8f5e8, #d4edda);\n color: #155724;\n border-left: 3px solid #28a745;\n}\n\n.condition-very-good {\n background: linear-gradient(135deg, #e8f4fd, #cce7ff);\n color: #004085;\n border-left: 3px solid #007bff;\n}\n\n.condition-good {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n color: #856404;\n border-left: 3px solid #ffc107;\n}\n\n.condition-fair {\n background: linear-gradient(135deg, #ffecd1, #fed7aa);\n color: #8b4513;\n border-left: 3px solid #fd7e14;\n}\n\n.condition-poor {\n background: linear-gradient(135deg, #f8d7da, #f1c0c7);\n color: #721c24;\n border-left: 3px solid #dc3545;\n}\n\n.condition-golden-hour {\n background: linear-gradient(135deg, #fff8e1, #ffecb3);\n color: #e65100;\n border-left: 3px solid #ff9800;\n box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);\n}\n\n.score-bar {\n height: 2px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 1px;\n overflow: hidden;\n margin: 2px 0;\n}\n\n.score-fill {\n height: 100%;\n background: currentColor;\n opacity: 0.6;\n transition: width 0.3s ease;\n}\n\n.cloud-layers {\n display: flex;\n gap: 1px;\n margin: 1px 0;\n}\n\n.cloud-layer {\n height: 3px;\n border-radius: 1px;\n flex: 1;\n}\n\n.cloud-low { background: #6c757d; }\n.cloud-mid { background: #495057; }\n.cloud-high { background: #343a40; }\n\n.data-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2px;\n font-size: 0.6rem;\n line-height: 1.1;\n}\n\n.data-item {\n text-align: center;\n padding: 1px;\n}\n\n.time-header {\n font-weight: 600;\n font-size: 0.75rem;\n text-align: center;\n margin-bottom: 2px;\n}\n\n.temp-display {\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n margin: 2px 0;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Compact text styles */\n.text-2xs {\n font-size: 0.625rem;\n line-height: 0.75rem;\n}\n\n.text-3xs {\n font-size: 0.5rem;\n line-height: 0.625rem;\n}\n\n.text-4xs {\n font-size: 0.45rem;\n line-height: 0.55rem;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .hour-card {\n min-height: 120px;\n }\n \n .container {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n \n .data-grid {\n font-size: 0.55rem;\n grid-template-columns: 1fr;\n gap: 1px;\n }\n}\n\n/* Today highlight */\n.today-highlight {\n border: 2px solid #3b82f6;\n box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);\n}\n\n/* Stable grid layout */\n.hourly-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 3px;\n}\n\n@media (min-width: 640px) {\n .hourly-grid {\n grid-template-columns: repeat(8, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n .hourly-grid {\n grid-template-columns: repeat(12, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .hourly-grid {\n grid-template-columns: repeat(24, 1fr);\n }\n}\n\n/* Legend items */\n.legend-item {\n padding: 0.25rem 0.375rem;\n border-radius: 0.25rem;\n font-size: 0.65rem;\n text-align: center;\n min-width: 50px;\n border-left: 2px solid;\n}\n\n.legend-item.condition-excellent { \n background: #e8f5e8; \n color: #155724; \n border-left-color: #28a745; \n}\n\n.legend-item.condition-very-good { \n background: #e8f4fd; \n color: #004085; \n border-left-color: #007bff; \n}\n\n.legend-item.condition-good { \n background: #fff3cd; \n color: #856404; \n border-left-color: #ffc107; \n}\n\n.legend-item.condition-fair { \n background: #ffecd1; \n color: #8b4513; \n border-left-color: #fd7e14; \n}\n\n.legend-item.condition-poor { \n background: #f8d7da; \n color: #721c24; \n border-left-color: #dc3545; \n}\n\n.legend-item.condition-golden-hour { \n background: #fff8e1; \n color: #e65100; \n border-left-color: #ff9800; \n}",[],[173,199],[173],{"_102":209,"_95":210,"_143":211,"_145":-5,"_146":132,"_147":212,"_149":150,"_104":213,"_99":175,"_152":183,"_154":214,"_155":27,"_156":-5,"_157":215,"_98":216},"c7ca35f6-3cd6-11f0-b950-9e149126039e","README.md","eedae01c-3cd3-11f0-ba68-9e149126039e",25,["D",1748555362101],"# Photography Weather Dashboard\n\nA dense, mobile-first weather website designed for photographers to quickly check upcoming weather conditions with focus on cloud cover, visibility, and lighting conditions.\n\n## Features\n\n- **📱 Stable grid layout** - Consistent time positioning across all devices\n- **📊 Detailed weather data** - Cloud layers (low/mid/high), surface pressure, visibility\n- **🎨 Toned-down colors** - Subtle gradients with colored left borders for easy scanning\n- **⚡ Visual cloud layers** - Three-bar visualization showing cloud distribution by altitude\n- **🌅 Golden hour highlighting** - Subtle glow effects for optimal lighting times\n- **📈 Photography scoring** - 1-10 rating system with visual progress bars\n- **📍 Smart location** - Auto-detects location with manual coordinate override\n- **🎯 Today highlighting** - Special border for current day\n- **📋 Comprehensive data** - Temperature, total clouds, pressure, visibility in each card\n\n## Detailed Data Display\n\nEach hourly card shows:\n- **Time** - Consistent positioning at top\n- **Cloud Coverage %** - **FRONT AND CENTER** in large, bold text\n- **Condition emoji** - Quick visual reference below cloud %\n- **Score bar** - Photography quality (1-10) visual indicator\n- **Temperature** - In °C (degrees Celsius)\n- **Cloud layers** - Visual bars showing low/mid/high cloud coverage\n- **Surface pressure** - In hPa (hectopascals) with units\n- **Visibility** - In km (kilometers) with units, when available\n- **Golden hour indicator** - Special marking for optimal times\n\n## Professional Data Presentation\n\n- **Cloud % prominence** - Main metric displayed in large, bold font\n- **Proper units** - All measurements include units (°C, hPa, km)\n- **No rain emoji** - Uses cloud emoji for poor conditions instead\n- **Clear hierarchy** - Cloud coverage → condition → supporting data\n- **Consistent layout** - Same data positioning across all cards\n\n## Stable Grid Design\n\n- **Responsive breakpoints**: 6 → 8 → 12 → 24 columns based on screen size\n- **Fixed card heights** - Consistent 120px for uniform appearance\n- **Toned-down palette** - Subtle backgrounds with accent borders\n- **Visual hierarchy** - Time always at top, data in consistent positions\n\n## API Data\n\nUses Open-Meteo KNMI API with official SDK:\n- **Hourly**: temperature, cloud cover (total, low, mid, high), surface pressure, visibility\n- **Daily**: sunrise, sunset times \n- **Timezone**: Auto-detected\n- **Model**: KNMI Seamless for high accuracy\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with Open-Meteo SDK integration\n├── frontend/\n│ ├── index.html # Main page\n│ ├── index.tsx # Dense React app\n│ └── style.css # Mobile-optimized styles\n└── README.md\n```\n\n## Usage\n\nThe main endpoint serves the weather dashboard. The API automatically detects location or allows manual coordinates input.\n\n### Key Features\n\n- **Photography Score**: 1-10 rating based on cloud cover, visibility, and lighting conditions\n- **Golden Hour Detection**: Automatically identifies optimal lighting times (±1 hour from sunrise/sunset)\n- **7-Day Forecast**: Hourly weather data for the next week\n- **Location Detection**: Auto-detects your location or allows manual coordinate input\n- **Mobile Responsive**: Works great on all devices\n\n### Photography Conditions\n\n- **Excellent** (☀️): <20% cloud cover - Perfect for most photography\n- **Very Good** (🌤️): 20-40% cloud cover - Great conditions with some interesting clouds\n- **Good** (⛅): 40-60% cloud cover - Good for dramatic skies\n- **Fair** (☁️): 60-80% cloud cover - Overcast but workable\n- **Poor** (🌧️): >80% cloud cover - Limited lighting options\n- **Golden Hour** (🌅): Special highlighting for optimal portrait/landscape times\n\n### API Endpoints\n\n- `GET /` - Main dashboard\n- `GET /api/weather?lat={lat}&lon={lon}` - Weather data with photography insights\n- `GET /api/location` - Auto-detect location from IP",[],[210],"files",[140,159,171,178,187,197,208],"counts",{"_221":31,"_222":148,"_223":31,"_224":31},"pulls","branches","forks","envVars","contents",[227,230,233],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":228,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":229},["D",1748554162546],[142],{"_102":172,"_95":173,"_143":174,"_145":-5,"_146":132,"_147":175,"_149":150,"_104":231,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":232},["D",1748554172947],[173],{"_102":209,"_95":210,"_143":211,"_145":-5,"_146":132,"_147":212,"_149":150,"_104":234,"_99":175,"_152":183,"_154":214,"_155":27,"_156":-5,"_98":235},["D",1748555362101],[210],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":241,"_245":246,"_495":31,"_496":150},{"_102":103,"_95":96,"_104":242,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":243,"_129":244},["D",1748554076714],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},"history",[247,252,261,269,278,287,296,305,314,319,327,335,343,351,359,367,376,384,389,394,402,411,419,427,435,443,451,459,466,473,480,488],{"_143":190,"_99":131,"_104":248,"_146":132,"_217":249},["D",1748556101105],[250],{"_102":188,"_146":132,"_143":190,"_95":189,"_154":194,"_152":193,"_99":192,"_145":174,"_104":248,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":251},[173,189],{"_143":190,"_99":253,"_104":254,"_146":132,"_217":255},41,["D",1748555998831],[256],{"_102":257,"_146":132,"_143":190,"_95":189,"_154":258,"_152":193,"_99":259,"_145":174,"_104":254,"_147":253,"_156":-5,"_149":27,"_155":27,"_98":260},"434f85d6-3cd8-11f0-8f36-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter((h, i) => isDaytime(h.time, Object.keys(groupedInsights).indexOf(date)) && h.score >= 8).length} excellent daylight hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n {!isDay && 🌙}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : '🌙'}\n

\n\n {/* Score bar - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator - only show during actual daytime */}\n {isDay && insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n const bestHour = daytimeHours.reduce((best, current) => \n current.score > best.score ? current : best, daytimeHours[0]\n );\n return bestHour ? formatTime(bestHour.time) : 'N/A';\n })()}\n

Golden Hours

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n return dayInsights.filter(h => isDaytime(h.time, dayIndex) && h.isGoldenHour).length;\n })()}\n

Avg Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n if (daytimeHours.length === 0) return 'N/A';\n return (daytimeHours.reduce((sum, h) => sum + h.score, 0) / daytimeHours.length).toFixed(1);\n })()}/10\n

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",14,[173,189],{"_143":190,"_99":262,"_104":263,"_146":132,"_217":264},40,["D",1748555987132],[265],{"_102":266,"_146":132,"_143":190,"_95":189,"_154":267,"_152":193,"_99":165,"_145":174,"_104":263,"_147":262,"_156":-5,"_149":27,"_155":27,"_98":268},"3c584f4c-3cd8-11f0-a7ab-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter((h, i) => isDaytime(h.time, Object.keys(groupedInsights).indexOf(date)) && h.score >= 8).length} excellent daylight hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n {!isDay && 🌙}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : '🌙'}\n

\n\n {/* Score bar - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator - only show during actual daytime */}\n {isDay && insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":190,"_99":270,"_104":271,"_146":132,"_217":272},39,["D",1748555978006],[273],{"_102":274,"_146":132,"_143":190,"_95":189,"_154":275,"_152":193,"_99":276,"_145":174,"_104":271,"_147":270,"_156":-5,"_149":27,"_155":27,"_98":277},"36e6bbb6-3cd8-11f0-8ad2-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n {!isDay && 🌙}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : '🌙'}\n

\n\n {/* Score bar - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization - only show for daytime */}\n {isDay && (\n

\n )}\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator - only show during actual daytime */}\n {isDay && insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",12,[173,189],{"_143":190,"_99":279,"_104":280,"_146":132,"_217":281},38,["D",1748555950469],[282],{"_102":283,"_146":132,"_143":190,"_95":189,"_154":284,"_152":193,"_99":285,"_145":174,"_104":280,"_147":279,"_156":-5,"_149":27,"_155":27,"_98":286},"267c430e-3cd8-11f0-bb13-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",11,[173,189],{"_143":190,"_99":288,"_104":289,"_146":132,"_217":290},37,["D",1748555946764],[291],{"_102":292,"_146":132,"_143":190,"_95":189,"_154":293,"_152":193,"_99":294,"_145":174,"_104":289,"_147":288,"_156":-5,"_149":27,"_155":27,"_98":295},"2446fd40-3cd8-11f0-ae32-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",10,[173,189],{"_143":190,"_99":297,"_104":298,"_146":132,"_217":299},36,["D",1748555942296],[300],{"_102":301,"_146":132,"_143":190,"_95":189,"_154":302,"_152":193,"_99":303,"_145":174,"_104":298,"_147":297,"_156":-5,"_149":27,"_155":27,"_98":304},"219d6bba-3cd8-11f0-94e9-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isDaytime = (timeString: string, dayIndex: number) => {\n if (!weatherData || !weatherData.daily.sunrise[dayIndex] || !weatherData.daily.sunset[dayIndex]) {\n return true; // Default to showing data if we can't determine\n }\n \n const time = new Date(timeString);\n const sunrise = new Date(weatherData.daily.sunrise[dayIndex]);\n const sunset = new Date(weatherData.daily.sunset[dayIndex]);\n \n return time >= sunrise && time <= sunset;\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",9,[173,189],{"_143":190,"_99":306,"_104":307,"_146":132,"_217":308},35,["D",1748555857282],[309],{"_102":310,"_146":132,"_143":190,"_95":189,"_154":311,"_152":193,"_99":312,"_145":174,"_104":307,"_147":306,"_156":-5,"_149":27,"_155":27,"_98":313},"eef16f68-3cd7-11f0-af2a-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",8,[173,189],{"_143":162,"_99":163,"_104":315,"_146":132,"_217":316},["D",1748555740583],[317],{"_102":160,"_146":132,"_143":162,"_95":161,"_154":167,"_152":166,"_99":165,"_145":144,"_104":315,"_147":163,"_156":96,"_149":150,"_155":27,"_98":318},[142,161],{"_143":162,"_99":320,"_104":321,"_146":132,"_217":322},33,["D",1748555650106],[323],{"_102":324,"_146":132,"_143":162,"_95":161,"_154":325,"_152":166,"_99":276,"_145":144,"_104":321,"_147":320,"_156":96,"_149":27,"_155":27,"_98":326},"737499f0-3cd7-11f0-81f7-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.text(\"Hello World\");\n});\n\nexport default app.fetch;",[142,161],{"_143":162,"_99":328,"_104":329,"_146":132,"_217":330},32,["D",1748555636978],[331],{"_102":332,"_146":132,"_143":162,"_95":161,"_154":333,"_152":166,"_99":285,"_145":144,"_104":329,"_147":328,"_156":96,"_149":27,"_155":27,"_98":334},"6ba19dfe-3cd7-11f0-a357-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n// import { fetchWeatherApi } from \"https://esm.sh/openmeteo\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n // Mock data for testing layout - this shows varied cloud coverage\n const mockWeatherData = {\n hourly: {\n time: Array.from({length: 168}, (_, i) => new Date(Date.now() + i * 3600000).toISOString()),\n temperature2m: Array.from({length: 168}, (_, i) => 15 + Math.sin(i / 24 * Math.PI) * 10),\n cloudCover: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 100)), // Random 0-100%\n cloudCoverLow: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n cloudCoverMid: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n cloudCoverHigh: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n surfacePressure: Array.from({length: 168}, (_, i) => 1013 + Math.sin(i / 12) * 20),\n visibility: Array.from({length: 168}, (_, i) => 10000 + Math.random() * 40000),\n },\n daily: {\n time: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000).toISOString()),\n sunrise: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000 + 6 * 3600000).toISOString()),\n sunset: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000 + 20 * 3600000).toISOString()),\n },\n timezone: \"Europe/Amsterdam\",\n timezoneAbbreviation: \"CET\",\n latitude: lat,\n longitude: lon\n };\n \n try {\n // Process data for photography insights\n const processedData = {\n ...mockWeatherData,\n photography_insights: processPhotographyData(mockWeatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",[142,161],{"_143":162,"_99":336,"_104":337,"_146":132,"_217":338},31,["D",1748555630347],[339],{"_102":340,"_146":132,"_143":162,"_95":161,"_154":341,"_152":166,"_99":294,"_145":144,"_104":337,"_147":336,"_156":96,"_149":27,"_155":27,"_98":342},"67ad941e-3cd7-11f0-9833-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { fetchWeatherApi } from \"https://esm.sh/openmeteo\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n // Mock data for testing layout - this shows varied cloud coverage\n const mockWeatherData = {\n hourly: {\n time: Array.from({length: 168}, (_, i) => new Date(Date.now() + i * 3600000).toISOString()),\n temperature2m: Array.from({length: 168}, (_, i) => 15 + Math.sin(i / 24 * Math.PI) * 10),\n cloudCover: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 100)), // Random 0-100%\n cloudCoverLow: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n cloudCoverMid: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n cloudCoverHigh: Array.from({length: 168}, (_, i) => Math.floor(Math.random() * 50)),\n surfacePressure: Array.from({length: 168}, (_, i) => 1013 + Math.sin(i / 12) * 20),\n visibility: Array.from({length: 168}, (_, i) => 10000 + Math.random() * 40000),\n },\n daily: {\n time: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000).toISOString()),\n sunrise: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000 + 6 * 3600000).toISOString()),\n sunset: Array.from({length: 7}, (_, i) => new Date(Date.now() + i * 86400000 + 20 * 3600000).toISOString()),\n },\n timezone: \"Europe/Amsterdam\",\n timezoneAbbreviation: \"CET\",\n latitude: lat,\n longitude: lon\n };\n \n try {\n // Process data for photography insights\n const processedData = {\n ...mockWeatherData,\n photography_insights: processPhotographyData(mockWeatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",[142,161],{"_143":162,"_99":344,"_104":345,"_146":132,"_217":346},30,["D",1748555599550],[347],{"_102":348,"_146":132,"_143":162,"_95":161,"_154":349,"_152":166,"_99":303,"_145":144,"_104":345,"_147":344,"_156":96,"_149":27,"_155":27,"_98":350},"5553e958-3cd7-11f0-9a90-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { fetchWeatherApi } from \"https://esm.sh/openmeteo\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n const params = {\n latitude: lat,\n longitude: lon,\n daily: [\"sunrise\", \"sunset\"],\n hourly: [\"temperature_2m\", \"cloud_cover\", \"cloud_cover_low\", \"cloud_cover_mid\", \"cloud_cover_high\", \"surface_pressure\", \"visibility\"],\n models: \"knmi_seamless\",\n timezone: \"auto\",\n forecast_days: 7\n };\n \n try {\n const responses = await fetchWeatherApi(\"https://api.open-meteo.com/v1/forecast\", params);\n const response = responses[0];\n \n // Attributes for timezone and location\n const utcOffsetSeconds = response.utcOffsetSeconds();\n const timezone = response.timezone();\n const timezoneAbbreviation = response.timezoneAbbreviation();\n const latitude = response.latitude();\n const longitude = response.longitude();\n\n const hourly = response.hourly()!;\n const daily = response.daily()!;\n\n const sunrise = daily.variables(0)!;\n const sunset = daily.variables(1)!;\n\n // Process weather data\n const weatherData = {\n hourly: {\n time: [...Array((Number(hourly.timeEnd()) - Number(hourly.time())) / hourly.interval())].map(\n (_, i) => new Date((Number(hourly.time()) + i * hourly.interval() + utcOffsetSeconds) * 1000)\n ),\n temperature2m: Array.from(hourly.variables(0)!.valuesArray()!),\n cloudCover: Array.from(hourly.variables(1)!.valuesArray()!),\n cloudCoverLow: Array.from(hourly.variables(2)!.valuesArray()!),\n cloudCoverMid: Array.from(hourly.variables(3)!.valuesArray()!),\n cloudCoverHigh: Array.from(hourly.variables(4)!.valuesArray()!),\n surfacePressure: Array.from(hourly.variables(5)!.valuesArray()!),\n visibility: Array.from(hourly.variables(6)!.valuesArray()!),\n },\n daily: {\n time: [...Array((Number(daily.timeEnd()) - Number(daily.time())) / daily.interval())].map(\n (_, i) => new Date((Number(daily.time()) + i * daily.interval() + utcOffsetSeconds) * 1000)\n ),\n sunrise: [...Array(sunrise.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunrise.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n sunset: [...Array(sunset.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunset.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n },\n timezone,\n timezoneAbbreviation,\n latitude,\n longitude\n };\n \n // Debug log to see what we're getting\n console.log(\"Sample cloud cover data:\", weatherData.hourly.cloudCover.slice(0, 5));\n \n // Process data for photography insights\n const processedData = {\n ...weatherData,\n photography_insights: processPhotographyData(weatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",[142,161],{"_143":162,"_99":352,"_104":353,"_146":132,"_217":354},29,["D",1748555561885],[355],{"_102":356,"_146":132,"_143":162,"_95":161,"_154":357,"_152":166,"_99":312,"_145":144,"_104":353,"_147":352,"_156":96,"_149":27,"_155":27,"_98":358},"3edecf3a-3cd7-11f0-8da0-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n// import { fetchWeatherApi } from \"https://esm.sh/openmeteo\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Test endpoint\napp.get(\"/test\", async (c) => {\n return c.json({ message: \"Backend is working\" });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n const params = {\n latitude: lat,\n longitude: lon,\n daily: [\"sunrise\", \"sunset\"],\n hourly: [\"temperature_2m\", \"cloud_cover\", \"cloud_cover_low\", \"cloud_cover_mid\", \"cloud_cover_high\", \"surface_pressure\", \"visibility\"],\n models: \"knmi_seamless\",\n timezone: \"auto\",\n forecast_days: 7\n };\n \n try {\n const responses = await fetchWeatherApi(\"https://api.open-meteo.com/v1/forecast\", params);\n const response = responses[0];\n \n // Attributes for timezone and location\n const utcOffsetSeconds = response.utcOffsetSeconds();\n const timezone = response.timezone();\n const timezoneAbbreviation = response.timezoneAbbreviation();\n const latitude = response.latitude();\n const longitude = response.longitude();\n\n const hourly = response.hourly()!;\n const daily = response.daily()!;\n\n const sunrise = daily.variables(0)!;\n const sunset = daily.variables(1)!;\n\n // Process weather data\n const weatherData = {\n hourly: {\n time: [...Array((Number(hourly.timeEnd()) - Number(hourly.time())) / hourly.interval())].map(\n (_, i) => new Date((Number(hourly.time()) + i * hourly.interval() + utcOffsetSeconds) * 1000)\n ),\n temperature2m: Array.from(hourly.variables(0)!.valuesArray()!),\n cloudCover: Array.from(hourly.variables(1)!.valuesArray()!),\n cloudCoverLow: Array.from(hourly.variables(2)!.valuesArray()!),\n cloudCoverMid: Array.from(hourly.variables(3)!.valuesArray()!),\n cloudCoverHigh: Array.from(hourly.variables(4)!.valuesArray()!),\n surfacePressure: Array.from(hourly.variables(5)!.valuesArray()!),\n visibility: Array.from(hourly.variables(6)!.valuesArray()!),\n },\n daily: {\n time: [...Array((Number(daily.timeEnd()) - Number(daily.time())) / daily.interval())].map(\n (_, i) => new Date((Number(daily.time()) + i * daily.interval() + utcOffsetSeconds) * 1000)\n ),\n sunrise: [...Array(sunrise.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunrise.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n sunset: [...Array(sunset.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunset.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n },\n timezone,\n timezoneAbbreviation,\n latitude,\n longitude\n };\n \n // Debug log to see what we're getting\n console.log(\"Sample cloud cover data:\", weatherData.hourly.cloudCover.slice(0, 5));\n \n // Process data for photography insights\n const processedData = {\n ...weatherData,\n photography_insights: processPhotographyData(weatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",[142,161],{"_143":162,"_99":360,"_104":361,"_146":132,"_217":362},28,["D",1748555542439],[363],{"_102":364,"_146":132,"_143":162,"_95":161,"_154":349,"_152":166,"_99":365,"_145":144,"_104":361,"_147":360,"_156":96,"_149":27,"_155":27,"_98":366},"3347fd86-3cd7-11f0-b53e-9e149126039e",7,[142,161],{"_143":162,"_99":368,"_104":369,"_146":132,"_217":370},27,["D",1748555534697],[371],{"_102":372,"_146":132,"_143":162,"_95":161,"_154":373,"_152":166,"_99":374,"_145":144,"_104":369,"_147":368,"_156":96,"_149":27,"_155":27,"_98":375},"2eaab2b4-3cd7-11f0-8118-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { fetchWeatherApi } from \"https://esm.sh/openmeteo@1.1.0\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n const params = {\n latitude: lat,\n longitude: lon,\n daily: [\"sunrise\", \"sunset\"],\n hourly: [\"temperature_2m\", \"cloud_cover\", \"cloud_cover_low\", \"cloud_cover_mid\", \"cloud_cover_high\", \"surface_pressure\", \"visibility\"],\n models: \"knmi_seamless\",\n timezone: \"auto\",\n forecast_days: 7\n };\n \n try {\n const responses = await fetchWeatherApi(\"https://api.open-meteo.com/v1/forecast\", params);\n const response = responses[0];\n \n // Attributes for timezone and location\n const utcOffsetSeconds = response.utcOffsetSeconds();\n const timezone = response.timezone();\n const timezoneAbbreviation = response.timezoneAbbreviation();\n const latitude = response.latitude();\n const longitude = response.longitude();\n\n const hourly = response.hourly()!;\n const daily = response.daily()!;\n\n const sunrise = daily.variables(0)!;\n const sunset = daily.variables(1)!;\n\n // Process weather data\n const weatherData = {\n hourly: {\n time: [...Array((Number(hourly.timeEnd()) - Number(hourly.time())) / hourly.interval())].map(\n (_, i) => new Date((Number(hourly.time()) + i * hourly.interval() + utcOffsetSeconds) * 1000)\n ),\n temperature2m: Array.from(hourly.variables(0)!.valuesArray()!),\n cloudCover: Array.from(hourly.variables(1)!.valuesArray()!),\n cloudCoverLow: Array.from(hourly.variables(2)!.valuesArray()!),\n cloudCoverMid: Array.from(hourly.variables(3)!.valuesArray()!),\n cloudCoverHigh: Array.from(hourly.variables(4)!.valuesArray()!),\n surfacePressure: Array.from(hourly.variables(5)!.valuesArray()!),\n visibility: Array.from(hourly.variables(6)!.valuesArray()!),\n },\n daily: {\n time: [...Array((Number(daily.timeEnd()) - Number(daily.time())) / daily.interval())].map(\n (_, i) => new Date((Number(daily.time()) + i * daily.interval() + utcOffsetSeconds) * 1000)\n ),\n sunrise: [...Array(sunrise.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunrise.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n sunset: [...Array(sunset.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunset.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n },\n timezone,\n timezoneAbbreviation,\n latitude,\n longitude\n };\n \n // Debug log to see what we're getting\n console.log(\"Sample cloud cover data:\", weatherData.hourly.cloudCover.slice(0, 5));\n \n // Process data for photography insights\n const processedData = {\n ...weatherData,\n photography_insights: processPhotographyData(weatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",6,[142,161],{"_143":162,"_99":377,"_104":378,"_146":132,"_217":379},26,["D",1748555526062],[380],{"_102":381,"_146":132,"_143":162,"_95":161,"_154":382,"_152":166,"_99":203,"_145":144,"_104":378,"_147":377,"_156":96,"_149":27,"_155":27,"_98":383},"29849692-3cd7-11f0-b53e-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { fetchWeatherApi } from \"https://esm.sh/openmeteo@1.1.4\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Weather API endpoint\napp.get(\"/api/weather\", async (c) => {\n const lat = parseFloat(c.req.query(\"lat\") || \"52.3676\"); // Default to Amsterdam\n const lon = parseFloat(c.req.query(\"lon\") || \"4.9041\");\n \n const params = {\n latitude: lat,\n longitude: lon,\n daily: [\"sunrise\", \"sunset\"],\n hourly: [\"temperature_2m\", \"cloud_cover\", \"cloud_cover_low\", \"cloud_cover_mid\", \"cloud_cover_high\", \"surface_pressure\", \"visibility\"],\n models: \"knmi_seamless\",\n timezone: \"auto\",\n forecast_days: 7\n };\n \n try {\n const responses = await fetchWeatherApi(\"https://api.open-meteo.com/v1/forecast\", params);\n const response = responses[0];\n \n // Attributes for timezone and location\n const utcOffsetSeconds = response.utcOffsetSeconds();\n const timezone = response.timezone();\n const timezoneAbbreviation = response.timezoneAbbreviation();\n const latitude = response.latitude();\n const longitude = response.longitude();\n\n const hourly = response.hourly()!;\n const daily = response.daily()!;\n\n const sunrise = daily.variables(0)!;\n const sunset = daily.variables(1)!;\n\n // Process weather data\n const weatherData = {\n hourly: {\n time: [...Array((Number(hourly.timeEnd()) - Number(hourly.time())) / hourly.interval())].map(\n (_, i) => new Date((Number(hourly.time()) + i * hourly.interval() + utcOffsetSeconds) * 1000)\n ),\n temperature2m: Array.from(hourly.variables(0)!.valuesArray()!),\n cloudCover: Array.from(hourly.variables(1)!.valuesArray()!),\n cloudCoverLow: Array.from(hourly.variables(2)!.valuesArray()!),\n cloudCoverMid: Array.from(hourly.variables(3)!.valuesArray()!),\n cloudCoverHigh: Array.from(hourly.variables(4)!.valuesArray()!),\n surfacePressure: Array.from(hourly.variables(5)!.valuesArray()!),\n visibility: Array.from(hourly.variables(6)!.valuesArray()!),\n },\n daily: {\n time: [...Array((Number(daily.timeEnd()) - Number(daily.time())) / daily.interval())].map(\n (_, i) => new Date((Number(daily.time()) + i * daily.interval() + utcOffsetSeconds) * 1000)\n ),\n sunrise: [...Array(sunrise.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunrise.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n sunset: [...Array(sunset.valuesInt64Length())].map(\n (_, i) => new Date((Number(sunset.valuesInt64(i)) + utcOffsetSeconds) * 1000)\n ),\n },\n timezone,\n timezoneAbbreviation,\n latitude,\n longitude\n };\n \n // Debug log to see what we're getting\n console.log(\"Sample cloud cover data:\", weatherData.hourly.cloudCover.slice(0, 5));\n \n // Process data for photography insights\n const processedData = {\n ...weatherData,\n photography_insights: processPhotographyData(weatherData)\n };\n \n return c.json(processedData);\n } catch (error) {\n console.error(\"Weather API error:\", error);\n return c.json({ error: \"Failed to fetch weather data\", details: error.message }, 500);\n }\n});\n\n// Location detection endpoint\napp.get(\"/api/location\", async (c) => {\n const ip = c.req.header(\"CF-Connecting-IP\") || c.req.header(\"X-Forwarded-For\") || \"127.0.0.1\";\n \n try {\n // Use a simple IP geolocation service\n const response = await fetch(`http://ip-api.com/json/${ip}`);\n const data = await response.json();\n \n if (data.status === \"success\") {\n return c.json({\n lat: data.lat,\n lon: data.lon,\n city: data.city,\n country: data.country\n });\n }\n } catch (error) {\n // Fallback to default location\n }\n \n return c.json({\n lat: 52.3676,\n lon: 4.9041,\n city: \"Amsterdam\",\n country: \"Netherlands\"\n });\n});\n\n// Main page\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nfunction processPhotographyData(weatherData: any) {\n const insights = [];\n const hourly = weatherData.hourly;\n const daily = weatherData.daily;\n \n for (let i = 0; i < hourly.time.length; i++) {\n const time = hourly.time[i];\n const cloudCover = hourly.cloudCover[i];\n const visibility = hourly.visibility[i];\n const temp = hourly.temperature2m[i];\n \n // Find corresponding daily data\n const dayIndex = Math.floor(i / 24);\n const sunrise = daily.sunrise[dayIndex];\n const sunset = daily.sunset[dayIndex];\n \n let condition = \"fair\";\n let score = 5; // 1-10 scale\n \n // Calculate photography score\n if (cloudCover <= 20) {\n condition = \"excellent\";\n score = 9;\n } else if (cloudCover <= 40) {\n condition = \"very-good\";\n score = 8;\n } else if (cloudCover <= 60) {\n condition = \"good\";\n score = 6;\n } else if (cloudCover <= 80) {\n condition = \"fair\";\n score = 4;\n } else {\n condition = \"poor\";\n score = 2;\n }\n \n // Bonus for golden hour\n if (sunrise && sunset) {\n const goldenHourMorning = new Date(sunrise.getTime() - 60 * 60 * 1000); // 1 hour before sunrise\n const goldenHourEvening = new Date(sunset.getTime() + 60 * 60 * 1000); // 1 hour after sunset\n \n if ((time >= goldenHourMorning && time <= sunrise) || \n (time >= sunset && time <= goldenHourEvening)) {\n score += 2;\n condition = score >= 8 ? \"golden-hour\" : condition;\n }\n }\n \n // Adjust for visibility\n if (visibility < 5000) score -= 2;\n else if (visibility > 15000) score += 1;\n \n score = Math.max(1, Math.min(10, score));\n \n insights.push({\n time: time.toISOString(),\n condition,\n score,\n cloudCover,\n visibility,\n temperature: temp,\n isGoldenHour: sunrise && sunset && \n ((time >= new Date(sunrise.getTime() - 60 * 60 * 1000) && time <= sunrise) ||\n (time >= sunset && time <= new Date(sunset.getTime() + 60 * 60 * 1000)))\n });\n }\n \n return insights;\n}\n\nexport default app.fetch;",[142,161],{"_143":211,"_99":212,"_104":385,"_146":132,"_217":386},["D",1748555362101],[387],{"_102":209,"_146":132,"_143":211,"_95":210,"_154":214,"_152":183,"_99":175,"_145":-5,"_104":385,"_147":212,"_156":-5,"_149":150,"_155":27,"_98":388},[210],{"_143":200,"_99":201,"_104":390,"_146":132,"_217":391},["D",1748555335802],[392],{"_102":198,"_146":132,"_143":200,"_95":199,"_154":204,"_152":183,"_99":203,"_145":174,"_104":390,"_147":201,"_156":-5,"_149":150,"_155":27,"_98":393},[173,199],{"_143":200,"_99":395,"_104":396,"_146":132,"_217":397},23,["D",1748555329462],[398],{"_102":399,"_146":132,"_143":200,"_95":199,"_154":400,"_152":183,"_99":175,"_145":174,"_104":396,"_147":395,"_156":-5,"_149":27,"_155":27,"_98":401},"b45614fe-3cd6-11f0-9d58-9e149126039e","/* Dense mobile-first photography weather dashboard with detailed data */\n\n.weather-card {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.hour-card {\n min-height: 130px;\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.hour-card:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Toned down color scheme */\n.condition-excellent {\n background: linear-gradient(135deg, #e8f5e8, #d4edda);\n color: #155724;\n border-left: 3px solid #28a745;\n}\n\n.condition-very-good {\n background: linear-gradient(135deg, #e8f4fd, #cce7ff);\n color: #004085;\n border-left: 3px solid #007bff;\n}\n\n.condition-good {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n color: #856404;\n border-left: 3px solid #ffc107;\n}\n\n.condition-fair {\n background: linear-gradient(135deg, #ffecd1, #fed7aa);\n color: #8b4513;\n border-left: 3px solid #fd7e14;\n}\n\n.condition-poor {\n background: linear-gradient(135deg, #f8d7da, #f1c0c7);\n color: #721c24;\n border-left: 3px solid #dc3545;\n}\n\n.condition-golden-hour {\n background: linear-gradient(135deg, #fff8e1, #ffecb3);\n color: #e65100;\n border-left: 3px solid #ff9800;\n box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);\n}\n\n.score-bar {\n height: 2px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 1px;\n overflow: hidden;\n margin: 2px 0;\n}\n\n.score-fill {\n height: 100%;\n background: currentColor;\n opacity: 0.6;\n transition: width 0.3s ease;\n}\n\n.cloud-layers {\n display: flex;\n gap: 1px;\n margin: 1px 0;\n}\n\n.cloud-layer {\n height: 3px;\n border-radius: 1px;\n flex: 1;\n}\n\n.cloud-low { background: #6c757d; }\n.cloud-mid { background: #495057; }\n.cloud-high { background: #343a40; }\n\n.data-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2px;\n font-size: 0.6rem;\n line-height: 1.1;\n}\n\n.data-item {\n text-align: center;\n padding: 1px;\n}\n\n.time-header {\n font-weight: 600;\n font-size: 0.75rem;\n text-align: center;\n margin-bottom: 2px;\n}\n\n.temp-display {\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n margin: 2px 0;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Compact text styles */\n.text-2xs {\n font-size: 0.625rem;\n line-height: 0.75rem;\n}\n\n.text-3xs {\n font-size: 0.5rem;\n line-height: 0.625rem;\n}\n\n.text-4xs {\n font-size: 0.45rem;\n line-height: 0.55rem;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .hour-card {\n min-height: 110px;\n }\n \n .container {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n \n .data-grid {\n font-size: 0.55rem;\n }\n}\n\n/* Today highlight */\n.today-highlight {\n border: 2px solid #3b82f6;\n box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);\n}\n\n/* Stable grid layout */\n.hourly-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 3px;\n}\n\n@media (min-width: 640px) {\n .hourly-grid {\n grid-template-columns: repeat(8, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n .hourly-grid {\n grid-template-columns: repeat(12, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .hourly-grid {\n grid-template-columns: repeat(24, 1fr);\n }\n}\n\n/* Legend items */\n.legend-item {\n padding: 0.25rem 0.375rem;\n border-radius: 0.25rem;\n font-size: 0.65rem;\n text-align: center;\n min-width: 50px;\n border-left: 2px solid;\n}\n\n.legend-item.condition-excellent { \n background: #e8f5e8; \n color: #155724; \n border-left-color: #28a745; \n}\n\n.legend-item.condition-very-good { \n background: #e8f4fd; \n color: #004085; \n border-left-color: #007bff; \n}\n\n.legend-item.condition-good { \n background: #fff3cd; \n color: #856404; \n border-left-color: #ffc107; \n}\n\n.legend-item.condition-fair { \n background: #ffecd1; \n color: #8b4513; \n border-left-color: #fd7e14; \n}\n\n.legend-item.condition-poor { \n background: #f8d7da; \n color: #721c24; \n border-left-color: #dc3545; \n}\n\n.legend-item.condition-golden-hour { \n background: #fff8e1; \n color: #e65100; \n border-left-color: #ff9800; \n}",[173,199],{"_143":200,"_99":403,"_104":404,"_146":132,"_217":405},22,["D",1748555325070],[406],{"_102":407,"_146":132,"_143":200,"_95":199,"_154":408,"_152":183,"_99":409,"_145":174,"_104":404,"_147":403,"_156":-5,"_149":27,"_155":27,"_98":410},"b1b81bac-3cd6-11f0-90d6-9e149126039e","/* Dense mobile-first photography weather dashboard with detailed data */\n\n.weather-card {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.hour-card {\n min-height: 130px;\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.hour-card:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Toned down color scheme */\n.condition-excellent {\n background: linear-gradient(135deg, #e8f5e8, #d4edda);\n color: #155724;\n border-left: 3px solid #28a745;\n}\n\n.condition-very-good {\n background: linear-gradient(135deg, #e8f4fd, #cce7ff);\n color: #004085;\n border-left: 3px solid #007bff;\n}\n\n.condition-good {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n color: #856404;\n border-left: 3px solid #ffc107;\n}\n\n.condition-fair {\n background: linear-gradient(135deg, #ffecd1, #fed7aa);\n color: #8b4513;\n border-left: 3px solid #fd7e14;\n}\n\n.condition-poor {\n background: linear-gradient(135deg, #f8d7da, #f1c0c7);\n color: #721c24;\n border-left: 3px solid #dc3545;\n}\n\n.condition-golden-hour {\n background: linear-gradient(135deg, #fff8e1, #ffecb3);\n color: #e65100;\n border-left: 3px solid #ff9800;\n box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);\n}\n\n.score-bar {\n height: 2px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 1px;\n overflow: hidden;\n margin: 2px 0;\n}\n\n.score-fill {\n height: 100%;\n background: currentColor;\n opacity: 0.6;\n transition: width 0.3s ease;\n}\n\n.cloud-layers {\n display: flex;\n gap: 1px;\n margin: 1px 0;\n}\n\n.cloud-layer {\n height: 3px;\n border-radius: 1px;\n flex: 1;\n}\n\n.cloud-low { background: #6c757d; }\n.cloud-mid { background: #495057; }\n.cloud-high { background: #343a40; }\n\n.data-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 2px;\n font-size: 0.6rem;\n line-height: 1.1;\n}\n\n.data-item {\n text-align: center;\n padding: 1px;\n}\n\n.time-header {\n font-weight: 600;\n font-size: 0.75rem;\n text-align: center;\n margin-bottom: 2px;\n}\n\n.temp-display {\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n margin: 2px 0;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Compact text styles */\n.text-2xs {\n font-size: 0.625rem;\n line-height: 0.75rem;\n}\n\n.text-3xs {\n font-size: 0.5rem;\n line-height: 0.625rem;\n}\n\n.text-4xs {\n font-size: 0.45rem;\n line-height: 0.55rem;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .hour-card {\n min-height: 110px;\n }\n \n .container {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n \n .data-grid {\n font-size: 0.55rem;\n }\n}\n\n/* Today highlight */\n.today-highlight {\n border: 2px solid #3b82f6;\n box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);\n}\n\n/* Stable grid layout */\n.hourly-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 3px;\n}\n\n@media (min-width: 640px) {\n .hourly-grid {\n grid-template-columns: repeat(8, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n .hourly-grid {\n grid-template-columns: repeat(12, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .hourly-grid {\n grid-template-columns: repeat(24, 1fr);\n }\n}\n\n/* Legend items */\n.legend-item {\n padding: 0.25rem 0.375rem;\n border-radius: 0.25rem;\n font-size: 0.65rem;\n text-align: center;\n min-width: 50px;\n border-left: 2px solid;\n}\n\n.legend-item.condition-excellent { \n background: #e8f5e8; \n color: #155724; \n border-left-color: #28a745; \n}\n\n.legend-item.condition-very-good { \n background: #e8f4fd; \n color: #004085; \n border-left-color: #007bff; \n}\n\n.legend-item.condition-good { \n background: #fff3cd; \n color: #856404; \n border-left-color: #ffc107; \n}\n\n.legend-item.condition-fair { \n background: #ffecd1; \n color: #8b4513; \n border-left-color: #fd7e14; \n}\n\n.legend-item.condition-poor { \n background: #f8d7da; \n color: #721c24; \n border-left-color: #dc3545; \n}\n\n.legend-item.condition-golden-hour { \n background: #fff8e1; \n color: #e65100; \n border-left-color: #ff9800; \n}",3,[173,199],{"_143":190,"_99":412,"_104":413,"_146":132,"_217":414},21,["D",1748555319532],[415],{"_102":416,"_146":132,"_143":190,"_95":189,"_154":417,"_152":193,"_99":365,"_145":174,"_104":413,"_147":412,"_156":-5,"_149":27,"_155":27,"_98":418},"ae6d1c7c-3cd6-11f0-8b1f-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {hourData.cloudCover}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'} km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":190,"_99":420,"_104":421,"_146":132,"_217":422},20,["D",1748555312463],[423],{"_102":424,"_146":132,"_143":190,"_95":189,"_154":425,"_152":193,"_99":374,"_145":174,"_104":421,"_147":420,"_156":-5,"_149":27,"_155":27,"_98":426},"aa34891a-3cd6-11f0-ba07-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Cloud Coverage - Front and Center */}\n

\n {hourData.cloudCover}%\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Score bar */}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid */}\n

☁️ {hourData.cloudCover}%

📊 {Math.round(hourData.surfacePressure)}

👁️ {hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'}km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":190,"_99":428,"_104":429,"_146":132,"_217":430},19,["D",1748555302561],[431],{"_102":432,"_146":132,"_143":190,"_95":189,"_154":433,"_152":193,"_99":203,"_145":174,"_104":429,"_147":428,"_156":-5,"_149":27,"_155":27,"_98":434},"a44d8272-3cd6-11f0-9283-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Condition emoji and score */}\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid */}\n

☁️ {hourData.cloudCover}%

📊 {Math.round(hourData.surfacePressure)}

👁️ {hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'}km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":190,"_99":436,"_104":437,"_146":132,"_217":438},18,["D",1748555280263],[439],{"_102":440,"_146":132,"_143":190,"_95":189,"_154":441,"_152":193,"_99":175,"_145":174,"_104":437,"_147":436,"_156":-5,"_149":27,"_155":27,"_98":442},"97044326-3cd6-11f0-aa5b-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"☁️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Temp, Total/Low/Mid/High clouds %, Pressure (hPa), Visibility (km)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Condition emoji and score */}\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid */}\n

☁️ {hourData.cloudCover}%

📊 {Math.round(hourData.surfacePressure)}

👁️ {hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'}km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":190,"_99":444,"_104":445,"_146":132,"_217":446},17,["D",1748555035263],[447],{"_102":448,"_146":132,"_143":190,"_95":189,"_154":449,"_152":193,"_99":409,"_145":174,"_104":445,"_147":444,"_156":-5,"_149":27,"_155":27,"_98":450},"04faf934-3cd6-11f0-86d4-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"🌧️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data: Temp, Total/Low/Mid/High clouds %, Pressure (hPa), Visibility (km)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Condition emoji and score */}\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid */}\n

☁️ {hourData.cloudCover}%

📊 {Math.round(hourData.surfacePressure)}

👁️ {hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'}km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":211,"_99":452,"_104":453,"_146":132,"_217":454},16,["D",1748554835222],[455],{"_102":456,"_146":132,"_143":211,"_95":210,"_154":457,"_152":183,"_99":409,"_145":-5,"_104":453,"_147":452,"_156":-5,"_149":27,"_155":27,"_98":458},"8dbf946a-3cd5-11f0-ace0-9e149126039e","# Photography Weather Dashboard\n\nA dense, mobile-first weather website designed for photographers to quickly check upcoming weather conditions with focus on cloud cover, visibility, and lighting conditions.\n\n## Features\n\n- **📱 Stable grid layout** - Consistent time positioning across all devices\n- **📊 Detailed weather data** - Cloud layers (low/mid/high), surface pressure, visibility\n- **🎨 Toned-down colors** - Subtle gradients with colored left borders for easy scanning\n- **⚡ Visual cloud layers** - Three-bar visualization showing cloud distribution by altitude\n- **🌅 Golden hour highlighting** - Subtle glow effects for optimal lighting times\n- **📈 Photography scoring** - 1-10 rating system with visual progress bars\n- **📍 Smart location** - Auto-detects location with manual coordinate override\n- **🎯 Today highlighting** - Special border for current day\n- **📋 Comprehensive data** - Temperature, total clouds, pressure, visibility in each card\n\n## Detailed Data Display\n\nEach hourly card shows:\n- **Time** - Consistent positioning at top\n- **Condition emoji** - Quick visual reference\n- **Score bar** - Photography quality (1-10)\n- **Temperature** - Rounded to nearest degree\n- **Cloud layers** - Visual bars showing low/mid/high cloud coverage\n- **Total cloud %** - Overall cloud coverage\n- **Surface pressure** - In hPa (hectopascals)\n- **Visibility** - In kilometers (when available)\n- **Golden hour indicator** - Special marking for optimal times\n\n## Stable Grid Design\n\n- **Responsive breakpoints**: 6 → 8 → 12 → 24 columns based on screen size\n- **Fixed card heights** - Consistent 120px for uniform appearance\n- **Toned-down palette** - Subtle backgrounds with accent borders\n- **Visual hierarchy** - Time always at top, data in consistent positions\n\n## API Data\n\nUses Open-Meteo KNMI API with official SDK:\n- **Hourly**: temperature, cloud cover (total, low, mid, high), surface pressure, visibility\n- **Daily**: sunrise, sunset times \n- **Timezone**: Auto-detected\n- **Model**: KNMI Seamless for high accuracy\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with Open-Meteo SDK integration\n├── frontend/\n│ ├── index.html # Main page\n│ ├── index.tsx # Dense React app\n│ └── style.css # Mobile-optimized styles\n└── README.md\n```\n\n## Usage\n\nThe main endpoint serves the weather dashboard. The API automatically detects location or allows manual coordinates input.\n\n### Key Features\n\n- **Photography Score**: 1-10 rating based on cloud cover, visibility, and lighting conditions\n- **Golden Hour Detection**: Automatically identifies optimal lighting times (±1 hour from sunrise/sunset)\n- **7-Day Forecast**: Hourly weather data for the next week\n- **Location Detection**: Auto-detects your location or allows manual coordinate input\n- **Mobile Responsive**: Works great on all devices\n\n### Photography Conditions\n\n- **Excellent** (☀️): <20% cloud cover - Perfect for most photography\n- **Very Good** (🌤️): 20-40% cloud cover - Great conditions with some interesting clouds\n- **Good** (⛅): 40-60% cloud cover - Good for dramatic skies\n- **Fair** (☁️): 60-80% cloud cover - Overcast but workable\n- **Poor** (🌧️): >80% cloud cover - Limited lighting options\n- **Golden Hour** (🌅): Special highlighting for optimal portrait/landscape times\n\n### API Endpoints\n\n- `GET /` - Main dashboard\n- `GET /api/weather?lat={lat}&lon={lon}` - Weather data with photography insights\n- `GET /api/location` - Auto-detect location from IP",[210],{"_143":190,"_99":192,"_104":460,"_146":132,"_217":461},["D",1748554815203],[462],{"_102":463,"_146":132,"_143":190,"_95":189,"_154":464,"_152":193,"_99":148,"_145":174,"_104":460,"_147":192,"_156":-5,"_149":27,"_155":27,"_98":465},"81d08bf0-3cd5-11f0-9262-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"🌧️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n const getHourlyData = (hourIndex: number) => {\n if (!weatherData) return null;\n \n return {\n time: weatherData.hourly.time[hourIndex],\n temperature: weatherData.hourly.temperature2m[hourIndex],\n cloudCover: weatherData.hourly.cloudCover[hourIndex],\n cloudCoverLow: weatherData.hourly.cloudCoverLow[hourIndex],\n cloudCoverMid: weatherData.hourly.cloudCoverMid[hourIndex],\n cloudCoverHigh: weatherData.hourly.cloudCoverHigh[hourIndex],\n surfacePressure: weatherData.hourly.surfacePressure[hourIndex],\n visibility: weatherData.hourly.visibility[hourIndex],\n insight: weatherData.photography_insights[hourIndex]\n };\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

🌧️ Poor

🌅 Golden

\n Data: Temp, Total/Low/Mid/High clouds %, Pressure (hPa), Visibility (km)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} excellent hours\n

\n \n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n const hourData = getHourlyData(dayInsights.indexOf(insight));\n if (!hourData) return null;\n \n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n

\n \n {/* Condition emoji and score */}\n

\n {getConditionEmoji(insight.condition)}\n

\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization */}\n

\n\n {/* Detailed data grid */}\n

☁️ {hourData.cloudCover}%

📊 {Math.round(hourData.surfacePressure)}

👁️ {hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : 'N/A'}km

\n\n {/* Golden hour indicator */}\n {insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n

\n );\n })}\n

\n\n {/* Day Summary */}\n

Best Time

{formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}

Golden Hours

{dayInsights.filter(h => h.isGoldenHour).length}

Avg Score

{(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}/10

\n ))}\n

\n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[173,189],{"_143":200,"_99":259,"_104":467,"_146":132,"_217":468},["D",1748554758689],[469],{"_102":470,"_146":132,"_143":200,"_95":199,"_154":471,"_152":183,"_99":148,"_145":174,"_104":467,"_147":259,"_156":-5,"_149":27,"_155":27,"_98":472},"6021459e-3cd5-11f0-af4c-9e149126039e","/* Dense mobile-first photography weather dashboard with detailed data */\n\n.weather-card {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.hour-card {\n min-height: 120px;\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.hour-card:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Toned down color scheme */\n.condition-excellent {\n background: linear-gradient(135deg, #e8f5e8, #d4edda);\n color: #155724;\n border-left: 3px solid #28a745;\n}\n\n.condition-very-good {\n background: linear-gradient(135deg, #e8f4fd, #cce7ff);\n color: #004085;\n border-left: 3px solid #007bff;\n}\n\n.condition-good {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n color: #856404;\n border-left: 3px solid #ffc107;\n}\n\n.condition-fair {\n background: linear-gradient(135deg, #ffecd1, #fed7aa);\n color: #8b4513;\n border-left: 3px solid #fd7e14;\n}\n\n.condition-poor {\n background: linear-gradient(135deg, #f8d7da, #f1c0c7);\n color: #721c24;\n border-left: 3px solid #dc3545;\n}\n\n.condition-golden-hour {\n background: linear-gradient(135deg, #fff8e1, #ffecb3);\n color: #e65100;\n border-left: 3px solid #ff9800;\n box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);\n}\n\n.score-bar {\n height: 2px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 1px;\n overflow: hidden;\n margin: 2px 0;\n}\n\n.score-fill {\n height: 100%;\n background: currentColor;\n opacity: 0.6;\n transition: width 0.3s ease;\n}\n\n.cloud-layers {\n display: flex;\n gap: 1px;\n margin: 1px 0;\n}\n\n.cloud-layer {\n height: 3px;\n border-radius: 1px;\n flex: 1;\n}\n\n.cloud-low { background: #6c757d; }\n.cloud-mid { background: #495057; }\n.cloud-high { background: #343a40; }\n\n.data-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 2px;\n font-size: 0.6rem;\n line-height: 1.1;\n}\n\n.data-item {\n text-align: center;\n padding: 1px;\n}\n\n.time-header {\n font-weight: 600;\n font-size: 0.75rem;\n text-align: center;\n margin-bottom: 2px;\n}\n\n.temp-display {\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n margin: 2px 0;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Compact text styles */\n.text-2xs {\n font-size: 0.625rem;\n line-height: 0.75rem;\n}\n\n.text-3xs {\n font-size: 0.5rem;\n line-height: 0.625rem;\n}\n\n.text-4xs {\n font-size: 0.45rem;\n line-height: 0.55rem;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .hour-card {\n min-height: 110px;\n }\n \n .container {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n \n .data-grid {\n font-size: 0.55rem;\n }\n}\n\n/* Today highlight */\n.today-highlight {\n border: 2px solid #3b82f6;\n box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);\n}\n\n/* Stable grid layout */\n.hourly-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: 3px;\n}\n\n@media (min-width: 640px) {\n .hourly-grid {\n grid-template-columns: repeat(8, 1fr);\n }\n}\n\n@media (min-width: 768px) {\n .hourly-grid {\n grid-template-columns: repeat(12, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .hourly-grid {\n grid-template-columns: repeat(24, 1fr);\n }\n}\n\n/* Legend items */\n.legend-item {\n padding: 0.25rem 0.375rem;\n border-radius: 0.25rem;\n font-size: 0.65rem;\n text-align: center;\n min-width: 50px;\n border-left: 2px solid;\n}\n\n.legend-item.condition-excellent { \n background: #e8f5e8; \n color: #155724; \n border-left-color: #28a745; \n}\n\n.legend-item.condition-very-good { \n background: #e8f4fd; \n color: #004085; \n border-left-color: #007bff; \n}\n\n.legend-item.condition-good { \n background: #fff3cd; \n color: #856404; \n border-left-color: #ffc107; \n}\n\n.legend-item.condition-fair { \n background: #ffecd1; \n color: #8b4513; \n border-left-color: #fd7e14; \n}\n\n.legend-item.condition-poor { \n background: #f8d7da; \n color: #721c24; \n border-left-color: #dc3545; \n}\n\n.legend-item.condition-golden-hour { \n background: #fff8e1; \n color: #e65100; \n border-left-color: #ff9800; \n}",[173,199],{"_143":211,"_99":165,"_104":474,"_146":132,"_217":475},["D",1748554492975],[476],{"_102":477,"_146":132,"_143":211,"_95":210,"_154":478,"_152":183,"_99":148,"_145":-5,"_104":474,"_147":165,"_156":-5,"_149":27,"_155":27,"_98":479},"c1ca147a-3cd4-11f0-b7a4-9e149126039e","# Photography Weather Dashboard\n\nA dense, mobile-first weather website designed for photographers to quickly check upcoming weather conditions with focus on cloud cover, visibility, and lighting conditions.\n\n## Features\n\n- **📱 Ultra-dense mobile design** - Maximum information in minimal space\n- **⚡ Quick scanning** - Color-coded hourly cards for instant condition assessment \n- **🌅 Golden hour highlighting** - Special glow effects for optimal lighting times\n- **📊 Photography scoring** - 1-10 rating system based on cloud cover and visibility\n- **📍 Smart location** - Auto-detects location with manual coordinate override\n- **🎯 Today highlighting** - Special border for current day\n- **📈 Day summaries** - Best times, golden hours, and average scores per day\n\n## Mobile-First Design\n\n- **Sticky header** with collapsible legend\n- **Dense hourly grid** showing every hour in compact cards\n- **Touch-friendly** hover effects and responsive layout\n- **Minimal scrolling** with maximum information density\n- **Quick stats** showing good hours count per day\n\n## API Data\n\nUses Open-Meteo KNMI API with official SDK:\n- **Hourly**: temperature, cloud cover (total, low, mid, high), surface pressure, visibility\n- **Daily**: sunrise, sunset times \n- **Timezone**: Auto-detected\n- **Model**: KNMI Seamless for high accuracy\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with Open-Meteo SDK integration\n├── frontend/\n│ ├── index.html # Main page\n│ ├── index.tsx # Dense React app\n│ └── style.css # Mobile-optimized styles\n└── README.md\n```\n\n## Usage\n\nThe main endpoint serves the weather dashboard. The API automatically detects location or allows manual coordinates input.\n\n### Key Features\n\n- **Photography Score**: 1-10 rating based on cloud cover, visibility, and lighting conditions\n- **Golden Hour Detection**: Automatically identifies optimal lighting times (±1 hour from sunrise/sunset)\n- **7-Day Forecast**: Hourly weather data for the next week\n- **Location Detection**: Auto-detects your location or allows manual coordinate input\n- **Mobile Responsive**: Works great on all devices\n\n### Photography Conditions\n\n- **Excellent** (☀️): <20% cloud cover - Perfect for most photography\n- **Very Good** (🌤️): 20-40% cloud cover - Great conditions with some interesting clouds\n- **Good** (⛅): 40-60% cloud cover - Good for dramatic skies\n- **Fair** (☁️): 60-80% cloud cover - Overcast but workable\n- **Poor** (🌧️): >80% cloud cover - Limited lighting options\n- **Golden Hour** (🌅): Special highlighting for optimal portrait/landscape times\n\n### API Endpoints\n\n- `GET /` - Main dashboard\n- `GET /api/weather?lat={lat}&lon={lon}` - Weather data with photography insights\n- `GET /api/location` - Auto-detect location from IP",[210],{"_143":190,"_99":276,"_104":481,"_146":132,"_217":482},["D",1748554469713],[483],{"_102":484,"_146":132,"_143":190,"_95":189,"_154":485,"_152":193,"_99":486,"_145":174,"_104":481,"_147":276,"_156":-5,"_149":27,"_155":27,"_98":487},"b3e75b9c-3cd4-11f0-a936-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface WeatherData {\n hourly: {\n time: string[];\n temperature2m: number[];\n cloudCover: number[];\n cloudCoverLow: number[];\n cloudCoverMid: number[];\n cloudCoverHigh: number[];\n surfacePressure: number[];\n visibility: number[];\n };\n daily: {\n time: string[];\n sunrise: string[];\n sunset: string[];\n };\n photography_insights: Array<{\n time: string;\n condition: string;\n score: number;\n cloudCover: number;\n visibility: number;\n temperature: number;\n isGoldenHour: boolean;\n }>;\n timezone: string;\n latitude: number;\n longitude: number;\n}\n\ninterface Location {\n lat: number;\n lon: number;\n city: string;\n country: string;\n}\n\nfunction App() {\n const [weatherData, setWeatherData] = useState(null);\n const [location, setLocation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [customLocation, setCustomLocation] = useState(\"\");\n const [showLegend, setShowLegend] = useState(false);\n\n useEffect(() => {\n loadInitialData();\n }, []);\n\n const loadInitialData = async () => {\n try {\n setLoading(true);\n \n // Get location first\n const locationResponse = await fetch(\"/api/location\");\n const locationData = await locationResponse.json();\n setLocation(locationData);\n \n // Then get weather data\n await fetchWeatherData(locationData.lat, locationData.lon);\n } catch (err) {\n setError(\"Failed to load weather data\");\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWeatherData = async (lat: number, lon: number) => {\n const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setWeatherData(data);\n };\n\n const handleLocationSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!customLocation.trim()) return;\n \n try {\n setLoading(true);\n setError(null);\n \n const coords = customLocation.split(\",\").map(s => parseFloat(s.trim()));\n \n if (coords.length === 2 && !isNaN(coords[0]) && !isNaN(coords[1])) {\n await fetchWeatherData(coords[0], coords[1]);\n setLocation({\n lat: coords[0],\n lon: coords[1],\n city: \"Custom Location\",\n country: \"\"\n });\n } else {\n setError(\"Enter coordinates as: latitude, longitude (e.g., 52.3676, 4.9041)\");\n }\n } catch (err) {\n setError(\"Failed to fetch weather for this location\");\n } finally {\n setLoading(false);\n }\n };\n\n const getConditionEmoji = (condition: string) => {\n switch (condition) {\n case \"excellent\": return \"☀️\";\n case \"very-good\": return \"🌤️\";\n case \"good\": return \"⛅\";\n case \"fair\": return \"☁️\";\n case \"poor\": return \"🌧️\";\n case \"golden-hour\": return \"🌅\";\n default: return \"🌤️\";\n }\n };\n\n const formatTime = (timeString: string) => {\n const date = new Date(timeString);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const formatDate = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n const tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n \n if (date.toDateString() === today.toDateString()) {\n return \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n return \"Tomorrow\";\n } else {\n return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });\n }\n };\n\n const isToday = (timeString: string) => {\n const date = new Date(timeString);\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const groupByDay = (insights: WeatherData['photography_insights']) => {\n const grouped: { [key: string]: typeof insights } = {};\n \n insights.forEach(insight => {\n const date = new Date(insight.time).toDateString();\n if (!grouped[date]) {\n grouped[date] = [];\n }\n grouped[date].push(insight);\n });\n \n return grouped;\n };\n\n if (loading) {\n return (\n

Loading weather...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Compact Header */}\n

\n 📸 Photo Weather\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-blue-500 text-white px-2 py-1 rounded text-xs hover:bg-blue-600\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n

\n \n {/* Location Input */}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

🌧️ Poor

🌅 Golden

\n )}\n\n {/* Dense Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => (\n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter(h => h.score >= 8).length} good hours\n

\n \n {/* Hourly Grid - Show every hour but more compact */}\n

\n {dayInsights.map((insight, index) => (\n \n

\n {formatTime(insight.time)}\n

\n {getConditionEmoji(insight.condition)}\n

\n {Math.round(insight.temperature)}°\n

\n ☁️{insight.cloudCover}%\n

\n ))}\n

\n\n {/* Day Summary */}\n

\n \n Best: {formatTime(dayInsights.reduce((best, current) => \n current.score > best.score ? current : best\n ).time)}\n \n \n Golden hours: {dayInsights.filter(h => h.isGoldenHour).length}\n \n \n Avg score: {(dayInsights.reduce((sum, h) => sum + h.score, 0) / dayInsights.length).toFixed(1)}\n \n

\n ))}\n

\n\n {/* Footer */}\n

\n Tap any hour for details • Data from Open-Meteo KNMI\n

\n \n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",1,[173,189],{"_143":200,"_99":285,"_104":489,"_146":132,"_217":490},["D",1748554420656],[491],{"_102":492,"_146":132,"_143":200,"_95":199,"_154":493,"_152":183,"_99":486,"_145":174,"_104":489,"_147":285,"_156":-5,"_149":27,"_155":27,"_98":494},"96a501b0-3cd4-11f0-997d-9e149126039e","/* Dense mobile-first photography weather dashboard */\n\n.weather-card {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.hour-card {\n min-height: 80px;\n transition: all 0.2s ease;\n}\n\n.hour-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.condition-excellent {\n background: linear-gradient(135deg, #10b981, #059669);\n color: white;\n}\n\n.condition-very-good {\n background: linear-gradient(135deg, #22c55e, #16a34a);\n color: white;\n}\n\n.condition-good {\n background: linear-gradient(135deg, #eab308, #ca8a04);\n color: white;\n}\n\n.condition-fair {\n background: linear-gradient(135deg, #f97316, #ea580c);\n color: white;\n}\n\n.condition-poor {\n background: linear-gradient(135deg, #ef4444, #dc2626);\n color: white;\n}\n\n.condition-golden-hour {\n background: linear-gradient(135deg, #f59e0b, #d97706);\n color: white;\n box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);\n animation: goldenGlow 2s ease-in-out infinite alternate;\n}\n\n.score-bar {\n height: 3px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.score-fill {\n height: 100%;\n background: rgba(255, 255, 255, 0.8);\n transition: width 0.3s ease;\n}\n\n@keyframes goldenGlow {\n from {\n box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);\n }\n to {\n box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);\n }\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Compact text styles */\n.text-2xs {\n font-size: 0.625rem;\n line-height: 0.75rem;\n}\n\n.text-3xs {\n font-size: 0.5rem;\n line-height: 0.625rem;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .hour-card {\n min-height: 70px;\n }\n \n .container {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n}\n\n/* Today highlight */\n.today-highlight {\n border: 2px solid #3b82f6;\n box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);\n}\n\n/* Compact legend */\n.legend-item {\n padding: 0.375rem 0.5rem;\n border-radius: 0.375rem;\n font-size: 0.75rem;\n text-align: center;\n min-width: 60px;\n}",[173,199],"page","hasNext","routes/_app","actionData","errors"]

History