diff --git a/templates/base.html b/templates/base.html index 676300c..8afa7e3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -336,6 +336,160 @@ ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } + + /* ── Toast Notifications ── */ + .toast-container { + position: fixed; bottom: 24px; right: 24px; z-index: 10000; + display: flex; flex-direction: column-reverse; gap: 10px; + pointer-events: none; + } + .toast { + pointer-events: auto; + background: rgba(18, 22, 35, 0.95); + backdrop-filter: blur(24px); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 14px 20px; + min-width: 300px; max-width: 420px; + display: flex; align-items: center; gap: 12px; + font-size: 13.5px; font-weight: 500; + box-shadow: 0 12px 40px rgba(0,0,0,0.5); + transform: translateX(120%); + animation: toast-in .35s cubic-bezier(0.16, 1, 0.3, 1) forwards; + } + .toast.removing { animation: toast-out .25s ease-in forwards; } + @keyframes toast-in { to { transform: translateX(0); } } + @keyframes toast-out { to { transform: translateX(120%); opacity: 0; } } + .toast-icon { font-size: 18px; flex-shrink: 0; } + .toast-body { flex: 1; } + .toast-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; } + .toast-msg { color: var(--text-secondary); font-size: 12.5px; } + .toast-close { + background: none; border: none; color: var(--text-muted); cursor: pointer; + padding: 4px; border-radius: 4px; line-height: 1; flex-shrink: 0; + } + .toast-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } + .toast-success { border-left: 3px solid var(--success); } + .toast-error { border-left: 3px solid var(--danger); } + .toast-info { border-left: 3px solid var(--accent-2); } + .toast-warning { border-left: 3px solid var(--warning); } + + /* ── Command Palette ── */ + .cmd-overlay { + position: fixed; inset: 0; z-index: 20000; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(6px); + display: none; align-items: flex-start; justify-content: center; + padding-top: min(20vh, 180px); + } + .cmd-overlay.open { display: flex; } + .cmd-palette { + width: 560px; max-width: 90vw; + background: rgba(18, 22, 35, 0.98); + border: 1px solid var(--border-bright); + border-radius: var(--radius); + box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,102,241,0.1); + overflow: hidden; + animation: cmd-in .2s cubic-bezier(0.16, 1, 0.3, 1); + } + @keyframes cmd-in { from { opacity:0; transform:scale(0.96) translateY(-10px); } to { opacity:1; transform:scale(1) translateY(0); } } + .cmd-input-wrap { + display: flex; align-items: center; gap: 12px; + padding: 16px 20px; + border-bottom: 1px solid var(--border); + } + .cmd-input-wrap svg { flex-shrink: 0; color: var(--text-muted); } + .cmd-input { + flex: 1; background: none; border: none; outline: none; + color: var(--text-primary); font-size: 15px; font-family: inherit; + } + .cmd-input::placeholder { color: var(--text-muted); } + .cmd-hint { + font-size: 11px; color: var(--text-muted); padding: 8px 20px 4px; + font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; + } + .cmd-list { + max-height: 340px; overflow-y: auto; + padding: 8px 8px; + } + .cmd-item { + display: flex; align-items: center; gap: 12px; + padding: 10px 14px; border-radius: var(--radius-sm); + cursor: pointer; color: var(--text-secondary); + font-size: 13.5px; font-weight: 500; + transition: all .12s ease; + } + .cmd-item:hover, .cmd-item.active { + background: rgba(99, 102, 241, 0.1); + color: var(--text-primary); + } + .cmd-item.active { border: 1px solid rgba(99, 102, 241, 0.2); } + .cmd-item-icon { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; } + .cmd-item-label { flex: 1; } + .cmd-item-kbd { + font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; + background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 4px; + border: 1px solid rgba(255,255,255,0.06); + } + .cmd-footer { + padding: 10px 20px; border-top: 1px solid var(--border); + font-size: 11px; color: var(--text-muted); display: flex; gap: 16px; + } + .cmd-footer kbd { + font-family: 'JetBrains Mono', monospace; font-size: 10px; + background: rgba(255,255,255,0.04); padding: 2px 5px; border-radius: 3px; + border: 1px solid rgba(255,255,255,0.08); margin: 0 2px; + } + + /* ── Copy Tooltip ── */ + .copy-feedback { + position: fixed; z-index: 15000; + background: var(--success); color: #fff; + font-size: 12px; font-weight: 600; + padding: 4px 10px; border-radius: 6px; + pointer-events: none; + animation: copy-pop .4s ease forwards; + } + @keyframes copy-pop { + 0% { opacity: 0; transform: translateY(4px) scale(0.9); } + 30% { opacity: 1; transform: translateY(-6px) scale(1); } + 100% { opacity: 0; transform: translateY(-18px) scale(0.95); } + } + + /* ── Skeleton Loading ── */ + .skeleton { + background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); + background-size: 200% 100%; + animation: shimmer 1.5s ease-in-out infinite; + border-radius: var(--radius-sm); + } + @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } + .skeleton-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 24px; + box-shadow: var(--shadow); + } + .skeleton-line { height: 14px; margin-bottom: 10px; border-radius: 6px; } + .skeleton-line.w-60 { width: 60%; } + .skeleton-line.w-40 { width: 40%; } + .skeleton-line.w-80 { width: 80%; } + .skeleton-line.h-20 { height: 20px; } + .skeleton-line.h-8 { height: 8px; margin-bottom: 14px; } + .skeleton-block { height: 48px; margin-bottom: 12px; border-radius: var(--radius-sm); } + + /* ── Keyboard Shortcut Hints ── */ + .kbd-hint { + display: inline-block; + font-family: 'JetBrains Mono', monospace; + font-size: 10px; font-weight: 600; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.08); + padding: 1px 5px; border-radius: 3px; + color: var(--text-muted); + margin-left: 6px; vertical-align: middle; + } {% block head %}{% endblock %} @@ -403,17 +557,174 @@
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} -
- {% for cat, msg in messages %} -
{{ msg }}
- {% endfor %} -
+ {% endif %} {% endwith %} {% block content %}{% endblock %}
+ +
+ + +
+
+
+ + +
+
Commands
+
+ +
+
+ {% block scripts %}{% endblock %} + + + diff --git a/templates/vms.html b/templates/vms.html index 4712f8e..9a244bd 100644 --- a/templates/vms.html +++ b/templates/vms.html @@ -183,6 +183,59 @@ color: var(--text-secondary); } .empty-state .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: 0.4; } + + /* ── VM Quick-Action Menu ── */ + .vm-actions-btn { + position: absolute; top: 14px; right: 14px; + width: 30px; height: 30px; + display: flex; align-items: center; justify-content: center; + background: rgba(8,10,16,0.5); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-muted); + cursor: pointer; + opacity: 0; + transition: all .15s ease; + z-index: 10; + font-size: 16px; + } + .vm-card:hover .vm-actions-btn { opacity: 1; } + .vm-actions-btn:hover { + background: rgba(99,102,241,0.15); + border-color: var(--accent); + color: var(--text-primary); + } + .vm-context-menu { + position: absolute; top: 50px; right: 14px; + background: rgba(18, 22, 35, 0.98); + backdrop-filter: blur(24px); + border: 1px solid var(--border-bright); + border-radius: var(--radius-sm); + box-shadow: 0 16px 48px rgba(0,0,0,0.5); + min-width: 200px; + z-index: 100; + display: none; + overflow: hidden; + animation: menu-in .15s ease; + } + @keyframes menu-in { from { opacity:0; transform:scale(0.95) translateY(-4px); } to { opacity:1; transform:scale(1) translateY(0); } } + .vm-context-menu.open { display: block; } + .ctx-item { + display: flex; align-items: center; gap: 10px; + padding: 10px 16px; + font-size: 13px; font-weight: 500; + color: var(--text-secondary); + cursor: pointer; + transition: all .1s ease; + text-decoration: none; + border: none; background: none; width: 100%; + text-align: left; + } + .ctx-item:hover { background: rgba(99,102,241,0.1); color: var(--text-primary); } + .ctx-item.danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; } + .ctx-item-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; } + .ctx-divider { height: 1px; background: var(--border); margin: 4px 0; } + .ctx-item .ctx-kbd { margin-left: auto; font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } {% endblock %} @@ -276,6 +329,28 @@ + + +
+ + Backup Now + + + 📅 Schedule Backup + +
+ + {% if vm.ip_address %} + + {% endif %} +
+
{{ vm.name }}
@@ -451,5 +526,30 @@ selected.forEach(vm => params.append('vms', vm)); window.location.href = '/jobs/batch?' + params.toString(); } + + // ── VM Context Menu ─────────────────────────────────────────────────────── + let openMenu = null; + function toggleVmMenu(btn) { + closeAllMenus(); + const menu = btn.nextElementSibling; + menu.classList.add('open'); + openMenu = menu; + } + function closeAllMenus() { + document.querySelectorAll('.vm-context-menu.open').forEach(m => m.classList.remove('open')); + openMenu = null; + } + document.addEventListener('click', function(e) { + if (openMenu && !openMenu.contains(e.target)) closeAllMenus(); + }); + // Hide action button when in select mode + const origToggle = toggleSelectMode; + toggleSelectMode = function() { + origToggle(); + document.querySelectorAll('.vm-actions-btn').forEach(b => { + b.style.display = selectMode ? 'none' : ''; + }); + if (selectMode) closeAllMenus(); + }; {% endblock %}