Files
SearcjGal-frontend/index.html
AdingApkgg c46517da8b feat: 重构进度条与键盘快捷键帮助功能
* 移除 `nprogress` 依赖,替换为自定义进度条,使用 `anime.js` 实现更流畅的加载效果。
* 在 `index.html` 中优化主题检测与背景样式,提升用户体验。
* 添加键盘快捷键帮助面板,增强用户交互,支持通过快捷键显示/隐藏。
* 更新多个组件以集成新的键盘帮助功能,确保一致性和可用性。
* 优化 UI 状态管理,支持会话状态的恢复与清除,提升用户体验。
2025-12-21 11:30:04 +08:00

364 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 关键渲染路径优化 - 同步执行,防止任何视觉闪烁 -->
<script>
// 立即检测主题,在任何内容渲染前执行
(function() {
var d = document.documentElement;
try {
var saved = localStorage.getItem('ui-state');
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var isDark = saved ? JSON.parse(saved).isDarkMode : prefersDark;
if (isDark) d.classList.add('dark');
} catch (e) {
// 默认跟随系统
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
d.classList.add('dark');
}
}
})();
</script>
<style>
/* 初始背景 - 根据主题类立即应用,防止白屏 */
html {
background:
radial-gradient(ellipse at 20% 30%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
background-attachment: fixed;
min-height: 100vh;
}
html:not(.dark) {
background:
radial-gradient(ellipse at 20% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
/* 页面内容淡入效果 */
body {
opacity: 0;
transition: opacity 0.15s ease-out;
}
body.ready {
opacity: 1;
}
</style>
<!-- Primary Meta Tags -->
<title>SearchGal - Galgame 聚合搜索</title>
<meta name="title" content="SearchGal - Galgame 聚合搜索" />
<meta
name="description"
content="Galgame 资源聚合搜索引擎,支持多站点搜索、游戏信息查询、补丁下载。一站式搜索体验,快速找到你想要的 Galgame 资源。"
/>
<meta
name="keywords"
content="Galgame,美少女游戏,游戏搜索,补丁下载,VNDB,聚合搜索,SearchGal"
/>
<meta name="author" content="SearchGal Team" />
<meta name="robots" content="index, follow" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://searchgal.homes/" />
<meta property="og:title" content="SearchGal - Galgame 聚合搜索" />
<meta
property="og:description"
content="Galgame 资源聚合搜索引擎,支持多站点搜索、游戏信息查询、补丁下载。一站式搜索体验,快速找到你想要的 Galgame 资源。"
/>
<meta property="og:image" content="https://searchgal.homes/logo.svg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:site_name" content="SearchGal" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://searchgal.homes/" />
<meta property="twitter:title" content="SearchGal - Galgame 聚合搜索" />
<meta
property="twitter:description"
content="Galgame 资源聚合搜索引擎,支持多站点搜索、游戏信息查询、补丁下载。"
/>
<meta
property="twitter:image"
content="https://searchgal.homes/logo.svg"
/>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="alternate icon" type="image/png" sizes="32x32" href="/logo.svg" />
<link rel="alternate icon" type="image/png" sizes="16x16" href="/logo.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/logo.svg" />
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<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="SearchGal" />
<meta name="application-name" content="SearchGal" />
<meta name="msapplication-TileColor" content="#ff1493" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<!-- Canonical URL -->
<link rel="canonical" href="https://searchgal.homes/" />
<!-- 预连接关键资源 -->
<link rel="preconnect" href="https://api.illlights.com" />
<link rel="preconnect" href="https://api.vndb.org" />
<link rel="preconnect" href="https://registry.npmmirror.com" />
<link rel="dns-prefetch" href="https://artalk.saop.cc" />
<link rel="dns-prefetch" href="https://status.searchgal.homes" />
<!-- 性能优化 Meta 标签 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta name="color-scheme" content="light dark" />
<style>
/* ============================================
第三方库样式覆盖
============================================ */
/* Fancybox 图片查看器 - 艳粉主色调 */
.fancybox-custom .fancybox__backdrop {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
}
.fancybox-custom .fancybox__container {
--fancybox-accent-color: #ff1493;
}
/* ============================================
全局伪元素样式(无法用 Tailwind 替代)
============================================ */
/* 自定义滚动条 - 艳粉主题 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: linear-gradient(to bottom, rgba(255, 179, 217, 0.1), rgba(255, 228, 242, 0.15));
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(255, 20, 147, 0.05);
}
.dark ::-webkit-scrollbar-track {
background: linear-gradient(to bottom, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.5));
box-shadow: inset 0 0 5px rgba(255, 105, 180, 0.1);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff1493 0%, #ff69b4 50%, #d946ef 100%);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 8px rgba(255, 20, 147, 0.3);
transition: all 0.3s ease;
}
.dark ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff69b4 0%, #ffb3d9 50%, #e879f9 100%);
border: 2px solid rgba(255, 105, 180, 0.2);
box-shadow: 0 2px 10px rgba(255, 105, 180, 0.4);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ff69b4 0%, #ff1493 50%, #d946ef 100%);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 12px rgba(255, 20, 147, 0.5);
transform: scale(1.05);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ffb3d9 0%, #ff69b4 50%, #f0abfc 100%);
border-color: rgba(255, 105, 180, 0.4);
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.6);
}
/* 文本选中高亮 - 艳粉主色调 */
::selection {
background-color: rgba(255, 20, 147, 0.35);
color: #1d1b1e;
}
.dark ::selection {
background-color: rgba(255, 105, 180, 0.4);
color: #ffffff;
}
/* ============================================
背景图层样式(由 App.vue + motion-v 控制动画)
============================================ */
/* 背景纹理层 - 仅在无背景图时显示 */
#background-pattern {
background:
radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.08), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(217, 70, 239, 0.08), transparent 50%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ff1493' fill-opacity='0.02' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
opacity: 0.4;
}
.dark #background-pattern {
background:
radial-gradient(circle at 30% 20%, rgba(255, 105, 180, 0.06), transparent 40%),
radial-gradient(circle at 70% 70%, rgba(232, 121, 249, 0.05), transparent 40%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.015' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
opacity: 0.3;
}
</style>
<!-- 不蒜子统计 -->
<script
async
src="https://registry.npmmirror.com/js-asuna/latest/files/js/bsz.pure.mini.js"
></script>
</head>
<body class="touch-optimize">
<!-- 禁止无 JavaScript 用户访问 -->
<noscript>
<style>
/* 禁用 JS 时确保内容可见 */
body { opacity: 1 !important; }
#app { display: none !important; }
.noscript-warning {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
color: white;
font-family: system-ui, -apple-system, sans-serif;
text-align: center;
padding: 2rem;
z-index: 99999;
}
.noscript-warning svg {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
color: #ff1493;
}
.noscript-warning h1 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ff1493, #d946ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.noscript-warning p {
color: #94a3b8;
max-width: 400px;
line-height: 1.6;
margin-bottom: 0.5rem;
}
.noscript-warning .hint {
font-size: 0.875rem;
color: #64748b;
margin-top: 1.5rem;
padding: 1rem;
background: rgba(255, 20, 147, 0.1);
border-radius: 0.75rem;
border: 1px solid rgba(255, 20, 147, 0.2);
}
</style>
<div class="noscript-warning">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="m4.9 4.9 14.2 14.2"/>
</svg>
<h1>请启用 JavaScript</h1>
<p>SearchGal 需要 JavaScript 才能正常运行。</p>
<p>请在浏览器设置中启用 JavaScript 后刷新页面。</p>
<div class="hint">
💡 大多数浏览器默认启用 JavaScript。<br>
如果您使用了广告拦截器,请将本站加入白名单。
</div>
</div>
</noscript>
<!-- 禁止 IE 浏览器访问 -->
<script>/MSIE|Trident/.test(window.navigator.userAgent)&&(alert("抱歉,本站不支持 IE 浏览器,请用 Chrome 访问。"),window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href))</script>
<!-- WWDC 2025 液态玻璃 SVG 滤镜 -->
<!-- 参考: https://github.com/lucasromerodb/liquid-glass-effect-macos -->
<svg style="display: none" aria-hidden="true">
<defs>
<!-- 液态玻璃扭曲滤镜 - 完整版 (用于大元素) -->
<filter
id="liquid-glass"
x="0%" y="0%" width="100%" height="100%"
filterUnits="objectBoundingBox"
>
<feTurbulence
type="fractalNoise"
baseFrequency="0.01 0.01"
numOctaves="1"
seed="5"
result="turbulence"
/>
<feComponentTransfer in="turbulence" result="mapped">
<feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
<feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
<feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
</feComponentTransfer>
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
<feSpecularLighting
in="softMap"
surfaceScale="5"
specularConstant="1"
specularExponent="100"
lighting-color="white"
result="specLight"
>
<fePointLight x="-200" y="-200" z="300" />
</feSpecularLighting>
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
<!-- scale 值控制扭曲程度20 是微妙的扭曲 -->
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="20" xChannelSelector="R" yChannelSelector="G" />
</filter>
<!-- 液态玻璃滤镜 - 轻量版 (用于按钮等小元素,更微妙的扭曲) -->
<filter
id="liquid-glass-lite"
x="0%" y="0%" width="100%" height="100%"
filterUnits="objectBoundingBox"
>
<feTurbulence
type="fractalNoise"
baseFrequency="0.015 0.015"
numOctaves="1"
seed="3"
result="turbulence"
/>
<feGaussianBlur in="turbulence" stdDeviation="2" result="softMap" />
<feSpecularLighting
in="softMap"
surfaceScale="3"
specularConstant="0.8"
specularExponent="80"
lighting-color="white"
result="specLight"
>
<fePointLight x="-100" y="-100" z="200" />
</feSpecularLighting>
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
<!-- 更小的 scale 值,扭曲更微妙 -->
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="8" xChannelSelector="R" yChannelSelector="G" />
</filter>
</defs>
</svg>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
// 页面内容准备好后淡入显示
requestAnimationFrame(function() {
document.body.classList.add('ready');
});
</script>
</body>
</html>