mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: initialize Vue application with main components and styles
- Added App.vue as the main application component with a structured layout. - Created main.js to bootstrap the Vue application and mount it to the DOM. - Introduced styles.css for global styling, including responsive design and theming. - Removed outdated HTML files (stats.html, towns.html) and Python script (statsprocess.py) as part of the migration to a new Vue-based architecture. - Added Vite configuration (vite.config.js) for building the Vue application.
This commit is contained in:
zhangyuheng
269
index.html
269
index.html
@@ -1,258 +1,13 @@
|
||||
<!DOCTYPE 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 服务器 - 永不换档的纯净原版生存Minecraft服务器</title>
|
||||
<meta name="description" content="白鹿原是一个永不换档的纯净原版生存Minecraft我的世界服务器，支持Java版与基岩版互通。提供免费圈地保护、自研管理插件，紧跟最新游戏版本更新。物理工作站保障7×24小时稳定运行，实时查看服务器在线状态与众筹进展。立即加入白鹿原，开启纯净原版生存冒险之旅！服务器地址：mcpure.lunadeer.cn">
|
||||
<meta name="keywords" content="白鹿原Minecraft,白鹿原我的世界,白鹿原mc,Minecraft服务器,我的世界，我的世界服务器,纯净服务器,原版服务器,纯净生存,基岩互通,白鹿原,MC服务器,永不换档,免费圈地,Minecraft中国">
|
||||
<meta name="author" content="白鹿原 Minecraft 服务器">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://mcpure.lunadeer.cn/">
|
||||
|
||||
<!-- Google Site Verification -->
|
||||
<meta name="google-site-verification" content="ZMGHsJuJU3soEw09Xa0lfKTxhxEBKN-h-goxg5lhCRw" />
|
||||
|
||||
<!-- Bing Site Verification -->
|
||||
<meta name="msvalidate.01" content="A46E723A4AEF6D9EEB1D9AB9DC1267FD" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://mcpure.lunadeer.cn/">
|
||||
<meta property="og:title" content="白鹿原 Minecraft 服务器 - 永不换档的纯净原版生存Minecraft服务器">
|
||||
<meta property="og:description" content="白鹿原——永不换档的纯净原版生存Minecraft服务器，支持Java版与基岩版互通。免费圈地保护、自研管理插件、紧跟最新版本，物理工作站保障全天候稳定运行。立即加入纯净生存冒险！">
|
||||
<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_large_image">
|
||||
<meta property="twitter:url" content="https://mcpure.lunadeer.cn/">
|
||||
<meta property="twitter:title" content="白鹿原 Minecraft 服务器 - 永不换档的纯净原版生存Minecraft服务器">
|
||||
<meta property="twitter:description" content="白鹿原——永不换档的纯净原版生存Minecraft服务器，支持Java版与基岩版互通。免费圈地保护、自研管理插件、紧跟最新版本，物理工作站保障全天候稳定运行。立即加入纯净生存冒险！">
|
||||
<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 rel="preconnect" href="https://img.lunadeer.cn">
|
||||
<link rel="dns-prefetch" href="https://outline.lunadeer.cn">
|
||||
<link rel="dns-prefetch" href="https://mcmap.lunadeer.cn">
|
||||
<link rel="dns-prefetch" href="https://mcphoto.lunadeer.cn">
|
||||
<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">
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "GameServer",
|
||||
"name": "白鹿原 Minecraft 服务器",
|
||||
"description": "永不换档的纯净原版生存Minecraft服务器，支持Java版和基岩版互通",
|
||||
"url": "https://mcpure.lunadeer.cn/",
|
||||
"logo": "https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png",
|
||||
"image": "https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png",
|
||||
"game": {
|
||||
"@type": "VideoGame",
|
||||
"name": "Minecraft",
|
||||
"gamePlatform": ["Java Edition", "Bedrock Edition"]
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY",
|
||||
"availability": "https://schema.org/InStock"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "5",
|
||||
"ratingCount": "100"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "白鹿原 Minecraft 服务器",
|
||||
"url": "https://mcpure.lunadeer.cn/",
|
||||
"potentialAction": {
|
||||
"@type": "SearchAction",
|
||||
"target": "https://mcpure.lunadeer.cn/stats.html?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip to main content for accessibility -->
|
||||
<a href="#main-content" class="skip-to-main">跳转到主内容</a>
|
||||
|
||||
<!-- Navbar Component -->
|
||||
<div id="navbar-component"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header id="main-content" class="hero home-hero" role="banner">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">白鹿原</h1>
|
||||
|
||||
<!-- Dynamic Subtitle with Rotating Descriptors -->
|
||||
<div class="hero-subtitle-container">
|
||||
<p class="hero-subtitle">
|
||||
<span class="subtitle-prefix">永不换档的</span>
|
||||
<span class="subtitle-dynamic" id="dynamic-subtitle"></span>
|
||||
<span class="subtitle-suffix">Minecraft 服务器</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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 player-item-center">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Key Features (Bento Grid Style) -->
|
||||
<main>
|
||||
<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" role="article" aria-label="纯净原版特性">
|
||||
<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" role="article" aria-label="深度自研特性">
|
||||
<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" role="article" aria-label="原汁原味特性">
|
||||
<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 feature-land">
|
||||
<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 feature-bedrock">
|
||||
<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 feature-hardware">
|
||||
<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 feature-fun">
|
||||
<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 feature-update">
|
||||
<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 feature-guide">
|
||||
<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">
|
||||
<a href="/sponsor.html" class="view-sponsors-btn">查看赞助列表</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Crowdfunding Section -->
|
||||
<section id="crowdfunding-section" class="crowdfunding-section home-hidden">
|
||||
<div class="container">
|
||||
<h2 class="section-header">众筹进度</h2>
|
||||
<div id="crowdfunding-grid" class="crowdfunding-grid">
|
||||
<!-- Crowdfunding items will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="footer-component"></div>
|
||||
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/data_utils.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="白鹿原 Minecraft 服务器官网 Vue 重构工程。" />
|
||||
<title>白鹿原 Minecraft 服务器</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user