diff --git a/web/static/css/style.css b/web/static/css/style.css index cba50243..c36b0cab 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -9,6 +9,10 @@ --secondary-color: #2d2d2d; --accent-color: #0066ff; --accent-hover: #0052cc; + --brand-core: #141824; + --brand-ai-start: #0066ff; + --brand-ai-end: #7c3aed; + --brand-gradient: linear-gradient(135deg, var(--brand-ai-start) 0%, var(--brand-ai-end) 100%); --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #f1f3f5; @@ -125,11 +129,19 @@ body { color: var(--text-primary); } -.main-sidebar-header .logo span { +.main-sidebar-header .logo span, +.main-sidebar-header .brand-wordmark { font-size: 1.25rem; - font-weight: 600; - letter-spacing: -0.3px; - color: var(--text-primary); + font-weight: 700; + letter-spacing: -0.04em; + color: var(--brand-core); +} + +.main-sidebar-header .brand-wordmark__ai { + background: var(--brand-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .main-sidebar-nav { @@ -592,37 +604,89 @@ header { .logo { display: flex; align-items: center; - gap: 12px; + gap: 10px; } .logo svg { color: var(--accent-color); } -.logo h1 { +/* 品牌字标：CyberStrike + AI 渐变 */ +.brand-wordmark { + display: inline-flex; + align-items: baseline; + margin: 0; + font-size: 1.375rem; + font-weight: 700; + letter-spacing: -0.04em; + line-height: 1; + white-space: nowrap; +} + +.brand-wordmark--lg { font-size: 1.5rem; - font-weight: 600; - letter-spacing: -0.5px; +} + +.brand-wordmark--sm { + font-size: 1.25rem; +} + +.brand-wordmark__core { + color: var(--brand-core); +} + +.brand-wordmark__ai { + background: var(--brand-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 800; +} + +.brand-logo { + width: 36px; + height: 36px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 102, 255, 0.18); + flex-shrink: 0; + object-fit: cover; +} + +.logo h1, +.logo .brand-wordmark { + font-size: 1.375rem; } .header-logo-link { cursor: pointer; - transition: opacity 0.2s ease; + transition: transform 0.2s ease, opacity 0.2s ease; } .header-logo-link:hover { - opacity: 0.85; + opacity: 1; + transform: translateY(-1px); +} + +.header-logo-link:hover .brand-logo { + box-shadow: 0 4px 14px rgba(0, 102, 255, 0.28); } .version-badge { - display: inline-block; - margin-left: 6px; - font-size: 0.6875rem; - font-weight: 400; - color: var(--text-muted); - letter-spacing: 0.02em; - vertical-align: 0.35em; + display: inline-flex; + align-items: center; + margin-left: 4px; + padding: 3px 9px; + font-size: 0.625rem; + font-weight: 600; + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; + color: var(--brand-ai-start); + background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%); + border: 1px solid rgba(0, 102, 255, 0.22); + border-radius: 999px; + letter-spacing: 0.04em; + vertical-align: middle; user-select: none; + line-height: 1.4; } .header-right { @@ -3091,10 +3155,36 @@ header { .login-brand { padding: 32px 28px 24px; text-align: center; - background: linear-gradient(180deg, rgba(0, 102, 255, 0.06) 0%, transparent 100%); + background: linear-gradient(180deg, rgba(0, 102, 255, 0.07) 0%, rgba(124, 58, 237, 0.04) 50%, transparent 100%); border-bottom: 1px solid var(--border-color); } +.login-brand-logo { + width: 56px; + height: 56px; + margin: 0 auto 16px; + border-radius: 14px; + box-shadow: 0 6px 20px rgba(0, 102, 255, 0.2); + object-fit: cover; +} + +.login-title { + margin: 0; + display: flex; + flex-wrap: wrap; + align-items: baseline; + justify-content: center; + gap: 0.35em; + font-size: 1.25rem; + font-weight: 500; + color: var(--text-secondary); + letter-spacing: -0.01em; +} + +.login-title .brand-wordmark { + font-size: 1.375rem; +} + .login-brand h2 { margin: 0; font-size: 1.375rem; @@ -3530,8 +3620,19 @@ header { flex-shrink: 0; } - .logo h1 { - font-size: 1.25rem; + .logo h1, + .logo .brand-wordmark { + font-size: 1.2rem; + } + + .brand-logo { + width: 32px; + height: 32px; + } + + .version-badge { + padding: 2px 7px; + font-size: 0.5625rem; } .header-subtitle { diff --git a/web/static/i18n/en-US.json b/web/static/i18n/en-US.json index 02e79684..f65e7c0f 100644 --- a/web/static/i18n/en-US.json +++ b/web/static/i18n/en-US.json @@ -48,6 +48,7 @@ }, "login": { "title": "Sign in to CyberStrikeAI", + "titlePrefix": "Sign in to", "subtitle": "Enter the access password from config", "passwordLabel": "Password", "passwordPlaceholder": "Enter password", diff --git a/web/static/i18n/zh-CN.json b/web/static/i18n/zh-CN.json index f78c47d9..09457aaa 100644 --- a/web/static/i18n/zh-CN.json +++ b/web/static/i18n/zh-CN.json @@ -48,6 +48,7 @@ }, "login": { "title": "登录 CyberStrikeAI", + "titlePrefix": "登录", "subtitle": "请输入配置中的访问密码", "passwordLabel": "密码", "passwordPlaceholder": "输入登录密码", diff --git a/web/templates/index.html b/web/templates/index.html index cd624716..361d747f 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -14,7 +14,13 @@