mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: add towns overview page with interactive features and modals for town management
This commit is contained in:
zhangyuheng
335
towns.html
Normal file
335
towns.html
Normal file
@@ -0,0 +1,335 @@
|
||||
<!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服务器城镇一览，查看各个城镇的坐标位置、规模类型、招募状态、创始人与成员信息，以及城镇详细介绍与风貌展示。加入一个城镇，开启你的冒险之旅。">
|
||||
<meta name="keywords" content="Minecraft城镇,MC城镇介绍,白鹿原城镇,Minecraft社区,服务器城镇">
|
||||
<meta name="author" content="白鹿原 Minecraft 服务器">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://mcpure.lunadeer.cn/towns.html">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://mcpure.lunadeer.cn/towns.html">
|
||||
<meta property="og:title" content="城镇介绍 - 白鹿原 Minecraft 服务器">
|
||||
<meta property="og:description" content="白鹿原Minecraft服务器城镇一览，查看各个城镇的规模类型、招募状态与详细介绍，加入一个城镇开启冒险之旅。">
|
||||
<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/towns.html">
|
||||
<meta property="twitter:title" content="城镇介绍 - 白鹿原 Minecraft 服务器">
|
||||
<meta property="twitter:description" content="白鹿原Minecraft服务器城镇一览，查看各个城镇的规模类型、招募状态与详细介绍，加入一个城镇开启冒险之旅。">
|
||||
<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/towns.css">
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"name": "城镇介绍",
|
||||
"description": "白鹿原Minecraft服务器城镇一览",
|
||||
"url": "https://mcpure.lunadeer.cn/towns.html",
|
||||
"isPartOf": {
|
||||
"@type": "WebSite",
|
||||
"name": "白鹿原 Minecraft 服务器",
|
||||
"url": "https://mcpure.lunadeer.cn/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-component"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header id="hero-component" data-title="城镇介绍" data-subtitle="探索各个城镇，找到属于你的家园。" data-class="towns-hero-bg"></header>
|
||||
|
||||
<div class="towns-container">
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls-section">
|
||||
<div class="controls-header-row">
|
||||
<div class="title-with-action">
|
||||
<h2 class="section-title">城镇列表</h2>
|
||||
<button class="btn-add-town" id="btn-add-town">
|
||||
<i class="fas fa-plus"></i> 新增城镇
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="town-search" placeholder="搜索城镇名称...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-wrapper">
|
||||
<div class="filter-group">
|
||||
<div class="filter-label"><i class="fas fa-users"></i> 规模</div>
|
||||
<div class="filter-tags" id="scale-filters">
|
||||
<button class="filter-tag active" data-filter="all">全部</button>
|
||||
<button class="filter-tag" data-filter="small"><i class="fas fa-user"></i> 小型</button>
|
||||
<button class="filter-tag" data-filter="medium"><i class="fas fa-users"></i> 中型</button>
|
||||
<button class="filter-tag" data-filter="large"><i class="fas fa-city"></i> 大型</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-label"><i class="fas fa-tag"></i> 类型</div>
|
||||
<div class="filter-tags" id="type-filters">
|
||||
<button class="filter-tag active" data-filter="all">全部</button>
|
||||
<button class="filter-tag" data-filter="building"><i class="fas fa-building"></i> 建筑</button>
|
||||
<button class="filter-tag" data-filter="adventure"><i class="fas fa-dragon"></i> 冒险</button>
|
||||
<button class="filter-tag" data-filter="industry"><i class="fas fa-industry"></i> 工业</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-label"><i class="fas fa-door-open"></i> 招募</div>
|
||||
<div class="filter-tags" id="recruit-filters">
|
||||
<button class="filter-tag active" data-filter="all">全部</button>
|
||||
<button class="filter-tag" data-filter="welcome"><i class="fas fa-door-open"></i> 欢迎加入</button>
|
||||
<button class="filter-tag" data-filter="closed"><i class="fas fa-door-closed"></i> 暂不招人</button>
|
||||
<button class="filter-tag" data-filter="maybe"><i class="fas fa-question-circle"></i> 可以考虑</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Towns Grid -->
|
||||
<div class="towns-grid" id="towns-list">
|
||||
<!-- JS will inject cards here -->
|
||||
</div>
|
||||
<div id="no-results" class="no-results-message is-hidden">
|
||||
没有找到匹配的城镇
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Town Detail Modal -->
|
||||
<div id="town-modal" class="modal town-modal">
|
||||
<div class="modal-content town-modal-content">
|
||||
<span class="close-modal">×</span>
|
||||
<div class="town-modal-banner" id="town-modal-banner"></div>
|
||||
<div class="town-modal-header">
|
||||
<h3 class="town-modal-title" id="town-modal-title">城镇名称</h3>
|
||||
<div class="town-modal-badges-row">
|
||||
<div class="town-modal-badges" id="town-modal-badges">
|
||||
<!-- Badges injected by JS -->
|
||||
</div>
|
||||
<div class="town-modal-actions">
|
||||
<button class="btn-share-town" id="btn-share-town" title="分享此城镇">
|
||||
<i class="fas fa-share-alt"></i> 分享
|
||||
</button>
|
||||
<button class="btn-edit-town" id="btn-edit-town" title="编辑此城镇">
|
||||
<i class="fas fa-pen"></i> 编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="town-modal-body">
|
||||
<div class="modal-section">
|
||||
<h4 class="modal-section-title"><i class="fas fa-map-marker-alt"></i> 位置信息</h4>
|
||||
<p>
|
||||
主世界:
|
||||
<span id="town-modal-coords"></span>
|
||||
<a href="#" target="_blank" id="town-modal-map-link" class="town-map-link">
|
||||
<i class="fas fa-map-marked-alt"></i> 查看地图
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-section">
|
||||
<h4 class="modal-section-title"><i class="fas fa-crown"></i> 创始人</h4>
|
||||
<div class="contributors-list" id="town-modal-founders">
|
||||
<!-- Founders injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-section">
|
||||
<h4 class="modal-section-title"><i class="fas fa-users"></i> 主要成员</h4>
|
||||
<div class="contributors-list" id="town-modal-members">
|
||||
<!-- Members injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-section">
|
||||
<h4 class="modal-section-title"><i class="fas fa-book-open"></i> 城镇介绍</h4>
|
||||
<div class="instruction-content" id="town-modal-introduction">
|
||||
<!-- Introduction injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Modal -->
|
||||
<div id="town-editor-modal" class="modal">
|
||||
<div class="modal-content town-editor-modal-content">
|
||||
<span class="close-editor-modal">×</span>
|
||||
<div class="editor-modal-header">
|
||||
<h3><i class="fas fa-tools"></i> 城镇编辑器</h3>
|
||||
</div>
|
||||
<div class="editor-layout">
|
||||
<!-- Left: Preview -->
|
||||
<div class="editor-preview">
|
||||
<div class="editor-panel-title"><i class="fas fa-eye"></i> 实时预览</div>
|
||||
<div class="editor-preview-content" id="town-editor-preview-area"></div>
|
||||
</div>
|
||||
<!-- Right: Editor Form -->
|
||||
<div class="editor-form">
|
||||
<div class="editor-panel-title"><i class="fas fa-edit"></i> 编辑内容</div>
|
||||
<div class="editor-form-scroll">
|
||||
<div class="form-group">
|
||||
<label for="editor-town-title">城镇名称</label>
|
||||
<input type="text" id="editor-town-title" placeholder="输入城镇名称...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editor-town-logo">Logo 图片地址（可空）</label>
|
||||
<input type="text" id="editor-town-logo" placeholder="输入图片URL，留空使用默认背景...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>卡片背景渐变色</label>
|
||||
<div class="gradient-picker-row">
|
||||
<label class="color-picker-field" for="editor-town-gradient-from">
|
||||
<span>起始色</span>
|
||||
<input type="color" id="editor-town-gradient-from" value="#667eea">
|
||||
</label>
|
||||
<label class="color-picker-field" for="editor-town-gradient-to">
|
||||
<span>结束色</span>
|
||||
<input type="color" id="editor-town-gradient-to" value="#764ba2">
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">当未设置 Logo 时，将使用这组渐变色作为卡片和详情头图背景。</p>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>规模</label>
|
||||
<div class="custom-select">
|
||||
<input type="hidden" id="editor-town-scale" value="small">
|
||||
<div class="custom-select-trigger">
|
||||
<span class="custom-select-text">小型（5人以下）</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="custom-select-options">
|
||||
<div class="custom-option selected" data-value="small">小型（5人以下）</div>
|
||||
<div class="custom-option" data-value="medium">中型（2-10人）</div>
|
||||
<div class="custom-option" data-value="large">大型（10人以上）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>类型</label>
|
||||
<div class="custom-select">
|
||||
<input type="hidden" id="editor-town-type" value="building">
|
||||
<div class="custom-select-trigger">
|
||||
<span class="custom-select-text">建筑</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="custom-select-options">
|
||||
<div class="custom-option selected" data-value="building">建筑</div>
|
||||
<div class="custom-option" data-value="adventure">冒险</div>
|
||||
<div class="custom-option" data-value="industry">工业</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>招募状态</label>
|
||||
<div class="custom-select">
|
||||
<input type="hidden" id="editor-town-recruit" value="welcome">
|
||||
<div class="custom-select-trigger">
|
||||
<span class="custom-select-text">欢迎加入</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="custom-select-options">
|
||||
<div class="custom-option selected" data-value="welcome">欢迎加入</div>
|
||||
<div class="custom-option" data-value="closed">暂不招人</div>
|
||||
<div class="custom-option" data-value="maybe">可以考虑</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row coords-row">
|
||||
<div class="form-group">
|
||||
<label for="editor-town-x">X 坐标</label>
|
||||
<input type="number" id="editor-town-x" placeholder="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editor-town-y">Y 坐标</label>
|
||||
<input type="number" id="editor-town-y" placeholder="64">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editor-town-z">Z 坐标</label>
|
||||
<input type="number" id="editor-town-z" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>创始人</label>
|
||||
<div class="tags-input-wrapper" id="editor-founders-wrapper">
|
||||
<div class="tags-list" id="editor-founders-tags"></div>
|
||||
<input type="text" id="editor-founder-input" placeholder="输入名称后按回车或空格添加...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>主要成员</label>
|
||||
<div class="tags-input-wrapper" id="editor-members-wrapper">
|
||||
<div class="tags-list" id="editor-members-tags"></div>
|
||||
<input type="text" id="editor-member-input" placeholder="输入名称后按回车或空格添加...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>城镇介绍</label>
|
||||
<div class="sortable-list" id="editor-introduction-list"></div>
|
||||
<div class="add-item-row">
|
||||
<button type="button" class="add-item-btn" data-type="text">
|
||||
<i class="fas fa-plus"></i> 添加文字
|
||||
</button>
|
||||
<button type="button" class="add-item-btn" data-type="image">
|
||||
<i class="fas fa-image"></i> 添加图片
|
||||
</button>
|
||||
<button type="button" class="add-item-btn" data-type="video">
|
||||
<i class="fas fa-video"></i> 添加视频
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-actions">
|
||||
<button type="button" class="btn-save-town" id="btn-save-town">
|
||||
<i class="fas fa-save"></i> 生成 JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON Output Modal -->
|
||||
<div id="town-json-output-modal" class="modal">
|
||||
<div class="modal-content town-json-output-content">
|
||||
<span class="close-json-modal">×</span>
|
||||
<h3><i class="fas fa-code"></i> 生成完成</h3>
|
||||
<p class="json-output-hint">请复制以下 JSON 内容，发送给服主以更新到网站上。</p>
|
||||
<textarea id="town-json-output" readonly></textarea>
|
||||
<button type="button" class="btn-copy-json" id="btn-copy-town-json">
|
||||
<i class="fas fa-copy"></i> 复制到剪贴板
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-component"></div>
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/towns_script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user