<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快点API - 专业接口服务平台 | 免费API接口调用 | 数据接口服务</title>
    <meta name="description" content="快点API提供稳定可靠的接口服务平台，包含免费API接口调用、数据接口、开发接口等服务，助力开发者快速构建应用。">
    <meta name="keywords" content="API接口,免费API,数据接口,接口服务,开发接口,接口调用">
    <!-- Bootstrap 5 CSS -->
    <link href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
        }
        
        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 4rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 1rem 1rem;
        }
        
        .api-card {
            transition: all 0.3s ease;
            border: none;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .api-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        
        .card-text {
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .method-badge {
            font-weight: bold;
            border-radius: 0.5rem;
        }
        
        .btn-outline-primary {
            border-radius: 0.5rem;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem 0;
        }
        
        .api-icon {
            font-size: 2rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
        }
        
        .stats-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 1.5rem;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stats-card:hover {
            transform: translateY(-5px);
        }
        
        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: white;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="bi bi-lightning-charge fs-3 me-2"></i>
                <span class="fw-bold">快点API</span>
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <!-- <li class="nav-item mx-2">
                        <a class="nav-link" href="#">API文档</a>
                    </li> -->
                    <!-- <li class="nav-item mx-2">
                        <a class="nav-link" href="#">价格</a>
                    </li> -->
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="#footer-about">关于</a>
                    </li>
                    <!-- <li class="nav-item ms-2">
                        <a class="btn btn-outline-light btn-sm" href="#">登录</a>
                    </li> -->
                </ul>
            </div>
        </div>
    </nav>

    <div class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-3">专业API接口服务平台</h1>
            <p class="lead mb-4">提供稳定可靠的接口服务，助力开发者快速构建应用</p>
            <!-- <div class="d-flex justify-content-center gap-3">
                <button class="btn btn-light btn-lg px-4">开始使用</button>
                <button class="btn btn-outline-light btn-lg px-4">查看文档</button>
            </div> -->
        </div>
    </div>

    <div class="container">
        <div class="row mb-5">
            <div class="col-md-4 mb-4">
                <div class="stats-card">
                    <div class="feature-icon">
                        <i class="bi bi-rocket"></i>
                    </div>
                    <div class="stats-number" id="api-count">0</div>
                    <p class="mb-0">可用API接口</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="stats-card">
                    <div class="feature-icon">
                        <i class="bi bi-lightning"></i>
                    </div>
                    <div class="stats-number" id="daily-calls">0</div>
                    <p class="mb-0">日调用次数</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="stats-card">
                    <div class="feature-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <div class="stats-number">99.9%</div>
                    <p class="mb-0">服务可用性</p>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-lg-8">
                <h2 class="mb-3">API接口列表</h2>
                <p class="text-muted">提供各类实用API接口服务，支持多种应用场景</p>
            </div>
            <div class="col-lg-4 d-flex align-items-end justify-content-lg-end">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索API..." id="search-api">
                    <button class="btn btn-outline-primary" type="button">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="row" id="api-container">
            <?php
            // 读取API信息JSON文件
            $jsonFile = 'api_info.json';
            $jsonContent = file_get_contents($jsonFile);
            $apiData = json_decode($jsonContent, true);
            $apis = $apiData['apis'] ?? [];
            
            // 输出API卡片
            foreach ($apis as $api) {
                $apiId = 'api-' . md5($api['path']);
                // Replace match expression with compatible array lookup
                $methodMap = [
                    'GET' => 'bg-success',
                    'POST' => 'bg-primary',
                    'PUT' => 'bg-warning',
                    'DELETE' => 'bg-danger'
                ];
                $methodClass = $methodMap[strtoupper($api['method'])] ?? 'bg-secondary';
                // 获取当前网站URL组件
                $scheme = $_SERVER['REQUEST_SCHEME'] ?? 'http';
                $host = $_SERVER['HTTP_HOST'] ?? '';
                $fullUrl = $scheme . '://' . $host . $api['path'];
                
                // 读取调用次数
                $relativePath = ltrim($api['path'], '/');
                $counterFile = dirname($relativePath) . '/counter.dat';
                $callCount = 0;
                if (file_exists($counterFile)) {
                    $callCount = (int)trim(file_get_contents($counterFile));
                }
            ?>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 api-card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title mb-0"><?php echo htmlspecialchars($api['name']); ?></h5>
                                <span class="badge <?php echo $methodClass; ?> method-badge"><?php echo htmlspecialchars($api['method']); ?></span>
                            </div>
                            <p class="text-muted mb-2">
                                <small><i class="bi bi-link-45deg"></i> <?php echo htmlspecialchars($fullUrl);  ?></small>
                            </p>
                            <p class="text-muted mb-2">
                                <small><i class="bi bi-eye"></i> 调用次数: <?php echo $callCount; ?></small>
                            </p>
                            
                            <div class="mt-3">
                                <h6 class="card-subtitle mb-2 text-muted">接口描述</h6>
                                <p class="card-text"><?php echo htmlspecialchars($api['description']); ?></p>
                                
                                <?php if (!empty($api['params'])): ?>
                                <button class="btn btn-sm btn-outline-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#<?php echo $apiId; ?>-details" aria-expanded="false" aria-controls="<?php echo $apiId; ?>-details">
                                    查看请求参数
                                </button>
                                <?php endif; ?>
                                
                                <div class="collapse" id="<?php echo $apiId; ?>-details">
                                    <?php if (!empty($api['params'])): ?>
                                    <div class="mt-3">
                                        <h6 class="card-subtitle mb-2 text-muted">请求参数</h6>
                                        <ul class="list-group list-group-flush">
                                            <?php foreach ($api['params'] as $param): ?>
                                            <li class="list-group-item p-3">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <code><?php echo htmlspecialchars($param['name']); ?></code>
                                                    <span class="badge <?php echo $param['required'] ? 'bg-danger' : 'bg-secondary'; ?>">
                                                        <?php echo $param['required'] ? '必填' : '可选'; ?>
                                                    </span>
                                                </div>
                                                <div class="mt-1 text-muted small">
                                                    <strong>类型:</strong> <?php echo htmlspecialchars($param['type']); ?>
                                                </div>
                                                <?php if (!empty($param['description'])): ?>
                                                <div class="mt-1 text-sm">
                                                    <strong>描述:</strong> <?php echo htmlspecialchars($param['description']); ?>
                                                </div>
                                                <?php endif; ?>
                                            </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between">
                            <small class="text-muted">
                                <i class="bi bi-box-arrow-up-right"></i>
                                <a href="<?php echo htmlspecialchars($api['path']); ?>" target="_blank" class="text-decoration-none">访问接口</a>
                            </small>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>

    <footer class="footer mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4" id="footer-about">
                    <h5 class="text-white mb-3">关于我们</h5>
                    <p class="text-light">专业API接口服务平台，提供稳定可靠的接口服务，助力开发者快速构建应用。</p>
                    <div class="text-light">
                        <div>© <?php echo date('Y'); ?> 快点API</div>
                    </div>
                </div>
                <div class="col-md-2 mb-4">
                    <h5 class="text-white mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-light text-decoration-none">API文档</a></li>
                        <li class="mb-2"><a href="#" class="text-light text-decoration-none">使用教程</a></li>
                        <li class="mb-2"><a href="#" class="text-light text-decoration-none">价格方案</a></li>
                        <li class="mb-2"><a href="#" class="text-light text-decoration-none">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h5 class="text-white mb-3">友情链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="https://quickso.cn" class="text-light text-decoration-none">快点搜</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-4">
                    <h5 class="text-white mb-3">联系方式</h5>
                    <ul class="list-unstyled text-light">
                        <li class="mb-2"><i class="bi bi-envelope me-2"></i> admin@huangetech.com</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS -->
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新API计数和调用次数
        document.addEventListener('DOMContentLoaded', function() {
            const apiCount = document.querySelectorAll('.api-card').length;
            document.getElementById('api-count').textContent = apiCount;
            
            // 获取并显示实际的日调用次数
            fetch('get-counter.php')
                .then(response => response.json())
                .then(data => {
                    const callCount = data.count || 0;
                    const formattedCount = callCount > 1000 ? (callCount / 1000).toFixed(1) + 'K+' : callCount;
                    document.getElementById('daily-calls').textContent = formattedCount;
                })
                .catch(error => console.error('Error fetching counter:', error));

            // 添加搜索功能
            const searchInput = document.getElementById('search-api');
            const apiCards = document.querySelectorAll('.api-card');
            
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                
                apiCards.forEach(card => {
                    const apiName = card.querySelector('.card-title').textContent.toLowerCase();
                    const apiDescription = card.querySelector('.card-text').textContent.toLowerCase();
                    const apiUrl = card.querySelector('.text-muted small').textContent.toLowerCase();
                    
                    if (apiName.includes(searchTerm) || apiDescription.includes(searchTerm) || apiUrl.includes(searchTerm)) {
                        card.closest('.col-md-6').style.display = '';
                    } else {
                        card.closest('.col-md-6').style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>