156 lines
8.2 KiB
HTML
156 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Budapest Travel Guide - Interactive Map & Route Planner</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Header -->
|
||
<header class="app-header">
|
||
<div class="header-content">
|
||
<h1><span class="icon-budapest">🏛️</span> Budapest Travel Guide</h1>
|
||
<p>Explore the Pearl of the Danube with our interactive map & route planner</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<!-- Search -->
|
||
<div class="search-section">
|
||
<div class="form-group">
|
||
<input type="text" id="searchInput" class="form-control" placeholder="Search sights...">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Category Filters -->
|
||
<div class="filters-section">
|
||
<h3>Filter by Category</h3>
|
||
<div class="filter-buttons">
|
||
<button class="btn btn--sm filter-btn active" data-category="all">All Sights</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Historic Landmark">🏛️ Historic</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Museum">🏛️ Museums</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Religious Site">⛪ Religious</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Thermal Bath">🛁 Baths</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Activity">🎯 Activities</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Café">☕ Cafés</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Restaurant">🍽️ Restaurants</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Market">🏪 Markets</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Shopping Street">🛍️ Shopping</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Bridge">🌉 Bridges</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Park">🌳 Parks</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Viewpoint">🏔️ Views</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Cultural Venue">🎭 Cultural</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Ruin Bar">🍺 Ruin Bars</button>
|
||
<button class="btn btn--sm filter-btn" data-category="Memorial">🕊️ Memorials</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Route Planning -->
|
||
<div class="route-section">
|
||
<h3>My Route Planner</h3>
|
||
<div class="route-controls">
|
||
<button id="placeHotelBtn" class="btn btn--secondary btn--sm">📍 Place My Hotel</button>
|
||
<button id="optimizeRouteBtn" class="btn btn--primary btn--sm">⚡ Optimize Route</button>
|
||
<button id="clearRouteBtn" class="btn btn--outline btn--sm">🗑️ Clear Route</button>
|
||
</div>
|
||
|
||
<div id="hotelInfo" class="hotel-info hidden">
|
||
<div class="hotel-marker">🏨 Hotel Location Set</div>
|
||
<button id="removeHotelBtn" class="btn btn--sm btn--outline">Remove Hotel</button>
|
||
</div>
|
||
|
||
<div id="routeStats" class="route-stats hidden">
|
||
<div class="stats-row">
|
||
<span class="stat-label">Distance:</span>
|
||
<span id="totalDistance">0 km (0 mi)</span>
|
||
</div>
|
||
<div class="stats-row">
|
||
<span class="stat-label">Walking Time:</span>
|
||
<span id="totalTime">0 minutes</span>
|
||
</div>
|
||
<div class="stats-row">
|
||
<span class="stat-label">Selected:</span>
|
||
<span id="selectedCount">0 sights</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="selectedSights" class="selected-sights"></div>
|
||
|
||
<button id="downloadRouteBtn" class="btn btn--primary btn--sm btn--full-width hidden">📄 Download Route</button>
|
||
</div>
|
||
|
||
<!-- Sights List -->
|
||
<div class="sights-section">
|
||
<h3>Budapest Attractions</h3>
|
||
<div id="sightsList" class="sights-list"></div>
|
||
</div>
|
||
|
||
<!-- Getting Around Info -->
|
||
<div class="info-section">
|
||
<h3>Getting Around</h3>
|
||
<div class="info-content">
|
||
<p><strong>Walking:</strong> Most attractions in city center are within 30-45 minutes walking distance.</p>
|
||
<p><strong>Hills:</strong> Buda side has hills - budget extra time for uphill walks.</p>
|
||
<p><strong>Public Transport:</strong> Efficient metro, tram, and bus system available.</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Map Container -->
|
||
<div class="map-container">
|
||
<div id="map"></div>
|
||
<button id="gpsToggle" class="gps-control" type="button" aria-label="Show my location" aria-pressed="false" title="Show my location">
|
||
<svg class="gps-control__icon" viewBox="0 0 24 24" role="img" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="3" fill="currentColor"></circle>
|
||
<circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.8"></circle>
|
||
<path d="M12 4V2M12 22v-2M4 12H2M22 12h-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path>
|
||
</svg>
|
||
</button>
|
||
<div id="mapInstructions" class="map-instructions">
|
||
<div class="instruction-content">
|
||
<h4>🗺️ How to Use This Map</h4>
|
||
<ul>
|
||
<li>Click markers to see sight details</li>
|
||
<li>Check sights in sidebar to plan your route</li>
|
||
<li>Click "Place My Hotel" then click on map</li>
|
||
<li>Use filters to find specific types of attractions</li>
|
||
</ul>
|
||
<button id="closeInstructions" class="btn btn--sm btn--primary">Got it!</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Sight Detail Modal -->
|
||
<div id="sightModal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle"></h2>
|
||
<button id="closeModal" class="btn-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="modalContent"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<label class="checkbox-wrapper">
|
||
<input type="checkbox" id="modalAddToRoute">
|
||
<span>Add to my route</span>
|
||
</label>
|
||
<button id="zoomToSight" class="btn btn--primary">Show on Map</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|