Отчёт по проекту
«Сказочный сон — генератор сказок на ночь»

Дата сдачи проекта: 23 июня 2026 г.
Владелец проекта: Артикуленко Маргарита Михайловна
Ссылка на готовый сайт: http://zcxek458.beget.tech/ (активна и доступна)
1. Введение

Проект «Сказочный сон» представляет собой интерактивный веб-сервис для создания персонализированных сказок на ночь. Основная цель — помочь родителям и детям провести вечернее время за увлекательным чтением, развивая воображение, укрепляя семейные традиции и делая процесс засыпания тёплым и волшебным. Сайт ориентирован на семейную аудиторию, а также может быть полезен педагогам, психологам и всем, кто любит сказки.

Актуальность проекта обусловлена растущим интересом к цифровым инструментам, которые сочетают развлечение и развитие, особенно в условиях ограниченного живого общения. Генератор сказок решает проблему однообразия вечерних ритуалов, предлагая бесконечное разнообразие историй с учётом предпочтений пользователя.
2. Функциональные возможности

Сайт реализует следующий набор функций:
2.1. Генератор сказок

    Пользователь выбирает имя героя, его тип (медвежонок, фея, дракончик и др.), место действия (волшебный лес, замок на облаках и т.д.) и тематику (добрая, приключенческая, уютная, таинственная и ещё более 15 вариантов).

    При нажатии кнопки «Сочинить сказку» система генерирует уникальный текст объёмом около 1000 слов с диалогами, описаниями и моралью.

    В основе генерации лежит библиотека шаблонов, адаптированных под каждую тематику (не менее двух вариантов на тематику), что обеспечивает разнообразие даже при одинаковых входных параметрах.

    Сгенерированная сказка отображается в увеличенной области с вертикальной прокруткой, сохраняется в localStorage и восстанавливается при следующем посещении.

2.2. Система авторизации и профиль

    Реализована регистрация и вход по имени пользователя и паролю (данные хранятся в localStorage).

    Авторизованный пользователь видит свой профиль с именем и email (если указан), имеет возможность выйти из системы.

    Функционал регистрации предусматривает проверку уникальности имени и обязательность полей.

2.3. Обратная связь

    На главной странице размещена форма обратной связи (имя, email, сообщение).

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

    Данные формы не сохраняются на сервере (демонстрационный режим), но интерфейс полностью имитирует отправку.

2.4. Советы для родителей

    Отдельная страница содержит 6 практических советов по чтению сказок (ритуалы, интонации, обсуждение, развитие фантазии и др.).

    Советы оформлены в виде карточек с иконками, что улучшает восприятие информации.

2.5. Отзывы и рейтинг

    Пользователи могут оставлять отзывы с оценкой от 1 до 5 звёзд.

    Все отзывы сохраняются в localStorage, отображаются в обратном хронологическом порядке.

    Вычисляется средняя оценка и визуализируется в виде звёзд (с округлением до целых), отображается количество голосов.

    По умолчанию добавлены два демонстрационных отзыва для наглядности.

2.6. Визуальные эффекты

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

    Парящая луна в правом верхнем углу анимирована (покачивание) и имеет реалистичную градиентную заливку с бликами.

    Искры — при клике на страницу, переключении вкладок, генерации сказки, отправке формы или отзыва появляются разлетающиеся искры (эмодзи ✦, ✧, ⭐ и др.) с эффектом затухания, что усиливает ощущение магии.

    Анимации переключения страниц (плавное появление), пульсация сердечка в футере, мерцание золотого заголовка.

3. Структура сайта
3.1. Навигация

Верхнее меню содержит четыре вкладки:

    Главная — содержит приветствие, информацию о владельце, формы авторизации и обратной связи.

    Генератор — основная страница с настройками сказки и выводом результата.

    Советы — страница с рекомендациями для родителей.

    Отзывы — страница с рейтингом и формой добавления отзыва.

Переключение между вкладками происходит без перезагрузки страницы (SPA-подход) с анимацией.
3.2. Адаптивность

    Вёрстка построена на гибких сетках (flexbox, grid) и медиа-запросах.

    На мобильных устройствах элементы (формы, кнопки, навигация) адаптируются к ширине экрана: поля ввода растягиваются, шрифты уменьшаются, луна меняет размер.

    Меню становится более компактным, кнопки занимают всю ширину.

