fix: 主页适配移动端

This commit is contained in:
涵曦 2024-09-18 00:06:28 +08:00
parent 7f8e639b86
commit 046cdade5a
7 changed files with 48 additions and 15 deletions

View File

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

View File

@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Debug For XiaoMusic</title> <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="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) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

View File

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

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>M3U to JSON Converter</title> <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) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

View File

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

View File

@ -6,6 +6,16 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小爱音箱操控面板</title> <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> </head>
<body> <body>
@ -30,7 +40,21 @@
power by <a href="https://github.com/hanxi/xiaomusic">XiaoMusic</a> power by <a href="https://github.com/hanxi/xiaomusic">XiaoMusic</a>
</footer> </footer>
<style> <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> </style>
</body> </body>

View File

@ -7,6 +7,16 @@
<title>小爱音箱操控面板</title> <title>小爱音箱操控面板</title>
<script type="module" crossorigin src="/static/pure/assets/index-SRiaS3ii.js"></script> <script type="module" crossorigin src="/static/pure/assets/index-SRiaS3ii.js"></script>
<link rel="stylesheet" crossorigin href="/static/pure/assets/index-Bd5dK7Z7.css"> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>