Files
infstarweb/sponsor.html

135 lines
6.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<meta name="description" content="查看白鹿原Minecraft服务器赞助者列表与众筹进度感谢每一位赞助者的慷慨支持了解服务器年度运营费用与当前筹集情况支持搜索和筛选赞助记录。如果您也热爱白鹿原欢迎通过赞助帮助服务器持续稳定运营共同守护这片纯净的Minecraft世界。">
<meta name="keywords" content="白鹿原赞助,Minecraft服务器赞助,MC服务器支持,白鹿原捐赠,服务器众筹">
<meta name="author" content="白鹿原 Minecraft 服务器">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mcpure.lunadeer.cn/sponsor.html">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mcpure.lunadeer.cn/sponsor.html">
<meta property="og:title" content="赞助榜 - 白鹿原 Minecraft 服务器">
<meta property="og:description" content="感谢每一位赞助者的支持查看白鹿原Minecraft服务器赞助者完整列表与众筹进度了解如何支持服务器持续运营共同守护纯净原版MC世界。">
<meta property="og:image" content="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png">
<meta property="og:site_name" content="白鹿原 Minecraft 服务器">
<meta property="og:locale" content="zh_CN">
<!-- Twitter -->
<meta property="twitter:card" content="summary">
<meta property="twitter:url" content="https://mcpure.lunadeer.cn/sponsor.html">
<meta property="twitter:title" content="赞助榜 - 白鹿原 Minecraft 服务器">
<meta property="twitter:description" content="感谢每一位赞助者的支持查看白鹿原Minecraft服务器赞助者完整列表与众筹进度了解如何支持服务器持续运营共同守护纯净原版MC世界。">
<meta property="twitter:image" content="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png">
<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">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "赞助榜",
"description": "白鹿原Minecraft服务器赞助者列表和众筹进度",
"url": "https://mcpure.lunadeer.cn/sponsor.html",
"isPartOf": {
"@type": "WebSite",
"name": "白鹿原 Minecraft 服务器",
"url": "https://mcpure.lunadeer.cn/"
}
}
</script>
</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">&times;</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>