hz4th_coder
595670b6ce
- 响应式设计，支持桌面端和手机端自适应 - 首页展示轮播图、推荐歌单、热门歌曲、新碟上架、热门歌手 - 歌曲/歌手/专辑/歌单详情页 - 底部播放器：播放/暂停、上下首、进度拖动、音量控制 - 歌词同步滚动显示 - 搜索功能 - 后台管理 /admin - JSON文件存储
88 lines
3.3 KiB
HTML
88 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>音乐平台 - 听见好音乐</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- 头部导航 -->
|
|
<header class="header">
|
|
<div class="header-logo" onclick="router.go('/')">
|
|
<i class="fas fa-music"></i> 音乐<span>平台</span>
|
|
</div>
|
|
<nav class="header-nav">
|
|
<a href="/" onclick="router.go('/'); return false;" class="active" data-page="home">首页</a>
|
|
<a href="/discover" onclick="router.go('/discover'); return false;" data-page="discover">发现</a>
|
|
<a href="/artists" onclick="router.go('/artists'); return false;" data-page="artists">歌手</a>
|
|
<a href="/playlists" onclick="router.go('/playlists'); return false;" data-page="playlists">歌单</a>
|
|
</nav>
|
|
<div class="header-search">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input type="text" placeholder="搜索歌曲、歌手..." id="searchInput" onkeyup="handleSearch(event)">
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content" id="app">
|
|
<!-- 动态内容 -->
|
|
</main>
|
|
|
|
<!-- 底部播放器 -->
|
|
<div class="player" id="player">
|
|
<div class="player-song">
|
|
<div class="cover" id="playerCover">
|
|
<div class="placeholder-cover"><i class="fas fa-music"></i></div>
|
|
</div>
|
|
<div class="info">
|
|
<div class="name" id="playerTitle">未在播放</div>
|
|
<div class="artist" id="playerArtist">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-controls">
|
|
<div class="player-buttons">
|
|
<button class="prev-btn" onclick="player.prev()" title="上一首"><i class="fas fa-step-backward"></i></button>
|
|
<button class="play-btn" onclick="player.toggle()" id="playBtn"><i class="fas fa-play"></i></button>
|
|
<button class="next-btn" onclick="player.next()" title="下一首"><i class="fas fa-step-forward"></i></button>
|
|
</div>
|
|
<div class="player-progress">
|
|
<span class="time" id="currentTime">0:00</span>
|
|
<div class="progress-bar" id="progressBar" onclick="player.seek(event)">
|
|
<div class="progress" id="progress" style="width: 0%"></div>
|
|
</div>
|
|
<span class="time" id="totalTime">0:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-extra">
|
|
<button onclick="lyrics.toggle()" title="歌词"><i class="fas fa-align-left"></i></button>
|
|
<div class="volume-control">
|
|
<button onclick="player.toggleMute()" id="volumeBtn"><i class="fas fa-volume-up"></i></button>
|
|
<div class="volume-bar" onclick="player.setVolume(event)">
|
|
<div class="volume" id="volumeLevel" style="width: 70%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 歌词面板 -->
|
|
<div class="lyrics-panel" id="lyricsPanel">
|
|
<div class="lyrics-header">
|
|
<h3>歌词</h3>
|
|
<button class="close-btn" onclick="lyrics.toggle()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="lyrics-content" id="lyricsContent">
|
|
<div class="lyrics-empty">暂无歌词</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 音频元素 -->
|
|
<audio id="audio"></audio>
|
|
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|