Türkiye Hava Durumu: Anlık, 7 Günlük Hava Tahmini

1,078 Metehan

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Türkiye Hava Durumu | Anlık ve 7 Günlük Tahminler</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#1d4ed8',
                        accent: '#f59e0b',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        danger: '#ef4444',
                        success: '#10b981'
                    },
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f0f9ff;
            transition: all 0.3s ease;
        }
        
        .weather-card {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .chart-container {
            height: 250px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        .rain-animation {
            position: relative;
            overflow: hidden;
        }
        
        .rain-animation::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30,10 L30,20 M40,15 L40,25 M50,12 L50,22 M60,18 L60,28 M70,14 L70,24" stroke="%23ffffff" stroke-width="1" /></svg>') repeat;
            opacity: 0.5;
            animation: rain 1s linear infinite;
        }
        
        @keyframes rain {
            from { transform: translateY(-100%); }
            to { transform: translateY(100%); }
        }
        
        .sun-animation {
            position: relative;
        }
        
        .sun-animation::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #fde047 0%, #f59e0b 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 20px #fde047, 0 0 40px #fde047;
            animation: pulse 2s infinite alternate;
        }
        
        @keyframes pulse {
            from { box-shadow: 0 0 20px #fde047, 0 0 40px #fde047; }
            to { box-shadow: 0 0 30px #fde047, 0 0 60px #fde047; }
        }
        
        .cloud-animation {
            position: relative;
        }
        
        .cloud-animation::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 20px;
            width: 60px;
            height: 20px;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 
                20px -10px 0 0 #ffffff,
                40px 0 0 0 #ffffff;
            opacity: 0.8;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        .snow-animation {
            position: relative;
            overflow: hidden;
        }
        
        .snow-animation::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="10" r="1" fill="%23ffffff"/><circle cx="40" cy="15" r="1" fill="%23ffffff"/><circle cx="60" cy="5" r="1" fill="%23ffffff"/><circle cx="80" cy="20" r="1" fill="%23ffffff"/><circle cx="30" cy="30" r="1" fill="%23ffffff"/><circle cx="50" cy="25" r="1" fill="%23ffffff"/><circle cx="70" cy="35" r="1" fill="%23ffffff"/><circle cx="90" cy="15" r="1" fill="%23ffffff"/></svg>') repeat;
            opacity: 0.7;
            animation: snow 5s linear infinite;
        }
        
        @keyframes snow {
            from { transform: translateY(-100%); }
            to { transform: translateY(100%); }
        }
        
        .thunder-animation {
            position: relative;
        }
        
        .thunder-animation::after {
            content: "⚡";
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            animation: flash 1.5s infinite;
            opacity: 0;
        }
        
        @keyframes flash {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            border-top-color: #3b82f6;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        
        .dark-mode {
            background-color: #0f172a;
            color: #f8fafc;
        }
        
        .dark-mode .weather-card {
            background: rgba(30, 41, 59, 0.7);
            border-color: rgba(100, 116, 139, 0.3);
        }
        
        .dark-mode .bg-white {
            background-color: #1e293b !important;
            color: #f8fafc !important;
        }
        
        .dark-mode .text-gray-800 {
            color: #f8fafc !important;
        }
        
        .dark-mode .bg-gray-100 {
            background-color: #334155 !important;
        }
        
        .dark-mode .border-gray-200 {
            border-color: #334155 !important;
        }
    </style>
</head>
<body class="min-h-screen">
    
    <header class="bg-gradient-to-r from-primary to-secondary text-white shadow-lg">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-cloud-sun text-2xl"></i>
                    <h1 class="text-xl font-bold">Türkiye Hava Durumu</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="unit-toggle" class="px-3 py-1 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">
                        <span class="unit-c">°C</span>/<span class="unit-f">°F</span>
                    </button>
                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
                        <i class="fas fa-moon"></i>
                    </button>
                    <div class="relative">
                        <button id="notification-btn" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
                            <i class="fas fa-bell"></i>
                        </button>
                        <div class="notification-badge hidden">3</div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6 flex flex-col md:flex-row items-center justify-between">
                <div class="relative w-full md:w-1/2 mb-4 md:mb-0">
                    <input type="text" id="city-search" placeholder="Şehir ara (örn: İstanbul, Ankara)" 
                           class="w-full px-4 py-3 rounded-full bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-2 focus:ring-white">
                    <button id="search-btn" class="absolute right-3 top-3 text-white">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <button id="location-btn" class="flex items-center space-x-2 px-4 py-3 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">
                    <i class="fas fa-location-arrow"></i>
                    <span>Konumumu Kullan</span>
                </button>
            </div>
        </div>
    </header>

<main class="container mx-auto px-4 py-8">
        
        <div id="current-weather" class="weather-card p-6 mb-8 bg-white rounded-xl shadow-md fade-in">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <h2 class="text-2xl font-bold text-gray-800" id="current-city">Yükleniyor...</h2>
                    <p class="text-gray-600" id="current-date">-- --, ----</p>
                    <div class="flex items-center justify-center md:justify-start mt-2">
                        <div class="text-5xl font-bold text-primary mr-2" id="current-temp">--°</div>
                        <div class="flex flex-col">
                            <span class="text-gray-600" id="current-condition">--</span>
                            <span class="text-sm text-gray-500">Hissedilen: <span id="current-feels-like">--°</span></span>
                        </div>
                    </div>
                </div>
                <div class="relative w-32 h-32" id="weather-icon-container">
                    <div class="loading-spinner"></div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                <div class="bg-gray-100 p-4 rounded-lg text-center">
                    <i class="fas fa-wind text-primary mb-1"></i>
                    <p class="text-sm text-gray-600">Rüzgar</p>
                    <p class="font-semibold" id="current-wind">-- km/s</p>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg text-center">
                    <i class="fas fa-tint text-primary mb-1"></i>
                    <p class="text-sm text-gray-600">Nem</p>
                    <p class="font-semibold" id="current-humidity">--%</p>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg text-center">
                    <i class="fas fa-sun text-primary mb-1"></i>
                    <p class="text-sm text-gray-600">UV</p>
                    <p class="font-semibold" id="current-uv">--</p>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg text-center">
                    <i class="fas fa-cloud-rain text-primary mb-1"></i>
                    <p class="text-sm text-gray-600">Yağış</p>
                    <p class="font-semibold" id="current-precipitation">--%</p>
                </div>
            </div>
        </div>
        
        
        <h3 class="text-xl font-bold text-gray-800 mb-4">Saatlik Tahmin</h3>
        <div class="weather-card p-6 mb-8 bg-white rounded-xl shadow-md overflow-x-auto">
            <div id="hourly-forecast" class="flex space-x-4 pb-2">
                
                <div class="loading-spinner mx-auto"></div>
            </div>
        </div>
        
        
        <h3 class="text-xl font-bold text-gray-800 mb-4">7 Günlük Tahmin</h3>
        <div class="weather-card p-6 mb-8 bg-white rounded-xl shadow-md">
            <div id="daily-forecast" class="space-y-4">
                
                <div class="loading-spinner mx-auto"></div>
            </div>
        </div>
        
        
        <h3 class="text-xl font-bold text-gray-800 mb-4">Hava Durumu Grafikleri</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="weather-card p-6 bg-white rounded-xl shadow-md">
                <h4 class="font-semibold text-gray-700 mb-4">Sıcaklık (°C)</h4>
                <div class="chart-container">
                    <canvas id="temp-chart"></canvas>
                </div>
            </div>
            <div class="weather-card p-6 bg-white rounded-xl shadow-md">
                <h4 class="font-semibold text-gray-700 mb-4">Yağış Olasılığı (%)</h4>
                <div class="chart-container">
                    <canvas id="precip-chart"></canvas>
                </div>
            </div>
        </div>
        
        
        <h3 class="text-xl font-bold text-gray-800 mb-4">Türkiye'nin 81 İli</h3>
        <div class="weather-card p-6 bg-white rounded-xl shadow-md mb-8">
            <div class="relative mb-4">
                <input type="text" id="city-filter" placeholder="Şehir filtrele..." 
                       class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3" id="cities-grid">
                
                <div class="loading-spinner mx-auto col-span-full"></div>
            </div>
        </div>
    </main>

<footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-cloud-sun mr-2"></i>
                        Türkiye Hava Durumu
                    </h2>
                    <p class="text-gray-400 mt-1">Anlık ve 7 günlük hava durumu tahminleri</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 flex flex-col md:flex-row justify-between">
                <div class="text-gray-400 text-sm mb-4 md:mb-0">
                    © 2023 Türkiye Hava Durumu. Tüm hakları saklıdır.
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">Gizlilik Politikası</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">Kullanım Şartları</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">İletişim</a>
                </div>
            </div>
        </div>
    </footer>

<div id="notification-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
        <div class="bg-white dark:bg-dark rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h3 class="text-lg font-semibold">Hava Durumu Uyarıları</h3>
                <button id="close-notification" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-4" id="notification-content">
                
                <div class="p-3 rounded-lg bg-blue-50 dark:bg-gray-700 mb-3">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fas fa-exclamation-circle text-blue-500"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <p class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                İstanbul için yağmur uyarısı
                            </p>
                            <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
                                Bugün öğleden sonra %80 yağmur bekleniyor.
                            </p>
                            <p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
                                2 saat önce
                            </p>
                        </div>
                    </div>
                </div>
                <div class="p-3 rounded-lg bg-yellow-50 dark:bg-gray-700 mb-3">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fas fa-temperature-high text-yellow-500"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                                Ankara için sıcak hava uyarısı
                            </p>
                            <p class="mt-1 text-sm text-yellow-700 dark:text-yellow-300">
                                Yarın 35°C'yi aşan sıcaklıklar bekleniyor.
                            </p>
                            <p class="mt-1 text-xs text-yellow-600 dark:text-yellow-400">
                                5 saat önce
                            </p>
                        </div>
                    </div>
                </div>
                <div class="p-3 rounded-lg bg-red-50 dark:bg-gray-700">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fas fa-wind text-red-500"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <p class="text-sm font-medium text-red-800 dark:text-red-200">
                                İzmir için fırtına uyarısı
                            </p>
                            <p class="mt-1 text-sm text-red-700 dark:text-red-300">
                                Cuma günü 80 km/s üzerinde rüzgar bekleniyor.
                            </p>
                            <p class="mt-1 text-xs text-red-600 dark:text-red-400">
                                Dün
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-right">
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-secondary transition">
                    Tümünü Oku
                </button>
            </div>
        </div>
    </div>

// DOM Elements
        const currentCityEl = document.getElementById('current-city');
        const currentDateEl = document.getElementById('current-date');
        const currentTempEl = document.getElementById('current-temp');
        const currentFeelsLikeEl = document.getElementById('current-feels-like');
        const currentConditionEl = document.getElementById('current-condition');
        const currentWindEl = document.getElementById('current-wind');
        const currentHumidityEl = document.getElementById('current-humidity');
        const currentUvEl = document.getElementById('current-uv');
        const currentPrecipitationEl = document.getElementById('current-precipitation');
        const weatherIconContainer = document.getElementById('weather-icon-container');
        const hourlyForecastEl = document.getElementById('hourly-forecast');
        const dailyForecastEl = document.getElementById('daily-forecast');
        const citiesGridEl = document.getElementById('cities-grid');
        const citySearchEl = document.getElementById('city-search');
        const searchBtnEl = document.getElementById('search-btn');
        const locationBtnEl = document.getElementById('location-btn');
        const unitToggleEl = document.getElementById('unit-toggle');
        const unitCEl = document.querySelector('.unit-c');
        const unitFEl = document.querySelector('.unit-f');
        const themeToggleEl = document.getElementById('theme-toggle');
        const notificationBtnEl = document.getElementById('notification-btn');
        const notificationModalEl = document.getElementById('notification-modal');
        const closeNotificationEl = document.getElementById('close-notification');
        const notificationBadgeEl = document.querySelector('.notification-badge');
        const cityFilterEl = document.getElementById('city-filter');

// State
        let isCelsius = true;
        let isDarkMode = false;
        let tempChart, precipChart;

// Initialize the app
        function init() {
            loadWeatherData();
            setupEventListeners();
            createCharts();
        }

// Load weather data
        function loadWeatherData() {
            // In a real app, this would fetch from an API
            displayCurrentWeather(mockWeatherData.current);
            displayHourlyForecast(mockWeatherData.hourly);
            displayDailyForecast(mockWeatherData.daily);
            displayCities(mockWeatherData.cities);
        }

// Display current weather
        function displayCurrentWeather(data) {
            currentCityEl.textContent = data.city;
            currentDateEl.textContent = data.date;
            currentTempEl.textContent = ${data.temp}°;
            currentFeelsLikeEl.textContent = ${data.feels_like}°;
            currentConditionEl.textContent = data.condition;
            currentWindEl.textContent = ${data.wind} km/s;
            currentHumidityEl.textContent = ${data.humidity}%;
            currentUvEl.textContent = data.uv;
            currentPrecipitationEl.textContent = ${data.precipitation}%;
            
            // Clear loading spinner
            weatherIconContainer.innerHTML = '';
            
            // Add weather icon with animation
            const iconEl = document.createElement('div');
            iconEl.className = 'w-full h-full flex items-center justify-center';
            
            if (data.icon === 'sunny') {
                iconEl.innerHTML = '<i class="fas fa-sun text-6xl text-accent"></i>';
                iconEl.classList.add('sun-animation');
            } else if (data.icon === 'partly-cloudy') {
                iconEl.innerHTML = '<i class="fas fa-cloud-sun text-6xl text-gray-500"></i>';
                iconEl.classList.add('cloud-animation');
            } else if (data.icon === 'cloudy') {
                iconEl.innerHTML = '<i class="fas fa-cloud text-6xl text-gray-400"></i>';
                iconEl.classList.add('cloud-animation');
            } else if (data.icon === 'rain') {
                iconEl.innerHTML = '<i class="fas fa-cloud-rain text-6xl text-primary"></i>';
                iconEl.classList.add('rain-animation');
            } else if (data.icon === 'snow') {
                iconEl.innerHTML = '<i class="fas fa-snowflake text-6xl text-blue-200"></i>';
                iconEl.classList.add('snow-animation');
            } else if (data.icon === 'thunder') {
                iconEl.innerHTML = '<i class="fas fa-bolt text-6xl text-yellow-400"></i>';
                iconEl.classList.add('thunder-animation');
            }
            
            weatherIconContainer.appendChild(iconEl);
        }

// Display hourly forecast
        function displayHourlyForecast(data) {
            hourlyForecastEl.innerHTML = '';
            
            data.forEach(hour => {
                const hourEl = document.createElement('div');
                hourEl.className = 'flex flex-col items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-lg min-w-[80px] fade-in';
                
                let iconClass = '';
                if (hour.icon === 'sunny') iconClass = 'fas fa-sun text-accent';
                else if (hour.icon === 'partly-cloudy') iconClass = 'fas fa-cloud-sun text-gray-500';
                else if (hour.icon === 'cloudy') iconClass = 'fas fa-cloud text-gray-400';
                else if (hour.icon === 'rain') iconClass = 'fas fa-cloud-rain text-primary';
                
                hourEl.innerHTML = `
                    <span class="font-medium text-sm">${hour.time}</span>
                    <i class="${iconClass} text-2xl my-2"></i>
                    <span class="font-bold">${hour.temp}°</span>
                    <span class="text-xs text-gray-500 dark:text-gray-300 mt-1">${hour.precip}%</span>
                `;
                
                hourlyForecastEl.appendChild(hourEl);
            });
        }

// Display daily forecast
        function displayDailyForecast(data) {
            dailyForecastEl.innerHTML = '';
            
            data.forEach(day => {
                const dayEl = document.createElement('div');
                dayEl.className = 'flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded-lg fade-in';
                
                let iconClass = '';
                if (day.icon === 'sunny') iconClass = 'fas fa-sun text-accent';
                else if (day.icon === 'partly-cloudy') iconClass = 'fas fa-cloud-sun text-gray-500';
                else if (day.icon === 'cloudy') iconClass = 'fas fa-cloud text-gray-400';
                else if (day.icon === 'rain') iconClass = 'fas fa-cloud-rain text-primary';
                
                dayEl.innerHTML = `
                    <div class="flex items-center space-x-3">
                        <span class="font-medium w-12">${day.day}</span>
                        <span class="text-gray-500 text-sm">${day.date}</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <i class="${iconClass} text-xl"></i>
                        <div class="flex space-x-3">
                            <span class="font-bold">${day.high}°</span>
                            <span class="text-gray-500">${day.low}°</span>
                        </div>
                        <span class="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full">
                            ${day.precip}%
                        </span>
                    </div>
                `;
                
                dailyForecastEl.appendChild(dayEl);
            });
        }

// Display cities
        function displayCities(cities) {
            citiesGridEl.innerHTML = '';
            
            cities.forEach(city => {
                const cityEl = document.createElement('div');
                cityEl.className = 'p-3 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition fade-in';
                
                let iconClass = '';
                if (city.icon === 'sunny') iconClass = 'fas fa-sun text-accent';
                else if (city.icon === 'partly-cloudy') iconClass = 'fas fa-cloud-sun text-gray-500';
                else if (city.icon === 'cloudy') iconClass = 'fas fa-cloud text-gray-400';
                else if (city.icon === 'rain') iconClass = 'fas fa-cloud-rain text-primary';
                
                cityEl.innerHTML = `
                    <div class="flex justify-between items-start">
                        <div>
                            <h4 class="font-medium">${city.name}</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-300">${city.condition}</p>
                        </div>
                        <i class="${iconClass} text-xl"></i>
                    </div>
                    <div class="mt-2 text-right">
                        <span class="text-xl font-bold">${city.temp}°</span>
                    </div>
                `;
                
                cityEl.addEventListener('click', () => {
                    // In a real app, this would fetch weather for the selected city
                    mockWeatherData.current.city = city.name;
                    mockWeatherData.current.temp = city.temp;
                    mockWeatherData.current.condition = city.condition;
                    mockWeatherData.current.icon = city.icon;
                    displayCurrentWeather(mockWeatherData.current);
                    
                    // Scroll to top
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
                
                citiesGridEl.appendChild(cityEl);
            });
        }

// Create charts
        function createCharts() {
            const tempCtx = document.getElementById('temp-chart').getContext('2d');
            const precipCtx = document.getElementById('precip-chart').getContext('2d');
            
            // Temperature chart
            tempChart = new Chart(tempCtx, {
                type: 'line',
                data: {
                    labels: ['Bugün', 'Yarın', 'Cmt', 'Paz', 'Pzt', 'Sal', 'Çar'],
                    datasets: [
                        {
                            label: 'Yüksek',
                            data: [31, 33, 34, 32, 29, 27, 28],
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: 'Düşük',
                            data: [22, 23, 24, 23, 21, 20, 20],
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
            
            // Precipitation chart
            precipChart = new Chart(precipCtx, {
                type: 'bar',
                data: {
                    labels: ['Bugün', 'Yarın', 'Cmt', 'Paz', 'Pzt', 'Sal', 'Çar'],
                    datasets: [{
                        label: 'Yağış Olasılığı (%)',
                        data: [20, 10, 0, 30, 70, 80, 30],
                        backgroundColor: 'rgba(59, 130, 246, 0.7)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
        }

// Setup event listeners
        function setupEventListeners() {
            // Search button
            searchBtnEl.addEventListener('click', () => {
                const city = citySearchEl.value.trim();
                if (city) {
                    // In a real app, this would fetch weather for the searched city
                    mockWeatherData.current.city = city;
                    displayCurrentWeather(mockWeatherData.current);
                    citySearchEl.value = '';
                }
            });
            
            // Location button
            locationBtnEl.addEventListener('click', () => {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        (position) => {
                            // In a real app, this would fetch weather for the current location
                            mockWeatherData.current.city = "Konumunuz";
                            displayCurrentWeather(mockWeatherData.current);
                            
                            // Show notification
                            showNotification('Konumunuz başarıyla alındı', 'Hava durumu bilgileri konumunuza göre güncellendi.', 'success');
                        },
                        (error) => {
                            showNotification('Konum hatası', 'Konum bilgisi alınamadı. Lütfen izinleri kontrol edin.', 'danger');
                        }
                    );
                } else {
                    showNotification('Tarayıcı desteği', 'Tarayıcınız konum bilgisini desteklemiyor.', 'danger');
                }
            });
            
            // Unit toggle
            unitToggleEl.addEventListener('click', () => {
                isCelsius = !isCelsius;
                
                if (isCelsius) {
                    unitCEl.classList.add('font-bold');
                    unitFEl.classList.remove('font-bold');
                    
                    // Convert back to Celsius (mock data is already in Celsius)
                    currentTempEl.textContent = ${mockWeatherData.current.temp}°;
                    currentFeelsLikeEl.textContent = ${mockWeatherData.current.feels_like}°;
                    
                    // Update hourly forecast
                    const hourlyItems = hourlyForecastEl.querySelectorAll('div');
                    hourlyItems.forEach((item, index) => {
                        const tempEl = item.querySelector('span.font-bold');
                        if (tempEl) {
                            tempEl.textContent = ${mockWeatherData.hourly[index].temp}°;
                        }
                    });
                    
                    // Update daily forecast
                    const dailyItems = dailyForecastEl.querySelectorAll('div');
                    dailyItems.forEach((item, index) => {
                        const temps = item.querySelectorAll('span.font-bold, span.text-gray-500');
                        if (temps.length >= 2) {
                            temps[0].textContent = ${mockWeatherData.daily[index].high}°;
                            temps[1].textContent = ${mockWeatherData.daily[index].low}°;
                        }
                    });
                    
                    // Update cities
                    const cityItems = citiesGridEl.querySelectorAll('div');
                    cityItems.forEach((item, index) => {
                        const tempEl = item.querySelector('span.font-bold');
                        if (tempEl) {
                            tempEl.textContent = ${mockWeatherData.cities[index].temp}°;
                        }
                    });
                } else {
                    unitCEl.classList.remove('font-bold');
                    unitFEl.classList.add('font-bold');
                    
                    // Convert to Fahrenheit
                    const currentTempF = Math.round(mockWeatherData.current.temp * 9/5 + 32);
                    const currentFeelsLikeF = Math.round(mockWeatherData.current.feels_like * 9/5 + 32);
                    currentTempEl.textContent = ${currentTempF}°;
                    currentFeelsLikeEl.textContent = ${currentFeelsLikeF}°;
                    
                    // Update hourly forecast
                    const hourlyItems = hourlyForecastEl.querySelectorAll('div');
                    hourlyItems.forEach((item, index) => {
                        const tempEl = item.querySelector('span.font-bold');
                        if (tempEl) {
                            const tempF = Math.round(mockWeatherData.hourly[index].temp * 9/5 + 32);
                            tempEl.textContent = ${tempF}°;
                        }
                    });
                    
                    // Update daily forecast
                    const dailyItems = dailyForecastEl.querySelectorAll('div');
                    dailyItems.forEach((item, index) => {
                        const temps = item.querySelectorAll('span.font-bold, span.text-gray-500');
                        if (temps.length >= 2) {
                            const highF = Math.round(mockWeatherData.daily[index].high * 9/5 + 32);
                            const lowF = Math.round(mockWeatherData.daily[index].low * 9/5 + 32);
                            temps[0].textContent = ${highF}°;
                            temps[1].textContent = ${lowF}°;
                        }
                    });
                    
                    // Update cities
                    const cityItems = citiesGridEl.querySelectorAll('div');
                    cityItems.forEach((item, index) => {
                        const tempEl = item.querySelector('span.font-bold');
                        if (tempEl) {
                            const tempF = Math.round(mockWeatherData.cities[index].temp * 9/5 + 32);
                            tempEl.textContent = ${tempF}°;
                        }
                    });
                }
            });
            
            // Theme toggle
            themeToggleEl.addEventListener('click', () => {
                isDarkMode = !isDarkMode;
                
                if (isDarkMode) {
                    document.body.classList.add('dark-mode');
                    themeToggleEl.innerHTML = '<i class="fas fa-sun"></i>';
                } else {
                    document.body.classList.remove('dark-mode');
                    themeToggleEl.innerHTML = '<i class="fas fa-moon"></i>';
                }
            });
            
            // Notification button
            notificationBtnEl.addEventListener('click', () => {
                notificationModalEl.classList.remove('hidden');
                notificationBadgeEl.classList.add('hidden');
            });
            
            // Close notification
            closeNotificationEl.addEventListener('click', () => {
                notificationModalEl.classList.add('hidden');
            });
            
            // City filter
            cityFilterEl.addEventListener('input', () => {
                const searchTerm = cityFilterEl.value.toLowerCase();
                const cityItems = citiesGridEl.querySelectorAll('div');
                
                cityItems.forEach(item => {
                    const cityName = item.querySelector('h4').textContent.toLowerCase();
                    if (cityName.includes(searchTerm)) {
                        item.classList.remove('hidden');
                    } else {
                        item.classList.add('hidden');
                    }
                });
            });
            
            // Allow Enter key for search
            citySearchEl.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    searchBtnEl.click();
                }
            });
        }

// Show notification
        function showNotification(title, message, type) {
            // In a real app, this would show a proper notification
            alert(${title}: ${message});
            
            // Update notification badge
            const currentCount = parseInt(notificationBadgeEl.textContent) || 0;
            notificationBadgeEl.textContent = currentCount + 1;
            notificationBadgeEl.classList.remove('hidden');
        }

// Initialize the app
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>

CSS