feat: Enhance sponsor page with improved layout, search functionality, and dynamic filters

sponsor.html

@@ -12,28 +12,69 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         .sponsor-hero {
-            padding: 120px 20px 60px;
+            padding: 140px 20px 50px;
             text-align: center;
-            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,113,227,0.05) 100%);
+            background: radial-gradient(circle at center, rgba(0,113,227,0.08) 0%, rgba(255,255,255,0) 70%);
+            position: relative;
+            overflow: hidden;
         }
         
         .sponsor-hero h1 {
-            font-size: 48px;
+            font-size: 56px;
             font-weight: 800;
-            margin-bottom: 16px;
+            margin-bottom: 24px;
             background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
+        }
+
+        .hero-subtitle {
+            font-size: 18px;
+            color: var(--text-secondary);
+            margin-top: 16px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
         }
 
         .total-donations {
-            font-size: 24px;
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(20px);
+            padding: 20px 40px;
+            border-radius: var(--radius-large);
+            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
+            border: 1px solid rgba(255,255,255,0.6);
+            transform: translateY(0);
+            transition: transform 0.3s ease;
+        }
+        
+        .total-donations:hover {
+            transform: translateY(-5px);
+        }
+
+        .counter-label {
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
             color: var(--text-secondary);
-            font-weight: 500;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        .counter-value {
+            font-size: 42px;
+            font-weight: 800;
+            color: var(--brand-green);
+            font-feature-settings: "tnum";
+            font-variant-numeric: tabular-nums;
         }
 
         .sponsor-container {
-            max-width: 1000px;
+            max-width: 1100px;
             margin: 0 auto;
             padding: 40px 20px;
         }
@@ -45,68 +86,287 @@
             text-align: center;
         }
 
