127 lines
5.8 KiB
HTML
127 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Paris Hotels Under 300€ Per Night</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""/>
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script defer src="https://umami-ikow84gco0wcw8cgsc8o08g8.reflectonai.com/script.js" data-website-id="70ad3fb0-dbf5-4c16-8a27-cfe1f6510f89"></script>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="container flex items-center justify-between">
|
|
<h1>Paris Hotels Under 300€ Per Night</h1>
|
|
<div class="view-toggle">
|
|
<button id="map-view-btn" class="btn btn--primary active" aria-label="Switch to map view">
|
|
<i class="fas fa-map-marked-alt"></i> Map View
|
|
</button>
|
|
<button id="list-view-btn" class="btn btn--secondary" aria-label="Switch to list view">
|
|
<i class="fas fa-list"></i> List View
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="app-layout">
|
|
<!-- Sidebar with filters -->
|
|
<aside class="sidebar">
|
|
<div class="filter-section">
|
|
<h2>Filter Hotels</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="search" class="form-label">Search by name</label>
|
|
<input type="text" id="search" class="form-control" placeholder="Hotel name...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Price Range</label>
|
|
<div class="price-filters">
|
|
<button class="price-filter active" data-min="0" data-max="150">Under €150</button>
|
|
<button class="price-filter" data-min="150" data-max="200">€150-200</button>
|
|
<button class="price-filter" data-min="200" data-max="250">€200-250</button>
|
|
<button class="price-filter" data-min="250" data-max="300">€250-300</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="arrondissement" class="form-label">Arrondissement</label>
|
|
<select id="arrondissement" class="form-control">
|
|
<option value="all">All Arrondissements</option>
|
|
<!-- Will be populated by JavaScript -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="rating" class="form-label">Minimum Rating: <span id="rating-value">4.0</span></label>
|
|
<input type="range" id="rating" class="form-control" min="4.0" max="5.0" step="0.1" value="4.0">
|
|
</div>
|
|
|
|
<div class="filter-stats">
|
|
<p>Showing <span id="hotel-count">0</span> hotels</p>
|
|
<button id="reset-filters" class="btn btn--outline btn--sm">Reset Filters</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-section">
|
|
<h3>Hotel Distribution</h3>
|
|
<div class="chart-container">
|
|
<img src="https://pplx-res.cloudinary.com/image/upload/v1749992538/pplx_code_interpreter/210c0c6e_x63wmb.jpg"
|
|
alt="Distribution of Paris Hotels Under 300€ by Arrondissement" class="chart">
|
|
</div>
|
|
<h3>Price Range Distribution</h3>
|
|
<div class="chart-container">
|
|
<img src="https://pplx-res.cloudinary.com/image/upload/v1749992575/pplx_code_interpreter/50b2ec80_uupyt8.jpg"
|
|
alt="Price Range Distribution of Paris Hotels Under 300€" class="chart">
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main content area -->
|
|
<div class="content">
|
|
<!-- Map view -->
|
|
<div id="map-view" class="view active">
|
|
<div id="map"></div>
|
|
<div class="map-legend">
|
|
<h4>Map Legend</h4>
|
|
<div class="legend-item">
|
|
<div class="marker blue-marker"></div>
|
|
<span>Hotel</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="marker highlighted-marker"></div>
|
|
<span>Selected Hotel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List view -->
|
|
<div id="list-view" class="view">
|
|
<div id="hotels-list">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 Paris Hotels Explorer</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
<!-- Application JS -->
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |