Nazira/sozday-predlozhenie-dlya-pla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui redesign cards

Browse Source
This commit is contained in:
Nazira 2026-08-28 05:26:54 +00:00
parent d864cb8ed0
commit 2b179697f5
3 changed files with 547 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
index.html
View File

@ -5,82 +5,120 @@
<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">
</head>
<body>
<div class="container">
<header class="header">
<h1>🌴 Планировщик отпуска</h1>
<p class="subtitle">Сохрани все варианты поездок в одном месте</p>
</header>
<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 class="wrapper">
<div class="hero">
<div class="hero-content">
<h1>✈️ Планировщик отпуска</h1>
<p>Собирай идеи для путешествий, сравнивай варианты и выбирай лучшее</p>
</div>
<div class="table-wrapper">
<table id="vacationsTable">
<thead>
<tr>
<th>Страна</th>
<th>Город</th>
<th>Даты</th>
<th>Бюджет</th>
<th>Отель</th>
<th>Билеты</th>
<th>Действия</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
<div class="container">
<div class="grid">
<aside class="sidebar">
<div class="card form-card">
<div class="card-header">
<span class="card-icon">📝</span>
<h2>Новый вариант</h2>
</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>
</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>
<p id="emptyMessage" class="empty-message">Пока нет сохранённых вариантов. Добавьте первый!</p>
</section>
</div>
</div>
<script src="script.js"></script>

132
script.js
View File

@ -5,61 +5,119 @@ document.getElementById('vacationForm').addEventListener('submit', function(e) {
const vacation = {
id: Date.now(),
country: document.getElementById('country').value,
city: document.getElementById('city').value,
country: document.getElementById('country').value.trim(),
city: document.getElementById('city').value.trim(),
dateFrom: document.getElementById('dateFrom').value,
dateTo: document.getElementById('dateTo').value,
budget: document.getElementById('budget').value,
hotel: document.getElementById('hotel').value,
tickets: document.getElementById('tickets').value
budget: parseFloat(document.getElementById('budget').value) || 0,
hotel: document.getElementById('hotel').value.trim(),
tickets: document.getElementById('tickets').value.trim()
};
vacations.push(vacation);
renderTable();
vacations.unshift(vacation);
renderCards();
updateStats();
this.reset();
});
function renderTable() {
const tbody = document.getElementById('tableBody');
const emptyMessage = document.getElementById('emptyMessage');
const totalCount = document.getElementById('totalCount');
totalCount.textContent = vacations.length;
function renderCards() {
const grid = document.getElementById('cardsGrid');
const emptyState = document.getElementById('emptyState');
if (vacations.length === 0) {
tbody.innerHTML = '';
emptyMessage.style.display = 'block';
grid.innerHTML = '';
emptyState.style.display = 'block';
return;
}
emptyMessage.style.display = 'none';
emptyState.style.display = 'none';
tbody.innerHTML = vacations.map(v => {
const dates = formatDate(v.dateFrom) + ' — ' + formatDate(v.dateTo);
grid.innerHTML = vacations.map(v => {
const days = calculateDays(v.dateFrom, v.dateTo);
const dates = formatDateRange(v.dateFrom, v.dateTo);
return `
<tr>
<td><strong>${escapeHtml(v.country)}</strong></td>
<td>${escapeHtml(v.city)}</td>
<td>${dates}</td>
<td>$${escapeHtml(v.budget)}</td>
<td>${escapeHtml(v.hotel) || '—'}</td>
<td>${escapeHtml(v.tickets) || '—'}</td>
<td><button class="btn-delete" onclick="deleteVacation(${v.id})">Удалить</button></td>
</tr>
<div class="vacation-card">
<div class="card-location">
<div class="flag-icon">🌍</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('Удалить этот вариант отпуска?')) {
if (confirm('Удалить этот вариант?')) {
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) {
const date = new Date(dateStr);
return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' });
return new Date(dateStr).toLocaleDateString('ru-RU', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
}
function escapeHtml(text) {
@ -75,12 +133,13 @@ function exportToExcel() {
return;
}
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Бюджет ($)', 'Отель', 'Билеты'];
const headers = ['Страна', 'Город', 'Дата вылета', 'Дата возвращения', 'Дней', 'Бюджет ($)', 'Отель', 'Билеты'];
const rows = vacations.map(v => [
v.country,
v.city,
v.dateFrom,
v.dateTo,
formatDate(v.dateFrom),
formatDate(v.dateTo),
calculateDays(v.dateFrom, v.dateTo),
v.budget,
v.hotel,
v.tickets
@ -94,8 +153,9 @@ function exportToExcel() {
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'otpusk.csv';
link.download = 'otpusk_plan.csv';
link.click();
}
renderTable();
updateStats();
renderCards();

478
style.css
View File

@ -5,223 +5,427 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f0f2f5;
color: #1a1a1a;
line-height: 1.6;
}
.container {
max-width: 1200px;
.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;
}
.header {
text-align: center;
color: white;
margin-bottom: 30px;
.container {
max-width: 1400px;
margin: 0 auto;
padding: 30px 20px;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
.grid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 30px;
align-items: start;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 20px;
}
.form-section, .table-section {
.card {
background: white;
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.form-section h2, .table-section h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.5rem;
}
.vacation-form {
.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;
}
.form-row {
.header-left {
display: flex;
gap: 15px;
flex: 1;
min-width: 280px;
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 {
flex: 1;
min-width: 140px;
}
.form-group.full-width {
flex-basis: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-size: 0.85rem;
font-weight: 600;
color: #555;
font-weight: 500;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 6px;
}
.form-group label .icon {
font-size: 1rem;
}
.form-group input {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
padding: 12px 14px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 0.95rem;
font-family: inherit;
transition: all 0.2s;
background: #fafafa;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
border-color: #6366f1;
background: white;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.btn-add {
flex-basis: 100%;
padding: 14px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.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: 8px;
font-size: 1.1rem;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 10px;
}
.btn-add:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.table-header {
transition: all 0.3s;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
gap: 8px;
}
.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;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.count-badge {
background: #667eea;
color: white;
padding: 6px 14px;
border-radius: 20px;
.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;
}
.btn-export {
padding: 10px 20px;
background: #10b981;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
.card-details {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.btn-export:hover {
background: #059669;
}
.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;
.detail-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #374151;
}
tbody tr:hover {
background: #f8f9fa;
.detail-row .d-icon {
font-size: 1.1rem;
width: 20px;
text-align: center;
}
tbody tr:last-child td {
border-bottom: none;
.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 {
padding: 6px 14px;
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
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;
font-size: 0.85rem;
transition: background 0.3s;
transition: all 0.2s;
}
.btn-delete:hover {
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;
color: #999;
padding: 40px 20px;
font-size: 1.1rem;
padding: 80px 24px;
color: #6b7280;
}
@media (max-width: 768px) {
.header h1 {
.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: 640px) {
.hero-content h1 {
font-size: 1.8rem;
}
.form-row {
flex-direction: column;
.form-row-2 {
grid-template-columns: 1fr;
}
.table-header {
flex-direction: column;
align-items: flex-start;
.cards-grid {
grid-template-columns: 1fr;
}
th, td {
padding: 10px 8px;
font-size: 0.85rem;
.stats-grid {
grid-template-columns: 1fr;
}
}