172 lines
7.1 KiB
HTML
172 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>FreeMoto Navigation</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||
<style>
|
||
html, body, #map {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
#map {
|
||
min-height: 100vh;
|
||
min-width: 100vw;
|
||
z-index: 1;
|
||
}
|
||
.nav-panel {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
max-width: 100vw;
|
||
z-index: 1001;
|
||
background: rgba(255,255,255,0.98);
|
||
border-radius: 18px 18px 0 0;
|
||
box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
|
||
padding: 12px 8px 8px 8px;
|
||
overflow-y: auto;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
@media (min-width: 600px) {
|
||
.nav-panel {
|
||
left: 24px;
|
||
width: 370px;
|
||
max-width: 420px;
|
||
border-radius: 18px;
|
||
top: 24px;
|
||
bottom: auto;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,0.18);
|
||
}
|
||
}
|
||
#routeInfoCard {
|
||
margin-bottom: 1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
#sourceSuggestions,
|
||
#destSuggestions {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
z-index: 2000;
|
||
width: 100%;
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
border-radius: 0 0 0.5rem 0.5rem;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||
}
|
||
.section-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
margin-top: 1rem;
|
||
color: #495057;
|
||
}
|
||
.card-icon {
|
||
font-size: 2rem;
|
||
margin-right: 0.5rem;
|
||
vertical-align: middle;
|
||
}
|
||
.btn-lg, .form-control {
|
||
font-size: 1.2rem;
|
||
padding: 0.7rem 1rem;
|
||
}
|
||
.form-check-label {
|
||
font-size: 1rem;
|
||
}
|
||
.input-group-text svg,
|
||
.btn svg {
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
<div class="nav-panel shadow-lg">
|
||
<div class="text-center mb-2">
|
||
<span class="card-icon">🏍️</span>
|
||
<span class="fs-4 fw-bold text-primary">FreeMoto</span>
|
||
</div>
|
||
<div id="routeInfoCard" class="alert alert-info d-none" role="alert"></div>
|
||
<div class="mb-2">
|
||
<div class="section-title">Route</div>
|
||
<div class="input-group mb-2 position-relative">
|
||
<span class="input-group-text" title="Start">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#0d6efd" class="bi bi-geo-alt" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 1 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>
|
||
</span>
|
||
<input type="text" class="form-control" id="sourceInput" placeholder="Start address" autocomplete="off">
|
||
<button class="btn btn-outline-secondary" type="button" id="useCurrentSource" title="Use current location">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#198754" class="bi bi-crosshair" viewBox="0 0 16 16"><path d="M8 15V1a7 7 0 1 1 0 14zm0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/><path d="M8 8.5a.5.5 0 0 1-.5-.5V2.707l-2.146 2.147a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V8a.5.5 0 0 1-.5.5z"/></svg>
|
||
</button>
|
||
<div id="sourceSuggestions" class="list-group position-absolute w-100" style="z-index: 2000;"></div>
|
||
</div>
|
||
<div class="input-group mb-2 position-relative">
|
||
<span class="input-group-text" title="Destination">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#dc3545" class="bi bi-flag" viewBox="0 0 16 16"><path d="M14.778 2.222a.5.5 0 0 1 0 .707l-2.5 2.5a.5.5 0 0 1-.707 0l-2.5-2.5a.5.5 0 0 1 .707-.707L12 3.793l2.071-2.071a.5.5 0 0 1 .707 0z"/><path d="M2.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/></svg>
|
||
</span>
|
||
<input type="text" class="form-control" id="destInput" placeholder="Destination address" autocomplete="off">
|
||
<button class="btn btn-outline-secondary" type="button" id="useCurrentDest" title="Use current location">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#198754" class="bi bi-crosshair" viewBox="0 0 16 16"><path d="M8 15V1a7 7 0 1 1 0 14zm0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/><path d="M8 8.5a.5.5 0 0 1-.5-.5V2.707l-2.146 2.147a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V8a.5.5 0 0 1-.5.5z"/></svg>
|
||
</button>
|
||
<div id="destSuggestions" class="list-group position-absolute w-100" style="z-index: 2000;"></div>
|
||
</div>
|
||
<div class="d-grid gap-2 mb-2">
|
||
<button type="button" id="plotRouteBtn" class="btn btn-success btn-lg">Plot Route</button>
|
||
</div>
|
||
</div>
|
||
<div class="section-title">Route Options</div>
|
||
<form>
|
||
<div class="row g-2">
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="avoidHighways">
|
||
<label class="form-check-label" for="avoidHighways">Avoid freeways</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="useShortest">
|
||
<label class="form-check-label" for="useShortest">Shortest route</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="avoidTollRoads">
|
||
<label class="form-check-label" for="avoidTollRoads">Avoid tolls</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="avoidFerries">
|
||
<label class="form-check-label" for="avoidFerries">Avoid ferries</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="avoidUnpaved">
|
||
<label class="form-check-label" for="avoidUnpaved">Avoid unpaved</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="d-flex justify-content-between mt-3 mb-2">
|
||
<button onclick="resetMarkers()" class="btn btn-primary btn-lg flex-fill me-2">Reset Points</button>
|
||
<div class="btn-group flex-fill" role="group" aria-label="Zoom controls">
|
||
<button type="button" class="btn btn-outline-secondary btn-lg" id="zoomInBtn" title="Zoom in">+</button>
|
||
<button type="button" class="btn btn-outline-secondary btn-lg" id="zoomOutBtn" title="Zoom out">−</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-grid gap-2 mb-2">
|
||
<button type="button" id="exportGpxBtn" class="btn btn-warning btn-lg">Export GPX</button>
|
||
</div>
|
||
</div>
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
<script src="/main.js"></script>
|
||
<script src="/route.js"></script>
|
||
<script src="/geolocate.js"></script>
|
||
</body>
|
||
</html>
|