<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1B3A5C, #2E86AB); }
        .weather-app { background: rgba(255,255,255,0.95); width: 380px; border-radius: 24px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); text-align: center; }
        .search { display: flex; gap: 8px; margin-bottom: 20px; }
        .search input { flex: 1; padding: 12px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; }
        .search input:focus { border-color: #2E86AB; outline: none; }
        .search button { padding: 12px 18px; background: #2E86AB; color: white; border: none; border-radius: 12px; cursor: pointer; font-size: 16px; }
        .weather-icon { font-size: 5rem; margin: 10px 0; }
        .temp { font-size: 4rem; font-weight: 900; color: #1B3A5C; }
        .city { font-size: 1.5rem; color: #2E86AB; font-weight: 700; margin: 5px 0; }
        .details { display: flex; justify-content: space-around; margin-top: 20px; padding-top: 15px; border-top: 2px solid #f0f0f0; }
        .detail { text-align: center; }
        .detail-value { font-size: 1.2rem; font-weight: 800; color: #1B3A5C; }
        .detail-label { font-size: 0.8rem; color: #888; }
    </style>
</head>
<body>
    <div class="weather-app">
        <div class="search">
            <input type="text" id="cityInput" placeholder="Shahar nomi..." value="Toshkent">
            <button onclick="getWeather()">&#128269;</button>
        </div>
        <div id="weatherData">
            <div class="weather-icon" id="icon">&#9925;</div>
            <div class="temp" id="temp">--&deg;C</div>
            <div class="city" id="city">Shahar</div>
            <div style="color:#888" id="desc">Ob-havo</div>
            <div class="details">
                <div class="detail"><div class="detail-value" id="humidity">--%</div><div class="detail-label">Namlik</div></div>
                <div class="detail"><div class="detail-value" id="wind">-- km/s</div><div class="detail-label">Shamol</div></div>
                <div class="detail"><div class="detail-value" id="feels">--&deg;C</div><div class="detail-label">His qilish</div></div>
            </div>
        </div>
    </div>
    <script>
        const cities = {
            'toshkent': { temp: 32, feels: 35, humidity: 40, wind: 12, desc: 'Quyoshli', icon: '&#9728;&#65039;' },
            'samarqand': { temp: 30, feels: 33, humidity: 45, wind: 8, desc: 'Bulutli', icon: '&#9925;' },
            'buxoro': { temp: 36, feels: 39, humidity: 25, wind: 15, desc: 'Issiq', icon: '&#127774;' },
            'guliston': { temp: 33, feels: 36, humidity: 50, wind: 10, desc: 'Qisman bulutli', icon: '&#127780;&#65039;' },
            'fargona': { temp: 29, feels: 31, humidity: 55, wind: 7, desc: 'Yomg\'irli', icon: '&#127783;&#65039;' },
            'namangan': { temp: 28, feels: 30, humidity: 60, wind: 5, desc: 'Bulutli', icon: '&#9729;&#65039;' },
        };

        function getWeather() {
            const city = document.getElementById('cityInput').value.toLowerCase().trim();
            const data = cities[city];
            if (data) {
                document.getElementById('icon').innerHTML = data.icon;
                document.getElementById('temp').innerHTML = data.temp + '&deg;C';
                document.getElementById('city').textContent = city.charAt(0).toUpperCase() + city.slice(1);
                document.getElementById('desc').textContent = data.desc;
                document.getElementById('humidity').textContent = data.humidity + '%';
                document.getElementById('wind').textContent = data.wind + ' km/s';
                document.getElementById('feels').innerHTML = data.feels + '&deg;C';
            } else {
                document.getElementById('city').textContent = 'Topilmadi!';
                document.getElementById('desc').textContent = 'Toshkent, Samarqand, Buxoro, Guliston, Farg\'ona, Namangan kiriting';
            }
        }

        document.getElementById('cityInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') getWeather(); });
        getWeather();
    </script>
</body>
</html>