J'aime 0
Fork 0

Dernière activité 1 day ago

NewAPI自定义主页代码，适配响应式，有设计，轻量，高效

html newapi template

LiuShen's Avatar LiuShen a révisé ce gist 1 day ago. Aller à la révision

1 file changed, 1015 insertions

newapi.html(fichier créé)

@@ -0,0 +1,1015 @@
1 + <div class="bg-background text-foreground relative min-h-svh overflow-x-clip qy-home" data-qy-theme="light">
2 + <style>
3 + .qy-home {
4 + --qy-bg: #fbfaf7;
5 + --qy-bg-soft: rgba(255, 255, 255, 0.72);
6 + --qy-bg-solid: rgba(255, 255, 255, 0.92);
7 + --qy-text: #151a1f;
8 + --qy-muted: #68717d;
9 + --qy-faint: #8b96a5;
10 + --qy-line: rgba(37, 45, 57, 0.1);
11 + --qy-line-strong: rgba(37, 45, 57, 0.16);
12 + --qy-card: rgba(255, 255, 255, 0.62);
13 + --qy-card-strong: rgba(255, 255, 255, 0.84);
14 + --qy-primary: #1d7f8c;
15 + --qy-primary-strong: #115d68;
16 + --qy-accent: #c79f62;
17 + --qy-cyan: #74d7df;
18 + --qy-blue: #9eb8ff;
19 + --qy-shadow: 0 24px 80px rgba(31, 42, 58, 0.12);
20 + --qy-shadow-soft: 0 16px 42px rgba(31, 42, 58, 0.08);
21 + --qy-radius-xl: 34px;
22 + --qy-radius-lg: 24px;
23 + --qy-radius-md: 18px;
24 + color: var(--qy-text);
25 + background:
26 + radial-gradient(ellipse 56% 38% at 50% 30%, rgba(116, 215, 223, 0.22), rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0) 76%),
27 + radial-gradient(ellipse 42% 30% at 58% 46%, rgba(199, 159, 98, 0.11), rgba(255, 255, 255, 0) 70%);
28 + isolation: isolate;
29 + }
30 + .dark .qy-home,
31 + .qy-home[data-qy-theme="dark"] {
32 + --qy-bg: #090d12;
33 + --qy-bg-soft: rgba(13, 18, 25, 0.72);
34 + --qy-bg-solid: rgba(13, 18, 25, 0.94);
35 + --qy-text: #eef3f6;
36 + --qy-muted: #a7b1bd;
37 + --qy-faint: #737f8f;
38 + --qy-line: rgba(237, 246, 249, 0.1);
39 + --qy-line-strong: rgba(237, 246, 249, 0.16);
40 + --qy-card: rgba(15, 22, 30, 0.58);
41 + --qy-card-strong: rgba(15, 22, 30, 0.86);
42 + --qy-primary: #7fe3eb;
43 + --qy-primary-strong: #b8f4f7;
44 + --qy-accent: #e3bf7e;
45 + --qy-cyan: #76dce5;
46 + --qy-blue: #99b8ff;
47 + --qy-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
48 + --qy-shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.36);
49 + background:
50 + radial-gradient(ellipse 56% 38% at 50% 30%, rgba(116, 215, 223, 0.13), rgba(9, 13, 18, 0.2) 46%, rgba(9, 13, 18, 0) 76%),
51 + radial-gradient(ellipse 42% 30% at 58% 46%, rgba(227, 191, 126, 0.09), rgba(9, 13, 18, 0) 70%);
52 + }
53 + .qy-home * {
54 + box-sizing: border-box;
55 + }
56 + .qy-home a {
57 + color: inherit;
58 + text-decoration: none;
59 + }
60 + .qy-shell {
61 + position: relative;
62 + width: min(100%, 1180px);
63 + margin: 0 auto;
64 + padding: 22px clamp(18px, 4vw, 34px) 48px;
65 + }
66 + .qy-shell::before {
67 + content: "";
68 + position: absolute;
69 + inset: 116px clamp(0px, 3vw, 28px) auto;
70 + height: 620px;
71 + pointer-events: none;
72 + z-index: -1;
73 + opacity: 0.92;
74 + background:
75 + linear-gradient(115deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.64) 68%, rgba(255, 255, 255, 0)),
76 + radial-gradient(circle at 22% 26%, rgba(116, 215, 223, 0.2), transparent 34%),
77 + radial-gradient(circle at 70% 24%, rgba(158, 184, 255, 0.18), transparent 32%),
78 + radial-gradient(circle at 50% 78%, rgba(199, 159, 98, 0.13), transparent 30%);
79 + border-radius: 46px;
80 + filter: blur(0.2px);
81 + -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 132px, #000 78%, transparent 100%), radial-gradient(ellipse 68% 56% at 50% 42%, #000 38%, transparent 100%);
82 + -webkit-mask-composite: source-in;
83 + mask-image: linear-gradient(to bottom, transparent 0, transparent 34px, #000 132px, #000 78%, transparent 100%), radial-gradient(ellipse 68% 56% at 50% 42%, #000 38%, transparent 100%);
84 + mask-composite: intersect;
85 + }
86 + .dark .qy-shell::before,
87 + .qy-home[data-qy-theme="dark"] .qy-shell::before {
88 + background:
89 + linear-gradient(115deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.07) 68%, rgba(255, 255, 255, 0)),
90 + radial-gradient(circle at 22% 26%, rgba(116, 215, 223, 0.18), transparent 34%),
91 + radial-gradient(circle at 70% 24%, rgba(158, 184, 255, 0.14), transparent 32%),
92 + radial-gradient(circle at 50% 78%, rgba(227, 191, 126, 0.1), transparent 30%);
93 + }
94 + .qy-nav {
95 + position: sticky;
96 + top: 14px;
97 + z-index: 20;
98 + display: flex;
99 + align-items: center;
100 + justify-content: space-between;
101 + gap: 16px;
102 + min-height: 66px;
103 + padding: 12px 14px 12px 16px;
104 + border: 1px solid var(--qy-line);
105 + border-radius: 999px;
106 + background: color-mix(in srgb, var(--qy-bg-solid) 78%, transparent);
107 + box-shadow: 0 14px 42px rgba(40, 48, 64, 0.08);
108 + backdrop-filter: blur(22px) saturate(160%);
109 + -webkit-backdrop-filter: blur(22px) saturate(160%);
110 + }
111 + .qy-brand {
112 + display: inline-flex;
113 + align-items: center;
114 + gap: 11px;
115 + min-width: 0;
116 + }
117 + .qy-logo-wrap {
118 + display: grid;
119 + place-items: center;
120 + width: 40px;
121 + height: 40px;
122 + border: 1px solid var(--qy-line-strong);
123 + border-radius: 16px;
124 + background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.32));
125 + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 26px rgba(37, 45, 57, 0.08);
126 + overflow: hidden;
127 + }
128 + .dark .qy-logo-wrap,
129 + .qy-home[data-qy-theme="dark"] .qy-logo-wrap {
130 + background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
131 + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 26px rgba(0, 0, 0, 0.25);
132 + }
133 + .qy-logo-wrap img {
134 + width: 27px;
135 + height: 27px;
136 + border-radius: 9px;
137 + object-fit: cover;
138 + }
139 + .qy-brand-text {
140 + display: flex;
141 + flex-direction: column;
142 + gap: 1px;
143 + line-height: 1.05;
144 + }
145 + .qy-brand-name {
146 + font-size: 15px;
147 + font-weight: 760;
148 + letter-spacing: -0.03em;
149 + }
150 + .qy-brand-sub {
151 + font-size: 10px;
152 + letter-spacing: 0.17em;
153 + text-transform: uppercase;
154 + color: var(--qy-faint);
155 + }
156 + .qy-nav-links {
157 + display: flex;
158 + align-items: center;
159 + gap: 4px;
160 + color: var(--qy-muted);
161 + font-size: 13px;
162 + font-weight: 560;
163 + }
164 + .qy-nav-links a {
165 + padding: 9px 12px;
166 + border-radius: 999px;
167 + transition: color 0.22s ease, background 0.22s ease;
168 + }
169 + .qy-nav-links a:hover {
170 + color: var(--qy-text);
171 + background: rgba(127, 143, 162, 0.1);
172 + }
173 + .qy-nav-actions {
174 + display: flex;
175 + align-items: center;
176 + gap: 8px;
177 + }
178 + .qy-theme-toggle,
179 + .qy-small-button {
180 + appearance: none;
181 + border: 1px solid var(--qy-line);
182 + color: var(--qy-text);
183 + background: rgba(255, 255, 255, 0.42);
184 + border-radius: 999px;
185 + cursor: pointer;
186 + transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
187 + }
188 + .dark .qy-theme-toggle,
189 + .dark .qy-small-button,
190 + .qy-home[data-qy-theme="dark"] .qy-theme-toggle,
191 + .qy-home[data-qy-theme="dark"] .qy-small-button {
192 + background: rgba(255, 255, 255, 0.06);
193 + }
194 + .qy-theme-toggle {
195 + display: inline-flex;
196 + align-items: center;
197 + gap: 7px;
198 + height: 40px;
199 + padding: 0 12px;
200 + font-size: 12px;
201 + font-weight: 650;
202 + }
203 + .qy-theme-toggle:hover,
204 + .qy-small-button:hover {
205 + transform: translateY(-1px);
206 + border-color: color-mix(in srgb, var(--qy-primary) 38%, var(--qy-line));
207 + background: rgba(255, 255, 255, 0.68);
208 + }
209 + .dark .qy-theme-toggle:hover,
210 + .dark .qy-small-button:hover,
211 + .qy-home[data-qy-theme="dark"] .qy-theme-toggle:hover,
212 + .qy-home[data-qy-theme="dark"] .qy-small-button:hover {
213 + background: rgba(255, 255, 255, 0.1);
214 + }
215 + .qy-small-button {
216 + display: inline-flex;
217 + align-items: center;
218 + justify-content: center;
219 + min-height: 40px;
220 + padding: 0 15px;
221 + font-size: 13px;
222 + font-weight: 700;
223 + color: var(--qy-primary-strong);
224 + }
225 + .qy-hero {
226 + display: grid;
227 + grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.78fr);
228 + gap: clamp(28px, 5vw, 58px);
229 + align-items: center;
230 + padding: clamp(92px, 8vw, 134px) 0 clamp(42px, 7vw, 78px);
231 + }
232 + .qy-eyebrow {
233 + display: inline-flex;
234 + align-items: center;
235 + gap: 9px;
236 + width: fit-content;
237 + margin-bottom: 18px;
238 + padding: 8px 11px 8px 8px;
239 + border: 1px solid var(--qy-line);
240 + border-radius: 999px;
241 + background: var(--qy-card);
242 + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
243 + color: var(--qy-muted);
244 + font-size: 12px;
245 + font-weight: 650;
246 + backdrop-filter: blur(18px);
247 + -webkit-backdrop-filter: blur(18px);
248 + }
249 + .qy-pulse {
250 + width: 23px;
251 + height: 23px;
252 + border-radius: 50%;
253 + background: radial-gradient(circle, var(--qy-cyan) 0 28%, rgba(116, 215, 223, 0.2) 31% 58%, transparent 61%);
254 + box-shadow: 0 0 0 6px rgba(116, 215, 223, 0.08);
255 + }
256 + .qy-title {
257 + max-width: 760px;
258 + margin: 0;
259 + color: var(--qy-text);
260 + font-size: clamp(42px, 7.4vw, 86px);
261 + line-height: 0.95;
262 + letter-spacing: -0.075em;
263 + font-weight: 820;
264 + }
265 + .qy-title .qy-gradient-text {
266 + display: inline-block;
267 + color: transparent;
268 + background: linear-gradient(110deg, var(--qy-primary-strong), #6d8ff6 45%, var(--qy-accent) 88%);
269 + -webkit-background-clip: text;
270 + background-clip: text;
271 + }
272 + .dark .qy-title .qy-gradient-text,
273 + .qy-home[data-qy-theme="dark"] .qy-title .qy-gradient-text {
274 + background: linear-gradient(110deg, var(--qy-primary), #b7c7ff 45%, var(--qy-accent) 88%);
275 + -webkit-background-clip: text;
276 + background-clip: text;
277 + }
278 + .qy-lede {
279 + max-width: 640px;
280 + margin: 24px 0 0;
281 + color: var(--qy-muted);
282 + font-size: clamp(16px, 2vw, 19px);
283 + line-height: 1.85;
284 + }
285 + .qy-hero-actions {
286 + display: flex;
287 + flex-wrap: wrap;
288 + align-items: center;
289 + gap: 12px;
290 + margin-top: 30px;
291 + }
292 + .qy-button-primary,
293 + .qy-button-ghost {
294 + display: inline-flex;
295 + align-items: center;
296 + justify-content: center;
297 + gap: 9px;
298 + min-height: 48px;
299 + padding: 0 20px;
300 + border-radius: 999px;
301 + font-size: 14px;
302 + font-weight: 760;
303 + transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
304 + }
305 + .qy-button-primary {
306 + color: #fff;
307 + border: 1px solid rgba(17, 93, 104, 0.28);
308 + background:
309 + linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
310 + linear-gradient(135deg, #115d68, #238995 52%, #7c6f52);
311 + box-shadow: 0 18px 36px rgba(29, 127, 140, 0.26);
312 + }
313 + .qy-button-ghost {
314 + color: var(--qy-text);
315 + border: 1px solid var(--qy-line-strong);
316 + background: var(--qy-card);
317 + backdrop-filter: blur(16px);
318 + -webkit-backdrop-filter: blur(16px);
319 + }
320 + .qy-button-primary:hover,
321 + .qy-button-ghost:hover {
322 + transform: translateY(-2px);
323 + box-shadow: var(--qy-shadow-soft);
324 + }
325 + .qy-trust-row {
326 + display: flex;
327 + flex-wrap: wrap;
328 + gap: 10px;
329 + margin-top: 28px;
330 + }
331 + .qy-trust-chip {
332 + display: inline-flex;
333 + align-items: center;
334 + gap: 8px;
335 + padding: 8px 10px;
336 + border: 1px solid var(--qy-line);
337 + border-radius: 999px;
338 + background: rgba(255, 255, 255, 0.34);
339 + color: var(--qy-muted);
340 + font-size: 12px;
341 + font-weight: 630;
342 + }
343 + .dark .qy-trust-chip,
344 + .qy-home[data-qy-theme="dark"] .qy-trust-chip {
345 + background: rgba(255, 255, 255, 0.045);
346 + }
347 + .qy-dot {
348 + width: 7px;
349 + height: 7px;
350 + border-radius: 50%;
351 + background: var(--qy-primary);
352 + box-shadow: 0 0 16px rgba(116, 215, 223, 0.9);
353 + }
354 + .qy-console {
355 + position: relative;
356 + padding: 13px;
357 + border: 1px solid var(--qy-line-strong);
358 + border-radius: 32px;
359 + background: linear-gradient(150deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34));
360 + box-shadow: var(--qy-shadow);
361 + backdrop-filter: blur(28px) saturate(145%);
362 + -webkit-backdrop-filter: blur(28px) saturate(145%);
363 + }
364 + .dark .qy-console,
365 + .qy-home[data-qy-theme="dark"] .qy-console {
366 + background: linear-gradient(150deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
367 + }
368 + .qy-console::before {
369 + content: "";
370 + position: absolute;
371 + inset: 16px auto auto -34px;
372 + width: 74px;
373 + height: 74px;
374 + border-radius: 26px;
375 + background: linear-gradient(135deg, rgba(199, 159, 98, 0.22), rgba(116, 215, 223, 0.2));
376 + filter: blur(18px);
377 + opacity: 0.9;
378 + z-index: -1;
379 + }
380 + .qy-console-inner {
381 + overflow: hidden;
382 + border: 1px solid var(--qy-line);
383 + border-radius: 24px;
384 + background: var(--qy-bg-solid);
385 + }
386 + .qy-console-top {
387 + display: flex;
388 + align-items: center;
389 + justify-content: space-between;
390 + gap: 14px;
391 + padding: 15px 16px;
392 + border-bottom: 1px solid var(--qy-line);
393 + }
394 + .qy-window-dots {
395 + display: flex;
396 + gap: 7px;
397 + }
398 + .qy-window-dots span {
399 + width: 9px;
400 + height: 9px;
401 + border-radius: 50%;
402 + background: var(--qy-line-strong);
403 + }
404 + .qy-window-dots span:nth-child(1) { background: #e8a4a0; }
405 + .qy-window-dots span:nth-child(2) { background: #e3c16f; }
406 + .qy-window-dots span:nth-child(3) { background: #8ad6a4; }
407 + .qy-status-pill {
408 + display: inline-flex;
409 + align-items: center;
410 + gap: 7px;
411 + color: var(--qy-muted);
412 + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
413 + font-size: 11px;
414 + letter-spacing: 0.06em;
415 + text-transform: uppercase;
416 + }
417 + .qy-live-dot {
418 + width: 7px;
419 + height: 7px;
420 + border-radius: 50%;
421 + background: #2dcf83;
422 + box-shadow: 0 0 0 5px rgba(45, 207, 131, 0.12), 0 0 18px rgba(45, 207, 131, 0.7);
423 + }
424 + .qy-console-body {
425 + padding: 18px;
426 + }
427 + .qy-metric-grid {
428 + display: grid;
429 + grid-template-columns: repeat(3, 1fr);
430 + gap: 10px;
431 + margin-bottom: 14px;
432 + }
433 + .qy-mini-metric {
434 + min-width: 0;
435 + padding: 12px;
436 + border: 1px solid var(--qy-line);
437 + border-radius: 17px;
438 + background: color-mix(in srgb, var(--qy-card) 82%, transparent);
439 + }
440 + .qy-mini-metric span {
441 + display: block;
442 + color: var(--qy-faint);
443 + font-size: 10px;
444 + font-weight: 700;
445 + letter-spacing: 0.12em;
446 + text-transform: uppercase;
447 + }
448 + .qy-mini-metric strong {
449 + display: block;
450 + margin-top: 7px;
451 + font-size: 20px;
452 + line-height: 1;
453 + letter-spacing: -0.06em;
454 + }
455 + .qy-route-card {
456 + padding: 15px;
457 + border: 1px solid var(--qy-line);
458 + border-radius: 20px;
459 + background:
460 + linear-gradient(135deg, rgba(116, 215, 223, 0.08), transparent 42%),
461 + color-mix(in srgb, var(--qy-card-strong) 88%, transparent);
462 + }
463 + .qy-route-head {
464 + display: flex;
465 + align-items: center;
466 + justify-content: space-between;
467 + gap: 10px;
468 + margin-bottom: 14px;
469 + }
470 + .qy-route-head span {
471 + color: var(--qy-faint);
472 + font-size: 11px;
473 + font-weight: 720;
474 + letter-spacing: 0.14em;
475 + text-transform: uppercase;
476 + }
477 + .qy-model-stack {
478 + display: grid;
479 + gap: 9px;
480 + }
481 + .qy-model-row {
482 + display: grid;
483 + grid-template-columns: 94px minmax(0, 1fr) auto;
484 + align-items: center;
485 + gap: 10px;
486 + color: var(--qy-muted);
487 + font-size: 12px;
488 + }
489 + .qy-model-row strong {
490 + color: var(--qy-text);
491 + font-size: 12px;
492 + }
493 + .qy-bar {
494 + position: relative;
495 + height: 7px;
496 + overflow: hidden;
497 + border-radius: 999px;
498 + background: rgba(127, 143, 162, 0.14);
499 + }
500 + .qy-bar i {
501 + display: block;
502 + height: 100%;
503 + border-radius: inherit;
504 + background: linear-gradient(90deg, var(--qy-primary), var(--qy-blue));
505 + }
506 + .qy-code-card {
507 + margin-top: 12px;
508 + padding: 15px;
509 + border: 1px solid var(--qy-line);
510 + border-radius: 20px;
511 + background: rgba(10, 14, 20, 0.92);
512 + color: #d8edf0;
513 + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
514 + }
515 + .qy-code-card code {
516 + display: block;
517 + overflow-wrap: anywhere;
518 + white-space: pre-wrap;
519 + color: inherit;
520 + background: transparent;
521 + padding: 0;
522 + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
523 + font-size: 11.5px;
524 + line-height: 1.68;
525 + }
526 + .qy-code-card .qy-code-muted { color: #7c8b99; }
527 + .qy-code-card .qy-code-key { color: #9ee7f1; }
528 + .qy-code-card .qy-code-string { color: #e7c989; }
529 + .qy-section {
530 + padding: clamp(48px, 8vw, 88px) 0;
531 + }
532 + .qy-section-head {
533 + display: flex;
534 + align-items: end;
535 + justify-content: space-between;
536 + gap: 20px;
537 + margin-bottom: 24px;
538 + }
539 + .qy-section-kicker {
540 + margin: 0 0 10px;
541 + color: var(--qy-primary-strong);
542 + font-size: 12px;
543 + font-weight: 800;
544 + letter-spacing: 0.18em;
545 + text-transform: uppercase;
546 + }
547 + .qy-section-title {
548 + margin: 0;
549 + max-width: 620px;
550 + font-size: clamp(28px, 4.4vw, 48px);
551 + line-height: 1.05;
552 + letter-spacing: -0.055em;
553 + font-weight: 820;
554 + }
555 + .qy-section-desc {
556 + max-width: 380px;
557 + margin: 0;
558 + color: var(--qy-muted);
559 + font-size: 14px;
560 + line-height: 1.75;
561 + }
562 + .qy-stat-strip {
563 + display: grid;
564 + grid-template-columns: repeat(4, 1fr);
565 + gap: 12px;
566 + padding: 14px;
567 + border: 1px solid var(--qy-line);
568 + border-radius: var(--qy-radius-lg);
569 + background: var(--qy-card);
570 + box-shadow: var(--qy-shadow-soft);
571 + backdrop-filter: blur(22px);
572 + -webkit-backdrop-filter: blur(22px);
573 + }
574 + .qy-stat {
575 + min-height: 116px;
576 + padding: 18px;
577 + border: 1px solid var(--qy-line);
578 + border-radius: 20px;
579 + background: color-mix(in srgb, var(--qy-bg-solid) 76%, transparent);
580 + }
581 + .qy-stat strong {
582 + display: block;
583 + font-size: clamp(28px, 4vw, 42px);
584 + line-height: 1;
585 + letter-spacing: -0.07em;
586 + }
587 + .qy-stat span {
588 + display: block;
589 + margin-top: 12px;
590 + color: var(--qy-muted);
591 + font-size: 13px;
592 + line-height: 1.55;
593 + }
594 + .qy-feature-grid {
595 + display: grid;
596 + grid-template-columns: 1.1fr 0.9fr;
597 + gap: 14px;
598 + }
599 + .qy-card {
600 + position: relative;
601 + overflow: hidden;
602 + min-height: 260px;
603 + padding: clamp(22px, 3vw, 30px);
604 + border: 1px solid var(--qy-line);
605 + border-radius: var(--qy-radius-lg);
606 + background: var(--qy-card);
607 + box-shadow: var(--qy-shadow-soft);
608 + backdrop-filter: blur(24px) saturate(140%);
609 + -webkit-backdrop-filter: blur(24px) saturate(140%);
610 + }
611 + .qy-card::after {
612 + content: "";
613 + position: absolute;
614 + inset: 0;
615 + pointer-events: none;
616 + background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%);
617 + opacity: 0.8;
618 + }
619 + .dark .qy-card::after,
620 + .qy-home[data-qy-theme="dark"] .qy-card::after {
621 + opacity: 0.22;
622 + }
623 + .qy-card-content {
624 + position: relative;
625 + z-index: 1;
626 + }
627 + .qy-card-label {
628 + display: inline-flex;
629 + align-items: center;
630 + gap: 8px;
631 + margin-bottom: 18px;
632 + color: var(--qy-faint);
633 + font-size: 11px;
634 + font-weight: 800;
635 + letter-spacing: 0.15em;
636 + text-transform: uppercase;
637 + }
638 + .qy-card-label::before {
639 + content: "";
640 + width: 22px;
641 + height: 1px;
642 + background: var(--qy-accent);
643 + }
644 + .qy-card h3 {
645 + margin: 0;
646 + font-size: clamp(22px, 3vw, 31px);
647 + line-height: 1.12;
648 + letter-spacing: -0.045em;
649 + }
650 + .qy-card p {
651 + margin: 14px 0 0;
652 + color: var(--qy-muted);
653 + font-size: 14px;
654 + line-height: 1.78;
655 + }
656 + .qy-model-cloud {
657 + display: flex;
658 + flex-wrap: wrap;
659 + gap: 10px;
660 + margin-top: 28px;
661 + }
662 + .qy-model-cloud span {
663 + padding: 10px 13px;
664 + border: 1px solid var(--qy-line);
665 + border-radius: 999px;
666 + background: rgba(255, 255, 255, 0.42);
667 + color: var(--qy-muted);
668 + font-size: 12px;
669 + font-weight: 700;
670 + }
671 + .dark .qy-model-cloud span,
672 + .qy-home[data-qy-theme="dark"] .qy-model-cloud span {
673 + background: rgba(255, 255, 255, 0.045);
674 + }
675 + .qy-card-wide {
676 + grid-column: span 2;
677 + min-height: 220px;
678 + background:
679 + radial-gradient(circle at 84% 28%, rgba(116, 215, 223, 0.15), transparent 28%),
680 + var(--qy-card);
681 + }
682 + .qy-orbit {
683 + position: absolute;
684 + right: clamp(20px, 5vw, 64px);
685 + bottom: 26px;
686 + width: 210px;
687 + height: 150px;
688 + opacity: 0.92;
689 + }
690 + .qy-orbit span {
691 + position: absolute;
692 + display: grid;
693 + place-items: center;
694 + border: 1px solid var(--qy-line);
695 + border-radius: 999px;
696 + background: var(--qy-bg-solid);
697 + color: var(--qy-muted);
698 + font-size: 11px;
699 + font-weight: 760;
700 + box-shadow: 0 12px 28px rgba(31, 42, 58, 0.08);
701 + }
702 + .qy-orbit span:nth-child(1) { inset: 10px auto auto 70px; width: 74px; height: 74px; color: var(--qy-primary-strong); }
703 + .qy-orbit span:nth-child(2) { inset: 78px auto auto 8px; width: 56px; height: 56px; }
704 + .qy-orbit span:nth-child(3) { inset: 84px 18px auto auto; width: 62px; height: 62px; }
705 + .qy-orbit span:nth-child(4) { inset: 2px 0 auto auto; width: 44px; height: 44px; color: var(--qy-accent); }
706 + .qy-steps {
707 + display: grid;
708 + grid-template-columns: repeat(3, 1fr);
709 + gap: 14px;
710 + }
711 + .qy-step {
712 + padding: 22px;
713 + border: 1px solid var(--qy-line);
714 + border-radius: var(--qy-radius-lg);
715 + background: color-mix(in srgb, var(--qy-card) 84%, transparent);
716 + backdrop-filter: blur(20px);
717 + -webkit-backdrop-filter: blur(20px);
718 + }
719 + .qy-step-num {
720 + display: inline-flex;
721 + align-items: center;
722 + justify-content: center;
723 + width: 38px;
724 + height: 38px;
725 + margin-bottom: 22px;
726 + border: 1px solid var(--qy-line-strong);
727 + border-radius: 14px;
728 + background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.24));
729 + color: var(--qy-primary-strong);
730 + font-size: 13px;
731 + font-weight: 840;
732 + }
733 + .dark .qy-step-num,
734 + .qy-home[data-qy-theme="dark"] .qy-step-num {
735 + background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
736 + }
737 + .qy-step h3 {
738 + margin: 0;
739 + font-size: 18px;
740 + letter-spacing: -0.03em;
741 + }
742 + .qy-step p {
743 + margin: 10px 0 0;
744 + color: var(--qy-muted);
745 + font-size: 13px;
746 + line-height: 1.75;
747 + }
748 + .qy-cta {
749 + position: relative;
750 + overflow: hidden;
751 + display: grid;
752 + grid-template-columns: minmax(0, 1fr) auto;
753 + gap: 24px;
754 + align-items: center;
755 + padding: clamp(26px, 5vw, 42px);
756 + border: 1px solid var(--qy-line);
757 + border-radius: var(--qy-radius-xl);
758 + background:
759 + radial-gradient(circle at 76% 28%, rgba(116, 215, 223, 0.18), transparent 30%),
760 + radial-gradient(circle at 20% 82%, rgba(199, 159, 98, 0.13), transparent 28%),
761 + var(--qy-card-strong);
762 + box-shadow: var(--qy-shadow);
763 + backdrop-filter: blur(24px);
764 + -webkit-backdrop-filter: blur(24px);
765 + }
766 + .qy-cta h2 {
767 + margin: 0;
768 + font-size: clamp(28px, 4vw, 46px);
769 + line-height: 1.08;
770 + letter-spacing: -0.055em;
771 + }
772 + .qy-cta p {
773 + max-width: 570px;
774 + margin: 14px 0 0;
775 + color: var(--qy-muted);
776 + font-size: 14px;
777 + line-height: 1.8;
778 + }
779 + .qy-footer {
780 + display: flex;
781 + justify-content: space-between;
782 + gap: 18px;
783 + padding: 30px 0 6px;
784 + color: var(--qy-faint);
785 + font-size: 12px;
786 + line-height: 1.8;
787 + }
788 + .qy-footer-links {
789 + display: flex;
790 + flex-wrap: wrap;
791 + justify-content: flex-end;
792 + gap: 12px;
793 + }
794 + .qy-footer a:hover {
795 + color: var(--qy-text);
796 + text-decoration: underline;
797 + text-underline-offset: 4px;
798 + }
799 + @media (max-width: 920px) {
800 + .qy-nav-links { display: none; }
801 + .qy-hero { grid-template-columns: 1fr; }
802 + .qy-console { max-width: 620px; }
803 + .qy-section-head { align-items: start; flex-direction: column; }
804 + .qy-stat-strip { grid-template-columns: repeat(2, 1fr); }
805 + .qy-feature-grid { grid-template-columns: 1fr; }
806 + .qy-card-wide { grid-column: auto; }
807 + .qy-orbit { position: relative; right: auto; bottom: auto; margin-top: 24px; }
808 + .qy-steps { grid-template-columns: 1fr; }
809 + .qy-cta { grid-template-columns: 1fr; }
810 + }
811 + @media (max-width: 640px) {
812 + .qy-shell { padding-inline: 14px; }
813 + .qy-shell::before { inset-inline: -14px; border-radius: 34px; }
814 + .qy-nav { border-radius: 24px; align-items: stretch; }
815 + .qy-brand-sub { display: none; }
816 + .qy-small-button { display: none; }
817 + .qy-theme-toggle { width: 42px; padding: 0; justify-content: center; }
818 + .qy-theme-toggle span { display: none; }
819 + .qy-hero { padding-top: 82px; }
820 + .qy-title { font-size: clamp(40px, 16vw, 62px); }
821 + .qy-hero-actions { align-items: stretch; flex-direction: column; }
822 + .qy-button-primary, .qy-button-ghost { width: 100%; }
823 + .qy-metric-grid { grid-template-columns: 1fr; }
824 + .qy-model-row { grid-template-columns: 82px minmax(0, 1fr); }
825 + .qy-model-row small { display: none; }
826 + .qy-stat-strip { grid-template-columns: 1fr; padding: 10px; }
827 + .qy-card { min-height: auto; }
828 + .qy-footer { flex-direction: column; }
829 + .qy-footer-links { justify-content: flex-start; }
830 + }
831 + @media (prefers-reduced-motion: no-preference) {
832 + .qy-fade-up {
833 + animation: qyFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
834 + }
835 + .qy-delay-1 { animation-delay: 0.08s; }
836 + .qy-delay-2 { animation-delay: 0.16s; }
837 + .qy-delay-3 { animation-delay: 0.24s; }
838 + .qy-delay-4 { animation-delay: 0.32s; }
839 + .qy-console {
840 + animation: qyFloat 6s ease-in-out infinite;
841 + }
842 + }
843 + @keyframes qyFadeUp {
844 + from { opacity: 0; transform: translateY(18px); }
845 + to { opacity: 1; transform: translateY(0); }
846 + }
847 + @keyframes qyFloat {
848 + 0%, 100% { transform: translateY(0); }
849 + 50% { transform: translateY(-8px); }
850 + }
851 + </style>
852 + <div class="qy-shell">
853 + <section class="qy-hero" aria-labelledby="qy-hero-title">
854 + <div class="qy-hero-copy">
855 + <div class="qy-eyebrow qy-fade-up qy-delay-1">
856 + <span class="qy-pulse" aria-hidden="true"></span>
857 + <span>轻量、稳定、面向未来的 AI 入口</span>
858 + </div>
859 + <h1 id="qy-hero-title" class="qy-title qy-fade-up qy-delay-2">
860 + 让每一次调用，<br><span class="qy-gradient-text">都清澈而高效。</span>
861 + </h1>
862 + <p class="qy-lede qy-fade-up qy-delay-3">
863 + 清羽AI 将模型接入、用量观测、密钥管理与 API 分发整理成一个优雅的工作台。少一点复杂配置，多一点稳定体验。
864 + </p>
865 + <div class="qy-hero-actions qy-fade-up qy-delay-4">
866 + <a class="qy-button-primary" href="/dashboard">开始使用 <span aria-hidden="true">→</span></a>
867 + <a class="qy-button-ghost" href="/pricing">浏览模型广场</a>
868 + </div>
869 + <div class="qy-trust-row qy-fade-up qy-delay-4" aria-label="平台能力摘要">
870 + <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 多模型统一接入</span>
871 + <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 透明用量计费</span>
872 + <span class="qy-trust-chip"><i class="qy-dot" aria-hidden="true"></i> 细粒度密钥管理</span>
873 + </div>
874 + </div>
875 + <aside class="qy-console qy-fade-up qy-delay-3" aria-label="清羽AI 状态仪表盘示意">
876 + <div class="qy-console-inner">
877 + <div class="qy-console-top">
878 + <div class="qy-window-dots" aria-hidden="true"><span></span><span></span><span></span></div>
879 + <div class="qy-status-pill"><i class="qy-live-dot" aria-hidden="true"></i> all systems refined</div>
880 + </div>
881 + <div class="qy-console-body">
882 + <div class="qy-metric-grid">
883 + <div class="qy-mini-metric"><span>Latency</span><strong>82ms</strong></div>
884 + <div class="qy-mini-metric"><span>Uptime</span><strong>99.9%</strong></div>
885 + <div class="qy-mini-metric"><span>Routes</span><strong>50+</strong></div>
886 + </div>
887 + <div class="qy-route-card">
888 + <div class="qy-route-head">
889 + <span>model routing</span>
890 + <span>live</span>
891 + </div>
892 + <div class="qy-model-stack">
893 + <div class="qy-model-row"><strong>Claude</strong><span class="qy-bar"><i style="width: 86%"></i></span><small>86%</small></div>
894 + <div class="qy-model-row"><strong>Gemini</strong><span class="qy-bar"><i style="width: 72%"></i></span><small>72%</small></div>
895 + <div class="qy-model-row"><strong>DeepSeek</strong><span class="qy-bar"><i style="width: 64%"></i></span><small>64%</small></div>
896 + <div class="qy-model-row"><strong>Qwen</strong><span class="qy-bar"><i style="width: 58%"></i></span><small>58%</small></div>
897 + </div>
898 + </div>
899 + <div class="qy-code-card" aria-label="API 调用示例">
900 + <code><span class="qy-code-muted">POST</span> <span class="qy-code-key">/v1/chat/completions</span>
901 + {
902 + <span class="qy-code-key">"model"</span>: <span class="qy-code-string">"qingyu-auto"</span>,
903 + <span class="qy-code-key">"stream"</span>: true,
904 + <span class="qy-code-key">"quality"</span>: <span class="qy-code-string">"balanced"</span>
905 + }</code>
906 + </div>
907 + </div>
908 + </div>
909 + </aside>
910 + </section>
911 + <section class="qy-section" aria-label="平台指标">
912 + <div class="qy-stat-strip">
913 + <div class="qy-stat"><strong>50+</strong><span>主流上游服务与模型渠道统一适配</span></div>
914 + <div class="qy-stat"><strong>100+</strong><span>模型计费、限额与倍率策略灵活管理</span></div>
915 + <div class="qy-stat"><strong>10+</strong><span>调度、监控、权限与审计能力协同工作</span></div>
916 + <div class="qy-stat"><strong>24/7</strong><span>面向真实业务流量的稳定访问体验</span></div>
917 + </div>
918 + </section>
919 + <section class="qy-section" aria-labelledby="qy-feature-title">
920 + <div class="qy-section-head">
921 + <div>
922 + <p class="qy-section-kicker">core system</p>
923 + <h2 id="qy-feature-title" class="qy-section-title">高级感来自秩序，而不是堆满元素。</h2>
924 + </div>
925 + <p class="qy-section-desc">清羽AI 把复杂能力收束成清晰界面：路由清楚、账单清楚、密钥清楚，团队与个人都能快速上手。</p>
926 + </div>
927 + <div class="qy-feature-grid">
928 + <article class="qy-card qy-card-wide">
929 + <div class="qy-card-content">
930 + <span class="qy-card-label">Unified Gateway</span>
931 + <h3>一个入口，连接不同模型生态。</h3>
932 + <p>兼容常见 API 工作流，让应用无需频繁改造就能在多个模型之间切换、降级与调度。</p>
933 + <div class="qy-model-cloud" aria-label="支持模型示例">
934 + <span>OpenAI</span><span>Claude</span><span>Gemini</span><span>DeepSeek</span><span>Qwen</span><span>Llama</span>
935 + </div>
936 + </div>
937 + <div class="qy-orbit" aria-hidden="true"><span>API</span><span>Key</span><span>Log</span><span>AI</span></div>
938 + </article>
939 + <article class="qy-card">
940 + <div class="qy-card-content">
941 + <span class="qy-card-label">Cost Clarity</span>
942 + <h3>用量与成本，不再藏在黑箱里。</h3>
943 + <p>通过清晰的消耗记录、倍率配置和额度控制，让每一次请求都可追踪、可理解、可优化。</p>
944 + </div>
945 + </article>
946 + <article class="qy-card">
947 + <div class="qy-card-content">
948 + <span class="qy-card-label">Access Control</span>
949 + <h3>密钥、权限与团队协作保持克制有序。</h3>
950 + <p>为个人项目保留轻量体验，也为多人协作准备权限边界、访问限制与安全策略。</p>
951 + </div>
952 + </article>
953 + </div>
954 + </section>
955 + <section class="qy-section" aria-labelledby="qy-flow-title">
956 + <div class="qy-section-head">
957 + <div>
958 + <p class="qy-section-kicker">workflow</p>
959 + <h2 id="qy-flow-title" class="qy-section-title">三步建立自己的 AI 工作流。</h2>
960 + </div>
961 + </div>
962 + <div class="qy-steps">
963 + <article class="qy-step">
964 + <span class="qy-step-num">01</span>
965 + <h3>接入渠道</h3>
966 + <p>添加上游模型服务，配置密钥、倍率与可用范围，建立统一的模型资源池。</p>
967 + </article>
968 + <article class="qy-step">
969 + <span class="qy-step-num">02</span>
970 + <h3>分发请求</h3>
971 + <p>使用统一 API 入口连接你的应用，让模型调用、路由切换和策略调整更加平滑。</p>
972 + </article>
973 + <article class="qy-step">
974 + <span class="qy-step-num">03</span>
975 + <h3>观察优化</h3>
976 + <p>通过用量、延迟与成本数据持续调整策略，获得更稳定也更经济的调用体验。</p>
977 + </article>
978 + </div>
979 + </section>
980 + <section class="qy-section" aria-label="开始使用清羽AI">
981 + <div class="qy-cta">
982 + <div>
983 + <h2>把复杂留给系统，把清爽留给使用者。</h2>
984 + <p>清羽AI 适合个人开发者、轻量团队与 AI 应用探索者。它不追求喧闹，而是把每个必要能力打磨得足够清晰。</p>
985 + </div>
986 + <a class="qy-button-primary" href="/dashboard">进入清羽AI <span aria-hidden="true">→</span></a>
987 + </div>
988 + </section>
989 + <footer class="qy-footer">
990 + <div>
991 + <strong>清羽AI</strong><br>
992 + <span>© 2026 清羽飞扬。保留所有权利。</span>
993 + </div>
994 + <div class="qy-footer-links">
995 + <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">陕ICP备2024028531号</a>
996 + <a href="https://beian.gov.cn/portal/registerSystemInfo?recordcode=61011602000637" target="_blank" rel="noopener noreferrer">陕公网安备61011602000637号</a>
997 + </div>
998 + </footer>
999 + </div>
1000 + <script>
1001 + (() => {
1002 + const root = document.currentScript.closest('.qy-home');
1003 + if (!root) return;
1004 + const storageKey = 'qingyu-ai-theme';
1005 + const applyTheme = (theme) => {
1006 + root.setAttribute('data-qy-theme', theme);
1007 + if (theme === 'dark') document.documentElement.classList.add('dark');
1008 + if (theme === 'light') document.documentElement.classList.remove('dark');
1009 + };
1010 + const saved = localStorage.getItem(storageKey);
1011 + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
1012 + applyTheme(saved || (prefersDark ? 'dark' : 'light'));
1013 + })();
1014 + </script>
1015 + </div>
Plus récent Plus ancien

Propulsé par Opengist ⋅ Load: 48ms⋅

Français
⋅ 个人主页 ⋅ 站长博客