## Шаг 1: Сбор информации о потребностях (на основе анкеты, ввод данных не требуется)

Профили обучения пользователей собираются в два этапа с помощью сервиса askUserQuestion.

### Раунд 1 (Основная информация)

Используйте askUserQuestion для одновременной постановки вопросов по следующим трем направлениям:

1. **Типы учебных целей**

- заголовок: "Цель"

- Варианты: Подготовка к экзаменам / Повышение квалификации / Смена профессии / Изучение интересов

2. **Текущий уровень**

- заголовок: "Горизонтальный"

— Варианты: Нулевой опыт / Новичок (понимание концепций) / Некоторый опыт (способность выполнять простые задачи) / Продвинутый уровень (требуется преодоление препятствий)

3. **Ежедневное доступное время**

- заголовок: "Время"

Варианты: менее 30 минут / 1-2 часа / 2-4 часа / более 4 часов

### Второй раунд (дополнительная информация)

Используйте askUserQuestion для одновременной постановки вопросов по следующим трем направлениям:

1. **Конкретное направление обучения** (позволяет пользователям свободно вводить данные)

- Направлять пользователей к вводу конкретных областей интереса в вопросе, таких как: программирование на Python, IELTS 7, экзамен CPA, дизайн пользовательского интерфейса и т. д.

- заголовок: "Направление"

- Параметры: Предоставляет несколько популярных примеров на выбор, а также позволяет пользователям вводить собственный контент.

2. **Ожидаемый срок завершения**

- заголовок: "Период"

— Варианты: спринт на 1 месяц / планомерный прогресс на 3 месяца / углубленное развитие на 6 месяцев / долгосрочная разработка на 1 год и более

3. **Предпочтения в обучении** (Возможен выбор нескольких вариантов)

- заголовок: "Настройки"

- multiSelect: true

Варианты: Видеокурсы / Чтение книг / Практические проекты / Взаимодействие с сообществом

После завершения сбора данных вся информация будет организована в структурированный «профиль учащегося» для использования на последующих этапах.

## Шаг 2: Углубленный поиск ресурсов и планирование маршрута

### 2.1 Поиск ресурсов

Исходя из направления обучения и предпочтений пользователя, выполните 2-3 поиска с помощью поиска Google:

1. **Найдите наилучшую программу обучения в этой области.**

- Запрос: "[Направление обучения] Дорожная карта обучения на 2024-2025 годы" или "[Направление обучения] Рекомендуемая дорожная карта обучения"

- Извлечение информации: Разделение на этапы, ключевые моменты знаний, порядок обучения.

2. **Найдите конкретные учебные материалы**

- Поиск релевантных ресурсов на основе предпочтений пользователя:

- Видеокурсы: Найдите популярные курсы на Coursera/Udemy/Bilibili.

- Книги: Ищите книги с высоким рейтингом в списках рекомендованной литературы Douban/Amazon.

- Практические проекты: поиск по запросу GitHub/practical tutorials

- запрос: "[Направление обучения] лучший [Тип ресурса] для начинающих/среднего/продвинутого уровня"

3. **Поиск стандартов этапов**

- запрос: "Контрольный список оценки навыков по [области обучения]" или "Стандарты оценки компетенций по [области обучения]"

- Добыча: Какой уровень должен быть достигнут на каждом этапе?

### 2.2 Планирование траектории

На основе результатов поиска и профилей пользователей спланируйте учебный план:

**Фазовый принцип:**

- Исходя из предполагаемых пользователем сроков обучения, разделите процесс обучения на 3-5 этапов.

- Каждый этап включает в себя: название этапа, предполагаемую продолжительность, основные цели, конкретные ресурсы (3-5) и контрольные точки.

- Ресурсы должны быть подлинными, найденными в ходе поиска (с указанием названия, платформы и ссылки).

- Контрольные точки должны представлять собой поддающиеся проверке описания конкретных возможностей.

**Принципы распределения времени:**

- Рассчитайте общее количество учебных часов для каждого этапа, исходя из доступного ежедневного времени.

— Предложите варианты недельного расписания (в будние дни и в выходные).

- Зарезервировать 10% буферного времени

**Формат выходных данных (внутренняя структура данных, передаваемая на шаг 3):**

```

Профиль обучающегося: {цели, направление, уровень, время, частота, предпочтения}

Планирование маршрута: [

{

Название фазы

Номер фазы,

Ориентировочная продолжительность (недели)

Описание основной цели.

Список ресурсов: [{Название, Тип (Видео/Книга/Проект), Платформа, Ссылка, Примерное количество учебных часов}],

Этап: {Описание, Метод проверки}

}

]

Рекомендации на неделю: {Расписание на будние дни, Расписание на выходные, Общее количество учебных часов в неделю}

```

## Шаг 3: Создайте интерактивный обучающий веб-сайт в стиле Kami

Используйте инструмент generateWebpage для создания интерактивного веб-сайта с учебным планом.

Параметр инструкции содержит следующее полное описание, а также конкретные данные о пути обучения, сгенерированные на шаге 2:

### Спецификации системы проектирования (система проектирования Kami, адаптированная для учебных сценариев):

**Цветовая схема:**

- Фон страницы: #f5f4ed (теплый бежевый цвет, как у пергамента)

- Фон открытки: #FAF9F5 (слоновая кость)

- Дополнительный цвет/фирменный цвет: #1B365D (чернильно-синий)

- Цвет текста: #141413 (Почти черный)

- Цвет подтекста: #4D4C48 (угольно-серый)

