k4be
/
gpx-vis


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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 style="margin-top:16px;text-align:center">
        <a id="guest-mode-link" href="#" style="color:var(--color-text-lighter);font-size:13px">Browse without account →</a>
      </div>
    </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>

      <!-- Sidebar resize handle -->
      <div id="sidebar-resize-handle"></div>

      <!-- Map -->
      <div id="map-container">
        <div id="map"></div>
        <div id="track-info-panel" style="display:none">
          <div id="track-info-content"></div>
          <div id="elevation-chart-container">
            <canvas id="elevation-canvas"></canvas>
            <div id="elevation-tooltip"></div>
          </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>

  <!-- Edit track modal -->
  <div id="edit-track-modal" class="modal" style="display:none">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Edit Track</h2>
        <button class="modal-close" data-modal="edit-track-modal">×</button>
      </div>
      <div id="edit-track-content">
        <div class="form-group">
          <label for="edit-track-name">Name</label>
          <input type="text" id="edit-track-name" class="form-input" maxlength="255">
        </div>
        <div class="form-group">
          <label for="edit-track-type">Type</label>
          <select id="edit-track-type" class="form-input">
            <option value="">— unset —</option>
            <option value="hiking">🥾 Hiking</option>
            <option value="running">🏃 Running</option>
            <option value="cycling">🚴 Cycling</option>
            <option value="driving">🚗 Driving</option>
            <option value="train">🚆 Train</option>
            <option value="other">📍 Other</option>
          </select>
        </div>
        <div style="margin-top:16px;display:flex;gap:8px;justify-content:flex-end">
          <button id="edit-track-save-btn" class="btn-primary">Save</button>
          <button class="btn-secondary modal-close" data-modal="edit-track-modal">Cancel</button>
        </div>
      </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/elevation.js"></script>
  <script src="js/browser.js"></script>
  <script src="js/stats.js"></script>
  <script src="js/local.js"></script>
  <script src="js/app.js"></script>
</body>
</html>