Änderungen von NewAPI自定义主页代码 - 清羽飞扬の代码片段

1

+

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

+

853

+

854

+

855

+

856

+

857

+

<span>轻量、稳定、面向未来的 AI 入口</span>

858

+

</div>

859

+

860

+

让每一次调用，<br><span class="qy-gradient-text">都清澈而高效。</span>

861

+

</h1>

862

+

863

+

清羽AI 将模型接入、用量观测、密钥管理与 API 分发整理成一个优雅的工作台。少一点复杂配置，多一点稳定体验。

864

+

</p>

865

+

866

+

867

+

<a class="qy-button-ghost" href="/pricing">浏览模型广场</a>

868

+

</div>

869

+

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

+

876

+

877

+

878

+

879

+

<div class="qy-status-pill"><i class="qy-live-dot" aria-hidden="true"></i> all systems refined</div>

880

+

</div>

881

+

882

+

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

+

888

+

889

+

<span>model routing</span>

890

+

891

+

</div>

892

+

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

+

897

+

</div>

898

+

</div>

899

+

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

+

912

+

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

+

920

+

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

+

928

+

929

+

930

+

<span class="qy-card-label">Unified Gateway</span>

931

+

<h3>一个入口，连接不同模型生态。</h3>

932

+

<p>兼容常见 API 工作流，让应用无需频繁改造就能在多个模型之间切换、降级与调度。</p>

933

+

934

+

<span>OpenAI</span><span>Claude</span><span>Gemini</span><span>DeepSeek</span><span>Qwen</span><span>Llama</span>

935

+

</div>

936

+

</div>

937

+

938

+

</article>

939

+

940

+

941

+

<span class="qy-card-label">Cost Clarity</span>

942

+

<h3>用量与成本，不再藏在黑箱里。</h3>

943

+

<p>通过清晰的消耗记录、倍率配置和额度控制，让每一次请求都可追踪、可理解、可优化。</p>

944

+

</div>

945

+

</article>

946

+

947

+

948

+

<span class="qy-card-label">Access Control</span>

949

+

<h3>密钥、权限与团队协作保持克制有序。</h3>

950

+

<p>为个人项目保留轻量体验，也为多人协作准备权限边界、访问限制与安全策略。</p>

951

+

</div>

952

+

</article>

953

+

</div>

954

+

</section>

955

+

956

+

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

+

963

+

964

+

965

+

966

+

<p>添加上游模型服务，配置密钥、倍率与可用范围，建立统一的模型资源池。</p>

967

+

</article>

968

+

969

+

970

+

971

+

<p>使用统一 API 入口连接你的应用，让模型调用、路由切换和策略调整更加平滑。</p>

972

+

</article>

973

+

974

+

975

+

976

+

<p>通过用量、延迟与成本数据持续调整策略，获得更稳定也更经济的调用体验。</p>

977

+

</article>

978

+

</div>

979

+

</section>

980

+

981

+

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

+

990

+

<div>

991

+

992

+

993

+

</div>

994

+

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

+

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>

LiuShen / NewAPI自定义主页代码

LiuShen hat die Gist bearbeitet 1 day ago. Zu Änderung gehen