<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #d3d3d3 25%, #b3c0ff 100%);
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.3s ease;
box-sizing: border-box;
}
.online-time {
font-size: 1.5rem;
color: #333;
margin: 20px 0;
padding: 10px 20px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.online-time:hover {
background-color: rgba(0, 123, 255, 0.8);
color: #fff;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
max-width: 1200px;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.card {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
width: calc(100% - 16px); /* Single column for mobile */
max-width: 300px;
min-width: 200px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
}
@media(min-width: 600px) {
.card {
width: calc(48% - 16px); /* Two columns for tablets */
}
}
@media(min-width: 900px) {
.card {
width: calc(32% - 16px); /* Three columns for desktops */
}
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
border-radius: 16px;
background: rgba(12, 12, 12, 0.7); /* 透明度为 70% 的高级黑 */
color: white;
border-color: red; /* 鼠标悬停时的边框颜色 */
animation: border-color-change 5s infinite linear; /* 卡片外边框变色动画 */
}
.card-header:hover {
border-color: red; /* 鼠标悬停时的边框颜色 */
animation: border-color-change 5s infinite linear; /* 卡片外边框变色动画 */
}
@keyframes border-color-change {
0% { border-color: red; }
14% { border-color: orange; }
28% { border-color: yellow; }
42% { border-color: green; }
57% { border-color: blue; }
71% { border-color: indigo; }
85% { border-color: violet; }
100% { border-color: red; }
}
.card-header {
background: rgba(255, 255, 255, 0.3);
color: #183153;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.card-header h2 {
margin: 0;
font-size: 1.5rem;
}
.card-content {
padding: 20px;
}
.card-content p {
margin: 0;
color: #555; /* 深灰色文字 */
line-height: 1.6;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #007bff; /* 设置为 #007bff */
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease-in-out, transform 0.3s ease;
}
.button:hover {
background-color: #0056b3; /* hover 状态的颜色 */
transform: scale(1.05);
}
body.night {
background: linear-gradient(135deg, #0c0c0c 25%, #1f1f1f 100%);
}
body.night .card,
body.night .card-header {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.2);
}
body.night .card-content p,
body.night .card-header h2 {
color: #ddd;
}
body.night .button {
background-color: #555;
}
body.night .button:hover {
background-color: #333;
}
</style>
<title>服务可用性监控面板</title>
</head>
<body>
<div class="online-time" id="online-time">加载中...</div>
<div class="container">
<div class="card" data-id="8">
<div class="card-header">
<h2>博客</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/8/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/8/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/8/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/8/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/8/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/8/response" alt="1小时响应延迟" />
</p>
</div>
</div>
<div class="card" data-id="9">
<div class="card-header">
<h2>导航</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/9/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/9/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/9/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/9/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/9/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/9/response" alt="1小时响应延迟" />
</p>
</div>
</div>
<div class="card" data-id="10">
<div class="card-header">
<h2>eie.email</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/10/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/10/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/10/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/10/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/10/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/10/response" alt="1小时响应延迟" />
</p>
</div>
</div>
<div class="card" data-id="11">
<div class="card-header">
<h2>资源库</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/11/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/11/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/11/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/11/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/11/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/11/response" alt="1小时响应延迟" />
</p>
</div>
</div>
<div class="card" data-id="12">
<div class="card-header">
<h2>图床</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/12/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/12/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/12/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/12/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/12/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/12/response" alt="1小时响应延迟" />
</p>
</div>
</div>
<div class="card" data-id="14">
<div class="card-header">
<h2>工具箱</h2>
</div>
<div class="card-content">
<p>
<img src="https://ping.0vk.com/api/badge/14/status" alt="状态" /><br>
<img src="https://ping.0vk.com/api/badge/14/cert-exp?labelPrefix=SSL+" alt="数字证书剩余天数" /><br>
<img src="https://ping.0vk.com/api/badge/14/uptime" alt="网站在线率" /><br>
<img src="https://ping.0vk.com/api/badge/14/ping/1" alt="1小时延迟" /><br>
<img src="https://ping.0vk.com/api/badge/14/avg-response/1" alt="1小时平均响应" /><br>
<img src="https://ping.0vk.com/api/badge/14/response" alt="1小时响应延迟" />
</p>
</div>
</div>
</div>
<script type="2af49164883e344a71573d36-text/javascript">
function toggleDayNightMode() {
const hour = new Date().getHours();
document.body.classList.toggle('night', hour < 7 || hour > 19);
}
function updateTime() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://worldtimeapi.org/api/timezone/Asia/Shanghai", true);
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
const date = new Date(response.datetime);
const offset = date.getTime() - Date.now();
function updateClock() {
const now = new Date(Date.now() + offset);
document.getElementById('online-time').textContent = now.toLocaleTimeString();
}
setInterval(updateClock, 1000); // Update time every second
updateClock(); // Initial call
} else {
document.getElementById('online-time').textContent = '加载失败';
}
};
xhr.onerror = function() {
document.getElementById('online-time').textContent = '加载失败';
};
xhr.send();
}
document.addEventListener('DOMContentLoaded', function() {
toggleDayNightMode();
setInterval(toggleDayNightMode, 60000);
updateTime();
});
</script>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2af49164883e344a71573d36-|49" defer></script></body>
</html>