DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

更新

Browse Source
This commit is contained in:
Alex Yang
2025-11-29 23:40:01 +08:00
parent 26889f5b38
commit 70cf1a7306
30 changed files with 1644023 additions and 817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
static/index.html
View File

@@ -8,224 +8,12 @@
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Chart.js -->
<!-- Chart.js 本地备用 -->
<script src="js/vendor/chart.umd.min.js" onerror="this.onerror=null;this.src='js/chart.umd.min.js';"></script>
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFFB',
success: '#00B42A',
warning: '#FF7D00',
danger: '#F53F3F',
info: '#86909C',
dark: '#1D2129',
light: '#F2F3F5',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<script src="js/vendor/tailwind.js"></script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.sidebar-item-active {
background-color: rgba(22, 93, 255, 0.1);
color: #165DFF;
border-right: 4px solid #165DFF;
}
}
</style>
<!-- 数字光晕效果样式 -->
<style>
/* 数字光晕效果基础样式 */
.number-glow {
animation: glow-pulse 2s ease-in-out;
}
/* 服务器状态组件光晕效果 */
.glow-effect {
animation: pulse 2s ease-in-out;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(41, 128, 185, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0);
}
}
/* 服务器状态组件样式优化 */
.server-status-widget {
min-width: 170px;
transition: all 0.3s ease;
}
.server-status-widget:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 蓝色光晕效果 */
.number-glow-blue {
animation: glow-blue 2s ease-in-out;
}
/* 红色光晕效果 */
.number-glow-red {
animation: glow-red 2s ease-in-out;
}
/* 绿色光晕效果 */
.number-glow-green {
animation: glow-green 2s ease-in-out;
}
/* 黄色光晕效果 */
.number-glow-yellow {
animation: glow-yellow 2s ease-in-out;
}
/* 光晕动画定义 */
@keyframes glow-pulse {
0% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
}
@keyframes glow-blue {
0% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
}
@keyframes glow-red {
0% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
}
@keyframes glow-green {
0% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
}
@keyframes glow-yellow {
0% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(250, 204, 21, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
}
/* 状态过渡效果 */
.status-transition {
transition: all 0.3s ease-in-out;
}
/* 状态淡入动画 */
@keyframes status-fade-in {
0% {
opacity: 0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 状态淡出动画 */
@keyframes status-fade-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-5px);
}
}
/* 淡入类 */
.status-fade-in {
animation: status-fade-in 0.3s ease-in-out forwards;
}
/* 淡出类 */
.status-fade-out {
animation: status-fade-out 0.3s ease-in-out forwards;
}
/* 加载状态样式 */
.status-loading {
animation: status-pulse 1.5s ease-in-out infinite;
}
/* 状态脉冲动画 */
@keyframes status-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* 保存按钮状态样式 */
#save-blacklist-status {
transition: all 0.3s ease-in-out;
}
</style>
<style type="text/tailwindcss" src="css/index.css"></style>
</head>
<body class="bg-gray-50 text-dark font-sans">
<div class="flex h-screen overflow-hidden">
@@ -855,7 +643,7 @@
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">名称</th>
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">URL</th>
<th class="text-center py-3 px-4 text-sm font-medium text-gray-500">状态</th>
<th class="text-center py-3 px-4 text-sm font-medium text-gray-500">更新状态</th>
<th class="text-center py-3 px-4 text-sm font-medium text-gray-500"></th>
<th class="text-right py-3 px-4 text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>