AI摘要：本文介绍了作者新开服务器并安装了两个操作系统，计划添加更多项目并提升功能。新建的门户页面链接已提供，展示了项目的HTML结构和CSS样式表代码。同时，介绍了哪吒面板的Docker安装代码和今日热榜页面，提供了一键安装脚本、Docker Compose启动Dashboard的命令和配置Caddy反代的示例。
Powered by 返回门户.
以下是修改后的完整博客文章，已经按照要求使用了代码格式展示代码、使用 scode 说明内容，并使用按钮链接格式提供项目地址：
新开了服务器并安装了新项目
近期，我新开了一个服务器，并在其上安装了两个操作系统：一个是 Windows，另一个是 Ubuntu。这个新环境为我的项目提供了更好的部署和管理空间。
之后，我计划会添加更多的项目，提升整体的功能和服务。为了更好地展示这些项目，我新建了一个门户页面。
新的门户页面链接：https://home.maxtral.fun/
说明：
下面是当前项目中的一些关键代码：
HTML 结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAX-门户-1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="dist/bundle.js" defer></script>
<div class="container">
<div class="background" id="blurContainer"></div>
<div class="navigation" id="navigation">
<!-- 时间显示框 -->
<button class="time-button" id="timeButton">
<!-- JavaScript 将在此处插入当前时间 -->
</button>
<!-- 搜索框和搜索图标 -->
<div class="search-wrapper">
<label for="searchInput"></label>
<input
type="text"
placeholder="百度搜索"
id="searchInput"
class="search-input"
/>
<button class="search-icon" id="searchButton">🔍</button> <!-- 搜索图标按钮 -->
</div>
<!-- 公告弹窗 -->
<div class="popup-content" id="announcementPopup">
<button class="close-button" data-popup="announcementPopup">关闭</button>
<div class="announcement-content">
<!-- 公告内容将通过 JavaScript 从 announcement.txt 加载 -->
</div>
</div>
<!-- 留言板弹窗 -->
<div class="popup-content" id="commentPopup">
<button class="close-button" data-popup="commentPopup">关闭</button>
<h3>留言板</h3>
<!-- 留言表单 -->
<div class="message-form">
<div class="input-group">
<label for="nickname">昵称</label>
<input type="text" id="nickname" class="input" placeholder="请输入你的昵称">
<div id="nicknameError" class="error">请输入昵称</div>
</div>
<div class="input-group">
<label for="newMessage">留言内容</label>
<textarea id="newMessage" class="textarea" placeholder="写下你的留言..."></textarea>
<div id="messageError" class="error">请输入留言内容</div>
</div>
<div class="button-container">
<button class="button submit-message-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"></path>
</svg>
发布留言
</button>
</div>
</div>
<!-- 留言列表 -->
<div id="messageList" class="message-list">
<!-- Messages will be inserted here -->
</div>
</div>
<!-- 计划任务弹窗 -->
<div class="popup-content" id="taskPopup">
<button class="close-button" data-popup="taskPopup">关闭</button>
<h3>计划任务管理</h3>
<!-- 任务表单已移除，游客无法添加任务 -->
<!-- 折叠任务区块 -->
<div class="task-section">
<h2 class="section-title">待开发任务</h2>
<button class="toggle-button" data-section="pendingTasks">展开</button>
<div id="pendingTasks" class="task-list collapsed"></div>
</div>
<div class="task-section">
<h2 class="section-title">开发中任务</h2>
<button class="toggle-button" data-section="inProgressTasks">展开</button>
<div id="inProgressTasks" class="task-list collapsed"></div>
</div>
<div class="task-section">
<h2 class="section-title">已完成任务</h2>
<button class="toggle-button" data-section="completedTasks">展开</button>
<div id="completedTasks" class="task-list collapsed"></div>
</div>
</div>
</div>
</div>
</body>
</html>样式表（CSS）：
/* 基础样式 */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
position: relative;
padding-top: 10vh;
}
.background {
position: absolute;
inset: 0;
background-image: url('backgrand.jpg');
background-size: cover;
background-position: center;
transition: all 0.5s;
filter: blur(0) brightness(100%);
}
.background.active {
filter: blur(4px) brightness(75%);
}
.navigation {
display: flex;
flex-direction: column;
align-items: center;
gap: 5rem;
position: relative;
z-index: 10;
width: 100%;
max-width: 64rem;
}
/* 时间按钮样式 */
.time-button {
font-size: 2rem;
color: white;
background: #216b94;
border: none;
border-radius: 10px;
outline: none;
cursor: default;
user-select: none;
pointer-events: auto;
padding: 10px 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2),
-5px -5px 15px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.time-button:hover {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3),
-2px -2px 10px rgba(255, 255, 255, 0.4);
transform: translateY(-2px) scale(1.05);
}项目地址：
新的状态页面：
哪吒面板是一个开源、轻量、易用的服务器监控与运维工具。以下是哪吒面板的Docker安装代码：
一键安装脚本：
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh执行此脚本后，你将需要输入一些信息，包括OAuth提供商、Client ID、Client Secret等。
Docker Compose启动Dashboard：
docker compose -f docker-compose.yaml up -d这是启动哪吒监控面板Dashboard的命令，你需要有一个
docker-compose.yaml文件来定义服务。配置Caddy反代：
ops.ysicing.net { tls [email protected] import LOG /var/log/caddy/nzops_ysicing_net.log reverse_proxy 10.76.0.7:44544 } agent.ops.ysicing.net { tls [email protected] import LOG /var/log/caddy/nzops_agent_ysicing_net.log reverse_proxy { to 10.76.0.7:44545 transport http { versions h2c 2 } } }这是使用Caddy进行反向代理的配置示例，用于将域名指向哪吒面板的Dashboard和Agent服务。
请根据你的具体需求和环境调整上述命令和配置。如果你需要更详细的安装步骤和配置信息，可以参考哪吒面板的官方文档。
新的热榜页面：
今日热榜是一个聚合平台，汇集了来自不同来源的热门话题和新闻。它让用户能够一目了然地查看当前的热点事件，无论是社交媒体上的热议，还是新闻网站上的头条。通过这个平台，用户可以节省时间，不必逐个访问各个网站，就能掌握全网的热门动态，是获取信息和了解时事的便捷工具。
今日热榜是一个汇聚全网热点的平台，它提供了一个界面，让用户能够一览各大网站的热门内容，包括新闻、社交媒体等，方便用户快速了解当前的热门话题和趋势。
2 条评论
测试能不能发送
都有什么好玩的项目啊