mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
sagit
166 lines
4.9 KiB
HTML
166 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/png" href="/pwa-192x192.png" />
|
|
<meta name="theme-color" content="#2563eb" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="apple-mobile-web-app-title" content="FLVX" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
|
|
<title>FLVX</title>
|
|
<script>
|
|
// 防止暗黑模式闪烁：在页面加载前立即应用系统主题
|
|
(function() {
|
|
// 立即检测系统主题并应用
|
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
// 立即设置主题类，避免闪烁
|
|
if (isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.style.colorScheme = 'light';
|
|
}
|
|
|
|
// 监听系统主题变化
|
|
if (window.matchMedia) {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
|
|
if (e.matches) {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.style.colorScheme = 'light';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 检测H5模式并设置标记，避免布局切换时的闪屏
|
|
const isMobile = window.innerWidth <= 768;
|
|
const isMobileBrowser = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const isH5Param = urlParams.get('h5') === 'true';
|
|
|
|
if (isMobile || isMobileBrowser || isH5Param) {
|
|
document.documentElement.classList.add('h5-mode');
|
|
} else {
|
|
document.documentElement.classList.add('pc-mode');
|
|
}
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* 防止页面闪烁的基础样式 */
|
|
:root {
|
|
--toaster-bg: #ffffff;
|
|
--toaster-color: #000000;
|
|
--toaster-border: #e5e7eb;
|
|
}
|
|
|
|
html.dark {
|
|
--toaster-bg: #374151;
|
|
--toaster-color: #ffffff;
|
|
--toaster-border: #4b5563;
|
|
}
|
|
|
|
/* 默认浅色主题样式 */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
/* 禁用弹性滚动 */
|
|
overscroll-behavior: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 暗色主题样式 */
|
|
html.dark body {
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
background-color: inherit;
|
|
/* 确保根元素也禁用弹性滚动 */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* 使用动态视口单位，避免移动端地址栏导致的额外滚动 */
|
|
@supports (height: 100dvh) {
|
|
#root { min-height: 100dvh; }
|
|
}
|
|
|
|
/* iOS Safari 旧版本兼容 */
|
|
@supports (-webkit-touch-callout: none) {
|
|
#root { min-height: -webkit-fill-available; }
|
|
}
|
|
|
|
/* 防止加载时的闪烁 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 确保在主题切换时平滑过渡 */
|
|
html {
|
|
transition: color-scheme 0.2s ease;
|
|
/* 禁用整个页面的弹性滚动 */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* 防止布局切换时的闪屏 */
|
|
.h5-mode #root {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.h5-mode.dark #root {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.pc-mode #root {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.pc-mode.dark #root {
|
|
background-color: #000000;
|
|
}
|
|
|
|
/* 移动端滚动优化 */
|
|
@media (max-width: 768px) {
|
|
html, body {
|
|
overscroll-behavior: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 确保固定定位的元素不受滚动影响 */
|
|
.fixed {
|
|
overscroll-behavior: none;
|
|
}
|
|
}
|
|
</style>
|
|
<meta key="title" content="FLVX" property="og:title" />
|
|
<meta
|
|
content="FLVX"
|
|
property="og:description"
|
|
/>
|
|
<meta
|
|
content="FLVX"
|
|
name="description"
|
|
/>
|
|
<meta
|
|
key="viewport"
|
|
content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=no"
|
|
name="viewport"
|
|
/>
|
|
<link href="/favicon.ico" rel="icon" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|