Тестовое задание 13 Jul 2024
castor - пять экранов DivKit, собранных в один доступный флоу
- DivKit
- Server-Driven UI
- HTML
- CSS
- Express
- Cloudflare
Пять paywall/onboarding-экранов на DivKit - каждый отдельный HTML-документ, рендерящий server-driven JSON-карточку в рамку телефона - без перехода между собой, с дублированным заглушечным текстом, картинками по ссылкам на устаревшие репозитории, фиксированной высотой, обрезавшей контент, чисто чёрно-белой палитрой и без доступности. Собрал их в один цельный флоу: слой навигации поверх вывода DivKit (таб-бар, стрелки назад/вперёд, управление клавишами и свайпом - всё как прогрессивное улучшение поверх обычных ссылок), полную адаптивность (на телефоне во весь экран, на десктопе в рамке устройства, авто-высота со скроллом вместо обрезки, починен баг переполнения 100vw) и доступность по всему (лендмарки, семантика заголовков, видимый фокус, reduced-motion, skip-ссылка, реальный alt-текст, доступные имена и действия на каждой кнопке, семантика radio-группы на выборе тарифа). Заменил дублированный и заглушечный текст на правдоподобный, починил бессмысленные подписи периодов цен, разместил локально каждую иконку и картинку, убрал невалидные свойства DivKit и отладочные артефакты и свёл все пять экранов к единой системе дизайн-токенов на OKLCH. DivKit и dev-сервер на Express, задеплоено статикой на Cloudflare Pages.