feat: Add sponsor page and update navigation links for sponsorship

2026-04-23 02:30:41 +08:00 · 2026-02-27 10:28:25 +08:00
parent e3f2daa686
commit b885cdc6e2
5 changed files with 283 additions and 60 deletions
--- a/index.html
+++ b/index.html
@@ -93,6 +93,7 @@
                <a href="https://mcphoto.lunadeer.cn/">相册</a>
                <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
                <a href="/stats.html">数据</a>
+                <a href="/sponsor.html">赞助</a>
            </div>
            <div class="nav-cta-container">
                <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
@@ -108,6 +109,7 @@
            <a href="https://mcphoto.lunadeer.cn/">相册</a>
            <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
            <a href="/stats.html">数据</a>
+            <a href="/sponsor.html">赞助</a>
        </div>
    </div>

@@ -243,7 +245,7 @@
                <!-- Top 3 sponsors will be injected here by JS -->
            </div>
            <div class="sponsors-action">
-                <button id="view-sponsors-btn" class="view-sponsors-btn">查看赞助列表</button>
+                <a href="/sponsor.html" class="view-sponsors-btn">查看赞助列表</a>
            </div>
        </div>
    </section>
@@ -258,29 +260,6 @@
        </div>
    </section>

-    <!-- Sponsors Modal -->
-    <div id="sponsors-modal" class="modal">
-        <div class="modal-content">
-            <span class="close-modal">&times;</span>
-            <h2>赞助列表</h2>
-            <div class="sponsors-list-container">
-                <table id="sponsors-table">
-                    <thead>
-                        <tr>
-                            <th>用户</th>
-                            <th>项目</th>
-                            <th>金额</th>
-                            <th>日期</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <!-- Full list will be injected here -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
    <footer>
        <div class="container">
            <div class="footer-content">
