哪吒探针美化：ServerStatus主题

不想尝悲欢 · 发表于 2024-10-11 12:46:36

很多配置都是论坛里面借鉴的，应该是没做手机适配 xhj021 有动手能力的自己做一下
演示探针地址 AzimiのVPS (mygo.li)

<style>
/* 设置页面宽度 */
.container {
width: 1400px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var downtimeCells = document.querySelectorAll('th.node-cell.status.center');
downtimeCells.forEach(function(cell) {
var newTh = document.createElement('th');
newTh.className = 'node-cell downtime center';
newTh.textContent = '剩余时间';
cell.parentNode.insertBefore(newTh, cell.nextSibling);
});
});
document.addEventListener('DOMContentLoaded', function() {
const affLinks = {
1: {
startDate: new Date('2024-05-01T00:00:00+08:00'),
expirationDate: new Date('2025-05-04T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},
2: {
startDate: new Date('2024-05-15T00:00:00+08:00'),
expirationDate: new Date('2026-05-15T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},
};
const createLink = (linkConfig) => {
const $link = document.createElement('a');
$link.href = linkConfig.value;
$link.textContent = linkConfig.label || linkConfig.value;
if (linkConfig.icon) {
const $icon = document.createElement('img');
$icon.src = linkConfig.icon;
$icon.alt = linkConfig.iconAlt || '';
$link.appendChild($icon);
}
if (linkConfig.text) {
const $text = document.createElement('span');
$text.textContent = linkConfig.text;
$link.appendChild(document.createTextNode(' '));
$link.appendChild($text);
}
return $link;
};
const createIcon = (iconConfig) => {
const $icon = document.createElement('img');
$icon.src = iconConfig.value;
$icon.alt = iconConfig.label || 'Icon';
if (iconConfig.text) {
const $text = document.createElement('span');
$text.textContent = iconConfig.text;
$icon.appendChild(document.createTextNode(' '));
$icon.appendChild($text);
}
return $icon;
};
const createSmokeAnimation = () => {
const $smokeContainer = document.createElement('div');
$smokeContainer.className = 'smoke-container';
for (let i = 0; i < 5; i++) {
const $particle = document.createElement('div');
$particle.className = 'smoke-particle';
$smokeContainer.appendChild($particle);
}
return $smokeContainer;
};
const createCountdown = (startDate, expirationDate) => {
const total = expirationDate.getTime() - startDate.getTime();
const $countdownContainer = document.createElement('div');
$countdownContainer.style.position = 'relative';
$countdownContainer.style.width = '100%';
$countdownContainer.style.backgroundColor = '#333';
$countdownContainer.style.borderRadius = '5px';
$countdownContainer.style.overflow = 'hidden';
$countdownContainer.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3)'; // 背景3D效果
$countdownContainer.style.background = 'linear-gradient(to bottom, #444, #222)'; // 背景渐变效果
const $progressBar = document.createElement('div');
$progressBar.style.position = 'absolute';
$progressBar.style.top = '0';
$progressBar.style.left = '0';
$progressBar.style.height = '100%';
$progressBar.style.backgroundColor = '#388e3c'; // 调暗后的绿色进度条
$progressBar.style.width = '0%';
$progressBar.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3)'; // 进度条3D效果
const $countdownTime = document.createElement('span');
$countdownTime.style.position = 'relative';
$countdownTime.style.zIndex = '1';
$countdownTime.style.color = '#fff'; // 恢复为白色字体
$countdownTime.style.padding = '5px';
$countdownTime.style.fontSize = '12px'; // 调小字体
$countdownTime.textContent = ' ';
const $smoke = createSmokeAnimation();
const updateCountdown = () => {
const now = new Date();
const diff = now.getTime() - startDate.getTime();
// 判断是否为特殊日期
if (startDate.getTime() === new Date('9999-01-01T00:00:00+08:00').getTime() &&
expirationDate.getTime() === new Date('9999-01-01T00:00:00+08:00').getTime()) {
$progressBar.style.width = '100%';
$progressBar.style.backgroundColor = '#2e7d32'; // 特殊情况的颜色（绿色）
$countdownTime.textContent = '999天';
return;
}
if (diff >= total) {
clearInterval(countdownInterval);
$countdownTime.textContent = '已过期';
$progressBar.style.backgroundColor = '#c62828'; // 到期后的深红色进度条
$progressBar.style.width = '100%';
return;
}
const remainingDays = Math.ceil((total - diff) / (1000 * 60 * 60 * 24));
$countdownTime.textContent = `${remainingDays} days`;
const progress = 100 - (diff / total) * 100;
$progressBar.style.width = `${progress}%`;
// 根据剩余进度设置进度条颜色
if (progress <= 5) {
$progressBar.style.backgroundColor = '#c05000'; // 橙色
} else if (progress <= 20) {
$progressBar.style.backgroundColor = '#f9a825'; // 黄色
} else {
$progressBar.style.backgroundColor = '#388e3c'; // 绿色
}
// 更新烟雾动画的位置
$smoke.style.left = `${progress}%`;
};
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
$countdownContainer.appendChild($progressBar);
$progressBar.appendChild($smoke);
$countdownContainer.appendChild($countdownTime);
return $countdownContainer;
};
const rows = document.querySelectorAll('tr');
rows.forEach((row) => {
let osCell = row.querySelector('td.node-cell.status.center');
let downtimeCell = document.createElement('td');
downtimeCell.classList.add('node-cell', 'downtime', 'center');
let nodeId = row.id.substring(1);
let affLink = affLinks[nodeId];
if (!affLink) {
affLink = {
content: {
type: 'text',
value: ' '
}
};
}
if (osCell && affLink && affLink.content) {
switch (affLink.content.type) {
case 'link':
let link = createLink(affLink.content);
downtimeCell.appendChild(link);
break;
case 'icon':
let icon = createIcon(affLink.content);
downtimeCell.appendChild(icon);
break;
default:
let text = document.createTextNode(affLink.content.value);
downtimeCell.appendChild(text);
break;
}
if (affLink.startDate && affLink.expirationDate) {
let countdown = createCountdown(affLink.startDate, affLink.expirationDate);
downtimeCell.appendChild(countdown);
}
osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
}
});
});
</script>
<style>
@keyframes smoke {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-20px) scale(0.5);
opacity: 0;
}
}
.smoke-container {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
overflow: visible;
}
.smoke-particle {
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: rgba(144, 238, 144, 0.7); /* 淡绿色 */
border-radius: 50%;
animation: smoke 1s infinite;
}
.smoke-particle:nth-child(1) {
left: 0;
animation-delay: 0s;
}
.smoke-particle:nth-child(2) {
left: 2px;
animation-delay: 0.2s;
}
.smoke-particle:nth-child(3) {
left: 4px;
animation-delay: 0.4s;
}
.smoke-particle:nth-child(4) {
left: 6px;
animation-delay: 0.6s;
}
.smoke-particle:nth-child(5) {
left: 8px;
animation-delay: 0.8s;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var downtimeCells = document.querySelectorAll('th.node-cell.name.center');
downtimeCells.forEach(function(cell) {
// 创建一个新的 <th> 元素
var newTh = document.createElement('th');
// 添加 class 属性
newTh.className = 'node-cell downtime center';
// 设置新元素的文本内容
newTh.textContent = '价格';
// 将新元素插入到当前单元格的后面
cell.parentNode.insertBefore(newTh, cell.nextSibling);
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const affLinks = {
1: {
content: {
type: 'text',
value: '231 $/year'
}
},
2: {
content: {
type: 'text',
value: '199 ¥/year'
}
},
};
const createLink = (linkConfig) => {
const $link = document.createElement('a');
$link.href = linkConfig.value;
$link.textContent = linkConfig.label || linkConfig.value;
if (linkConfig.icon) {
const $icon = document.createElement('img');
$icon.src = linkConfig.icon;
$icon.alt = linkConfig.iconAlt || '';
$link.appendChild($icon);
}
if (linkConfig.text) {
const $text = document.createElement('span');
$text.textContent = linkConfig.text;
$link.appendChild(document.createTextNode(' '));
$link.appendChild($text);
}
return $link;
};
const createIcon = (iconConfig) => {
const $icon = document.createElement('img');
$icon.src = iconConfig.value;
$icon.alt = iconConfig.label || 'Icon';
if (iconConfig.text) {
const $text = document.createElement('span');
$text.textContent = iconConfig.text;
$icon.appendChild(document.createTextNode(' '));
$icon.appendChild($text);
}
return $icon;
};
const createCountdown = (expirationDate) => {
const $countdown = document.createElement('div');
$countdown.textContent = ' ';
const $countdownTime = document.createElement('span');
const updateCountdown = () => {
const now = new Date();
const diff = expirationDate.getTime() - now.getTime();
if (diff <= 0) {
clearInterval(countdownInterval);
$countdownTime.textContent = '已过期';
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
$countdownTime.textContent = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
};
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
$countdown.appendChild($countdownTime);
return $countdown;
};
const rows = document.querySelectorAll('tr');
rows.forEach((row, index) => {
let osCell = row.querySelector('td.node-cell.name.center');
let downtimeCell = document.createElement('td');
downtimeCell.classList.add('node-cell', 'downtime', 'center');
let nodeId = row.id.substring(1);
let affLink = affLinks[nodeId];
if (!affLink) {
affLink = {
content: {
type: 'text',
value: '未定义'
}
};
}
if (osCell && affLink && affLink.content) {
switch (affLink.content.type) {
case 'link':
let link = createLink(affLink.content);
downtimeCell.appendChild(link);
break;
case 'icon':
let icon = createIcon(affLink.content);
downtimeCell.appendChild(icon);
break;
default:
let text = document.createTextNode(affLink.content.value);
downtimeCell.appendChild(text);
break;
}
if (affLink.expiration) {
let countdown = createCountdown(affLink.expiration);
downtimeCell.appendChild(countdown);
}
osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
}
});
});
</script>
<style>
body[theme="dark"]::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url(https://pic.imgdb.cn/item/66d5c53cd9c307b7e9320564.jpg) no-repeat 50% 50%;
background-size: cover;
z-index: -1;
}
body[theme="dark"] {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background: rgba(0, 0, 0, 0.8);
color: #f1f1f1;
}
body[theme="dark"]::after {
content: "";
position: fixed;
}
body[theme="dark"] .navbar {
background-color: rgba(0, 0, 0, 0.3);
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.85);
border-top: none;
border-color: #31363b;
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}
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.95);
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.8);
border: none;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}
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.1);
}
body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: unset;
}
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
background-color: unset;
}
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
background-color: unset;
}
body[theme="dark"] .progress {
background-image: none;
background-color: rgba(255, 255, 255, 0.075);
}
body[theme="light"]::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url(https://pic.imgdb.cn/item/66d5c53cd9c307b7e9320564.jpg) no-repeat 50% 50%;
background-size: cover;
z-index: -1;
}
body[theme="light"] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(255, 255, 255, 0.8);
color: #333333;
}
body[theme="light"]::after {
content: "";
position: fixed;
}
body[theme="light"] .navbar {
background-color: rgba(255, 255, 255, 0.9);
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.95);
border-top: none;
border-color: #e0e0e0;
box-shadow: rgba(0, 0, 0, 0.1) 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(240, 240, 240, 0.95);
background-image: linear-gradient(#fafafa 0, #fafafa 100%);
}
body[theme="light"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: #333333;
}
body[theme="light"] .navbar .navbar-nav > li > a {
color: #312828;
}
body[theme="light"] .navbar .navbar-nav > li > a:active {
color: #000000;
}
body[theme="light"] .navbar .navbar-nav > li > a:hover {
color: #000000;
}
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;
}
body[theme="light"] .content {
background-color: rgba(245, 245, 245, 0.8);
border: none;
box-shadow: rgba(0, 0, 0, 0.1) 0 0.625em 2em;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0.625em 2em;
}
body[theme="light"] .table > thead > tr.node-group-tag > th,
body[theme="light"] .table > thead > tr.node-group-tag > th:before {
background: unset;
}
body[theme="light"] .table > tbody > tr > td:before,
body[theme="light"] .table > tfoot > tr > td:before,
body[theme="light"] .table > thead > tr > td:before,
body[theme="light"] .table > thead > tr.node-group-cell > th:before{
background-color: rgba(200, 200, 200, 0.1);
}
body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: unset;
}
body[theme="light"] .table > tbody > tr.expandRow.odd > td:before{
background-color: unset;
}
body[theme="light"] .table > tbody > tr.expandRow.even > td:before{
background-color: unset;
}
body[theme="light"] .progress {
background-image: none;
background-color: rgba(0, 0, 0, 0.075);
}
</style>
<script>
document.querySelector('.setTheme').addEventListener('click', function() {
var body = document.body;
if (body.getAttribute('theme') === 'dark') {
body.setAttribute('theme', 'light');
} else {
body.setAttribute('theme', 'dark');
}
});
</script>
<span class="js-cursor-container"></span>
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>

复制代码

孤独无败 · 发表于 2024-10-11 12:56:57

看帖要回，回帖才健康，在踩踩，楼主辛苦了！

乐观 · 发表于 2024-10-11 12:56:57

佩服佩服！

顺其自然 · 发表于 2024-10-11 12:56:57

打酱油的人拉，回复下赚取积分

心有翅膀 · 发表于 2024-10-11 12:56:57

楼下的接上

[源码] 哪吒探针美化：ServerStatus主题

关于我们

热门版块

[email protected]