Паспорт сайта «Моя мебель»

Общие сведения

Назначение и целевое действие

Задача сайта: показать качество работ мастерской и довести посетителя до заявки.

Логика движения по сайту: увидеть работы → понять порядок и цену → оставить контакты. Все три действия доступны с любой страницы: кнопка «Обсудить проект» в шапке, телефоны в подвале, форма в конце главной.

Целевая аудитория

Структура и метаданные

Главная            index.html                  первый экран · проекты · подход · цена · о компании ·
                                               развороты · лента · порядок работы · вопросы · шоурумы · замер
Работы             gallery.html                57 фото, 7 фильтров, просмотр кадра крупно
Проекты            project-kitchen-blue.html   Кухня в современном стиле
                   project-bedroom.html        Спальня целиком
                   project-nisha.html          Рабочая зона в нише
Расчёт кухни       calculator.html             конфигуратор из 7 групп параметров
Салоны и контакты  contacts.html               2 салона, карты, форма обращения
Знак (служебная)   logo-lab.html               варианты фирменного знака

Меню

Проекты · Кухни · Шкафы и гардеробные · О компании · Шоурумы · Контакты. Справа — кнопка «Обсудить проект». Конфигуратор в меню не выведен: это инструмент, а не раздел, на него ведут кнопки из текста.

Заголовки и описания страниц

Функциональные возможности

• Галерея с фильтрами — 57 работ, семь тем; выбранная тема попадает в адрес страницы, ссылку можно отправить;
• Просмотр кадра крупно — на встроенном элементе <dialog>, листание стрелками и с клавиатуры;
• Конфигуратор кухни — форма, размеры, фасады, столешница, фурнитура, фартук, подарок; сводка пересобирается на глазах;
• Три формы заявок — запись на замер, отправка расчёта, обращение из контактов; с проверкой заполнения;
• Светлое и тёмное оформление — переключается вручную, запоминается; при первом визите берётся системная настройка;
• Вопросы и ответы — девять раскрывающихся блоков, работают без скриптов;
• Возврат наверх — появляется после полутора экранов прокрутки.

Контент и источники

Технологии

Разметка и стили

• HTML5, семантические теги, микроразметка Schema.org: FurnitureStore и FAQPage;
• CSS с каскадными слоями @layer: tokens → base → layout → components → motion → utils;
• система переменных: палитра, шрифтовая шкала и ритм заданы в одном месте;
• «резиновая» типографика на clamp() — размеры тянутся за шириной экрана;
• раскладка на Grid и Flexbox, subgrid, color-mix(), селектор :has();
• анимации по прокрутке через animation-timeline: view(), переходы View Transitions при смене оформления;
• content-visibility: auto — браузер не рисует то, что вне экрана;
• логотип подключён маской mask, поэтому перекрашивается вместе с темой.

Скрипты

• чистый JavaScript ES2022, без библиотек; 202 строки;
• IntersectionObserver — появление блоков и линия под шапкой;
• нативный <dialog> вместо сторонних галерей;
• обращение к памяти браузера обёрнуто в защиту: если доступ закрыт, сайт продолжает работать;
• каждый блок выполняется отдельно — ошибка в одном не гасит остальные;
• без JavaScript страница остаётся читаемой: содержимое видно, вопросы раскрываются, формы отображаются.

Требования к размещению

Любой хостинг статических файлов. Серверная часть, база данных и панель управления не требуются. Для приёма заявок нужно подключить обработчик форм — почтовый или CRM.

Дизайн-система

Палитра

Шрифты

Playfair Display — заголовки, антиква с высоким контрастом штрихов. Manrope — весь остальной текст, гротеск. Сочетание антиквы и гротеска — приём интерьерных изданий.

Фирменный знак

Монограмма заказчика переведена из PDF в вектор и подключена CSS-маской: на светлом оформлении тёмно-зелёная, на тёмном — золотая. Подготовлены пять альтернативных вариантов знака (страница logo-lab.html).

Принципы вёрстки

• крупные фотографии, широкие поля, отсутствие типовых иконок;
• полноширинные кадры и развороты «текст слева, кадры справа»;
• ограничение строки 60–74 знака для читаемости;
• единый ритм отступов от одной переменной.

Адаптивность и доступность

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

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

Формы и персональные данные

На сайте три формы. Собираются имя, телефон, при желании почта и комментарий. В текущей версии отправка не подключена: данные не покидают браузер, под каждой формой это указано.

Перед запуском необходимо:

• подключить обработчик отправки (почта, Telegram или CRM);
• разместить политику обработки персональных данных и связать её ссылкой с формами;
• добавить отметку согласия перед отправкой;
• подать уведомление в Роскомнадзор как оператор персональных данных.

Сопровождение

Развитие

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

Состав проекта

moyamebel/
├── index.html · gallery.html · calculator.html · contacts.html
├── project-kitchen-blue.html · project-bedroom.html · project-nisha.html
├── logo-lab.html · pasport.html
├── css/style.css          739 строк
├── js/app.js              202 строки
└── img/
    ├── f/                 114 файлов — подготовленные работы, WebP × 2 размера
    ├── original/          исходные снимки
    └── logo-mark.svg · logo-full.svg · favicon.png