## Крок 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. **Налаштування навчання** (можливий вибір кількох варіантів)

- заголовок: "Налаштування"

- багатовибірковий: true

- Варіанти: Відеокурси / Читання книг / Практичні проекти / Взаємодія з громадою

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

## Крок 2: Поглиблений пошук ресурсів та планування шляху

### 2.1 Пошук ресурсів

Залежно від напрямку навчання та вподобань користувача, виконайте 2-3 пошуки за допомогою Пошуку Google:

1. **Пошук найкращої навчальної дорожньої карти в цій галузі**

- Запит: «[Напрямок навчання] Дорожня карта навчання 2024-2025» або «[Напрямок навчання] Рекомендована дорожня карта навчання»

- Вилучення: поділ на етапи, основні знання, порядок навчання

2. **Пошук конкретних навчальних ресурсів**

- Пошук відповідних ресурсів на основі уподобань користувача:

- Відеокурси: Пошук популярних курсів на Coursera/Udemy/Bilibili

- Книги: Пошук високо оцінених книг у списках рекомендованої літератури Douban/Amazon

- Практичні проекти: Пошук на GitHub/практичні посібники

- запит: "[Напрямок навчання] найкращий [Тип ресурсу] початківець/середній/просунутий"

3. **Стандарти етапів пошуку**

- запит: «Контрольний список оцінювання навичок [Навчальна галузь]» або «Стандарти оцінювання компетенцій [Навчальна галузь]»

- Видобуток: Який рівень має бути досягнутий на кожному етапі?

### 2.2 Планування шляху

На основі результатів пошуку та профілів користувачів сплануйте навчальний шлях:

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

- Виходячи з очікуваного часу навчання користувача, розділіть процес навчання на 3-5 етапів.

- Кожна фаза включає: назву фази, орієнтовну тривалість, основні цілі, конкретні ресурси (3-5) та контрольні точки етапів.

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

- Віхи повинні бути перевіреними описами конкретних можливостей.

**Принципи розподілу часу:**

- Розрахуйте загальну кількість навчальних годин для кожного етапу на основі щоденно доступного часу.

- Надайте запропоновані тижневі графіки (будні та вихідні)

- Зарезервуйте 10% буферного часу

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

```

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

Планування шляху: [

{

Назва фази

Номер фази,

Орієнтовна тривалість (тижні)

Опис основної мети,

Список ресурсів: [{Назва, Тип (відео/книга/проект), Платформа, Посилання, Орієнтовна кількість годин навчання}]

Етап: {Опис, Спосіб підтвердження}

}

]

Щотижневі пропозиції: {Розклад на будні, Розклад на вихідні, Загальна кількість годин навчання на тиждень}

```

## Крок 3: Створіть інтерактивний навчальний веб-сайт у стилі камі

Використайте інструмент 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

- Назва: сімейство шрифтів: «Noto Serif SC», Charter, Georgia, serif; вага шрифту: 500

- Текст: сімейство шрифтів: 'Noto Sans SC', 'PingFang SC', без засічок; щільність шрифту: 400

- Дані/Наголос на числах: сімейство шрифтів: Charter, Georgia, serif

- Вимкнути насичення шрифту: 700/жирний

**набір тексту:**

- Міжрядковий інтервал: Заголовок 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

### Вимоги до інтерактивної функціональності (чистий фронтенд JavaScript + localStorage):

1. **Перемикання стану прапорця**:

- Поставте прапорець перед ресурсом, щоб перемкнути статус завершення.

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

- Завершені ресурси будуть закреслені + прозорість зменшена.

2. **Автоматичний розрахунок прогресу:**

- Загальний прогрес = (Кількість вибраних ресурсів / Загальна кількість ресурсів) × 100%

- Хід етапу = Кількість вибраних етапів / Загальна кількість етапів

- Перехід анімації індикатора прогресу (перехід: ширина 0,3 с, легкість)

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

- Виберіть усі ресурси в межах фази → Статус змінюється на ✅ Завершено, автоматично згортається.

- Якщо будь-який елемент перевіряється під час фази → статус змінюється на 🔄У процесі.

- Без позначки → ⬜ Не розпочато

4. **Складання/Розкладання**:

- Клацання на заголовок картки призведе до її згортання/розгортання.

- З плавною анімацією

5. **Спливаюче вікно перевірки етапів**:

- Підказка для перевірки етапу з'явиться після завершення використання всіх ресурсів для фази.

- Відобразити ключові стандарти для цього етапу

Користувачі можуть натиснути «Досягнуто» для підтвердження або позначити «Потрібна подальша консолідація», щоб вказати на завершення.

6. **Збереження даних**:

- Усі стани зберігаються в локальному сховищі

- Відновлення стану після оновлення сторінки

- Надає кнопку «Скинути прогрес» (потрібне вторинне підтвердження).

### Заповнення контентом:

Заповніть наведену вище структуру повними даними навчального шляху, запланованого на кроці 2. Переконайтеся, що:

- Посилання на кожен ресурс – це реальна, доступна URL-адреса.

- Піктограми типів ресурсів правильно зіставлені

- Тривалість кожної фази відповідає логіці загального циклу.

- Описи етапів є конкретними та такими, що підлягають перевірці.

### Технічні вимоги:

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

- Немає зовнішніх залежностей (окрім шрифтів Google)

- Адаптивний для мобільних пристроїв

- Версія для друку

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