【已合入官方，使用官方脚本升级面板版本即可】哪吒面板+自定义主题+默认主题+历史tcpping食用教程
超链接
常见问题汇总：https://www.nodeseek.com/post-62122-19#188
BugFix: https://www.nodeseek.com/post-62122-19#190
迁移方法：https://www.nodeseek.com/post-62122-1#84
更新日志：https://www.nodeseek.com/post-62122-20#193
本文抄袭原文档：https://www.nodeseek.com/post-62122-1
已合入官方
- 魔改版切换为官方版方法
单独安装模式：复制下面命令，选 5 升级即可
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.shdocker 模式，需要先将下面的镜像替换为
ghcr.io/naiba/nezha-dashboard，再用上面脚本然后选 5
一键安装 amzayo 主题，复制下面命令，运行，选 14 即可
wget -O nezha.sh https://raw.githubusercontent.com/lvgj-stack/nezha/master/script/install.sh && chmod +x ./nezha.sh && sudo ./nezha.shUpdate
2024-02-09
支持了 ICMPPing 历史图
使用方法，使用脚本 选 5 升级面板，重新在后台复制意见安装的命令，在机器上再执行下
背景
上次发了哪吒探针支持三网TCPPing之后挺多hxd挺感兴趣，但是主要讲的是魔改的原理，以及实现过程，稍微有点门槛：
- 需要有一定基础会自己编译debug，编译了以后部署也很麻烦，需要先安装好官方版本再替换
重点：太丑了，劝退大家的一个很关键的点
为此写了一个脚本，然后找了一个比较好看的自定义主题进一步魔改，选用的主题是amzayo大佬的自定义半透明主题
amzayo大佬半透明主题原文：https://blog.amzayo.com
脚本地址：https://raw.githubusercontent.com/lvgj-stack/nezha/master/script/install.sh
正好最近整了个图安云的精品小鸡，带大家从零开始部署
来吧～展示
- 首页图
- 服务页面
- 网络监控页面
食用方法
下载脚本
wget -O nezha.sh https://raw.githubusercontent.com/lvgj-stack/nezha/master/script/install.sh && chmod +x ./nezha.sh && sudo ./nezha.sh
部署面板
- 脚本也进行了部分魔改，运行，安装带监控功能的面板
- 此处可以选择docker或者systems管理，这里先用docker给大家展示
- 填入github相关信息，具体可参考官网
- 安装完毕，查看界面
- 脚本中选14继续安装amzayo佬的自定义主题
- 安装完成后，回到浏览器后台管理页面，写入css文件，css地址：http://vps15o.181000.xyz:9999/amzayo_css.txt
- 将前端切换到custom，查看效果
部署agent
- 这里其他的小鸡已经挂了探针了，就用本鸡来做allinone教程，回到管理后台，新增一台服务器
- 复制一键部署命令，
拉脚本的部分删除掉就行，留着如下部分，执行
sudo bash ./nezha.sh install_agent 38.49.xx.xxx 5555 NRpluMhOL8BvrCpxxxxx - 输入y选择带监控的版本部署
- 部署完成回到页面查看小鸡已经在线
新增TCPPing监控
- 此处最好选择30s间隔，不益太短（因为后端是两个点取平均，记录落库）
- 稍等几分钟可以查看到图，目前只做了天级别的图
月流量统计
- 此部分官网有教程，我这里直接贴一个配置，该配置效果是：以24号为流量结算日，总双向流量300g使用情况
[{"type":"transfer_all_cycle","max":536870912000,"cycle_start":"2024-01-24T00:00:00+08:00","cycle_interval":1,"cycle_unit":"month","cover":1,"ignore":{"8":true}}] 回到主页服务页面查看效果
logo等图标替换
这个可以参考博客原文，写得很清楚
存量面板迁移方法：
很重要：无论怎么样，都需要先把/opt/nezha/dashboard/data/下面的东西先备份！
- 备份
cp -r /opt/nezha/dashboard/data/ ./nezha_backup - 升级面板，下面是一个刚部署好的官方面板
2.1 下载魔改脚本，并运行
2.2 选5wget -O nezha.sh https://raw.githubusercontent.com/lvgj-stack/nezha/master/script/install.sh && chmod +x nezha.sh && sudo ./nezha.sh
2.3 这个时候回到原来的页面，看起来应该没什么变化，然后在管理后台切换到daynight主题，界面应该会新加一个网络监控项，至此代表面板升级成功
2.4 选14安装主题，复制css，具体可参考上文 - 升级agent
3.1 管理后台，直接复制一键部署命令，删除前面的curl，运行curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh && sudo ./nezha.sh install_agent 38.xx.xx.xx 5555 v4asoWBdTCKPrwxxxx
3.2 参考上面添加tcpping，等一分钟，见到下图代表成功
参考 https://www.nodeseek.com/post-30661-1，配置反代
1.安装Nginx
sudo apt install nginx -y
2.自签名证书或使用acme证书（请自行替换域名）
genrsa -out /opt/nezha/nezha.key 2048
openssl req -new -subj "/CN=demo.com" -key /opt/nezha/nezha.key -out /opt/nezha/nezha.csr #自行替换探针域名
openssl x509 -req -days 36500 -in /opt/nezha/nezha.csr -signkey /opt/nezha/nezha.key -out /opt/nezha/nezha.pem
3.修改nginx配置（请自行替换域名）
sudo nano /etc/nginx/nginx.conf
编辑为
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
server {
listen 80 ;
listen [::]:80 ;
listen 443 ssl http2 ;
listen [::]:443 ssl http2 ;
server_name demo.com; #自行替换探针域名
ssl_certificate /opt/nezha/nezha.pem; #SSL证书位置
ssl_certificate_key /opt/nezha/nezha.key; #SSL证书位置
location / {
proxy_pass http://127.0.0.1:8008;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
}
location ~ ^/(ws|terminal/.+)$ {
proxy_pass http://127.0.0.1:8008;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $http_host;
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name api.demo.com; #自行替换gRPC域名
ssl_certificate /opt/nezha/nezha.pem; #SSL证书位置
ssl_certificate_key /opt/nezha/nezha.key; #SSL证书位置
underscores_in_headers on;
location / {
grpc_read_timeout 300s;
grpc_send_timeout 300s;
grpc_socket_keepalive on;
grpc_pass grpc://localhost:5555;
}
}
}
4.重启nginx服务
sudo service nginx restart
CloudFlare配置
1.为你的服务器ip地址添加两个域名的AAAA解析并打开CDN(小云朵)
2.在CloudFlare域名页面左侧的 SSL/TLS 中更改SSL/TLS 加密模式为 完全
3.在CloudFlare域名页面左侧的 网络 页面中打开 gRPC
等待解析完毕后访问demo.com即可打开哪吒监控面板
客户端配置可在后台添加，如果手动添加应打开TLS并使用’api.demo.com 443’作为面板RPC的host
自用CSS备份
1.小鲁班主题 前台界面主题Custom（local）
自定义代码
<style>
@font-face{font-family:'Harmony Hans';src:url(https://s4.zstatic.net/~/@nezha-custom/13-35afa740d3d2392b1122009c4cef3786.woff2) format('woff2');}*{font-family:'Harmony Hans';}*:not(.content){transition:all .2s;}body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:url(https://s4.zstatic.net/~/@nezha-custom/13-892ec2d2e6b62aa0b5e5a4f64aa7f920.webp) center/cover no-repeat;}:root{--popup-filter:blur(2px);--lc-color-light:rgba(235,235,235,0.8);--bc-color-light:rgba(235,235,235,0.4);--the-color-light:rgba(235,235,235,0.6);--he-color-light:rgba(235,235,235,0.8);--message-color-light:rgb(22,22,22,1);--popup-color-light:rgba(235,235,235,0.6);--bc-color-dark:rgba(0,0,0,0.4);--lc-color-dark:rgba(55,55,55,0.8);--the-color-dark:rgba(35,35,35,0.3);--he-color-dark:rgba(35,35,35,0.8);--message-color-dark:rgb(235,235,235,0.8);--popup-color-dark:rgba(78,78,78,0.6);}@media (prefers-color-scheme:dark){*:not(.icon,i){color:rgba(220,220,220,0.95) !important;}.ui.menu .ui.dropdown .menu>.item{color:rgba(220,220,220,0.95) !important;}.ui .cards>.card{background-color:var(--lc-color-dark) !important;border-color:var(--lc-color-dark) !important;}.ui .cards>.card i:not(.flag){filter:saturate(60%) !important;}.ui.table thead th,.ui.table thead{background-color:var(--the-color-dark) !important;}.ui.table{background-color:none !important;}.ui.large.menu,.right.menu .menu,.service-status h2,.footer,.floating.message.warning,.floating.message.success{background-color:var(--he-color-dark) !important;}.floating.message.warning,.floating.message.success{color:var(--message-color-dark) !important;}#app .ui.fluid.accordion,.table{background-color:var(--bc-color-dark) !important;}.ui.content.popup{background-color:var(--popup-color-dark) !important;}.ui.content.popup:before{background-color:var(--popup-color-dark) !important;}.ui.progress small,td:not(.button):not(.bar):not(:has(.button,.bar)):not(:has(> small)){filter:brightness(115%);}.ui.progress .bar,.nb-container .ui.icon.button,.service-status .delay-today>i{filter:brightness(85%);}.ui.button:hover{filter:brightness(100%) !important;}.ui.popup:before{background-color:var(--popup-color-dark) !important;box-shadow:0px 0px 0 0 #ffffff !important;}.amzayo-custom-button{background-color:#4d4d4d8f !important;color:rgba(178,178,178,0.95) !important;border:2px solid #292929ae !important;}.amzayo-custom-button:hover{background-color:#ff8457 !important;color:#ffffffbd !important;font-weight:bolder !important;}i.amzayo-secondary-font{color:#727272ae !important;}.ui.popup{background-color:rgba(78,78,78,1) !important;}.ui.menu .item:before{background:rgba(125,125,125,0.15);}.ui.menu .active.item{background:rgba(10,10,10,0.2);}.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(125,125,125,0.15);}}@media (min-width:320px){.ui-alerts.top-center{margin-left:0px !important;left:50%;transform:translate(-50%,-0%);}}@media (min-width:766px){.ui.container{width:80%;}.ui.table thead th{backdrop-filter:var(--bb);background-color:var(--the-color-light);}thead tr:first-child{border-radius:1rem 0 0 1rem !important;}thead tr:last-child{border-radius:0 1rem 1rem 0 !important;}.ui .cards>.card{border-radius:1rem;border:none !important;background-color:var(--lc-color-light);padding:.25rem .25rem !important;margin:.5rem .3rem !important;}.ui.card>.content>.header,.ui.cards>.card>.content>.header{padding-top:0;display:flex;color:rgba(0,0,0,.85);align-items:center;padding-bottom:.2em;border-bottom:1px solid rgba(0,0,0,.2);}.header_info{font-size:1rem !important;line-height:1rem !important;margin-top:.3rem !important;padding-right:.38rem !important;}}@media (max-width:766px){.ui.table thead{backdrop-filter:var(--bb);background-color:var(--the-color-light);}thead{border-radius:1rem !important;}thead tr{padding:0 !important;}.ui .cards>.card{border-radius:1rem;background-color:var(--lc-color-light);outline:none !important;}.ui.card>.content>.header,.ui.cards>.card>.content>.header{padding-top:0.5rem;display:flex;color:rgba(0,0,0,.85);align-items:center;padding-bottom:.2em;border-bottom:1px solid rgba(0,0,0,.2);}.header_info{font-size:1rem !important;line-height:1rem !important;padding-top:-.1rem !important;padding-right:.38rem !important;}}.ui.large.menu{backdrop-filter:var(--bb);background-color:var(--he-color-light);border-radius:0 0 1rem 1rem !important;}.ui.menu .item:last-child{padding:0 1.142em !important;}.ui.simple.dropdown{height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;}.right.menu .menu{border-radius:0 0 1rem 1rem !important;position:absolute;top:0 !important;background-color:var(--he-color-light);padding:0 0.3em !important;}.amzayo-custom-button{backdrop-filter:var(--bb);background-color:#ffffff8f;color:#000000cf;border:2px solid #ebe1d9;border-radius:1rem;padding:10px 20px;font-size:16px;}.amzayo-custom-button:hover{background-color:#ff8457;color:#ffffffbd;font-weight:bolder;}#app .ui.fluid.accordion{backdrop-filter:var(--bb);background-color:var(--bc-color-light);border-radius:1rem;}#app:last-child.accordion{margin-bottom:0 !important;}.cards{justify-content:center;}.ui.card,.ui.cards>.card{box-shadow:none !important;}i.amzayo-secondary-font{margin-left:auto;color:rgba(255,153,1,0.65);}.header_info i{margin-top:.25rem;margin-right:.3rem;margin-left:.3rem;}.ui.content.popup{backdrop-filter:var(--popup-filter);border:none !important;border-radius:1rem;margin:0;padding:1em !important;background-color:var(--popup-color-light);width:max-content;height:max-content;}.ui.popup{border:none !important;}.ui.content.popup:before{background-color:var(--popup-color-light);z-index:9999 !important;border:none !important;box-shadow:0px 0px 0 0 #ffffff !important;}.ui.bottom.popup:before{clip-path:polygon(0 0,100% 0,50% 50%,0 100%);}.ui.top.popup:before{clip-path:polygon(100% 100%,0% 100%,100% 0);}.ui.progress{border-radius:50rem;height:1.5rem;}.status.cards .wide.column{padding-top:0 !important;padding-bottom:0 !important;height:2rem !important;}.bi::before,[class^="bi-"]::before,[class*=" bi-"]::before{vertical-align:middle;margin-bottom:.2rem;}.card .bar{height:1.5rem;}.card .bar small{vertical-align:super;line-height:1.5rem;}.card .ui.progress .bar{min-width:1.8em !important;border-radius:13px;line-height:1.65em;height:1.5rem;}table .ui.progress .bar{border-radius:13px;}.nb-container .ui.progress.fine .bar{background-image:linear-gradient(to right,rgba(125,252,0,0.6),rgba(50,205,50,0.6));}.nb-container .ui.progress.warning .bar{background-image:linear-gradient(to right,rgba(255,215,0,0.6),rgba(255,125,80,0.6));}.nb-container .ui.progress.error .bar{background-image:linear-gradient(to right,rgba(255,160,120,0.6),rgba(255,70,0,0.6));}.ui.progress.offline .bar{background-color:#000;}i.arrow.alternate.circle.down.outline.icon{color:rgb(0,157,255);}i.arrow.alternate.circle.up.outline.icon{color:#ff0000;}.nb-container .service-status .good{background:rgba(50,205,50,0.75);}.nb-container .service-status .warning{background:rgba(250,155,40,0.75);}.nb-container .service-status .danger{background:rgba(255,35,0,0.75);}.table{backdrop-filter:var(--bb);background-color:var(--bc-color-light);border-radius:1rem !important;}.ui.table{background-color:var(--bc-color-light);}.ui.button:not(.good):not(.warning):not(.danger):hover{background:#e0e1e2 none;}.ui.button:hover{filter:brightness(0.9);}.service-status .delay-today{vertical-align:sub;}.service-status h2{backdrop-filter:var(--bb);background-color:var(--he-color-light);border-radius:1rem !important;margin:0 !important;}.footer{backdrop-filter:var(--bb);background-color:var(--he-color-light);position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;border-radius:1rem 1rem 0 0 !important;}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:var(--he-color-light);}.footer .container,.footer .container a{color:var(--message-color-light);}.footer .container a:hover{color:#ff8457 !important;}.floating.message.success{backdrop-filter:blur(15px) brightness(110%);background-color:var(--he-color-light);border:3px solid rgba(255.255.255.0.5);border-radius:1rem !important;color:var(--message-color-light);box-shadow:0 0 15px rgba(1,132,255,0.65);}.floating.message.success .header{color:var(--message-color-light);}.floating.message.warning{backdrop-filter:blur(15px) brightness(110%);background-color:var(--he-color-light);border:1px solid rgba(255.255.255.0.5);border-radius:1rem !important;color:var(--message-color-light);box-shadow:0 0 15px rgba(255,153,1,0.65);}.floating.message.warning .header{color:var(--message-color-light);}.cpucontent{display:inline-block;}.rollanimation{animation:scroll 10s cubic-bezier(.2,0,.8,1) infinite;}@keyframes scroll{0%{transform:translateX(0%);}30%{transform:translateX(0%);}100%{transform:translateX(-100%);}}.ui.mini.message{width:17rem;}.ui-alerts{padding:23px 0 !important;}td{word-wrap:break-word;word-break:break-all;}.nb-container{padding-top:75px;min-height:100vh;padding-bottom:65px;margin-bottom:-47px;}#app .ui.fluid.accordion{margin-bottom:1rem;}.login.nb-container{display:flex;align-items:center;padding-top:unset;}.login.nb-container>.grid{width:100%;margin:0 auto;}.login.nb-container>.grid .column{max-width:450px;}.status.cards .flag{margin-right:0 !important;}.status.cards .header>.info.icon{float:right;margin-right:0;}.status.cards .wide.column{padding-top:0 !important;padding-bottom:0 !important;height:2rem !important;}.status.cards .three.wide.column{padding-right:0 !important;}.status.cards .wide.column:nth-child(1){margin-top:1rem !important;}.status.cards .wide.column:nth-child(2){margin-top:1rem !important;}.status.cards .description{padding-bottom:1rem !important;}.status.cards .ui.content.popup{min-width:250px;}.status.cards .outline.icon{margin-right:0 !important;}.ui.progress .bar{min-width:1.26em !important;text-align:right;padding-right:0.4em;line-height:1.75em;color:rgba(255,255,255,0.7);font-weight:700;max-width:100% !important;}.service-status .delay-today{display:flex;align-items:center;}.service-status .delay-today>i{display:inline-block;width:1.2em;height:1.2em;border-radius:0.6em;background-color:grey;margin-right:0.3em;}</style>
2.带到期时间及续费链接的主题
前台界面主题 serverstatus
自定义代码 affLinks自己填写主机ID信息
<script>
localStorage.setItem('showGroup', 'true');
</script>
<script>
// 1.改首页logo,将https://替换为你的Logo URL
window.addEventListener('DOMContentLoaded', (event) => {
var logo = document.querySelector('.navbar-brand img');
if (logo) {
logo.src = 'https://deweb.ariesjon.xyz/Video /IMG_0408.webp'; // 将 URL 替换为你的Logo URL
}
});
</script>
<style>
/* 强制隐藏 toggleView 和 toggleSemiTransparent */
.toggleView, .toggleSemiTransparent {
display: none !important; /* 强制隐藏这些元素 */
}
</style>
<script>
window.onload = function() {
// 禁用 .toggleView 的交互
var toggleView = document.querySelector('.toggleView');
if (toggleView) {
toggleView.style.pointerEvents = 'none'; // 禁用点击
toggleView.style.cursor = 'default'; // 改变鼠标指针为默认状态
}
// 禁用 .toggleSemiTransparent 的交互
var toggleSemiTransparent = document.querySelector('.toggleSemiTransparent');
if (toggleSemiTransparent) {
toggleSemiTransparent.style.pointerEvents = 'none'; // 禁用点击
toggleSemiTransparent.style.cursor = 'default'; // 改变鼠标指针为默认状态
}
};
</script>
<!-- 暗黑模版 -->
<style>
/* 暗黑自改样式 */
body[theme="dark"] {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(0, 0, 0, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
color: #f1f1f1;
position: relative;
overflow-x: hidden; /* 防止超出水平滚动 */
}
/* PC端视频背景设置 */
video#background-video-pc {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover; /* 视频自动适应屏幕 */
z-index: -1;
opacity: 1 !important; /* 视频完全不透明 */
}
/* 手机端视频背景设置 */
video#background-video-mobile {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover; /* 视频自动适应屏幕 */
z-index: -1;
opacity: 1 !important; /* 视频完全不透明 */
}
/* 隐藏内容区域 */
.overlay {
display: none; /* 隐藏页面内容 */
}
/* 导航条和内容的背景与样式 */
body[theme="dark"] .navbar {
background-color: rgba(0, 0, 0, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
box-shadow: none;
border: none;
}
body[theme="dark"] .navbar .navbar-brand {
color: #ffffff;
}
body[theme="dark"] .navbar .dropdown-menu {
background-color: rgba(0, 0, 0, 0.68); /* 原透明度 0.85 降低 20% 为 0.68 */
border-top: none;
border-color: #31363b;
box-shadow: rgba(0, 0, 0, 0.144) 0px 6px 12px; /* 原透明度 0.18 降低 20% */
}
body[theme="dark"] .navbar .dropdown-menu > li > a {
color: #c8c3bc;
}
body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
background-color: rgba(0, 0, 0, 0.76); /* 原透明度 0.95 降低 20% 为 0.76 */
background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
}
body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: #f1f1f1;
}
body[theme="dark"] .table,
body[theme="dark"] .table-condensed > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr:hover,
body[theme="dark"] .table-striped tbody > tr.even,
body[theme="dark"] .table-striped tbody > tr.odd,
body[theme="dark"] .table-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th,
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th,
body[theme="dark"] .table-striped tbody > tr.even > td:hover,
body[theme="dark"] .table-striped tbody > tr.even > th:hover,
body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
background-color: transparent !important;
}
body[theme="dark"] .content {
background-color: rgba(28, 29, 38, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
border: none;
box-shadow: rgba(0, 0, 0, 0.4) 0 0.625em 2em; /* 原透明度 0.5 降低 20% 为 0.4 */
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0.625em 2em; /* 原透明度 0.5 降低 20% 为 0.4 */
}
body[theme="dark"] .table > thead > tr.node-group-tag > th,
body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
background: unset;
}
body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
background-color: rgba(155, 155, 155, 0.08); /* 原透明度 0.1 降低 20% 为 0.08 */
}
body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: unset;
}
body[theme="dark"] .progress {
background-image: none;
background-color: rgba(255, 255, 255, 0.06); /* 原透明度 0.075 降低 20% 为 0.06 */
}
</style>
<!-- 白色透明模版 -->
<style>
/* 白色样式 */
body[theme="light"] {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(255, 255, 255, 0.4); /* 将背景透明度降低至50% */
color: #333333; /* 深色字体 */
position: relative;
overflow-x: hidden; /* 防止超出水平滚动 */
}
/* PC端视频背景设置 */
video#background-video-pc {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover; /* 视频自动适应屏幕 */
z-index: -1;
opacity: 1; /* 视频透明度 */
}
/* 手机端视频背景设置 */
video#background-video-mobile {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover; /* 视频自动适应屏幕 */
z-index: -1;
opacity: 1; /* 视频透明度 */
}
/* 隐藏内容区域 */
.overlay {
display: none; /* 隐藏页面内容 */
}
/* 导航条和内容的背景与样式 */
body[theme="light"] .navbar {
background-color: rgba(255, 255, 255, 0.4); /* 导航栏透明度降低50% */
box-shadow: none;
border: none;
}
body[theme="light"] .navbar .navbar-brand {
color: #333333; /* 深色文字 */
}
body[theme="light"] .navbar .dropdown-menu {
background-color: rgba(255, 255, 255, 0.425); /* 菜单透明度降低50% */
border-top: none;
border-color: #cccccc;
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}
body[theme="light"] .navbar .dropdown-menu > li > a {
color: #666666; /* 浅灰色文字 */
}
body[theme="light"] .navbar .dropdown-menu > li > a:focus,
body[theme="light"] .navbar .dropdown-menu > li > a:hover {
background-color: rgba(255, 255, 255, 0.475);
background-image: linear-gradient(#f9f9f9 0, #f9f9f9 100%);
}
body[theme="light"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: #333333;
}
/* 表格透明背景 */
body[theme="light"] .table,
body[theme="light"] .table-condensed > tbody > tr,
body[theme="light"] .table-hover > tbody > tr,
body[theme="light"] .table-hover > tbody > tr:hover,
body[theme="light"] .table-striped tbody > tr.even,
body[theme="light"] .table-striped tbody > tr.odd,
body[theme="light"] .table-striped tbody > tr.even > td,
body[theme="light"] .table-striped tbody > tr.even > th,
body[theme="light"] .table-striped tbody > tr.odd > td,
body[theme="light"] .table-striped tbody > tr.odd > th,
body[theme="light"] .table-striped tbody > tr.even > td:hover,
body[theme="light"] .table-striped tbody > tr.even > th:hover,
body[theme="light"] .table-striped tbody > tr.odd > td:hover,
body[theme="light"] .table-striped tbody > tr.odd > th:hover,
body[theme="light"] .table-striped tbody > tr.expandRow:hover {
background-color: transparent !important;
}
/* 明确设置thead和tbody的透明背景 */
body[theme="light"] .table > thead > tr,
body[theme="light"] .table > thead > tr > th,
body[theme="light"] .table > tbody > tr,
body[theme="light"] .table > tbody > tr > td {
background-color: transparent !important; /* 确保thead, tbody, td, th透明 */
}
/* 表格hover状态透明 */
body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: rgba(255, 255, 255, 0.1) !important; /* hover状态透明度降低至50% */
}
/* 内容透明背景 */
body[theme="light"] .content {
background-color: rgba(255, 255, 255, 0.4); /* 内容透明度降低至50% */
border: none;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}
/* 进度条 */
body[theme="light"] .progress {
background-image: none;
background-color: rgba(255, 255, 255, 0.0375); /* 进度条透明度降低至50% */
}
</style>
<!-- 视频标签 -->
<!-- PC端视频 -->
<video id="background-video-pc" autoplay muted loop playsinline style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
<source src="https://deweb.ariesjon.xyz/Video /dn.MP4 " type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- 手机端视频 -->
<video id="background-video-mobile" autoplay muted loop playsinline style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
<source src="https://deweb.ariesjon.xyz/Video /sj.MP4 " type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- 背景图片 -->
<div id="background-image-pc" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://deweb.ariesjon.xyz/Video%20/dn1.JPG') no-repeat center center/cover; z-index: -1;"></div>
<div id="background-image-mobile" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://deweb.ariesjon.xyz/Video%20/sj5.JPG') no-repeat center center/cover; z-index: -1;"></div>
<!-- 页面内容 -->
<div class="overlay" style="position: relative; z-index: 1;">
<h1>动态背景视频</h1>
<p>PC和手机端根据设备类型加载不同的背景。</p>
</div>
<!-- JavaScript 用于检测设备、浏览器内核支持 -->
<script>
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
function isBrowserSupported() {
var videoElement = document.createElement('video');
return !!videoElement.canPlayType && videoElement.canPlayType('video/mp4') !== '';
}
function isThirdPartyApp() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
return /FBAN|FBAV|Instagram|Messenger|Line|WeChat|QQ|TikTok|Douyin/i.test(userAgent);
}
function canPlayVideo() {
var videoElement = document.createElement('video');
return !!videoElement.canPlayType && (videoElement.canPlayType('video/mp4') !== '' || videoElement.canPlayType('video/quicktime') !== '');
}
window.onload = function() {
var videoPc = document.getElementById("background-video-pc");
var videoMobile = document.getElementById("background-video-mobile");
var imagePc = document.getElementById("background-image-pc");
var imageMobile = document.getElementById("background-image-mobile");
var isMobile = isMobileDevice();
var supportVideo = canPlayVideo();
var isThirdParty = isThirdPartyApp();
if (supportVideo && !isThirdParty) {
// 如果支持视频播放且不是第三方应用
if (isMobile) {
videoMobile.style.display = "block"; // 显示手机端视频
videoMobile.play(); // 确保视频播放
} else {
videoPc.style.display = "block"; // 显示PC端视频
videoPc.play(); // 确保视频播放
}
} else {
// 如果不支持视频播放，显示图片背景
if (isMobile) {
imageMobile.style.display = "block"; // 显示手机端图片背景
} else {
imagePc.style.display = "block"; // 显示PC端图片背景
}
}
};
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
try {
var downtimeCells = document.querySelectorAll('th.node-cell.os.center');
if (!downtimeCells) throw new Error('找不到表头列');
downtimeCells.forEach(function(cell) {
var newTh = document.createElement('th');
newTh.className = 'node-cell downtime center';
newTh.textContent = '到期倒计时';
newTh.style.minWidth = '120px';
cell.parentNode.insertBefore(newTh, cell.nextSibling);
var renewalTh = document.createElement('th');
renewalTh.className = 'node-cell renewal center';
renewalTh.textContent = '金额/周期/续费';
renewalTh.style.minWidth = '120px';
cell.parentNode.insertBefore(renewalTh, newTh.nextSibling);
});
const affLinks = {
1: { startDate: new Date('2024-09-13T00:00:00+08:00'), endDate: new Date('2024-10-13T00:00:00+08:00'), amount: '23 HKD / Monthly', link: 'https://members.juhost.com/clientarea.php?action=productdetails&id=6198' },
2: { startDate: new Date('2024-09-04T00:00:00+08:00'), endDate: new Date('2025-09-04T00:00:00+08:00'), amount: '25 USD / Annually', link: 'https://server.zgocloud.cc/server/84f4fd2f-52fc-46cb-b370-de53cf9e3998' },
3: { startDate: new Date('2024-09-13T00:00:00+08:00'), endDate: new Date('2024-10-13T00:00:00+08:00'), amount: '14 CNY / Monthly', link: 'https://wap.ac/clientarea.php?action=productdetails&id=18535' },
4: { startDate: new Date('2024-09-10T00:00:00+08:00'), endDate: new Date('2024-10-10T00:00:00+08:00'), amount: '1.2 EUR / Monthly', link: 'https://index-hosting.de/clientarea.php' },
13: { startDate: new Date('2024-09-18T00:00:00+08:00'), endDate: new Date('2024-10-18T00:00:00+08:00'), amount: '11 CNY / Monthly', link: 'https://yunyoo.cc/clientarea' },
8: { startDate: new Date('2024-08-28T00:00:00+08:00'), endDate: new Date('2024-10-28T00:00:00+08:00'), amount: '3 USD / Monthly', link: 'https://yxvm.com/clientarea.php?action=productdetails&id=18054' },
9: { startDate: new Date('2024-09-22T00:00:00+08:00'), endDate: new Date('2024-10-22T00:00:00+08:00'), amount: '3 USD / Monthly', link: 'https://yxvm.com/clientarea.php?action=productdetails&id=18054' },
10: { startDate: new Date('2024-09-21T19:46:00+08:00'), endDate: new Date('2024-10-21T19:46:00+08:00'), amount: '2 CNY / Monthly', link: 'https://yunyoo.cc/clientarea' },
};
const createCountdown = (startDate, endDate) => {
const $countdown = document.createElement('div');
$countdown.className = 'countdown';
$countdown.style.position = 'relative';
$countdown.style.width = '100%';
$countdown.style.height = '20px';
$countdown.style.backgroundColor = '#3e3e3e';
$countdown.style.borderRadius = '4px';
$countdown.style.overflow = 'hidden';
const $progress = document.createElement('div');
$progress.className = 'progress';
$progress.style.position = 'absolute';
$progress.style.height = '100%';
$progress.style.width = '0%';
$progress.style.backgroundImage = 'linear-gradient(to right, #48dbfb, #feca57, #ff6b6b)';
$progress.style.transition = 'width 0.6s ease';
$progress.style.borderRadius = '4px 0 0 4px';
const $countdownTime = document.createElement('div');
$countdownTime.style.position = 'absolute';
$countdownTime.style.width = '100%';
$countdownTime.style.height = '100%';
$countdownTime.style.display = 'flex';
$countdownTime.style.alignItems = 'center';
$countdownTime.style.justifyContent = 'space-between'; // 左右对齐
$countdownTime.style.color = '#fff';
$countdownTime.style.fontWeight = 'bold';
$countdownTime.style.fontSize = 'inherit';
$countdownTime.style.textShadow = '1px 1px 2px rgba(0,0,0,0.7)';
$countdownTime.style.padding = '0 7.5px'; // 左右内边距
const updateCountdown = () => {
const now = new Date();
const totalDuration = endDate.getTime() - startDate.getTime();
const elapsedDuration = now.getTime() - startDate.getTime();
const remainingDuration = endDate.getTime() - now.getTime();
if (remainingDuration <= 0) {
$countdownTime.innerHTML = '<span>已过期</span>';
$progress.style.width = '100%';
$progress.style.backgroundColor = '#ff0000';
$progress.style.backgroundImage = 'none';
return;
}
const days = Math.floor(remainingDuration / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingDuration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingDuration % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingDuration % (1000 * 60)) / 1000);
const progressPercent = (elapsedDuration / totalDuration) * 100;
if (days > 0) {
$countdownTime.innerHTML = `
<span>${days} day</span>
<span>${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>
`;
} else {
$countdownTime.innerHTML = `
<span></span>
<span>${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>
`;
}
$progress.style.width = `${progressPercent}%`;
};
updateCountdown();
setInterval(updateCountdown, 1000);
$countdown.appendChild($progress);
$countdown.appendChild($countdownTime);
return $countdown;
};
const rows = document.querySelectorAll('tr');
rows.forEach((row) => {
let osCell = row.querySelector('td.node-cell.os.center');
if (!osCell) return;
let downtimeCell = document.createElement('td');
downtimeCell.classList.add('node-cell', 'downtime', 'center');
downtimeCell.style.minWidth = '120px';
let renewalCell = document.createElement('td');
renewalCell.classList.add('node-cell', 'renewal', 'center');
renewalCell.style.minWidth = '120px';
let nodeId = row.id ? row.id.substring(1) : null;
if (!nodeId || !affLinks[nodeId]) {
downtimeCell.textContent = '无信息';
renewalCell.textContent = '无信息';
osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
osCell.parentNode.insertBefore(renewalCell, downtimeCell.nextSibling);
return;
}
let affLink = affLinks[nodeId];
if (affLink.startDate && affLink.endDate) {
let countdown = createCountdown(affLink.startDate, affLink.endDate);
downtimeCell.appendChild(countdown);
} else {
downtimeCell.textContent = '无到期信息';
}
let amountText = affLink.amount ? affLink.amount.replace(/[\$€¥]/g, '') : '无信息';
let link = affLink.link || '#';
renewalCell.className = "node-cell buy";
renewalCell.style.textAlign = "center";
renewalCell.innerHTML = `
<div class="ui basic label mini" style="min-height: 20px; padding: 0 .5em; height: 20px; font-weight: normal; line-height: 20px; font-size: .78571429rem;">
${amountText}
</div>
<a class="ui icon button mini green" href="${link}" target="_blank" style="min-height: 20px; padding: 0 5px; line-height: 20px;">续费</a>
`;
osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
osCell.parentNode.insertBefore(renewalCell, downtimeCell.nextSibling);
});
} catch (error) {
console.error('发生错误:', error.message);
}
});
</script>
最后的最后还是得感谢下各位大佬
哪吒面板: https://nezha.wiki
amzayo 大佬改的主题：https://blog.amzayo.com/archives/na-zha-tan-zhen-mei-hua
FCB大佬提供Ping地址: https://www.nodeseek.com/post-56429-1