/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback, useMemo } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { motion, AnimatePresence } from "https://esm.sh/framer-motion"; // Turkish cities with their coordinates (now including all 81 cities) const TURKISH_CITIES = [ { name: "Adana", latitude: 36.9908, longitude: 35.3266 }, { name: "Adıyaman", latitude: 37.7648, longitude: 38.2786 }, { name: "Afyonkarahisar", latitude: 38.7572, longitude: 30.5371 }, { name: "Ağrı", latitude: 39.7167, longitude: 43.0500 }, { name: "Amasya", latitude: 40.6506, longitude: 35.8347 }, { name: "Ankara", latitude: 39.9334, longitude: 32.8597 }, { name: "Antalya", latitude: 36.8969, longitude: 30.7133 }, { name: "Artvin", latitude: 41.1833, longitude: 41.8167 }, { name: "Aydın", latitude: 37.8448, longitude: 27.8361 }, { name: "Balıkesir", latitude: 39.6484, longitude: 27.8851 }, { name: "Bilecik", latitude: 40.0500, longitude: 29.9833 }, { name: "Bingöl", latitude: 38.8852, longitude: 40.4890 }, { name: "Bitlis", latitude: 38.4025, longitude: 42.1225 }, { name: "Bolu", latitude: 40.7372, longitude: 31.6089 }, { name: "Burdur", latitude: 37.7167, longitude: 30.2833 }, { name: "Bursa", latitude: 40.1824, longitude: 29.0600 }, { name: "Çanakkale", latitude: 40.1553, longitude: 26.4142 }, { name: "Çankırı", latitude: 40.6000, longitude: 33.6167 }, { name: "Çorum", latitude: 40.5500, longitude: 34.9500 }, { name: "Denizli", latitude: 37.7772, longitude: 29.0909 }, { name: "Diyarbakır", latitude: 37.9144, longitude: 40.2136 }, { name: "Edirne", latitude: 41.6818, longitude: 26.5623 }, { name: "Elazığ", latitude: 38.6742, longitude: 39.2167 }, { name: "Erzincan", latitude: 39.7500, longitude: 39.5000 }, { name: "Erzurum", latitude: 39.9000, longitude: 41.2667 }, { name: "Eskişehir", latitude: 39.7767, longitude: 30.5256 }, { name: "Gaziantep", latitude: 37.0660, longitude: 37.3781 }, { name: "Giresun", latitude: 40.9128, longitude: 38.3895 }, { name: "Gümüşhane", latitude: 40.4600, longitude: 39.4833 }, { name: "Hakkâri", latitude: 37.5739, longitude: 43.7425 }, { name: "Hatay", latitude: 36.4018, longitude: 36.3498 }, { name: "Isparta", latitude: 37.7667, longitude: 30.5667 }, { name: "Mersin", latitude: 36.8121, longitude: 34.6428 }, { name: "İstanbul", latitude: 41.0082, longitude: 28.9784 }, { name: "İzmir", latitude: 38.4237, longitude: 27.1428 }, { name: "Kars", latitude: 40.6167, longitude: 43.1000 }, { name: "Kastamonu", latitude: 41.3881, longitude: 33.7828 }, { name: "Kayseri", latitude: 38.7333, longitude: 35.4833 }, { name: "Kırklareli", latitude: 41.7333, longitude: 27.2167 }, { name: "Kırşehir", latitude: 39.1500, longitude: 34.1667 }, { name: "Kocaeli", latitude: 40.7667, longitude: 29.9167 }, { name: "Konya", latitude: 37.8667, longitude: 32.4833 }, { name: "Kütahya", latitude: 39.4167, longitude: 29.9833 }, { name: "Malatya", latitude: 38.3552, longitude: 38.3095 }, { name: "Manisa", latitude: 38.6191, longitude: 27.4283 }, { name: "Kahramanmaraş", latitude: 37.5736, longitude: 36.9370 }, { name: "Mardin", latitude: 37.3215, longitude: 40.7353 }, { name: "Muğla", latitude: 37.2167, longitude: 28.3667 }, { name: "Muş", latitude: 38.7500, longitude: 41.5000 }, { name: "Nevşehir", latitude: 38.6242, longitude: 34.7167 }, { name: "Niğde", latitude: 37.9667, longitude: 34.6833 }, { name: "Ordu", latitude: 40.9839, longitude: 37.8764 }, { name: "Rize", latitude: 41.0200, longitude: 40.5236 }, { name: "Sakarya", latitude: 40.7667, longitude: 30.4000 }, { name: "Samsun", latitude: 41.2867, longitude: 36.3300 }, { name: "Siirt", latitude: 37.9333, longitude: 41.9500 }, { name: "Sinop", latitude: 42.0167, longitude: 35.1500 }, { name: "Sivas", latitude: 39.7500, longitude: 37.0167 }, { name: "Tekirdağ", latitude: 40.9833, longitude: 27.5167 }, { name: "Tokat", latitude: 40.3167, longitude: 36.5500 }, { name: "Trabzon", latitude: 41.0082, longitude: 39.7167 }, { name: "Tunceli", latitude: 39.1500, longitude: 39.5500 }, { name: "Şanlıurfa", latitude: 37.1673, longitude: 38.7938 }, { name: "Uşak", latitude: 38.6823, longitude: 29.4082 }, { name: "Van", latitude: 38.4891, longitude: 43.3830 }, { name: "Yozgat", latitude: 39.8181, longitude: 34.8147 }, { name: "Zonguldak", latitude: 41.4564, longitude: 31.7987 }, { name: "Aksaray", latitude: 38.3687, longitude: 34.0503 }, { name: "Bayburt", latitude: 40.2553, longitude: 40.2249 }, { name: "Karaman", latitude: 37.1756, longitude: 33.2287 }, { name: "Kırıkkale", latitude: 39.8468, longitude: 33.5228 }, { name: "Batman", latitude: 37.8964, longitude: 41.1380 }, { name: "Şırnak", latitude: 37.4187, longitude: 42.4603 }, { name: "Bartın", latitude: 41.6351, longitude: 32.3378 }, { name: "Ardahan", latitude: 41.1105, longitude: 42.7022 }, { name: "Iğdır", latitude: 39.8880, longitude: 44.0048 }, { name: "Yalova", latitude: 40.6500, longitude: 29.2667 }, { name: "Karabük", latitude: 41.2061, longitude: 32.6247 }, { name: "Kilis", latitude: 36.7167, longitude: 37.1167 }, { name: "Osmaniye", latitude: 37.0750, longitude: 36.2467 } ]; const WEATHER_CODES = { 0: { icon: "☀️", description: "Açık", color: "#FFD700" }, 1: { icon: "🌤️", description: "Çoğunlukla Açık", color: "#87CEEB" }, 2: { icon: "⛅", description: "Parçalı Bulutlu", color: "#B0E0E6" }, 3: { icon: "☁️", description: "Bulutlu", color: "#708090" }, 45: { icon: "🌫️", description: "Sisli", color: "#778899" }, 48: { icon: "🌫️", description: "Çok Sisli", color: "#696969" }, 51: { icon: "🌧️", description: "Hafif Çisinti", color: "#4682B4" }, 53: { icon: "🌧️", description: "Orta Çisinti", color: "#1E90FF" }, 55: { icon: "🌧️", description: "Yoğun Çisinti", color: "#00BFFF" }, 61: { icon: "🌧️", description: "Hafif Yağmur", color: "#87CEFA" }, 63: { icon: "🌧️", description: "Orta Yağmur", color: "#6495ED" }, 65: { icon: "🌧️", description: "Şiddetli Yağmur", color: "#4169E1" }, 71: { icon: "❄️", description: "Hafif Kar", color: "#F0F8FF" }, 73: { icon: "❄️", description: "Orta Kar", color: "#E6E6FA" }, 75: { icon: "❄️", description: "Yoğun Kar", color: "#F0FFFF" }, 77: { icon: "🌨️", description: "Kar Taneleri", color: "#B0E0E6" }, 80: { icon: "🌦️", description: "Hafif Sağanak", color: "#87CEEB" }, 81: { icon: "🌦️", description: "Orta Sağanak", color: "#00CED1" }, 82: { icon: "🌧️", description: "Şiddetli Sağanak", color: "#4682B4" }, 85: { icon: "🌨️", description: "Hafif Kar Sağanağı", color: "#B0E0E6" }, 86: { icon: "🌨️", description: "Yoğun Kar Sağanağı", color: "#E6E6FA" }, 95: { icon: "⛈️", description: "Gökgürültülü Fırtına", color: "#483D8B" }, 96: { icon: "⛈️", description: "Hafif Dolu", color: "#4682B4" }, 99: { icon: "⛈️", description: "Şiddetli Dolu", color: "#191970" } }; function WeatherApp() { const [weather, setWeather] = useState(null); const [location, setLocation] = useState({ latitude: 41.0082, longitude: 28.9784, name: "İstanbul" }); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchQuery, setSearchQuery] = useState(""); const [suggestions, setSuggestions] = useState([]); const [isDarkMode, setIsDarkMode] = useState(() => { const savedTheme = localStorage.getItem('darkMode'); return savedTheme ? JSON.parse(savedTheme) : false; }); const theme = useMemo(() => ({ light: { background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)', text: '#333', cardBackground: 'rgba(255,255,255,0.7)', inputBackground: '#fff', inputBorder: '#ddd' }, dark: { background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)', text: '#ecf0f1', cardBackground: 'rgba(44, 62, 80, 0.8)', inputBackground: '#2c3e50', inputBorder: '#34495e' } }), []); const currentTheme = isDarkMode ? theme.dark : theme.light; const fetchWeather = useCallback(async (lat, lon, name) => { try { setLoading(true); setError(null); const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,wind_speed_10m,weather_code,apparent_temperature&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset,uv_index_max&timezone=Europe%2FIstanbul&forecast_days=7` ); if (!response.ok) { throw new Error('Hava durumu bilgileri alınamadı'); } const data = await response.json(); setWeather(data); setLocation({ latitude: lat, longitude: lon, name }); } catch (err) { setError(err.message); console.error("Hava durumu hatası:", err); } finally { setLoading(false); } }, []); useEffect(() => { const controller = new AbortController(); fetchWeather(location.latitude, location.longitude, location.name); return () => controller.abort(); }, []); const toggleDarkMode = useCallback(() => { const newMode = !isDarkMode; setIsDarkMode(newMode); localStorage.setItem('darkMode', JSON.stringify(newMode)); }, [isDarkMode]); const handleSearch = useCallback((city) => { const foundCity = TURKISH_CITIES.find(c => c.name.toLowerCase() === city.toLowerCase() ); if (foundCity) { fetchWeather(foundCity.latitude, foundCity.longitude, foundCity.name); setSearchQuery(''); setSuggestions([]); } else { setError('Şehir bulunamadı'); } }, [fetchWeather]); const handleSearchInputChange = useCallback((e) => { const query = e.target.value; setSearchQuery(query); if (query.length > 0) { const filteredCities = TURKISH_CITIES.filter(city => city.name.toLowerCase().includes(query.toLowerCase()) ); setSuggestions(filteredCities); } else { setSuggestions([]); } }, []); const currentWeatherCode = weather ? weather.current.weather_code : 0; const currentWeatherDetails = WEATHER_CODES[currentWeatherCode]; return (

