2026-01-11 17:16:59 -07:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Pedestrian Simulator</title>
|
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<!-- Header with stats -->
|
|
|
|
|
|
<div id="header">
|
|
|
|
|
|
<div class="logo-section">
|
2026-01-11 17:56:54 -07:00
|
|
|
|
<h1>Pedestrian Simulator</h1>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- User Menu -->
|
|
|
|
|
|
<div id="user-menu" class="user-menu" style="display: none;">
|
|
|
|
|
|
<img id="userAvatar" class="user-avatar" src="" alt="User" />
|
|
|
|
|
|
<span id="userName" class="user-name"></span>
|
|
|
|
|
|
<button id="kmlBrowserButton" class="icon-button" title="Browse KML Files">📂</button>
|
|
|
|
|
|
<button id="logoutButton" class="icon-button" title="Logout">🚪</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="stats-bar">
|
|
|
|
|
|
<!-- Unified Status Bar -->
|
|
|
|
|
|
<div class="stat-group clickable" id="routeInfoGroup">
|
|
|
|
|
|
<span class="stat-label">Route</span>
|
|
|
|
|
|
<span class="stat-value route-text" id="routeInfo">Not Started</span>
|
|
|
|
|
|
<span class="edit-icon" title="Reset/Change Route">✎</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-group">
|
|
|
|
|
|
<span class="stat-label">Steps</span>
|
|
|
|
|
|
<span class="stat-value" id="currentSteps">0</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-group">
|
|
|
|
|
|
<span class="stat-label">Distance</span>
|
|
|
|
|
|
<span class="stat-value" id="tripMeter">0.0 km</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-group">
|
|
|
|
|
|
<span class="stat-label">Next Sync</span>
|
|
|
|
|
|
<div class="stat-row">
|
|
|
|
|
|
<span class="stat-value" id="nextSync">--:--</span>
|
|
|
|
|
|
<button id="refreshButton" class="icon-button" title="Refresh Now">⟳</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Street View Container -->
|
|
|
|
|
|
<div id="streetview-container">
|
|
|
|
|
|
<div id="panorama"></div>
|
|
|
|
|
|
<div id="main-map" class="hidden-mode"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Minimap -->
|
|
|
|
|
|
<div id="minimap-container">
|
|
|
|
|
|
<div id="minimap"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Start Location Setup Overlay -->
|
|
|
|
|
|
<div id="setup-overlay" class="overlay active">
|
|
|
|
|
|
<div class="setup-card">
|
|
|
|
|
|
<h2>🌍 Plan Your Route</h2>
|
|
|
|
|
|
<p>Enter a start and finish location for your walk</p>
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<label>Start Location</label>
|
|
|
|
|
|
<input type="text" id="startLocationInput" placeholder="e.g., Central Park, NY" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<label>Destination</label>
|
|
|
|
|
|
<input type="text" id="endLocationInput" placeholder="e.g., Empire State Building, NY" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button id="startButton" class="primary-btn">Start Journey</button>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="separator">
|
|
|
|
|
|
<span>OR</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="custom-route-section">
|
|
|
|
|
|
<h3>📂 Use Saved Route</h3>
|
|
|
|
|
|
<p class="subtext">Browse and select from your uploaded KML files</p>
|
|
|
|
|
|
<button id="browseKmlButton" class="secondary-btn">Browse KML Files</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="api-note">Note: You'll need a Google Maps API key configured</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- API Key Setup Overlay -->
|
|
|
|
|
|
<div id="apikey-overlay" class="overlay active">
|
|
|
|
|
|
<div class="setup-card">
|
|
|
|
|
|
<h2>🔑 Google Maps API Key Required</h2>
|
|
|
|
|
|
<p>Enter your Google Maps API key to use Street View</p>
|
|
|
|
|
|
<input type="text" id="apiKeyInput" placeholder="Your Google Maps API Key" />
|
|
|
|
|
|
<button id="saveApiKeyButton" class="primary-btn">Save & Continue</button>
|
|
|
|
|
|
<p class="help-text">
|
|
|
|
|
|
<a href="https://developers.google.com/maps/documentation/javascript/get-api-key"
|
|
|
|
|
|
target="_blank">
|
|
|
|
|
|
How to get an API key →
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="app-footer">
|
|
|
|
|
|
<a href="privacy.html" target="_blank">Privacy Policy</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Login Overlay -->
|
|
|
|
|
|
<div id="login-overlay" class="overlay">
|
|
|
|
|
|
<div class="setup-card">
|
|
|
|
|
|
<h2>🔐 Login Required</h2>
|
|
|
|
|
|
<p>Please login with your Fitbit account to continue</p>
|
|
|
|
|
|
<button id="fitbitLoginButton" class="primary-btn">Login with Fitbit</button>
|
|
|
|
|
|
<div class="privacy-link-container">
|
|
|
|
|
|
<a href="privacy.html" target="_blank" class="secondary-link">Privacy Policy</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- KML Browser Modal -->
|
|
|
|
|
|
<div id="kml-browser-overlay" class="overlay">
|
|
|
|
|
|
<div class="kml-browser-card">
|
|
|
|
|
|
<div class="kml-browser-header">
|
|
|
|
|
|
<h2>📂 KML File Browser</h2>
|
|
|
|
|
|
<button id="closeKmlBrowser" class="close-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="kml-tabs">
|
|
|
|
|
|
<button class="kml-tab active" data-tab="my-files">My Files</button>
|
|
|
|
|
|
<button class="kml-tab" data-tab="public-files">Public Files</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="kml-tab-content">
|
|
|
|
|
|
<!-- My Files Tab -->
|
|
|
|
|
|
<div id="my-files-tab" class="tab-pane active">
|
|
|
|
|
|
<div class="upload-section">
|
|
|
|
|
|
<input type="file" id="kmlUploadInput" accept=".kml,.xml" style="display: none;" />
|
|
|
|
|
|
<button id="uploadKmlButton" class="primary-btn">📤 Upload KML File</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="sort-controls">
|
|
|
|
|
|
<label>Sort by:</label>
|
|
|
|
|
|
<select id="myFilesSortSelect">
|
2026-01-11 21:40:48 -07:00
|
|
|
|
<option value="date">Most Recent</option>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
<option value="distance">Distance</option>
|
2026-01-11 21:40:48 -07:00
|
|
|
|
<option value="filename">Filename</option>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="myFilesList" class="kml-file-list">
|
|
|
|
|
|
<p class="empty-message">No KML files uploaded yet</p>
|
|
|
|
|
|
</div>
|
2026-01-11 21:40:48 -07:00
|
|
|
|
|
|
|
|
|
|
<div class="pagination-controls">
|
|
|
|
|
|
<button id="prevMyPage" class="pagination-btn" disabled>← Previous</button>
|
|
|
|
|
|
<span id="myPageNum">Page 1</span>
|
|
|
|
|
|
<button id="nextMyPage" class="pagination-btn">Next →</button>
|
|
|
|
|
|
</div>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Public Files Tab -->
|
|
|
|
|
|
<div id="public-files-tab" class="tab-pane">
|
|
|
|
|
|
<div class="sort-controls">
|
|
|
|
|
|
<label>Sort by:</label>
|
|
|
|
|
|
<select id="publicFilesSortSelect">
|
|
|
|
|
|
<option value="votes">Highest Votes</option>
|
|
|
|
|
|
<option value="date">Most Recent</option>
|
2026-01-11 21:40:48 -07:00
|
|
|
|
<option value="distance">Distance</option>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="publicFilesList" class="kml-file-list">
|
|
|
|
|
|
<p class="empty-message">No public KML files available</p>
|
|
|
|
|
|
</div>
|
2026-01-11 20:24:50 -07:00
|
|
|
|
|
|
|
|
|
|
<div class="pagination-controls">
|
|
|
|
|
|
<button id="prevPublicPage" class="action-btn" disabled>Previous</button>
|
|
|
|
|
|
<span id="publicPageNum">Page 1</span>
|
|
|
|
|
|
<button id="nextPublicPage" class="action-btn">Next</button>
|
|
|
|
|
|
</div>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-01-11 22:48:50 -07:00
|
|
|
|
<!-- KML Details Overlay -->
|
|
|
|
|
|
<div id="kml-details-overlay" class="overlay">
|
|
|
|
|
|
<div class="kml-details-card">
|
|
|
|
|
|
<div class="kml-details-header">
|
|
|
|
|
|
<h2 id="kmlDetailsTitle">Route Details</h2>
|
|
|
|
|
|
<button id="closeKmlDetails" class="close-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="kml-details-content">
|
|
|
|
|
|
<div id="kmlPreviewMap" class="kml-preview-map"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="kml-metadata-section">
|
|
|
|
|
|
<div class="metadata-row">
|
|
|
|
|
|
<span id="kmlDetailsDistance" class="meta-tag">📏 0.00 km</span>
|
|
|
|
|
|
<span id="kmlDetailsAuthor" class="meta-tag">👤 User</span>
|
|
|
|
|
|
<span id="kmlDetailsVotes" class="meta-tag">👍 0</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description-container">
|
|
|
|
|
|
<div class="description-header">
|
|
|
|
|
|
<h3>Description</h3>
|
|
|
|
|
|
<button id="editDescriptionBtn" class="icon-button small hidden"
|
|
|
|
|
|
title="Edit Description">✎</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="kmlDescriptionDisplay" class="description-text">
|
|
|
|
|
|
No description provided.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="kmlDescriptionEditor" class="description-editor hidden">
|
|
|
|
|
|
<textarea id="kmlDescriptionInput"
|
|
|
|
|
|
placeholder="Enter a description for this route..."></textarea>
|
|
|
|
|
|
<div class="editor-actions">
|
|
|
|
|
|
<button id="saveDescriptionBtn" class="primary-btn small">Save</button>
|
|
|
|
|
|
<button id="cancelDescriptionBtn" class="secondary-btn small">Cancel</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="kml-details-footer">
|
|
|
|
|
|
<button id="backToKmlListBtn" class="secondary-btn">← Back to List</button>
|
|
|
|
|
|
<button id="startKmlTripBtn" class="primary-btn large">▶️ Start Trip</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-01-11 17:16:59 -07:00
|
|
|
|
<!-- General Confirmation Overlay -->
|
|
|
|
|
|
<div id="confirm-overlay" class="overlay">
|
|
|
|
|
|
<div class="setup-card">
|
|
|
|
|
|
<h2 id="confirmTitle">⚠️ Confirm</h2>
|
|
|
|
|
|
<p id="confirmMessage">Are you sure you want to proceed?</p>
|
|
|
|
|
|
<div style="display: flex; gap: 1rem; width: 100%;">
|
|
|
|
|
|
<button id="generalConfirmButton" class="primary-btn" style="flex: 1;">Yes</button>
|
|
|
|
|
|
<button id="generalCancelButton" class="control-btn" style="flex: 1;">Cancel</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-01-13 13:10:55 -07:00
|
|
|
|
<!-- User Profile Overlay -->
|
|
|
|
|
|
<div id="user-profile-overlay" class="overlay">
|
|
|
|
|
|
<div class="user-profile-card">
|
|
|
|
|
|
<div class="user-profile-header">
|
|
|
|
|
|
<button id="closeUserProfile" class="close-btn">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="user-profile-info">
|
|
|
|
|
|
<img id="profileAvatar" class="profile-avatar-large" src="" alt="User" />
|
|
|
|
|
|
<h2 id="profileDisplayName">User Name</h2>
|
|
|
|
|
|
<p id="profileFitbitID" class="profile-fitbit-id">@username</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="user-profile-content">
|
|
|
|
|
|
<h3>Completed Walks (Public)</h3>
|
|
|
|
|
|
<div id="profilePublicTripsList" class="kml-file-list">
|
|
|
|
|
|
<p class="empty-message">No public walks shared yet.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pagination-controls small">
|
|
|
|
|
|
<button id="prevProfilePage" class="action-btn" disabled>←</button>
|
|
|
|
|
|
<span id="profilePageNum">1</span>
|
|
|
|
|
|
<button id="nextProfilePage" class="action-btn">→</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-01-11 17:16:59 -07:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="app.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
