Обʼєм робіт
Прототип покриває 27 екранів з брифу + документація. Файли HTML/CSS — готова основа для верстальника на WordPress / Lisfinity 1.5.
Готові HTML-екрани
29
десктоп + адаптив
Компоненти в DS
28
кнопки · картки · форми
User flows
6
покупець · продавець · бізнес · реклама · скарга
Кольорових тем
6
через Tweaks → live preview
Список екранів (deliverables)
| № | Екран | Файл | Статус | Примітки |
|---|---|---|---|---|
| 1 | Головна | index.html | Готово | Hero · категорії · VIP · свіжі · CTA · новини |
| 2 | Категорія з фільтрами | listing.html | Готово | Фільтри · VIP-стрічка · карточки · пагінація |
| 3 | Категорія з картою | map.html | Готово | Split-view, пінки, кластери |
| 4 | Картка оголошення | ad.html | Готово | Галерея · sticky-продавець · опис · схожі |
| 5 | Профіль продавця | seller.html | Готово | Хедер · табы · сітка оголошень |
| 6 | ЛК — Дашборд | dashboard.html | Готово | KPI · графік · топ-3 · активність |
| 7 | ЛК — Мої оголошення | my-ads.html | Готово | Табы · bulk-дії · продвинення |
| 8 | ЛК — Додати (майстер 4 кроки) | add-ad.html | Готово | Стипери · превью · автозбереження UI |
| 9 | ЛК — Чат | chat.html | Готово | Threads · діалог · швидкі відповіді |
| 10 | Тарифи | pricing.html | Готово | 4 пакети · порівняльна таблиця · FAQ |
| 11 | Новини — стрічка | news.html | Готово | Featured · сітка · сайдбар · підписка |
| 12 | Стаття | article.html | Готово | Serif typography · TOC · автор · ad-зона |
| 13 | Рекламодавцям | advertisers.html | Готово | Hero · формати · кейс · форма заявки |
| 14 | Вхід | login.html | Готово | Email · соцлогін · «забули пароль» |
| 15 | Реєстрація + OTP | register.html | Готово | 2 кроки в одному файлі (форма + код) |
| 16 | 404 | 404.html | Готово | Топ-категорії як швидкі шляхи |
| 17 | Карта сайту | sitemap.html | Готово | Документація для дев-команди |
| 18 | User flows | flows.html | Готово | 6 ключових сценаріїв з бріфу |
| 19 | Дизайн-система | design-system.html | Готово | Кольори · типографіка · spacing · компоненти |
| 20 | Обʼєм робіт | deliverables.html | Готово | Цей файл — карта прогресу |
| — | Кабінет та інформаційні сторінки (випущено в межах роботи): | |||
| 21 | Обране | favorites.html | Готово | Таби по категоріях · маркер «подешевшало» |
| 22 | Збережені пошуки / Підписки | saved-searches.html | Готово | Тогли · чипи фільтрів · канали сповіщень |
| 23 | Гаманець / транзакції | wallet.html | Готово | Баланс · витрати · картки · таблиця транзакцій |
| 24 | Налаштування (вкл. 2FA, сесії) | settings.html | Готово | 6 вкладок: профіль · безпека · сповіщення · мова · бізнес · видалення |
| 25 | Стрічка сповіщень | notifications.html | Готово | Групування за днями · непрочитані · фільтри |
| 26 | FAQ / Допомога | faq.html | Готово | 8 категорій · топ-FAQ · канали підтримки |
| 27 | Юридична інформація (все в одному) | legal.html | Готово | Terms · Privacy · Cookies · Правила · Безпечні угоди |
| 28 | Про компанію / Контакти | about.html | Готово | Цифри · таймлайн · команда · офіси |
| — | Наступний етап (за окремою домовленістю): | |||
| 29 | Сторінка автора (новини) | — | Далі | Аналогічно seller.html, статті замість оголошень |
| 30 | Карʼєра / вакансії | — | Пізніше | Джоб-борд для Markt-команди |
| 31 | Email-шаблони | — | Пізніше | Реєстрація · нове повідомлення · прострочка |
Адаптив
Mobile · 320–767px
- 1 колонка
- Tap-bar внизу екрану
- Фільтри як full-screen overlay
- Hide-mobile / hide-desktop хелпери
Tablet · 768–1023px
- 2-3 колонки в сітках
- Footer 4 колонки
- Sticky search bar
Desktop · 1024–1439px
- 3-4 колонки
- Listing з фільтрами + right rail
- Карта split-view
Wide · 1440px+
- max-width: 1280px
- 6 колонок у grid-cats
Рекламні зони
| Зона | Розмір (десктоп) | Розмір (мобайл) | Сторінки |
|---|---|---|---|
| Top banner | 970×90 / 970×250 | 320×100 | Усі |
| Right sidebar top | 300×250 | — | Лістинги, новини, стаття |
| Right sidebar bottom | 300×600 (sticky) | — | Лістинги, новини |
| In-content (між картками) | 728×90 | 320×100 | Лістинги |
| Article inline | 728×250 / нативний | 320×250 | Статті |
| Footer banner | 970×90 | 320×100 | Усі |
| Listing-card-як-реклама | звичайна картка | — | Грід оголошень |
Готово до передачі розробці
Усі файли HTML/CSS/JS — у структурі проєкту. Дизайн-токени як CSS-змінні легко переносяться у Sass / WP-тему.