diff --git a/sdcard/web/README_BASE_PNG.txt b/sdcard/web/README_BASE_PNG.txt new file mode 100644 index 0000000..015cf79 --- /dev/null +++ b/sdcard/web/README_BASE_PNG.txt @@ -0,0 +1 @@ +请将您的 logo 图片重命名为 base.png 并放置在此目录下 diff --git a/sdcard/web/base.png b/sdcard/web/base.png new file mode 100644 index 0000000..63fa264 Binary files /dev/null and b/sdcard/web/base.png differ diff --git a/sdcard/web/index.htm b/sdcard/web/index.htm index 935a265..71b8fe4 100644 --- a/sdcard/web/index.htm +++ b/sdcard/web/index.htm @@ -2,7 +2,7 @@ - + Rob OS @@ -30,18 +30,63 @@ max-width: 1200px; margin: 0 auto; padding: 20px; + padding-top: 160px; /* 减少基础间距，因为main-panel的上边距已经增加 */ + } + + .fixed-header { + position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 1000; + background: rgba(255,255,255,0.15); + backdrop-filter: blur(20px); + border: 1px solid rgba(255,255,255,0.2); + border-radius: 20px; + box-shadow: 0 8px 32px rgba(0,0,0,0.1); + padding: 30px; + max-width: 1160px; /* 与container内容宽度一致：1200px - 40px (左右padding) */ + width: calc(100% - 40px); /* 与container保持相同的边距 */ + } + + .fixed-header-content { + margin: 0; + padding: 0; } .header { text-align: center; color: white; - margin-bottom: 30px; + margin-bottom: 20px; + transition: color 0.3s ease; } .header h1 { - font-size: 2.5rem; - margin-bottom: 10px; + font-size: 2.2rem; + margin-bottom: 8px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + transition: color 0.3s ease, text-shadow 0.3s ease; + } + + .dashboard-title-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 12px; + } + + .dashboard-logo { + height: 1.1rem; /* 缩小到原来的50%：2.2rem * 0.5 = 1.1rem */ + width: auto; + object-fit: contain; + filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); + } + + .header p { + font-size: 1rem; + opacity: 0.9; + margin: 0; + transition: color 0.3s ease; } .connection-status { @@ -49,9 +94,21 @@ backdrop-filter: blur(10px); border-radius: 10px; padding: 15px; - margin-bottom: 20px; color: white; text-align: center; + margin: 0 auto; + max-width: 100%; /* 与system-header保持相同宽度 */ + transition: color 0.3s ease; + } + + .main-panel { + background: rgba(255,255,255,0.1); + backdrop-filter: blur(15px); + border-radius: 20px; + padding: 30px; + margin: 100px 0 20px 0; /* 调整上边距到100px，与Dashboard顶部对齐后保持相同间隙 */ + border: 1px solid rgba(255,255,255,0.2); + box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .status-indicator { @@ -87,6 +144,7 @@ margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #eee; + text-align: left; } .card-icon { @@ -97,7 +155,8 @@ .card-title { font-size: 1.2rem; font-weight: 600; - color: #2c3e50; + color: #323232; + text-align: left; } .metric { @@ -106,16 +165,20 @@ align-items: center; margin: 10px 0; padding: 8px 0; + text-align: left !important; } .metric-label { font-weight: 500; color: #555; + text-align: left !important; + margin-left: 0px; } .metric-value { font-weight: 600; - color: #2c3e50; + color: #323232; + text-align: left !important; } .progress-bar { @@ -150,7 +213,7 @@ background: #f8f9fa; border-radius: 8px; padding: 8px; - text-align: center; + text-align: left; border: 1px solid #e9ecef; } @@ -158,18 +221,135 @@ font-size: 0.8rem; color: #666; margin-bottom: 2px; + text-align: left; } .cpu-core-usage { font-weight: bold; - color: #2c3e50; + color: #323232; + text-align: left; } .cpu-core-freq { font-size: 0.7rem; color: #888; + text-align: left; + } + + /* 推理服务器 CPU 柱状图样式 */ + .cpu-chart { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 10px; + padding: 10px; + background: #f8f9fa; + border-radius: 10px; + } + + .cpu-bar-item { + display: flex; + align-items: center; + gap: 10px; + height: 30px; + } + + .cpu-bar-label { + width: 60px; + font-size: 0.85rem; + font-weight: 500; + color: #666; + text-align: left; + flex-shrink: 0; + } + + .cpu-bar-container { + flex: 1; + height: 20px; + background-color: #e0e0e0; + border-radius: 10px; + overflow: hidden; + position: relative; + } + + .cpu-bar-fill { + height: 100%; + background: linear-gradient(90deg, #4CAF50, #45a049); + border-radius: 10px; + transition: width 0.3s ease; + position: relative; + min-width: 45px; /* 确保即使是0%也有最小宽度来显示文字 */ + } + + .cpu-bar-value { + font-size: 0.75rem; + font-weight: bold; + color: white; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + z-index: 2; + } + + /* 推理服务器 温度监控柱状图样式 */ + .temp-chart { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 10px; + padding: 10px; + background: #f8f9fa; + border-radius: 10px; + } + + .temp-bar-item { + display: flex; + align-items: center; + gap: 10px; + height: 30px; + } + + .temp-bar-label { + width: 70px; + font-size: 0.85rem; + font-weight: 500; + color: #666; + text-align: left; + flex-shrink: 0; } + .temp-bar-container { + flex: 1; + height: 20px; + background-color: #e0e0e0; + border-radius: 10px; + overflow: hidden; + position: relative; + } + + .temp-bar-fill { + height: 100%; + border-radius: 10px; + transition: width 0.3s ease, background 0.3s ease; + position: relative; + min-width: 45px; /* 确保即使是低温度也有最小宽度来显示文字 */ + } + + .temp-bar-value { + font-size: 0.75rem; + font-weight: bold; + color: white; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + z-index: 2; + } + + .temperature-grid { display: grid; grid-template-columns: 1fr 1fr; @@ -195,7 +375,7 @@ background: #f8f9fa; border-radius: 8px; padding: 12px; - text-align: center; + text-align: left; border: 1px solid #e9ecef; } @@ -204,25 +384,28 @@ color: #666; margin-bottom: 8px; font-weight: 500; + text-align: left; } .disk-usage { font-size: 1.1rem; font-weight: bold; - color: #2c3e50; + color: #323232; margin-bottom: 4px; + text-align: left; } .disk-details { font-size: 0.75rem; color: #888; + text-align: left; } .temp-item { background: #f8f9fa; border-radius: 8px; padding: 10px; - text-align: center; + text-align: left; border: 1px solid #e9ecef; } @@ -230,16 +413,18 @@ font-size: 0.9rem; color: #666; margin-bottom: 5px; + text-align: left; } .temp-value { font-size: 1.1rem; font-weight: bold; - color: #2c3e50; + color: #323232; + text-align: left; } .no-data { - text-align: center; + text-align: left; color: #888; font-style: italic; padding: 20px; @@ -309,12 +494,36 @@ @media (max-width: 768px) { .container { padding: 10px; + padding-top: 180px; /* 移动端相应调整 */ + } + + .fixed-header { + top: 0; + max-width: calc(100% - 20px); /* 与移动端container保持一致 */ + width: calc(100% - 20px); + padding: 20px; + } + + .fixed-header-content { + padding: 0; } .header h1 { font-size: 1.8rem; } + .dashboard-title-container { + margin-bottom: 8px; /* 移动端减少间距 */ + } + + .dashboard-logo { + height: 0.9rem; /* 缩小到原来的50%：1.8rem * 0.5 = 0.9rem */ + } + + .header p { + font-size: 0.9rem; + } + .dashboard { grid-template-columns: 1fr; } @@ -341,121 +550,164 @@ font-size: 1.3rem; } } + + /* 监控卡片内容对齐样式 */ + .memory-metric-label, + .power-metric-label, + .gpu-metric-label, + .lpmu-memory-metric-label, + .system-metric-label { + margin-left: 0px !important; + } + + /* 版权信息样式 */ + .copyright { + text-align: center; + padding: 30px 20px; + color: rgba(255, 255, 255, 0.7); + font-size: 0.85rem; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-top: 1px solid rgba(255, 255, 255, 0.1); + margin-top: 40px; + } + + .copyright p { + margin: 0; + line-height: 1.5; + } + + .copyright .separator { + margin: 0 8px; + opacity: 0.5; + } -
-
-

RM - 01 Dashboard

-

RobOS ( Rack on board ) 实时系统性能监控面板

-
- -
-
-
- - 正在连接到 推理服务器... -
-
- - 正在连接到 应用服务器... + +
+
+
+
+
+

RM - 01 Dashboard

+

RobOS ( Rack on board ) 实时系统性能监控面板

-
- -
-
-

🖥️ 推理模组监控

-

NVIDIA 推理服务器系统状态

-
- -
- -
-
-
-
CPU 监控
+
+
+
+ + 正在连接到 推理服务器...
-
-
等待数据...
+
+ + 正在连接到 应用服务器...
+
+
+
- -
-
-
-
显存监控
-
-
-
等待数据...
-
-
+
+
- -
-
-
-
温度监控
-
-
-
等待数据...
-
+ +
+
+

推理模组监控

+

NVIDIA 推理服务器系统状态

- - -
-
-
-
功耗监控
-
-
-
等待数据...
+ +
+ +
+
+
+
CPU 监控
+
+
+
等待数据...
+
-
- -
-
-
-
GPU 监控
+ +
+
+
+
显存监控
+
+
+
等待数据...
+
-
-
等待数据...
+ + +
+
+
+
温度监控
+
+
+
等待数据...
+
-
- -
-
-
-
系统信息
+ +
+
+
+
功耗监控
+
+
+
等待数据...
+
-
-
- 最后更新 - - + + +
+
+
+
GPU 监控
-
- 连接时间 - - +
+
等待数据...
+
+
+ + +
+
+
+
系统信息
-
- 数据包 - 0 +
+
+
+ 最后更新 + - +
+
+ 连接时间 + - +
+
+ 数据包 + 0 +
+
-
- -
-
-

🖥️ 应用模组监控

-

Intel X86 应用服务器系统状态

-
+ +
+
+

应用模组监控

+

Intel X86 应用服务器系统状态

+
@@ -489,17 +741,19 @@

🖥️ 应用模组监控

系统信息
-
- 最后更新 - - -
-
- 连接时间 - - -
-
- 数据包 - 0 +
+
+ 最后更新 + - +
+
+ 连接时间 + - +
+
+ 数据包 + 0 +
@@ -534,6 +788,12 @@

🖥️ 应用模组监控

+
+
+ + +
+

© 2025 RobOS Team|RMinte|Panidea (Chengdu) Artificial Intelligence Technology Co., Ltd.