ui redesign cards
This commit is contained in:
parent
d864cb8ed0
commit
2b179697f5
182
index.html
182
index.html
@ -5,82 +5,120 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Планировщик отпуска</title>
|
<title>Планировщик отпуска</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="wrapper">
|
||||||
<header class="header">
|
<div class="hero">
|
||||||
<h1>🌴 Планировщик отпуска</h1>
|
<div class="hero-content">
|
||||||
<p class="subtitle">Сохрани все варианты поездок в одном месте</p>
|
<h1>✈️ Планировщик отпуска</h1>
|
||||||
</header>
|
<p>Собирай идеи для путешествий, сравнивай варианты и выбирай лучшее</p>
|
||||||
|
|
||||||
<section class="form-section">
|
|
||||||
<h2>Добавить вариант</h2>
|
|
||||||
<form id="vacationForm" class="vacation-form">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="country">Страна</label>
|
|
||||||
<input type="text" id="country" name="country" placeholder="Например: Турция" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="city">Город</label>
|
|
||||||
<input type="text" id="city" name="city" placeholder="Например: Анталья" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="dateFrom">Дата вылета</label>
|
|
||||||
<input type="date" id="dateFrom" name="dateFrom" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="dateTo">Дата возвращения</label>
|
|
||||||
<input type="date" id="dateTo" name="dateTo" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="budget">Бюджет ($)</label>
|
|
||||||
<input type="number" id="budget" name="budget" placeholder="Например: 1500" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="hotel">Отель</label>
|
|
||||||
<input type="text" id="hotel" name="hotel" placeholder="Название отеля">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label for="tickets">Билеты (ссылка или заметки)</label>
|
|
||||||
<input type="text" id="tickets" name="tickets" placeholder="Ссылка на билеты или номер рейса">
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn-add">Добавить вариант</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="table-section">
|
|
||||||
<div class="table-header">
|
|
||||||
<h2>Все варианты</h2>
|
|
||||||
<div class="table-actions">
|
|
||||||
<span id="totalCount" class="count-badge">0</span>
|
|
||||||
<button onclick="exportToExcel()" class="btn-export">📥 Excel</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="table-wrapper">
|
</div>
|
||||||
<table id="vacationsTable">
|
|
||||||
<thead>
|
<div class="container">
|
||||||
<tr>
|
<div class="grid">
|
||||||
<th>Страна</th>
|
<aside class="sidebar">
|
||||||
<th>Город</th>
|
<div class="card form-card">
|
||||||
<th>Даты</th>
|
<div class="card-header">
|
||||||
<th>Бюджет</th>
|
<span class="card-icon">📝</span>
|
||||||
<th>Отель</th>
|
<h2>Новый вариант</h2>
|
||||||
<th>Билеты</th>
|
</div>
|
||||||
<th>Действия</th>
|
<form id="vacationForm" class="vacation-form">
|
||||||
</tr>
|
<div class="form-group">
|
||||||
</thead>
|
<label for="country">
|
||||||
<tbody id="tableBody">
|
<span class="icon">🌍</span> Страна
|
||||||
</tbody>
|
</label>
|
||||||
</table>
|
<input type="text" id="country" name="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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="dateTo">
|
||||||
|
<span class="icon">📅</span> Возвращение
|
||||||
|
</label>
|
||||||
|
<input type="date" id="dateTo" name="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="hotel">
|
||||||
|
<span class="icon">🏨</span> Отель
|
||||||
|
</label>
|
||||||
|
<input type="text" id="hotel" name="hotel" placeholder="Название отеля">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="tickets">
|
||||||
|
<span class="icon">🎫</span> Билеты
|
||||||
|
</label>
|
||||||
|
<input type="text" id="tickets" name="tickets" placeholder="Ссылка или номер рейса">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn-primary">
|
||||||
|
<span class="btn-icon">+</span> Добавить вариант
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card stats-card">
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value" id="totalCount">0</div>
|
||||||
|
<div class="stat-label">Вариантов</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value" id="avgBudget">$0</div>
|
||||||
|
<div class="stat-label">Средний бюджет</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header main-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<span class="card-icon">🗂️</span>
|
||||||
|
<h2>Все варианты</h2>
|
||||||
|
</div>
|
||||||
|
<button onclick="exportToExcel()" class="btn-export">
|
||||||
|
<span class="btn-icon">📥</span> Экспорт в Excel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards-grid" id="cardsGrid">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="emptyState" class="empty-state">
|
||||||
|
<div class="empty-icon">🏖️</div>
|
||||||
|
<h3>Пока пусто</h3>
|
||||||
|
<p>Добавьте первый вариант отпуска с помощью формы слева</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<p id="emptyMessage" class="empty-message">Пока нет сохранённых вариантов. Добавьте первый!</p>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
|||||||
132
script.js
132
script.js
@ -5,61 +5,119 @@ document.getElementById('vacationForm').addEventListener('submit', function(e) {
|
|||||||
|
|
||||||
const vacation = {
|
const vacation = {
|
||||||
id: Date.now(),
|
id: Date.now(),
|
||||||
country: document.getElementById('country').value,
|
country: document.getElementById('country').value.trim(),
|
||||||
city: document.getElementById('city').value,
|
city: document.getElementById('city').value.trim(),
|
||||||
dateFrom: document.getElementById('dateFrom').value,
|
dateFrom: document.getElementById('dateFrom').value,
|
||||||
dateTo: document.getElementById('dateTo').value,
|
dateTo: document.getElementById('dateTo').value,
|
||||||
budget: document.getElementById('budget').value,
|
budget: parseFloat(document.getElementById('budget').value) || 0,
|
||||||
hotel: document.getElementById('hotel').value,
|
hotel: document.getElementById('hotel').value.trim(),
|
||||||
tickets: document.getElementById('tickets').value
|
tickets: document.getElementById('tickets').value.trim()
|
||||||
};
|
};
|
||||||
|
|
||||||
vacations.push(vacation);
|
vacations.unshift(vacation);
|
||||||
renderTable();
|
renderCards();
|
||||||
|
updateStats();
|
||||||
this.reset();
|
this.reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
function renderTable() {
|
function renderCards() {
|
||||||
const tbody = document.getElementById('tableBody');
|
const grid = document.getElementById('cardsGrid');
|
||||||
const emptyMessage = document.getElementById('emptyMessage');
|
const emptyState = document.getElementById('emptyState');
|
||||||
const totalCount = document.getElementById('totalCount');
|
|
||||||
|
|
||||||
totalCount.textContent = vacations.length;
|
|
||||||
|
|
||||||
if (vacations.length === 0) {
|
if (vacations.length === 0) {
|
||||||
tbody.innerHTML = '';
|
grid.innerHTML = '';
|
||||||
emptyMessage.style.display = 'block';
|
emptyState.style.display = 'block';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
emptyMessage.style.display = 'none';
|
emptyState.style.display = 'none';
|
||||||
|
|
||||||
|
grid.innerHTML = vacations.map(v => {
|
||||||
|
const days = calculateDays(v.dateFrom, v.dateTo);
|
||||||
|
const dates = formatDateRange(v.dateFrom, v.dateTo);
|
||||||
|
|
||||||
tbody.innerHTML = vacations.map(v => {
|
|
||||||
const dates = formatDate(v.dateFrom) + ' — ' + formatDate(v.dateTo);
|
|
||||||
return `
|
return `
|
||||||
<tr>
|
<div class="vacation-card">
|
||||||
<td><strong>${escapeHtml(v.country)}</strong></td>
|
<div class="card-location">
|
||||||
<td>${escapeHtml(v.city)}</td>
|
<div class="flag-icon">🌍</div>
|
||||||
<td>${dates}</td>
|
<div class="location-info">
|
||||||
<td>$${escapeHtml(v.budget)}</td>
|
<h3>${escapeHtml(v.country)}</h3>
|
||||||
<td>${escapeHtml(v.hotel) || '—'}</td>
|
<p>${escapeHtml(v.city)}</p>
|
||||||
<td>${escapeHtml(v.tickets) || '—'}</td>
|
</div>
|
||||||
<td><button class="btn-delete" onclick="deleteVacation(${v.id})">Удалить</button></td>
|
</div>
|
||||||
</tr>
|
|
||||||
|
<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('');
|
}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteVacation(id) {
|
function deleteVacation(id) {
|
||||||
if (confirm('Удалить этот вариант отпуска?')) {
|
if (confirm('Удалить этот вариант?')) {
|
||||||
vacations = vacations.filter(v => v.id !== id);
|
vacations = vacations.filter(v => v.id !== id);
|
||||||
renderTable();
|
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) {
|
function formatDate(dateStr) {
|
||||||
const date = new Date(dateStr);
|
return new Date(dateStr).toLocaleDateString('ru-RU', {
|
||||||
return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' });
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function escapeHtml(text) {
|
function escapeHtml(text) {
|
||||||
@ -75,12 +133,13 @@ function exportToExcel() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Бюджет ($)', 'Отель', 'Билеты'];
|
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
|
||||||
const rows = vacations.map(v => [
|
const rows = vacations.map(v => [
|
||||||
v.country,
|
v.country,
|
||||||
v.city,
|
v.city,
|
||||||
v.dateFrom,
|
formatDate(v.dateFrom),
|
||||||
v.dateTo,
|
formatDate(v.dateTo),
|
||||||
|
calculateDays(v.dateFrom, v.dateTo),
|
||||||
v.budget,
|
v.budget,
|
||||||
v.hotel,
|
v.hotel,
|
||||||
v.tickets
|
v.tickets
|
||||||
@ -94,8 +153,9 @@ function exportToExcel() {
|
|||||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = URL.createObjectURL(blob);
|
link.href = URL.createObjectURL(blob);
|
||||||
link.download = 'otpusk.csv';
|
link.download = 'otpusk_plan.csv';
|
||||||
link.click();
|
link.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
renderTable();
|
updateStats();
|
||||||
|
renderCards();
|
||||||
|
|||||||
478
style.css
478
style.css
@ -5,223 +5,427 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: #f0f2f5;
|
||||||
min-height: 100vh;
|
color: #1a1a1a;
|
||||||
padding: 20px;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.wrapper {
|
||||||
max-width: 1200px;
|
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;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.container {
|
||||||
text-align: center;
|
max-width: 1400px;
|
||||||
color: white;
|
margin: 0 auto;
|
||||||
margin-bottom: 30px;
|
padding: 30px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.grid {
|
||||||
font-size: 2.5rem;
|
display: grid;
|
||||||
margin-bottom: 10px;
|
grid-template-columns: 380px 1fr;
|
||||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
gap: 30px;
|
||||||
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.sidebar {
|
||||||
font-size: 1.1rem;
|
display: flex;
|
||||||
opacity: 0.9;
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
position: sticky;
|
||||||
|
top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section, .table-section {
|
.card {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 25px;
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||||
margin-bottom: 25px;
|
overflow: hidden;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2, .table-section h2 {
|
.card-header {
|
||||||
color: #333;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vacation-form {
|
|
||||||
display: flex;
|
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;
|
flex-wrap: wrap;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
.header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
align-items: center;
|
||||||
flex: 1;
|
gap: 12px;
|
||||||
min-width: 280px;
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
border-top: 4px solid #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vacation-form {
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
flex: 1;
|
display: flex;
|
||||||
min-width: 140px;
|
flex-direction: column;
|
||||||
}
|
gap: 8px;
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
font-size: 0.85rem;
|
||||||
margin-bottom: 6px;
|
font-weight: 600;
|
||||||
color: #555;
|
color: #555;
|
||||||
font-weight: 500;
|
display: flex;
|
||||||
font-size: 0.9rem;
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label .icon {
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
padding: 12px 14px;
|
||||||
padding: 12px;
|
border: 2px solid #e5e7eb;
|
||||||
border: 2px solid #e0e0e0;
|
border-radius: 10px;
|
||||||
border-radius: 8px;
|
font-size: 0.95rem;
|
||||||
font-size: 1rem;
|
font-family: inherit;
|
||||||
transition: border-color 0.3s;
|
transition: all 0.2s;
|
||||||
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #667eea;
|
border-color: #6366f1;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-add {
|
.form-group input::placeholder {
|
||||||
flex-basis: 100%;
|
color: #9ca3af;
|
||||||
padding: 14px 30px;
|
}
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
|
.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;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
font-size: 1.1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-family: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: all 0.3s;
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-header {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
gap: 8px;
|
||||||
gap: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-actions {
|
.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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count-badge {
|
.flag-icon {
|
||||||
background: #667eea;
|
font-size: 2rem;
|
||||||
color: white;
|
width: 50px;
|
||||||
padding: 6px 14px;
|
height: 50px;
|
||||||
border-radius: 20px;
|
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;
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-info p {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
color: #6b7280;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-export {
|
.card-details {
|
||||||
padding: 10px 20px;
|
display: flex;
|
||||||
background: #10b981;
|
flex-direction: column;
|
||||||
color: white;
|
gap: 10px;
|
||||||
border: none;
|
margin-bottom: 16px;
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-export:hover {
|
.detail-row {
|
||||||
background: #059669;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
background: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 14px 12px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
text-transform: uppercase;
|
color: #374151;
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:hover {
|
.detail-row .d-icon {
|
||||||
background: #f8f9fa;
|
font-size: 1.1rem;
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:last-child td {
|
.detail-row strong {
|
||||||
border-bottom: none;
|
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 {
|
.btn-delete {
|
||||||
padding: 6px 14px;
|
flex: 1;
|
||||||
background: #ef4444;
|
padding: 10px 16px;
|
||||||
color: white;
|
background: #fef2f2;
|
||||||
border: none;
|
color: #dc2626;
|
||||||
border-radius: 6px;
|
border: 1px solid #fee2e2;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.85rem;
|
transition: all 0.2s;
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete:hover {
|
.btn-delete:hover {
|
||||||
background: #dc2626;
|
background: #dc2626;
|
||||||
|
color: white;
|
||||||
|
border-color: #dc2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-message {
|
.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;
|
text-align: center;
|
||||||
color: #999;
|
padding: 80px 24px;
|
||||||
padding: 40px 20px;
|
color: #6b7280;
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.empty-icon {
|
||||||
.header h1 {
|
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: 640px) {
|
||||||
|
.hero-content h1 {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
.form-row-2 {
|
||||||
flex-direction: column;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header {
|
.cards-grid {
|
||||||
flex-direction: column;
|
grid-template-columns: 1fr;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
.stats-grid {
|
||||||
padding: 10px 8px;
|
grid-template-columns: 1fr;
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user