215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>AI Trip Planner — Персональный планировщик путешествий</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.trip-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
.trip-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-5); margin-bottom: var(--kt-ai-space-4); }
|
||
.trip-day { border-left: 4px solid var(--kt-ai-primary); padding-left: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); }
|
||
.trip-day h4 { margin: 0 0 var(--kt-ai-space-2); color: var(--kt-ai-primary); }
|
||
.activity-row { display: flex; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-2) 0; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.activity-row:last-child { border-bottom: none; }
|
||
.activity-time { min-width: 80px; font-weight: 600; color: var(--kt-ai-fg-muted); }
|
||
.activity-name { flex: 1; }
|
||
.activity-cost { font-weight: 600; color: var(--kt-ai-primary); }
|
||
.budget-bar { height: 12px; background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-full); overflow: hidden; margin: var(--kt-ai-space-2) 0; }
|
||
.budget-fill { height: 100%; background: linear-gradient(90deg, var(--kt-ai-primary), var(--kt-ai-link)); border-radius: var(--kt-ai-radius-full); transition: width 0.5s ease; }
|
||
.budget-stats { display: flex; justify-content: space-between; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.interest-tags { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); }
|
||
.interest-tag { cursor: pointer; padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-full); border: 1px solid var(--kt-ai-border); transition: all 0.2s; }
|
||
.interest-tag:hover { border-color: var(--kt-ai-primary); }
|
||
.interest-tag.selected { background: var(--kt-ai-primary); color: white; border-color: var(--kt-ai-primary); }
|
||
.map-placeholder { background: linear-gradient(135deg, var(--kt-ai-bg-soft), var(--kt-ai-card-bg)); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-6); text-align: center; margin: var(--kt-ai-space-4) 0; }
|
||
.map-point { display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); padding: var(--kt-ai-space-2) var(--kt-ai-space-3); background: var(--kt-ai-card-bg); border-radius: var(--kt-ai-radius-lg); margin: var(--kt-ai-space-2); }
|
||
.ai-tip { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1)); border: 1px solid var(--kt-ai-primary); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-4); margin: var(--kt-ai-space-4) 0; }
|
||
.ai-tip-title { display: flex; align-items: center; gap: var(--kt-ai-space-2); font-weight: 600; margin-bottom: var(--kt-ai-space-2); }
|
||
.hidden { display: none; }
|
||
.section-title { font-size: var(--kt-ai-text-2xl); font-weight: 700; margin-bottom: var(--kt-ai-space-4); }
|
||
.action-buttons { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; margin-top: var(--kt-ai-space-4); }
|
||
.trip-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); }
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
.trip-card { break-inside: avoid; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-2)">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#rocket"></use></svg>
|
||
<strong>AI Trip Planner</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="showSavedTrips()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#archive"></use></svg>
|
||
Сохранённые
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="scrollToSection('planner')">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#sparkles"></use></svg>
|
||
Создать маршрут
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Планируй путешествия с умом</h1>
|
||
<p class="kt-ai-hero-sub">AI подберёт идеальный маршрут под твой бюджет и интересы за секунды</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="scrollToSection('planner')">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#sparkles"></use></svg>
|
||
Создать маршрут
|
||
</button>
|
||
<button class="kt-ai-btn" data-size="lg" onclick="scrollToSection('saved')">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#archive"></use></svg>
|
||
Мои поездки
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="planner" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Параметры поездки</h2>
|
||
<p>Расскажи, что ты хочешь — AI составит детальный план</p>
|
||
</div>
|
||
|
||
<div class="trip-card">
|
||
<div class="trip-inputs">
|
||
<div class="kt-ai-field">
|
||
<label>Бюджет (тенге)</label>
|
||
<input type="number" id="budget" class="kt-ai-input" placeholder="500000" min="50000" step="10000">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Количество дней</label>
|
||
<input type="number" id="days" class="kt-ai-input" placeholder="7" min="1" max="30">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Тип отдыха</label>
|
||
<select id="restType" class="kt-ai-select">
|
||
<option value="beach">Пляжный</option>
|
||
<option value="active">Активный</option>
|
||
<option value="culture">Культурный</option>
|
||
<option value="nature">Природа</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-field">
|
||
<label>Интересы (выбери несколько)</label>
|
||
<div class="interest-tags" id="interestTags">
|
||
<span class="interest-tag" data-tag="food">Еда</span>
|
||
<span class="interest-tag" data-tag="photo">Фото</span>
|
||
<span class="interest-tag" data-tag="history">История</span>
|
||
<span class="interest-tag" data-tag="art">Искусство</span>
|
||
<span class="interest-tag" data-tag="nightlife">Ночная жизнь</span>
|
||
<span class="interest-tag" data-tag="shopping">Шопинг</span>
|
||
<span class="interest-tag" data-tag="sports">Спорт</span>
|
||
<span class="interest-tag" data-tag="relax">Релакс</span>
|
||
<span class="interest-tag" data-tag="adventure">Приключения</span>
|
||
<span class="interest-tag" data-tag="local">Местный колорит</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="generateTrip()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#sparkles"></use></svg>
|
||
Сгенерировать маршрут
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="clearForm()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#trash"></use></svg>
|
||
Очистить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="results" class="kt-ai-section hidden" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="trip-header">
|
||
<h2 class="section-title">Твой маршрут</h2>
|
||
<div class="action-buttons no-print">
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="saveTrip()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#check"></use></svg>
|
||
Сохранить
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="exportToPDF()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#download"></use></svg>
|
||
Экспорт PDF
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="exportToText()">
|
||
<svg class="kt-icon" style="margin-right:var(--kt-ai-space-1)"><use href="#file"></use></svg>
|
||
Экспорт текст
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="trip-card">
|
||
<h3><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#chart"></use></svg>Бюджет поездки</h3>
|
||
<div class="budget-stats">
|
||
<span>Потрачено: <strong id="spentAmount">0</strong> ₸</span>
|
||
<span>Осталось: <strong id="remainingAmount">0</strong> ₸</span>
|
||
</div>
|
||
<div class="budget-bar">
|
||
<div class="budget-fill" id="budgetFill" style="width: 0%"></div>
|
||
</div>
|
||
<div class="budget-stats" style="margin-top: var(--kt-ai-space-1)">
|
||
<span id="budgetPercent">0% использовано</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="aiTips" class="ai-tip">
|
||
<div class="ai-tip-title">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#sparkles"></use></svg>
|
||
<span>AI-советы</span>
|
||
</div>
|
||
<div id="aiTipsContent"></div>
|
||
</div>
|
||
|
||
<div id="routeDays"></div>
|
||
|
||
<div class="trip-card">
|
||
<h3><svg class="kt-icon" style="vertical-align:middle;margin-right:var(--kt-ai-space-1)"><use href="#map"></use></svg>Точки на карте</h3>
|
||
<div class="map-placeholder">
|
||
<svg class="kt-icon kt-icon-lg" aria-hidden="true" style="opacity:0.5;margin-bottom:var(--kt-ai-space-3)"><use href="#map"></use></svg>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-3)">Интерактивная карта недоступна</p>
|
||
<div id="mapPoints"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="saved" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Сохранённые поездки</h2>
|
||
<p>Твои маршруты хранятся локально в браузере</p>
|
||
</div>
|
||
<div id="savedTripsList"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 AI Trip Planner</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-ai-fg-muted)">Создано <svg class="kt-icon" style="vertical-align:middle;color:var(--kt-ai-primary)"><use href="#sparkles"></use></svg> для путешественников</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|