919 lines
33 KiB
HTML
919 lines
33 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Journey Mapper - Interactive Map</title>
|
|
|
|
<!-- Open Props CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/open-props" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/open-props/normalize.min.css"
|
|
/>
|
|
|
|
<!-- Leaflet -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
|
|
<!-- Google Fonts -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Responsive Design -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<style>
|
|
/* Use Open Props design tokens */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-sans);
|
|
background: var(--gray-0);
|
|
color: var(--gray-9);
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
.app-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 320px;
|
|
background: var(--surface-2);
|
|
border-right: 1px solid var(--surface-4);
|
|
padding: var(--size-4);
|
|
transition: transform 0.3s var(--ease-3);
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-4);
|
|
}
|
|
.sidebar.collapsed {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.map-area {
|
|
flex: 1;
|
|
min-width: 0;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
/* Header */
|
|
.sidebar-header {
|
|
margin-bottom: var(--size-6);
|
|
text-align: center;
|
|
}
|
|
.sidebar-header h1 {
|
|
color: var(--indigo-8);
|
|
margin: 0;
|
|
font-size: var(--font-size-5);
|
|
font-weight: var(--font-weight-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2);
|
|
}
|
|
.tagline {
|
|
color: var(--gray-6);
|
|
font-size: var(--font-size-0);
|
|
margin-top: var(--size-2);
|
|
}
|
|
|
|
/* Mode buttons */
|
|
.mode-selector {
|
|
margin-bottom: var(--size-4);
|
|
}
|
|
.mode-btn {
|
|
width: 100%;
|
|
padding: var(--size-3);
|
|
margin-bottom: var(--size-2);
|
|
border: none;
|
|
border-radius: var(--radius-3);
|
|
background: var(--surface-3);
|
|
color: var(--text-2);
|
|
font-size: var(--font-size-2);
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
.mode-btn.active {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
.mode-btn:hover {
|
|
background: var(--surface-4);
|
|
}
|
|
|
|
/* Panels */
|
|
.panel {
|
|
display: none;
|
|
background: var(--surface-1);
|
|
border-radius: var(--radius-3);
|
|
padding: var(--size-4);
|
|
box-shadow: var(--shadow-3);
|
|
margin-bottom: var(--size-4);
|
|
}
|
|
.panel.active-panel {
|
|
display: block;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: var(--size-3);
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: var(--size-1);
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--text-2);
|
|
font-size: var(--font-size-1);
|
|
}
|
|
input[type="text"],
|
|
input[type="date"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: var(--size-2) var(--size-3);
|
|
border: 1px solid var(--surface-4);
|
|
border-radius: var(--radius-2);
|
|
font-size: var(--font-size-2);
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
transition:
|
|
border-color 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--indigo-6);
|
|
box-shadow: 0 0 0 3px var(--indigo-2);
|
|
}
|
|
textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
input[type="file"] {
|
|
width: 100%;
|
|
padding: var(--size-2) 0;
|
|
font-size: var(--font-size-1);
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* Instructions */
|
|
.instructions {
|
|
background: var(--surface-3);
|
|
padding: var(--size-3);
|
|
border-radius: var(--radius-2);
|
|
margin-bottom: var(--size-4);
|
|
font-size: var(--font-size-1);
|
|
border-left: 4px solid var(--indigo-6);
|
|
}
|
|
.instructions h4 {
|
|
margin-top: 0;
|
|
margin-bottom: var(--size-2);
|
|
color: var(--indigo-8);
|
|
}
|
|
.instructions ol {
|
|
margin: 0;
|
|
padding-left: var(--size-5);
|
|
}
|
|
|
|
/* Buttons */
|
|
.button-group {
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
margin-top: var(--size-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
padding: var(--size-2) var(--size-4);
|
|
border: none;
|
|
border-radius: var(--radius-2);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-2);
|
|
font-weight: var(--font-weight-5);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
transition: all 0.2s var(--ease-2);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
.btn-primary {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--indigo-8);
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
.btn-success {
|
|
background: var(--green-7);
|
|
color: white;
|
|
}
|
|
.btn-success:hover {
|
|
background: var(--green-8);
|
|
}
|
|
.btn-secondary {
|
|
background: var(--gray-7);
|
|
color: white;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--gray-8);
|
|
}
|
|
.btn-danger {
|
|
background: var(--red-7);
|
|
color: white;
|
|
}
|
|
.btn-danger:hover {
|
|
background: var(--red-8);
|
|
}
|
|
|
|
/* Markers list */
|
|
.markers-list {
|
|
background: var(--surface-1);
|
|
border-radius: var(--radius-3);
|
|
padding: var(--size-4);
|
|
box-shadow: var(--shadow-3);
|
|
margin-top: var(--size-4);
|
|
}
|
|
.markers-list h3 {
|
|
margin-top: 0;
|
|
color: var(--indigo-8);
|
|
font-size: var(--font-size-3);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
padding-bottom: var(--size-2);
|
|
margin-bottom: var(--size-3);
|
|
}
|
|
.marker-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--size-2);
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius-2);
|
|
margin-bottom: var(--size-2);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.marker-item:hover {
|
|
background: var(--surface-3);
|
|
}
|
|
.marker-title {
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--indigo-8);
|
|
flex: 1;
|
|
}
|
|
.marker-coords {
|
|
font-size: var(--font-size-0);
|
|
color: var(--gray-6);
|
|
}
|
|
.empty-message {
|
|
text-align: center;
|
|
color: var(--gray-6);
|
|
font-style: italic;
|
|
padding: var(--size-4);
|
|
}
|
|
|
|
|
|
.control-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-round);
|
|
background-color: var(--surface-1);
|
|
border: none;
|
|
box-shadow: var(--shadow-3);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size-3);
|
|
color: var(--text-2);
|
|
transition: all 0.2s;
|
|
}
|
|
.control-btn:hover {
|
|
background-color: var(--surface-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Mode indicator */
|
|
.mode-indicator {
|
|
position: absolute;
|
|
top: var(--size-4);
|
|
left: var(--size-4);
|
|
background-color: var(--surface-1);
|
|
padding: var(--size-2) var(--size-4);
|
|
border-radius: var(--radius-5);
|
|
box-shadow: var(--shadow-3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
z-index: 10;
|
|
}
|
|
.indicator-text {
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--text-2);
|
|
}
|
|
.indicator-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-round);
|
|
}
|
|
.indicator-dot.creating {
|
|
background-color: var(--indigo-6);
|
|
}
|
|
.indicator-dot.viewing {
|
|
background-color: var(--green-6);
|
|
}
|
|
|
|
/* Journey info */
|
|
.journey-info {
|
|
background-color: var(--surface-2);
|
|
border-radius: var(--radius-2);
|
|
padding: var(--size-3);
|
|
margin-top: var(--size-3);
|
|
border: 1px solid var(--surface-4);
|
|
}
|
|
.info-content p {
|
|
margin: var(--size-2) 0;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
.modal-content {
|
|
background-color: var(--surface-1);
|
|
border-radius: var(--radius-4);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-5);
|
|
}
|
|
.modal-header {
|
|
padding: var(--size-4);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
}
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: var(--font-size-4);
|
|
cursor: pointer;
|
|
color: var(--gray-6);
|
|
}
|
|
.close-btn:hover {
|
|
color: var(--gray-9);
|
|
}
|
|
.modal-body {
|
|
padding: var(--size-4);
|
|
}
|
|
.modal-footer {
|
|
padding: var(--size-4);
|
|
border-top: 1px solid var(--surface-4);
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
justify-content: flex-end;
|
|
}
|
|
.image-preview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
|
|
gap: var(--size-2);
|
|
margin-top: var(--size-2);
|
|
}
|
|
.image-preview {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
border-radius: var(--radius-2);
|
|
overflow: hidden;
|
|
border: 1px solid var(--surface-4);
|
|
background: var(--surface-2);
|
|
}
|
|
.image-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.remove-image-btn {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
border-radius: var(--radius-round);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: var(--size-4);
|
|
right: var(--size-4);
|
|
background-color: var(--green-7);
|
|
color: white;
|
|
padding: var(--size-3) var(--size-4);
|
|
border-radius: var(--radius-3);
|
|
box-shadow: var(--shadow-4);
|
|
display: none;
|
|
z-index: 1100;
|
|
animation: slideIn 0.3s var(--ease-3);
|
|
}
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
.sidebar-footer {
|
|
margin-top: var(--size-4);
|
|
border-top: 1px solid var(--surface-4);
|
|
padding-top: var(--size-3);
|
|
}
|
|
.navigation {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: var(--size-2);
|
|
}
|
|
.nav-link {
|
|
color: var(--indigo-7);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-1);
|
|
font-size: var(--font-size-1);
|
|
}
|
|
.nav-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.footer-text {
|
|
text-align: center;
|
|
font-size: var(--font-size-0);
|
|
color: var(--gray-6);
|
|
margin: 0;
|
|
}
|
|
|
|
.site-header {
|
|
background: var(--gray-9);
|
|
padding: var(--size-4) var(--size-6);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
}
|
|
.site-header .container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2);
|
|
}
|
|
.site-title {
|
|
margin: 0;
|
|
font-size: var(--font-size-4);
|
|
font-weight: var(--font-weight-6);
|
|
}
|
|
.site-title a {
|
|
color: var(--indigo-4);
|
|
text-decoration: none;
|
|
}
|
|
.site-nav {
|
|
display: flex;
|
|
gap: var(--size-4);
|
|
}
|
|
.site-nav a {
|
|
color: var(--gray-2);
|
|
text-decoration: none;
|
|
font-weight: var(--font-weight-5);
|
|
transition: color 0.2s;
|
|
padding: var(--size-1) var(--size-2);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
.site-nav a:hover,
|
|
.site-nav a.active {
|
|
color: var(--indigo-4);
|
|
background: var(--surface-2);
|
|
}
|
|
.app-container {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
margin-left: var(--size-4);
|
|
}
|
|
.user-menu .username {
|
|
color: var(--gray-2);
|
|
font-weight: var(--font-weight-5);
|
|
}
|
|
.logout-btn {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-2);
|
|
padding: var(--size-1) var(--size-3);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-1);
|
|
font-weight: var(--font-weight-5);
|
|
transition: background 0.2s;
|
|
}
|
|
.logout-btn:hover {
|
|
background: var(--indigo-8);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="display: flex; flex-direction: column; min-height: 100vh">
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<h1 class="site-title"><a href="/">Journey Mapper</a></h1>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4);
|
|
"
|
|
>
|
|
<nav class="site-nav">
|
|
<a href="map-page.html" class="active">Map</a>
|
|
<a href="blog-list.html">Blog</a>
|
|
</nav>
|
|
<div class="user-menu" id="user-menu">
|
|
<!-- Will be filled by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="app-container">
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>
|
|
<i class="fas fa-map-marked-alt"></i> Journey Mapper
|
|
</h1>
|
|
<p class="tagline">
|
|
Create and explore interactive journey maps
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mode-selector">
|
|
<button id="mode-create" class="mode-btn active">
|
|
<i class="fas fa-plus-circle"></i> Create Journey
|
|
</button>
|
|
<button id="mode-view" class="mode-btn">
|
|
<i class="fas fa-eye"></i> View Journeys
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Create Panel -->
|
|
<div id="create-panel" class="panel active-panel">
|
|
<h3><i class="fas fa-route"></i> Create New Journey</h3>
|
|
<div class="form-group">
|
|
<label for="journey-title"
|
|
><i class="fas fa-heading"></i> Journey Title</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="journey-title"
|
|
placeholder="My European Adventure"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="journey-visibility"><i class="fas fa-lock"></i> Visibility</label>
|
|
<select id="journey-visibility">
|
|
<option value="private">Private (only you)</option>
|
|
<option value="public">Public (anyone can view)</option>
|
|
<option value="shared">Shared (with specific users)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="journey-description"
|
|
><i class="fas fa-align-left"></i>
|
|
Description</label
|
|
>
|
|
<textarea
|
|
id="journey-description"
|
|
placeholder="Describe your journey..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h4>
|
|
<i class="fas fa-info-circle"></i> How to create:
|
|
</h4>
|
|
<ol>
|
|
<li>Click on the map to place markers</li>
|
|
<li>Click on a marker to edit its content</li>
|
|
<li>Markers are automatically connected</li>
|
|
<li>Click "Save Journey" when done</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<h4>
|
|
<i class="fas fa-map-marker-alt"></i> Journey Markers
|
|
</h4>
|
|
<div id="create-markers-container">
|
|
<!-- markers appear here dynamically -->
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="add-marker-btn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Add Marker
|
|
</button>
|
|
<button id="save-journey-btn" class="btn btn-success">
|
|
<i class="fas fa-save"></i> Save Journey
|
|
</button>
|
|
<button
|
|
id="clear-markers-btn"
|
|
class="btn btn-secondary"
|
|
>
|
|
<i class="fas fa-trash-alt"></i> Clear Markers
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Panel -->
|
|
<div id="view-panel" class="panel">
|
|
<h3><i class="fas fa-map"></i> Explore Journeys</h3>
|
|
<div class="form-group">
|
|
<label for="journey-select"
|
|
><i class="fas fa-list"></i> Select Journey</label
|
|
>
|
|
<select id="journey-select">
|
|
<option value="">-- Choose a journey --</option>
|
|
<!-- populated from API -->
|
|
</select>
|
|
</div>
|
|
|
|
<div id="journey-info" class="journey-info">
|
|
<h4>
|
|
<i class="fas fa-info-circle"></i> Journey Details
|
|
</h4>
|
|
<div class="info-content">
|
|
<p>
|
|
<strong>Title:</strong>
|
|
<span id="info-title">-</span>
|
|
</p>
|
|
<p>
|
|
<strong>Description:</strong>
|
|
<span id="info-description">-</span>
|
|
</p>
|
|
<p>
|
|
<strong>Markers:</strong>
|
|
<span id="info-marker-count">0</span>
|
|
</p>
|
|
<p>
|
|
<strong>Created:</strong>
|
|
<span id="info-date">-</span>
|
|
</p>
|
|
</div>
|
|
<div class="button-group">
|
|
<button
|
|
id="load-journey-btn"
|
|
class="btn btn-primary"
|
|
>
|
|
<i class="fas fa-eye"></i> Load on Map
|
|
</button>
|
|
<button
|
|
id="edit-journey-btn"
|
|
class="btn btn-secondary"
|
|
>
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<button
|
|
id="delete-journey-btn"
|
|
class="btn btn-danger"
|
|
>
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Markers List (while creating) -->
|
|
<div class="markers-list">
|
|
<h3>
|
|
<i class="fas fa-map-marker-alt"></i> Current Markers
|
|
</h3>
|
|
<div id="current-markers-container">
|
|
<p class="empty-message">
|
|
No markers yet. Click on the map to add markers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="sidebar-footer">
|
|
<div class="navigation">
|
|
<a href="#" class="nav-link"
|
|
><i class="fas fa-list"></i> All Journeys</a
|
|
>
|
|
<a href="blog-page.html" class="nav-link"
|
|
><i class="fas fa-blog"></i> Blog</a
|
|
>
|
|
</div>
|
|
<p class="footer-text">Journey Mapper v1.0</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAP AREA -->
|
|
<main class="map-area">
|
|
<div id="map"></div>
|
|
|
|
<!-- Map Controls -->
|
|
<div class="map-controls">
|
|
<button
|
|
id="toggle-sidebar"
|
|
class="control-btn"
|
|
title="Toggle Sidebar"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<button id="zoom-in" class="control-btn" title="Zoom In">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button id="zoom-out" class="control-btn" title="Zoom Out">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<button
|
|
id="locate-me"
|
|
class="control-btn"
|
|
title="My Location"
|
|
>
|
|
<i class="fas fa-location-arrow"></i>
|
|
</button>
|
|
<button
|
|
id="fit-all"
|
|
class="control-btn"
|
|
title="Fit All Markers"
|
|
>
|
|
<i class="fas fa-expand-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mode Indicator -->
|
|
<div id="mode-indicator" class="mode-indicator">
|
|
<span class="indicator-text">Creating: New Journey</span>
|
|
<div class="indicator-dot creating"></div>
|
|
</div>
|
|
|
|
<!-- Marker Modal -->
|
|
<div id="marker-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>
|
|
<i class="fas fa-map-marker-alt"></i> Edit
|
|
Marker
|
|
</h3>
|
|
<button class="close-btn" id="close-modal">
|
|
×
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="marker-title">Title</label>
|
|
<input
|
|
type="text"
|
|
id="marker-title"
|
|
placeholder="Eiffel Tower"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-date">Date</label>
|
|
<input type="date" id="marker-date" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-text">Description</label>
|
|
<textarea
|
|
id="marker-text"
|
|
placeholder="What happened here?"
|
|
></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="video-url"
|
|
>Video URL (optional)</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="video-url"
|
|
placeholder="https://youtu.be/..."
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-images">Images</label>
|
|
<input
|
|
type="file"
|
|
id="marker-images"
|
|
accept="image/*"
|
|
multiple
|
|
/>
|
|
<div
|
|
id="marker-image-preview"
|
|
class="image-preview-grid"
|
|
></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-coords">Coordinates</label>
|
|
<input
|
|
type="text"
|
|
id="marker-coords"
|
|
readonly
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="save-marker" class="btn btn-primary">
|
|
Save
|
|
</button>
|
|
<button id="delete-marker" class="btn btn-danger">
|
|
Delete
|
|
</button>
|
|
<button
|
|
id="close-modal-footer"
|
|
class="btn btn-secondary"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div id="toast" class="toast">
|
|
<p id="toast-message"></p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div id="toast" class="toast"><p id="toast-message"></p></div>
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/map-page.js"></script>
|
|
</body>
|
|
</html>
|