Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 新主题 Material #299

Merged
merged 2 commits into from
Dec 8, 2024
Merged

feat: 新主题 Material #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
213cdde
feat: 新主题 Material
52fisher Dec 8, 2024
3948f54
refactor: 首页
52fisher Dec 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions xiaomusic/static/default/debug.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
<meta name="viewport" content="width=device-width">
<title>Debug For XiaoMusic</title>

<link rel="stylesheet" type="text/css" href="./style.css?version=1733563859">
<link rel="stylesheet" type="text/css" href="./main.css?version=1733199308">
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script src="./jquery-3.7.1.min.js?version=1733563859"></script>
<script src="./jquery-3.7.1.min.js?version=1733199308"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
Expand Down Expand Up @@ -57,12 +57,16 @@
</head>
<body>
<h1>Debug For XiaoMusic</h1>
<textarea id="post-input" rows="10" cols="50" placeholder="粘贴json数据..."></textarea><br>
<button onclick="postJSON()">提交</button><br>

<div class="debug">
<textarea id="post-input" rows="10" cols="50" placeholder="粘贴json数据..."></textarea><br>
<button onclick="postJSON()">提交</button><br>
</div>
<hr>
<input id="cmd" type="text"></input>
<button onclick="sendDebugCmd()">测试自定义口令</button><br>
<div class="debug">
<input id="cmd" type="text"></input>
<button onclick="sendDebugCmd()">测试自定义口令</button><br>
</div>

</body>

<footer>
Expand Down
4 changes: 2 additions & 2 deletions xiaomusic/static/default/downloadtool.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>歌曲下载工具</title>
<link rel="stylesheet" type="text/css" href="./style.css?version=1733563859">
<script src="./jquery-3.7.1.min.js?version=1733563859"></script>
<link rel="stylesheet" type="text/css" href="./main.css?version=1733199308">
<script src="./jquery-3.7.1.min.js?version=1733199308"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
Expand Down
Binary file added xiaomusic/static/default/favicon.ico
View file
Open in desktop
Binary file not shown.
257 changes: 168 additions & 89 deletions xiaomusic/static/default/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,189 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width">
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小爱音箱操控面板</title>
<script src="./jquery-3.7.1.min.js?version=1733563859"></script>
<script src="./app.js?version=1733563859"></script>
<link rel="stylesheet" type="text/css" href="./style.css?version=1733563859">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="./jquery-3.7.1.min.js?version=1733199308"></script>
<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.ico">
</head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'G-Z09NC1K7ZW');
</script>
<body class="index_page">
<div class="player">
<h1>音乐播放器
<a id="version" href="https://github.com/hanxi/xiaomusic/blob/main/CHANGELOG.md" target="_blank">版本
1.0.0</a><span id="versionnew" class="new-badge"></span>
</h1>

<!--
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
</script>
-->
<label for="did">选择播放设备:</label>
<select id="did" class="device-selector">
<option value="default">默认设备</option>
</select>

</head>
<body>
<h2>小爱音箱操控面板
(<a id="version" href="https://github.com/hanxi/xiaomusic/blob/main/CHANGELOG.md">版本未知</a>)
<span id="versionnew" class="blink"></span>
</h2>
<hr>
<label for="music_list" style="display: flex;align-items: center;">选择播放列表:
<div class="option-inline" onclick="sendcmd('刷新列表')">
<span class="material-icons">refresh</span>
<span class="tooltip">刷新列表</span>
</div>
</label>
<select id="music_list" class="playlist-selector">
</select>

<div class="rows">
<select id="did">
</select>
</div>
<label for="music_name" style="display: flex;align-items: center;">选择歌曲:
<div class="option-inline" onclick="toggleDelete()">
<span class="material-icons">delete</span>
<span class="tooltip">删除歌曲</span>
</div>
</label>
<select id="music_name" class="song-selector">
</select>

