Интерактивный тренажёр для тайм-менеджмента

# Создание тренажёра «Карта прогресса» Роль: ты — опытный веб‑разработчик и специалист по управлению задачами. Создай интерактивный тренажёр «Карта прогресса» в одном HTML‑файле (с использованием HTML, CSS, JavaScript). Цель тренажёра: помочь пользователям эффективно планировать, отслеживать и завершать задачи с помощью канбан‑доски с тремя стадиями выполнения и визуальным индикатором прогресса. Целевая аудитория: [взрослые и подростки (14+ лет), желающие улучшить навыки тайм‑менеджмента и продуктивности.] Требования к функционалу: * Добавление задач: * поле ввода для названия новой задачи с подсказкой (пример: «Написать отчёт по проекту»); * кнопка «Добавить задачу»; * валидация: предупреждение при попытке добавить пустую задачу. * Канбан‑доска с тремя колонками: * «Запланировано» — новые задачи; * «В работе» — задачи, над которыми идёт работа; * «Завершено» — выполненные задачи; * для каждой задачи в колонке «В работе» — прогресс‑бар и кнопка «+10 %» для увеличения прогресса. * Система прогресса: * визуальный прогресс‑бар для задач в работе (ширина соответствует проценту выполнения); * возможность увеличивать прогресс шагами по 10 %; * автоматическое перемещение задачи в «Завершено» при достижении 100 %. * Перемещение между колонками: * кнопки «→ В работу» для задач из «Запланировано»; * кнопки «✓ Завершить» для задач из «В работе»; * анимация перемещения задач между колонками (опционально). * Статистика в реальном времени: * блок с тремя карточками‑счётчиками: * «Всего задач» — общее количество созданных задач; * «В работе» — количество задач в процессе выполнения; * «Завершено» — количество выполненных задач; * процент выполнения всех задач (среднее значение по всем прогресс‑барам). * Автосохранение: * использование localStorage для сохранения всех данных (задачи, статусы, прогресс); * загрузка данных при открытии страницы; * обновление сохранённых данных при каждом значимом действии. * Обратная связь: * плавающая кнопка в правом нижнем углу экрана (иконка 💬); * модальное окно с полем для текста и кнопкой «Отправить»; * подтверждение отправки и очистка поля ввода после отправки; * предупреждение при отправке пустого сообщения. Технические требования: * один HTML‑файл (встроенный CSS и JavaScript); * светлая цветовая схема: * фон страницы — #f9f9f9; * карточки задач — белый цвет с мягкой тенью; * колонки: «Запланировано» — серый (#95a5a6), «В работе» — синий (#3498db), «Завершено» — зелёный (#27ae60); * акценты: оранжевый (#e67e22) для кнопок прогресса; * адаптивный дизайн (корректное отображение на ПК и мобильных устройствах); * семантическая разметка HTML; * читаемый, структурированный код с комментариями к ключевым функциям JavaScript. Стиль интерфейса: * чистый, минималистичный дизайн в стиле канбан; * мягкие тени и скруглённые углы для карточек задач и колонок; * чёткая типографика (шрифты: ‘Segoe UI’, Tahoma или системные без засечек); * интуитивно понятные иконки и тексты на кнопках; * плавные переходы при изменении прогресса и перемещении задач. Поведение элементов: * все списки и статистика обновляются динамически без перезагрузки страницы; * прогресс‑бары визуально отражают процент выполнения; * автоматическое обновление статистики при любом изменении; * сохранение данных в localStorage после каждого значимого действия; * модальное окно обратной связи открывается/закрывается по клику; * визуальная обратная связь при нажатии кнопок (изменение цвета, состояния). Ожидаемый результат: Предоставь полный код тренажёра в одном HTML‑файле. Код должен: * быть полностью рабочим (после сохранения как .html открывается в браузере и функционирует); * содержать все модули, описанные выше; * включать комментарии в JavaScript для ключевых функций (например, addTask, moveToInProgress, increaseProgress, saveTasks); * иметь структурированную разметку и стили; * корректно работать в современных браузерах. В конце добавь краткий раздел «Как использовать» [3–4 предложения] — инструкцию для пользователя по запуску и базовому взаимодействию с тренажёром. Дополнительно: Убедись, что тренажёр: * не требует подключения к интернету для основной работы; * сохраняет прогресс между сессиями через localStorage; * имеет интуитивно понятный интерфейс без лишних элементов; * позволяет легко перемещать задачи между колонками и отслеживать прогресс. Как использовать (пример раздела для итогового кода) * Сохраните код в файл с расширением .html. * Откройте файл в любом браузере — тренажёр готов к работе. * Добавляйте задачи через поле ввода в верхней части экрана. * Перемещайте задачи между колонками с помощью кнопок «→ В работу» и «✓ Завершить». * Для задач в работе увеличивайте прогресс кнопками «+10 %». * Следите за статистикой в реальном времени и оставляйте обратную связь через кнопку 💬. * Прогресс автоматически сохраняется — вы можете закрыть браузер и продолжить позже. ## Проверка результата Сделай результат применимым: обозначь приоритеты, ближайшие действия и критерии готовности. Не выдумывай недостающие сроки и ресурсы. Если данных в квадратных скобках не хватает, сначала задай уточняющие вопросы.