+        /* Top Donors Podium */
+        .top-donors-section {
+            margin-bottom: 60px;
+        }
+
+        .podium-container {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            gap: 20px;
+            padding: 40px 0;
+            min-height: 300px;
+        }
+
+        .podium-spot {
+            background: white;
+            border-radius: var(--radius-medium);
+            padding: 20px;
+            width: 220px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+            position: relative;
+            transition: transform 0.3s ease;
+            text-align: center;
+        }
+
+        .podium-spot:hover {
+            transform: translateY(-10px);
+            z-index: 2;
+        }
+
+        .podium-rank {
+            width: 40px;
+            height: 40px;
+            background: #f0f0f0;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            margin-bottom: 12px;
+            position: absolute;
+            top: -20px;
+            border: 4px solid var(--bg-color);
+        }
+
+        /* Gold */
+        .podium-spot.rank-1 {
+            height: 260px;
+            border: 2px solid rgba(255, 215, 0, 0.3);
+            background: linear-gradient(180deg, rgba(255,215,0,0.05) 0%, rgba(255,255,255,1) 100%);
+            order: 2; /* Center */
+        }
+        .podium-spot.rank-1 .podium-rank { background: #FFD700; color: #fff; box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4); }
+        .podium-spot.rank-1 .donor-avatar { border-color: #FFD700; width: 80px; height: 80px; }
+
+        /* Silver */
+        .podium-spot.rank-2 {
+            height: 220px;
+            border: 2px solid rgba(192, 192, 192, 0.3);
+            order: 1; /* Left */
+        }
+        .podium-spot.rank-2 .podium-rank { background: #C0C0C0; color: #fff; }
+        
+        /* Bronze */
+        .podium-spot.rank-3 {
+            height: 200px;
+            border: 2px solid rgba(205, 127, 50, 0.3);
+            order: 3; /* Right */
+        }
+        .podium-spot.rank-3 .podium-rank { background: #CD7F32; color: #fff; }
+
+        .donor-avatar {
+            width: 64px;
+            height: 64px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            margin-bottom: 12px;
+            background-color: #f0f0f0;
+            object-fit: cover;
+        }
+
+        .podium-name {
+            font-weight: 700;
+            font-size: 18px;
+            margin-bottom: 4px;
+            word-break: break-all;
+        }
+
+        .podium-total {
+            color: var(--brand-green);
+            font-weight: 600;
+            font-size: 16px;
+        }
+        
+        /* Controls */
+        .controls-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+
+        .search-box {
+            position: relative;
+            width: 100%;
+            max-width: 400px;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 12px 20px 12px 44px;
+            border-radius: 99px;
+            border: 1px solid rgba(0,0,0,0.1);
+            background: white;
+            font-size: 16px;
+            outline: none;
+            transition: all 0.2s;
+        }
+
+        .search-box input:focus {
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
+        }
+
+        .search-box i {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-secondary);
+        }
+
+        .filter-tags {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        .filter-tag {
+            padding: 8px 16px;
+            border-radius: 99px;
+            border: none;
+            background: white;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+        }
+
+        .filter-tag:hover {
+            transform: translateY(-1px);
+            background: #fafafa;
+        }
+
+        .filter-tag.active {
+            background: var(--text-primary);
+            color: white;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
         /* Timeline / Recent List Section */
         .recent-section {
-            background: white;
-            border-radius: var(--radius-large);
-            padding: 40px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
+            /* background: white; */ /* Removing background for cleaner look */
+            /* border-radius: var(--radius-large); */
+            /* padding: 40px; */
+            /* box-shadow: 0 4px 20px rgba(0,0,0,0.04); */
         }
 
         .donation-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
             gap: 20px;
         }
 
         .donation-card {
-            background: var(--bg-color);
-            padding: 20px;
+            background: white;
+            padding: 24px;
             border-radius: var(--radius-medium);
             transition: var(--transition);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+            position: relative;
+            overflow: hidden;
+            border: 1px solid rgba(0,0,0,0.03);
+            animation: fadeInUp 0.5s ease backwards;
+        }
+
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
         .donation-card:hover {
-            transform: scale(1.02);
-            background: #fff;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+            border-color: transparent;
         }
 
         .donation-header {
             display: flex;
             justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 16px;
+        }
+        
+        .donor-info {
+            display: flex;
             align-items: center;
-            margin-bottom: 12px;
+            gap: 12px;
+        }
+        
+        .mini-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #f0f0f0;
         }
 
         .donor-name {
-            font-weight: 600;
+            font-weight: 700;
             font-size: 16px;
+            line-height: 1.2;
         }
 
         .donation-amount {
             color: var(--brand-green);
-            font-weight: 700;
+            font-weight: 800;
+            font-size: 18px;
+            background: rgba(52, 199, 89, 0.1);
+            padding: 4px 10px;
+            border-radius: 8px;
         }
 
         .donation-purpose {
-            font-size: 14px;
-            color: var(--text-secondary);
-            margin-bottom: 8px;
+            font-size: 13px;
+            color: var(--text-primary);
+            background: var(--bg-color);
+            padding: 6px 12px;
+            border-radius: 6px;
+            display: inline-block;
+            margin-bottom: 12px;
+            align-self: flex-start;
         }
 
         .donation-date {
             font-size: 12px;
             color: #999;
             text-align: right;
+            margin-top: auto;
+            border-top: 1px solid rgba(0,0,0,0.05);
+            padding-top: 12px;
         }
 
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .sponsor-hero h1 { font-size: 32px; }
+            .counter-value { font-size: 32px; }
+            .podium-container {
+                 flex-direction: column;
+                 align-items: center;
+                 gap: 30px;
+            }
+            .podium-spot {
+                width: 100%;
+                max-width: 300px;
+                order: initial !important; /* Reset order for mobile stack */
+                height: auto !important; /* Reset height */
+            }
+            .podium-rank {
+                position: relative;
+                top: 0;
+                margin-top: -30px;
+            }
         }
     </style>
 </head>
@@ -151,17 +411,36 @@
 
     <div class="sponsor-hero">
         <h1>感谢每一位支持者</h1>
-        <div class="total-donations" id="total-amount-display">累计获得赞助: 计算中...</div>
+        <div class="total-donations">
+            <span class="counter-label">累计获得赞助</span>
+            <span id="total-amount-display" class="counter-value">计算中...</span>
+        </div>
+        <p class="hero-subtitle">因为有你们，白鹿原才能走得更远。</p>
     </div>
 
     <div class="sponsor-container">
         
+        <!-- Controls -->
+        <div class="controls-section">
+            <h2 class="section-title">❤️ 赞助列表</h2>
+            <div class="search-box">
+                <i class="fas fa-search"></i>
+                <input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
+            </div>
+            <div class="filter-tags" id="project-filters">
+                <button class="filter-tag active" data-project="all">全部</button>
+                <!-- JS injected filters -->
+            </div>
+        </div>
+
         <!-- Recent Donations -->
         <div class="recent-section">
-            <h2 class="section-title">❤️ 最近赞助</h2>
             <div class="donation-grid" id="donation-list">
                 <!-- JS will inject cards here -->
             </div>
+            <div id="no-results" style="display: none; text-align: center; color: var(--text-secondary); padding: 40px;">
+                没有找到匹配的记录
+            </div>
         </div>
 
     </div>

sponsor_script.js

@@ -1,7 +1,38 @@
+let allSponsors = [];
+let grandTotal = 0;
+let filterState = { search: '', project: 'all' };
+
 document.addEventListener('DOMContentLoaded', () => {
     fetchSponsorsData();
+    setupListeners();
 });
 
+function setupListeners() {
+    const searchInput = document.getElementById('sponsor-search');
+    const filterContainer = document.getElementById('project-filters');
+
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            filterState.search = e.target.value.toLowerCase().trim();
+            applyFilters();
+        });
+    }
+
+    if (filterContainer) {
+        filterContainer.addEventListener('click', (e) => {
+            if (e.target.classList.contains('filter-tag')) {
+                // Update active class
+                document.querySelectorAll('.filter-tag').forEach(btn => btn.classList.remove('active'));
+                e.target.classList.add('active');
+                
+                // Update filter state
+                filterState.project = e.target.dataset.project;
+                applyFilters();
+            }
+        });
+    }
+}
+
 async function fetchSponsorsData() {
     try {
         const response = await fetch('sponsors.txt');
@@ -13,7 +44,8 @@ async function fetchSponsorsData() {
         
         const sponsors = [];
         const userTotals = {};
-        let grandTotal = 0;
+        const projects = new Set();
+        grandTotal = 0;
 
         lines.forEach(line => {
             const parts = line.split(',');
@@ -27,6 +59,7 @@ async function fetchSponsorsData() {
                 if (!isNaN(amount)) {
                     sponsors.push({ name, project, amount, date });
                     grandTotal += amount; 
+                    projects.add(project);
 
                     if (userTotals[name]) {
                         userTotals[name] += amount;
@@ -37,36 +70,117 @@ async function fetchSponsorsData() {
             }
         });
 
-        // Update Total
-        const totalDisplay = document.getElementById('total-amount-display');
-        if (totalDisplay) {
-            totalDisplay.innerText = `累计获得赞助: ¥${grandTotal.toFixed(2)}`;
-        }
+        allSponsors = [...sponsors].reverse(); // Start with newest
 
-        // Recent Donations Logic
-        // Original list is chronological (oldest to newest), reverse it for newest first
-        const recentSponsors = [...sponsors].reverse();
-        renderDonationGrid(recentSponsors);
+        // Animate Total
+        animateValue(grandTotal);
+
+        // Render everything
+        renderFilters(Array.from(projects));
+        applyFilters(); // Renders the grid initially
 
     } catch (error) {
         console.error('Error loading sponsors:', error);
         const grid = document.getElementById('donation-list');
-        if(grid) grid.innerHTML = '<p>加载数据失败</p>';
+        if(grid) grid.innerHTML = '<div style="text-align:center; padding: 40px; color: var(--text-secondary); grid-column: 1/-1;">加载数据失败，请刷新重试</div>';
     }
 }
 
-function renderDonationGrid(sponsors) {
-    const container = document.getElementById('donation-list');
+function animateValue(end) {
+    const obj = document.getElementById('total-amount-display');
+    if (!obj) return;
+    
+    // Simple count up
+    let startTimestamp = null;
+    const duration = 2000;
+    const start = 0;
+
+    const step = (timestamp) => {
+        if (!startTimestamp) startTimestamp = timestamp;
+        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+        // Easing out Quart
+        const easeProgress = 1 - Math.pow(1 - progress, 4);
+        
+        const current = Math.floor(easeProgress * (end - start) + start);
+        
+        obj.innerHTML = `¥${current.toLocaleString('en-US')}`;
+        
+        if (progress < 1) {
+            window.requestAnimationFrame(step);
+        } else {
+            obj.innerHTML = `¥${end.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+        }
+    };
+    window.requestAnimationFrame(step);
+}
+
+function renderFilters(projects) {
+    const container = document.getElementById('project-filters');
     if (!container) return;
 
-    container.innerHTML = sponsors.map(s => `
-        <div class="donation-card">
-            <div class="donation-header">
-                <span class="donor-name">${s.name}</span>
-                <span class="donation-amount">¥${s.amount.toFixed(2)}</span>
-            </div>
-            <div class="donation-purpose">${s.project}</div>
-            <div class="donation-date">${s.date}</div>
-        </div>
-    `).join('');
+    // Remove existing project buttons, keep "All"
+    const existingButtons = container.querySelectorAll('button:not([data-project="all"])');
+    existingButtons.forEach(btn => btn.remove());
+    
+    // Add project buttons
+    projects.forEach(proj => {
+        if (!proj) return;
+        const btn = document.createElement('button');
+        btn.className = 'filter-tag';
+        btn.textContent = proj;
+        btn.dataset.project = proj;
+        container.appendChild(btn);
+    });
 }
+
+function applyFilters() {
+    const { search, project } = filterState;
+    const grid = document.getElementById('donation-list');
+    const noResults = document.getElementById('no-results');
+    
+    if (!grid) return;
+    
+    const filtered = allSponsors.filter(item => {
+        const matchesProject = project === 'all' || item.project === project;
+        const matchesSearch = item.name.toLowerCase().includes(search);
+        return matchesProject && matchesSearch;
+    });
+
+    grid.innerHTML = '';
+
+    if (filtered.length === 0) {
+        if (noResults) noResults.style.display = 'block';
+        return;
+    }
+    
+    if (noResults) noResults.style.display = 'none';
+
+    filtered.forEach((item, index) => {
+        const card = document.createElement('div');
+        card.className = 'donation-card';
+        // Max delay 1s to prevent long waits on huge lists
+        const delay = Math.min(index * 0.05, 1);
+        card.style.animationDelay = `${delay}s`;
+
+        const avatarUrl = `https://minotar.net/helm/${item.name}/64.png`;
+
+        card.innerHTML = `
+            <div class="donation-header">
+                <div class="donor-info">
+                    <img src="${avatarUrl}" class="mini-avatar" onerror="this.src='https://minotar.net/helm/MHF_Steve/64.png'" alt="${item.name}">
+                    <div class="donor-name">${item.name}</div>
+                </div>
+                <div class="donation-amount">¥${item.amount}</div>
+            </div>
+            
+            <div style="flex-grow: 1; display: flex; flex-direction: column;">
+                <div class="donation-purpose">${item.project}</div>
+                <div class="donation-date">
+                    <i class="far fa-clock" style="margin-right: 4px;"></i>${item.date}
+                </div>
+            </div>
+        `;
+        grid.appendChild(card);
+    });
+}
+