mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 14:55:29 +00:00
e4fde5ae74
- Added PWA support using vite-plugin-pwa, including configuration for service worker and caching strategies. - Updated index.html to include necessary meta tags for iOS Safari PWA support. - Changed references from site.webmanifest to manifest.webmanifest for consistency. - Removed redundant manifest generation from the favicon script, as it is now handled by vite-plugin-pwa. Signed-off-by: Innei <tukon479@gmail.com>
256 lines
7.1 KiB
HTML
256 lines
7.1 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<meta name="description" content="<%- description %>" />
|
|
|
|
<!-- PWA 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="<%- title %>" />
|
|
|
|
<title><%- title %></title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
html {
|
|
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
</style>
|
|
<script id="config">
|
|
window.__CONFIG__ = {}
|
|
</script>
|
|
<script id="manifest"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<!-- Splash Screen - 现代简洁设计 -->
|
|
<div
|
|
id="splash-screen"
|
|
style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #0a0a0a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
|
overflow: hidden;
|
|
"
|
|
>
|
|
<!-- 主要内容 -->
|
|
<div
|
|
style="
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
text-align: center;
|
|
"
|
|
>
|
|
<!-- Logo -->
|
|
<div
|
|
style="
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
border-radius: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 4px 16px rgba(0, 0, 0, 0.4);
|
|
animation: logoFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
backdrop-filter: blur(10px);
|
|
"
|
|
>
|
|
<!-- 相机图标 -->
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#0a0a0a"
|
|
stroke-width="1.8"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M3 9a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 10.07 4h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 18.07 7H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"
|
|
/>
|
|
<circle cx="12" cy="13" r="3" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 应用标题 -->
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem">
|
|
<h1
|
|
style="
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin: 0;
|
|
animation: titleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s
|
|
both;
|
|
"
|
|
>
|
|
<%- title %>
|
|
</h1>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 0.875rem;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
animation: subtitleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
|
|
both;
|
|
"
|
|
>
|
|
<%- description %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 加载动画 -->
|
|
<div
|
|
style="
|
|
margin-top: 1rem;
|
|
animation: loaderFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
|
|
"
|
|
>
|
|
<!-- 点状加载器 -->
|
|
<div style="display: flex; gap: 0.5rem; align-items: center">
|
|
<div
|
|
style="
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 50%;
|
|
animation: dotPulse 1.4s ease-in-out infinite;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 50%;
|
|
animation: dotPulse 1.4s ease-in-out infinite 0.2s;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 50%;
|
|
animation: dotPulse 1.4s ease-in-out infinite 0.4s;
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSS 动画 -->
|
|
<style>
|
|
@keyframes logoFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes titleFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes subtitleFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes loaderFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes dotPulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 640px) {
|
|
#splash-screen h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
#splash-screen p {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#splash-screen h1 {
|
|
font-size: 1.375rem;
|
|
}
|
|
#splash-screen [style*='gap: 2rem'] {
|
|
gap: 1.5rem !important;
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|