feat: 更新项目代码
This commit is contained in:
219
InfoGenie-frontend/index.html
Normal file
219
InfoGenie-frontend/index.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!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="/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="/icons/favicon-32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />
|
||||
|
||||
<!-- Apple Touch Icon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
||||
|
||||
<!-- Manifest -->
|
||||
<link rel="manifest" href="/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="/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 type="module" src="/src/index.js"></script>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user