AI摘要:本文介绍了作者新开服务器并安装了两个操作系统,计划添加更多项目并提升功能。新建的门户页面链接已提供,展示了项目的HTML结构和CSS样式表代码。同时,介绍了哪吒面板的Docker安装代码和今日热榜页面,提供了一键安装脚本、Docker Compose启动Dashboard的命令和配置Caddy反代的示例。

Powered by 返回门户.

以下是修改后的完整博客文章,已经按照要求使用了代码格式展示代码、使用 scode 说明内容,并使用按钮链接格式提供项目地址:


新开了服务器并安装了新项目

近期,我新开了一个服务器,并在其上安装了两个操作系统:一个是 Windows,另一个是 Ubuntu。这个新环境为我的项目提供了更好的部署和管理空间。

2024-11-06T08:31:13.png

之后,我计划会添加更多的项目,提升整体的功能和服务。为了更好地展示这些项目,我新建了一个门户页面。

新的门户页面链接: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">&#128269;</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);
}

项目地址:

2024-11-13T16:20:53.png

新的状态页面:
2024-11-13T16:21:43.png
哪吒面板是一个开源、轻量、易用的服务器监控与运维工具。以下是哪吒面板的Docker安装代码

  1. 一键安装脚本

    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等。

  2. Docker Compose启动Dashboard

    docker compose -f docker-compose.yaml up -d

    这是启动哪吒监控面板Dashboard的命令,你需要有一个docker-compose.yaml文件来定义服务。

  3. 配置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服务。

请根据你的具体需求和环境调整上述命令和配置。如果你需要更详细的安装步骤和配置信息,可以参考哪吒面板的官方文档

新的热榜页面:

今日热榜是一个聚合平台,汇集了来自不同来源的热门话题和新闻。它让用户能够一目了然地查看当前的热点事件,无论是社交媒体上的热议,还是新闻网站上的头条。通过这个平台,用户可以节省时间,不必逐个访问各个网站,就能掌握全网的热门动态,是获取信息和了解时事的便捷工具。

今日热榜是一个汇聚全网热点的平台,它提供了一个界面,让用户能够一览各大网站的热门内容,包括新闻、社交媒体等,方便用户快速了解当前的热门话题和趋势。
2024-11-13T16:22:10.png

最后修改:2024 年 11 月 14 日
如果觉得我的文章挺有趣,赞赏一杯小奶茶
END
本文作者:
文章标题:关于最近的新项目
本文地址:https://www.maxtral.fun/index.php/archives/147/
版权说明:若无注明,本文皆MAXBROSER原创,转载请保留文章出处。