mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
47ef36f600
- Introduced fund_progress.txt to track server upgrade funding and vehicle replacement costs. - Created sponsors.txt to log sponsorship contributions with details including name, project, amount, and date. - Developed components.js for reusable UI components including navbar and footer. - Implemented data_utils.js for parsing sponsor data and calculating totals. - Added script.js for managing server status, crowdfunding display, and sponsor data fetching. - Created sponsor_script.js for detailed sponsor data management, filtering, and UI interactions. - Developed stats_script.js for player statistics display, including leaderboards and detailed player stats in a modal.
97 lines
4.0 KiB
HTML
97 lines
4.0 KiB
HTML
<!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="css/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">
|
|
<link rel="stylesheet" href="css/pages/sponsor.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="navbar-component"></div>
|
|
|
|
<div class="sponsor-hero">
|
|
<h1>感谢每一位支持者</h1>
|
|
<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 sponsor-list-title">❤️ 赞助列表</h2>
|
|
|
|
<div class="controls-header">
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
|
|
</div>
|
|
|
|
<button class="cta-button outline" id="open-sponsor-modal">
|
|
<i class="fas fa-heart"></i> 我要支持
|
|
</button>
|
|
</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">
|
|
<div class="donation-grid" id="donation-list">
|
|
<!-- JS will inject cards here -->
|
|
</div>
|
|
<div id="no-results" class="no-results-message is-hidden">
|
|
没有找到匹配的记录
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Sponsor Modal -->
|
|
<div id="sponsor-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<div class="modal-gift-icon">
|
|
<i class="fas fa-gift"></i>
|
|
</div>
|
|
<h3 class="modal-title">支持白鹿原服务器</h3>
|
|
<p class="modal-subtitle">您的每一次支持，都将帮助我们提升服务器性能，维持更长久的运营。</p>
|
|
|
|
<!-- Desktop QR -->
|
|
<div class="desktop-only-block" id="desktop-qr-view">
|
|
<div class="qr-placeholder">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fqr.alipay.com%2F2cz0344fnaulnbybhp04" alt="支付宝二维码" class="qr-img">
|
|
</div>
|
|
<p class="desktop-qr-hint">推荐使用支付宝扫码</p>
|
|
</div>
|
|
|
|
<!-- Mobile Button (will be shown via CSS media query logic in JS or CSS) -->
|
|
<div class="mobile-only-block" id="mobile-btn-view">
|
|
<a href="https://qr.alipay.com/2cz0344fnaulnbybhp04" class="alipay-btn" target="_blank">
|
|
<i class="fab fa-alipay"></i> 打开支付宝赞助
|
|
</a>
|
|
<p class="mobile-pay-hint">点击按钮将直接跳转至支付宝转账页面</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer-component"></div>
|
|
<script src="js/components.js"></script>
|
|
<script src="js/data_utils.js"></script>
|
|
<script src="js/sponsor_script.js"></script>
|
|
</body>
|
|
</html>
|