248 lines
11 KiB
HTML
248 lines
11 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>
|
|
|
|
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.19.0/dist/maplibre-gl.css' />
|
|
<script src='https://unpkg.com/maplibre-gl@5.19.0/dist/maplibre-gl.js'></script>
|
|
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
html, body, #map { height: 100%; }
|
|
</style>
|
|
|
|
<!-- Font Awesome Icons -->
|
|
<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&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/map.css">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<!-- Main Container -->
|
|
<div class="app-container">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- Header Section -->
|
|
<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>
|
|
|
|
<!-- Mode Selector -->
|
|
<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 Journey Panel (Visible in create mode) -->
|
|
<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">
|
|
</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 add content</li>
|
|
<li>Markers will be automatically connected</li>
|
|
<li>Click "Save Journey" when done</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="save-journey" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Save Journey
|
|
</button>
|
|
<button id="clear-markers" class="btn btn-secondary">
|
|
<i class="fas fa-trash-alt"></i> Clear Markers
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Journey Panel (Visible in view mode) -->
|
|
<div id="view-panel" class="panel">
|
|
<h3><i class="fas fa-map"></i> Explore Journeys</h3>
|
|
|
|
<!-- Journey Selection -->
|
|
<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>
|
|
<option value="all">Show All Journeys</option>
|
|
<!-- Journeys will be populated by JavaScript -->
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Filter Options -->
|
|
<div class="filter-options">
|
|
<h4><i class="fas fa-filter"></i> Filter Options</h4>
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="filter-markers" checked>
|
|
Show Markers
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="filter-paths" checked>
|
|
Show Paths
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected Journey Info -->
|
|
<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="view-blog" class="btn btn-primary">
|
|
<i class="fas fa-book-open"></i> View Blog Post
|
|
</button>
|
|
<button id="edit-journey" class="btn btn-secondary">
|
|
<i class="fas fa-edit"></i> Edit Journey
|
|
</button>
|
|
<button id="delete-journey" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Markers List -->
|
|
<div class="markers-list">
|
|
<h3><i class="fas fa-map-marker-alt"></i> Current Markers</h3>
|
|
<div id="markers-container">
|
|
<!-- Markers will be added here by JavaScript -->
|
|
<p class="empty-message" id="empty-markers">No markers yet. Click on the map to add markers.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="sidebar-footer">
|
|
<div class="navigation">
|
|
<a href="journeys.html" class="nav-link">
|
|
<i class="fas fa-list"></i> All Journeys
|
|
</a>
|
|
<a href="about.html" class="nav-link">
|
|
<i class="fas fa-question-circle"></i> Help
|
|
</a>
|
|
</div>
|
|
<p class="footer-text">Journey Mapper v1.0</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Map Area -->
|
|
<main class="map-area">
|
|
<!-- Map Container -->
|
|
<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>
|
|
|
|
<!-- Current 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 Content Modal (Hidden by default) -->
|
|
<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 Content</h3>
|
|
<button id="close-modal" class="close-btn">×</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="marker-title"><i class="fas fa-heading"></i> Title</label>
|
|
<input type="text" id="marker-title" placeholder="Marker title">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="marker-date"><i class="fas fa-calendar"></i> Date</label>
|
|
<input type="date" id="marker-date">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="marker-text"><i class="fas fa-align-left"></i> Description</label>
|
|
<textarea id="marker-text" placeholder="Marker description"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="video-url"><i class="fas fa-video"></i> Video URL</label>
|
|
<input type="text" id="video-url" placeholder="Video URL">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label><i class="fas fa-images"></i> Images</label>
|
|
<div id="image-preview"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="marker-coords"><i class="fas fa-map-marker-alt"></i> Coordinates</label>
|
|
<input type="text" id="marker-coords" readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="save-marker" class="btn btn-primary">Save Marker</button>
|
|
<button id="delete-marker" class="btn btn-danger">Delete Marker</button>
|
|
<button id="close-modal" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Toast -->
|
|
<div id="toast" class="toast">
|
|
<p id="toast-message"></p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script src="js/map.js"></script>
|
|
</body>
|
|
</html>
|