Hugging Face's logo

Spaces:
Murasame52
/
runtime_tracker
Paused

App Files Community
Murasame52 commited on
Commit
f4c5d31
·
verified ·
1 Parent(s): f97ae96

Upload 2 files

Browse files
Files changed (2) hide show
  1. public/index.html +80 -0
  2. public/style.css +127 -0
public/index.html ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>设备监控</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
16
+ }
17
+ .container {
18
+ text-align: center;
19
+ padding: 2rem;
20
+ border-radius: 15px;
21
+ background: white;
22
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
23
+ width: 300px;
24
+ }
25
+ .count {
26
+ font-size: 3rem;
27
+ font-weight: bold;
28
+ color: #3a7bd5;
29
+ margin: 0.5rem 0;
30
+ }
31
+ .label {
32
+ font-size: 1.2rem;
33
+ color: #666;
34
+ }
35
+ .refresh {
36
+ margin-top: 1rem;
37
+ padding: 0.5rem 1rem;
38
+ background: #3a7bd5;
39
+ color: white;
40
+ border: none;
41
+ border-radius: 5px;
42
+ cursor: pointer;
43
+ font-size: 1rem;
44
+ transition: background 0.3s;
45
+ }
46
+ .refresh:hover {
47
+ background: #2c5fb3;
48
+ }
49
+ .version {
50
+ font-size: 0.8rem;
51
+ color: #999;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body>
56
+ <div class="container">
57
+ <div class="label">当前设备数</div>
58
+ <div class="version">Version: v0.6.2</div>
59
+ <div class="count" id="deviceCount">0</div>
60
+ <button class="refresh" onclick="fetchDeviceCount()">刷新数据</button>
61
+ </div>
62
+
63
+ <script>
64
+ // 初始加载设备数量
65
+ document.addEventListener('DOMContentLoaded', fetchDeviceCount);
66
+
67
+ // 获取设备数量
68
+ async function fetchDeviceCount() {
69
+ try {
70
+ const response = await fetch('/api/devices');
71
+ const devices = await response.json();
72
+ document.getElementById('deviceCount').textContent = devices.length;
73
+ } catch (error) {
74
+ console.error('获取设备数量失败:', error);
75
+ document.getElementById('deviceCount').textContent = "错误";
76
+ }
77
+ }
78
+ </script>
79
+ </body>
80
+ </html>
public/style.css ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* 自定义样式补充Tailwind */
2
+ .container {
3
+ max-width: 1400px;
4
+ margin-left: auto;
5
+ margin-right: auto;
6
+ }
7
+
8
+ #devicesList {
9
+ min-height: 200px;
10
+ transition: all 0.3s ease;
11
+ }
12
+
13
+ /* 图表容器响应式设置 */
14
+ .chart-container {
15
+ position: relative;
16
+ height: 400px;
17
+ width: 100%;
18
+ }
19
+
20
+ /* 表格优化 */
21
+ .table-container {
22
+ overflow-x: auto;
23
+ -webkit-overflow-scrolling: touch;
24
+ }
25
+
26
+ table {
27
+ width: 100%;
28
+ min-width: 600px;
29
+ border-collapse: separate;
30
+ border-spacing: 0;
31
+ background-color: white;
32
+ border-radius: 0.5rem;
33
+ overflow: hidden;
34
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
35
+ }
36
+
37
+ th {
38
+ background-color: #f8fafc;
39
+ font-weight: 600;
40
+ text-transform: uppercase;
41
+ letter-spacing: 0.05em;
42
+ color: #64748b;
43
+ font-size: 0.75rem;
44
+ padding: 0.75rem 1.5rem;
45
+ border-bottom: 1px solid #e2e8f0;
46
+ }
47
+
48
+ td {
49
+ padding: 1rem 1.5rem;
50
+ border-bottom: 1px solid #e2e8f0;
51
+ color: #334155;
52
+ font-size: 0.875rem;
53
+ }
54
+
55
+ tr:last-child td {
56
+ border-bottom: none;
57
+ }
58
+
59
+ tr:hover td {
60
+ background-color: #f8fafc;
61
+ }
62
+
63
+ /* 卡片悬停效果 */
64
+ .card-hover {
65
+ transition: all 0.2s ease;
66
+ }
67
+
68
+ .card-hover:hover {
69
+ transform: translateY(-2px);
70
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
71
+ }
72
+
73
+ /* 加载动画 */
74
+ @keyframes pulse {
75
+ 0%, 100% {
76
+ opacity: 1;
77
+ }
78
+ 50% {
79
+ opacity: 0.5;
80
+ }
81
+ }
82
+
83
+ .animate-pulse {
84
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
85
+ }
86
+
87
+ /* 滚动条样式 */
88
+ ::-webkit-scrollbar {
89
+ width: 8px;
90
+ height: 8px;
91
+ }
92
+
93
+ ::-webkit-scrollbar-track {
94
+ background: #f1f1f1;
95
+ border-radius: 4px;
96
+ }
97
+
98
+ ::-webkit-scrollbar-thumb {
99
+ background: #cbd5e1;
100
+ border-radius: 4px;
101
+ }
102
+
103
+ ::-webkit-scrollbar-thumb:hover {
104
+ background: #94a3b8;
105
+ }
106
+
107
+ /* 响应式调整 */
108
+ @media (max-width: 1024px) {
109
+ .chart-container {
110
+ height: 350px;
111
+ }
112
+ }
113
+
114
+ @media (max-width: 768px) {
115
+ .container {
116
+ padding-left: 1rem;
117
+ padding-right: 1rem;
118
+ }
119
+
120
+ .chart-container {
121
+ height: 300px;
122
+ }
123
+
124
+ th, td {
125
+ padding: 0.75rem 1rem;
126
+ }
127
+ }