Webleb - HTML UI Elements - Un codice di Mete

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>

Un codice di Mete

Consigliato

Codice modulo di accesso HTML CSS

Big Bang html

HTML

CSS

JS

Consigliato

Codice modulo di accesso HTML CSS

Big Bang html

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS