Скриншотное сравнение с оригиналом
Состояние на 2 октября 2026, 20:11 МСК. Сравнивались главные страницы атманки.рф и сайт стенда. Копия пока заметно отличается от оригинала: перенесённые фотографии, логотип и шрифт не обеспечивают совпадения структуры и адаптивной верстки.
Открыть просмотрщик пар снимков. Для переключения разделов откройте HTML локально в браузере. Исходные измерения. Сохранены 24 PNG: полные страницы, первые экраны и отдельные разделы.
Методика и границы
Один Chromium, deviceScaleFactor 1, viewport 1440 × 1000 и 390 × 844. Перед съёмкой дождались контента и шрифтов, прокрутили страницу для загрузки ленивых изображений. Снимки разделов выровнены по заголовкам, а не абсолютной координате страницы. Верстку, данные и DOM для сравнения не подменяли. На первом слайде обеих страниц одна фотография и заголовок сезона 2025. Мобильный снимок сделан узким viewport Chromium, без эмуляции конкретного телефона.
Это разовый визуальный аудит главной страницы, а не автоматические UI-тесты. Внутренние страницы, все состояния каруселей и раскрытые ответы FAQ не проверялись. Реклама карт и чат оригинала динамические; их содержимое не критерий совпадения. Общий процент различающихся пикселей не вычислялся: разный порядок и высота блоков делают его малоинформативным.
Измерения
| Экран | Оригинал | Копия |
|---|---|---|
| Desktop: ширина документа | 1440 px | 1440 px |
| Desktop: высота страницы | 11587 px | 7750 px |
| Mobile: ширина документа при viewport 390 px | 390 px | 605 px |
| Mobile: высота страницы | 12917 px | 12328 px |
| Не загрузившиеся DOM-изображения | 0 | 0 |
Проверка изображений относится к элементам img, а не CSS-фонам.
Шрифт MADE Likes Slab загрузился на обеих страницах; расхождения типографики
связаны с размером, начертанием и оформлением блоков.
Отличия и приоритет исправлений
| Приоритет | Блок | Оригинал | Копия и необходимое изменение |
|---|---|---|---|
| P0 | Мобильная шапка | Логотип, дата и статус расположены друг под другом; горизонтального переполнения нет | Шапка остаётся строкой, дата выходит вправо; ширина 605 вместо 390 px. Исправить адаптивное расположение и скрытие элементов |
| P0 | Навигация | Desktop: одна строка; mobile: бургер | Одновременно видны обычное меню и мобильный бургер, включая desktop. Исправить правила видимости |
| P1 | Первый экран | Награды в одном горизонтальном ряду; фото начинается примерно на y=459 | Награды в двух рядах, меню выше; фото начинается примерно на y=669. Вернуть геометрию шапки и карусель наград |
| P1 | Порядок блоков | Организаторы и партнёры стоят перед новостями и между другими разделами | Все группы собраны ниже программы; восстановить порядок секций |
| P1 | Новости | Desktop: горизонтальная главная карточка и пять небольших ниже; mobile: одна карточка карусели | Desktop: большая обрезанная фотография и две карточки справа; mobile: вертикальная лента. Воспроизвести карточки и карусели |
| P1 | Программа | Вкладки дней, иллюстрация и расписание с временем и площадками | Три большие карточки событий вместо расписания. Сделать представление программы по дням |
| P1 | Как добраться | Два варианта маршрута и большая карта | Краткое текстовое описание и кнопка. Добавить маршруты и карту |
| P1 | Размещение | Две карточки для гостей и участников, затем карта | Одна сокращённая строка текста и ссылка. Восстановить полные карточки и карту |
| P2 | Партнёры | Горизонтальные карусели логотипов | Статические сетки; другие порядок и занимаемая высота |
| P2 | FAQ | «Часто задаваемые вопросы», крупнее текст, сиреневый фон и другой порядок | «Вопросы и ответы», меньше текст и иконки, серый фон. Восстановить порядок и размеры |
| P2 | Тексты и кнопки | Дата «22–24 августа 2025 года», красные основные кнопки | Дата в ISO-формате, серые кнопки, местами обрезана подпись «Подробнее». Настроить форматирование и размеры |
Сокращённые блоки на главной не означают отсутствия исходного материала в CMS: здесь оценивается именно его отображение на главной странице.
Где искать причины
- Шапка и меню, их CSS Modules.
При ширине 390 px вычисленные стили Mantine Group оставляют
flex-direction: rowиflex-wrap: nowrap, хотя в CSS Modules задана колонка. Также не срабатывает предполагаемое скрытие desktop-навигации. Нужно проверить каскад и приоритет стилей Mantine; точная причина конфликтующих правил этим аудитом не установлена. - Главная страница: порядок секций и выбор трёх новостей/событий.
- Карточки: геометрия новостей и событий.
- Информационные разделы: сокращённые описания вместо маршрутов, карт и карточек размещения.
- Партнёры и награды: сетки вместо каруселей.
Начать следует с P0: пока шапка переполняет экран и меню дублируется, подгонка остальных мобильных отступов не даст корректной основы. Затем восстановить порядок и состав секций, после этого размеры, цвета и детали. Верстка в рамках этого аудита не изменялась.