<div id="cmds">
<a class="button" href="./setting.html">设置</a>
<progress class="progress" id="progress" value="0" max="100"></progress>
<div style="display: flex; justify-content: space-between; width: 100%;">
<span class="current-time" id="current-time">0:00</span>
<div class="current-song" id="playering-music">当前播放歌曲：无</div>
<span class="duration" id="duration">0:00</span>
</div>
<audio id="audio" controls src="" autoplay>
</audio>
<div class="buttons">
<div class="player-controls button-group">
<button onclick="prevTrack()">
<span class="material-icons">skip_previous</span>
<span class="tooltip">上一首</span>
</button>
<button onclick="playOnDevice()">
<span class="material-icons" id="playPauseIcon">play_arrow</span>
<span class="tooltip">播放</span>
</button>
<button onclick="nextTrack()">
<span class="material-icons">skip_next</span>
<span class="tooltip">下一首</span>
</button>
<button onclick="stopPlay()">
<span class="material-icons" id="playPauseIcon">stop</span>
<span class="tooltip">关机</span>
</button>

</div>
<div class="mode-controls button-group">
<button id="modeBtn" onclick="togglePlayMode()">
<span class="material-icons">shuffle</span>
<span class="tooltip">切换播放模式</span>
</button>
<button onclick="addToFavorites()" class="favorite">
<span class="material-icons">favorite</span>
<span class="tooltip">收藏歌曲</span>
</button>
<button onclick="toggleVolume()">
<span class="material-icons">volume_up</span>
<span class="tooltip">调节音量</span>
</button>
<button onclick="toggleLocalPlay()" id="web_play">
<span class="material-icons">headphones</span>
<span class="tooltip">网页播放</span>
</button>
</div>
<div class="mode-controls button-group">
<button onclick="toggleSearch()">
<span class="material-icons">search</span>
<span class="tooltip">搜索歌曲</span>
</button>
<button onclick="togglePlayLink()">
<span class="material-icons">link</span>
<span class="tooltip">播放链接</span>
</button>
<button onclick="toggleTimer()">
<span class="material-icons">timer</span>
<span class="tooltip">定时关机</span>
</button>
<button onclick="openSettings()">
<span class="material-icons">settings</span>
<span class="tooltip">设置</span>
</button>
</div>
</div>
</div>
<hr>

<div style="margin: 20px;">
<div style="display: flex; align-items: center;">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#8e43e7" style="height: 48px; width: 48px;"><path d="M550.826667 154.666667a47.786667 47.786667 0 0 0-19.84 4.48L298.666667 298.666667H186.453333A80 80 0 0 0 106.666667 378.453333v267.093334A80 80 0 0 0 186.453333 725.333333H298.666667l232.32 139.52a47.786667 47.786667 0 0 0 19.84 4.48A46.506667 46.506667 0 0 0 597.333333 822.826667V201.173333a46.506667 46.506667 0 0 0-46.506666-46.506666zM554.666667 822.826667c0 3.413333-3.84 3.84-3.84 3.84L320 688.853333l-9.6-6.186666H186.453333A37.12 37.12 0 0 1 149.333333 645.546667V378.453333A37.12 37.12 0 0 1 186.453333 341.333333h123.946667l10.24-6.186666 229.546667-137.6s3.84 0 3.84 3.84zM667.52 346.026667a21.333333 21.333333 0 0 0 0 30.293333 192 192 0 0 1 0 271.36 21.333333 21.333333 0 0 0 0 30.293333 21.333333 21.333333 0 0 0 30.293333 0 234.666667 234.666667 0 0 0 0-331.946666 21.333333 21.333333 0 0 0-30.293333 0z"></path><path d="M804.48 219.52a21.333333 21.333333 0 0 0-30.293333 30.293333 370.986667 370.986667 0 0 1 0 524.373334 21.333333 21.333333 0 0 0 0 30.293333 21.333333 21.333333 0 0 0 30.293333 0 414.08 414.08 0 0 0 0-584.96z"></path></svg>
<input id="volume" type="range"></input>
</div>
<!-- 搜索组件 -->
<div class="component" id="search-component">
<h2>搜索歌曲</h2>
<input type="text" id="search" class="search-input" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
<label for="music-name" id="music-name-label" style="display: none;">确认选择:</label>
<select id="music-name" style="display: none;">
<!-- 动态生成选项 -->
</select>
<input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" style="display: none;"></input>
<div class="component-button-group">
<button onclick="confirmSearch()">确定</button>
<button onclick="toggleSearch()">关闭</button>
</div>
</div>
<hr>
<div class="rows">
<label for="search">搜索歌曲:</label>
<input type="text" id="search" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">

