mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: add announcements feature with JSON data and interactive UI
- Created a new JSON file for announcements containing activity and maintenance updates. - Implemented a JavaScript module to fetch, filter, and display announcements dynamically. - Added functionality for editing announcements with a modal interface and live preview. - Included drag-and-drop support for content blocks within the announcement editor. - Enhanced user experience with category filtering and search capabilities.
This commit is contained in:
zhangyuheng
189
announcements.html
Normal file
189
announcements.html
Normal file
@@ -0,0 +1,189 @@
|
||||
<!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活动,白鹿原公告,服务器活动,维护通知">
|
||||
<meta name="author" content="白鹿原 Minecraft 服务器">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://mcpure.lunadeer.cn/announcements.html">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://mcpure.lunadeer.cn/announcements.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/announcements.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/announcements.css">
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"name": "活动公告",
|
||||
"description": "白鹿原Minecraft服务器活动公告",
|
||||
"url": "https://mcpure.lunadeer.cn/announcements.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="announcements-hero-bg"></header>
|
||||
|
||||
<div class="announcements-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-announcement edit-hidden" id="btn-add-announcement">
|
||||
<i class="fas fa-plus"></i> 新增公告
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="announcement-search" placeholder="搜索公告标题或简介...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-wrapper">
|
||||
<div class="filter-group">
|
||||
<div class="filter-label"><i class="fas fa-tag"></i> 类别</div>
|
||||
<div class="filter-tags" id="category-filters">
|
||||
<button class="filter-tag active" data-filter="all">全部</button>
|
||||
<button class="filter-tag" data-filter="activity"><i class="fas fa-calendar-check"></i> 活动</button>
|
||||
<button class="filter-tag" data-filter="maintenance"><i class="fas fa-wrench"></i> 维护</button>
|
||||
<button class="filter-tag" data-filter="other"><i class="fas fa-info-circle"></i> 其他</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="timeline" id="announcements-timeline">
|
||||
<!-- JS will inject timeline items here -->
|
||||
</div>
|
||||
<div id="no-results" class="no-results-message is-hidden">
|
||||
没有找到匹配的公告
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Editor Modal -->
|
||||
<div id="editor-modal" class="modal">
|
||||
<div class="modal-content editor-modal-content">
|
||||
<span class="close-editor-modal">×</span>
|
||||
<div class="editor-modal-header">
|
||||
<h3><i class="fas fa-bullhorn"></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="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-title">公告标题</label>
|
||||
<input type="text" id="editor-title" placeholder="输入公告标题...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editor-intro">简介</label>
|
||||
<textarea id="editor-intro" placeholder="输入公告简介..." rows="2"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="editor-time">时间</label>
|
||||
<input type="date" id="editor-time">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>类别</label>
|
||||
<div class="custom-select">
|
||||
<input type="hidden" id="editor-category" value="activity">
|
||||
<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="activity">活动</div>
|
||||
<div class="custom-option" data-value="maintenance">维护</div>
|
||||
<div class="custom-option" data-value="other">其他</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>正文内容</label>
|
||||
<div class="sortable-list" id="editor-content-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-announcement" id="btn-save-announcement">
|
||||
<i class="fas fa-save"></i> 生成 JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON Output Modal -->
|
||||
<div id="json-output-modal" class="modal">
|
||||
<div class="modal-content json-output-content">
|
||||
<span class="close-json-modal">×</span>
|
||||
<h3><i class="fas fa-code"></i> 生成完成</h3>
|
||||
<p class="json-output-hint">请复制以下 JSON 内容，更新到 data/announcements.json 文件中。</p>
|
||||
<textarea id="json-output" readonly></textarea>
|
||||
<button type="button" class="btn-copy-json" id="btn-copy-json">
|
||||
<i class="fas fa-copy"></i> 复制到剪贴板
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-component"></div>
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/announcements_script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user