mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-07 05:02:45 +08:00
265 lines
8.3 KiB
HTML
265 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" style="
|
|
overflow: hidden auto;
|
|
min-block-size: 100vh;
|
|
min-block-size: 100dvh;
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
|
--safe-area-inset-top: env(safe-area-inset-top);
|
|
background: var(--initial-loader-bg, #fff);
|
|
">
|
|
|
|
<head>
|
|
<title>MoviePilot</title>
|
|
<meta charset="UTF-8" />
|
|
<!-- 核心viewport设置 - 针对PWA优化 -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover, shrink-to-fit=no, interactive-widget=resizes-content" />
|
|
|
|
<!-- 防止缩放和选择，提供原生应用体验 -->
|
|
<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
|
|
|
|
<!-- 基础信息 -->
|
|
<meta name="description" content="MoviePilot - 智能影视媒体库管理工具" />
|
|
<meta name="author" content="MoviePilot" />
|
|
<meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
|
|
|
|
<!-- 安全和隐私 -->
|
|
<meta name="Robots" content="noindex,nofollow,noarchive" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
|
|
<!-- PWA - 基础图标 -->
|
|
<link rel="icon" type="image/png" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" href="/logo.png" sizes="any" />
|
|
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
|
|
|
<!-- iOS Safari PWA 优化 -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
|
|
<link rel="apple-touch-startup-image" href="/splash/apple-splash.png" />
|
|
|
|
<!-- iOS Safari 全屏模式 -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="MoviePilot" />
|
|
|
|
<!-- iOS Safari 防止自动识别 -->
|
|
<meta name="apple-mobile-web-app-orientations" content="portrait" />
|
|
|
|
<!-- Android Chrome PWA 优化 -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="mobile-web-app-title" content="MoviePilot" />
|
|
|
|
<!-- Microsoft Windows PWA -->
|
|
<meta name="msapplication-TileColor" content="#0E1116" />
|
|
<meta name="msapplication-TileImage" content="/android-chrome-192x192.png" />
|
|
<meta name="msapplication-config" content="none" />
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="msapplication-navbutton-color" content="#0E1116" />
|
|
|
|
<!-- 主题色彩 - 适配深色和浅色模式 -->
|
|
<meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
|
|
<meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
|
|
<meta name="color-scheme" content="dark light" />
|
|
|
|
<!-- 屏幕方向锁定 -->
|
|
<meta name="screen-orientation" content="portrait" />
|
|
<meta name="x5-orientation" content="portrait" />
|
|
<meta name="x5-fullscreen" content="true" />
|
|
<meta name="x5-page-mode" content="app" />
|
|
|
|
<!-- UC浏览器优化 -->
|
|
<meta name="browsermode" content="application" />
|
|
<meta name="wap-font-scale" content="no" />
|
|
|
|
<!-- 360浏览器优化 -->
|
|
<meta name="renderer" content="webkit" />
|
|
|
|
<!-- 触摸优化 -->
|
|
<meta name="HandheldFriendly" content="True" />
|
|
<meta name="MobileOptimized" content="320" />
|
|
|
|
<!-- 缓存控制 -->
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
|
|
<!-- DNS预解析和预连接 -->
|
|
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
|
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
|
|
<link rel="dns-prefetch" href="//image.tmdb.org" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
|
|
|
<style>
|
|
#app {
|
|
block-size: 100%;
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
#loading-bg {
|
|
position: fixed;
|
|
z-index: 99999;
|
|
display: block;
|
|
background: var(--initial-loader-bg, #fff);
|
|
block-size: 100vh;
|
|
inline-size: 100vw;
|
|
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
|
|
}
|
|
|
|
.loading-logo {
|
|
position: absolute;
|
|
inset-block-start: 35%;
|
|
inset-inline-start: calc(50% - 5rem);
|
|
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
|
|
}
|
|
|
|
.loading-complete .loading-logo {
|
|
filter: blur(10px);
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.loading-complete {
|
|
filter: blur(15px);
|
|
opacity: 0;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 50%;
|
|
block-size: 55px;
|
|
inline-size: 55px;
|
|
inset-block-start: 80%;
|
|
inset-inline-start: calc(50% - 27.5px);
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.loading-complete .loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
.loading .effect-1,
|
|
.loading .effect-2,
|
|
.loading .effect-3 {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 50%;
|
|
block-size: 100%;
|
|
border-inline-start: 3px solid var(--initial-loader-color, #eee);
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.loading .effect-1 {
|
|
animation: rotate 1s ease infinite;
|
|
}
|
|
|
|
.loading .effect-2 {
|
|
animation: rotate-opacity 1s ease infinite 0.1s;
|
|
}
|
|
|
|
.loading .effect-3 {
|
|
animation: rotate-opacity 1s ease infinite 0.2s;
|
|
}
|
|
|
|
.loading .effects {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-opacity {
|
|
0% {
|
|
opacity: 0.1;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 检测系统主题是否为深色模式
|
|
function checkPrefersColorSchemeIsDark() {
|
|
try {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
// 主题色彩初始化
|
|
let loaderColor = localStorage.getItem('materio-initial-loader-bg')
|
|
let primaryColor = localStorage.getItem('materio-initial-loader-color')
|
|
|
|
// 检查主题设置
|
|
const savedTheme = localStorage.getItem('theme')
|
|
const isAutoTheme = savedTheme === 'auto'
|
|
|
|
// 如果是自动主题或者没有保存的背景色，根据系统主题设置背景色
|
|
if (isAutoTheme || !loaderColor) {
|
|
loaderColor = checkPrefersColorSchemeIsDark() ? '#0E1116' : '#FFFFFF'
|
|
}
|
|
if (!primaryColor) {
|
|
primaryColor = '#9155FD'
|
|
}
|
|
|
|
// 应用主题色彩
|
|
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
|
|
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
|
|
|
|
// 状态栏适配
|
|
if (window.navigator.standalone) {
|
|
document.documentElement.style.setProperty('--status-bar-height', '20px')
|
|
}
|
|
|
|
// 安全区域适配
|
|
function updateSafeArea() {
|
|
const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')
|
|
const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)',
|
|
)
|
|
|
|
if (safeAreaTop) document.documentElement.style.setProperty('--safe-area-top', safeAreaTop)
|
|
if (safeAreaBottom) document.documentElement.style.setProperty('--safe-area-bottom', safeAreaBottom)
|
|
}
|
|
|
|
updateSafeArea()
|
|
window.addEventListener('resize', updateSafeArea)
|
|
window.addEventListener('orientationchange', updateSafeArea)
|
|
</script>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
|
|
<div id="loading-bg">
|
|
<div class="loading-logo">
|
|
<!-- Logo -->
|
|
<img src="/logo.svg" alt="MoviePilot" width="160px" height="160px" />
|
|
</div>
|
|
<div class="loading">
|
|
<div class="effect-1 effects"></div>
|
|
<div class="effect-2 effects"></div>
|
|
<div class="effect-3 effects"></div>
|
|
</div>
|
|
</div>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html> |