diff --git a/baseTemplate/templates/baseTemplate/index.html b/baseTemplate/templates/baseTemplate/index.html index 8908a0259..f7b1bde4f 100644 --- a/baseTemplate/templates/baseTemplate/index.html +++ b/baseTemplate/templates/baseTemplate/index.html @@ -1107,6 +1107,123 @@ } } + /* v2 Panel Banner */ + .v2-panel-banner { + position: fixed; + top: 80px; + left: 260px; + right: 0; + background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%); + border-bottom: 2px solid #4338ca; + padding: 12px 30px; + z-index: 997; + box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25); + animation: slideDown 0.4s ease-out; + display: none; + } + + .v2-panel-banner.show { + display: block; + } + + .v2-panel-content { + display: flex; + align-items: center; + gap: 1.2rem; + max-width: 1400px; + margin: 0 auto; + } + + .v2-panel-icon { + background: rgba(255, 255, 255, 0.2); + border-radius: 10px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .v2-panel-icon i { + font-size: 1.3rem; + color: white; + } + + .v2-panel-text { + flex: 1; + min-width: 0; + } + + .v2-panel-main-text { + display: block; + color: white; + font-weight: 700; + font-size: 0.95rem; + } + + .v2-panel-sub-text { + display: block; + color: rgba(255, 255, 255, 0.85); + font-size: 0.8rem; + margin-top: 2px; + } + + .v2-panel-btn { + display: inline-flex; + align-items: center; + gap: 8px; + background: white; + color: #4f46e5; + padding: 9px 20px; + border-radius: 8px; + font-weight: 700; + font-size: 0.85rem; + text-decoration: none; + white-space: nowrap; + transition: transform 0.2s, box-shadow 0.2s; + } + + .v2-panel-btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + color: #4f46e5; + text-decoration: none; + } + + .v2-panel-close { + background: none; + border: none; + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + padding: 6px; + font-size: 1rem; + flex-shrink: 0; + } + + .v2-panel-close:hover { + color: white; + } + + .v2-shown .v2-panel-banner { + /* positioning adjusted by JS based on other banners */ + } + + @media (max-width: 768px) { + .v2-panel-banner { + left: 0; + padding: 10px 16px; + } + + .v2-panel-content { + gap: 0.8rem; + flex-wrap: wrap; + } + + .v2-panel-sub-text { + display: none; + } + } + /* Scrollbar */ ::-webkit-scrollbar { width: 8px; @@ -2043,6 +2160,28 @@ + +