From d82079c97fb9bac879bb793b55b5c207f13cb76b Mon Sep 17 00:00:00 2001 From: wangqing Date: Thu, 6 Nov 2025 18:01:30 +0800 Subject: [PATCH] =?UTF-8?q?templates=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wangqing --- config.yaml | 2 +- templates/root.html | 85 +++-- templates/root1.html | 86 +++-- templates/root2.html | 84 +++-- templates/root3.html | 86 +++-- templates/root4.html | 86 +++-- templates/styles.css | 765 ++++++++++++++++++++++++++++++++----------- 7 files changed, 847 insertions(+), 347 deletions(-) diff --git a/config.yaml b/config.yaml index 8beb316..104c468 100644 --- a/config.yaml +++ b/config.yaml @@ -25,4 +25,4 @@ log: file_path: "/tmp/uos-libvirtd-exporter.log" level: "info" # Options: "debug", "info", "warn", "error" format: "text" # Options: "text", "json" - enable_stdout: false # Options: true, false + enable_stdout: true # Options: true, false diff --git a/templates/root.html b/templates/root.html index 8652389..d16ac8a 100644 --- a/templates/root.html +++ b/templates/root.html @@ -1,5 +1,5 @@ - + @@ -10,56 +10,77 @@

UOS Libvirt Exporter

-

Prometheus exporter for libvirt-based virtual machines

+

面向 UOS 和 openEuler 的现代化虚拟化监控解决方案

- 模板: + 主题模板: - + - +
- +
-
- -

Metrics

-

查看监控指标

- - -

Health

-

健康检查

- - -

Readiness

-

就绪检查

- +
+

全面的虚拟化监控

+

实时监控您的 KVM/QEMU 虚拟机性能指标，包括 CPU、内存、磁盘和网络等关键数据

-
-
-

Version

-
{{.Version}}
+
+
+

功能导航

+
+ + 📊 + + 监控指标 + 查看详细的虚拟化环境性能数据 + + + + ❤️ + + 健康检查 + 检查服务运行状态和可用性 + + + + ✅ + + 就绪检查 + 确认服务是否准备就绪 + + +
-
-

Build Time

-
{{.BuildTime}}
-
-
-

Uptime

-
{{.Uptime}}
+ +
+

系统信息

+
+
+ 版本信息: + {{.Version}} +
+
+ 构建时间: + {{.BuildTime}} +
+
+ 运行时长: + {{.Uptime}} +
+
-
-

UOS Libvirt Exporter for UOS and openEuler community

+

UOS Libvirt Exporter © 2025 | 为 UOS 和 openEuler 社区打造的虚拟化监控解决方案

diff --git a/templates/root1.html b/templates/root1.html index 6916e33..b7cd1c2 100644 --- a/templates/root1.html +++ b/templates/root1.html @@ -1,64 +1,86 @@ - + - UOS Libvirt Exporter - Simple View + UOS Libvirt Exporter - 简洁蓝

UOS Libvirt Exporter

-

Simple View Template

+

简洁蓝主题 | 清晰直观的虚拟化监控界面

- 模板: + 主题模板: - + - +
- +
-
- -

Metrics

-

查看监控指标

- - -

Health

-

健康检查

- - -

Readiness

-

就绪检查

- +
+

高效虚拟化监控

+

简洁蓝主题为您提供清晰、直观的虚拟化环境监控体验

-
-
-

Version

-
{{.Version}}
+
+
+

功能导航

+
+ + 📈 + + 监控指标 + 查看详细的虚拟化环境性能数据 + + + + 🩺 + + 健康检查 + 检查服务运行状态和可用性 + + + + 🚦 + + 就绪检查 + 确认服务是否准备就绪 + + +
-
-

Build Time

-
{{.BuildTime}}
-
-
-

Uptime

-
{{.Uptime}}
+ +
+

系统信息

+
+
+ 版本信息: + {{.Version}} +
+
+ 构建时间: + {{.BuildTime}} +
+
+ 运行时长: + {{.Uptime}} +
+
-

UOS Libvirt Exporter - Simple Template Example

+

UOS Libvirt Exporter © 2025 | 简洁蓝主题

