yaoqifa commited on
Commit
e72e56d
·
verified ·
1 Parent(s): 0566a8e

Update LLM/index.html

Browse files
Files changed (1) hide show
  1. LLM/index.html +463 -463
LLM/index.html CHANGED
@@ -1,463 +1,463 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>统一大模型接口网关 | Next-Gen AI Gateway</title>
7
- <style>
8
- /* --- 基础设置 --- */
9
- :root {
10
- --primary-color: #2563eb;
11
- --primary-hover: #1d4ed8;
12
- --bg-gradient: radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f8fafc 50%, #ffffff 100%);
13
- --text-main: #1f2937;
14
- --text-sub: #6b7280;
15
- --card-bg: rgba(255, 255, 255, 0.8);
16
- }
17
-
18
- * { margin: 0; padding: 0; box-sizing: border-box; }
19
-
20
- body {
21
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
22
- background: var(--bg-gradient);
23
- color: var(--text-main);
24
- min-height: 100vh;
25
- display: flex;
26
- flex-direction: column;
27
- align-items: center;
28
- overflow-x: hidden;
29
- }
30
-
31
- /* 主容器 */
32
- .container {
33
- text-align: center;
34
- max-width: 1000px;
35
- padding: 100px 20px 40px;
36
- width: 100%;
37
- position: relative;
38
- z-index: 1;
39
- }
40
-
41
- /* --- 标题样式 --- */
42
- h1 {
43
- font-size: 4rem;
44
- font-weight: 800;
45
- line-height: 1.1;
46
- margin-bottom: 24px;
47
- letter-spacing: -2px;
48
- background: linear-gradient(135deg, #1a1a1a 30%, #2563eb 100%);
49
- -webkit-background-clip: text;
50
- -webkit-text-fill-color: transparent;
51
- }
52
-
53
- @media (max-width: 768px) { h1 { font-size: 2.8rem; } }
54
-
55
- .subtitle {
56
- font-size: 1.25rem;
57
- color: var(--text-sub);
58
- margin-bottom: 50px;
59
- font-weight: 400;
60
- max-width: 600px;
61
- margin-left: auto;
62
- margin-right: auto;
63
- }
64
-
65
- /* --- API 地址框 --- */
66
- .api-box {
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- position: relative;
71
-
72
- background: rgba(255, 255, 255, 0.9);
73
- backdrop-filter: blur(10px);
74
- border: 1px solid rgba(0,0,0,0.08);
75
- padding: 16px 60px;
76
- border-radius: 16px;
77
- font-family: 'Consolas', 'Monaco', monospace;
78
- font-size: 1.1rem;
79
- color: #333;
80
- margin-bottom: 20px; /* 稍微减小底部间距,为下方链接留位置 */
81
- width: 100%;
82
- max-width: 680px;
83
- margin-left: auto;
84
- margin-right: auto;
85
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
86
- transition: transform 0.2s;
87
- /* 防止内容换行 */
88
- white-space: nowrap;
89
- }
90
-
91
- .api-box:hover { transform: translateY(-2px); }
92
-
93
- /* 新增:地址前的说明文字样式 */
94
- .url-label {
95
- color: #6b7280;
96
- font-weight: 500;
97
- margin-right: 12px;
98
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
99
- user-select: none; /* 防止用户复制时选中这个标签 */
100
- }
101
-
102
- .api-endpoint { color: var(--primary-color); font-weight: 600; }
103
-
104
- /* 移动端隐藏说明文字,防止地址显示不全 */
105
- @media (max-width: 600px) {
106
- .url-label { display: none; }
107
- .api-box { padding: 16px 45px; font-size: 0.95rem; }
108
- }
109
-
110
- .copy-btn {
111
- cursor: pointer;
112
- position: absolute;
113
- right: 20px;
114
- top: 50%;
115
- transform: translateY(-50%);
116
- color: #9ca3af;
117
- background: none;
118
- border: none;
119
- display: flex;
120
- align-items: center;
121
- justify-content: center;
122
- transition: color 0.2s;
123
- padding: 5px;
124
- }
125
- .copy-btn:hover { color: var(--primary-color); }
126
- .copy-btn svg { width: 20px; height: 20px; fill: currentColor; }
127
-
128
- /* Tooltip */
129
- #copy-tooltip {
130
- position: absolute;
131
- right: -10px;
132
- top: -40px;
133
- background-color: #1f2937;
134
- color: #fff;
135
- padding: 6px 12px;
136
- border-radius: 6px;
137
- font-size: 12px;
138
- opacity: 0;
139
- transition: opacity 0.2s, transform 0.2s;
140
- pointer-events: none;
141
- transform: translateY(5px);
142
- }
143
- #copy-tooltip.show { opacity: 1; transform: translateY(0); }
144
-
145
- /* --- 新增:文本链接区域 --- */
146
- .link-area {
147
- margin-bottom: 40px;
148
- font-size: 0.95rem;
149
- }
150
- .text-link {
151
- color: var(--text-sub);
152
- text-decoration: none;
153
- transition: color 0.2s;
154
- display: inline-flex;
155
- align-items: center;
156
- gap: 4px;
157
- }
158
- .text-link:hover {
159
- color: var(--primary-color);
160
- text-decoration: underline;
161
- }
162
-
163
- /* --- 按钮组 --- */
164
- .button-group {
165
- display: flex;
166
- justify-content: center;
167
- gap: 20px;
168
- margin-bottom: 80px;
169
- flex-wrap: wrap; /* 允许移动端换行 */
170
- }
171
-
172
- .btn {
173
- display: inline-flex;
174
- align-items: center;
175
- padding: 14px 32px;
176
- border-radius: 100px;
177
- font-weight: 600;
178
- font-size: 1.05rem;
179
- cursor: pointer;
180
- text-decoration: none;
181
- transition: all 0.3s ease;
182
- }
183
-
184
- .btn-primary {
185
- background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
186
- color: white;
187
- box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
188
- }
189
- .btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); transform: translateY(-1px); }
190
-
191
- .btn-secondary {
192
- background: linear-gradient(135deg, rgb(255,230,15) 0%, rgb(245,200,0) 100%);
193
- color: #374151;
194
- border: none;
195
- box-shadow: 0 4px 6px -1px rgba(255, 200, 0, 0.3), 0 2px 4px -1px rgba(255, 200, 0, 0.2);
196
- transition: all 0.3s ease;
197
- }
198
- .btn-secondary:hover {
199
- box-shadow: 0 10px 15px -3px rgba(255, 200, 0, 0.5);
200
- transform: translateY(-1px);
201
- }
202
-
203
- .btn-draw {
204
- background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
205
- color: white;
206
- box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2), 0 2px 4px -1px rgba(147, 51, 234, 0.1);
207
- }
208
- .btn-draw:hover {
209
- box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.4);
210
- transform: translateY(-1px);
211
- }
212
-
213
- /* --- 代码演示终端 --- */
214
- .code-showcase {
215
- text-align: left;
216
- background: #1e1e1e;
217
- border-radius: 12px;
218
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
219
- max-width: 700px;
220
- margin: 0 auto 60px;
221
- overflow: hidden;
222
- position: relative;
223
- }
224
-
225
- .terminal-header {
226
- background: #2d2d2d;
227
- padding: 10px 15px;
228
- display: flex;
229
- gap: 8px;
230
- }
231
- .dot { width: 12px; height: 12px; border-radius: 50%; }
232
- .dot.red { background: #ff5f56; }
233
- .dot.yellow { background: #ffbd2e; }
234
- .dot.green { background: #27c93f; }
235
-
236
- .code-content {
237
- padding: 20px;
238
- color: #d4d4d4;
239
- font-family: 'Consolas', monospace;
240
- font-size: 0.9rem;
241
- line-height: 1.6;
242
- overflow-x: auto;
243
- }
244
- .c-keyword { color: #c586c0; }
245
- .c-func { color: #dcdcaa; }
246
- .c-string { color: #ce9178; }
247
- .c-var { color: #9cdcfe; }
248
- .c-comment { color: #6a9955; }
249
-
250
- /* --- 特性卡片 --- */
251
- .features-grid {
252
- display: grid;
253
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
254
- gap: 20px;
255
- max-width: 900px;
256
- margin: 0 auto;
257
- }
258
-
259
- .feature-card {
260
- background: #fff;
261
- padding: 25px;
262
- border-radius: 16px;
263
- border: 1px solid #f3f4f6;
264
- text-align: left;
265
- transition: all 0.3s ease;
266
- }
267
- .feature-card:hover {
268
- transform: translateY(-5px);
269
- box-shadow: 0 10px 30px rgba(0,0,0,0.05);
270
- border-color: #e0e7ff;
271
- }
272
- .feature-icon {
273
- width: 40px;
274
- height: 40px;
275
- background: #eff6ff;
276
- color: #2563eb;
277
- border-radius: 10px;
278
- display: flex;
279
- align-items: center;
280
- justify-content: center;
281
- margin-bottom: 15px;
282
- }
283
- .feature-title { font-weight: 700; margin-bottom: 8px; color: #1f2937; }
284
- .feature-desc { font-size: 0.9rem; color: #6b7280; line-height: 1.5; }
285
-
286
- /* 背景动态光晕 */
287
- .bg-blob {
288
- position: absolute;
289
- filter: blur(80px);
290
- z-index: -1;
291
- opacity: 0.4;
292
- animation: float 10s infinite ease-in-out;
293
- }
294
- .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #e0e7ff; }
295
- .blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: #fae8ff; animation-delay: -5s; }
296
-
297
- @keyframes float {
298
- 0%, 100% { transform: translate(0, 0); }
299
- 50% { transform: translate(30px, 50px); }
300
- }
301
- </style>
302
- </head>
303
- <body>
304
-
305
- <div class="bg-blob blob-1"></div>
306
- <div class="bg-blob blob-2"></div>
307
-
308
- <div class="container">
309
- <h1>统一的<br>大模型接口网关</h1>
310
- <p class="subtitle">
311
- 兼容 OpenAI 协议的一站式 API 服务。<br>
312
- 更低的
313
- <a href="https://api.cloudapp.ink/pricing" target="_blank" class="text-link" style="font-weight: bold;color: #1d4ed8;">
314
- 价格
315
- </a>
316
- ,企业级稳定性,支持 Gemini, Claude, Grok 等模型。<br>
317
- <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=scIRP0jX5M_qE5Pyxwa0JQw3zK40AdDF&jump_from=webapi&authKey=ft+mFi+uAh311LkfOtx0ERBLGA65JuCaqFRF0qDFOJVGs8AOOHXI8iC9DptDI4K9" style="font-weight: bold;color: #1d4ed8; text-decoration: none; cursor: pointer;"><img border="0" src="" alt="" title="">点击加入售后QQ群: 762703673
318
- </a>
319
- </p>
320
-
321
- <div class="api-box" style="text-align: center;">
322
- <div id="full-url">
323
- <span class="url-label">接口地址 (Base URL):</span>
324
- <span class="api-endpoint">https://api.cloudapp.ink/v1</span>
325
- </div>
326
- <button class="copy-btn" onclick="copyText()" title="复制 Base URL">
327
- <div id="copy-tooltip">已复制!</div>
328
- <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
329
- </button>
330
- </div>
331
-
332
- <div class="link-area">
333
- <a href="https://docs.newapi.pro/zh/docs/guide/console/api-token" target="_blank" class="text-link">
334
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key transition-colors duration-200" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"></path><path d="m21 2-9.6 9.6"></path><circle cx="7.5" cy="15.5" r="5.5"></circle></svg>
335
- 如何获取 API 密钥 (Secret Key)?
336
- </a>
337
- </div>
338
-
339
- <div class="button-group">
340
- <a href="https://www.qianxun1688.com/links/79E87CC4" target="_blank" class="btn btn-primary">
341
- 自助购买兑换码
342
- </a>
343
- <a href="https://imagen.cloudapp.ink/" target="_blank" class="btn btn-draw">
344
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
345
- <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
346
- <circle cx="8.5" cy="8.5" r="1.5"></circle>
347
- <polyline points="21 15 16 10 5 21"></polyline>
348
- </svg>
349
- AI 在线绘图
350
- </a>
351
- <a href="https://m.tb.cn/h.7qFiyxF?tk=wmEvU7QwBOy MF168" target="_blank" class="btn btn-secondary">
352
- &nbsp;&nbsp;咸鱼商品链接&nbsp;&nbsp;
353
- </a>
354
- </div>
355
-
356
- <div class="code-showcase">
357
- <div class="terminal-header">
358
- <div class="dot red"></div>
359
- <div class="dot yellow"></div>
360
- <div class="dot green"></div>
361
- </div>
362
- <div class="code-content">
363
- <span class="c-comment"># 🐍 Python 示例:无缝迁移 OpenAI SDK</span><br>
364
- <span class="c-keyword">from</span> openai <span class="c-keyword">import</span> OpenAI<br><br>
365
- client = OpenAI(<br>
366
- &nbsp;&nbsp;api_key=<span class="c-string">"sk-xxxxxxxx"</span>, <span class="c-comment"># 您的密钥</span><br>
367
- &nbsp;&nbsp;base_url=<span class="c-string">"https://api.cloudapp.ink/v1"</span> <span class="c-comment"># 只需修改此处</span><br>
368
- )<br><br>
369
- response = client.chat.completions.<span class="c-func">create</span>(<br>
370
- &nbsp;&nbsp;model=<span class="c-string">"gemini-3-pro-preview"</span>,<br>
371
- &nbsp;&nbsp;messages=[{<span class="c-string">"role"</span>: <span class="c-string">"user"</span>, <span class="c-string">"content"</span>: <span class="c-string">"Hello World!"</span>}]<br>
372
- )
373
- </div>
374
- </div>
375
-
376
- <div class="features-grid">
377
- <div class="feature-card">
378
- <div class="feature-icon">
379
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg>
380
- </div>
381
- <div class="feature-title">全模型支持</div>
382
- <div class="feature-desc">一个接口聚合 Gemini, Claude, Grok 等数十种主流模型,无需切换。</div>
383
- </div>
384
- <div class="feature-card">
385
- <div class="feature-icon">
386
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
387
- </div>
388
- <div class="feature-title">高并发 & 低延迟</div>
389
- <div class="feature-desc">全球多节点 CDN 加速,企业级 QPS 支持,平均响应速度提升 50%。</div>
390
- </div>
391
- <div class="feature-card">
392
- <div class="feature-icon">
393
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5zM16 8L2 22M17.5 15H9"/></svg>
394
- </div>
395
- <div class="feature-title">极致性价比</div>
396
- <div class="feature-desc">相比官方直连,成本大幅降低。按次计费,无隐形消费,每一分钱都花在刀刃上。</div>
397
- </div>
398
- </div>
399
-
400
- </div>
401
-
402
- <script>
403
- function copyText() {
404
- const textToCopy = "https://api.cloudapp.ink/v1"; // 直接硬编码或从DOM获取
405
- const tooltip = document.getElementById('copy-tooltip');
406
-
407
- // --- 方案 A: 尝试现代 API (电脑端/有权限时有效) ---
408
- if (navigator.clipboard && navigator.clipboard.writeText) {
409
- navigator.clipboard.writeText(textToCopy)
410
- .then(() => showTooltip('已复制!'))
411
- .catch(() => tryLegacyCopy(textToCopy)); // 失败则尝试方案 B
412
- } else {
413
- tryLegacyCopy(textToCopy); // 不支持则直接尝试方案 B
414
- }
415
- }
416
-
417
- // --- 方案 B: 尝试 document.execCommand (旧版浏览器/部分Webview) ---
418
- function tryLegacyCopy(text) {
419
- const textArea = document.createElement("textarea");
420
- textArea.value = text;
421
-
422
- // 确保元素在视口内但不可见,防止移动端页面跳动
423
- textArea.style.position = "fixed";
424
- textArea.style.left = "-9999px";
425
- textArea.style.top = "0";
426
- document.body.appendChild(textArea);
427
-
428
- textArea.focus();
429
- textArea.select();
430
- textArea.setSelectionRange(0, 99999); // iOS 关键兼容代码
431
-
432
- try {
433
- const successful = document.execCommand('copy');
434
- if (successful) {
435
- showTooltip('已复制!');
436
- } else {
437
- // 如果方案 B 也失败,执行最终方案 C
438
- manualCopyFallback(text);
439
- }
440
- } catch (err) {
441
- manualCopyFallback(text);
442
- }
443
-
444
- document.body.removeChild(textArea);
445
- }
446
-
447
- // --- 方案 C: 终极降级 (针对手机端无权限 iframe) ---
448
- function manualCopyFallback(text) {
449
- // 使用 window.prompt 弹窗
450
- // 这是一个系统级弹窗,浏览器无法拦截用户从中复制内容
451
- window.prompt("请复制以下接口地址:", text);
452
- }
453
-
454
- // 显示提示气泡的辅助函数
455
- function showTooltip(message) {
456
- const tooltip = document.getElementById('copy-tooltip');
457
- tooltip.innerText = message;
458
- tooltip.classList.add('show');
459
- setTimeout(() => tooltip.classList.remove('show'), 2000);
460
- }
461
- </script>
462
- </body>
463
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>统一大模型接口网关 | Next-Gen AI Gateway</title>
7
+ <style>
8
+ /* --- 基础设置 --- */
9
+ :root {
10
+ --primary-color: #2563eb;
11
+ --primary-hover: #1d4ed8;
12
+ --bg-gradient: radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f8fafc 50%, #ffffff 100%);
13
+ --text-main: #1f2937;
14
+ --text-sub: #6b7280;
15
+ --card-bg: rgba(255, 255, 255, 0.8);
16
+ }
17
+
18
+ * { margin: 0; padding: 0; box-sizing: border-box; }
19
+
20
+ body {
21
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
22
+ background: var(--bg-gradient);
23
+ color: var(--text-main);
24
+ min-height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ /* 主容器 */
32
+ .container {
33
+ text-align: center;
34
+ max-width: 1000px;
35
+ padding: 100px 20px 40px;
36
+ width: 100%;
37
+ position: relative;
38
+ z-index: 1;
39
+ }
40
+
41
+ /* --- 标题样式 --- */
42
+ h1 {
43
+ font-size: 4rem;
44
+ font-weight: 800;
45
+ line-height: 1.1;
46
+ margin-bottom: 24px;
47
+ letter-spacing: -2px;
48
+ background: linear-gradient(135deg, #1a1a1a 30%, #2563eb 100%);
49
+ -webkit-background-clip: text;
50
+ -webkit-text-fill-color: transparent;
51
+ }
52
+
53
+ @media (max-width: 768px) { h1 { font-size: 2.8rem; } }
54
+
55
+ .subtitle {
56
+ font-size: 1.25rem;
57
+ color: var(--text-sub);
58
+ margin-bottom: 50px;
59
+ font-weight: 400;
60
+ max-width: 600px;
61
+ margin-left: auto;
62
+ margin-right: auto;
63
+ }
64
+
65
+ /* --- API 地址框 --- */
66
+ .api-box {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ position: relative;
71
+
72
+ background: rgba(255, 255, 255, 0.9);
73
+ backdrop-filter: blur(10px);
74
+ border: 1px solid rgba(0,0,0,0.08);
75
+ padding: 16px 60px;
76
+ border-radius: 16px;
77
+ font-family: 'Consolas', 'Monaco', monospace;
78
+ font-size: 1.1rem;
79
+ color: #333;
80
+ margin-bottom: 20px; /* 稍微减小底部间距,为下方链接留位置 */
81
+ width: 100%;
82
+ max-width: 680px;
83
+ margin-left: auto;
84
+ margin-right: auto;
85
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
86
+ transition: transform 0.2s;
87
+ /* 防止内容换行 */
88
+ white-space: nowrap;
89
+ }
90
+
91
+ .api-box:hover { transform: translateY(-2px); }
92
+
93
+ /* 新增:地址前的说明文字样式 */
94
+ .url-label {
95
+ color: #6b7280;
96
+ font-weight: 500;
97
+ margin-right: 12px;
98
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
99
+ user-select: none; /* 防止用户复制时选中这个标签 */
100
+ }
101
+
102
+ .api-endpoint { color: var(--primary-color); font-weight: 600; }
103
+
104
+ /* 移动端隐藏说明文字,防止地址显示不全 */
105
+ @media (max-width: 600px) {
106
+ .url-label { display: none; }
107
+ .api-box { padding: 16px 45px; font-size: 0.95rem; }
108
+ }
109
+
110
+ .copy-btn {
111
+ cursor: pointer;
112
+ position: absolute;
113
+ right: 20px;
114
+ top: 50%;
115
+ transform: translateY(-50%);
116
+ color: #9ca3af;
117
+ background: none;
118
+ border: none;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ transition: color 0.2s;
123
+ padding: 5px;
124
+ }
125
+ .copy-btn:hover { color: var(--primary-color); }
126
+ .copy-btn svg { width: 20px; height: 20px; fill: currentColor; }
127
+
128
+ /* Tooltip */
129
+ #copy-tooltip {
130
+ position: absolute;
131
+ right: -10px;
132
+ top: -40px;
133
+ background-color: #1f2937;
134
+ color: #fff;
135
+ padding: 6px 12px;
136
+ border-radius: 6px;
137
+ font-size: 12px;
138
+ opacity: 0;
139
+ transition: opacity 0.2s, transform 0.2s;
140
+ pointer-events: none;
141
+ transform: translateY(5px);
142
+ }
143
+ #copy-tooltip.show { opacity: 1; transform: translateY(0); }
144
+
145
+ /* --- 新增:文本链接区域 --- */
146
+ .link-area {
147
+ margin-bottom: 40px;
148
+ font-size: 0.95rem;
149
+ }
150
+ .text-link {
151
+ color: var(--text-sub);
152
+ text-decoration: none;
153
+ transition: color 0.2s;
154
+ display: inline-flex;
155
+ align-items: center;
156
+ gap: 4px;
157
+ }
158
+ .text-link:hover {
159
+ color: var(--primary-color);
160
+ text-decoration: underline;
161
+ }
162
+
163
+ /* --- 按钮组 --- */
164
+ .button-group {
165
+ display: flex;
166
+ justify-content: center;
167
+ gap: 20px;
168
+ margin-bottom: 80px;
169
+ flex-wrap: wrap; /* 允许移动端换行 */
170
+ }
171
+
172
+ .btn {
173
+ display: inline-flex;
174
+ align-items: center;
175
+ padding: 14px 32px;
176
+ border-radius: 100px;
177
+ font-weight: 600;
178
+ font-size: 1.05rem;
179
+ cursor: pointer;
180
+ text-decoration: none;
181
+ transition: all 0.3s ease;
182
+ }
183
+
184
+ .btn-primary {
185
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
186
+ color: white;
187
+ box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
188
+ }
189
+ .btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); transform: translateY(-1px); }
190
+
191
+ .btn-secondary {
192
+ background: linear-gradient(135deg, rgb(255,230,15) 0%, rgb(245,200,0) 100%);
193
+ color: #374151;
194
+ border: none;
195
+ box-shadow: 0 4px 6px -1px rgba(255, 200, 0, 0.3), 0 2px 4px -1px rgba(255, 200, 0, 0.2);
196
+ transition: all 0.3s ease;
197
+ }
198
+ .btn-secondary:hover {
199
+ box-shadow: 0 10px 15px -3px rgba(255, 200, 0, 0.5);
200
+ transform: translateY(-1px);
201
+ }
202
+
203
+ .btn-draw {
204
+ background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
205
+ color: white;
206
+ box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2), 0 2px 4px -1px rgba(147, 51, 234, 0.1);
207
+ }
208
+ .btn-draw:hover {
209
+ box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.4);
210
+ transform: translateY(-1px);
211
+ }
212
+
213
+ /* --- 代码演示终端 --- */
214
+ .code-showcase {
215
+ text-align: left;
216
+ background: #1e1e1e;
217
+ border-radius: 12px;
218
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
219
+ max-width: 700px;
220
+ margin: 0 auto 60px;
221
+ overflow: hidden;
222
+ position: relative;
223
+ }
224
+
225
+ .terminal-header {
226
+ background: #2d2d2d;
227
+ padding: 10px 15px;
228
+ display: flex;
229
+ gap: 8px;
230
+ }
231
+ .dot { width: 12px; height: 12px; border-radius: 50%; }
232
+ .dot.red { background: #ff5f56; }
233
+ .dot.yellow { background: #ffbd2e; }
234
+ .dot.green { background: #27c93f; }
235
+
236
+ .code-content {
237
+ padding: 20px;
238
+ color: #d4d4d4;
239
+ font-family: 'Consolas', monospace;
240
+ font-size: 0.9rem;
241
+ line-height: 1.6;
242
+ overflow-x: auto;
243
+ }
244
+ .c-keyword { color: #c586c0; }
245
+ .c-func { color: #dcdcaa; }
246
+ .c-string { color: #ce9178; }
247
+ .c-var { color: #9cdcfe; }
248
+ .c-comment { color: #6a9955; }
249
+
250
+ /* --- 特性卡片 --- */
251
+ .features-grid {
252
+ display: grid;
253
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
254
+ gap: 20px;
255
+ max-width: 900px;
256
+ margin: 0 auto;
257
+ }
258
+
259
+ .feature-card {
260
+ background: #fff;
261
+ padding: 25px;
262
+ border-radius: 16px;
263
+ border: 1px solid #f3f4f6;
264
+ text-align: left;
265
+ transition: all 0.3s ease;
266
+ }
267
+ .feature-card:hover {
268
+ transform: translateY(-5px);
269
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
270
+ border-color: #e0e7ff;
271
+ }
272
+ .feature-icon {
273
+ width: 40px;
274
+ height: 40px;
275
+ background: #eff6ff;
276
+ color: #2563eb;
277
+ border-radius: 10px;
278
+ display: flex;
279
+ align-items: center;
280
+ justify-content: center;
281
+ margin-bottom: 15px;
282
+ }
283
+ .feature-title { font-weight: 700; margin-bottom: 8px; color: #1f2937; }
284
+ .feature-desc { font-size: 0.9rem; color: #6b7280; line-height: 1.5; }
285
+
286
+ /* 背景动态光晕 */
287
+ .bg-blob {
288
+ position: absolute;
289
+ filter: blur(80px);
290
+ z-index: -1;
291
+ opacity: 0.4;
292
+ animation: float 10s infinite ease-in-out;
293
+ }
294
+ .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #e0e7ff; }
295
+ .blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: #fae8ff; animation-delay: -5s; }
296
+
297
+ @keyframes float {
298
+ 0%, 100% { transform: translate(0, 0); }
299
+ 50% { transform: translate(30px, 50px); }
300
+ }
301
+ </style>
302
+ </head>
303
+ <body>
304
+
305
+ <div class="bg-blob blob-1"></div>
306
+ <div class="bg-blob blob-2"></div>
307
+
308
+ <div class="container">
309
+ <h1>统一的<br>大模型接口网关</h1>
310
+ <p class="subtitle">
311
+ 兼容 OpenAI 协议的一站式 API 服务。<br>
312
+ 更低的
313
+ <a href="https://api.cloudapp.ink/pricing" target="_blank" class="text-link" style="font-weight: bold;color: #1d4ed8;">
314
+ 价格
315
+ </a>
316
+ ,企业级稳定性,支持 Gemini, Claude, Grok 等模型。<br>
317
+ <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=scIRP0jX5M_qE5Pyxwa0JQw3zK40AdDF&jump_from=webapi&authKey=ft+mFi+uAh311LkfOtx0ERBLGA65JuCaqFRF0qDFOJVGs8AOOHXI8iC9DptDI4K9" style="font-weight: bold;color: #1d4ed8; text-decoration: none; cursor: pointer;"><img border="0" src="" alt="" title="">点击加入售后QQ群: 762703673
318
+ </a>
319
+ </p>
320
+
321
+ <div class="api-box" style="text-align: center;">
322
+ <div id="full-url">
323
+ <span class="url-label">接口地址 (Base URL):</span>
324
+ <span class="api-endpoint">https://api.cloudapp.ink/v1</span>
325
+ </div>
326
+ <button class="copy-btn" onclick="copyText()" title="复制 Base URL">
327
+ <div id="copy-tooltip">已复制!</div>
328
+ <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
329
+ </button>
330
+ </div>
331
+
332
+ <div class="link-area">
333
+ <a href="https://docs.qq.com/doc/DSG5md25qQW9OSW1a" target="_blank" class="text-link">
334
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key transition-colors duration-200" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"></path><path d="m21 2-9.6 9.6"></path><circle cx="7.5" cy="15.5" r="5.5"></circle></svg>
335
+ 如何获取 API 密钥 (Secret Key)?
336
+ </a>
337
+ </div>
338
+
339
+ <div class="button-group">
340
+ <a href="https://www.qianxun1688.com/links/79E87CC4" target="_blank" class="btn btn-primary">
341
+ 自助购买兑换码
342
+ </a>
343
+ <a href="https://imagen.cloudapp.ink/" target="_blank" class="btn btn-draw">
344
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
345
+ <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
346
+ <circle cx="8.5" cy="8.5" r="1.5"></circle>
347
+ <polyline points="21 15 16 10 5 21"></polyline>
348
+ </svg>
349
+ AI 在线绘图
350
+ </a>
351
+ <a href="https://m.tb.cn/h.7qFiyxF?tk=wmEvU7QwBOy MF168" target="_blank" class="btn btn-secondary">
352
+ &nbsp;&nbsp;咸鱼商品链接&nbsp;&nbsp;
353
+ </a>
354
+ </div>
355
+
356
+ <div class="code-showcase">
357
+ <div class="terminal-header">
358
+ <div class="dot red"></div>
359
+ <div class="dot yellow"></div>
360
+ <div class="dot green"></div>
361
+ </div>
362
+ <div class="code-content">
363
+ <span class="c-comment"># 🐍 Python 示例:无缝迁移 OpenAI SDK</span><br>
364
+ <span class="c-keyword">from</span> openai <span class="c-keyword">import</span> OpenAI<br><br>
365
+ client = OpenAI(<br>
366
+ &nbsp;&nbsp;api_key=<span class="c-string">"sk-xxxxxxxx"</span>, <span class="c-comment"># 您的密钥</span><br>
367
+ &nbsp;&nbsp;base_url=<span class="c-string">"https://api.cloudapp.ink/v1"</span> <span class="c-comment"># 只需修改此处</span><br>
368
+ )<br><br>
369
+ response = client.chat.completions.<span class="c-func">create</span>(<br>
370
+ &nbsp;&nbsp;model=<span class="c-string">"gemini-3-pro-preview"</span>,<br>
371
+ &nbsp;&nbsp;messages=[{<span class="c-string">"role"</span>: <span class="c-string">"user"</span>, <span class="c-string">"content"</span>: <span class="c-string">"Hello World!"</span>}]<br>
372
+ )
373
+ </div>
374
+ </div>
375
+
376
+ <div class="features-grid">
377
+ <div class="feature-card">
378
+ <div class="feature-icon">
379
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg>
380
+ </div>
381
+ <div class="feature-title">全模型支持</div>
382
+ <div class="feature-desc">一个接口聚合 Gemini, Claude, Grok 等数十种主流模型,无需切换。</div>
383
+ </div>
384
+ <div class="feature-card">
385
+ <div class="feature-icon">
386
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
387
+ </div>
388
+ <div class="feature-title">高并发 & 低延迟</div>
389
+ <div class="feature-desc">全球多节点 CDN 加速,企业级 QPS 支持,平均响应速度提升 50%。</div>
390
+ </div>
391
+ <div class="feature-card">
392
+ <div class="feature-icon">
393
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5zM16 8L2 22M17.5 15H9"/></svg>
394
+ </div>
395
+ <div class="feature-title">极致性价比</div>
396
+ <div class="feature-desc">相比官方直连,成本大幅降低。按次计费,无隐形消费,每一分钱都花在刀刃上。</div>
397
+ </div>
398
+ </div>
399
+
400
+ </div>
401
+
402
+ <script>
403
+ function copyText() {
404
+ const textToCopy = "https://api.cloudapp.ink/v1"; // 直接硬编码或从DOM获取
405
+ const tooltip = document.getElementById('copy-tooltip');
406
+
407
+ // --- 方案 A: 尝试现代 API (电脑端/有权限时有效) ---
408
+ if (navigator.clipboard && navigator.clipboard.writeText) {
409
+ navigator.clipboard.writeText(textToCopy)
410
+ .then(() => showTooltip('已复制!'))
411
+ .catch(() => tryLegacyCopy(textToCopy)); // 失败则尝试方案 B
412
+ } else {
413
+ tryLegacyCopy(textToCopy); // 不支持则直接尝试方案 B
414
+ }
415
+ }
416
+
417
+ // --- 方案 B: 尝试 document.execCommand (旧版浏览器/部分Webview) ---
418
+ function tryLegacyCopy(text) {
419
+ const textArea = document.createElement("textarea");
420
+ textArea.value = text;
421
+
422
+ // 确保元素在视口内但不可见,防止移动端页面跳动
423
+ textArea.style.position = "fixed";
424
+ textArea.style.left = "-9999px";
425
+ textArea.style.top = "0";
426
+ document.body.appendChild(textArea);
427
+
428
+ textArea.focus();
429
+ textArea.select();
430
+ textArea.setSelectionRange(0, 99999); // iOS 关键兼容代码
431
+
432
+ try {
433
+ const successful = document.execCommand('copy');
434
+ if (successful) {
435
+ showTooltip('已复制!');
436
+ } else {
437
+ // 如果方案 B 也失败,执行最终方案 C
438
+ manualCopyFallback(text);
439
+ }
440
+ } catch (err) {
441
+ manualCopyFallback(text);
442
+ }
443
+
444
+ document.body.removeChild(textArea);
445
+ }
446
+
447
+ // --- 方案 C: 终极降级 (针对手机端无权限 iframe) ---
448
+ function manualCopyFallback(text) {
449
+ // 使用 window.prompt 弹窗
450
+ // 这是一个系统级弹窗,浏览器无法拦截用户从中复制内容
451
+ window.prompt("请复制以下接口地址:", text);
452
+ }
453
+
454
+ // 显示提示气泡的辅助函数
455
+ function showTooltip(message) {
456
+ const tooltip = document.getElementById('copy-tooltip');
457
+ tooltip.innerText = message;
458
+ tooltip.classList.add('show');
459
+ setTimeout(() => tooltip.classList.remove('show'), 2000);
460
+ }
461
+ </script>
462
+ </body>
463
+ </html>