<!-- 引入 Tailwind CSS 和 FontAwesome -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<!-- 引入 Chart.js 用于绘制图表 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 引入 Chart.js 数据标签插件 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<style type="text/tailwindcss">
    /* 自定义背景和动画 */
    body { position: relative; min-height: 100vh; background-color: #667eea; }
    body::before {
        content: ''; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
        background-size: 300% 300%;
        animation: final-gradient-shift 15s ease infinite;
        z-index: -1; will-change: background-position;
    }
    @keyframes final-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    /* 自定义滚动条样式 */
    .custom-scrollbar::-webkit-scrollbar { height: 8px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
</style>

<main class="container mx-auto p-4 sm:p-6 md:p-8">
    <h1 class="text-3xl md:text-5xl font-bold text-center mb-8 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
        可视化 AI 大模型对比
    </h1>
    
    <!-- 图表容器 (JS将控制其布局) -->
    <div id="charts-container" class="grid grid-cols-1 gap-8 mb-8">
        <div id="benchmark-chart-wrapper" class="bg-black/20 backdrop-blur-lg border border-white/20 p-4 rounded-2xl shadow-lg min-h-[400px] hidden">
            <canvas id="benchmarkChart"></canvas>
        </div>
        <div id="price-chart-wrapper" class="bg-black/20 backdrop-blur-lg border border-white/20 p-4 rounded-2xl shadow-lg min-h-[400px] hidden">
            <canvas id="apiPriceChart"></canvas>
        </div>
    </div>

    <!-- 主表格容器 -->
    <div id="comparison-container">
        <!-- 加载状态 -->
        <div id="loading-indicator" class="flex flex-col items-center justify-center h-64 bg-black/20 backdrop-blur-md rounded-2xl">
            <i class="fas fa-spinner fa-spin fa-3x text-white"></i>
            <p class="mt-4 text-xl text-white">正在加载模型数据，请稍候...</p>
            <p class="mt-2 text-sm text-gray-300">首次加载可能需要几秒钟</p>
        </div>
    </div>
</main>

<!-- 页脚占位符 -->
<div id="footer-placeholder" class="h-16"></div>