index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="color-scheme" content="light" />
    <title>毛泽东生平地理轨迹</title>
    <link rel="icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
    />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <div id="container">
      <!-- 语言选择器 -->
      <div id="language-selector" class="language-selector">
        <button class="lang-btn active" data-lang="zh-CN">中文</button>
        <button class="lang-btn" data-lang="en">English</button>
      </div>

      <!-- 地图容器 -->
      <div id="map" class="panel-visible"></div>

      <!-- 控制面板切换按钮（移动端） -->
      <button
        id="toggle-panel-btn"
        class="toggle-panel-btn"
        data-i18n="ui.controls.togglePanel"
        data-i18n-attr="title"
        title="切换控制面板"
      >
        ⬇
      </button>

      <!-- 右下角功能按钮组 -->
      <button id="settings-btn" class="settings-btn" title="设置" data-i18n="ui.settings.title" data-i18n-attr="title">⚙</button>
      <button id="music-btn" class="music-btn" data-i18n="ui.music.title" data-i18n-attr="title" title="背景音乐">🎵</button>
      <button id="feedback-btn" class="feedback-btn" data-i18n="ui.feedback.title" data-i18n-attr="title" title="意见反馈">💬</button>

      <!-- 设置面板（右下角，包含统计+镜头设置） -->
      <div id="settings-panel" class="settings-panel">
        <div class="settings-panel-header">
          <h4 data-i18n="ui.stats.title">轨迹统计</h4>
          <button class="settings-panel-close" id="settings-panel-close">×</button>
        </div>
        <div class="stats-section">
          <div class="stats-item">
            <span class="stats-label" data-i18n="ui.stats.totalEvents">总事件数</span>
            <span class="stats-value" id="total-events">-</span>
          </div>
          <div class="stats-item">
            <span class="stats-label" data-i18n="ui.stats.movementCount">移动次数</span>
            <span class="stats-value" id="movement-count">-</span>
          </div>
          <div class="stats-item">
            <span class="stats-label" data-i18n="ui.stats.visitedPlaces">访问省市</span>
            <span class="stats-value" id="visited-places">-</span>
          </div>
          <div class="stats-item">
            <span class="stats-label" data-i18n="ui.stats.internationalCount">国际移动</span>
            <span class="stats-value" id="international-count">-</span>
          </div>
          <div class="stats-item">
            <span class="stats-label" data-i18n="ui.stats.timeSpan">时间跨度</span>
            <span class="stats-value" id="time-span">-</span>
          </div>
        </div>
        <div class="settings-divider"></div>
        <!-- 镜头设置 -->
        <div class="camera-settings">
          <h5 data-i18n="ui.animation.cameraControl">镜头控制</h5>
          <!-- 跟随模式选择 -->
          <div class="setting-row">
            <label data-i18n="ui.animation.followMode">跟随模式</label>
            <div class="follow-mode-selector" id="follow-mode-selector">
              <button class="follow-mode-btn active" data-mode="smart" data-i18n="ui.animation.followModes.smart">智能</button>
              <button class="follow-mode-btn" data-mode="path" data-i18n="ui.animation.followModes.path">沿路</button>
              <button class="follow-mode-btn" data-mode="off" data-i18n="ui.animation.followModes.off">关闭</button>
            </div>
          </div>
          <!-- 跟随缩放级别（沿路模式下生效） -->
          <div class="setting-row" id="follow-zoom-row">
            <label data-i18n="ui.animation.followZoom">跟随缩放</label>
            <input type="range" id="follow-zoom-slider" min="5" max="10" value="7" step="0.5" />
            <span class="value-display" id="follow-zoom-display">7</span>
          </div>
          <!-- 路径动画时长倍率 -->
          <div class="setting-row">
            <label data-i18n="ui.animation.pathSpeed">动画时长</label>
            <input type="range" id="path-speed-multiplier" min="1" max="5" value="2.5" step="0.5" />
            <span class="value-display" id="path-speed-display">1x</span>
          </div>
        </div>

        <!-- Tauri 桌面设置（默认隐藏，JS 检测后显示） -->
        <div class="settings-divider tauri-only-settings" style="display:none"></div>
        <div class="tauri-desktop-settings tauri-only-settings" style="display:none">
          <h5 data-i18n="ui.settings.desktopTitle">桌面设置</h5>
          <div class="setting-row">
            <label data-i18n="ui.settings.alwaysOnTop">置顶显示</label>
            <label class="toggle-switch"><input type="checkbox" id="topmost-toggle" /><span class="toggle-slider"></span></label>
          </div>
          <div class="setting-row">
            <label data-i18n="ui.settings.launchAtStartup">开机启动</label>
            <label class="toggle-switch"><input type="checkbox" id="autostart-toggle" /><span class="toggle-slider"></span></label>
          </div>
          <div class="setting-row setting-row-center">
            <button class="check-update-btn" id="check-update-btn" data-i18n="ui.update.checkUpdate">检查更新</button>
          </div>
        </div>
      </div>

      <!-- 时间轴控制 -->
      <div id="timeline-control">
        <!-- 当前事件信息（移动端） -->
        <div class="current-event-section">
          <div class="event-info-row">
            <div class="event-date-mobile" id="event-date-mobile">
              加载中...
            </div>
            <div class="event-location-mobile" id="event-location-mobile">
              加载中...
            </div>
          </div>
          <div class="event-info-row">
            <div class="event-title-mobile" id="event-title-mobile">
              加载中...
            </div>
          </div>
          <div class="progress-info-mobile">
            <div class="info-item">
              <span class="info-label" data-i18n="ui.progress.event">事件</span>:
              <span class="info-value">
                <span id="current-event-index-mobile">1</span>/<span
                  id="total-event-count-mobile"
                  >-</span
                >
              </span>
            </div>
            <div class="info-item">
              <span class="info-label" data-i18n="ui.progress.age">年龄</span>:
              <span class="info-value">
                <span id="current-age-mobile">0</span
                ><span class="info-unit" data-i18n="ui.progress.ageUnit">岁</span>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label" data-i18n="ui.progress.progress">进度</span>:
              <span class="info-value" id="current-progress-mobile">0%</span>
            </div>
          </div>
        </div>

        <div class="timeline-info">
          <div class="time-point start">
            <span class="label" data-i18n="ui.timeline.start">开始</span>
            <span class="value">1893-12-26</span>
          </div>

          <!-- 当前事件详情区域（PC端） -->
          <div class="current-event-details">
            <div class="event-date" id="event-date" data-i18n="ui.timeline.loading">加载中...</div>
            <div class="event-title" id="event-title" data-i18n="ui.timeline.loading">加载中...</div>
            <div class="event-location" id="event-location" data-i18n="ui.timeline.loading">加载中...</div>
          </div>

          <div class="time-point end">
            <span class="label" data-i18n="ui.timeline.end">结束</span>
            <span class="value">1976-09-09</span>
          </div>
        </div>

        <div class="player-controls">
          <div class="player-controls-row">
            <!-- 播放控制按钮 -->
            <div class="player-buttons">
              <button class="player-btn" id="prev-btn" data-i18n="ui.controls.prev" data-i18n-attr="title" title="上一个事件">
                ⏮
              </button>
              <button class="player-btn" id="play-btn" data-i18n="ui.controls.play" data-i18n-attr="title" title="播放">▶</button>
              <button class="player-btn" id="next-btn" data-i18n="ui.controls.next" data-i18n-attr="title" title="下一个事件">
                ⏭
              </button>
            </div>

            <!-- 速度控制（移动端） -->
            <div class="speed-control">
              <button class="speed-btn" data-speed="0" data-i18n="ui.controls.speedFast">快</button>
              <button class="speed-btn active" data-speed="1" data-i18n="ui.controls.speedNormal">中</button>
              <button class="speed-btn" data-speed="2" data-i18n="ui.controls.speedSlow">慢</button>
            </div>
          </div>

          <!-- 进度条区域 -->
          <div class="progress-section">
            <div class="progress-container">
              <input
                type="range"
                id="timeline-slider"
                min="0"
                max="100"
                value="0"
                tabindex="0"
                title="使用左右方向键或拖拽控制时间轴"
              />
            </div>
            <div class="progress-details">
              <span class="progress-item"
                ><span data-i18n="ui.progress.event">事件</span>: <span id="current-event-index-desktop">1</span>/<span
                  id="total-event-count-desktop"
                  >-</span
                ></span
              >
              <span class="progress-item"
                ><span data-i18n="ui.progress.age">年龄</span>: <span id="current-age-desktop">0</span><span data-i18n="ui.progress.ageUnit">岁</span></span
              >
              <span class="progress-item"
                ><span data-i18n="ui.progress.progress">进度</span>: <span id="current-progress-desktop">0%</span></span
              >
            </div>
          </div>

          <!-- 速度控制（PC端） -->
          <div class="player-speed">
            <label class="speed-label" data-i18n="ui.controls.speed">播放速度</label>
            <div class="custom-select-wrapper">
              <div
                class="custom-select"
                id="custom-speed-select"
                data-value="1"
              >
                <div class="select-display">
                  <span class="select-text" data-i18n="ui.controls.speedOptions.fast">快速</span>
                  <span class="select-arrow">▼</span>
                </div>
                <div class="select-dropdown">
                  <div class="select-option" data-value="0" data-i18n="ui.controls.speedOptions.veryFast">极快</div>
                  <div class="select-option selected" data-value="1" data-i18n="ui.controls.speedOptions.fast">
                    快速
                  </div>
                  <div class="select-option" data-value="2" data-i18n="ui.controls.speedOptions.normal">正常</div>
                  <div class="select-option" data-value="3" data-i18n="ui.controls.speedOptions.slow">慢速</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 音乐播放弹窗背景遮罩 -->
      <div id="music-backdrop" class="music-backdrop"></div>

      <!-- 音乐播放弹窗 -->
      <div id="music-modal" class="music-modal">
        <div class="music-modal-header">
          <h3 data-i18n="ui.music.title">🎵 背景音乐</h3>
          <button class="music-modal-close" id="music-modal-close" data-i18n="ui.music.close" data-i18n-attr="title" title="关闭">
            ×
          </button>
        </div>
        <div class="music-modal-content">
          <!-- 当前播放歌曲信息 -->
          <div class="current-song-info">
            <div class="song-title" id="current-song-title" data-i18n="ui.music.selectSong">请选择歌曲</div>
            <div class="song-artist" id="current-song-artist">-</div>
          </div>

          <!-- 音乐播放控制 -->
          <div class="music-controls">
            <button
              class="music-control-btn"
              id="music-prev-btn"
              data-i18n="ui.music.playPrev"
              data-i18n-attr="title"
              title="上一首"
            >
              ⏮
            </button>
            <button
              class="music-control-btn music-play-btn"
              id="music-play-btn"
              data-i18n="ui.controls.play"
              data-i18n-attr="title"
              title="播放"
            >
              ▶
            </button>
            <button
              class="music-control-btn"
              id="music-next-btn"
              data-i18n="ui.music.playNext"
              data-i18n-attr="title"
              title="下一首"
            >
              ⏭
            </button>
          </div>

          <!-- 音乐进度条 -->
          <div class="music-progress-container">
            <div class="music-progress-bar">
              <div class="music-progress-fill" id="music-progress-fill"></div>
            </div>
            <div class="music-time-info">
              <span id="music-current-time">00:00</span>
              <span id="music-total-time">00:00</span>
            </div>
          </div>

          <!-- 音量控制 -->
          <div class="music-volume-control">
            <span class="volume-icon">🔊</span>
            <input
              type="range"
              id="music-volume-slider"
              min="0"
              max="100"
              value="50"
              class="volume-slider"
            />
            <span class="volume-value" id="music-volume-value">50%</span>
          </div>

          <!-- 歌曲列表 -->
          <div class="music-playlist">
            <h4 data-i18n="ui.music.playlist">播放列表</h4>
            <div class="playlist-items" id="music-playlist-items"></div>
          </div>

          <!-- 本地音乐上传 -->
          <div class="music-upload-section">
            <h4 data-i18n="ui.music.localMusic">本地音乐</h4>
            <div class="upload-area">
              <input
                type="file"
                id="music-file-input"
                accept="audio/*"
                style="display: none"
              />
              <button class="upload-btn" id="music-upload-btn" data-i18n="ui.music.uploadBtn">
                📁 选择本地音乐文件
              </button>
              <p class="upload-hint" data-i18n="ui.music.uploadHint">支持 MP3, WAV, OGG 格式</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 反馈弹窗背景遮罩 -->
      <div id="feedback-backdrop" class="feedback-backdrop"></div>

      <!-- 反馈弹窗 -->
      <div id="feedback-modal" class="feedback-modal">
        <div class="feedback-modal-header">
          <h3 data-i18n="ui.feedback.title">💬 意见反馈</h3>
          <button
            class="feedback-modal-close"
            id="feedback-modal-close"
            data-i18n="ui.music.close"
            data-i18n-attr="title"
            title="关闭"
          >
            ×
          </button>
        </div>
        <div class="feedback-modal-content">
          <div class="feedback-item" id="feedback-issues">
            <div class="feedback-icon">🛠️</div>
            <div class="feedback-info">
              <div class="feedback-title" data-i18n="ui.feedback.issues.title">问题反馈</div>
              <div class="feedback-desc" data-i18n="ui.feedback.issues.desc">发现bug或建议改进</div>
            </div>
            <div class="feedback-arrow">→</div>
          </div>

          <div class="feedback-item" id="feedback-project">
            <div class="feedback-icon">⭐</div>
            <div class="feedback-info">
              <div class="feedback-title" data-i18n="ui.feedback.project.title">项目主页</div>
              <div class="feedback-desc" data-i18n="ui.feedback.project.desc">查看源码和文档</div>
            </div>
            <div class="feedback-arrow">→</div>
          </div>

          <div class="feedback-item" id="feedback-wechat">
            <div class="feedback-icon">📱</div>
            <div class="feedback-info">
              <div class="feedback-title" data-i18n="ui.feedback.wechat.title">关注公众号</div>
              <div class="feedback-desc" data-i18n="ui.feedback.wechat.desc">硅基茶水间 - 交流讨论</div>
            </div>
            <div class="feedback-arrow">→</div>
          </div>
        </div>
      </div>

      <!-- 微信二维码弹窗背景遮罩 -->
      <div id="wechat-qr-backdrop" class="wechat-qr-backdrop"></div>

      <!-- 微信二维码弹窗 -->
      <div id="wechat-qr-modal" class="wechat-qr-modal">
        <div class="wechat-qr-header">
          <h3>关注公众号</h3>
          <button class="wechat-qr-close" id="wechat-qr-close" title="关闭">×</button>
        </div>
        <div class="wechat-qr-content">
          <img src="assets/img/weixin.jpg" alt="硅基茶水间" class="wechat-qr-image" />
          <div class="wechat-qr-name">硅基茶水间</div>
          <div class="wechat-qr-hint">扫描二维码关注公众号</div>
        </div>
      </div>

      <!-- 详细信息面板背景遮罩 -->
      <div id="panel-backdrop" class="panel-backdrop"></div>

      <!-- 详细信息面板 -->
      <div id="location-detail-panel" class="location-detail-panel">
        <div class="panel-header">
          <div class="panel-drag-handle"></div>
          <h3 id="panel-location-title" data-i18n="ui.panel.locationTitle">地点详情</h3>
          <div class="visit-summary" id="panel-visit-summary">
            截止当前时间点共访问 <span class="visit-count-highlight">0</span> 次
          </div>
          <button class="panel-close" id="panel-close-btn" data-i18n="ui.music.close" data-i18n-attr="title" title="关闭">
            ×
          </button>
        </div>
        <div class="panel-content" id="panel-content">
          <!-- 事件列表 -->
        </div>
      </div>

      <!-- 加载提示 -->
      <div id="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text" data-i18n="messages.loading">正在加载轨迹数据...</div>
      </div>
    </div>

    <!-- 音频元素 -->
    <audio id="music-audio" preload="none"></audio>

    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Igor-Vladyka/leaflet.motion/dist/leaflet.motion.min.js"></script>
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>