frontend/index.html at main · Moe-Sakura/frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!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;
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      var isDark = prefersDark; // 默认跟随系统

      try {
        var saved = localStorage.getItem('ui-state');
        if (saved) {
          var state = JSON.parse(saved);
          var themeMode = state.themeMode;

          // 迁移旧版格式：如果没有 themeMode 但有 isDarkMode，转换为新格式
          if (!themeMode && typeof state.isDarkMode === 'boolean') {
            themeMode = state.isDarkMode ? 'dark' : 'light';
          }

          themeMode = themeMode || 'system';

          if (themeMode === 'dark') {
            isDark = true;
          } else if (themeMode === 'light') {
            isDark = false;
          }
          // themeMode === 'system' 时使用 prefersDark
        }
      } catch (e) {
        // 解析失败，使用系统偏好
      }

      if (isDark) 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://www.searchgal.top/" />
    <meta property="og:title" content="SearchGal - Galgame 聚合搜索" />
    <meta
      property="og:description"
      content="Galgame 资源聚合搜索引擎，支持多站点搜索、游戏信息查询、补丁下载。一站式搜索体验，快速找到你想要的 Galgame 资源。"
    />
    <meta property="og:image" content="https://www.searchgal.top/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://www.searchgal.top/" />
    <meta property="twitter:title" content="SearchGal - Galgame 聚合搜索" />
    <meta
      property="twitter:description"
      content="Galgame 资源聚合搜索引擎，支持多站点搜索、游戏信息查询、补丁下载。"
    />
    <meta
      property="twitter:image"
      content="https://www.searchgal.top/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 Meta Tags (manifest 由 vite-plugin-pwa 自动注入) -->
    <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://www.searchgal.top/" />

    <!-- 预连接关键资源 -->
    <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.top" />

    <!-- 性能优化 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>

</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>

    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      // 页面内容准备好后淡入显示
      requestAnimationFrame(function() {
        document.body.classList.add('ready');
      });
    </script>
</body>
</html>