|
|
@@ -0,0 +1,153 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>GPX Visualizer</title>
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
+ <link rel="stylesheet" href="css/style.css" />
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- Auth page -->
|
|
|
+ <div id="auth-page">
|
|
|
+ <div class="auth-container">
|
|
|
+ <h1 id="app-title">GPX Visualizer</h1>
|
|
|
+ <div class="auth-tabs">
|
|
|
+ <button class="auth-tab active" data-tab="login">Login</button>
|
|
|
+ <button class="auth-tab" data-tab="register">Register</button>
|
|
|
+ </div>
|
|
|
+ <div id="auth-error" class="error-msg" style="display:none"></div>
|
|
|
+ <form id="login-form">
|
|
|
+ <input type="text" id="login-username" placeholder="Username" required>
|
|
|
+ <input type="password" id="login-password" placeholder="Password" required>
|
|
|
+ <button type="submit">Login</button>
|
|
|
+ </form>
|
|
|
+ <form id="register-form" style="display:none">
|
|
|
+ <input type="text" id="reg-username" placeholder="Username (3-32 chars)" required>
|
|
|
+ <input type="email" id="reg-email" placeholder="Email (optional)">
|
|
|
+ <input type="password" id="reg-password" placeholder="Password (min 6 chars)" required>
|
|
|
+ <button type="submit">Register</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Main app -->
|
|
|
+ <div id="app" style="display:none">
|
|
|
+ <div id="topbar">
|
|
|
+ <div id="topbar-left">
|
|
|
+ <button id="sidebar-toggle-btn" class="icon-btn" title="Toggle sidebar">☰</button>
|
|
|
+ <span id="topbar-title">GPX Visualizer</span>
|
|
|
+ </div>
|
|
|
+ <div id="topbar-right">
|
|
|
+ <span id="topbar-user"></span>
|
|
|
+ <button id="admin-btn" class="topbar-btn" style="display:none">Admin</button>
|
|
|
+ <button id="logout-btn" class="topbar-btn">Logout</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="main-content">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <div id="sidebar">
|
|
|
+ <div id="sidebar-tabs">
|
|
|
+ <button class="sidebar-tab active" data-tab="browser">Files</button>
|
|
|
+ <button class="sidebar-tab" data-tab="stats">Stats</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Browser tab -->
|
|
|
+ <div id="browser-tab" class="sidebar-tab-content">
|
|
|
+ <div id="breadcrumb"></div>
|
|
|
+ <div id="browser-actions">
|
|
|
+ <button id="new-dir-btn" class="action-btn" title="New folder">+ Folder</button>
|
|
|
+ <button id="upload-btn" class="action-btn" title="Upload GPX">+ GPX</button>
|
|
|
+ <input type="file" id="file-input" accept=".gpx" multiple style="display:none">
|
|
|
+ </div>
|
|
|
+ <div id="browser-list"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Stats tab -->
|
|
|
+ <div id="stats-tab" class="sidebar-tab-content" style="display:none">
|
|
|
+ <div id="stats-content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Map -->
|
|
|
+ <div id="map-container">
|
|
|
+ <div id="map"></div>
|
|
|
+ <div id="track-info-panel" style="display:none">
|
|
|
+ <div id="track-info-content"></div>
|
|
|
+ <button id="track-info-close">×</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Admin panel (modal) -->
|
|
|
+ <div id="admin-modal" class="modal" style="display:none">
|
|
|
+ <div class="modal-content modal-large">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>Admin Panel</h2>
|
|
|
+ <button class="modal-close" data-modal="admin-modal">×</button>
|
|
|
+ </div>
|
|
|
+ <div id="admin-content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Move track modal -->
|
|
|
+ <div id="move-modal" class="modal" style="display:none">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>Move Track</h2>
|
|
|
+ <button class="modal-close" data-modal="move-modal">×</button>
|
|
|
+ </div>
|
|
|
+ <div id="move-content">
|
|
|
+ <p>Select destination directory:</p>
|
|
|
+ <div id="move-dir-list"></div>
|
|
|
+ <div style="margin-top:12px">
|
|
|
+ <button id="move-confirm-btn" class="btn-primary">Move</button>
|
|
|
+ <button class="btn-secondary modal-close" data-modal="move-modal">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Confirm modal -->
|
|
|
+ <div id="confirm-modal" class="modal" style="display:none">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2 id="confirm-title">Confirm</h2>
|
|
|
+ <button class="modal-close" data-modal="confirm-modal">×</button>
|
|
|
+ </div>
|
|
|
+ <p id="confirm-message"></p>
|
|
|
+ <div style="margin-top:16px; display:flex; gap:8px; justify-content:flex-end">
|
|
|
+ <button id="confirm-ok-btn" class="btn-danger">Confirm</button>
|
|
|
+ <button class="btn-secondary modal-close" data-modal="confirm-modal">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Share link modal -->
|
|
|
+ <div id="share-modal" class="modal" style="display:none">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>Share Track</h2>
|
|
|
+ <button class="modal-close" data-modal="share-modal">×</button>
|
|
|
+ </div>
|
|
|
+ <div id="share-content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Upload progress -->
|
|
|
+ <div id="upload-toast" style="display:none">
|
|
|
+ <div id="upload-toast-text">Uploading...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
+ <script src="config.js"></script>
|
|
|
+ <script src="js/api.js"></script>
|
|
|
+ <script src="js/auth.js"></script>
|
|
|
+ <script src="js/map.js"></script>
|
|
|
+ <script src="js/browser.js"></script>
|
|
|
+ <script src="js/stats.js"></script>
|
|
|
+ <script src="js/app.js"></script>
|
|
|
+</body>
|
|
|
+</html>
|
k4be