feat: add responsive map page with sidebar
This commit is contained in:
Josh-Dev-Quest
Josh-Dev-Quest (aider)
parent
32fa54196a
commit
b55e4bba31
@ -0,0 +1,12 @@
|
|||||||
|
/* Mobile-first approach */
|
||||||
|
.map-container {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet and larger */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
275
map-page.html
275
map-page.html
@ -0,0 +1,275 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
|
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
|
||||||
|
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<!-- 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">Title</label>
|
||||||
|
<input type="text" id="marker-title" placeholder="Location name">
|
||||||
|
</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="Share your experience at this location..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><i class="fas fa-images"></i> Images</label>
|
||||||
|
<div class="image-upload-area">
|
||||||
|
<div id="image-preview" class="image-preview">
|
||||||
|
<!-- Images will appear here -->
|
||||||
|
</div>
|
||||||
|
<div class="upload-actions">
|
||||||
|
<input type="file" id="image-upload" accept="image/*" multiple style="display: none;">
|
||||||
|
<button id="add-image" class="btn btn-small">
|
||||||
|
<i class="fas fa-plus"></i> Add Images
|
||||||
|
</button>
|
||||||
|
<button id="remove-images" class="btn btn-small btn-secondary">
|
||||||
|
<i class="fas fa-trash"></i> Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="video-url"><i class="fas fa-video"></i> Video URL</label>
|
||||||
|
<input type="url" id="video-url" placeholder="YouTube or Vimeo URL">
|
||||||
|
<small class="help-text">Paste a YouTube or Vimeo video link</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="coordinates">
|
||||||
|
<p><strong>Coordinates:</strong> <span id="marker-coords">0, 0</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="save-marker" class="btn btn-primary">
|
||||||
|
<i class="fas fa-save"></i> Save Marker
|
||||||
|
</button>
|
||||||
|
<button id="delete-marker" class="btn btn-danger">
|
||||||
|
<i class="fas fa-trash"></i> Delete Marker
|
||||||
|
</button>
|
||||||
|
<button id="cancel-marker" class="btn btn-secondary">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notification Toast (Hidden by default) -->
|
||||||
|
<div id="toast" class="toast">
|
||||||
|
<div class="toast-content">
|
||||||
|
<span id="toast-message">Journey saved successfully!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- JavaScript Files -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
<script src="js/map.js"></script>
|
||||||
|
|
||||||
|
<!-- Initialize Mapbox -->
|
||||||
|
<script>
|
||||||
|
// Set your Mapbox access token here
|
||||||
|
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
|
||||||
|
|
||||||
|
// Initialize map when page loads
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Map initialization will be handled in map.js
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user