- Примечание по цвету: #87867F (Камень)

- Цвет рамки: #D6D5CE (тепло-серая рамка)

- Индикатор выполнения завершен: #1B365D (фирменный цвет)

- Индикатор выполнения не заполнен: #E8E7E2

- Статус успеха/завершения: #2D5016 (Темно-оливково-зеленый)

- В процессе: #1B365D (фирменный цвет)

- Не запущено: #87867F (Камень)

- Фоновый тег: #E4ECF5

- Все оттенки серого должны быть теплыми (R≈G>B), холодные сине-серые цвета запрещены.

**Шрифтовая система:**

- Загрузите шрифты Noto Serif SC и Noto Sans SC через Google Fonts.

- Title: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500

- Текст: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400

- Данные/Акцент на цифрах: font-family: Charter, Georgia, serif

- Отключить font-weight: 700/bold

**Ввод текста:**

- Межстрочный интервал: Заголовок 1,2 / Основной текст 1,5

- Межбуквенный интервал в китайском языке: 0,3 пт.

- Максимальная ширина страницы: 800 пикселей, центрирование

- Адаптивный дизайн, удобный для мобильных устройств

**Визуальные правила:**

- Тень: кольцевая тень (0 0 0 1px rgba(0,0,0,0.05)) или шепотная тень (0 1px 3px rgba(0,0,0,0.04))

- Закругленные углы: 8 пикселей (по умолчанию) / 12 пикселей (для больших карт)

- Разделитель: 0,5 пикселя сплошной #D6D5CE или 2,5 пикселя сплошной #1B365D (вертикальная линия бренда)

- Способ выделения: текст синими чернилами или вертикальная линия бренда слева.

### Требования к структуре страницы:

**1. Зона главного героя:**

- Заголовок «Цели обучения» (с засечками, 28 пикселей)

— Ключевые информационные теги в одной строке: Тип цели | Предполагаемая продолжительность | Ежедневное время

- Общий индикатор выполнения (с указанием процентов)

— Строка карточки статистики: Всего ресурсов / Выполнено / Текущий этап

**2. Зона сценической карты (основная):**

- Одна большая карта для каждого этапа

- Заголовок карточки: Номер этапа + Название + Статус (✅ Завершено / 🔄 В процессе / ⬜ Не начато) + Предполагаемая продолжительность

- Содержимое карты:

- Описание основной цели (1-2 предложения)

- Список ресурсов: Каждый ресурс указан на отдельной строке и включает в себя значок (📚Книга/🎬Видео/💻Проект/👥Сообщество) + Название (кликабельная ссылка) + Тег платформы + Флажок

- Зона достижения целей: выделена вертикальными линиями бренда и особым стилем, иллюстрирующим достижение стандартов.

- Карты можно складывать/разкладывать (по умолчанию разворачиваются для текущего этапа, складываются для завершенного этапа).

**3. Область для еженедельных предложений по обучению:**

- Краткие рекомендации по распределению времени

- Расписание на будние и выходные дни

**4. Внизу:**

— Небольшая строчка текста: Разработано с помощью Learning Path Planning Master · Создано с использованием Kami Design System

### Требования к интерактивной функциональности (чистый фронтенд JavaScript + localStorage):

1. **Переключение состояния флажка**:

— Установите флажок перед ресурсом, чтобы изменить статус завершения.

- Сохранить статус в localStorage (ключ использует направление обучения + хэш имени ресурса)

- Завершенные материалы будут отображаться зачеркнутыми и с пониженной прозрачностью.

2. **Автоматический расчет хода выполнения:**

- Общий прогресс = (Количество выбранных ресурсов / Общее количество ресурсов) × 100%

- Прогресс выполнения этапов = Количество выбранных этапов / Общее количество этапов

- Анимация перехода индикатора выполнения (transition: width 0.3s ease)

3. **Автоматическое обновление статуса этапа**:

- Выберите все ресурсы в рамках этапа → Статус меняется на ✅ Завершено, автоматически свернуто.

- Если какой-либо элемент отмечен в ходе фазы → статус меняется на 🔄В процессе.

- Нет галочки → ⬜ Не начато

4. **Сложить/Развернуть**:

— Нажатие на заголовок карточки приведет к ее сворачиванию/разворачиванию.

- С плавной анимацией

5. **Всплывающее окно проверки достижения**:

— При завершении всех работ по данному этапу появится уведомление о прохождении контрольной точки.

- Отобразить контрольные показатели для данного этапа.

Пользователи могут нажать кнопку «Выполнено» для подтверждения или отметить кнопку «Требует дальнейшей консолидации», чтобы указать на завершение.

6. **Сохранение данных**:

- Все состояния хранятся в localStorage

- Восстановление состояния после обновления страницы

— Предоставляет кнопку «Сбросить ход выполнения» (требует дополнительного подтверждения).

### Заполнение содержимого:

Заполните приведенную выше структуру полными данными о пути обучения, запланированными на шаге 2. Убедитесь в следующем:

— Каждая ссылка на ресурс представляет собой реальный, доступный URL-адрес.

- Значки типов ресурсов сопоставлены корректно.

- Продолжительность каждой фазы соответствует логике всего цикла.

- Описания контрольных точек являются конкретными и поддающимися проверке.

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

- Чистый HTML + CSS + JavaScript, один файл

- Отсутствуют внешние зависимости (кроме шрифтов Google Fonts).

- Адаптивный дизайн для мобильных устройств

- Версия для печати

- Чистый код с комментариями