86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>小爱音箱操控面板</title>
|
|
<script src="/static/jquery-3.7.1.min.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
<style>
|
|
button {
|
|
margin: 10px;
|
|
width: 100px;
|
|
height: 50px;
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
background-color: #008CBA;
|
|
}
|
|
button:active {
|
|
font-weight:bold;
|
|
background-color: #007CBA;
|
|
transform: translateY(2px);
|
|
}
|
|
input {
|
|
margin: 10px;
|
|
width: 300px;
|
|
height: 40px;
|
|
}
|
|
|
|
.container{
|
|
width: 280px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
@keyframes text-scroll {
|
|
0% {
|
|
left: 100%;
|
|
}
|
|
25% {
|
|
left: 50%;
|
|
}
|
|
50% {
|
|
left: 0%;
|
|
}
|
|
75% {
|
|
left: -50%;
|
|
}
|
|
100% {
|
|
left: -100%;
|
|
}
|
|
}
|
|
.text {
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
position: relative;
|
|
animation: text-scroll 10s linear infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>小爱音箱操控面板</h2>
|
|
<hr>
|
|
<div id="cmds">
|
|
</div>
|
|
<hr>
|
|
<div style="margin-left: 20px;">
|
|
<div style="display: flex; align-items: center;">
|
|
<svg class="icon" 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>
|
|
<hr>
|
|
<div>
|
|
<datalist id="autocomplete-list"></datalist>
|
|
<input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
|
|
<input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
|
|
</div>
|
|
<button id="play">播放</button>
|
|
<div class="container">
|
|
<div id="playering-music" class="text"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|