3.3. Дизайн

    Основная цветовая гамма: тёмно-фиолетовые тона с золотыми акцентами, что создаёт ощущение ночи и волшебства.

    Использованы шрифты Playfair Display (для заголовков) и Quicksand (для остального текста), что придаёт элегантность и удобочитаемость.

    Применены полупрозрачные фоны с эффектом размытия (backdrop-filter), стеклянные карточки, тонкие обводки и тени.

4. Технологии и инструменты

    HTML5 — структура страниц.

    CSS3 — стилизация, анимации, адаптивность, флексбоксы и гриды.

    JavaScript (ES6) — вся логика: генерация сказок, авторизация, управление отзывами, анимации звёзд, искры, переключение вкладок.

    Canvas API — для рисования звёздного фона с мерцанием.

    localStorage — для хранения данных пользователей, текущего сеанса, последней сгенерированной сказки, отзывов и рейтинга.

    Google Fonts — для подключения шрифтов.

    Git — контроль версий (предполагается).

Клиентская часть полностью автономна, без внешних серверных вызовов, что упрощает развёртывание и делает сайт доступным офлайн (при условии загрузки шрифтов).
5. Особенности реализации
5.1. Генерация сказок

    Для каждой тематики заготовлено по 2–3 развёрнутых шаблона с подстановкой параметров (имя, тип героя, место).

    Шаблоны содержат диалоги, описания природы, эмоциональные моменты и поучительные выводы.

    Выбор шаблона происходит случайным образом, что при каждом запросе выдаёт новую историю даже при одинаковых параметрах.

    Текст адаптирован под детскую аудиторию: простой язык, яркие образы, отсутствие жестокости.

5.2. Авторизация

    Данные пользователей хранятся в виде массива объектов в localStorage.

    При регистрации проверяется уникальность имени, пароль не шифруется (в демонстрационных целях).

    Текущий пользователь сохраняется в localStorage, при перезагрузке сессия сохраняется.

5.3. Звёздный фон

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

    Звёзды плавно движутся, отражаясь от краёв экрана, что создаёт эффект живого неба.

    Производительность оптимизирована (используется requestAnimationFrame).

5.4. Искры

    При клике вне интерактивных элементов или при выполнении ключевых действий создаются элементы с эмодзи, которые разлетаются в разные стороны и исчезают.

    Это улучшает пользовательский опыт и подчёркивает волшебную атмосферу.

5.5. Отзывы

    Все отзывы хранятся в localStorage в виде массива объектов с полями: имя, рейтинг, текст, дата.

    При добавлении нового отзыва пересчитывается средняя оценка и обновляется отображение звёзд.

    Валидация: имя и текст обязательны, рейтинг выбирается из выпадающего списка.

6. Тестирование
6.1. Проверка функциональности

    Генератор сказок: протестированы все комбинации настроек (более 30 вариантов), каждая выдаёт связный текст.

    Авторизация: регистрация нового пользователя, вход существующего, выход, проверка уникальности имён, обработка ошибок.

    Обратная связь: отправка формы с отображением благодарности, очистка полей.

    Отзывы: добавление, отображение, обновление рейтинга.

    Вкладки: переключение между страницами, сохранение состояния активной вкладки (не реализовано, но не критично).

    Адаптивность: сайт корректно отображается на экранах шириной от 320px до 1920px (проверено на эмуляторах мобильных устройств и реальных браузерах).

6.2. Кроссбраузерность

    Проверено в последних версиях Google Chrome, Mozilla Firefox, Microsoft Edge, Safari (в macOS).

    Все анимации и эффекты работают корректно.

6.3. Производительность

    Загрузка страницы быстрая (из-за отсутствия серверных запросов).

    Анимация звёзд плавная, нагрузка на процессор минимальна.

    Генерация сказок происходит мгновенно.

6.4. Ограничения

    Данные хранятся локально, поэтому при смене устройства или браузера они не сохраняются.

    Отсутствует серверная часть, поэтому нет возможности отправлять реальные письма через обратную связь (это можно добавить в будущем).

    Пароли хранятся в открытом виде – для коммерческого использования потребуется шифрование.

7. Заключение

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

Все ключевые функции протестированы и работают стабильно. Сайт размещён по адресу http://zcxek458.beget.tech/ и готов к использованию. В будущем планируется расширение базы шаблонов, добавление озвучивания сказок и интеграция с социальными сетями для обмена историями.

Проект сдан в срок (23 июня 2026 года) и готов к использованию целевой аудиторией.