Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c0054c2561 | |||
| 4eea05f894 |
229
index.html
229
index.html
@ -4,8 +4,69 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Планировщик отпуска</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0f2f5; color: #1a1a1a; line-height: 1.6; }
|
||||
.wrapper { min-height: 100vh; }
|
||||
.hero { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); padding: 60px 20px; text-align: center; color: white; }
|
||||
.hero-content h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,0.15); }
|
||||
.hero-content p { font-size: 1.1rem; opacity: 0.95; max-width: 500px; margin: 0 auto; }
|
||||
.container { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
|
||||
.grid { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; }
|
||||
.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
|
||||
.card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
|
||||
.card-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; background: #fafafa; }
|
||||
.card-header h2 { font-size: 1.1rem; font-weight: 600; color: #1a1a1a; }
|
||||
.card-icon { font-size: 1.4rem; }
|
||||
.main-header { justify-content: space-between; flex-wrap: wrap; gap: 15px; }
|
||||
.header-left { display: flex; align-items: center; gap: 12px; }
|
||||
.form-card { border-top: 4px solid #6366f1; }
|
||||
.vacation-form { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 8px; }
|
||||
.form-group label { font-size: 0.85rem; font-weight: 600; color: #555; display: flex; align-items: center; gap: 6px; }
|
||||
.form-group label .icon { font-size: 1rem; }
|
||||
.form-group input { padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 0.95rem; font-family: inherit; transition: all 0.2s; background: #fafafa; -webkit-appearance: none; }
|
||||
.form-group input:focus { outline: none; border-color: #6366f1; background: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
|
||||
.form-group input::placeholder { color: #9ca3af; }
|
||||
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.btn-primary { margin-top: 8px; padding: 14px 24px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35); }
|
||||
.stats-card { border-top: 4px solid #10b981; }
|
||||
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
|
||||
.stat-item { text-align: center; padding: 15px; background: #f8fafc; border-radius: 12px; }
|
||||
.stat-value { font-size: 1.8rem; font-weight: 700; color: #6366f1; margin-bottom: 6px; }
|
||||
.stat-label { font-size: 0.8rem; color: #64748b; font-weight: 500; }
|
||||
.main-content .card { border-top: 4px solid #8b5cf6; }
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 24px; background: #fafafa; }
|
||||
.vacation-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); transition: all 0.3s; position: relative; overflow: hidden; }
|
||||
.vacation-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
|
||||
.vacation-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
|
||||
.card-location { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.flag-icon { font-size: 2rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 10px; }
|
||||
.location-info h3 { font-size: 1.1rem; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
|
||||
.location-info p { font-size: 0.9rem; color: #6b7280; }
|
||||
.card-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
|
||||
.detail-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #374151; }
|
||||
.detail-row .d-icon { font-size: 1.1rem; width: 20px; text-align: center; }
|
||||
.detail-row strong { color: #1a1a1a; }
|
||||
.card-budget { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); padding: 12px 16px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||||
.budget-label { font-size: 0.85rem; color: #059669; font-weight: 500; }
|
||||
.budget-value { font-size: 1.4rem; font-weight: 700; color: #059669; }
|
||||
.card-actions { display: flex; gap: 8px; }
|
||||
.btn-delete { flex: 1; padding: 10px 16px; background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; border-radius: 8px; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; }
|
||||
.btn-delete:hover { background: #dc2626; color: white; border-color: #dc2626; }
|
||||
.btn-export { padding: 10px 18px; background: white; color: #10b981; border: 2px solid #10b981; border-radius: 10px; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-export:hover { background: #10b981; color: white; }
|
||||
.empty-state { text-align: center; padding: 80px 24px; color: #6b7280; }
|
||||
.empty-icon { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; }
|
||||
.empty-state h3 { font-size: 1.3rem; color: #374151; margin-bottom: 8px; }
|
||||
.empty-state p { font-size: 1rem; color: #9ca3af; }
|
||||
|
||||
@media (max-width: 1024px) { .grid { grid-template-columns: 1fr; } .sidebar { position: static; } .cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
|
||||
@media (max-width: 768px) { .hero { padding: 40px 15px; } .hero-content h1 { font-size: 1.6rem; } .container { padding: 15px; } .card-header { padding: 15px 18px; } .vacation-form { padding: 18px; gap: 14px; } .form-group input { padding: 11px 12px; font-size: 16px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; } .cards-grid { grid-template-columns: 1fr; padding: 18px; gap: 15px; } .main-header { flex-direction: column; align-items: flex-start; } .btn-export { width: 100%; justify-content: center; } }
|
||||
@media (max-width: 480px) { .hero { padding: 30px 12px; } .hero-content h1 { font-size: 1.4rem; } .container { padding: 10px; } .card { border-radius: 12px; } .card-header { padding: 14px 15px; } .card-header h2 { font-size: 1rem; } .vacation-form { padding: 15px; gap: 12px; } .form-group label { font-size: 0.8rem; } .form-group input { padding: 10px 11px; font-size: 16px; border-radius: 8px; } .form-row-2 { grid-template-columns: 1fr; gap: 10px; } .btn-primary { padding: 12px 18px; font-size: 0.95rem; border-radius: 8px; } .stats-grid { grid-template-columns: 1fr; gap: 10px; padding: 15px; } .stat-item { padding: 12px; } .stat-value { font-size: 1.3rem; } .cards-grid { padding: 15px; gap: 12px; } .vacation-card { padding: 16px; border-radius: 10px; } .flag-icon { width: 45px; height: 45px; font-size: 1.6rem; } .location-info h3 { font-size: 1rem; } .budget-value { font-size: 1.2rem; } .btn-delete { padding: 9px 14px; font-size: 0.85rem; border-radius: 7px; } .empty-state { padding: 50px 15px; } .empty-icon { font-size: 3rem; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
@ -26,58 +87,36 @@
|
||||
</div>
|
||||
<form id="vacationForm" class="vacation-form">
|
||||
<div class="form-group">
|
||||
<label for="country">
|
||||
<span class="icon">🌍</span> Страна
|
||||
</label>
|
||||
<input type="text" id="country" name="country" placeholder="Турция, Таиланд..." required>
|
||||
<label for="country"><span class="icon">🌍</span> Страна</label>
|
||||
<input type="text" id="country" placeholder="Турция, Таиланд..." required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="city">
|
||||
<span class="icon">🏙️</span> Город
|
||||
</label>
|
||||
<input type="text" id="city" name="city" placeholder="Анталья, Пхукет..." required>
|
||||
<label for="city"><span class="icon">🏙️</span> Город</label>
|
||||
<input type="text" id="city" placeholder="Анталья, Пхукет..." required>
|
||||
</div>
|
||||
|
||||
<div class="form-row-2">
|
||||
<div class="form-group">
|
||||
<label for="dateFrom">
|
||||
<span class="icon">📅</span> Вылет
|
||||
</label>
|
||||
<input type="date" id="dateFrom" name="dateFrom" required>
|
||||
<label for="dateFrom"><span class="icon">📅</span> Вылет</label>
|
||||
<input type="date" id="dateFrom" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="dateTo">
|
||||
<span class="icon">📅</span> Возвращение
|
||||
</label>
|
||||
<input type="date" id="dateTo" name="dateTo" required>
|
||||
<label for="dateTo"><span class="icon">📅</span> Возвращение</label>
|
||||
<input type="date" id="dateTo" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="budget">
|
||||
<span class="icon">💰</span> Бюджет ($)
|
||||
</label>
|
||||
<input type="number" id="budget" name="budget" placeholder="1500" min="0" required>
|
||||
<label for="budget"><span class="icon">💰</span> Бюджет ($)</label>
|
||||
<input type="number" id="budget" placeholder="1500" min="0" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="hotel">
|
||||
<span class="icon">🏨</span> Отель
|
||||
</label>
|
||||
<input type="text" id="hotel" name="hotel" placeholder="Название отеля">
|
||||
<label for="hotel"><span class="icon">🏨</span> Отель</label>
|
||||
<input type="text" id="hotel" placeholder="Название отеля">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tickets">
|
||||
<span class="icon">🎫</span> Билеты
|
||||
</label>
|
||||
<input type="text" id="tickets" name="tickets" placeholder="Ссылка или номер рейса">
|
||||
<label for="tickets"><span class="icon">🎫</span> Билеты</label>
|
||||
<input type="text" id="tickets" placeholder="Ссылка или номер рейса">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">
|
||||
<span class="btn-icon">+</span> Добавить вариант
|
||||
</button>
|
||||
<button type="submit" class="btn-primary"><span class="btn-icon">+</span> Добавить вариант</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -106,10 +145,7 @@
|
||||
<span class="btn-icon">📥</span> Экспорт в Excel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid" id="cardsGrid">
|
||||
</div>
|
||||
|
||||
<div class="cards-grid" id="cardsGrid"></div>
|
||||
<div id="emptyState" class="empty-state">
|
||||
<div class="empty-icon">🏖️</div>
|
||||
<h3>Пока пусто</h3>
|
||||
@ -121,6 +157,113 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script>
|
||||
let vacations = [
|
||||
{ id: 1, country: 'Турция', city: 'Анталья', dateFrom: '2026-09-15', dateTo: '2026-09-25', budget: 1200, hotel: 'Rixos Sungate 5*', tickets: 'Рейс TK-412, Турецкие авиалинии' },
|
||||
{ id: 2, country: 'Таиланд', city: 'Пхукет', dateFrom: '2026-11-10', dateTo: '2026-11-24', budget: 2100, hotel: 'JW Marriott Phuket 5*', tickets: 'Рейс SU-270, Аэрофлот + TG-2203' },
|
||||
{ id: 3, country: 'ОАЭ', city: 'Дубай', dateFrom: '2026-12-20', dateTo: '2026-12-30', budget: 2800, hotel: 'Atlantis The Palm 5*', tickets: 'Рейс FZ-654, FlyDubai' },
|
||||
{ id: 4, country: 'Мальдивы', city: 'Мале', dateFrom: '2027-01-15', dateTo: '2027-01-25', budget: 4500, hotel: 'Conrad Maldives Rangali 5*', tickets: 'Рейс QR-234, Qatar Airways + гидросамолёт' },
|
||||
{ id: 5, country: 'Италия', city: 'Римини', dateFrom: '2026-07-01', dateTo: '2026-07-14', budget: 1600, hotel: 'Grand Hotel Rimini 5*', tickets: 'Рейс AZ-596, ITA Airways' },
|
||||
{ id: 6, country: 'Испания', city: 'Барселона', dateFrom: '2026-08-05', dateTo: '2026-08-15', budget: 1400, hotel: 'W Barcelona 5*', tickets: 'Рейс VY-3124, Vueling' }
|
||||
];
|
||||
|
||||
document.getElementById('vacationForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const vacation = {
|
||||
id: Date.now(),
|
||||
country: document.getElementById('country').value.trim(),
|
||||
city: document.getElementById('city').value.trim(),
|
||||
dateFrom: document.getElementById('dateFrom').value,
|
||||
dateTo: document.getElementById('dateTo').value,
|
||||
budget: parseFloat(document.getElementById('budget').value) || 0,
|
||||
hotel: document.getElementById('hotel').value.trim(),
|
||||
tickets: document.getElementById('tickets').value.trim()
|
||||
};
|
||||
vacations.unshift(vacation);
|
||||
renderCards();
|
||||
updateStats();
|
||||
this.reset();
|
||||
});
|
||||
|
||||
function renderCards() {
|
||||
const grid = document.getElementById('cardsGrid');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
if (vacations.length === 0) { grid.innerHTML = ''; emptyState.style.display = 'block'; return; }
|
||||
emptyState.style.display = 'none';
|
||||
grid.innerHTML = vacations.map(v => {
|
||||
const days = calculateDays(v.dateFrom, v.dateTo);
|
||||
const dates = formatDateRange(v.dateFrom, v.dateTo);
|
||||
const flag = getCountryFlag(v.country);
|
||||
return `<div class="vacation-card">
|
||||
<div class="card-location"><div class="flag-icon">${flag}</div><div class="location-info"><h3>${escapeHtml(v.country)}</h3><p>${escapeHtml(v.city)}</p></div></div>
|
||||
<div class="card-details">
|
||||
<div class="detail-row"><span class="d-icon">📅</span><span>${dates} <strong>(${days} дн.)</strong></span></div>
|
||||
${v.hotel ? `<div class="detail-row"><span class="d-icon">🏨</span><span>${escapeHtml(v.hotel)}</span></div>` : ''}
|
||||
${v.tickets ? `<div class="detail-row"><span class="d-icon">🎫</span><span>${escapeHtml(v.tickets)}</span></div>` : ''}
|
||||
</div>
|
||||
<div class="card-budget"><span class="budget-label">Бюджет</span><span class="budget-value">$${v.budget.toLocaleString()}</span></div>
|
||||
<div class="card-actions"><button class="btn-delete" onclick="deleteVacation(${v.id})">🗑️ Удалить</button></div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function deleteVacation(id) {
|
||||
if (confirm('Удалить этот вариант?')) {
|
||||
vacations = vacations.filter(v => v.id !== id);
|
||||
renderCards();
|
||||
updateStats();
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const total = vacations.length;
|
||||
const avg = total > 0 ? Math.round(vacations.reduce((sum, v) => sum + v.budget, 0) / total) : 0;
|
||||
document.getElementById('totalCount').textContent = total;
|
||||
document.getElementById('avgBudget').textContent = avg > 0 ? `$${avg.toLocaleString()}` : '$0';
|
||||
}
|
||||
|
||||
function calculateDays(from, to) {
|
||||
const start = new Date(from);
|
||||
const end = new Date(to);
|
||||
const diff = end - start;
|
||||
return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
|
||||
}
|
||||
|
||||
function formatDateRange(from, to) {
|
||||
const options = { day: 'numeric', month: 'short' };
|
||||
return `${new Date(from).toLocaleDateString('ru-RU', options)} — ${new Date(to).toLocaleDateString('ru-RU', options)}`;
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
return new Date(dateStr).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function getCountryFlag(country) {
|
||||
const flags = { 'Турция': '🇹🇷', 'Таиланд': '🇹🇭', 'ОАЭ': '🇦🇪', 'Мальдивы': '🇲🇻', 'Италия': '🇮🇹', 'Испания': '🇪🇸', 'Грузия': '🇬🇪', 'Египет': '🇪🇬', 'Греция': '🇬🇷', 'Кипр': '🇨🇾' };
|
||||
return flags[country] || '🌍';
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
if (vacations.length === 0) { alert('Сначала добавьте варианты отпуска'); return; }
|
||||
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
|
||||
const rows = vacations.map(v => [v.country, v.city, formatDate(v.dateFrom), formatDate(v.dateTo), calculateDays(v.dateFrom, v.dateTo), v.budget, v.hotel, v.tickets]);
|
||||
const csvContent = '\uFEFF' + [headers.join(';'), ...rows.map(row => row.map(cell => '"' + String(cell || '').replace(/"/g, '""') + '"').join(';'))].join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'otpusk_plan.csv';
|
||||
link.click();
|
||||
}
|
||||
|
||||
renderCards();
|
||||
updateStats();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
10
package-lock.json
generated
Normal file
10
package-lock.json
generated
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "vacation-planner",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vacation-planner"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "vacation-planner",
|
||||
"private": true,
|
||||
"type": "commonjs",
|
||||
"scripts": {
|
||||
"start": "node server.js"
|
||||
}
|
||||
}
|
||||
239
script.js
239
script.js
@ -1,239 +0,0 @@
|
||||
let vacations = [
|
||||
{
|
||||
id: 1,
|
||||
country: 'Турция',
|
||||
city: 'Анталья',
|
||||
dateFrom: '2026-09-15',
|
||||
dateTo: '2026-09-25',
|
||||
budget: 1200,
|
||||
hotel: 'Rixos Sungate 5*',
|
||||
tickets: 'Рейс TK-412, Турецкие авиалинии'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
country: 'Таиланд',
|
||||
city: 'Пхукет',
|
||||
dateFrom: '2026-11-10',
|
||||
dateTo: '2026-11-24',
|
||||
budget: 2100,
|
||||
hotel: 'JW Marriott Phuket 5*',
|
||||
tickets: 'Рейс SU-270, Аэрофлот + TG-2203'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
country: 'ОАЭ',
|
||||
city: 'Дубай',
|
||||
dateFrom: '2026-12-20',
|
||||
dateTo: '2026-12-30',
|
||||
budget: 2800,
|
||||
hotel: 'Atlantis The Palm 5*',
|
||||
tickets: 'Рейс FZ-654, FlyDubai'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
country: 'Мальдивы',
|
||||
city: 'Мале',
|
||||
dateFrom: '2027-01-15',
|
||||
dateTo: '2027-01-25',
|
||||
budget: 4500,
|
||||
hotel: 'Conrad Maldives Rangali 5*',
|
||||
tickets: 'Рейс QR-234, Qatar Airways + гидросамолёт'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
country: 'Италия',
|
||||
city: 'Римини',
|
||||
dateFrom: '2026-07-01',
|
||||
dateTo: '2026-07-14',
|
||||
budget: 1600,
|
||||
hotel: 'Grand Hotel Rimini 5*',
|
||||
tickets: 'Рейс AZ-596, ITA Airways'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
country: 'Испания',
|
||||
city: 'Барселона',
|
||||
dateFrom: '2026-08-05',
|
||||
dateTo: '2026-08-15',
|
||||
budget: 1400,
|
||||
hotel: 'W Barcelona 5*',
|
||||
tickets: 'Рейс VY-3124, Vueling'
|
||||
}
|
||||
];
|
||||
|
||||
document.getElementById('vacationForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const vacation = {
|
||||
id: Date.now(),
|
||||
country: document.getElementById('country').value.trim(),
|
||||
city: document.getElementById('city').value.trim(),
|
||||
dateFrom: document.getElementById('dateFrom').value,
|
||||
dateTo: document.getElementById('dateTo').value,
|
||||
budget: parseFloat(document.getElementById('budget').value) || 0,
|
||||
hotel: document.getElementById('hotel').value.trim(),
|
||||
tickets: document.getElementById('tickets').value.trim()
|
||||
};
|
||||
|
||||
vacations.unshift(vacation);
|
||||
renderCards();
|
||||
updateStats();
|
||||
this.reset();
|
||||
});
|
||||
|
||||
function renderCards() {
|
||||
const grid = document.getElementById('cardsGrid');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
if (vacations.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
grid.innerHTML = vacations.map(v => {
|
||||
const days = calculateDays(v.dateFrom, v.dateTo);
|
||||
const dates = formatDateRange(v.dateFrom, v.dateTo);
|
||||
const flag = getCountryFlag(v.country);
|
||||
|
||||
return `
|
||||
<div class="vacation-card">
|
||||
<div class="card-location">
|
||||
<div class="flag-icon">${flag}</div>
|
||||
<div class="location-info">
|
||||
<h3>${escapeHtml(v.country)}</h3>
|
||||
<p>${escapeHtml(v.city)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-details">
|
||||
<div class="detail-row">
|
||||
<span class="d-icon">📅</span>
|
||||
<span>${dates} <strong>(${days} дн.)</strong></span>
|
||||
</div>
|
||||
${v.hotel ? `
|
||||
<div class="detail-row">
|
||||
<span class="d-icon">🏨</span>
|
||||
<span>${escapeHtml(v.hotel)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
${v.tickets ? `
|
||||
<div class="detail-row">
|
||||
<span class="d-icon">🎫</span>
|
||||
<span>${escapeHtml(v.tickets)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="card-budget">
|
||||
<span class="budget-label">Бюджет</span>
|
||||
<span class="budget-value">$${v.budget.toLocaleString()}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<button class="btn-delete" onclick="deleteVacation(${v.id})">
|
||||
🗑️ Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function deleteVacation(id) {
|
||||
if (confirm('Удалить этот вариант?')) {
|
||||
vacations = vacations.filter(v => v.id !== id);
|
||||
renderCards();
|
||||
updateStats();
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const total = vacations.length;
|
||||
const avg = total > 0
|
||||
? Math.round(vacations.reduce((sum, v) => sum + v.budget, 0) / total)
|
||||
: 0;
|
||||
|
||||
document.getElementById('totalCount').textContent = total;
|
||||
document.getElementById('avgBudget').textContent = avg > 0 ? `$${avg.toLocaleString()}` : '$0';
|
||||
}
|
||||
|
||||
function calculateDays(from, to) {
|
||||
const start = new Date(from);
|
||||
const end = new Date(to);
|
||||
const diff = end - start;
|
||||
return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
|
||||
}
|
||||
|
||||
function formatDateRange(from, to) {
|
||||
const options = { day: 'numeric', month: 'short' };
|
||||
const fromStr = new Date(from).toLocaleDateString('ru-RU', options);
|
||||
const toStr = new Date(to).toLocaleDateString('ru-RU', options);
|
||||
return `${fromStr} — ${toStr}`;
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
return new Date(dateStr).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function getCountryFlag(country) {
|
||||
const flags = {
|
||||
'Турция': '🇹🇷',
|
||||
'Таиланд': '🇹🇭',
|
||||
'ОАЭ': '🇦🇪',
|
||||
'Мальдивы': '🇲🇻',
|
||||
'Италия': '🇮🇹',
|
||||
'Испания': '🇪🇸',
|
||||
'Грузия': '🇬🇪',
|
||||
'Египет': '🇪🇬',
|
||||
'Греция': '🇬🇷',
|
||||
'Кипр': '🇨🇾'
|
||||
};
|
||||
return flags[country] || '🌍';
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
if (vacations.length === 0) {
|
||||
alert('Сначала добавьте варианты отпуска');
|
||||
return;
|
||||
}
|
||||
|
||||
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
|
||||
const rows = vacations.map(v => [
|
||||
v.country,
|
||||
v.city,
|
||||
formatDate(v.dateFrom),
|
||||
formatDate(v.dateTo),
|
||||
calculateDays(v.dateFrom, v.dateTo),
|
||||
v.budget,
|
||||
v.hotel,
|
||||
v.tickets
|
||||
]);
|
||||
|
||||
const csvContent = '\uFEFF' + [
|
||||
headers.join(';'),
|
||||
...rows.map(row => row.map(cell => '"' + String(cell || '').replace(/"/g, '""') + '"').join(';'))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'otpusk_plan.csv';
|
||||
link.click();
|
||||
}
|
||||
|
||||
updateStats();
|
||||
renderCards();
|
||||
19
server.js
19
server.js
@ -1,19 +0,0 @@
|
||||
const http = require("http");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
http.createServer((req, res) => {
|
||||
let file = req.url === "/" ? "/index.html" : req.url.split("?")[0];
|
||||
const full = path.join(__dirname, file);
|
||||
|
||||
if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
|
||||
const ext = path.extname(full);
|
||||
const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : "text/html";
|
||||
res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
|
||||
return res.end(fs.readFileSync(full));
|
||||
}
|
||||
|
||||
res.writeHead(404); res.end("Not found");
|
||||
}).listen(PORT, () => console.log("Планировщик отпуска на порту " + PORT));
|
||||
640
style.css
640
style.css
@ -1,640 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #f0f2f5;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.95;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 380px 1fr;
|
||||
gap: 30px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-top: 4px solid #6366f1;
|
||||
}
|
||||
|
||||
.vacation-form {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label .icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 14px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s;
|
||||
background: #fafafa;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #6366f1;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.form-row-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 8px;
|
||||
padding: 14px 24px;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
border-top: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #6366f1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content .card {
|
||||
border-top: 4px solid #8b5cf6;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.vacation-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vacation-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.vacation-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
||||
}
|
||||
|
||||
.card-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.flag-icon {
|
||||
font-size: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.location-info h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.detail-row .d-icon {
|
||||
font-size: 1.1rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-row strong {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-budget {
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.budget-label {
|
||||
font-size: 0.85rem;
|
||||
color: #059669;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.budget-value {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
border: 1px solid #fee2e2;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
padding: 10px 18px;
|
||||
background: white;
|
||||
color: #10b981;
|
||||
border: 2px solid #10b981;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-export:hover {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.3rem;
|
||||
color: #374151;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 40px 15px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 15px 18px;
|
||||
}
|
||||
|
||||
.vacation-form {
|
||||
padding: 18px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 11px 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 13px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 18px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
padding: 30px 12px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 14px 15px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.vacation-form {
|
||||
padding: 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 10px 11px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-row-2 {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 12px 18px;
|
||||
font-size: 0.95rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
padding: 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vacation-card {
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.vacation-card::before {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.flag-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.location-info h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-row .d-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-budget {
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.budget-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.budget-value {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
padding: 9px 14px;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 50px 15px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user