Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Türkiye Hava Durumu | Anlık ve 7 Günlük Tahminler</title>

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>

<h1 class="text-xl font-bold">Türkiye Hava Durumu</h1>

</div>

</button>

</button>

</button>

</div>

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

</div>

<span>Konumumu Kullan</span>

</button>

</div>

</header>

<h2 class="text-2xl font-bold text-gray-800" id="current-city">Yükleniyor...</h2>

<span class="text-sm text-gray-500">Hissedilen: <span id="current-feels-like">--°</span></span>

</div>

</div>

<p class="text-sm text-gray-600">Rüzgar</p>

</div>

</div>

</div>

<p class="text-sm text-gray-600">Yağış</p>

</div>

<h3 class="text-xl font-bold text-gray-800 mb-4">Saatlik Tahmin</h3>

</div>

<h3 class="text-xl font-bold text-gray-800 mb-4">7 Günlük Tahmin</h3>

</div>

<h3 class="text-xl font-bold text-gray-800 mb-4">Hava Durumu Grafikleri</h3>

<h4 class="font-semibold text-gray-700 mb-4">Sıcaklık (°C)</h4>

</div>

<h4 class="font-semibold text-gray-700 mb-4">Yağış Olasılığı (%)</h4>

</div>

<h3 class="text-xl font-bold text-gray-800 mb-4">Türkiye'nin 81 İli</h3>

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

</main>

Türkiye Hava Durumu

</h2>

<p class="text-gray-400 mt-1">Anlık ve 7 günlük hava durumu tahminleri</p>

</div>

</a>

</a>

</a>

</div>

</div>

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

</footer>

<h3 class="text-lg font-semibold">Hava Durumu Uyarıları</h3>

</button>

</div>

</div>

İstanbul için yağmur uyarısı

</p>

Bugün öğleden sonra %80 yağmur bekleniyor.

</p>

2 saat önce

</p>

</div>

</div>

Ankara için sıcak hava uyarısı

</p>

Yarın 35°C'yi aşan sıcaklıklar bekleniyor.

</p>

5 saat önce

</p>

</div>

</div>

İzmir için fırtına uyarısı

</p>

Cuma günü 80 km/s üzerinde rüzgar bekleniyor.

</p>

Dün

</p>

</div>

Tümünü Oku

</button>

</div>

// Mock data for demonstration