diff --git a/templates/root2.html b/templates/root2.html index 394988a..438a480 100644 --- a/templates/root2.html +++ b/templates/root2.html @@ -1,9 +1,9 @@ - + - UOS Libvirt Exporter - Dark Theme + UOS Libvirt Exporter - 暗色终端 @@ -19,49 +19,71 @@

UOS Libvirt Exporter

-

>> Dark Theme Terminal Style

+

>> 暗色终端主题 | 开发者友好的监控界面

- 模板: + 主题模板: - + - +
- +
-
- -

METRICS

-

>> 监控指标

- - -

HEALTH

-

>> 健康检查

- - -

READY

-

>> 就绪检查

- +
+

终端风格监控

+

>> 为开发者和系统管理员量身定制的终端风格界面

-
-
-

Version

-
{{.Version}}
+
+
+

功能导航

+
+ + [M] + + METRICS + >> 查看虚拟化监控指标 + + + + [H] + + HEALTH + >> 检查服务健康状态 + + + + [R] + + READY + >> 确认服务就绪状态 + + +
-
-

Build Time

-
{{.BuildTime}}
-
-
-

Uptime

-
{{.Uptime}}
+ +
+

系统信息

+
+
+ 版本信息: + {{.Version}} +
+
+ 构建时间: + {{.BuildTime}} +
+
+ 运行时长: + {{.Uptime}} +
+
diff --git a/templates/root3.html b/templates/root3.html index b664fd9..61c702e 100644 --- a/templates/root3.html +++ b/templates/root3.html @@ -1,64 +1,86 @@ - + - UOS Libvirt Exporter - Minimalist + UOS Libvirt Exporter - 极简风

UOS Libvirt Exporter

-

Minimalist Design Template

+

极简风主题 | 现代化设计语言

- 模板: + 主题模板: - + - +
- +
-
- -

Metrics

-

查看监控指标

- - -

Health

-

健康检查

- - -

Readiness

-

就绪检查

- +
+

极简设计哲学

+

极简风主题将复杂的数据以最简洁的方式呈现

-
-
-

Version

-
{{.Version}}
+
+
+

功能导航

+
+ + 📈 + + 监控指标 + 查看详细的虚拟化环境性能数据 + + + + ❤️ + + 健康检查 + 检查服务运行状态和可用性 + + + + ✅ + + 就绪检查 + 确认服务是否准备就绪 + + +
-
-

Build Time

-
{{.BuildTime}}
-
-
-

Uptime

-
{{.Uptime}}
+ +
+

系统信息

+
+
+ 版本信息: + {{.Version}} +
+
+ 构建时间: + {{.BuildTime}} +
+
+ 运行时长: + {{.Uptime}} +
+
-

UOS Libvirt Exporter for UOS and openEuler community

+

UOS Libvirt Exporter © 2025 | 极简风主题

diff --git a/templates/root4.html b/templates/root4.html index 7acf08f..00ec773 100644 --- a/templates/root4.html +++ b/templates/root4.html @@ -1,64 +1,86 @@ - + - UOS Libvirt Exporter - Dracula Theme + UOS Libvirt Exporter - Dracula 主题

UOS Libvirt Exporter

-

// Dracula Theme Edition

+

Dracula 主题 | 程序员喜爱的暗色主题

- // 模板: + 主题模板: - + - +
- +
-
- -

Metrics

-

// 查看监控指标

- - -

Health

-

// 健康检查

- - -

Readiness

-

// 就绪检查

- +
+

Dracula 风格监控

+

为程序员和开发者打造的暗色主题界面

-
-
-

Version

-
{{.Version}}
+
+
+

功能导航

+
+ + # + + Metrics + 查看虚拟化监控指标 + + + + ♥ + + Health + 检查服务健康状态 + + + + ✓ + + Readiness + 确认服务就绪状态 + + +
-
-

Build Time

-
{{.BuildTime}}
-
-
-

Uptime

-
{{.Uptime}}
+ +
+

系统信息

