<?php
// ===== 动态解析 3.md =====
date_default_timezone_set('Asia/Shanghai');
$mdFile = __DIR__ . '/3.md';
$rows = [];

if (file_exists($mdFile)) {
    $lines = file($mdFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
    $inTable = false;
    
    // 去除BOM
    if (count($lines) > 0 && ord($lines[0][0]) === 0xEF) {
        $lines[0] = substr($lines[0], 3);
    }
    
    foreach ($lines as $line) {
        $trimmed = trim($line);
        if (empty($trimmed)) continue;
        
        // 找到表头
        if (strpos($trimmed, '| 序号') === 0 || $trimmed === '|序号') {
            $inTable = true;
            continue;
        }
        
        // 跳过分隔行 (|---| 或 | --- | <br /> |... 等)
        if (preg_match('/^\|?\s*-{2,}\s*\|/', $trimmed)) continue;
        
        if ($inTable && preg_match('/^\|.*\|$/', $trimmed)) {
            $trimmed = ltrim($trimmed, '|');
            $trimmed = rtrim($trimmed, '|');
            $cols = array_map('trim', explode('|', $trimmed));
            
            if (count($cols) >= 6) {
                $rows[] = [
                    'seq' => (int)$cols[0],
                    'model' => $cols[1],
                    'config' => $cols[2],
                    'color' => $cols[3],
                    'price' => $cols[4],
                    'note' => $cols[5]
                ];
            }
        }
    }
    
    // 按序号升序排序
    usort($rows, function($a, $b) {
        return $b['seq'] - $a['seq'];
    });
}

$totalCount = count($rows);
$maxSeq = count($rows) > 0 ? max(array_column($rows, 'seq')) : 0;
$lastUpdate = file_exists($mdFile) ? date('Y-m-d H:i', filemtime($mdFile)) : '未知';
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二手手机已售清单 - Nickys.cn</title>
    <link rel="icon" type="image/png" href="/web_images/Favorite.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E293B',
                        secondary: '#334155',
                        cta: '#22C55E',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        heading: ['Bodoni Moda', 'serif'],
                        body: ['Jost', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
/* ========== 表格样式 ========== */        table { width: 100%; border-collapse: collapse; font-size: 13px; }        thead th {            background: rgba(34, 197, 94, 0.12);            color: #4ADE80;            padding: 8px 8px;            text-align: left;            font-weight: 600;            font-size: 12px;            border-bottom: 1px solid rgba(255,255,255,0.06);        }        tbody td {            padding: 6px 8px;            border-bottom: 1px solid rgba(255,255,255,0.04);            color: #d1d5db;        }        tbody tr { transition: background 0.2s; }        tbody tr:hover { background: rgba(34,197,94,0.06); }        tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }.sold-table th:nth-child(4), .sold-table td:nth-child(4) { min-width: 96px; }
        /* ========== 基础 ========== */
        body { font-family: 'Jost', sans-serif; background: #0F172A; color: #F8FAFC; }
        .font-heading { font-family: 'Bodoni Moda', serif; }

        /* ========== 玻璃效果 ========== */
        .glass { background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .glass-light { background: rgba(30, 41, 59, 0.3); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); }

        /* ========== 滚动动画 ========== */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .transition-smooth { transition: all 0.3s ease; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; }
        }

        /* ========== 渐变文字 ========== */
        .gradient-text { background: linear-gradient(135deg, #22C55E, #4ADE80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .emoji-natural { -webkit-text-fill-color: initial; background: none; color: inherit; }

        /* ========== 导航链接卡片 ========== */
        .nav-link { transition: all 0.3s ease; }
        .nav-link:hover { transform: translateY(-2px); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
        .nav-link.active { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.4); color: #22C55E; }

        h2:first-of-type { margin-top: 0; }

        /* ========== 价格标记 ========== */
        .price-highlight { color: #f59e0b; font-weight: 600; }
        .price-profit { color: #60A5FA; font-weight: 600; }
        .price-strike { color: rgba(255, 255, 255, 0.3); text-decoration: line-through; font-size: 13px; }
        .tag {
            display: inline-block;
            background: rgba(34, 197, 94, 0.12);
            color: #4ADE80;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            margin: 1px 2px;
        }
        .tag-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
        .tag-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

        /* ========== 正文辅助 ========== */
        .page-header p { font-size: 16px; }
        .page-header .text-cta { font-size: 16px; letter-spacing: 0.15em; }

        /* ========== 通知 ========== */
        .notice {
            padding: 14px 18px;
            border-radius: 12px;
            font-size: 13px;
            margin-bottom: 20px;
            border: 1px solid;
        }
        .notice-info { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.15); color: #93c5fd; }
        .notice-warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.15); color: #fcd34d; }

        /* ========== 下载区 ========== */
        .download-link { font-size: 16px; }

        /* ========== 链接 ========== */
        a { color: #93c5fd; text-decoration: none; transition: color 0.2s; }
        a:hover { color: #4ADE80; }

        /* ========== 分隔线 ========== */
        hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); margin: 24px 0; }

        /* ========== 响应式 ========== */
        @media (max-width: 640px) {
            .top-nav { padding: 0 6px; gap: 2px; }
            .top-nav a { padding: 6px 10px; font-size: 13px; gap: 3px; }
            .page-wrap { padding: 16px 12px 40px; }
            .page-header { padding: 60px 12px 20px; }
            .page-header h1 { font-size: 28px; }
        }
    h2 {
            font-size: 24px;
            font-weight: 600;
            color: #4ADE80;
            margin: 32px 0 16px;
            padding-left: 14px;
            border-left: 3px solid #22C55E;
        }
        h2:first-of-type { margin-top: 0; }

        /* 已售清单备注列 */
        tbody td:last-child {
            white-space: nowrap;
            text-align: left;
            color: #d1d5db;
            font-weight: 400;
        }
        thead th:last-child {
            min-width: auto;
        }
    </style>
    <!-- 背景渐变光晕 -->
    <div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-cta/5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl"></div>
    </div>

    <!-- ═══ 顶部导航（首页风格：固定玻璃顶栏） ═══ -->
    <header class="fixed top-4 left-4 right-4 z-50">
        <div class="glass rounded-2xl px-4 py-2 max-w-6xl mx-auto flex items-center justify-between" style="backdrop-filter: blur(16px);">
            <span class="font-heading text-lg font-bold text-light whitespace-nowrap">📱 二手机</span>
            <nav class="flex items-center gap-1 overflow-x-auto">
                                    <a href="/" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        🏠 首页                    </a>
                                    <a href="2.php" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        📱 库存                    </a>
                                    <a href="3.php" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap active" 
                       style="border: 1px solid transparent;">
                        📋 已售                    </a>
                                    <a href="4.php" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        💰 杨晓龙                    </a>
                                    <a href="5.php" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        🎧 耳机                    </a>
                                    <a href="/crm/" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        📊 CRM                    </a>
                                    <a href="/debt.html" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        📋 欠款                    </a>
                                    <a href="/fapiao.html" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        📄 发票                    </a>
                                    <a href="/cleared_debts.html" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap text-gray-400 hover:text-light" 
                       style="border: 1px solid transparent;">
                        ✅ 已结清                    </a>                    </a>
                            </nav>
        </div>
    </header>

    <!-- ═══ 页面内容 ═══ -->
    <main class="pt-24 pb-12 px-6">
        <div class="page-wrap max-w-6xl mx-auto">

<div class="page-header text-center mb-8 max-w-3xl mx-auto reveal">
    <p class="text-cta font-medium tracking-widest mb-2 uppercase text-sm">Sold</p>
    <h1 class="font-heading text-3xl md:text-4xl font-bold mb-2"><span class="emoji-natural">📋</span> <span class="gradient-text">已售出手机清单</span></h1>
    <p class="text-gray-400 text-sm">已售清单（共 <?= $maxSeq ?> 条记录） · <?= $lastUpdate ?> 更新</p>
</div>

<div class="reveal glass rounded-2xl p-5 flex items-center gap-3 mb-6" style="transition-delay: 0.1s;">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2">
        <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
    </svg>
    <span class="text-gray-400 text-sm">下载源文件：</span>
    <a href="3.md" target="_blank" class="text-sm text-cta hover:text-light transition-smooth">📄 已售清单.md</a>
</div>


    <p>﻿已售出手机清单﻿﻿（按序号排序，中文排版）</p><p><a id="top"></a></p><div style="overflow-x:auto"><table class="sold-table"><thead><tr><th>序号</th><th>型号</th><th>配置</th><th>颜色</th><th>价格</th><th>备注/买家</th></tr></thead><tbody>
<?php foreach ($rows as $row): ?>
<tr><td><?= htmlspecialchars($row['seq']) ?></td><td><?= htmlspecialchars($row['model']) ?></td><td><?= htmlspecialchars($row['config']) ?></td><td><?= htmlspecialchars($row['color']) ?></td><td><?= htmlspecialchars($row['price']) ?></td><td><?= $row['note'] ?></td></tr>
<?php endforeach; ?>
</tbody></table></div><div align="right">
<p><a href="#top">↑ 回到顶部</a></p></div>
</div>
    </div>
    </main>
    <footer class="py-8 px-6 border-t border-gray-800">
        <div class="max-w-6xl mx-auto text-center text-gray-500 text-sm flex items-center justify-center gap-3">
            <span>© Nickys.cn</span>
            <span>·</span>
            <span>最后更新：<?= $lastUpdate ?></span>
            <span>·</span>
            <span>💻 by Hermes</span>
        </div>
    </footer>
    <script>
        // Reveal animations (同首页风格)
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) entry.target.classList.add("active");
            });
        }, { threshold: 0 });
        document.querySelectorAll(".reveal").forEach(el => observer.observe(el));
    </script>
</body>
</html>


