fix: 主页适配移动端

hanxi · Sep 17, 2024 · 046cdad · 046cdad
1 parent 7f8e639
commit 046cdad
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 15 deletions.
diff --git a/update-static-version.py b/update-static-version.py
@@ -16,13 +16,12 @@ def get_html_files(directory):
 
 def update_html_version(html_files, version):
     """
-    更新HTML文件中所有以 /static/ 开头的CSS和JS文件引用的版本号。
+    更新HTML文件中所有以 ./ 开头的CSS和JS文件引用的版本号。
 
     :param html_files: 需要更新的HTML文件路径的列表。
     :param version: 新的版本号字符串。
     """
-    pattern = re.compile(r'(/static/.*(css|js))\?version=[^"]*"')
-    # pattern = re.compile(r'(/static/.*html)\?version=[^"]*"')
+    pattern = re.compile(r'(\./.*(css|js))\?version=[^"]*"')
 
     for html_file in html_files:
         if not html_file.exists():
@@ -48,7 +47,7 @@ def update_html_version(html_files, version):
     t = str(int(time.time()))
 
     # 指定目录
-    html_directory = "xiaomusic/static"  # 修改为实际的HTML文件目录路径
+    html_directory = "xiaomusic/static/default"  # 修改为实际的HTML文件目录路径
 
     # 获取HTML文件列表
     html_files_to_update = get_html_files(html_directory)

diff --git a/xiaomusic/static/default/debug.html b/xiaomusic/static/default/debug.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width">
     <title>Debug For XiaoMusic</title>
 
-    <link rel="stylesheet" type="text/css" href="/static/style.css?version=1726415744">
+    <link rel="stylesheet" type="text/css" href="./style.css?version=1726590685">
     <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
-    <script src="/static/jquery-3.7.1.min.js?version=1726415744"></script>
+    <script src="./jquery-3.7.1.min.js?version=1726590685"></script>
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/index.html b/xiaomusic/static/default/index.html
@@ -3,9 +3,9 @@
   <head>
     <meta name="viewport" content="width=device-width">
     <title>小爱音箱操控面板</title>
-    <script src="./jquery-3.7.1.min.js?version=1726415744"></script>
-    <script src="./app.js?version=1726415744"></script>
-    <link rel="stylesheet" type="text/css" href="./style.css?version=1726415744">
+    <script src="./jquery-3.7.1.min.js?version=1726590685"></script>
+    <script src="./app.js?version=1726590685"></script>
+    <link rel="stylesheet" type="text/css" href="./style.css?version=1726590685">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/m3u.html b/xiaomusic/static/default/m3u.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <title>M3U to JSON Converter</title>
-    <link rel="stylesheet" type="text/css" href="/static/style.css?version=1726415744">
+    <link rel="stylesheet" type="text/css" href="./style.css?version=1726590685">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/default/setting.html b/xiaomusic/static/default/setting.html
@@ -3,9 +3,9 @@
   <head>
     <meta name="viewport" content="width=device-width">
     <title>小爱音箱操控面板</title>
-    <script src="./jquery-3.7.1.min.js?version=1726415744"></script>
-    <script src="./setting.js?version=1726415744"></script>
-    <link rel="stylesheet" type="text/css" href="./style.css?version=1726415744">
+    <script src="./jquery-3.7.1.min.js?version=1726590685"></script>
+    <script src="./setting.js?version=1726590685"></script>
+    <link rel="stylesheet" type="text/css" href="./style.css?version=1726590685">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

diff --git a/xiaomusic/static/index.html b/xiaomusic/static/index.html
@@ -6,6 +6,16 @@
   <link rel="icon" href="/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>小爱音箱操控面板</title>
+
+  <!-- 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>
+
 </head>
 
 <body>
@@ -30,8 +40,22 @@ <h1>谁家灯火夜通明</h1>
     power by <a href="https://github.com/hanxi/xiaomusic">XiaoMusic</a>
   </footer>
   <style>
