diff --git a/media_server/static/index.html b/media_server/static/index.html index f1e3033..63d263d 100644 --- a/media_server/static/index.html +++ b/media_server/static/index.html @@ -263,6 +263,108 @@ border-top: 1px solid var(--border); } + /* Scripts Section */ + .scripts-container { + background: var(--bg-secondary); + border-radius: 12px; + padding: 2rem; + margin-top: 2rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + } + + .scripts-container h2 { + font-size: 1.25rem; + margin-bottom: 1rem; + color: var(--text-primary); + } + + .scripts-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 1rem; + } + + .script-btn { + width: 100%; + height: auto; + min-height: 80px; + padding: 1rem; + border-radius: 8px; + background: var(--bg-tertiary); + border: 1px solid var(--border); + color: var(--text-primary); + cursor: pointer; + transition: all 0.2s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; + } + + .script-btn:hover:not(:disabled) { + background: var(--accent); + border-color: var(--accent); + transform: translateY(-2px); + } + + .script-btn:disabled { + opacity: 0.3; + cursor: not-allowed; + } + + .script-btn .script-label { + font-weight: 600; + font-size: 0.875rem; + } + + .script-btn .script-description { + font-size: 0.75rem; + color: var(--text-secondary); + text-align: center; + } + + .script-btn.executing { + opacity: 0.6; + pointer-events: none; + } + + .scripts-empty { + text-align: center; + color: var(--text-muted); + padding: 2rem; + font-size: 0.875rem; + } + + .toast { + position: fixed; + bottom: 2rem; + right: 2rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem 1.5rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + opacity: 0; + transform: translateY(20px); + transition: all 0.3s; + pointer-events: none; + z-index: 1000; + } + + .toast.show { + opacity: 1; + transform: translateY(0); + } + + .toast.success { + border-color: var(--accent); + } + + .toast.error { + border-color: var(--error); + } + /* Auth Modal */ #auth-overlay { position: fixed; @@ -489,8 +591,19 @@ Source: Unknown + + +
+ + +