218 lines
7.8 KiB
HTML
Executable File
218 lines
7.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#81c784" />
|
||
<meta name="description" content="万象口袋 - 一个多功能的聚合软件应用，提供聚合应用、小游戏、AI模型工具等丰富功能" />
|
||
<meta name="keywords" content="聚合应用,热搜榜单,小游戏,AI模型,实时资讯,工具集合" />
|
||
<meta name="author" content="万象口袋" />
|
||
<meta name="application-name" content="万象口袋" />
|
||
|
||
<!-- PWA / App meta -->
|
||
<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="万象口袋" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="msapplication-TileColor" content="#81c784" />
|
||
<meta name="msapplication-TileImage" content="%PUBLIC_URL%/icons/icon-192.png" />
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="万象口袋" />
|
||
<meta property="og:description" content="🎨一个跨平台的多功能聚合软件应用" />
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image" />
|
||
<meta property="twitter:title" content="万象口袋" />
|
||
<meta property="twitter:description" content="🎨一个跨平台的多功能聚合软件应用" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/icons/favicon-32.png" />
|
||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/icons/favicon-16.png" />
|
||
|
||
<!-- Apple Touch Icon -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/apple-touch-icon.png" />
|
||
|
||
<!-- Manifest -->
|
||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||
|
||
<!-- Preload fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
||
<title>万象口袋</title>
|
||
|
||
<style>
|
||
#splash {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
|
||
font-family: 'KaiTi', '楷体', 'STKaiti', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景脉冲光晕 */
|
||
#splash::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 400px; height: 400px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(129,199,132,0.35) 0%, transparent 70%);
|
||
animation: bgPulse 4s ease-in-out infinite;
|
||
}
|
||
#splash::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 600px; height: 600px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(255,211,165,0.2) 0%, transparent 70%);
|
||
animation: bgPulse 4s ease-in-out infinite 2s;
|
||
}
|
||
|
||
/* Logo 区域 */
|
||
.splash-logo-wrap {
|
||
position: relative;
|
||
width: 120px; height: 120px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.splash-logo {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%; height: 100%;
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 32px rgba(46,125,50,0.25);
|
||
animation: logoFloat 3s ease-in-out infinite;
|
||
}
|
||
|
||
/* 三层扩散环 */
|
||
.splash-ring {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(129,199,132,0.5);
|
||
transform: translate(-50%, -50%) scale(0.6);
|
||
opacity: 0;
|
||
animation: ringExpand 3s ease-out infinite;
|
||
}
|
||
.splash-ring:nth-child(2) { animation-delay: 0s; }
|
||
.splash-ring:nth-child(3) { animation-delay: 1s; }
|
||
.splash-ring:nth-child(4) { animation-delay: 2s; }
|
||
|
||
/* 标题 */
|
||
.splash-title {
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
color: #2e7d32;
|
||
margin-bottom: 8px;
|
||
text-shadow: 0 2px 8px rgba(46,125,50,0.15);
|
||
letter-spacing: 2px;
|
||
}
|
||
.splash-subtitle {
|
||
font-size: 15px;
|
||
color: rgba(46,125,50,0.7);
|
||
margin-bottom: 36px;
|
||
font-weight: 500;
|
||
letter-spacing: 4px;
|
||
}
|
||
|
||
/* 三点加载指示器 */
|
||
.splash-dots {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.splash-dot {
|
||
width: 10px; height: 10px;
|
||
border-radius: 50%;
|
||
background: #81c784;
|
||
animation: dotBounce 1.4s ease-in-out infinite;
|
||
}
|
||
.splash-dot:nth-child(1) { animation-delay: 0s; }
|
||
.splash-dot:nth-child(2) { animation-delay: 0.2s; }
|
||
.splash-dot:nth-child(3) { animation-delay: 0.4s; }
|
||
|
||
/* ——— Animations ——— */
|
||
@keyframes bgPulse {
|
||
0%, 100% { transform: scale(1); opacity: 0.4; }
|
||
50% { transform: scale(1.15); opacity: 0.7; }
|
||
}
|
||
@keyframes logoFloat {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-8px); }
|
||
}
|
||
@keyframes ringExpand {
|
||
0% { width: 100px; height: 100px; opacity: 0.6; transform: translate(-50%,-50%) scale(0.8); }
|
||
100% { width: 260px; height: 260px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
|
||
}
|
||
@keyframes dotBounce {
|
||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
||
40% { transform: scale(1.2); opacity: 1; }
|
||
}
|
||
|
||
/* 退出动画 */
|
||
#splash.splash-exit {
|
||
animation: splashFadeOut 0.6s ease-in forwards;
|
||
}
|
||
@keyframes splashFadeOut {
|
||
0% { opacity: 1; transform: scale(1); }
|
||
100% { opacity: 0; transform: scale(1.05); }
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.splash-logo-wrap { width: 96px; height: 96px; margin-bottom: 22px; }
|
||
.splash-logo { border-radius: 20px; }
|
||
.splash-title { font-size: 26px; }
|
||
.splash-subtitle { font-size: 13px; margin-bottom: 28px; }
|
||
@keyframes ringExpand {
|
||
0% { width: 80px; height: 80px; opacity: 0.6; transform: translate(-50%,-50%) scale(0.8); }
|
||
100% { width: 200px; height: 200px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<noscript>您需要启用 JavaScript 才能运行此应用。</noscript>
|
||
|
||
<!-- PWA 启动动画 -->
|
||
<div id="splash">
|
||
<div class="splash-logo-wrap">
|
||
<img class="splash-logo" src="%PUBLIC_URL%/assets/logo.png" alt="万象口袋" />
|
||
<div class="splash-ring"></div>
|
||
<div class="splash-ring"></div>
|
||
<div class="splash-ring"></div>
|
||
</div>
|
||
<div class="splash-title">万象口袋</div>
|
||
<div class="splash-subtitle">加载中</div>
|
||
<div class="splash-dots">
|
||
<div class="splash-dot"></div>
|
||
<div class="splash-dot"></div>
|
||
<div class="splash-dot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="root"></div>
|
||
|
||
<script>
|
||
window.addEventListener('load', function() {
|
||
setTimeout(function() {
|
||
var s = document.getElementById('splash');
|
||
if (s) {
|
||
s.classList.add('splash-exit');
|
||
setTimeout(function() { s.remove(); }, 600);
|
||
}
|
||
}, 800);
|
||
});
|
||
window.addEventListener('error', function(e) {
|
||
console.error('应用加载错误:', e.error);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|