81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<title>社学搭子 - 社会学学习工具</title>
|
|
<link rel="apple-touch-icon" href="/pwa-192x192.png" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; overflow: hidden; touch-action: manipulation; }
|
|
/* 自定义滚动条 */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
|
|
/* 隐藏滚动条但保留功能 */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* 自定义动画 */
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes breathe {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
/* 波浪跳动加载动画 */
|
|
@keyframes bounce-delay {
|
|
0%, 80%, 100% { transform: scale(0); }
|
|
40% { transform: scale(1); }
|
|
}
|
|
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }
|
|
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
|
.animate-breathe { animation: breathe 2s infinite ease-in-out; }
|
|
.animate-bounce-delay { animation: bounce-delay 1.4s infinite ease-in-out both; }
|
|
|
|
/* 按钮微动效 */
|
|
.btn-hover { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.btn-hover:active { transform: scale(0.95); }
|
|
|
|
/* 消息气泡过渡 */
|
|
.msg-transition { transition: all 0.3s ease; }
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://esm.sh/react@^19.2.3",
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
|
|
"react/": "https://esm.sh/react@^19.2.3/",
|
|
"@google/genai": "https://esm.sh/@google/genai@^1.34.0",
|
|
"lucide-react": "https://esm.sh/lucide-react@^0.562.0",
|
|
"react-markdown": "https://esm.sh/react-markdown@^10.1.0",
|
|
"vite": "https://esm.sh/vite@^7.3.0",
|
|
"@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.2",
|
|
"express": "https://esm.sh/express@^5.2.1",
|
|
"path": "https://esm.sh/path@^0.12.7",
|
|
"url": "https://esm.sh/url@^0.11.4",
|
|
"vite-plugin-pwa": "https://esm.sh/vite-plugin-pwa@^1.2.0",
|
|
"html2canvas": "https://esm.sh/html2canvas@^1.4.1"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900">
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html>
|