Fresh House

Fresh House — учебный многостраничный сайт клининговой компании в Кировской области.

Сайт знакомит пользователя с услугами компании, содержит форму заявки, отзывы и информацию о команде. В проект также включены интерактивные задания по JavaScript и отдельная браузерная игра для поиска и перестановки слов.

Открыть опубликованный сайт

Проект создан для практического изучения HTML, CSS, JavaScript, DOM API, пользовательских событий и работы с данными в браузере.

---

Основные разделы

Сайт клининговой компании

• презентация компании;
• каталог основных и дополнительных услуг;
• описание стоимости и особенностей уборки;
• форма заявки на уборку;
• форма обратной связи;
• раздел с отзывами;
• информация о компании;
• адаптивное меню;
• плавная навигация по странице;
• кнопка возврата к началу страницы.

Формы в текущей версии являются частью клиентского интерфейса и не отправляют данные на сервер.

Учебные задания

В разделе tasks.html собраны отдельные интерактивные упражнения:

• работа с DOM-элементами;
• обработка пользовательского ввода;
• генерация и изменение содержимого страницы;
• работа с SVG;
• CSS- и JavaScript-анимации;
• сортировка и преобразование данных;
• перетаскивание слов через Drag and Drop.

Игра «Поиск текста»

Встроенная браузерная игра предлагает пользователю выполнять задания со словами и предложениями на время.

Реализованы:

• три уровня сложности;
• несколько типов заданий;
• случайный выбор вопросов;
• таймер;
• начисление очков;
• штрафы за ошибки;
• управление мышью и клавиатурой;
• Drag and Drop для перестановки элементов;
• экран помощи;
• сохранение имени игрока;
• таблица результатов;
• сортировка результатов по количеству очков;
• хранение прогресса в localStorage.

---

Игровые механики

В зависимости от задания пользователь:

1. нажимает на слова в нужном порядке;
2. выбирает слова цифровыми клавишами;
3. переставляет слова или буквы с помощью Drag and Drop.

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

Результат сохраняется в браузере вместе с именем игрока и выбранным уровнем сложности.

---

Технологический стек

• HTML5
• CSS3
• JavaScript
• DOM API
• Browser Events
• Drag and Drop API
• Web Storage API
• SVG
• CSS-анимации
• адаптивная вёрстка
• GitHub Pages

Проект не требует отдельного backend-сервера или базы данных.

---

Структура проекта

Fresh-House/
├── index.html                         # Главная страница
├── feedback.html                      # Отзывы и обратная связь
├── about-us.html                      # Информация о компании
├── tasks.html                         # Интерактивные задания
├── politics.html                      # Политика обработки данных
├── 404.html                           # Страница ошибки
├── css/                               # Общие стили и стили страниц
├── js/
│   ├── script1.js                     # Навигация и поведение сайта
│   ├── task.js                        # Учебные задачи
│   ├── dom-test.js                    # Работа с DOM
│   ├── svg_task.js                    # SVG-анимация
│   └── words.js                       # Drag and Drop слов
└── Game_Likhacheva_SearchOfWords/
    ├── index.html                     # Стартовый экран игры
    ├── levels.html                    # Игровой экран
    ├── score.html                     # Таблица результатов
    ├── css/                           # Стили игры
    └── js/
        ├── game.js                    # Модели игры и уровней
        ├── levels.js                  # Механики и подсчёт очков
        ├── score.js                   # Рейтинг игроков
        └── help_and_theme.js          # Помощь и оформление

---

Локальный запуск

Вариант 1 — открыть файл

Склонируйте репозиторий и откройте index.html в браузере:

git clone https://github.com/Gonerr/Fresh-House.git
cd Fresh-House

Вариант 2 — локальный статический сервер

npx serve .

После запуска откройте адрес, указанный в терминале.

---

Реализованные технические решения

• многостраничная структура статического сайта;
• адаптивная навигация;
• собственный графический логотип на HTML, CSS и SVG;
• обработка прокрутки страницы;
• динамическое создание и изменение DOM-элементов;
• перетаскивание элементов;
• обработка клавиатурных событий;
• таймер и система очков;
• разные алгоритмы проверки ответа;
• настройка сложности;
• сохранение и сортировка результатов в браузере;
• разделение игровой логики на отдельные модули.

---

Текущее состояние и развитие

Сайт и игра работают полностью на клиентской стороне.

Возможные направления развития:

• подключить backend для заявок и отзывов;
• добавить валидацию и сообщения об успешной отправке форм;
• убрать дублирующую копию каталога игры;
• разделить крупный файл игровой логики на модули;
• добавить тесты для проверки уровней и подсчёта очков;
• улучшить доступность элементов управления;
• оптимизировать изображения;
• добавить метаданные для поисковых систем;
• настроить автоматическую публикацию GitHub Pages.

---

Автор

Анастасия Лихачева

Проект разработан в рамках учебного курса по созданию веб-приложений на JavaScript.