674 lines
29 KiB
HTML
674 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Мой бюджет</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌿</text></svg>">
|
||
<style>
|
||
:root{
|
||
--primary:#10B981;
|
||
--primary-dark:#059669;
|
||
--primary-light:#D1FAE5;
|
||
--secondary:#8B5CF6;
|
||
--warning:#F59E0B;
|
||
--danger:#EF4444;
|
||
--ink:#1F2937;
|
||
--gray-500:#6B7280;
|
||
--gray-200:#E5E7EB;
|
||
--gray-100:#F3F4F6;
|
||
--white:#FFFFFF;
|
||
--bg:#F9FAFB;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
|
||
|
||
/* Навигация */
|
||
.navbar{background:var(--white);border-bottom:1px solid var(--gray-200);padding:16px 20px;position:sticky;top:0;z-index:100}
|
||
.nav-container{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
|
||
.logo{font-size:24px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
|
||
.nav-links{display:flex;gap:8px}
|
||
.nav-link{padding:10px 16px;border-radius:8px;text-decoration:none;color:var(--gray-500);font-weight:500;transition:all .2s}
|
||
.nav-link:hover{background:var(--gray-100);color:var(--ink)}
|
||
.nav-link.active{background:var(--primary-light);color:var(--primary-dark)}
|
||
|
||
/* Мобильное меню */
|
||
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--gray-200);padding:8px 16px;z-index:100}
|
||
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;padding:8px;text-decoration:none;color:var(--gray-500);font-size:12px;border-radius:8px;transition:all .2s}
|
||
.mobile-nav-item.active{color:var(--primary);background:var(--primary-light)}
|
||
.mobile-nav-icon{font-size:20px;margin-bottom:2px}
|
||
|
||
/* Контейнер */
|
||
.container{max-width:1140px;margin:0 auto;padding:24px 20px}
|
||
|
||
/* Заголовки */
|
||
h1{font-size:28px;font-weight:700;margin-bottom:20px;color:var(--ink)}
|
||
h2{font-size:22px;font-weight:600;margin-bottom:16px}
|
||
h3{font-size:18px;font-weight:600;margin-bottom:12px}
|
||
|
||
/* Карточки */
|
||
.card{background:var(--white);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
|
||
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
|
||
|
||
/* Статистика */
|
||
.stat-card{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white);padding:24px;border-radius:16px}
|
||
.stat-card.secondary{background:linear-gradient(135deg,var(--secondary),#7C3AED)}
|
||
.stat-card.warning{background:linear-gradient(135deg,var(--warning),#D97706)}
|
||
.stat-card.danger{background:linear-gradient(135deg,var(--danger),#DC2626)}
|
||
.stat-label{font-size:14px;opacity:0.9;margin-bottom:8px}
|
||
.stat-value{font-size:32px;font-weight:700}
|
||
|
||
/* Кнопки */
|
||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}
|
||
.btn-primary{background:var(--primary);color:var(--white)}
|
||
.btn-primary:hover{background:var(--primary-dark)}
|
||
.btn-secondary{background:var(--gray-100);color:var(--ink)}
|
||
.btn-secondary:hover{background:var(--gray-200)}
|
||
.btn-danger{background:var(--danger);color:var(--white)}
|
||
.btn-block{width:100%}
|
||
|
||
/* Формы */
|
||
.form-group{margin-bottom:16px}
|
||
.form-label{display:block;margin-bottom:6px;font-weight:500;color:var(--ink)}
|
||
.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:1px solid var(--gray-200);border-radius:10px;font-size:15px;transition:border .2s}
|
||
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
|
||
.form-textarea{resize:vertical;min-height:80px}
|
||
|
||
/* Таблицы */
|
||
.table-container{overflow-x:auto}
|
||
.table{width:100%;border-collapse:collapse}
|
||
.table th{padding:12px;text-align:left;font-weight:600;color:var(--gray-500);font-size:13px;border-bottom:1px solid var(--gray-200)}
|
||
.table td{padding:14px 12px;border-bottom:1px solid var(--gray-100)}
|
||
.table tr:last-child td{border-bottom:none}
|
||
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
|
||
.badge-success{background:var(--primary-light);color:var(--primary-dark)}
|
||
.badge-warning{background:#FEF3C7;color:#D97706}
|
||
.badge-danger{background:#FEE2E2;color:var(--danger)}
|
||
|
||
/* Прогресс */
|
||
.progress-bar{background:var(--gray-200);border-radius:10px;height:10px;overflow:hidden}
|
||
.progress-fill{height:100%;background:var(--primary);border-radius:10px;transition:width .3s}
|
||
|
||
/* Модальные окна */
|
||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000}
|
||
.modal-overlay.active{display:flex}
|
||
.modal{background:var(--white);border-radius:16px;padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}
|
||
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
|
||
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--gray-500)}
|
||
|
||
/* Уведомления */
|
||
.toast{position:fixed;bottom:80px;right:20px;background:var(--ink);color:var(--white);padding:14px 20px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(100px);opacity:0;transition:all .3s;z-index:1001}
|
||
.toast.show{transform:translateY(0);opacity:1}
|
||
|
||
/* Экраны */
|
||
.screen{display:none}
|
||
.screen.active{display:block}
|
||
|
||
/* Рекомендации */
|
||
.tip-card{background:var(--primary-light);border-left:4px solid var(--primary);padding:16px;border-radius:8px;margin-bottom:12px}
|
||
.tip-icon{margin-right:8px}
|
||
|
||
/* Сравнение цен */
|
||
.price-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
|
||
.price-card{padding:12px;border:2px solid var(--gray-200);border-radius:10px;text-align:center;transition:all .2s}
|
||
.price-card.best{border-color:var(--primary);background:var(--primary-light)}
|
||
.price-value{font-size:18px;font-weight:700;color:var(--ink)}
|
||
.price-store{font-size:13px;color:var(--gray-500);margin-top:4px}
|
||
|
||
/* Адаптив */
|
||
@media (max-width:768px){
|
||
.nav-links{display:none}
|
||
.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
|
||
.container{padding:16px 16px 80px}
|
||
.stat-value{font-size:24px}
|
||
.card-grid{grid-template-columns:1fr}
|
||
.toast{left:20px;right:20px;bottom:70px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Навигация -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<div class="logo">🌿 Мой бюджет</div>
|
||
<div class="nav-links">
|
||
<a href="#dashboard" class="nav-link active" data-screen="dashboard">🏠 Главная</a>
|
||
<a href="#budget" class="nav-link" data-screen="budget">💰 Бюджет</a>
|
||
<a href="#expenses" class="nav-link" data-screen="expenses">💸 Расходы</a>
|
||
<a href="#products" class="nav-link" data-screen="products">🛒 Продукты</a>
|
||
<a href="#goals" class="nav-link" data-screen="goals">🐷 Цели</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Мобильная навигация -->
|
||
<div class="mobile-nav">
|
||
<a href="#dashboard" class="mobile-nav-item active" data-screen="dashboard">
|
||
<span class="mobile-nav-icon">🏠</span>
|
||
<span>Главная</span>
|
||
</a>
|
||
<a href="#budget" class="mobile-nav-item" data-screen="budget">
|
||
<span class="mobile-nav-icon">💰</span>
|
||
<span>Бюджет</span>
|
||
</a>
|
||
<a href="#expenses" class="mobile-nav-item" data-screen="expenses">
|
||
<span class="mobile-nav-icon">💸</span>
|
||
<span>Расходы</span>
|
||
</a>
|
||
<a href="#products" class="mobile-nav-item" data-screen="products">
|
||
<span class="mobile-nav-icon">🛒</span>
|
||
<span>Продукты</span>
|
||
</a>
|
||
<a href="#goals" class="mobile-nav-item" data-screen="goals">
|
||
<span class="mobile-nav-icon">🐷</span>
|
||
<span>Цели</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="container">
|
||
|
||
<!-- DASHBOARD -->
|
||
<div id="dashboard" class="screen active">
|
||
<h1>🌿 Август 2026</h1>
|
||
|
||
<div class="card-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-label">💰 Доход</div>
|
||
<div class="stat-value" id="dash-income">500 000 ₸</div>
|
||
</div>
|
||
<div class="stat-card secondary">
|
||
<div class="stat-label">💸 Расходы</div>
|
||
<div class="stat-value" id="dash-expenses">280 000 ₸</div>
|
||
</div>
|
||
<div class="stat-card warning">
|
||
<div class="stat-label">🐷 Накопления</div>
|
||
<div class="stat-value" id="dash-savings">100 000 ₸</div>
|
||
</div>
|
||
<div class="stat-card" style="background:linear-gradient(135deg,#06B6D4,#0891B2)">
|
||
<div class="stat-label">✨ Осталось</div>
|
||
<div class="stat-value" id="dash-left">120 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:16px">
|
||
<h2>📊 Прогресс цели</h2>
|
||
<div style="margin-bottom:8px;display:flex;justify-content:space-between">
|
||
<span>Отпуск ✈️</span>
|
||
<span>400 000 / 500 000 ₸</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width:80%"></div>
|
||
</div>
|
||
<div style="margin-top:8px;color:var(--gray-500);font-size:14px">80% достигнуто</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>💡 Советы</h2>
|
||
<div class="tip-card">
|
||
<span class="tip-icon">🌱</span>
|
||
<span>В этом месяце расходы на продукты снизились на 7%. Отличный результат!</span>
|
||
</div>
|
||
<div class="tip-card">
|
||
<span class="tip-icon">💡</span>
|
||
<span>Вы потратили на развлечения на 5 000 ₸ больше запланированного</span>
|
||
</div>
|
||
<div class="tip-card">
|
||
<span class="tip-icon">🛒</span>
|
||
<span>Если покупать продукты по самым низким ценам, можно сэкономить около 6 000 ₸</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- БЮДЖЕТ -->
|
||
<div id="budget" class="screen">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||
<h1>💰 Бюджет на месяц</h1>
|
||
<button class="btn btn-primary" onclick="openModal('budget-modal')">+ Категория</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px">
|
||
<div>
|
||
<strong>Доход:</strong> <span id="budget-income" style="color:var(--primary);font-size:20px;font-weight:700">500 000 ₸</span>
|
||
</div>
|
||
<div>
|
||
<strong>Запланировано:</strong> <span id="budget-planned" style="color:var(--secondary);font-size:20px;font-weight:700">440 000 ₸</span>
|
||
</div>
|
||
<div>
|
||
<strong>Остаток:</strong> <span id="budget-remaining" style="color:var(--primary-dark);font-size:20px;font-weight:700">60 000 ₸</span>
|
||
</div>
|
||
</div>
|
||
<div id="budget-warning" style="display:none;padding:12px;background:#FEE2E2;border-radius:8px;color:var(--danger);margin-bottom:16px">
|
||
⚠️ Запланированные расходы превышают ваш доход!
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="table-container">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Категория</th>
|
||
<th>План</th>
|
||
<th>Факт</th>
|
||
<th>Разница</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="budget-table-body">
|
||
<tr>
|
||
<td>🏠 Жильё</td>
|
||
<td>150 000 ₸</td>
|
||
<td>150 000 ₸</td>
|
||
<td><span class="badge badge-success">0 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🛒 Продукты</td>
|
||
<td>80 000 ₸</td>
|
||
<td>72 000 ₸</td>
|
||
<td><span class="badge badge-success">+8 000 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🚗 Транспорт</td>
|
||
<td>30 000 ₸</td>
|
||
<td>28 000 ₸</td>
|
||
<td><span class="badge badge-success">+2 000 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>📱 Связь</td>
|
||
<td>10 000 ₸</td>
|
||
<td>10 000 ₸</td>
|
||
<td><span class="badge badge-success">0 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🎉 Развлечения</td>
|
||
<td>30 000 ₸</td>
|
||
<td>35 000 ₸</td>
|
||
<td><span class="badge badge-danger">−5 000 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🐷 Накопления</td>
|
||
<td>100 000 ₸</td>
|
||
<td>100 000 ₸</td>
|
||
<td><span class="badge badge-success">0 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🆘 Резерв</td>
|
||
<td>20 000 ₸</td>
|
||
<td>0 ₸</td>
|
||
<td><span class="badge badge-success">+20 000 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- РАСХОДЫ -->
|
||
<div id="expenses" class="screen">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||
<h1>💸 Расходы</h1>
|
||
<button class="btn btn-primary" onclick="openModal('expense-modal')">+ Расход</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||
<input type="text" class="form-input" placeholder="🔍 Поиск расхода..." style="flex:1;min-width:200px">
|
||
<select class="form-select" style="min-width:150px">
|
||
<option>Все категории</option>
|
||
<option>🏠 Жильё</option>
|
||
<option>🛒 Продукты</option>
|
||
<option>🚗 Транспорт</option>
|
||
<option>🎉 Развлечения</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="table-container">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>Категория</th>
|
||
<th>Описание</th>
|
||
<th>Сумма</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="expenses-table-body">
|
||
<tr>
|
||
<td>21.08.2026</td>
|
||
<td>🛒 Продукты</td>
|
||
<td>Small — продукты на неделю</td>
|
||
<td style="font-weight:600">8 500 ₸</td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>20.08.2026</td>
|
||
<td>🚗 Транспорт</td>
|
||
<td>Бензин</td>
|
||
<td style="font-weight:600">12 000 ₸</td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>19.08.2026</td>
|
||
<td>🎉 Развлечения</td>
|
||
<td>Кинотеатр</td>
|
||
<td style="font-weight:600">5 000 ₸</td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>18.08.2026</td>
|
||
<td>🏠 Жильё</td>
|
||
<td>Аренда квартиры</td>
|
||
<td style="font-weight:600">150 000 ₸</td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>15.08.2026</td>
|
||
<td>🛒 Продукты</td>
|
||
<td>Магнум — закупка</td>
|
||
<td style="font-weight:600">25 000 ₸</td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ПРОДУКТЫ -->
|
||
<div id="products" class="screen">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||
<h1>🛒 Продукты</h1>
|
||
<button class="btn btn-primary" onclick="openModal('product-modal')">+ Товар</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Список покупок</h2>
|
||
<div class="table-container">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Продукт</th>
|
||
<th>Количество</th>
|
||
<th>Магазин А</th>
|
||
<th>Магазин Б</th>
|
||
<th>Магазин В</th>
|
||
<th>Лучшая цена</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="products-table-body">
|
||
<tr>
|
||
<td>🥛 Молоко</td>
|
||
<td>3 шт</td>
|
||
<td>450 ₸</td>
|
||
<td style="color:var(--primary);font-weight:600">420 ₸</td>
|
||
<td>470 ₸</td>
|
||
<td><span class="badge badge-success">420 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🥚 Яйца</td>
|
||
<td>2 уп</td>
|
||
<td>2 100 ₸</td>
|
||
<td style="color:var(--primary);font-weight:600">1 950 ₸</td>
|
||
<td>2 050 ₸</td>
|
||
<td><span class="badge badge-success">1 950 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🍗 Курица</td>
|
||
<td>2 кг</td>
|
||
<td>2 800 ₸</td>
|
||
<td>3 100 ₸</td>
|
||
<td style="color:var(--primary);font-weight:600">2 650 ₸</td>
|
||
<td><span class="badge badge-success">2 650 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🍞 Хлеб</td>
|
||
<td>2 шт</td>
|
||
<td style="color:var(--primary);font-weight:600">180 ₸</td>
|
||
<td>200 ₸</td>
|
||
<td>220 ₸</td>
|
||
<td><span class="badge badge-success">180 ₸</span></td>
|
||
<td><button class="btn btn-secondary" style="padding:6px 12px">✏️</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>📊 Сравнение корзин</h2>
|
||
<div class="price-comparison">
|
||
<div class="price-card">
|
||
<div class="price-value">9 100 ₸</div>
|
||
<div class="price-store">Магазин А</div>
|
||
</div>
|
||
<div class="price-card best">
|
||
<div class="price-value" style="color:var(--primary)">8 500 ₸</div>
|
||
<div class="price-store">Магазин Б 💚</div>
|
||
<div style="font-size:12px;color:var(--primary);margin-top:4px">Экономия 600 ₸</div>
|
||
</div>
|
||
<div class="price-card">
|
||
<div class="price-value">9 300 ₸</div>
|
||
<div class="price-store">Магазин В</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;padding:12px;background:var(--primary-light);border-radius:8px;text-align:center">
|
||
💚 Покупая в Магазин Б, вы сэкономите <strong>600 ₸</strong> на этой корзине!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЦЕЛИ -->
|
||
<div id="goals" class="screen">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
||
<h1>🐷 Финансовые цели</h1>
|
||
<button class="btn btn-primary" onclick="openModal('goal-modal')">+ Цель</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:16px">
|
||
<div style="flex:1">
|
||
<h3 style="margin-bottom:8px">Отпуск ✈️</h3>
|
||
<div style="color:var(--gray-500);margin-bottom:12px">Декабрь 2026</div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px">
|
||
<span>400 000 / 500 000 ₸</span>
|
||
<span style="color:var(--primary);font-weight:600">80%</span>
|
||
</div>
|
||
<div class="progress-bar" style="margin-bottom:12px">
|
||
<div class="progress-fill" style="width:80%"></div>
|
||
</div>
|
||
<div style="font-size:14px;color:var(--gray-500)">
|
||
Осталось: <strong>100 000 ₸</strong> • Нужно откладывать: <strong>25 000 ₸/мес</strong>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-secondary" style="padding:8px 16px">✏️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:16px">
|
||
<div style="flex:1">
|
||
<h3 style="margin-bottom:8px">Подушка безопасности 🆘</h3>
|
||
<div style="color:var(--gray-500);margin-bottom:12px">Декабрь 2027</div>
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:8px">
|
||
<span>150 000 / 1 000 000 ₸</span>
|
||
<span style="color:var(--primary);font-weight:600">15%</span>
|
||
</div>
|
||
<div class="progress-bar" style="margin-bottom:12px">
|
||
<div class="progress-fill" style="width:15%"></div>
|
||
</div>
|
||
<div style="font-size:14px;color:var(--gray-500)">
|
||
Осталось: <strong>850 000 ₸</strong> • Нужно откладывать: <strong>50 000 ₸/мес</strong>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-secondary" style="padding:8px 16px">✏️</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Модальные окна -->
|
||
<div class="modal-overlay" id="expense-modal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Добавить расход</h2>
|
||
<button class="modal-close" onclick="closeModal('expense-modal')">×</button>
|
||
</div>
|
||
<form id="expense-form">
|
||
<div class="form-group">
|
||
<label class="form-label">Сумма *</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Категория *</label>
|
||
<select class="form-select" required>
|
||
<option value="">Выберите категорию</option>
|
||
<option>🏠 Жильё</option>
|
||
<option>🛒 Продукты</option>
|
||
<option>🚗 Транспорт</option>
|
||
<option>📱 Связь и интернет</option>
|
||
<option>🧴 Бытовые расходы</option>
|
||
<option>🎉 Развлечения</option>
|
||
<option>🏥 Здоровье</option>
|
||
<option>👕 Одежда</option>
|
||
<option>🐷 Накопления</option>
|
||
<option>🆘 Резерв</option>
|
||
<option>Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Дата *</label>
|
||
<input type="date" class="form-input" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Магазин</label>
|
||
<input type="text" class="form-input" placeholder="Например: Small, Магнум">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Описание</label>
|
||
<input type="text" class="form-input" placeholder="Комментарий к расходу">
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:24px">
|
||
<button type="button" class="btn btn-secondary" style="flex:1" onclick="closeModal('expense-modal')">Отмена</button>
|
||
<button type="submit" class="btn btn-primary" style="flex:1">Добавить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="budget-modal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Добавить категорию</h2>
|
||
<button class="modal-close" onclick="closeModal('budget-modal')">×</button>
|
||
</div>
|
||
<form id="budget-form">
|
||
<div class="form-group">
|
||
<label class="form-label">Название категории *</label>
|
||
<input type="text" class="form-input" placeholder="Например: Образование" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Иконка</label>
|
||
<input type="text" class="form-input" placeholder="📚">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">План расходов *</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸" required>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:24px">
|
||
<button type="button" class="btn btn-secondary" style="flex:1" onclick="closeModal('budget-modal')">Отмена</button>
|
||
<button type="submit" class="btn btn-primary" style="flex:1">Добавить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="product-modal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Добавить товар</h2>
|
||
<button class="modal-close" onclick="closeModal('product-modal')">×</button>
|
||
</div>
|
||
<form id="product-form">
|
||
<div class="form-group">
|
||
<label class="form-label">Название продукта *</label>
|
||
<input type="text" class="form-input" placeholder="Например: Молоко" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Количество *</label>
|
||
<input type="text" class="form-input" placeholder="Например: 3 шт" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Цена в Магазин А</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Цена в Магазин Б</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Цена в Магазин В</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸">
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:24px">
|
||
<button type="button" class="btn btn-secondary" style="flex:1" onclick="closeModal('product-modal')">Отмена</button>
|
||
<button type="submit" class="btn btn-primary" style="flex:1">Добавить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="goal-modal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Добавить цель</h2>
|
||
<button class="modal-close" onclick="closeModal('goal-modal')">×</button>
|
||
</div>
|
||
<form id="goal-form">
|
||
<div class="form-group">
|
||
<label class="form-label">Название цели *</label>
|
||
<input type="text" class="form-input" placeholder="Например: Новый телефон" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Необходимая сумма *</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Желаемая дата</label>
|
||
<input type="month" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Текущая сумма</label>
|
||
<input type="number" class="form-input" placeholder="0 ₸" value="0">
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:24px">
|
||
<button type="button" class="btn btn-secondary" style="flex:1" onclick="closeModal('goal-modal')">Отмена</button>
|
||
<button type="submit" class="btn btn-primary" style="flex:1">Создать цель</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Уведомление -->
|
||
<div class="toast" id="toast">✓ Успешно сохранено!</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|