Météo en Turquie : prévisions météo instantanées à 7 jours

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 October 2025

Animation de chargement CSS Structure HTML

18 July 2025

<!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>

Météo en Turquie : prévisions météo instantanées à 7 jours

Recommandé

Animation de chargement CSS Structure HTML

Illusion de défilement infini

CONVERTIR L'IMAGE EN 3D

HTML

CSS

JS

Recommandé

Animation de chargement CSS Structure HTML

Illusion de défilement infini

CONVERTIR L'IMAGE EN 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS