-

// 系统信息

+

系统信息

版本信息: @@ -87,7 +87,7 @@
diff --git a/templates/styles.css b/templates/styles.css index be1b70aae1bdaf426fdee897e9855d5d83839e03..07868b4ef05649b334b602ab477dc43ebfcf0235 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -49,10 +49,11 @@ .theme-default header { background: linear-gradient(135deg, var(--secondary-color), #1a252f); color: var(--light-text); - padding: 60px 20px 40px; + padding: 40px 20px 30px; text-align: center; position: relative; overflow: hidden; + flex: 0 0 auto; } .theme-default header::before { @@ -67,412 +68,92 @@ } .theme-default h1 { - font-size: 3rem; + font-size: 2.5rem; font-weight: 700; - margin-bottom: 20px; + margin-bottom: 15px; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .theme-default .subtitle { - font-size: 1.3rem; + font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; font-weight: 300; } - -/* Simple blue theme */ -.theme-root1 { - --primary-color: #3498db; - --secondary-color: #2c3e50; - --accent-color: #2ecc71; - --light-bg: #f5f7fa; - --dark-bg: #2c3e50; - --light-text: #f8f9fa; - --dark-text: #333; - --border-color: #eee; - --card-bg: #fff; - --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; - --refresh-button-bg: #2ecc71; - --refresh-button-hover-bg: #27ae60; - --link-card-bg: #2c3e50; - --link-card-text: #3498db; - --info-card-bg: #fff; - --info-card-header: #2c3e50; - --info-value-color: #3498db; - --footer-bg: #2c3e50; - --footer-text: #f8f9fa; - --instructions-bg: #e8f4fc; - --instructions-border: #3498db; - --instructions-header: #2c3e50; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.theme-root1 body { - background: linear-gradient(135deg, #eef2f7 0%, #d6e4f0 100%); - min-height: 100vh; +/* Global styles to prevent scrollbars and show all content */ +body { margin: 0; padding: 0; } -.theme-root1 .container { +.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: 60px 20px 40px; - background-color: var(--card-bg); - 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: 3rem; - font-weight: 700; - margin-bottom: 20px; - letter-spacing: -0.5px; -} - -.theme-root1 .subtitle { - color: #7f8c8d; - font-size: 1.3rem; - max-width: 600px; - margin: 0 auto; - font-weight: 300; -} - -/* Dark terminal theme */ -.theme-root2 { - --primary-color: #4fc3f7; - --secondary-color: #2d2d2d; - --accent-color: #81c784; - --bg-color: #0f0f0f; - --card-bg: #1e1e1e; - --light-bg: #121212; - --dark-text: #e0e0e0; - --border-color: #333; - --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; - --refresh-button-bg: #2d2d2d; - --refresh-button-hover-bg: #444; - --link-card-bg: #2d2d2d; - --link-card-text: #4fc3f7; - --info-card-bg: #2d2d2d; - --info-card-header: #4fc3f7; - --info-value-color: #81c784; - --footer-bg: #2d2d2d; - --footer-text: #9e9e9e; - --instructions-bg: #1e1e1e; - --instructions-border: #4fc3f7; - --instructions-header: #4fc3f7; - 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; +/* Global styles for adaptive layout with scrollbars */ +html, body { + height: 100%; 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: 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: 3rem; - text-transform: uppercase; - 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: 1.3rem; - max-width: 600px; - margin: 0 auto; - font-weight: 300; -} - -/* Minimalist theme */ -.theme-root3 { - --primary-color: #667eea; - --secondary-color: #764ba2; - --accent-color: #81c784; - --light-bg: #f8f9fa; - --dark-bg: #2c3e50; - --dark-text: #333; - --border-color: #eee; - --card-bg: rgba(255, 255, 255, 0.95); - --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; - --refresh-button-bg: #764ba2; - --refresh-button-hover-bg: #653d90; - --link-card-bg: linear-gradient(135deg, #667eea, #764ba2); - --link-card-text: #fff; - --info-card-bg: #f8f9fa; - --info-card-header: #2c3e50; - --info-value-color: #667eea; - --footer-bg: #2c3e50; - --footer-text: #f8f9fa; - --instructions-bg: #e8f4fc; - --instructions-border: #667eea; - --instructions-header: #2c3e50; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - 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: 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: 3.5rem; - font-weight: 300; - margin-bottom: 20px; - letter-spacing: -1px; - text-shadow: 0 2px 10px rgba(0,0,0,0.2); -} - -.theme-root3 .subtitle { - font-size: 1.4rem; - opacity: 0.9; - max-width: 700px; - margin: 0 auto; - font-weight: 300; -} - -/* Dracula theme */ -.theme-root4 { - /* Dracula Theme Colors */ - --background: #282a36; - --current-line: #44475a; - --foreground: #f8f8f2; - --comment: #6272a4; - --cyan: #8be9fd; - --green: #50fa7b; - --orange: #ffb86c; - --pink: #ff79c6; - --purple: #bd93f9; - --red: #ff5555; - --yellow: #f1fa8c; - - /* Custom variations for UI */ - --card-bg: #2d303d; - --border-color: #44475a; - --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); - --dark-text: #f8f8f2; - --light-bg: #282a36; - --controls-bg: rgba(45,48,61,0.8); - --button-bg: #6272a4; - --button-hover-bg: rgba(98, 114, 164, 0.8); - --active-button-bg: #ff79c6; - --refresh-button-bg: #50fa7b; - --refresh-button-hover-bg: #f1fa8c; - --link-card-bg: #44475a; - --link-card-text: #f8f8f2; - --info-card-bg: #44475a; - --info-card-header: #ff79c6; - --info-value-color: #f1fa8c; - --footer-bg: #44475a; - --footer-text: #6272a4; - --instructions-bg: #2d303d; - --instructions-border: #bd93f9; - --instructions-header: #ff79c6; - font-family: 'Fira Code', 'SF Mono', 'Courier New', monospace; - background-color: var(--background); - color: var(--foreground); + overflow: auto; 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: 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: 3.5rem; - margin-bottom: 25px; - color: var(--purple); - text-shadow: 0 0 15px rgba(189, 147, 249, 0.4); - font-weight: 700; - letter-spacing: -1px; -} - -.theme-root4 .subtitle { - font-size: 1.4rem; - color: var(--comment); - max-width: 700px; - margin: 0 auto; - font-weight: 300; -} - -/* Common styles */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - body { - line-height: 1.6; - padding: 0; - margin: 0; - min-height: 100vh; display: flex; flex-direction: column; + min-height: 100vh; } .container { - flex: 1; display: flex; flex-direction: column; + min-height: 100vh; + overflow: visible; } .controls { display: flex; justify-content: space-between; align-items: center; - padding: 20px 30px; + padding: 15px 20px; background-color: var(--controls-bg); border-bottom: 1px solid var(--border-color); - font-size: 1rem; + font-size: 0.9rem; flex-wrap: wrap; - gap: 15px; + gap: 10px; backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; + flex: 0 0 auto; +} + +.main-content { + flex: 1 1 auto; + padding: 30px 15px; + max-width: 1400px; + margin: 0 auto; + width: 100%; +} + +.content-wrapper { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: space-between; + align-items: stretch; + margin: 30px 0; + padding: 0 20px; +} + +.links, .info-section { + flex: 1 1 400px; + min-width: 300px; + display: flex; + flex-direction: column; } .template-selector { @@ -487,15 +168,15 @@ body { } .template-btn { - padding: 8px 16px; + padding: 6px 12px; background: var(--button-bg); color: white; border: none; - border-radius: 30px; + border-radius: 20px; cursor: pointer; - font-size: 0.95rem; + font-size: 0.85rem; transition: all 0.3s ease; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: 500; } @@ -511,15 +192,15 @@ body { } .refresh-btn { - padding: 8px 20px; + padding: 6px 16px; background: var(--refresh-button-bg); color: white; border: none; - border-radius: 30px; + border-radius: 20px; cursor: pointer; - font-size: 0.95rem; + font-size: 0.85rem; transition: all 0.3s ease; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: 500; } @@ -530,8 +211,8 @@ body { } .main-content { - flex: 1; - padding: 50px 20px; + flex: 1 1 auto; + padding: 30px 15px; max-width: 1400px; margin: 0 auto; width: 100%; @@ -561,7 +242,7 @@ body { flex-wrap: wrap; gap: 40px; justify-content: space-between; - align-items: flex-start; + align-items: stretch; margin: 50px 0; padding: 0 20px; } @@ -570,152 +251,62 @@ body { flex: 1; min-width: 300px; max-width: 600px; -} - -.theme-default .content-wrapper { display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - align-items: flex-start; - margin: 50px 0; - padding: 0 20px; -} - -.theme-default .links, -.theme-default .info-section { - flex: 1; - min-width: 300px; - max-width: 600px; -} - -.theme-root1 .content-wrapper { - display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - align-items: flex-start; - margin: 50px 0; - padding: 0 20px; + flex-direction: column; } -.theme-root1 .links, -.theme-root1 .info-section { - flex: 1; - min-width: 300px; - max-width: 600px; +.links .section-title, +.info-section .section-title { + flex: 0 0 auto; } -.theme-root2 .content-wrapper { +.link-list, +.info-list { + flex: 1 1 auto; display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - align-items: flex-start; - margin: 50px 0; - padding: 0 20px; -} - -.theme-root2 .links, -.theme-root2 .info-section { - flex: 1; - min-width: 300px; - max-width: 600px; + flex-direction: column; } -.theme-root3 .content-wrapper { +/* Equal height columns */ +.equal-height-column { display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - align-items: flex-start; - margin: 50px 0; - padding: 0 20px; + flex-direction: column; + height: 100%; } -.theme-root3 .links, -.theme-root3 .info-section { +.equal-height-content { flex: 1; - min-width: 300px; - max-width: 600px; -} - -.theme-root4 .content-wrapper { display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - align-items: flex-start; - margin: 50px 0; - padding: 0 20px; -} - -.theme-root4 .links, -.theme-root4 .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); + flex-direction: column; } /* Link styles */ .link-list { display: flex; flex-direction: column; - gap: 20px; + gap: 15px; width: 100%; + flex: 1 1 auto; } .link-item { display: flex; align-items: center; - padding: 25px; + padding: 20px; background: var(--link-card-bg); color: var(--link-card-text); text-decoration: none; - border-radius: 15px; + border-radius: 12px; 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); + flex: 1 1 auto; } .link-icon { - font-size: 2rem; - margin-right: 20px; - width: 3rem; + font-size: 1.5rem; + margin-right: 15px; + width: 2.5rem; text-align: center; } @@ -725,32 +316,36 @@ body { } .link-title { - font-size: 1.4rem; + font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; } .link-description { - font-size: 1rem; + font-size: 0.9rem; opacity: 0.9; } /* Info section styles */ .info-list { background: var(--card-bg); - padding: 30px; - border-radius: 15px; + padding: 20px; + border-radius: 12px; box-shadow: var(--shadow); - max-width: 800px; margin: 0 auto; border: 1px solid var(--border-color); + flex: 1 1 auto; + display: flex; + flex-direction: column; + width: 100%; } .info-item { display: flex; justify-content: space-between; - padding: 15px 0; + padding: 12px 0; border-bottom: 1px solid var(--border-color); + flex: 1 1 auto; } .info-item:last-child { @@ -760,208 +355,13 @@ body { .info-label { font-weight: 600; color: var(--dark-text); - font-size: 1.1rem; + font-size: 0.95rem; } .info-value { font-weight: 600; color: var(--primary-color); - font-size: 1.1rem; -} - -/* Theme-specific additions */ -.theme-root1 .link-item { - background: var(--link-card-bg); - color: var(--link-card-text); -} - -.theme-root1 .link-title { - color: white; -} - -.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); -} - -.theme-root1 .info-item { - display: flex; - justify-content: space-between; - padding: 15px 0; - border-bottom: 1px solid var(--border-color); -} - -.theme-root1 .info-item:last-child { - border-bottom: none; -} - -.theme-root1 .info-label { - font-weight: 600; - color: var(--dark-text); - font-size: 1.1rem; -} - -.theme-root1 .info-value { - font-weight: 600; - color: var(--primary-color); - font-size: 1.1rem; -} - -.theme-root2 .terminal-header { - display: flex; - justify-content: space-between; - background: #2d2d2d; - padding: 20px 30px; - border-bottom: 1px solid #333; -} - -.theme-root2 .terminal-buttons { - display: flex; - gap: 10px; -} - -.theme-root2 .terminal-button { - width: 16px; - height: 16px; - border-radius: 50%; -} - -.theme-root2 .close { background: #ff5f56; } -.theme-root2 .minimize { background: #ffbd2e; } -.theme-root2 .maximize { background: #27c93f; } - -.theme-root2 .terminal-title { - color: #9e9e9e; - font-size: 1rem; -} - -.theme-root2 .link-item { - background: var(--link-card-bg); - color: var(--link-card-text); -} - -.theme-root2 .link-title { - text-transform: uppercase; - letter-spacing: 1px; -} - -.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-root2 .info-item { - display: flex; - justify-content: space-between; - padding: 15px 0; - border-bottom: 1px solid var(--border-color); -} - -.theme-root2 .info-item:last-child { - border-bottom: none; -} - -.theme-root2 .info-label { - font-weight: 600; - color: var(--dark-text); - font-size: 1.1rem; -} - -.theme-root2 .info-value { - font-weight: 600; - color: var(--primary-color); - font-size: 1.1rem; -} - -.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-item { - display: flex; - justify-content: space-between; - padding: 15px 0; - border-bottom: 1px solid var(--border-color); -} - -.theme-root3 .info-item:last-child { - border-bottom: none; -} - -.theme-root3 .info-label { - font-weight: 600; - color: var(--dark-text); - font-size: 1.1rem; -} - -.theme-root3 .info-value { - font-weight: 600; - color: var(--primary-color); - font-size: 1.1rem; -} - -.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 .info-item { - display: flex; - justify-content: space-between; - padding: 15px 0; - border-bottom: 1px solid var(--border-color); -} - -.theme-root4 .info-item:last-child { - border-bottom: none; -} - -.theme-root4 .info-label { - font-weight: 600; - color: var(--dark-text); - font-size: 1.1rem; -} - -.theme-root4 .info-value { - font-weight: 600; - color: var(--cyan); - font-size: 1.1rem; - font-family: 'Fira Code', monospace; -} - -.theme-root4 .link-item { - background: var(--link-card-bg); - color: var(--link-card-text); -} - -.theme-root4 .link-item:hover { - border-color: var(--purple); - transform: translateY(-5px); -} - -.theme-root4 .link-title { - color: var(--cyan); + font-size: 0.95rem; } /* Footer */ @@ -971,7 +371,7 @@ footer { background-color: var(--footer-bg); color: var(--footer-text); font-size: 1rem; - margin-top: auto; + flex: 0 0 auto; } /* Responsive design */ @@ -979,8 +379,8 @@ footer { .controls { flex-direction: column; align-items: flex-start; - gap: 20px; - padding: 15px 20px; + gap: 15px; + padding: 12px 15px; } .template-selector { @@ -989,21 +389,23 @@ footer { } .main-content { - padding: 30px 15px; + padding: 15px 10px; } .content-wrapper { flex-direction: column; align-items: center; + gap: 20px; } .links, .info-section { width: 100%; max-width: 100%; + min-width: unset; } h1 { - font-size: 2rem; + font-size: 1.8rem; } .subtitle { @@ -1011,35 +413,37 @@ footer { } .link-item { - padding: 20px; + padding: 15px; } .link-icon { - font-size: 1.5rem; - margin-right: 15px; + font-size: 1.2rem; + margin-right: 12px; } .link-title { - font-size: 1.2rem; + font-size: 1rem; } - .info-list { - padding: 20px; + .link-description { + font-size: 0.8rem; } - .info-value { - font-size: 1rem; + .info-list { + padding: 15px; + width: 100%; } - .section-title { - font-size: 1.5rem; + .info-item { + padding: 10px 0; } - .hero-title { - font-size: 2rem; + .info-label, .info-value { + font-size: 0.9rem; } - .hero-subtitle { - font-size: 1rem; + .section-title { + font-size: 1.3rem; } + } \ No newline at end of file