{suggestions.length > 0 && ( {suggestions.map((city) => ( handleSearch(city.name)} whileHover={{ backgroundColor: 'rgba(0,0,0,0.1)' }} style={{ padding: '10px', cursor: 'pointer' }} > {city.name} ))} )}

{isDarkMode ? '☀️' : '🌙'}

{error && (

{error}

)} {weather && ( <>

{location.name} Hava Durumu

{currentWeatherDetails.icon} {currentWeatherDetails.description}

🌡️ Sıcaklık: {weather.current.temperature_2m}°C

🌡️ Hissedilen: {weather.current.apparent_temperature}°C

💧 Nem: {weather.current.relative_humidity_2m}%

💨 Rüzgar: {weather.current.wind_speed_10m} km/s

Haftalık Tahmin

{weather.daily.time.map((date, index) => ( { const searchUrl = `https://www.google.com/search?q=${encodeURIComponent( `${location.name} ${new Date(date).toLocaleDateString('tr-TR', { year: 'numeric', month: 'long', day: 'numeric' })} hava durumu tahmini` )}`; window.open(searchUrl, '_blank'); }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} style={{ flex: '0 0 auto', width: '150px', textAlign: 'center', background: currentTheme.cardBackground, padding: '15px', borderRadius: '10px', scrollSnapAlign: 'center', cursor: 'pointer' }} >

📅 {new Date(date).toLocaleDateString('tr-TR', { weekday: 'short' })}

{WEATHER_CODES[weather.daily.weather_code[index]].icon}

🌡️ Max: {weather.daily.temperature_2m_max[index]}°C

🌡️ Min: {weather.daily.temperature_2m_min[index]}°C

))}

)} Kaynak Kodu ); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function handler(request: Request): Promise { return new Response(` Türkiye Hava Durumu

`, { headers: { "content-type": "text/html" } }); }

fehmi17