Мій гаманець
Розроблений темний інтерфейс веб-додатку для запису та відстеження доходів і витрат у розрізі часових періодів.
Реалізований функціонал:
Шапка додатку з назвою та перемикачем періодів (Тиждень / Місяць / Рік / Увесь час) — реалізовано через групу кнопок з активним станом (active state через CSS-клас)
Двохколонний layout на CSS Grid: стрічка транзакцій (Feed) зліва та зведена панель (Summary) справа
Блок Summary з сіткою показників: Доходи (зелений), Витрати (червоний), Баланс (жовтий) — кольорове кодування даних через CSS-змінні
Блок By Category для відображення витрат за категоріями
Порожні стани (empty states) для блоків без даних з підказками користувачу
Фіксована кнопка + Додати запис внизу екрану (position: fixed / sticky) з закругленими краями та фіолетовим акцентним кольором
Темна тема оформлення (dark theme) з багатошаровими відтінками фону для створення візуальної глибини між шарами
Реалізований функціонал:
Шапка додатку з назвою та перемикачем періодів (Тиждень / Місяць / Рік / Увесь час) — реалізовано через групу кнопок з активним станом (active state через CSS-клас)
Двохколонний layout на CSS Grid: стрічка транзакцій (Feed) зліва та зведена панель (Summary) справа
Блок Summary з сіткою показників: Доходи (зелений), Витрати (червоний), Баланс (жовтий) — кольорове кодування даних через CSS-змінні
Блок By Category для відображення витрат за категоріями
Порожні стани (empty states) для блоків без даних з підказками користувачу
Фіксована кнопка + Додати запис внизу екрану (position: fixed / sticky) з закругленими краями та фіолетовим акцентним кольором
Темна тема оформлення (dark theme) з багатошаровими відтінками фону для створення візуальної глибини між шарами