diff --git a/index.html b/index.html
index 659a4a2..6886d5b 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,95 @@
<!DOCTYPE html>
<html>
- <meta charset="UTF-8">
<head>
- <title>服务器状态监控</title>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
+<title>服务器状态监控</title>
+<style>
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f2f6fc;
+ margin: 0;
+ padding: 20px;
+}
+
+h1 {
+ background-color: #b6a0ff;
+ color: #fff;
+ padding: 10px;
+ margin-top: 30px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* 容器样式 */
+.container {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 30px;
+ max-width: 1200px;
+ margin: 0 auto;
+ box-shadow: 3px 11px 9px 3px rgba(0, 0, 0, 0.1);
+}
+
+iframe {
+ border: none;
+ width: 100%;
+ height: 500px;
+}
+
+/* 导航栏样式 */
+.navbar {
+ background-color: rgb(229 240 255);
+ color: #4d4d4d;
+ padding: 15px;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.navbar-logo {
+ text-decoration: none;
+ color: #494949;
+ font-size: 30px;
+ font-weight: bold;
+}
+
+
+/* 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
+@media (max-width: 800px) {
+ .container {
+ display: block;
+ }
+}
+
+/* 屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
+@media (max-width: 400px) {
+ .navbar {
+ display: block;
+ }
+}
+</style>
</head>
<body>
+<nav class="navbar" id="navbar">
+ <a class="navbar-logo">服务器状态</a>
+</nav>
+<div class="container">
<h1>CPU 占用</h1>
- <iframe src="https://chart-embed.service.newrelic.com/herald/eebfb59f-13d8-48d0-a19b-d09548e004bf?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ <div class="container">
+ <iframe src="https://chart-embed.service.newrelic.com/herald/eebfb59f-13d8-48d0-a19b-d09548e004bf?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ </div>
<h1>内存占用</h1>
- <iframe src="https://chart-embed.service.newrelic.com/herald/393255a7-7e08-450a-9bc9-4bd49236c867?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ <div class="container">
+ <iframe src="https://chart-embed.service.newrelic.com/herald/393255a7-7e08-450a-9bc9-4bd49236c867?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ </div>
<h1>磁盘占用</h1>
- <iframe src="https://chart-embed.service.newrelic.com/herald/c81da827-03a5-4b54-b688-227d35e62293?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ <div class="container">
+ <iframe src="https://chart-embed.service.newrelic.com/herald/c81da827-03a5-4b54-b688-227d35e62293?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ </div>
<h1>网络流量</h1>
- <iframe src="https://chart-embed.service.newrelic.com/herald/2ac7997b-5614-4f14-8088-fb8541c21088?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ <div class="container">
+ <iframe src="https://chart-embed.service.newrelic.com/herald/2ac7997b-5614-4f14-8088-fb8541c21088?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+ </div>
+</div>
</body>
</html>