# Стилізуйте ваш банківський додаток за допомогою сучасного CSS ## Огляд проєкту Перетворіть ваш функціональний банківський додаток на привабливий, професійний веб-додаток, використовуючи сучасні техніки CSS. Ви створите цілісну систему дизайну, яка покращить користувацький досвід, зберігаючи принципи доступності та адаптивного дизайну. Це завдання спонукає вас застосувати сучасні шаблони веб-дизайну, впровадити послідовну візуальну ідентичність і створити інтерфейс, який буде одночасно привабливим і зручним для навігації. ## Інструкції ### Крок 1: Налаштуйте ваш файл стилів **Створіть основу для вашого CSS:** 1. **Створіть** новий файл під назвою `styles.css` у кореневій папці вашого проєкту. 2. **Підключіть** файл стилів у вашому `index.html`: ```html ``` 3. **Почніть** з CSS-скидання та сучасних налаштувань: ```css /* Modern CSS reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; } ``` ### Крок 2: Вимоги до системи дизайну **Реалізуйте ці основні елементи дизайну:** #### Колірна палітра - **Основний колір**: Оберіть професійний колір для кнопок і акцентів. - **Додатковий колір**: Доповнюючий колір для акцентів і другорядних дій. - **Нейтральні кольори**: Відтінки сірого для тексту, рамок і фону. - **Кольори успіху/помилки**: Зелений для станів успіху, червоний для помилок. #### Типографіка - **Ієрархія заголовків**: Чітке розмежування між елементами H1, H2 і H3. - **Основний текст**: Зручний для читання розмір шрифту (мінімум 16px) і відповідна висота рядка. - **Мітки форм**: Чітке, доступне стилювання тексту. #### Макет і відступи - **Послідовні відступи**: Використовуйте шкалу відступів (8px, 16px, 24px, 32px). - **Сіткова система**: Організований макет для форм і секцій контенту. - **Адаптивний дизайн**: Підхід "спочатку мобільний" із точками перелому. ### Крок 3: Стилізація компонентів **Стилізуйте ці конкретні компоненти:** #### Форми - **Поля вводу**: Професійні рамки, стани фокусу та стилізація перевірки. - **Кнопки**: Ефекти наведення, стани вимкнення та індикатори завантаження. - **Мітки**: Чітке позиціонування та індикатори обов'язкових полів. - **Повідомлення про помилки**: Видиме стилювання помилок і корисні повідомлення. #### Навігація - **Заголовок**: Чистий, брендований навігаційний блок. - **Посилання**: Чіткі ефекти наведення та індикатори активного стану. - **Логотип/Назва**: Впізнаваний елемент брендування. #### Зони контенту - **Секції**: Чітке візуальне розділення між різними зонами. - **Карти**: Якщо використовується макет на основі карток, додайте тіні та рамки. - **Фони**: Відповідне використання білого простору та ненав'язливих фонів. ### Крок 4: Покращені функції (опціонально) **Розгляньте реалізацію цих розширених функцій:** - **Темний режим**: Перемикання між світлою та темною темами. - **Анімації**: Ненав'язливі переходи та мікроінтеракції. - **Стан завантаження**: Візуальний зворотний зв'язок під час надсилання форм. - **Адаптивні зображення**: Оптимізовані зображення для різних розмірів екранів. ## Натхнення для дизайну **Характеристики сучасного банківського додатка:** - **Чистий, мінімалістичний дизайн** із достатньою кількістю білого простору. - **Професійні колірні схеми** (сині, зелені або елегантні нейтральні тони). - **Чітка візуальна ієрархія** з помітними кнопками заклику до дії. - **Доступні контрастні співвідношення**, що відповідають рекомендаціям WCAG. - **Адаптивні макети**, які працюють на всіх пристроях. ## Технічні вимоги ### Організація CSS ```css /* 1. CSS Custom Properties (Variables) */ :root { --primary-color: #007bff; --secondary-color: #6c757d; /* Add more variables */ } /* 2. Base Styles */ /* Reset, typography, general elements */ /* 3. Layout */ /* Grid, flexbox, positioning */ /* 4. Components */ /* Forms, buttons, cards */ /* 5. Utilities */ /* Helper classes, responsive utilities */ /* 6. Media Queries */ /* Responsive breakpoints */ ``` ### Вимоги до доступності - **Контрастність кольорів**: Забезпечте співвідношення не менше 4.5:1 для звичайного тексту. - **Індикатори фокусу**: Видимі стани фокусу для навігації за допомогою клавіатури. - **Мітки форм**: Правильно асоційовані з полями вводу. - **Адаптивний дизайн**: Зручний для використання на екранах від 320px до 1920px шириною. ## Оцінювальна шкала | Критерій | Відмінно (A) | Добре (B) | Задовільно (C) | Потребує покращення (F) | |----------|--------------|------------|----------------|-------------------------| | **Система дизайну** | Реалізована комплексна система дизайну з послідовними кольорами, типографікою та відступами | Використано послідовне стилювання з чіткими шаблонами дизайну та гарною візуальною ієрархією | Базове стилювання з деякими проблемами послідовності або відсутніми елементами дизайну | Мінімальне стилювання з непослідовними або конфліктуючими виборами дизайну | | **Користувацький досвід** | Створено інтуїтивний, професійний інтерфейс із чудовою зручністю та візуальною привабливістю | Забезпечено гарний користувацький досвід із чіткою навігацією та читабельним контентом | Базова зручність із необхідністю покращення UX | Погана зручність, складно навігувати або читати | | **Технічна реалізація** | Використано сучасні техніки CSS, організовану структуру коду та дотримано найкращих практик | Ефективно реалізовано CSS із гарною організацією та відповідними техніками | CSS працює правильно, але може бракувати організації або сучасного підходу | Погана реалізація CSS із технічними проблемами або проблемами сумісності з браузерами | | **Адаптивний дизайн** | Повністю адаптивний дизайн, який чудово працює на всіх розмірах пристроїв | Гарна адаптивність із незначними проблемами на деяких екранах | Базова адаптивність із деякими проблемами макету | Неадаптивний або значні проблеми на мобільних пристроях | | **Доступність** | Відповідає рекомендаціям WCAG із чудовою навігацією за допомогою клавіатури та підтримкою екранних читачів | Гарні практики доступності з правильним контрастом і індикаторами фокусу | Базові міркування щодо доступності з деякими відсутніми елементами | Погана доступність, складно для користувачів із обмеженими можливостями | ## Інструкції щодо подання **У вашому поданні включіть:** - **styles.css**: Ваш повний файл стилів. - **Оновлений HTML**: Будь-які зміни, які ви внесли до HTML. - **Скріншоти**: Зображення, що показують ваш дизайн на настільних і мобільних пристроях. - **README**: Короткий опис ваших виборів дизайну та колірної палітри. **Додаткові бали за:** - **CSS-змінні** для зручного налаштування тем. - **Розширені функції CSS**, такі як Grid, Flexbox або анімації CSS. - **Міркування щодо продуктивності**, такі як оптимізований CSS і мінімальний розмір файлу. - **Тестування сумісності** для забезпечення роботи в різних браузерах. > 💡 **Порада**: Починайте з дизайну для мобільних пристроїв, а потім покращуйте для більших екранів. Такий підхід "спочатку мобільний" гарантує, що ваш додаток добре працює на всіх пристроях і відповідає сучасним найкращим практикам веб-розробки. --- **Відмова від відповідальності**: Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.