+
+
+ 版本信息: + {{.Version}} +
+
+ 构建时间: + {{.BuildTime}} +
+
+ 运行时长: + {{.Uptime}} +
+
diff --git a/templates/styles.css b/templates/styles.css index c0b7b4b..8a08541 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -1,4 +1,4 @@ -/* Default theme */ +/* Default theme - macOS风格 */ .theme-default { --primary-color: #3498db; --secondary-color: #2c3e50; @@ -9,8 +9,8 @@ --dark-text: #333; --border-color: #eee; --card-bg: #fff; - --shadow: 0 2px 5px rgba(0,0,0,0.1); - --controls-bg: #f1f2f6; + --shadow: 0 10px 30px rgba(0,0,0,0.1); + --controls-bg: rgba(255,255,255,0.8); --button-bg: #95a5a6; --button-hover-bg: #7f8c8d; --active-button-bg: #3498db; @@ -18,7 +18,7 @@ --refresh-button-hover-bg: #27ae60; --link-card-bg: #3498db; --link-card-text: #fff; - --info-card-bg: #f1f2f6; + --info-card-bg: #fff; --info-card-header: #2c3e50; --info-value-color: #3498db; --footer-bg: #2c3e50; @@ -29,21 +29,57 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } +.theme-default body { + background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%); + min-height: 100vh; + margin: 0; + padding: 0; +} + +.theme-default .container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: rgba(255,255,255,0.95); + backdrop-filter: blur(10px); + border-radius: 0; + box-shadow: none; +} + .theme-default header { background: linear-gradient(135deg, var(--secondary-color), #1a252f); color: var(--light-text); - padding: 15px; + padding: 60px 20px 40px; text-align: center; + position: relative; + overflow: hidden; +} + +.theme-default header::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); + transform: rotate(30deg); } .theme-default h1 { - font-size: 1.5rem; - margin-bottom: 5px; + font-size: 3rem; + font-weight: 700; + margin-bottom: 20px; + letter-spacing: -0.5px; + text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .theme-default .subtitle { - font-size: 0.9rem; + font-size: 1.3rem; opacity: 0.9; + max-width: 600px; + margin: 0 auto; + font-weight: 300; } /* Simple blue theme */ @@ -57,8 +93,8 @@ --dark-text: #333; --border-color: #eee; --card-bg: #fff; - --shadow: 0 2px 5px rgba(0,0,0,0.1); - --controls-bg: #ecf0f1; + --shadow: 0 10px 30px rgba(0,0,0,0.1); + --controls-bg: rgba(255,255,255,0.8); --button-bg: #95a5a6; --button-hover-bg: #7f8c8d; --active-button-bg: #3498db; @@ -77,22 +113,57 @@ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } +.theme-root1 body { + background: linear-gradient(135deg, #eef2f7 0%, #d6e4f0 100%); + min-height: 100vh; + margin: 0; + padding: 0; +} + +.theme-root1 .container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: rgba(255,255,255,0.95); + backdrop-filter: blur(10px); + border-radius: 0; + box-shadow: none; +} + .theme-root1 header { text-align: center; - padding: 15px; + padding: 60px 20px 40px; background-color: var(--card-bg); - border-bottom: 1px solid var(--border-color); + position: relative; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0,0,0,0.05); +} + +.theme-root1 header::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(52,152,219,0.1) 0%, rgba(52,152,219,0) 70%); + transform: rotate(30deg); } .theme-root1 h1 { color: var(--secondary-color); - font-size: 1.5rem; - margin-bottom: 5px; + font-size: 3rem; + font-weight: 700; + margin-bottom: 20px; + letter-spacing: -0.5px; } .theme-root1 .subtitle { color: #7f8c8d; - font-size: 0.9rem; + font-size: 1.3rem; + max-width: 600px; + margin: 0 auto; + font-weight: 300; } /* Dark terminal theme */ @@ -100,13 +171,13 @@ --primary-color: #4fc3f7; --secondary-color: #2d2d2d; --accent-color: #81c784; - --bg-color: #121212; + --bg-color: #0f0f0f; --card-bg: #1e1e1e; --light-bg: #121212; --dark-text: #e0e0e0; --border-color: #333; - --shadow: none; - --controls-bg: #2d2d2d; + --shadow: 0 10px 30px rgba(0,0,0,0.5); + --controls-bg: rgba(30,30,30,0.8); --button-bg: #333; --button-hover-bg: #444; --active-button-bg: #4fc3f7; @@ -122,29 +193,65 @@ --instructions-bg: #1e1e1e; --instructions-border: #4fc3f7; --instructions-header: #4fc3f7; - font-family: 'Courier New', monospace; + font-family: 'SF Mono', 'Courier New', monospace; background-color: var(--bg-color); color: var(--dark-text); line-height: 1.6; } +.theme-root2 body { + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); + min-height: 100vh; + margin: 0; + padding: 0; +} + +.theme-root2 .container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: rgba(30,30,30,0.95); + backdrop-filter: blur(10px); + border-radius: 0; + box-shadow: none; +} + .theme-root2 header { text-align: center; - padding: 15px; + padding: 60px 20px 40px; border-bottom: 1px solid var(--border-color); + position: relative; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0,0,0,0.3); +} + +.theme-root2 header::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(79,195,247,0.1) 0%, rgba(79,195,247,0) 70%); + transform: rotate(30deg); } .theme-root2 h1 { color: #4fc3f7; - font-size: 1.5rem; + font-size: 3rem; text-transform: uppercase; - letter-spacing: 1px; - margin-bottom: 5px; + letter-spacing: 2px; + margin-bottom: 20px; + font-weight: 700; + text-shadow: 0 0 10px rgba(79,195,247,0.3); } .theme-root2 .subtitle { color: #9e9e9e; - font-size: 0.9rem; + font-size: 1.3rem; + max-width: 600px; + margin: 0 auto; + font-weight: 300; } /* Minimalist theme */ @@ -157,8 +264,8 @@ --dark-text: #333; --border-color: #eee; --card-bg: rgba(255, 255, 255, 0.95); - --shadow: 0 5px 15px rgba(0,0,0,0.05); - --controls-bg: #f1f2f6; + --shadow: 0 15px 35px rgba(0,0,0,0.1); + --controls-bg: rgba(255,255,255,0.8); --button-bg: #999; --button-hover-bg: #777; --active-button-bg: #764ba2; @@ -178,22 +285,58 @@ background: linear-gradient(135deg, #667eea, #764ba2); } +.theme-root3 body { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + margin: 0; + padding: 0; +} + +.theme-root3 .container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: rgba(255,255,255,0.95); + backdrop-filter: blur(10px); + border-radius: 0; + box-shadow: none; +} + .theme-root3 header { text-align: center; - padding: 20px 15px; + padding: 70px 20px 50px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; + position: relative; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + +.theme-root3 header::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); + transform: rotate(30deg); } .theme-root3 h1 { - font-size: 1.8rem; + font-size: 3.5rem; font-weight: 300; - margin-bottom: 5px; + margin-bottom: 20px; + letter-spacing: -1px; + text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .theme-root3 .subtitle { - font-size: 0.9rem; + font-size: 1.4rem; opacity: 0.9; + max-width: 700px; + margin: 0 auto; + font-weight: 300; } /* Dracula theme */ @@ -214,10 +357,10 @@ /* Custom variations for UI */ --card-bg: #2d303d; --border-color: #44475a; - --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --dark-text: #f8f8f2; --light-bg: #282a36; - --controls-bg: #44475a; + --controls-bg: rgba(45,48,61,0.8); --button-bg: #6272a4; --button-hover-bg: rgba(98, 114, 164, 0.8); --active-button-bg: #ff79c6; @@ -233,29 +376,65 @@ --instructions-bg: #2d303d; --instructions-border: #bd93f9; --instructions-header: #ff79c6; - font-family: 'Fira Code', 'Courier New', monospace; + font-family: 'Fira Code', 'SF Mono', 'Courier New', monospace; background-color: var(--background); color: var(--foreground); line-height: 1.6; } +.theme-root4 body { + background: linear-gradient(135deg, #1e1f29 0%, #282a36 100%); + min-height: 100vh; + margin: 0; + padding: 0; +} + +.theme-root4 .container { + min-height: 100vh; + display: flex; + flex-direction: column; + background: rgba(45,48,61,0.95); + backdrop-filter: blur(10px); + border-radius: 0; + box-shadow: none; +} + .theme-root4 header { background-color: var(--current-line); - padding: 20px; + padding: 70px 20px 50px; text-align: center; border-bottom: 1px solid var(--border-color); + position: relative; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0,0,0,0.3); +} + +.theme-root4 header::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(189,147,249,0.1) 0%, rgba(189,147,249,0) 70%); + transform: rotate(30deg); } .theme-root4 h1 { - font-size: 1.8rem; - margin-bottom: 8px; + font-size: 3.5rem; + margin-bottom: 25px; color: var(--purple); - text-shadow: 0 0 5px rgba(189, 147, 249, 0.3); + text-shadow: 0 0 15px rgba(189, 147, 249, 0.4); + font-weight: 700; + letter-spacing: -1px; } .theme-root4 .subtitle { - font-size: 1rem; + font-size: 1.4rem; color: var(--comment); + max-width: 700px; + margin: 0 auto; + font-weight: 300; } /* Common styles */ @@ -266,202 +445,303 @@ } body { - line-height: 1.4; - padding: 10px; - max-width: 1200px; - margin: 0 auto; + line-height: 1.6; + padding: 0; + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; } .container { - background-color: var(--card-bg); - border-radius: 6px; - box-shadow: var(--shadow); - overflow: hidden; -} - -h1 { - margin-bottom: 5px; + flex: 1; + display: flex; + flex-direction: column; } .controls { display: flex; justify-content: space-between; align-items: center; - padding: 10px 15px; + padding: 20px 30px; background-color: var(--controls-bg); border-bottom: 1px solid var(--border-color); - font-size: 0.8rem; + font-size: 1rem; + flex-wrap: wrap; + gap: 15px; + backdrop-filter: blur(10px); + position: sticky; + top: 0; + z-index: 100; } .template-selector { display: flex; align-items: center; - gap: 5px; + flex-wrap: wrap; + gap: 12px; +} + +.template-selector span { + font-weight: 500; } .template-btn { - padding: 3px 8px; + padding: 8px 16px; background: var(--button-bg); color: white; border: none; - border-radius: 3px; + border-radius: 30px; cursor: pointer; - font-size: 0.7rem; - transition: all 0.2s ease; + font-size: 0.95rem; + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + font-weight: 500; } .template-btn:hover { background: var(--button-hover-bg); + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(0,0,0,0.2); } .template-btn.active { background: var(--active-button-bg); + box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .refresh-btn { - padding: 3px 10px; + padding: 8px 20px; background: var(--refresh-button-bg); color: white; border: none; - border-radius: 3px; + border-radius: 30px; cursor: pointer; - font-size: 0.7rem; - transition: all 0.2s ease; + font-size: 0.95rem; + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + font-weight: 500; } .refresh-btn:hover { background: var(--refresh-button-hover-bg); + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(0,0,0,0.2); } .main-content { - padding: 15px; + flex: 1; + padding: 50px 20px; + max-width: 1400px; + margin: 0 auto; + width: 100%; +} + +.hero-section { + text-align: center; + margin-bottom: 60px; + padding: 0 20px; } -.links { +.hero-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 20px; +} + +.hero-subtitle { + font-size: 1.2rem; + opacity: 0.8; + max-width: 700px; + margin: 0 auto 30px; +} + +.content-wrapper { display: flex; - gap: 10px; - margin: 15px 0; + flex-wrap: wrap; + gap: 40px; + justify-content: center; + margin: 50px 0; + padding: 0 20px; } -.link-card { +.links, .info-section { flex: 1; + min-width: 300px; + max-width: 600px; +} + +.section-title { + text-align: center; + font-size: 1.8rem; + margin-bottom: 30px; + font-weight: 600; + position: relative; + padding-bottom: 15px; +} + +.section-title::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: var(--primary-color); + border-radius: 2px; +} + +.links .section-title { + color: var(--link-card-text); +} + +.info-section .section-title { + color: var(--info-card-header); +} + +/* Link styles */ +.link-list { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; +} + +.link-item { + display: flex; + align-items: center; + padding: 25px; background: var(--link-card-bg); color: var(--link-card-text); - padding: 12px 8px; - border-radius: 4px; text-decoration: none; + border-radius: 15px; + transition: all 0.3s ease; + box-shadow: var(--shadow); + border: 1px solid rgba(255,255,255,0.1); +} + +.link-item:hover { + transform: translateY(-5px); + box-shadow: 0 15px 30px rgba(0,0,0,0.2); +} + +.link-icon { + font-size: 2rem; + margin-right: 20px; + width: 3rem; text-align: center; - transition: all 0.2s ease; - box-shadow: 0 2px 3px rgba(0,0,0,0.1); - font-size: 0.8rem; } -.link-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 6px rgba(0,0,0,0.15); +.link-text { + display: flex; + flex-direction: column; } -.link-card h3 { - font-size: 0.9rem; +.link-title { + font-size: 1.4rem; + font-weight: 700; margin-bottom: 5px; } -.info-grid { +.link-description { + font-size: 1rem; + opacity: 0.9; +} + +/* Info section styles */ +.info-list { + background: var(--card-bg); + padding: 30px; + border-radius: 15px; + box-shadow: var(--shadow); + max-width: 800px; + margin: 0 auto; + border: 1px solid var(--border-color); +} + +.info-item { display: flex; - gap: 10px; - margin: 20px 0; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid var(--border-color); } -.info-card { - flex: 1; - background: var(--info-card-bg); - padding: 12px 8px; - border-radius: 4px; - text-align: center; - box-shadow: 0 1px 3px rgba(0,0,0,0.05); +.info-item:last-child { + border-bottom: none; } -.info-card h3 { - color: var(--info-card-header); - margin-bottom: 8px; - font-size: 0.85rem; +.info-label { + font-weight: 600; + color: var(--dark-text); + font-size: 1.1rem; } .info-value { - font-size: 1rem; - font-weight: bold; - color: var(--info-value-color); + font-weight: 600; + color: var(--primary-color); + font-size: 1.1rem; } -.instructions { - background-color: var(--instructions-bg); - border-left: 3px solid var(--instructions-border); - padding: 12px; - border-radius: 0 4px 4px 0; - margin: 15px 0; - font-size: 0.8rem; +/* Theme-specific additions */ +.theme-root1 .link-item { + background: var(--link-card-bg); + color: var(--link-card-text); } -.instructions h3 { - color: var(--instructions-header); - margin-top: 0; - font-size: 0.9rem; +.theme-root1 .link-title { + color: white; } -.instructions ul { - padding-left: 15px; - margin: 8px 0; +.theme-root1 .info-list { + background: var(--card-bg); + padding: 30px; + border-radius: 15px; + box-shadow: var(--shadow); + max-width: 800px; + margin: 0 auto; + border: 1px solid var(--border-color); } -.instructions li { - margin-bottom: 5px; +.theme-root1 .info-item { + display: flex; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid var(--border-color); } -code { - background-color: #eee; - padding: 1px 4px; - border-radius: 3px; - font-family: 'Courier New', monospace; - font-size: 0.75rem; +.theme-root1 .info-item:last-child { + border-bottom: none; } -footer { - text-align: center; - padding: 12px; - background-color: var(--footer-bg); - color: var(--footer-text); - font-size: 0.8rem; +.theme-root1 .info-label { + font-weight: 600; + color: var(--dark-text); + font-size: 1.1rem; } -@media (max-width: 768px) { - .links, .info-grid { - flex-direction: column; - } - - .controls { - flex-direction: column; - gap: 8px; - align-items: flex-start; - } +.theme-root1 .info-value { + font-weight: 600; + color: var(--primary-color); + font-size: 1.1rem; } -/* Theme-specific additions */ .theme-root2 .terminal-header { display: flex; justify-content: space-between; background: #2d2d2d; - padding: 10px 15px; + padding: 20px 30px; border-bottom: 1px solid #333; } .theme-root2 .terminal-buttons { display: flex; - gap: 6px; + gap: 10px; } .theme-root2 .terminal-button { - width: 10px; - height: 10px; + width: 16px; + height: 16px; border-radius: 50%; } @@ -471,97 +751,208 @@ footer { .theme-root2 .terminal-title { color: #9e9e9e; - font-size: 0.7rem; + font-size: 1rem; +} + +.theme-root2 .link-item { + background: var(--link-card-bg); + color: var(--link-card-text); } -.theme-root2 .link-card h3 { +.theme-root2 .link-title { text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 1px; } -.theme-root3 body { - background: linear-gradient(135deg, #667eea, #764ba2); +.theme-root2 .info-list { + background: var(--card-bg); + padding: 30px; + border-radius: 15px; + box-shadow: var(--shadow); + max-width: 800px; + margin: 0 auto; + border: 1px solid var(--border-color); } -.theme-root3 .container { - border-radius: 10px; +.theme-root2 .info-item { + display: flex; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid var(--border-color); } -.theme-root3 .template-btn { - border-radius: 10px; - font-weight: 500; +.theme-root2 .info-item:last-child { + border-bottom: none; } -.theme-root3 .refresh-btn { - border-radius: 10px; - font-weight: 500; +.theme-root2 .info-label { + font-weight: 600; + color: var(--dark-text); + font-size: 1.1rem; } -.theme-root3 .link-card { - border-radius: 10px; - box-shadow: 0 3px 5px rgba(0,0,0,0.1); +.theme-root2 .info-value { + font-weight: 600; + color: var(--primary-color); + font-size: 1.1rem; } -.theme-root3 .link-card:hover { - box-shadow: 0 5px 10px rgba(0,0,0,0.15); +.theme-root3 .info-list { + background: var(--card-bg); + padding: 30px; + border-radius: 15px; + box-shadow: var(--shadow); + max-width: 800px; + margin: 0 auto; + border: 1px solid var(--border-color); } -.theme-root3 .info-card { - border-radius: 10px; - box-shadow: 0 3px 5px rgba(0,0,0,0.05); +.theme-root3 .info-item { + display: flex; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid var(--border-color); } -.theme-root4 .container { - border: 1px solid var(--border-color); +.theme-root3 .info-item:last-child { + border-bottom: none; } -.theme-root4 .template-btn:hover { - opacity: 0.8; - transform: translateY(-2px); +.theme-root3 .info-label { + font-weight: 600; + color: var(--dark-text); + font-size: 1.1rem; } -.theme-root4 .refresh-btn:hover { - background-color: var(--yellow); - color: var(--background); - transform: rotate(90deg); +.theme-root3 .info-value { + font-weight: 600; + color: var(--primary-color); + font-size: 1.1rem; } -.theme-root4 .link-card:hover { - transform: translateY(-5px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - border-color: var(--purple); +.theme-root4 .info-list { + background: var(--card-bg); + padding: 30px; + border-radius: 15px; + box-shadow: var(--shadow); + max-width: 800px; + margin: 0 auto; + border: 1px solid var(--border-color); } -.theme-root4 .link-card:nth-child(1):hover { - border-color: var(--cyan); +.theme-root4 .info-item { + display: flex; + justify-content: space-between; + padding: 15px 0; + border-bottom: 1px solid var(--border-color); } -.theme-root4 .link-card:nth-child(2):hover { - border-color: var(--green); +.theme-root4 .info-item:last-child { + border-bottom: none; } -.theme-root4 .link-card:nth-child(3):hover { - border-color: var(--orange); +.theme-root4 .info-label { + font-weight: 600; + color: var(--dark-text); + font-size: 1.1rem; } -.theme-root4 .link-card h3 { +.theme-root4 .info-value { + font-weight: 600; color: var(--cyan); + font-size: 1.1rem; + font-family: 'Fira Code', monospace; } -.theme-root4 .link-card:nth-child(2) h3 { - color: var(--green); +.theme-root4 .link-item { + background: var(--link-card-bg); + color: var(--link-card-text); } -.theme-root4 .link-card:nth-child(3) h3 { - color: var(--orange); +.theme-root4 .link-item:hover { + border-color: var(--purple); + transform: translateY(-5px); } -.theme-root4 .info-card h3 { - color: var(--pink); - text-transform: uppercase; - letter-spacing: 1px; +.theme-root4 .link-title { + color: var(--cyan); } -.theme-root4 .info-value { - font-family: 'Fira Code', monospace; +/* Footer */ +footer { + text-align: center; + padding: 30px; + background-color: var(--footer-bg); + color: var(--footer-text); + font-size: 1rem; + margin-top: auto; +} + +/* Responsive design */ +@media (max-width: 768px) { + .controls { + flex-direction: column; + align-items: flex-start; + gap: 20px; + padding: 15px 20px; + } + + .template-selector { + width: 100%; + justify-content: space-between; + } + + .main-content { + padding: 30px 15px; + } + + .content-wrapper { + flex-direction: column; + } + + .links, .info-section { + width: 100%; + max-width: 100%; + } + + h1 { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + } + + .link-item { + padding: 20px; + } + + .link-icon { + font-size: 1.5rem; + margin-right: 15px; + } + + .link-title { + font-size: 1.2rem; + } + + .info-list { + padding: 20px; + } + + .info-value { + font-size: 1rem; + } + + .section-title { + font-size: 1.5rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1rem; + } } \ No newline at end of file -- Gitee