<p><b>Задание на HTML-верстку</b></p><p></p><p><b>Общее</b></p><p></p><ul><li><p>Тип работ: статическая HTML5-верстка по двум макетам: Desktop.pdf и Mobile.pdf (адаптив от 360px до 1920px+).</p></li><li><p>Код: чистый HTML5 + CSS3 (без фреймворков). JS — только нативный и только для интерактивов (мобильное меню, табы/фильтры, счётчик и т.п.).</p></li><li><p>Стиль кода: БЭМ-нейминг, семантическая разметка, валидный W3C, аккуратные отступы.</p></li><li><p>Кросс-браузерность: последние 2 версии Chrome, Firefox, Edge; Safari 15+ (macOS/iOS).</p></li><li><p>Производительность: изображения в WebP/AVIF + fallback, SVG-иконки, спрайты, lazy-loading.</p></li><li><p>Аксессибилити: корректные label/aria для форм, фокус-состояния, контраст.</p></li><li><p>SEO-база: корректные <title>, meta, OpenGraph на главной/карточке товара.</p></li><li><p>Исходники: структурированный проект, README с инструкцией запуска, архив + репозиторий.</p></li></ul><p></p><p></p><p></p><p><b>Экраны / страницы (минимальный состав)</b></p><p></p><p></p><p>Ориентируемся на тексты и блоки из макетов:</p><p></p><ul><li><p>Главная: хиро-блок «macarons & tattiler», CTA «Перейти в каталог», шапка/подвал с графиком работы и языками RU/KZ/EN. </p></li><li><p>Каталог: сетка карточек с бейджами «Популярное/Новинка/Хит/Нет в наличии», фильтры/категории (Macarons, Финики, Печенье, Боксы и пр.).</p></li><li><p>Карточка товара (пример «Крамбл Кукис Шоколадный», цена, описание, состав, «Добавить в корзину», примечание про опт).</p></li><li><p>Бокс-конструктор (набор до 12 шт., счётчики, «Выбрать/Изменить наполнение», сумма).</p></li><li><p>Корзина (листинг позиций, «Рекомендуем», «Продолжить покупки/Оформить заказ», «Промокод»). </p></li><li><p>Оформление заказа (доставка/самовывоз, оплата, получатель, комментарий, чекбокс «Заказ подтверждаю»). </p></li><li><p>Авторизация: вход по телефону, ввод 6-значного кода, состояния таймера/ошибки («Осталось 2 попытки»). Поведение таймера — статичное (имитируем). </p></li><li><p>Кабинет пользователя: профиль (имя/телефон/адрес), история заказов, купоны (активировать/активен). </p></li><li><p>Экран успеха «Ваш заказ принят / № заказа».</p></li></ul><p></p><p></p><p>Если каких-то текстов/фото нет — использовать заглушки и семплы, но разметку и состояния повторить.</p><p></p><p></p><p><b>Интерактивы (минимум на ванильном JS)</b></p><p></p><p></p><ul><li><p>Мобильное меню/бургер; табы/фильтры каталога; инкремент/декремент количества в корзине/боксе; переключение способов доставки/оплаты; показ/скрытие купонов; модалки «Вы уверены, что хотите выйти?», «Подтвердите номер». Таймер кода — имитация (обратный отсчёт без реальной логики SMS).</p></li></ul><p></p><p></p><p></p><p><b>Адаптив</b></p><p></p><p></p><ul><li><p>Mobile-first. Ключевые брякпоинты: 360/480/768/1024/1440+ (допустима своя сетка при неизменном визуале). Элементы/отступы/кегли — как в макетах мобильной и десктопной версий. </p></li></ul><p></p><p></p><p></p><p><b>Графика/шрифты</b></p><p></p><p></p><ul><li><p>Экспорт SVG для логотипов/иконок; изображения товаров — WebP + 2x версии. Подключение шрифтов через @font-face (woff2 приоритет). Фавиконки + webmanifest.</p></li></ul><p></p><p></p><p></p><p><b>Ограничения</b></p><p></p><p></p><ul><li><p>Никаких UI-библиотек (Bootstrap, Tailwind и т.п.), никаких сборщиков (если не оговорено). Допустимо подключить PostCSS/Autoprefixer через простую NPM-скрипт-сборку (без сложного конфига) — по согласованию.</p></li></ul><p></p><p></p><p></p><p><b>Критерии приёмки</b></p><p></p><p></p><ul><li><p>Пиксель-перфоманс (±2px) на ключевых брякпоинтах.</p></li><li><p>Валидатор W3C без критичных ошибок. Lighthouse: Performance/Best Practices/SEO ? 90 на десктопе (на заглушках).</p></li><li><p>Формы кликабельны, состояния работают (фокус/ошибки/disabled).</p></li><li><p>Согласованная сетка и типографика между версиями.</p></li></ul><p></p><p></p><p></p><p><b>Сроки и этапы</b></p><p></p><p></p><ul><li><p>Старт: сразу после подтверждения.</p></li><li><p>Промежуточный показ (4 экрана): до среды, 10 сентября 2025 —<br /></p><ol><li><p>Главная, 2) Каталог, 3) Карточка товара, 4) Оформление заказа (ключевые состояния).</p></li></ol></li><li><p></p></li><li><p>Финал всей верстки: к вечеру четверга, 11 сентября 2025 (по местному времени исполнителя — уточнить в отклике).</p></li></ul><p></p><p></p><p></p><p><b>Оплата</b></p><p></p><p></p><ul><li><p>50/50: 50% предоплата, 50% — после приёмки финала (после устранения замечаний первой итерации). </p></li></ul><p></p><p>Ссылка на десктоп и мобильная версия pdf исполнителю предоставлю figma.</p><p><a href="https://wetransfer.com/downloads/65e90bf6731eab417ba4e2741d22b7eb20250909064138/917acb?t_exp=1757659298&t_lsid=93ba27c2-3336-4fa1-87bd-bbc6b414a808&t_network=link&t_rid=ZW1haWx8YWRyb2l0fDkwZGExOGY1LWUyZjQtNDZiNC04YzVlLTA3Y2U1OTA5Nzc3Nw==&t_s=download_link&t_ts=1757400162&utm_campaign=TRN_TDL_05&utm_source=sendgrid&utm_medium=email&trk=TRN_TDL_05">https://wetransfer.com/downloads/65e90bf6731eab417ba4e2741d22b7eb20250909064138/917acb?t_exp=1757659298&t_lsid=93ba27c2-3336-4fa1-87bd-bbc6b414a808&t_network=link&t_rid=ZW1haWx8YWRyb2l0fDkwZGExOGY1LWUyZjQtNDZiNC04YzVlLTA3Y2U1OTA5Nzc3Nw==&t_s=download_link&t_ts=1757400162&utm_campaign=TRN_TDL_05&utm_source=sendgrid&utm_medium=email&trk=TRN_TDL_05</a></p><p></p><p><b>Что прислать в отклике (фрилансеру)</b></p><p></p><p></p><ol><li><p>Ссылки на 2–3 похожие по уровню работы (адаптив, каталог, формы, модалки).</p></li><li><p>Краткий план: чем будет собираться CSS (чистый CSS/SCSS), как организует БЭМ-структуру.</p></li><li><p>Сроки по этапам (под наши даты) + доступность в мессенджере днём.</p></li><li><p>Ставка за проект «под ключ».</p></li></ol>
