diff --git a/src/frontend/admin.html b/src/frontend/admin.html index b38ba3d..988fcb6 100644 --- a/src/frontend/admin.html +++ b/src/frontend/admin.html @@ -43,6 +43,52 @@ .admin-hint { color: var(--muted-2); font-size: 12px; margin-top: 8px; } .hidden { display: none !important; } abbr.code { font-family: monospace; font-size: 13px; color: var(--text); word-break: break-all; } + + /* всплывающие уведомления вместо alert(): сами исчезают через 15 секунд */ + #toast-wrap { + position: fixed; + left: 50%; + bottom: 18px; + transform: translateX(-50%); + z-index: 9999; + display: flex; + flex-direction: column; + gap: 8px; + width: min(560px, calc(100vw - 32px)); + } + .toast { + display: flex; + align-items: flex-start; + gap: 10px; + background: var(--surface); + border: 1px solid var(--border-2); + border-left: 4px solid var(--accent-blue); + box-shadow: 0 8px 24px var(--shadow); + padding: 12px 14px; + font-size: 14px; + color: var(--text); + white-space: pre-line; + animation: toast-in .18s ease-out; + } + .toast.ok { border-left-color: #2f9e5f; } + .toast.error { border-left-color: var(--accent-red-bright); } + .toast.hide { opacity: 0; transition: opacity .3s ease; } + .toast .toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } + .toast .toast-close { + flex: 0 0 auto; + border: none; + background: none; + color: var(--muted); + font-size: 15px; + line-height: 1; + cursor: pointer; + padding: 2px 4px; + } + .toast .toast-close:hover { color: var(--text); } + @keyframes toast-in { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: none; } + }
@@ -104,8 +150,37 @@ + +