Blame for LLM/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统一大模型接口网关 | Next-Gen AI Gateway</title>
    <style>
        /* --- 基础设置 --- */
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-gradient: radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f8fafc 50%, #ffffff 100%);
            --text-main: #1f2937;
            --text-sub: #6b7280;
            --card-bg: rgba(255, 255, 255, 0.8);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--bg-gradient);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
        }

        /* 主容器 */
        .container {
            text-align: center;
            max-width: 1000px;
            padding: 100px 20px 40px;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        /* --- 标题样式 --- */
        h1 {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            letter-spacing: -2px;
            background: linear-gradient(135deg, #1a1a1a 30%, #2563eb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        @media (max-width: 768px) { h1 { font-size: 2.8rem; } }

        .subtitle {
            font-size: 1.25rem;
            color: var(--text-sub);
            margin-bottom: 50px;
            font-weight: 400;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- API 地址框 --- */
        .api-box {
            display: flex;
            align-items: center;
            justify-content: center; 
            position: relative;
            
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0,0,0,0.08);
            padding: 16px 60px; 
            border-radius: 16px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 20px; /* 稍微减小底部间距，为下方链接留位置 */
            width: 100%;
            max-width: 680px; 
            margin-left: auto; 
            margin-right: auto;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            transition: transform 0.2s;
            /* 防止内容换行 */
            white-space: nowrap; 
        }

        .api-box:hover { transform: translateY(-2px); }
        
        /* 新增：地址前的说明文字样式 */
        .url-label {
            color: #6b7280;
            font-weight: 500;
            margin-right: 12px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            user-select: none; /* 防止用户复制时选中这个标签 */
        }

        .api-endpoint { color: var(--primary-color); font-weight: 600; }

        /* 移动端隐藏说明文字，防止地址显示不全 */
        @media (max-width: 600px) {
            .url-label { display: none; }
            .api-box { padding: 16px 45px; font-size: 0.95rem; }
        }

        .copy-btn {
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
            padding: 5px;
        }
        .copy-btn:hover { color: var(--primary-color); }
        .copy-btn svg { width: 20px; height: 20px; fill: currentColor; }

        /* Tooltip */
        #copy-tooltip {
            position: absolute;
            right: -10px;
            top: -40px;
            background-color: #1f2937;
            color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: none;
            transform: translateY(5px);
        }
        #copy-tooltip.show { opacity: 1; transform: translateY(0); }

        /* --- 新增：文本链接区域 --- */
        .link-area {
            margin-bottom: 40px;
            font-size: 0.95rem;
        }
        .text-link {
            color: var(--text-sub);
            text-decoration: none;
            transition: color 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .text-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

        /* --- 按钮组 --- */
        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 80px;
            flex-wrap: wrap; /* 允许移动端换行 */
        }

        .btn {
            display: inline-flex;
            align-items: center;
            padding: 14px 32px;
            border-radius: 100px;
            font-weight: 600;
            font-size: 1.05rem;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
        }
        .btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); transform: translateY(-1px); }

        .btn-secondary {
			background: linear-gradient(135deg, rgb(255,230,15) 0%, rgb(245,200,0) 100%);
			color: #374151;
			border: none;
			box-shadow: 0 4px 6px -1px rgba(255, 200, 0, 0.3), 0 2px 4px -1px rgba(255, 200, 0, 0.2);
			transition: all 0.3s ease;
		}
		.btn-secondary:hover { 
			box-shadow: 0 10px 15px -3px rgba(255, 200, 0, 0.5); 
			transform: translateY(-1px); 
		}
		
		.btn-draw {
            background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2), 0 2px 4px -1px rgba(147, 51, 234, 0.1);
        }
        .btn-draw:hover { 
            box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.4); 
            transform: translateY(-1px); 
        }

        /* --- 代码演示终端 --- */
        .code-showcase {
            text-align: left;
            background: #1e1e1e; 
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
            max-width: 700px;
            margin: 0 auto 60px;
            overflow: hidden;
            position: relative;
        }
        
        .terminal-header {
            background: #2d2d2d;
            padding: 10px 15px;
            display: flex;
            gap: 8px;
        }
        .dot { width: 12px; height: 12px; border-radius: 50%; }
        .dot.red { background: #ff5f56; }
        .dot.yellow { background: #ffbd2e; }
        .dot.green { background: #27c93f; }
        
        .code-content {
            padding: 20px;
            color: #d4d4d4;
            font-family: 'Consolas', monospace;
            font-size: 0.9rem;
            line-height: 1.6;
            overflow-x: auto;
        }
        .c-keyword { color: #c586c0; } 
        .c-func { color: #dcdcaa; } 
        .c-string { color: #ce9178; } 
        .c-var { color: #9cdcfe; } 
        .c-comment { color: #6a9955; } 

        /* --- 特性卡片 --- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        .feature-card {
            background: #fff;
            padding: 25px;
            border-radius: 16px;
            border: 1px solid #f3f4f6;
            text-align: left;
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-color: #e0e7ff;
        }
        .feature-icon {
            width: 40px;
            height: 40px;
            background: #eff6ff;
            color: #2563eb;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        .feature-title { font-weight: 700; margin-bottom: 8px; color: #1f2937; }
        .feature-desc { font-size: 0.9rem; color: #6b7280; line-height: 1.5; }

        /* 背景动态光晕 */
        .bg-blob {
            position: absolute;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.4;
            animation: float 10s infinite ease-in-out;
        }
        .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #e0e7ff; }
        .blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: #fae8ff; animation-delay: -5s; }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(30px, 50px); }
        }
    </style>
</head>
<body>

    <div class="bg-blob blob-1"></div>
    <div class="bg-blob blob-2"></div>

    <div class="container">
        <h1>统一的<br>大模型接口网关</h1>
        <p class="subtitle">
            兼容 OpenAI 协议的一站式 API 服务。<br>
            更低的
			<a href="https://api.cloudapp.ink/pricing" target="_blank" class="text-link" style="font-weight: bold;color: #1d4ed8;">
                价格
            </a>
			，企业级稳定性，支持 Gemini, Claude, Grok 等模型。<br>
			<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
			</a>
        </p>

        <div class="api-box" style="text-align: center;">
            <div id="full-url">
                <span class="url-label">接口地址 (Base URL):</span>
                <span class="api-endpoint">https://api.cloudapp.ink/v1</span>
            </div>
            <button class="copy-btn" onclick="copyText()" title="复制 Base URL">
                <div id="copy-tooltip">已复制!</div>
                <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>
            </button>
        </div>

        <div class="link-area">
            <a href="https://docs.qq.com/doc/DSG5md25qQW9OSW1a" target="_blank" class="text-link">
                <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>
                如何获取 API 密钥 (Secret Key)？
            </a>
        </div>

        <div class="button-group">
            <a href="https://www.qianxun1688.com/links/79E87CC4" target="_blank" class="btn btn-primary">
                自助购买兑换码
            </a>
			<a href="https://imagen.cloudapp.ink/" target="_blank" class="btn btn-draw">
                <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;">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
                AI 在线绘图
            </a>
            <a href="https://m.tb.cn/h.iLay9ZR?tk=9QvW5gcYVsU MF278" target="_blank" class="btn btn-secondary">
                &nbsp;&nbsp;咸鱼商品链接&nbsp;&nbsp;
            </a>
        </div>

        <div class="code-showcase">
            <div class="terminal-header">
                <div class="dot red"></div>
                <div class="dot yellow"></div>
                <div class="dot green"></div>
            </div>
            <div class="code-content">
                <span class="c-comment"># 🐍 Python 示例：无缝迁移 OpenAI SDK</span><br>
                <span class="c-keyword">from</span> openai <span class="c-keyword">import</span> OpenAI<br><br>
                client = OpenAI(<br>
                &nbsp;&nbsp;api_key=<span class="c-string">"sk-xxxxxxxx"</span>, <span class="c-comment"># 您的密钥</span><br>
                &nbsp;&nbsp;base_url=<span class="c-string">"https://api.cloudapp.ink/v1"</span> <span class="c-comment"># 只需修改此处</span><br>
                )<br><br>
                response = client.chat.completions.<span class="c-func">create</span>(<br>
                &nbsp;&nbsp;model=<span class="c-string">"gemini-3-pro-preview"</span>,<br>
                &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>
                )
            </div>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg>
                </div>
                <div class="feature-title">全模型支持</div>
                <div class="feature-desc">一个接口聚合 Gemini, Claude, Grok 等数十种主流模型，无需切换。</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <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>
                </div>
                <div class="feature-title">高并发 & 低延迟</div>
                <div class="feature-desc">全球多节点 CDN 加速，企业级 QPS 支持，平均响应速度提升 50%。</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <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>
                </div>
                <div class="feature-title">极致性价比</div>
                <div class="feature-desc">相比官方直连，成本大幅降低。按次计费，无隐形消费，每一分钱都花在刀刃上。</div>
            </div>
        </div>

    </div>

    <script>
		function copyText() {
			const textToCopy = "https://api.cloudapp.ink/v1"; // 直接硬编码或从DOM获取
			const tooltip = document.getElementById('copy-tooltip');

			// --- 方案 A: 尝试现代 API (电脑端/有权限时有效) ---
			if (navigator.clipboard && navigator.clipboard.writeText) {
				navigator.clipboard.writeText(textToCopy)
					.then(() => showTooltip('已复制!'))
					.catch(() => tryLegacyCopy(textToCopy)); // 失败则尝试方案 B
			} else {
				tryLegacyCopy(textToCopy); // 不支持则直接尝试方案 B
			}
		}

		// --- 方案 B: 尝试 document.execCommand (旧版浏览器/部分Webview) ---
		function tryLegacyCopy(text) {
			const textArea = document.createElement("textarea");
			textArea.value = text;
			
			// 确保元素在视口内但不可见，防止移动端页面跳动
			textArea.style.position = "fixed"; 
			textArea.style.left = "-9999px";
			textArea.style.top = "0";
			document.body.appendChild(textArea);
			
			textArea.focus();
			textArea.select();
			textArea.setSelectionRange(0, 99999); // iOS 关键兼容代码

			try {
				const successful = document.execCommand('copy');
				if (successful) {
					showTooltip('已复制!');
				} else {
					// 如果方案 B 也失败，执行最终方案 C
					manualCopyFallback(text);
				}
			} catch (err) {
				manualCopyFallback(text);
			}

			document.body.removeChild(textArea);
		}

		// --- 方案 C: 终极降级 (针对手机端无权限 iframe) ---
		function manualCopyFallback(text) {
			// 使用 window.prompt 弹窗
			// 这是一个系统级弹窗，浏览器无法拦截用户从中复制内容
			window.prompt("请复制以下接口地址：", text);
		}

		// 显示提示气泡的辅助函数
		function showTooltip(message) {
			const tooltip = document.getElementById('copy-tooltip');
			tooltip.innerText = message;
			tooltip.classList.add('show');
			setTimeout(() => tooltip.classList.remove('show'), 2000);
		}
	</script>
</body>
</html>