mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
233 lines
10 KiB
HTML
233 lines
10 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="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">
|
||
</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="白鹿原 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>
|
||
</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>
|
||
</nav>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div class="mobile-menu" id="mobile-menu">
|
||
<div class="mobile-menu-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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Section -->
|
||
<header class="hero" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');">
|
||
<div class="hero-overlay"></div>
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">白鹿原 Minecraft</h1>
|
||
<p class="hero-subtitle">永不换档的纯净原版服务器</p>
|
||
|
||
<div class="server-runtime">
|
||
已稳定运行 <span id="runtime-days">0</span> 天 <span id="runtime-hours">0</span> 小时 <span id="runtime-minutes">0</span> 分 <span id="runtime-seconds">0</span> 秒
|
||
</div>
|
||
|
||
<div class="hero-actions">
|
||
<div class="server-ip-box" onclick="copyIp()">
|
||
<span id="server-ip">mcpure.lunadeer.cn</span>
|
||
<i class="fas fa-copy"></i>
|
||
<span class="tooltip" id="copy-tooltip">已复制</span>
|
||
</div>
|
||
<p class="ip-hint">点击复制服务器地址</p>
|
||
|
||
<!-- Online Status -->
|
||
<div class="online-status-box">
|
||
<div class="status-indicator">
|
||
<span class="status-dot"></span>
|
||
<span id="online-count">正在获取状态...</span>
|
||
</div>
|
||
<div class="players-tooltip" id="players-list">
|
||
<div class="player-item" style="justify-content: center;">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Key Features (Bento Grid Style) -->
|
||
<section class="features-section">
|
||
<div class="container">
|
||
<!-- <h2 class="section-header">为什么选择白鹿原？</h2> -->
|
||
|
||
<div class="bento-grid">
|
||
<!-- Large Feature: Pure -->
|
||
<div class="bento-item large-item feature-pure" style="background-image: url('https://img.lunadeer.cn/i/2024/02/21/65d592eb4afad.jpg');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-leaf icon"></i>
|
||
<h3>纯净原版</h3>
|
||
<p>无纷繁复杂的 Mod，无破坏平衡的插件。一切简单的就像是单机模式的共享一般。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Feature: Self-developed -->
|
||
<div class="bento-item medium-item feature-dev" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/6926982718ba8.png');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-code icon"></i>
|
||
<h3>深度自研</h3>
|
||
<p>全栈自研核心，拒绝卡脖子，保证可持续发展。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Feature: No Params Modified -->
|
||
<div class="bento-item medium-item feature-params" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/6926775006dea.jpg');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-sliders-h icon"></i>
|
||
<h3>原汁原味</h3>
|
||
<p>生物生成、红石参数与单机完全一致。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small Features Grid -->
|
||
<div class="bento-item small-item" style="background-image: url('https://img.lunadeer.cn/i/2024/02/21/65d592ea6faa1.jpg');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-home icon"></i>
|
||
<h4>免费圈地</h4>
|
||
<p>2048*2048 超大领地</p>
|
||
</div>
|
||
</div>
|
||
<div class="bento-item small-item" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/692677560db46.png');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-mobile-alt icon"></i>
|
||
<h4>基岩互通</h4>
|
||
<p>手机电脑随时畅玩</p>
|
||
</div>
|
||
</div>
|
||
<div class="bento-item small-item" style="background-image: url('https://img.lunadeer.cn/i/2024/02/21/65d592e248066.jpg');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-server icon"></i>
|
||
<h4>自有硬件</h4>
|
||
<p>物理工作站，永不跑路</p>
|
||
</div>
|
||
</div>
|
||
<div class="bento-item small-item" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/692677566b07b.png');">
|
||
<div class="bento-overlay"></div>
|
||
<div class="bento-content">
|
||
<i class="fas fa-gamepad icon"></i>
|
||
<h4>娱乐玩法</h4>
|
||
<p>空岛、跑酷、小游戏</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Feature: Update -->
|
||
<div class="bento-item medium-item" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/692697b71431b.png');">
|
||
<div class="bento-content">
|
||
<i class="fas fa-sync-alt icon"></i>
|
||
<h3>紧跟新版</h3>
|
||
<p>紧跟 Paper 核心版本更新，始终保持在版本前列。第一时间体验 Minecraft 的最新内容。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Medium Feature: Guide -->
|
||
<div class="bento-item medium-item" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/692697b7376c7.png');">
|
||
<div class="bento-content">
|
||
<i class="fas fa-book-open icon"></i>
|
||
<h3>新手指南</h3>
|
||
<p>完善的服务器文档与活跃的社区，帮助你快速上手，加入白鹿原大家庭。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sponsors Section -->
|
||
<section class="sponsors-section">
|
||
<div class="container">
|
||
<h2 class="section-header">特别鸣谢</h2>
|
||
<div id="top-sponsors" class="top-sponsors-grid">
|
||
<!-- Top 3 sponsors will be injected here by JS -->
|
||
</div>
|
||
<div class="sponsors-action">
|
||
<button id="view-sponsors-btn" class="view-sponsors-btn">查看赞助列表</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Crowdfunding Section -->
|
||
<section id="crowdfunding-section" class="crowdfunding-section" style="display: none;">
|
||
<div class="container">
|
||
<h2 class="section-header">众筹进度</h2>
|
||
<div id="crowdfunding-grid" class="crowdfunding-grid">
|
||
<!-- Crowdfunding items will be injected here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sponsors Modal -->
|
||
<div id="sponsors-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</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">
|
||
<div class="footer-logo">白鹿原</div>
|
||
<p>© 2025 白鹿原 Minecraft 服务器.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|