|
|
@@ -0,0 +1,198 @@
|
|
|
+Отчёт по проекту
|
|
|
+«Сказочный сон — генератор сказок на ночь»
|
|
|
+
|
|
|
+Дата сдачи проекта: 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 года) и готов к использованию целевой аудиторией.
|