<label for="music-name" id="music-name-label" style="display: none;">确认选择:</label>
<select id="music-name" style="display: none;">
<!-- 动态生成选项 -->
</select>
<!-- 定时关机组件 -->
<div class="component" id="timer-component">
<h2>定时关机</h2>

<input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" style="display: none;"></input>
<div style="display: flex; align-items: center">
<progress id="progress" value="0" max="100" style="width: 270px"></progress>
<div id="play-time" style="margin-left: 10px">00:00/00:00</div>
</div>
<div>
<button id="play">播放</button>
<div id="playering-music" class="text"></div>
</div>
<button onclick="timedShutDown('10分钟后关机')">10分钟后关机</button>
<button onclick="timedShutDown('30分钟后关机')">30分钟后关机</button>
<button onclick="timedShutDown('60分钟后关机')">60分钟后关机</button>
<span class="tooltip timer-tooltip" style="display: none;">已发送指令</span>
<div class="component-button-one">
<button onclick="toggleTimer()">关闭</button>
</div>
</div>

<hr>
<div class="rows">
<label for="music_list">播放列表:</label>
<select id="music_list"></select>
<label for="music_name">歌曲:</label>
<select id="music_name"></select>
<div>
<button id="play_music_list">播放选中歌曲</button>
<button id="del_music">删除选中歌曲</button>
<button id="web_play">网页播放</button>
</div>
<div class="play_pannel">
<audio autoplay controls src=""></audio>
</div>
<!-- 播放链接组件 -->
<div class="component" id="playlink-component">
<h2>播放链接</h2>
<input type="text" id="music-url" class="search-input" placeholder="请输入播放链接"
value="https://lhttp.qtfm.cn/live/4915/64k.mp3">
<div class="component-button-group">
<button id="playurl">播放链接</button>
<button onclick="togglePlayLink()">关闭</button>
</div>
</div>

<hr>
<div class="rows">
<input id="music-url" type="text" value="https://lhttp.qtfm.cn/live/4915/64k.mp3"></input>
<button id="playurl">播放链接</button>
</div>

<footer>
<p>Powered by <a href="https://github.com/hanxi/xiaomusic" target="_blank">xiaomusic</a></p>
</footer>
<dialog id="valid-host">
<form method="dialog">
<!-- 音量组件 -->
<div class="component" id="volume-component">
<h2>调节音量</h2>
<input type="range" id="volume" class="volume-slider" />
<div class="component-button-one">
<button onclick="toggleVolume()">关闭</button>
</div>
</div>
<!-- 删除确认组件 -->
<div class="component" id="delete-component">
<h2>警告</h2>
<p>你确定要删除歌曲 <span id="delete-music-name"></span> 吗？</p>
<p style="font-weight: bold;">注意：该操作会永久删除该歌曲且不可撤销</p>
<div class="component-button-group">
<button onclick="confirmDelete()">确定</button>
<button onclick="toggleDelete()">关闭</button>
</div>
</div>
<!-- 警告组件 -->
<div class="component" id="warning-component">
<h2>警告</h2>
<p>当前页面的HOST与设置中的HOST不一致，请检查是否设置错误</p>
<p>当前HOST: <span id="local-host"></span></p>
<p>设置中的HOST: <span id="setting-host"></span></p>
<div class="btn-list">
<a href="./setting.html" target="_blank">立即修改</a>
<button value="no-warning" type="submit">继续并不再显示</button>
<button value="cancle" type="submit">取消</button>
<div class="component-button-group">
<a href="./setting.html" target="_blank"><button>立即修改</button></a>
<button onclick="nowarning()">继续并不再显示</button>
<button onclick="toggleWarning()">取消</button>
</div>
</form>
</dialog>
</body>
</html>
</div>
<div class="footer">
Powered by XiaoMusic
</div>

<script src="./md.js">
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion xiaomusic/static/default/m3u.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width">
<title>M3U to JSON Converter</title>
<link rel="stylesheet" type="text/css" href="./style.css?version=1733563859">
<link rel="stylesheet" type="text/css" href="./main.css?version=1733199308">

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
Expand Down
Loading