feat: 调整页面布局

hanxi · Sep 15, 2024 · 30926c6 · 30926c6
1 parent 270076b
commit 30926c6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/xiaomusic/static/index.html b/xiaomusic/static/index.html
@@ -5,7 +5,7 @@
     <title>小爱音箱操控面板</title>
     <script src="/static/jquery-3.7.1.min.js?version=1726274250"></script>
     <script src="/static/app.js?version=1726274250"></script>
-    <link rel="stylesheet" type="text/css" href="/static/style.css?version=1726274250">
+    <link rel="stylesheet" type="text/css" href="/static/style.css?version=17262742506">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/qrcode.png b/xiaomusic/static/qrcode.png
diff --git a/xiaomusic/static/setting.html b/xiaomusic/static/setting.html
@@ -49,20 +49,15 @@ <h2>小爱音箱设置面板
 
         <label for="hostname">*XIAOMUSIC_HOSTNAME(IP或域名):</label>
         <input id="hostname" type="text"></input>
-
+      </div>
+      <hr>
+      <div class="rows">
         <label for="verbose">是否开启调试日志:</label>
         <select id="verbose">
           <option value="true" selected>true</option>
           <option value="false">false</option>
         </select>
 
-        <div>
-          <button class="save-button">保存</button>
-          <button onclick="location.href='/';">返回首页</button>
-        </div>
-      </div>
-      <hr>
-      <div class="rows">
         <label for="group_list">设备分组配置:</label>
         <input id="group_list" type="text" placeholder="did1:组名1,did2:组名1,did3:组名2"></input>
 
@@ -177,17 +172,24 @@ <h2>小爱音箱设置面板
       </div>
     </div>
     <hr>
+
     <button onclick="location.href='/';">返回首页</button>
     <button id="get_music_list">获取歌单</button>
     <button class="save-button">保存</button>
+    <hr>
+
     <a class="button" href="/downloadlog" download="xiaomusic.txt">下载日志文件</a>
     <button onclick="location.href='/docs';">查看接口文档</button>
+    <a class="button" href="/static/m3u.html" target="_blank">m3u文件转换</a>
     <hr>
 
-    <a href="/static/m3u.html" target="_blank">m3u文件转换工具</a>
-    <hr>
-    <a href="/static/debug.html" target="_blank">调试工具</a>
+    <a class="button" href="/static/debug.html" target="_blank">调试工具</a>
+    <a class="button" href="https://afdian.com/a/imhanxi" target="_blank">💰 爱发电</a>
+    <a class="button" href="https://github.com/hanxi/xiaomusic" target="_blank">点个 Star ⭐</a>
 
+    <div class="rows">
+      <img class="qrcode" src="/static/qrcode.png" alt="请涵曦喝奶茶🧋">
+    </div>
     <footer>
       <p>Powered by <a href="https://github.com/hanxi/xiaomusic" target="_blank">xiaomusic</a></p>
     </footer>

diff --git a/xiaomusic/static/style.css b/xiaomusic/static/style.css
@@ -24,16 +24,19 @@ label {
   width: 300px;
 }
 input,select {
-  margin: 10px;
-  width: 300px;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 90%;
+  max-width: 400px;
   height: 40px;
 }
 
 .rows {
   display: flex;
   flex-direction: column;
-  margin-left: 20px;
-  margin-right: 20px;
+  justify-content: center;
 }
 
 footer {
@@ -44,8 +47,12 @@ footer {
 }
 
  textarea{
-  margin: 10px;
-  width: 300px;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 90%;
+  max-width: 400px;
   height: 200px;
 }
 
@@ -77,3 +84,9 @@ footer {
   text-decoration: none;
   display: inline-block;
 }
+
+.qrcode {
+  width: 100%;
+  max-width: 480px;
+  height: auto;
+}