<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级单科成绩排名系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        dark: '#0f172a',
                        glass: 'rgba(30, 41, 59, 0.7)',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .glass-card {
                background: rgba(30, 41, 59, 0.65);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .scroll-hidden::-webkit-scrollbar {
                display: none;
            }
            .btn-hover {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
            }
        }
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
            min-height: 100vh;
        }
    </style>
</head>
<body class="text-gray-100 p-4 md:p-8 scroll-hidden">
    <div class="max-w-5xl mx-auto">
        <!-- 头部标题 -->
        <header class="text-center mb-8">
            <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold bg-gradient-to-r from-primary to-secondary text-gradient mb-2">
                <i class="fa fa-line-chart mr-2"></i>单科成绩智能排名系统
            </h1>
            <p class="text-gray-400">高级可视化 · 自动并列排名 · 数据导出 · 分数分级标记</p>
        </header>

        <!-- 操作区卡片 -->
        <div class="glass-card rounded-2xl p-6 mb-6 shadow-xl">
            <div class="grid md:grid-cols-3 gap-4 mb-5">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">学生姓名</label>
                    <input id="stuName" type="text" placeholder="请输入姓名"
                        class="w-full bg-slate-800/60 border border-slate-600 rounded-lg px-4 py-3 outline-none focus:border-primary transition-all">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-2">单科分数 (0-100)</label>
                    <input id="stuScore" type="number" min="0" max="100" step="0.5" placeholder="例：95.5"
                        class="w-full bg-slate-800/60 border border-slate-600 rounded-lg px-4 py-3 outline-none focus:border-primary transition-all">
                </div>
                <div class="flex items-end gap-3">
                    <button onclick="addStudent()"
                        class="btn-hover flex-1 bg-gradient-to-r from-primary to-secondary py-3 rounded-lg font-medium">
                        <i class="fa fa-plus mr-1"></i>添加学生
                    </button>
                    <button onclick="clearAll()"
                        class="btn-hover bg-red-500/70 px-5 py-3 rounded-lg font-medium">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <button onclick="sortDesc()" class="btn-hover bg-slate-700/70 px-4 py-2 rounded-lg text-sm">
                    <i class="fa fa-arrow-down mr-1"></i>分数降序
                </button>
                <button onclick="sortAsc()" class="btn-hover bg-slate-700/70 px-4 py-2 rounded-lg text-sm">
                    <i class="fa fa-arrow-up mr-1"></i>分数升序
                </button>
                <button onclick="exportData()" class="btn-hover bg-emerald-600/70 px-4 py-2 rounded-lg text-sm">
                    <i class="fa fa-download mr-1"></i>导出成绩单
                </button>
            </div>
        </div>

        <!-- 数据统计面板 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-3xl text-primary font-bold" id="totalNum">0</div>
                <div class="text-gray-400 text-sm">总人数</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-3xl text-green-400 font-bold" id="avgScore">0.00</div>
                <div class="text-gray-400 text-sm">平均分</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-3xl text-amber-400 font-bold" id="maxScore">0</div>
                <div class="text-gray-400 text-sm">最高分</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-3xl text-rose-400 font-bold" id="minScore">0</div>
                <div class="text-gray-400 text-sm">最低分</div>
            </div>
        </div>

        <!-- 成绩表格 -->
        <div class="glass-card rounded-2xl p-6 shadow-xl overflow-hidden">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fa fa-table mr-2 text-secondary"></i>排名成绩单
            </h2>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-700">
                            <th class="py-3 px-2 text-left">排名</th>
                            <th class="py-3 px-2 text-left">姓名</th>
                            <th class="py-3 px-2 text-left">单科分数</th>
                            <th class="py-3 px-2 text-left">等级</th>
                            <th class="py-3 px-2 text-left">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td colspan="5" class="py-10 text-center text-gray-500">暂无学生数据，请添加学生</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        let studentArr = [];

        // 添加学生
        function addStudent() {
            const name = document.getElementById('stuName').value.trim();
            const score = Number(document.getElementById('stuScore').value);
            if (!name) return alert('请输入学生姓名');
            if (isNaN(score) || score < 0 || score > 100) return alert('分数必须是0-100数字');
            studentArr.push({ name, score });
            document.getElementById('stuName').value = '';
            document.getElementById('stuScore').value = '';
            sortDesc();
            renderTable();
            updateStats();
        }

        // 渲染表格
        function renderTable() {
            const tb = document.getElementById('tableBody');
            if (studentArr.length === 0) {
                tb.innerHTML = `<tr><td colspan="5" class="py-10 text-center text-gray-500">暂无学生数据，请添加学生</td></tr>`;
                return;
            }
            let html = '';
            studentArr.forEach((item, idx) => {
                let rank = idx + 1;
                if (idx > 0 && studentArr[idx].score === studentArr[idx - 1].score) rank = '';
                // 分数等级配色
                let level, color;
                if (item.score >= 90) { level = '优秀'; color = 'text-emerald-400'; }
                else if (item.score >= 80) { level = '良好'; color = 'text-blue-400'; }
                else if (item.score >= 60) { level = '及格'; color = 'text-amber-400'; }
                else { level = '不及格'; color = 'text-red-400'; }
                html += `
                <tr class="border-b border-slate-800 hover:bg-slate-800/40 transition-all">
                    <td class="py-3 px-2">${rank || studentArr[idx-1].rank}</td>
                    <td class="py-3 px-2">${item.name}</td>
                    <td class="py-3 px-2 font-medium">${item.score}</td>
                    <td class="py-3 px-2 ${color}">${level}</td>
                    <td class="py-3 px-2">
                        <button onclick="delRow(${idx})" class="text-red-400 hover:text-red-300">
                            <i class="fa fa-times"></i> 删除
                        </button>
                    </td>
                </tr>`;
                studentArr[idx].rank = rank || studentArr[idx-1].rank;
            })
            tb.innerHTML = html;
        }

        // 删除单条
        function delRow(i) {
            studentArr.splice(i, 1);
            sortDesc();
            renderTable();
            updateStats();
        }

        // 清空全部
        function clearAll() {
            if (!confirm('确定清空所有数据？')) return;
            studentArr = [];
            renderTable();
            updateStats();
        }

        // 降序
        function sortDesc() {
            studentArr.sort((a, b) => b.score - a.score);
            renderTable();
        }
        // 升序
        function sortAsc() {
            studentArr.sort((a, b) => a.score - b.score);
            renderTable();
        }

        // 更新统计面板
        function updateStats...