const mockWeatherData = {

current: {

city: "İstanbul",

date: "23 Haziran, 2023",

temp: 28,

feels_like: 30,

condition: "Parçalı Bulutlu",

wind: 12,

humidity: 65,

uv: 7,

precipitation: 20,

icon: "partly-cloudy"

},

hourly: [

{ time: "Şimdi", temp: 28, icon: "partly-cloudy", precip: 20 },

{ time: "13:00", temp: 29, icon: "sunny", precip: 10 },

{ time: "14:00", temp: 30, icon: "sunny", precip: 10 },

{ time: "15:00", temp: 31, icon: "sunny", precip: 10 },

{ time: "16:00", temp: 30, icon: "partly-cloudy", precip: 20 },

{ time: "17:00", temp: 29, icon: "partly-cloudy", precip: 30 },

{ time: "18:00", temp: 28, icon: "cloudy", precip: 40 },

{ time: "19:00", temp: 27, icon: "rain", precip: 60 },

{ time: "20:00", temp: 26, icon: "rain", precip: 80 },

{ time: "21:00", temp: 25, icon: "rain", precip: 70 },

{ time: "22:00", temp: 24, icon: "rain", precip: 50 },

{ time: "23:00", temp: 23, icon: "cloudy", precip: 30 }

],

daily: [

{ day: "Bugün", date: "23 Haz", high: 31, low: 22, icon: "partly-cloudy", precip: 20 },

{ day: "Yarın", date: "24 Haz", high: 33, low: 23, icon: "sunny", precip: 10 },

{ day: "Cmt", date: "25 Haz", high: 34, low: 24, icon: "sunny", precip: 0 },

{ day: "Paz", date: "26 Haz", high: 32, low: 23, icon: "partly-cloudy", precip: 30 },

{ day: "Pzt", date: "27 Haz", high: 29, low: 21, icon: "rain", precip: 70 },

{ day: "Sal", date: "28 Haz", high: 27, low: 20, icon: "rain", precip: 80 },

{ day: "Çar", date: "29 Haz", high: 28, low: 20, icon: "partly-cloudy", precip: 30 }

],

cities: [

{ name: "Adana", temp: 35, condition: "Güneşli", icon: "sunny" },

{ name: "Adıyaman", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Afyonkarahisar", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Ağrı", temp: 25, condition: "Bulutlu", icon: "cloudy" },

{ name: "Amasya", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Ankara", temp: 31, condition: "Güneşli", icon: "sunny" },

{ name: "Antalya", temp: 34, condition: "Güneşli", icon: "sunny" },

{ name: "Artvin", temp: 26, condition: "Yağmurlu", icon: "rain" },

{ name: "Aydın", temp: 36, condition: "Güneşli", icon: "sunny" },

{ name: "Balıkesir", temp: 30, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Bilecik", temp: 29, condition: "Bulutlu", icon: "cloudy" },

{ name: "Bingöl", temp: 27, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Bitlis", temp: 24, condition: "Yağmurlu", icon: "rain" },

{ name: "Bolu", temp: 26, condition: "Bulutlu", icon: "cloudy" },

{ name: "Burdur", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Bursa", temp: 30, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Çanakkale", temp: 29, condition: "Güneşli", icon: "sunny" },

{ name: "Çankırı", temp: 28, condition: "Bulutlu", icon: "cloudy" },

{ name: "Çorum", temp: 30, condition: "Güneşli", icon: "sunny" },

{ name: "Denizli", temp: 33, condition: "Güneşli", icon: "sunny" },

{ name: "Diyarbakır", temp: 38, condition: "Güneşli", icon: "sunny" },

{ name: "Edirne", temp: 31, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Elazığ", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Erzincan", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Erzurum", temp: 23, condition: "Bulutlu", icon: "cloudy" },

{ name: "Eskişehir", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Gaziantep", temp: 36, condition: "Güneşli", icon: "sunny" },

{ name: "Giresun", temp: 27, condition: "Yağmurlu", icon: "rain" },

{ name: "Gümüşhane", temp: 25, condition: "Bulutlu", icon: "cloudy" },

{ name: "Hakkari", temp: 26, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Hatay", temp: 35, condition: "Güneşli", icon: "sunny" },

{ name: "Isparta", temp: 31, condition: "Güneşli", icon: "sunny" },

{ name: "Mersin", temp: 34, condition: "Güneşli", icon: "sunny" },

{ name: "İstanbul", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "İzmir", temp: 33, condition: "Güneşli", icon: "sunny" },

{ name: "Kars", temp: 22, condition: "Bulutlu", icon: "cloudy" },

{ name: "Kastamonu", temp: 26, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Kayseri", temp: 30, condition: "Güneşli", icon: "sunny" },

{ name: "Kırklareli", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Kırşehir", temp: 31, condition: "Güneşli", icon: "sunny" },

{ name: "Kocaeli", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Konya", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Kütahya", temp: 28, condition: "Bulutlu", icon: "cloudy" },

{ name: "Malatya", temp: 33, condition: "Güneşli", icon: "sunny" },

{ name: "Manisa", temp: 35, condition: "Güneşli", icon: "sunny" },

{ name: "Kahramanmaraş", temp: 36, condition: "Güneşli", icon: "sunny" },

{ name: "Mardin", temp: 37, condition: "Güneşli", icon: "sunny" },

{ name: "Muğla", temp: 34, condition: "Güneşli", icon: "sunny" },

{ name: "Muş", temp: 26, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Nevşehir", temp: 30, condition: "Güneşli", icon: "sunny" },

{ name: "Niğde", temp: 31, condition: "Güneşli", icon: "sunny" },

{ name: "Ordu", temp: 27, condition: "Yağmurlu", icon: "rain" },

{ name: "Rize", temp: 26, condition: "Yağmurlu", icon: "rain" },

{ name: "Sakarya", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Samsun", temp: 27, condition: "Yağmurlu", icon: "rain" },

{ name: "Siirt", temp: 34, condition: "Güneşli", icon: "sunny" },

{ name: "Sinop", temp: 25, condition: "Yağmurlu", icon: "rain" },

{ name: "Sivas", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Tekirdağ", temp: 30, condition: "Güneşli", icon: "sunny" },

{ name: "Tokat", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Trabzon", temp: 26, condition: "Yağmurlu", icon: "rain" },

{ name: "Tunceli", temp: 27, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Şanlıurfa", temp: 39, condition: "Güneşli", icon: "sunny" },

{ name: "Uşak", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Van", temp: 25, condition: "Bulutlu", icon: "cloudy" },

{ name: "Yozgat", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Zonguldak", temp: 26, condition: "Yağmurlu", icon: "rain" },

{ name: "Aksaray", temp: 31, condition: "Güneşli", icon: "sunny" },

{ name: "Bayburt", temp: 24, condition: "Bulutlu", icon: "cloudy" },

{ name: "Karaman", temp: 33, condition: "Güneşli", icon: "sunny" },

{ name: "Kırıkkale", temp: 30, condition: "Güneşli", icon: "sunny" },

{ name: "Batman", temp: 37, condition: "Güneşli", icon: "sunny" },

{ name: "Şırnak", temp: 35, condition: "Güneşli", icon: "sunny" },

{ name: "Bartın", temp: 27, condition: "Yağmurlu", icon: "rain" },

{ name: "Ardahan", temp: 21, condition: "Bulutlu", icon: "cloudy" },

{ name: "Iğdır", temp: 32, condition: "Güneşli", icon: "sunny" },

{ name: "Yalova", temp: 29, condition: "Parçalı Bulutlu", icon: "partly-cloudy" },

{ name: "Karabük", temp: 27, condition: "Yağmurlu", icon: "rain" },

{ name: "Kilis", temp: 36, condition: "Güneşli", icon: "sunny" },

{ name: "Osmaniye", temp: 35, condition: "Güneşli", icon: "sunny" },

{ name: "Düzce", temp: 28, condition: "Parçalı Bulutlu", icon: "partly-cloudy" }

]

};

// 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="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>

</div>

${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>

<p class="text-sm text-gray-500 dark:text-gray-300">${city.condition}</p>

</div>

</div>

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

JS

Mete'nin bir kodu

Recommended