Web-Dev-For-Beginners/translations/bg/7-bank-project/2-forms/assignment.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
  "translation_date": "2025-10-24T22:51:08+00:00",
  "source_file": "7-bank-project/2-forms/assignment.md",
  "language_code": "bg"
}
-->
# Стилизирайте вашето банково приложение с модерни CSS

## Преглед на проекта

Превърнете вашето функционално банково приложение във визуално привлекателно, професионално изглеждащо уеб приложение, използвайки модерни CSS техники. Ще създадете цялостна дизайнерска система, която подобрява потребителското изживяване, като същевременно спазва принципите на достъпност и адаптивен дизайн.

Тази задача ви предизвиква да приложите съвременни модели за уеб дизайн, да внедрите последователна визуална идентичност и да създадете интерфейс, който потребителите ще намерят както привлекателен, така и интуитивен за навигация.

## Инструкции

### Стъпка 1: Настройте вашия стилов файл

**Създайте основата на вашия CSS:**

1. **Създайте** нов файл, наречен `styles.css`, в основната директория на проекта.
2. **Свържете** стиловия файл във вашия файл `index.html`:
   ```html
   <link rel="stylesheet" href="styles.css">
   ```
3. **Започнете** с CSS reset и модерни настройки:
   ```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 и минимален размер на файла.
- **Тестване на съвместимост с браузъри**, осигуряващо съвместимост с различни браузъри.

> 💡 **Съвет**: Започнете първо с дизайн за мобилни устройства, след това го подобрете за по-големи екрани. Този подход, ориентиран към мобилни устройства, гарантира, че вашето приложение работи добре на всички устройства и следва най-добрите практики за съвременна уеб разработка.

---

**Отказ от отговорност**:  
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.