File size: 38,841 Bytes
a98c1cf 47c600c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Center - 专业的API服务平台</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary: #0A2463;
--primary-light: #1E40AF;
--secondary: #DB2777;
--accent: #10B981;
--dark: #1F2937;
--light: #F9FAFB;
}
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.gradient-bg {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.code-block {
font-family: 'Fira Code', monospace;
background: rgba(17, 24, 39, 0.9);
border-left: 4px solid var(--accent);
}
.nav-scroll {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.dark-mode {
display: none;
}
.dark .dark-mode {
display: block;
}
.dark .light-mode {
display: none;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0A2463',
'primary-light': '#1E40AF',
secondary: '#DB2777',
accent: '#10B981',
dark: '#1F2937',
light: '#F9FAFB'
},
fontFamily: {
sans: ['Inter', 'sans-serif']
}
}
}
}
</script>
</head>
<body class="bg-light text-gray-800 dark:bg-dark dark:text-gray-200 transition-colors duration-300">
<!-- 导航栏 -->
<nav class="fixed w-full z-50 transition-all duration-300 py-4" id="navbar">
<div class="container mx-auto px-6 flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-primary dark:text-white flex items-center">
<i data-feather="box" class="mr-2"></i>
API Center
</a>
</div>
<div class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-primary dark:hover:text-accent transition-colors">功能</a>
<a href="#documentation" class="hover:text-primary dark:hover:text-accent transition-colors">文档</a>
<a href="#pricing" class="hover:text-primary dark:hover:text-accent transition-colors">定价</a>
<a href="#test" class="hover:text-primary dark:hover:text-accent transition-colors">测试</a>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700">
<i data-feather="sun" class="light-mode"></i>
<i data-feather="moon" class="dark-mode"></i>
</button>
<a href="#" class="hidden md:block px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary-light transition-colors">
登录
</a>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20" id="vanta-bg">
<div class="container mx-auto px-6 z-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2" data-aos="fade-right">
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-primary dark:text-white">构建下一代应用</h1>
<p class="text-xl mb-8 text-gray-600 dark:text-gray-300">强大、可靠且易于集成的API服务，助力您的业务快速增长</p>
<div class="flex flex-wrap gap-4">
<a href="#documentation" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-light transition-colors flex items-center">
开始使用
<i data-feather="arrow-right" class="ml-2"></i>
</a>
<a href="#test" class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
测试API
</a>
</div>
</div>
<div class="md:w-1/2 mt-10 md:mt-0" data-aos="fade-left">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 code-block">
<div class="flex space-x-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<pre class="text-sm text-white overflow-x-auto">
<code>// 简单的API调用示例
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/v1/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
}
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
};</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- 功能特性 -->
<section class="py-20 bg-white dark:bg-gray-900" id="features">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-primary dark:text-white mb-4">强大功能</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">我们的API提供全方位的服务，满足您的各种开发需求</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4">
<i data-feather="zap" class="text-blue-600 dark:text-blue-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">高性能</h3>
<p class="text-gray-600 dark:text-gray-300">毫秒级响应时间，99.9%的可用性保证，确保您的应用始终流畅运行</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="200">
<div class="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4">
<i data-feather="shield" class="text-green-600 dark:text-green-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">安全可靠</h3>
<p class="text-gray-600 dark:text-gray-300">端到端加密，OAuth 2.0认证，符合GDPR标准，保护您的数据安全</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="300">
<div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-4">
<i data-feather="code" class="text-purple-600 dark:text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">开发者友好</h3>
<p class="text-gray-600 dark:text-gray-300">详细的文档，丰富的SDK，实时调试工具，让集成变得简单快捷</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="400">
<div class="w-12 h-12 rounded-lg bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4">
<i data-feather="trending-up" class="text-red-600 dark:text-red-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">可扩展</h3>
<p class="text-gray-600 dark:text-gray-300">随着业务增长无缝扩展，支持从初创公司到企业级应用的各类需求</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="500">
<div class="w-12 h-12 rounded-lg bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
<i data-feather="globe" class="text-yellow-600 dark:text-yellow-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">全球覆盖</h3>
<p class="text-gray-600 dark:text-gray-300">全球多个数据中心，智能路由，确保世界各地的用户都能获得最佳体验</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="600">
<div class="w-12 h-12 rounded-lg bg-pink-100 dark:bg-pink-900 flex items-center justify-center mb-4">
<i data-feather="bar-chart" class="text-pink-600 dark:text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">数据分析</h3>
<p class="text-gray-600 dark:text-gray-300">实时监控和分析工具，帮助您了解API使用情况并优化业务决策</p>
</div>
</div>
</div>
</section>
<!-- API文档部分 -->
<section class="py-20 bg-gray-50 dark:bg-gray-800" id="documentation">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-primary dark:text-white mb-4">详细文档</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">清晰的指南和示例代码，帮助您快速上手</p>
</div>
<div class="grid lg:grid-cols-4 gap-8">
<div class="lg:col-span-1">
<div class="sticky top-24 bg-white dark:bg-gray-900 rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold mb-4 text-primary dark:text-white">API目录</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">入门指南</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">认证</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">用户管理</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">支付处理</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">数据分析</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">错误代码</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">最佳实践</a></li>
</ul>
</div>
</div>
<div class="lg:col-span-3">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 mb-8" data-aos="fade-up">
<h3 class="text-2xl font-semibold mb-4 text-primary dark:text-white">快速入门</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">只需几个简单步骤，即可开始使用我们的API服务</p>
<div class="mb-6">
<h4 class="text-lg font-medium mb-2 text-primary dark:text-white">1. 获取API密钥</h4>
<p class="text-gray-600 dark:text-gray-300 mb-4">注册账户后，您可以在控制面板中找到您的专属API密钥</p>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
<code class="text-sm text-gray-800 dark:text-gray-200">API_KEY = "your_api_key_here"</code>
</div>
</div>
<div class="mb-6">
<h4 class="text-lg font-medium mb-2 text-primary dark:text-white">2. 发起第一个请求</h4>
<p class="text-gray-600 dark:text-gray-300 mb-4">使用您喜欢的编程语言发起HTTP请求</p>
<div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
<pre class="text-sm text-white">
<code>import requests
url = "https://api.example.com/v1/users"
headers = {
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}
response = requests.get(url, headers=headers)
data = response.json()
print(data)</code></pre>
</div>
</div>
<div>
<h4 class="text-lg font-medium mb-2 text-primary dark:text-white">3. 处理响应</h4>
<p class="text-gray-600 dark:text-gray-300 mb-4">API返回标准化的JSON响应，包含请求结果和数据</p>
<div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
<pre class="text-sm text-white">
<code>{
"status": "success",
"data": {
"users": [
{
"id": "user_123",
"name": "John Doe",
"email": "john@example.com"
}
]
},
"pagination": {
"page": 1,
"per_page": 10,
"total": 1
}
}</code></pre>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-2xl font-semibold mb-4 text-primary dark:text-white">SDK支持</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">我们提供多种编程语言的SDK，简化集成过程</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-blue-600 dark:text-blue-400 mb-2"></i>
<p class="text-sm font-medium">JavaScript</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-yellow-600 dark:text-yellow-400 mb-2"></i>
<p class="text-sm font-medium">Python</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-red-600 dark:text-red-400 mb-2"></i>
<p class="text-sm font-medium">Ruby</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-purple-600 dark:text-purple-400 mb-2"></i>
<p class="text-sm font-medium">PHP</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-green-600 dark:text-green-400 mb-2"></i>
<p class="text-sm font-medium">Go</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-indigo-600 dark:text-indigo-400 mb-2"></i>
<p class="text-sm font-medium">Java</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-pink-600 dark:text-pink-400 mb-2"></i>
<p class="text-sm font-medium">Swift</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
<i data-feather="code" class="w-8 h-8 mx-auto text-gray-600 dark:text-gray-400 mb-2"></i>
<p class="text-sm font-medium">.NET</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 定价部分 -->
<section class="py-20 bg-white dark:bg-gray-900" id="pricing">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-primary dark:text-white mb-4">灵活定价</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">选择适合您业务需求的方案，从小型项目到企业级应用</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="text-center mb-6">
<h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">入门版</h3>
<div class="flex items-baseline justify-center">
<span class="text-4xl font-bold text-primary dark:text-white">免费</span>
</div>
<p class="text-gray-600 dark:text-gray-300">适合个人开发者和小型项目</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">每月1,000次API调用</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">基础支持</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">单一数据源</span>
</li>
<li class="flex items-center opacity-50">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">高级分析</span>
</li>
<li class="flex items-center opacity-50">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">优先支持</span>
</li>
</ul>
<button class="w-full py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg font-medium">
当前计划
</button>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover border-2 border-primary dark:border-accent relative" data-aos="fade-up">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<span class="bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full">最受欢迎</span>
</div>
<div class="text-center mb-6">
<h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">专业版</h3>
<div class="flex items-baseline justify-center">
<span class="text-4xl font-bold text-primary dark:text-white">¥199</span>
<span class="text-gray-600 dark:text-gray-300 ml-1">/月</span>
</div>
<p class="text-gray-600 dark:text-gray-300">适合中小型企业和成长型项目</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">每月50,000次API调用</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">优先支持</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">多数据源选择</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">基础分析功能</span>
</li>
<li class="flex items-center opacity-50">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">自定义集成</span>
</li>
</ul>
<button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-light transition-colors">
升级计划
</button>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover" data-aos="fade-up" data-aos-delay="200">
<div class="text-center mb-6">
<h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">企业版</h3>
<div class="flex items-baseline justify-center">
<span class="text-4xl font-bold text-primary dark:text-white">定制</span>
</div>
<p class="text-gray-600 dark:text-gray-300">适合大型企业和关键业务应用</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">无限API调用</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">24/7专属支持</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">全球数据中心</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">高级分析仪表板</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
<span class="text-gray-600 dark:text-gray-300">自定义集成和功能</span>
</li>
</ul>
<button class="w-full py-3 border border-primary text-primary rounded-lg font-medium hover:bg-primary hover:text-white transition-colors">
联系销售
</button>
</div>
</div>
</div>
</section>
<!-- API测试区域 -->
<section class="py-20 bg-gray-50 dark:bg-gray-800" id="test">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-primary dark:text-white mb-4">API测试台</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">无需注册即可体验我们的API功能</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-right">
<h3 class="text-xl font-semibold mb-4 text-primary dark:text-white">请求参数</h3>
<div class="mb-6">
<label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">API端点</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<option>GET /v1/users</option>
<option>GET /v1/users/{id}</option>
<option>POST /v1/users</option>
<option>PUT /v1/users/{id}</option>
<option>DELETE /v1/users/{id}</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">请求头</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="text" value="Content-Type" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
<input type="text" value="application/json" class="flex-1 px-4 py-2 border border-gray-300 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
</div>
<div class="flex items-center">
<input type="text" value="Authorization" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
<input type="text" value="Bearer demo_key" class="flex-1 px-4 py-2 border border-gray-300 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">请求体 (JSON)</label>
<textarea class="w-full h-32 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white" placeholder='{"name": "John Doe", "email": "john@example.com"}'>{
"name": "测试用户",
"email": "test@example.com"
}</textarea>
</div>
<button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-light transition-colors flex items-center justify-center">
<i data-feather="send" class="mr-2"></i>
发送请求
</button>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-left">
<h3 class="text-xl font-semibold mb-4 text-primary dark:text-white">响应结果</h3>
<div class="mb-4 flex items-center justify-between">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">状态:</span>
<span class="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full dark:bg-green-900 dark:text-green-200">200 OK</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">耗时:</span>
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">142ms</span>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
<pre class="text-sm text-white">
<code>{
"status": "success",
"data": {
"id": "user_test_123",
"name": "测试用户",
"email": "test@example.com",
"created_at": "2023-06-15T08:30:00Z",
"updated_at": "2023-06-15T08:30:00Z"
}
}</code></pre>
</div>
<div class="mt-6">
<h4 class="text-lg font-medium mb-2 text-primary dark:text-white">响应头</h4>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto">
<pre class="text-sm text-gray-800 dark:text-gray-200">
Content-Type: application/json
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 99
X-RateLimit-Reset: 1686814200</pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8">
<div>
<a href="#" class="text-2xl font-bold text-white flex items-center mb-4">
<i data-feather="box" class="mr-2"></i>
API Center
</a>
<p class="text-gray-400 mb-6">为开发者提供强大可靠的API服务，助力创新应用的快速开发。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i data-feather="linkedin"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">产品</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">功能</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">用例</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">定价</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">文档</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">支持</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">社区论坛</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">状态页面</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">公司</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">博客</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors"> careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">合作伙伴</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">© 2023 API Center. 保留所有权利。</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">隐私政策</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">服务条款</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Cookie政策</a>
</div>
</div>
</div>
</footer>
<script>
// 初始化AOS动画
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// 初始化Feather Icons
feather.replace();
// 初始化Vanta.js背景
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x1e40af,
color2: 0x0a2463,
size: 0.8,
backgroundColor: 0xf9fafb
});
// 滚动时导航栏样式变化
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('nav-scroll', 'py-2');
} else {
navbar.classList.remove('nav-scroll', 'py-2');
}
});
// 暗黑模式切换
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
// 检查本地存储或系统偏好
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
themeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
});
</script>
</body>
</html>
|