sequoia00
/
musicwebplay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!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="page-shell">
      <aside class="sidebar glass">
        <div class="brand">
          <p class="eyebrow">FastAPI MusicWeb</p>
          <h1>在线音乐播放器</h1>
          <p class="subtext">支持目录管理、随机播放、循环模式与自定义播放列表。</p>
        </div>

        <section class="panel">
          <div class="panel-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" 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="panel">
          <div class="panel-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>
      </aside>

      <main class="content">
        <section class="hero glass">
          <div>
            <p class="eyebrow">Now Playing</p>
            <h2 id="nowTitle">请选择一首歌</h2>
            <p id="nowMeta" class="subtext">从目录、全部歌曲或播放列表开始。</p>
          </div>
          <div class="hero-actions">
            <button id="playAllBtn" class="secondary-btn">播放全部</button>
            <button id="playFolderBtn" class="secondary-btn">播放当前目录</button>
            <button id="shuffleBtn" class="secondary-btn">随机: 关</button>
            <button id="loopBtn" class="secondary-btn">循环: 列表</button>
          </div>
          <audio id="audioPlayer" controls preload="metadata"></audio>
        </section>

        <section class="library-grid">
          <div class="library-panel glass">
            <div class="panel-head">
              <h2>音乐目录</h2>
              <span id="folderIndicator">当前目录：根目录</span>
            </div>
            <div id="folderTree" class="folder-tree"></div>
          </div>

          <div class="queue-panel glass">
            <div class="panel-head">
              <h2>播放队列</h2>
              <button id="saveQueueBtn" class="ghost-btn">刷新队列</button>
            </div>
            <div id="queueList" class="queue-list"></div>
          </div>
        </section>
      </main>
    </div>

    <template id="trackItemTemplate">
      <div class="track-item">
        <div>
          <strong class="track-name"></strong>
          <p class="track-path"></p>
        </div>
        <div class="track-actions">
          <button class="play-btn ghost-btn">播放</button>
          <button class="queue-btn ghost-btn">加入队列</button>
          <button class="move-btn ghost-btn">移动</button>
        </div>
      </div>
    </template>

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