-    @font-face{ font-family: "得意黑 斜体"; font-weight: 400; src: url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/gJk2ny0v51vn.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/e2C1wSBHH86h.woff") format("woff"); font-display: swap;} @font-face{ font-family: "阿里妈妈数黑体 Bold"; font-weight: 700; src: url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/4DWYdFK3dz5J.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/V7EBEKlNSdxC.woff") format("woff"); font-display: swap;} body{ background-color: rgb(47, 44, 67); height: 100%; overflow: hidden;} .container_wrapper{ display: flex; justify-content: center; align-items: center; height: 90vh; cursor: default;} h1{ font-weight: bold; color: #a2a9af; width: 600px; font-family: '得意黑 斜体', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 2.5em; border-bottom: 1px solid #a2a9af;} .container_wrapper .logo img{ width: 140px; height: auto; filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));} .desc{ text-align: center; color: #fff; margin: auto 30px; backdrop-filter: blur(5px);} .desc p{ font-size: 1.2em; margin: 0; padding: 0; font-family: '阿里妈妈数黑体 Bold'; font-weight: 800;} p.call{ letter-spacing: 0.4em; font-size: 2.2em; line-height: 1.5; font-style: normal;} p.answer{ letter-spacing: 0.23em; line-height: 1.5; font-style: normal; color: #a2a9af; margin-top: 10px;} .desc p::before, .desc p::after{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1.5em; color: #4c5870;} .desc p::before{ content: "“";} .desc p::after{ content: "”";} .options{ display: flex; flex-direction: column;} .options a{ color: #a2a9af; text-decoration: none; font-size: 1.1em; position: relative; display: inline; margin: 10px auto;} .options a::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #ebedec; transform-origin: bottom right; transform: scaleX(0); transition: transform 0.3s ease;} .options a:hover::before{ transform-origin: bottom left; transform: scaleX(1);} .options a:hover{ color:#ebedec;} footer{ display: flex; justify-content: center; color: #4c5870;} footer a{ color:inherit; text-decoration: none; margin: auto 10px;}
+    @font-face{ font-family: "得意黑 斜体"; font-weight: 400; src: url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/gJk2ny0v51vn.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/e2C1wSBHH86h.woff") format("woff"); font-display: swap;} @font-face{ font-family: "阿里妈妈数黑体 Bold"; font-weight: 700; src: url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/4DWYdFK3dz5J.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/603VmyqiyGMz/V7EBEKlNSdxC.woff") format("woff"); font-display: swap;} body{ background-color: rgb(47, 44, 67); height: 100%; overflow: hidden;}
+    .container_wrapper{display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; height: 90vh; cursor: default;}
+    h1{ font-weight: bold; color: #a2a9af; max-width: 600px; font-family: '得意黑 斜体', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 2.5em; border-bottom: 1px solid #a2a9af;}
+    .container_wrapper .logo img{ width: 140px; height: auto; filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));}
+    .desc{ text-align: center; color: #fff; margin: auto 30px; backdrop-filter: blur(5px);}
+    .desc p{ font-size: 1.2em; margin: 0; padding: 0; font-family: '阿里妈妈数黑体 Bold'; font-weight: 800;}
+    p.call{ letter-spacing: 0.4em; font-size: 2.2em; line-height: 1.5; font-style: normal;}
+    p.answer{ letter-spacing: 0.23em; line-height: 1.5; font-style: normal; color: #a2a9af; margin-top: 10px;}
+    .desc p::before, .desc p::after{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1.5em; color: #4c5870;}
+    .desc p::before{ content: "“";} .desc p::after{ content: "”";}
+    .options{ display: flex; flex-direction: column;}
+    .options a{ color: #a2a9af; text-decoration: none; font-size: 1.1em; position: relative; display: inline; margin: 10px auto;}
+    .options a::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #ebedec; transform-origin: bottom right; transform: scaleX(0); transition: transform 0.3s ease;}
+    .options a:hover::before{ transform-origin: bottom left; transform: scaleX(1);} .options a:hover{ color:#ebedec;}
+    footer{ display: flex; justify-content: center; color: #4c5870;} footer a{ color:inherit; text-decoration: none; margin: auto 10px;}
   </style>
 </body>
 
-</html>
+</html>
diff --git a/xiaomusic/static/pure/index.html b/xiaomusic/static/pure/index.html
@@ -7,6 +7,16 @@
     <title>小爱音箱操控面板</title>
     <script type="module" crossorigin src="/static/pure/assets/index-SRiaS3ii.js"></script>
     <link rel="stylesheet" crossorigin href="/static/pure/assets/index-Bd5dK7Z7.css">
+
+    <!-- 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>
+
   </head>
   <body>
     <div id="app"></div>