--- a/script.js
+++ b/script.js
@@ -26,7 +26,7 @@ function copyIp() {
 document.addEventListener('DOMContentLoaded', () => {
    fetchSponsors();
    fetchCrowdfunding();
-    setupModal();
+    // setupModal(); // Removed, modal is gone
    fetchServerStatus();
    startRuntimeTimer();
    setupMobileMenu();
@@ -238,7 +238,7 @@ async function fetchSponsors() {
        })).sort((a, b) => b.total - a.total);

        renderTopSponsors(sortedUsers.slice(0, 3));
-        renderSponsorsTable(sponsors);
+        // renderSponsorsTable(sponsors); // Removed as table is now on sponsor.html

    } catch (error) {
        console.error('Error loading sponsors:', error);
@@ -258,38 +258,5 @@ function renderTopSponsors(topUsers) {
    `).join('');
 }

-function renderSponsorsTable(sponsors) {
-    const tbody = document.querySelector('#sponsors-table tbody');
-    // Sort by date descending (newest first) or keep original order? 
-    // Usually original order in file is chronological. Let's reverse it to show newest first.
-    const reversedSponsors = [...sponsors].reverse();
+/* Removed renderSponsorsTable and setupModal as they are no longer used on index page */

-    tbody.innerHTML = reversedSponsors.map(s => `
-        <tr>
-            <td>${s.name}</td>
-            <td>${s.project}</td>
-            <td>¥${s.amount.toFixed(2)}</td>
-            <td>${s.date}</td>
-        </tr>
-    `).join('');
-}
-
-function setupModal() {
-    const modal = document.getElementById('sponsors-modal');
-    const btn = document.getElementById('view-sponsors-btn');
-    const span = document.getElementsByClassName('close-modal')[0];
-
-    btn.onclick = function() {
-        modal.style.display = "flex";
-    }
-
-    span.onclick = function() {
-        modal.style.display = "none";
-    }
-
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-    }
-}
--- a/sponsor.html
+++ b/sponsor.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>赞助榜 - 白鹿原 Minecraft 服务器</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <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=Noto+Sans+SC:wght@400;500;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <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;
+            text-align: center;
+            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,113,227,0.05) 100%);
+        }
+        
+        .sponsor-hero h1 {
+            font-size: 48px;
+            font-weight: 800;
+            margin-bottom: 16px;
+            background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .total-donations {
+            font-size: 24px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .sponsor-container {
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        .section-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        /* 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);
+        }
+
+        .donation-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+        }
+
+        .donation-card {
+            background: var(--bg-color);
+            padding: 20px;
+            border-radius: var(--radius-medium);
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .donation-card:hover {
+            transform: scale(1.02);
+            background: #fff;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        }
+
+        .donation-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .donor-name {
+            font-weight: 600;
+            font-size: 16px;
+        }
+
+        .donation-amount {
+            color: var(--brand-green);
+            font-weight: 700;
+        }
+
+        .donation-purpose {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+        }
+
+        .donation-date {
+            font-size: 12px;
+            color: #999;
+            text-align: right;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .sponsor-hero h1 { font-size: 32px; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="nav-content">
+            <button class="mobile-toggle" id="mobile-toggle" aria-label="菜单">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="logo">
+                <a href="/">
+                    <img src="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png" alt="白鹿原 Minecraft 服务器 Logo">
+                </a>
+            </div>
+            <div class="nav-links desktop-only">
+                <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
+                <a href="https://mcmap.lunadeer.cn/">地图</a>
+                <a href="https://mcphoto.lunadeer.cn/">相册</a>
+                <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
+                <a href="/stats.html">数据</a>
+                <a href="/sponsor.html" class="active" style="color: var(--text-primary); opacity: 1;">赞助</a>
+            </div>
+            <div class="nav-cta-container">
+                <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
+            </div>
+        </div>
+        
+        <!-- Mobile Menu Overlay -->
+        <div class="mobile-menu" id="mobile-menu">
+            <div class="mobile-nav-links">
+                <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
+                <a href="https://mcmap.lunadeer.cn/">地图</a>
+                <a href="https://mcphoto.lunadeer.cn/">相册</a>
+                <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
+                <a href="/stats.html">数据</a>
+                <a href="/sponsor.html">赞助列表</a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="sponsor-hero">
+        <h1>感谢每一位支持者</h1>
+        <div class="total-donations" id="total-amount-display">累计获得赞助: 计算中...</div>
+    </div>
+
+    <div class="sponsor-container">
+        
+        <!-- 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>
+
+    </div>
+
+    <footer style="text-align: center; padding: 40px; color: var(--text-secondary); font-size: 12px; border-top: 1px solid rgba(0,0,0,0.05); margin-top: 60px;">
+        <p>© 2026 白鹿原 Minecraft 服务器. All rights reserved.</p>
+    </footer>
+
+    <script src="sponsor_script.js"></script>
+    <script>
+        // Inline script for mobile menu toggling (copied from script.js)
+        // Since we are not using the full script.js which might have index-specific logic
+        document.addEventListener('DOMContentLoaded', () => {
+             const toggle = document.getElementById('mobile-toggle');
+            const menu = document.getElementById('mobile-menu');
+            
+            if (toggle && menu) {
+                const icon = toggle.querySelector('i');
+                toggle.addEventListener('click', () => {
+                    menu.classList.toggle('active');
+                    document.body.classList.toggle('menu-open');
+                    
+                    if (menu.classList.contains('active')) {
+                        if(icon) {
+                            icon.classList.remove('fa-bars');
+                            icon.classList.add('fa-times');
+                        }
+                    } else {
+                        if(icon) {
+                            icon.classList.remove('fa-times');
+                            icon.classList.add('fa-bars');
+                        }
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>
--- a/sponsor_script.js
+++ b/sponsor_script.js
@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', () => {
+    fetchSponsorsData();
+});
+
+async function fetchSponsorsData() {
+    try {
+        const response = await fetch('sponsors.txt');
+        if (!response.ok) {
+            throw new Error('Failed to fetch sponsors.txt');
+        }
+        const text = await response.text();
+        const lines = text.trim().split('\n');
+        
+        const sponsors = [];
+        const userTotals = {};
+        let grandTotal = 0;
+
+        lines.forEach(line => {
+            const parts = line.split(',');
+            if (parts.length >= 3) {
+                const name = parts[0].trim();
+                const project = parts[1].trim();
+                const amountStr = parts[2].trim().replace('￥', '');
+                const amount = parseFloat(amountStr);
+                const date = parts[3] ? parts[3].trim() : '';
+
+                if (!isNaN(amount)) {
+                    sponsors.push({ name, project, amount, date });
+                    grandTotal += amount; 
+
+                    if (userTotals[name]) {
+                        userTotals[name] += amount;
+                    } else {
+                        userTotals[name] = amount;
+                    }
+                }
+            }
+        });
+
+        // Update Total
+        const totalDisplay = document.getElementById('total-amount-display');
+        if (totalDisplay) {
+            totalDisplay.innerText = `累计获得赞助: ¥${grandTotal.toFixed(2)}`;
+        }
+
+        // Recent Donations Logic
+        // Original list is chronological (oldest to newest), reverse it for newest first
+        const recentSponsors = [...sponsors].reverse();
+        renderDonationGrid(recentSponsors);
+
+    } catch (error) {
+        console.error('Error loading sponsors:', error);
+        const grid = document.getElementById('donation-list');
+        if(grid) grid.innerHTML = '<p>加载数据失败</p>';
+    }
+}
+
+function renderDonationGrid(sponsors) {
+    const container = document.getElementById('donation-list');
+    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('');
+}
--- a/stats.html
+++ b/stats.html
@@ -468,6 +468,7 @@
                <a href="https://mcphoto.lunadeer.cn/">相册</a>
                <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
                <a href="/stats.html" style="opacity: 1; font-weight: 600;">数据</a>
+                <a href="/sponsor.html">赞助</a>
            </div>
            <div class="nav-cta-container">
                <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
@@ -483,6 +484,7 @@
            <a href="https://mcphoto.lunadeer.cn/">相册</a>
            <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
            <a href="/stats.html" style="font-weight: 600;">数据</a>
+            <a href="/sponsor.html">赞助列表</a>
        </div>
    </div>