---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Погода</title>
</head>
<body>
  <div class="card">
    <h1>Погода</h1>
    <form id="form">
      <input id="city" type="text" placeholder="Город, например Москва" required>
      <button type="submit">Найти</button>
    </form>
    <div id="result"></div>
  </div>

  <script>
    const API_KEY = 'ВСТАВЬ_СВОЙ_КЛЮЧ';

    const form = document.getElementById('form');
    const cityInput = document.getElementById('city');
    const result = document.getElementById('result');

    async function fetchWeather(city) {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${API_KEY}&units=metric&lang=ru`;

      try {
        result.textContent = 'Загрузка...';

        const response = await fetch(url);
        if (response.status === 404) {
          throw new Error('Город не найден');
        }
        if (response.status === 401) {
          throw new Error('Неверный API-ключ или он еще не активировался');
        }
        if (!response.ok) {
          throw new Error(`Error status: ${response.status}`);
        }

        const data = await response.json();
        showWeather(data);
      } catch (error) {
        result.innerHTML = `<p class="error">${error.message}</p>`;
      }
    }

    function showWeather(data) {
      const icon = data.weather[0].icon;

      result.innerHTML = `
        <h2>${data.name}, ${data.sys.country}</h2>
        <img src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="">
        <div class="temp">${Math.round(data.main.temp)}°C</div>
        <p>${data.weather[0].description}</p>
        <div class="details">
          Ощущается как ${Math.round(data.main.feels_like)}°C<br>
          Влажность ${data.main.humidity}%<br>
          Ветер ${data.wind.speed} м/с
        </div>
      `;
    }

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      fetchWeather(cityInput.value.trim());
    });
  </script>

  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      color: #fff;
      padding: 16px;
    }

    .card {
      width: 100%;
      max-width: 360px;
      background: #000;
      border: 1px solid #fff;
      border-radius: 16px;
      padding: 24px;
    }

    h1 { font-size: 22px; margin-bottom: 16px; }

    form { display: flex; gap: 8px; }

    input {
      flex: 1;
      padding: 10px 12px;
      background: #000;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 8px;
      font-size: 16px;
    }

    input::placeholder { color: #888; }

    button {
      padding: 10px 16px;
      background: #000;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    button:hover { background: #fff; color: #000; }

    #result { margin-top: 20px; text-align: center; }
    #result img { filter: grayscale(1) brightness(1.5); }
    .temp { font-size: 48px; font-weight: bold; }
    .details { margin-top: 12px; line-height: 1.6; color: #ccc; }
    .error { color: #fff; }
  </style>
</body>
</html>