renil/neteasecloudmusicapi
1
0
Fork 0
mirror of https://gitlab.com/Binaryify/neteasecloudmusicapi.git synced 2025-05-23 22:37:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 主页界面优化

Browse Source
This commit is contained in:
overwriter 2024-10-19 23:08:23 +08:00
parent bffc4aa59c
commit c5d29c72e9
1 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
public/index.html
View File

@ -6,58 +6,111 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网易云音乐 API</title> <title>网易云音乐 API</title>
</head>
<body>
<h1>网易云音乐 API</h1>
当你看到这个页面时,这个服务已经成功跑起来了~
<a href="/docs">查看文档</a>
<h2>例子:</h2>
<ul>
<li>1. <a href="./search?keywords=海阔天空">搜索</a></li>
<li>2. <a href="./comment/music?id=186016&limit=1">歌曲评论</a></li>
<li>3. <a href="./dj/program?rid=336355127">电台节目</a></li>
<li>4. <a href="./qrlogin.html">二维码登录</a></li>
<li>4. <a href="./audio_match_demo/index.html">听歌识曲</a></li>
<li>5. <a href="./cloud.html">云盘上传</a></li>
<li>6. <a href="./eapi_decrypt.html">eapi 参数和返回内容解析</a></li>
<li>7. <a href="./api.html">API 调试界面</a></li>
</ul>
<style> <style>
html, html, body {
body {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #ffffff; background: #f9f9f9;
text-align: center; font-family: Arial, sans-serif;
margin-top: 30px; color: #333;
overflow: hidden; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
* { h1 {
color: rgb(100, 100, 100); font-size: 2.5em;
margin-bottom: 1em;
color: #42b983;
}
p {
font-size: 1.2em;
margin-bottom: 2em;
color: #666;
} }
a { a {
color: #42b983; color: #42b983;
text-decoration: none;
transition: color 0.3s ease;
} }
ul, a:hover {
li { color: #329d6e;
margin: 0;
} }
ul { ul {
margin-left: -40px; list-style: none;
line-height: 30px; padding: 0;
margin: 0;
text-align: left;
max-width: 600px;
width: 100%;
} }
li { li {
list-style: none; margin: 0.5em 0;
line-height: 1.5;
display: flex;
align-items: center;
}
.number {
margin-right: 10px;
color: #999;
font-weight: bold;
}
.container {
background: #fff;
padding: 2em;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 80vh; /* 设置最大高度 */
overflow-y: auto; /* 启用垂直滚动条 */
} }
</style> </style>
</head>
<body>
<div class="container">
<h1>网易云音乐 API</h1>
<p>当你看到这个页面时，这个服务已经成功跑起来了~</p>
<p class="current-url"><span id="current-url"></span></p>
<a href="/docs">查看文档</a>
<h2>例子:</h2>
<ul id="example-list">
<li><a href="./search?keywords=海阔天空">搜索</a></li>
<li><a href="./comment/music?id=186016&limit=1">歌曲评论</a></li>
<li><a href="./dj/program?rid=336355127">电台节目</a></li>
<li><a href="./qrlogin.html">二维码登录</a></li>
<li><a href="./audio_match_demo/index.html">听歌识曲</a></li>
<li><a href="./cloud.html">云盘上传</a></li>
<li><a href="./eapi_decrypt.html">eapi 参数/返回值解析</a></li>
<li><a href="./api.html">API 调试界面</a></li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentUrlElement = document.getElementById('current-url');
currentUrlElement.textContent = window.location.href;
const exampleList = document.getElementById('example-list');
const items = exampleList.getElementsByTagName('li');
for (let i = 0; i < items.length; i++) {
const number = document.createElement('span');
number.className = 'number';
number.textContent = (i + 1) + '. ';
items[i].prepend(number);
}
});
</script>
</body> </body>
</html> </html>