sequoia00
/
musicwebplay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MusicWeb Player</title>
    <link rel="stylesheet" href="/static/css/style.css" />
  </head>
  <body>
    <div class="app-shell">
      <header class="app-header">
        <div class="header-copy">
          <p class="eyebrow">MusicWeb Player</p>
          <h1>在线音乐播放器</h1>
          <p class="subtext">移动端专辑浏览与播放</p>
        </div>
        <div class="header-pill">当前目录：<span id="folderIndicator">根目录</span></div>
      </header>

      <main class="page-content">
        <section id="homeView" class="view-stack">
          <section class="content-section slim-hero">
            <div>
              <h2 id="nowTitle">选择一个专辑目录开始播放</h2>
              <p id="nowMeta" class="subtext">点击专辑进入详情页，或直接在卡片上快速播放。</p>
            </div>
            <div class="hero-metrics">
              <div class="metric-card">
                <strong id="albumCount">0</strong>
                <span>专辑目录</span>
              </div>
              <div class="metric-card">
                <strong id="trackCount">0</strong>
                <span>歌曲总数</span>
              </div>
            </div>
          </section>

          <section class="content-section">
            <div class="section-head">
              <h2>精选专辑</h2>
              <span>通栏展示</span>
            </div>
            <div id="featuredAlbums" class="featured-list"></div>
          </section>

          <section class="content-section">
            <div class="section-head">
              <h2>全部专辑目录</h2>
              <span>两栏浏览</span>
            </div>
            <div id="albumGrid" class="album-grid"></div>
          </section>

          <section class="stack-section">
            <section class="content-section">
              <div class="section-head">
                <h2>最新更新</h2>
                <span>紧凑列表</span>
              </div>
              <div id="latestList" class="song-list compact-list"></div>
            </section>

            <section class="content-section">
              <div class="section-head">
                <h2>每日排名</h2>
                <span>目录热度</span>
              </div>
              <div id="rankingList" class="ranking-list"></div>
            </section>
          </section>
        </section>

        <section id="detailView" class="view-stack is-hidden">
          <section class="content-section detail-header">
            <div class="detail-copy">
              <p class="eyebrow">Album Detail</p>
              <h2 id="detailTitle">专辑详情</h2>
              <p id="detailMeta" class="subtext"></p>
              <div class="card-actions">
                <button id="detailPlayBtn" class="primary-btn">播放当前目录</button>
                <button id="detailPlayAllBtn" class="secondary-btn">加入并播放</button>
                <button id="backHomeBtn" class="back-btn detail-back-home">返回首页</button>
              </div>
            </div>
            <div class="detail-cover-wrap">
              <img id="detailCoverImage" class="detail-cover-image is-hidden" alt="cover" />
              <div id="detailCoverFallback" class="detail-cover-fallback">专辑</div>
            </div>
          </section>

          <section class="content-section">
            <div class="section-head">
              <h2>歌曲列表</h2>
              <span id="detailTrackCount">0 首</span>
            </div>
            <div id="detailTrackList" class="song-list"></div>
          </section>
        </section>

        <section class="content-section">
          <div class="section-head">
            <h2>当前播放队列</h2>
            <button id="saveQueueBtn" class="text-btn">刷新</button>
          </div>
          <div id="queueList" class="queue-list"></div>
        </section>

        <section class="stack-section">
          <section class="content-section">
            <div class="section-head">
              <h2>目录与上传</h2>
            </div>
            <label class="field">
              <span>目标目录</span>
              <input id="targetDir" type="text" placeholder="如：流行/周杰伦" />
            </label>
            <label class="field">
              <span>上传音乐</span>
              <input id="uploadInput" type="file" accept=".mp3,.wav,.flac,.m3u,.m3u8,.ogg,.aac,.wma,.opus,.oga,.mp4,.m4a,.webm" multiple />
            </label>
            <button id="uploadBtn" class="primary-btn">上传文件</button>
            <label class="field">
              <span>新建文件夹</span>
              <input id="newFolderInput" type="text" placeholder="如：轻音乐/夜晚" />
            </label>
            <button id="createFolderBtn" class="secondary-btn">创建文件夹</button>
          </section>

          <section class="content-section">
            <div class="section-head">
              <h2>播放列表</h2>
            </div>
            <label class="field">
              <span>新列表名称</span>
              <input id="playlistNameInput" type="text" placeholder="我的收藏" />
            </label>
            <button id="createPlaylistBtn" class="secondary-btn">用当前队列创建</button>
            <div id="playlistList" class="playlist-list"></div>
          </section>
        </section>
      </main>

      <div class="player-dock">
        <div class="player-top">
          <div class="dock-cover-wrap">
            <img id="dockCoverImage" class="dock-cover-image is-hidden" alt="cover" />
            <div class="dock-cover-fallback" id="dockCoverFallback">乐</div>
          </div>
          <div class="dock-copy">
            <strong id="dockTitle">未开始播放</strong>
            <p id="dockPath">点击专辑或歌曲开始播放</p>
          </div>
        </div>

        <div class="player-progress">
          <span id="currentTimeLabel">00:00</span>
          <input id="progressBar" type="range" min="0" max="100" value="0" />
          <span id="durationLabel">00:00</span>
        </div>

        <div class="player-actions icon-actions">
          <button id="playModeBtn" class="icon-btn" aria-label="播放模式" data-tip="列表播放">
            <svg id="playModeIcon" viewBox="0 0 24 24" aria-hidden="true"></svg>
          </button>
          <button id="prevBtn" class="icon-btn" aria-label="上一曲" data-tip="上一曲">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5v14M18 6l-8 6 8 6V6z"/></svg>
          </button>
          <button id="playToggleBtn" class="icon-btn play-toggle" aria-label="播放或暂停" data-tip="播放">
            <svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7-11-7z"/></svg>
            <svg class="icon-pause is-hidden" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5h3v14H8zM13 5h3v14h-3z"/></svg>
          </button>
          <button id="nextBtn" class="icon-btn" aria-label="下一曲" data-tip="下一曲">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 5v14M6 6l8 6-8 6V6z"/></svg>
          </button>
          <button id="albumMenuBtn" class="icon-btn" aria-label="专辑列表" data-tip="专辑列表">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M4 7h16M4 12h16M4 17h16"/>
              <path d="M16 14l3 3-3 3"/>
            </svg>
          </button>
        </div>

        <audio id="audioPlayer" preload="metadata"></audio>
      </div>
      <div id="albumMenuOverlay" class="album-menu-overlay is-hidden">
        <div class="album-menu">
          <div class="album-menu-head">
            <strong>选择专辑</strong>
            <div class="album-menu-actions">
              <button id="closeAlbumMenuBtn" class="text-btn">关闭</button>
              <button id="albumMenuHomeBtn" class="back-btn">返回首页</button>
            </div>
          </div>
          <div id="albumMenuList" class="album-menu-list"></div>
        </div>
      </div>
      <div id="iconToast" class="icon-toast is-hidden"></div>
    </div>

    <template id="trackItemTemplate">
      <div class="song-row">
        <div class="song-copy">
          <strong class="track-name"></strong>
          <p class="track-path"></p>
        </div>
        <div class="track-actions compact-actions">
          <button class="play-btn icon-btn small-icon-btn" aria-label="播放" data-tip="播放">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7-11-7z"/></svg>
          </button>
          <button class="queue-btn icon-btn small-icon-btn" aria-label="加入队列" data-tip="加入队列">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M4 12h10M4 17h7M18 9v8M14 13h8"/></svg>
          </button>
          <button class="move-btn icon-btn small-icon-btn" aria-label="移动" data-tip="移动歌曲">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h10M11 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </template>

    <script src="/static/js/app.js"></script>
  </body>
</html>