67 lines
2.3 KiB
HTML
67 lines
2.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" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<title>随机唱歌音频 - 60s API 集合</title>
|
||
<meta name="description" content="随机唱歌音频，数据源自 60s.viki.moe，提供用户信息、歌曲信息、歌词与音频播放。" />
|
||
|
||
<link rel="stylesheet" href="./css/style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>
|
||
🎵 随机唱歌音频
|
||
</h1>
|
||
<p>数据来自官方/权威源头，以确保稳定与实时 · 支持本地数据回退</p>
|
||
</header>
|
||
|
||
<!-- 加载与错误状态 -->
|
||
<section id="loading" class="loading">
|
||
<div class="spinner"></div>
|
||
<p>正在加载中，请稍候…</p>
|
||
</section>
|
||
|
||
<section id="error" class="error" style="display: none;">
|
||
<p>获取数据失败，请稍后重试</p>
|
||
</section>
|
||
|
||
<!-- 内容区域 -->
|
||
<main id="content" style="display: none;" class="fade-in">
|
||
<!-- 用户信息 -->
|
||
<div class="user-card">
|
||
<img id="avatar" class="avatar" src="" alt="用户头像" />
|
||
<div class="user-info">
|
||
<div class="nickname" id="nickname">-</div>
|
||
<div class="meta">性别：<span id="gender">-</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 歌曲信息 -->
|
||
<div class="song-card">
|
||
<div class="song-title" id="song-title">-</div>
|
||
<div class="song-meta" id="song-meta">-</div>
|
||
<div class="lyrics" id="lyrics"></div>
|
||
</div>
|
||
|
||
<!-- 音频播放 -->
|
||
<div class="audio-card">
|
||
<audio id="audio" controls style="width: 100%;"></audio>
|
||
<div class="audio-actions">
|
||
<button class="btn" id="refresh-btn">换一首</button>
|
||
<div class="info">
|
||
❤ 喜欢：<span id="like-count">-</span>
|
||
· ⏱ 时长：<span id="duration">--:--</span>
|
||
· 🗓 发布：<span id="publish-time">-</span>
|
||
· 🔗 <a id="link" href="#" class="btn" style="padding: 6px 10px; border-radius: 8px; background: #81c784;">查看原帖</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="./js/script.js"></script>
|
||
</body>
|
||
</html> |