UP-26gr-2sem/2025-26/Отчеты/Пастухов.md

Отчет о проделанной работе

Тематика сайта:прогноз погоды

ссылка на сайт

p.s. если выдает москва(демо) то сеть(в частности сеть коледжа) на которой сидите блокирует запросы на сервер с данными

Процесс создания

1.Создания основ макета сайта (изменяющийся фон под восход солнца и добавления статичных данных из воздуха и разделения на 3 листа:"сегодня","7 дней"," детали"

Вот промпт:Создай полноценный многостраничный сайт прогноза погоды на HTML, CSS и JavaScript (всё в одном файле с навигацией через JS). Сайт должен состоять из 3 страниц.

🎨 ДИЗАЙН:

• Цветовая палитра: тёмно-синий фон (#0A0F2C), голубые акценты (#4FC3F7), белый текст, полупрозрачные карточки с blur-эффектом (glassmorphism)
• Шрифт: Inter или Roboto (подключить через Google Fonts)
• Анимации: плавные переходы между страницами, иконки погоды с CSS-анимацией (облако плавает, солнце вращается)
• Адаптивность: корректное отображение на мобильных и десктопе
• Фон: градиент имитирующий небо, который меняется в зависимости от «времени суток» (утро/день/вечер/ночь)
  

📄 СТРАНИЦА 1 — Главная (Сегодня):

• Поиск города (поле ввода + кнопка)
• Большой блок с текущей погодой: город, температура (+18°C), иконка погоды, ощущается как, влажность, ветер, давление
• Горизонтальный прогноз по часам (каждые 3 часа, 8 блоков)
• Используй демо-данные для Москвы по умолчанию

📄 СТРАНИЦА 2 — Прогноз на 7 дней:

• Заголовок страницы с текущим городом
• 7 карточек (по одной на каждый день): название дня, иконка, макс/мин температура, описание (ясно / облачно / дождь и т.д.)
• График температуры (нарисовать через Canvas или SVG) — линия максимальных температур за 7 дней
• Кнопка «Назад» и навигация

📄 СТРАНИЦА 3 — Детали и карта:

• Расширенные показатели: UV-индекс, видимость, точка росы,
• индекс качества воздуха (AQI), фаза луны
• Встроенная карта (iframe с OpenStreetMap или просто стилизованный
• блок-заглушка с координатами)
• Блок восход/закат с визуальной шкалой дня

🧭 НАВИГАЦИЯ:

• Фиксированное меню сверху с тремя пунктами: «Сегодня», «7 дней», «Детали»
• Активный пункт подсвечивается
• Плавный переход между «страницами» через display/opacity

⚙️ ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ:

• Всё в одном HTML-файле (CSS и JS внутри)
• Все данные — демо (hardcoded), реальное API не нужно
• Код чистый, с комментариями
• Работает без сервера, просто открыть в браузере*.
  

2.Добавления секретной игры(на солнце на первой странице) и изменение карты на динимичную с облаками(провальная идея) 3.Получение данных с сайта:

• Нахождение сервера и создания API-ключа для подлучения данных для сайта.
• Смена сервера на открытый сайт без API-ключа

Вот промпт:
Роль: Опытный фронтенд-разработчик. Задача: Полностью перепиши логику работы с API в HTML-файле, заменив OpenWeatherMap (OWM) на бесплатный Open-Meteo API. Вся остальная логика (HTML, CSS, темы, вкладки) и Canvas-игра "ГРОМОВОЙ БЕГУН" должны остаться абсолютно нетронутыми. Верни ПОЛНЫЙ готовый к запуску HTML-код.

Технические требования:

1. Отказ от ключей и Эндпоинты:

   • Полностью удали константу API_KEY.
   • Геокодинг: https://geocoding-api.open-meteo.com/v1/search?name=[ГОРОД]&count=1&language=ru&format=json
   • Прогноз: https://api.open-meteo.com/v1/forecast

2. Логика запроса (fetchWeatherData):

   • Шаг 1: Запрос к Geocoding API. Получи latitude, longitude и официальное name. Если города нет -> вызови showNotification.
   • Шаг 2: Запрос к Forecast API с параметрами: • current=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,wind_speed_10m,surface_pressure,visibility • hourly=temperature_2m,precipitation_probability,weather_code • daily=weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset • timezone=auto

3. Маппинг и Парсинг данных:

   • Напиши функцию-маппер кодов WMO в привычный для текущего приложения текст и эмодзи (ясно, дождь, гроза, пасмурно), чтобы не сломать логику советов (TIPS) и анимацию renderCloudMap.
   • parseHourly: Собери массивы времени и температур в объекты для 8 ближайших точек (текущий час + 7 следующих). Давление переведи в мм рт. ст. (hPa * 0.750064). Скорость ветра — в км/ч.
   • parseForecastDays: Сформируй массив прогноза на 7 дней из параметров daily.
   • Заглушки: Для отсутствующих в Open-Meteo полей (AQI, УФ-индекс, фаза луны) сделай правдоподобные расчеты или статичные заглушки, чтобы верстка в renderDetails не поехала.

Пиши чистый, оптимизированный код без сокращений.

Вот мой текущий код для рефакторинга: [ВСТАВЬ СВОЙ HTML-КОД СЮДА]

4.Изменение вкладки "7 дней":

• Создание для каждого дня почасовой прогноз .
• Добавление графика температуры.

5.Измение на вкладке "детали":

• Изменение карты на реалистичную.
• Удаление карты и добавление советов дня.

6.Финальные изменения:

• Измение фона(теперь градиент с темой устройства).
• Добавление умного поиска.
• Авто-запоминие города на устройстве.

Что использовалось

• Основным пощоником в написание кода был Claude-ссылка
• Основной помощник по общим темам и написанию промпта(дабы хватило бесплатного периода) Gemini-ссылка
• Мнение и критика знакомых