fix: UI overhaul — align all HTMX views with Lumina Design System (46 fixes)
- All 7 pages rewritten: Dashboard, Terminal, Snippets, Keychain, SFTP, Settings, Brief - Apply consistent Lumina glassmorphic theme (rounded-2xl, shadows, borders, tracking) - Fix SVG icons not rendering — return template.HTML instead of string - Fix Alpine x-data scoping: terminal tabs, SFTP modals, snippet tag buttons - Fix dashboard search sending literal ?q=... - Rebuild CSS with all new Tailwind classes (62KB) - Add .air.toml with hot-reload config, docs/PERBAIKANUI.md checklist - Remove unused backup partials
This commit is contained in:
swanadiva
@@ -20,43 +20,80 @@
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<!-- Color Palette -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
|
||||
<h3 class="font-bold text-on-surface flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
|
||||
Color Palette — Lumina System
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div class="rounded-xl p-3" style="background:#0050cb"><span class="text-white text-xs font-mono font-bold">Primary #0050cb</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#006e2f"><span class="text-white text-xs font-mono font-bold">Secondary #006e2f</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#7e23cc"><span class="text-white text-xs font-mono font-bold">Tertiary #7e23cc</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#b3261e"><span class="text-white text-xs font-mono font-bold">Error #b3261e</span></div>
|
||||
<div class="rounded-xl p-3 border border-outline-variant/30" style="background:#f7f9fb"><span class="text-[#191c1e] text-xs font-mono font-bold">Surface #f7f9fb</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#191c1e"><span class="text-white text-xs font-mono font-bold">On-Surface #191c1e</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#424656"><span class="text-white text-xs font-mono font-bold">On-Surface-Var #424656</span></div>
|
||||
<div class="rounded-xl p-3" style="background:#c2c6d8"><span class="text-[#191c1e] text-xs font-mono font-bold">Outline-Var #c2c6d8</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-6">
|
||||
<h2 class="text-base font-semibold text-on-surface mb-3">Keyboard Shortcuts</h2>
|
||||
<!-- Typography -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
|
||||
<h3 class="font-bold text-on-surface flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
|
||||
Typography
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div><p class="text-xl font-bold tracking-tight">Heading XL — Inter 800</p><p class="text-xs text-on-surface-variant font-mono">text-xl font-bold tracking-tight</p></div>
|
||||
<div><p class="text-base font-bold">Heading Base — Inter 700</p><p class="text-xs text-on-surface-variant font-mono">text-base font-bold</p></div>
|
||||
<div><p class="text-sm font-medium">Body — Inter 500</p><p class="text-xs text-on-surface-variant font-mono">text-sm font-medium</p></div>
|
||||
<div><p class="text-xs text-on-surface-variant">Caption — Inter 400/500</p><p class="text-xs text-on-surface-variant font-mono">text-xs text-on-surface-variant</p></div>
|
||||
<div><p class="text-xs font-mono">Monospace — JetBrains Mono 400/600</p><p class="text-xs text-on-surface-variant font-mono">text-xs font-mono</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elevation -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
|
||||
<h3 class="font-bold text-on-surface flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
Elevation & Layout
|
||||
</h3>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
|
||||
<span class="w-16 text-xs font-mono text-on-surface-variant">shadow-sm</span>
|
||||
<div class="flex-1 h-8 rounded-lg bg-white shadow-sm border border-outline-variant/20"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
|
||||
<span class="w-16 text-xs font-mono text-on-surface-variant">shadow-md</span>
|
||||
<div class="flex-1 h-8 rounded-lg bg-white shadow-md border border-outline-variant/20"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
|
||||
<span class="w-16 text-xs font-mono text-on-surface-variant">shadow-lg</span>
|
||||
<div class="flex-1 h-8 rounded-lg bg-white shadow-lg border border-outline-variant/20"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
|
||||
<span class="w-16 text-xs font-mono text-on-surface-variant">shadow-2xl</span>
|
||||
<div class="flex-1 h-8 rounded-lg bg-white shadow-2xl border border-outline-variant/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
|
||||
<h3 class="font-bold text-on-surface flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
Keyboard Shortcuts
|
||||
</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10 last:border-0">
|
||||
<span class="text-on-surface-variant">New Host</span>
|
||||
<kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + N</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10 last:border-0">
|
||||
<span class="text-on-surface-variant">Search</span>
|
||||
<kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + K</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10 last:border-0">
|
||||
<span class="text-on-surface-variant">Toggle Dark Mode</span>
|
||||
<kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + D</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10 last:border-0">
|
||||
<span class="text-on-surface-variant">Quick Brief</span>
|
||||
<kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + B</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10 last:border-0">
|
||||
<span class="text-on-surface-variant">Settings</span>
|
||||
<kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + ,</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Host</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + N</kbd></div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Snippet</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + I</kbd></div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Toggle View</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + T</kbd></div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Search</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + P</kbd></div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Quick Terminal</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + K</kbd></div>
|
||||
<div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Close Panel</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Esc</kbd></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-6">
|
||||
<h2 class="text-base font-semibold text-on-surface mb-3">About Hostkeeper V2</h2>
|
||||
<div class="space-y-2 text-sm text-on-surface-variant">
|
||||
<p>Hostkeeper V2 is a free, open-source Termius alternative for managing SSH/SFTP connections.</p>
|
||||
<p>Built with GoFiber v2 + HTMX + Alpine.js + TailwindCSS v4.</p>
|
||||
<p>Version: 2.0.0-dev</p>
|
||||
<p>License: MIT</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,72 +1,89 @@
|
||||
{{define "host_list"}}
|
||||
<div id="host-list" class="flex flex-col gap-4">
|
||||
<div x-show="view === 'grid'" x-cloak
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{range .Hosts}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg {{if eq .Status "active"}}bg-primary/10 text-primary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}} flex items-center justify-center">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<p class="text-xs text-on-surface-variant">{{.IP}}</p>
|
||||
</div>
|
||||
<div class="group bg-white p-5 rounded-2xl border border-outline-variant hover:border-primary hover:shadow-lg transition-all cursor-pointer relative overflow-hidden">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="w-11 h-11 rounded-xl bg-surface-container-low flex items-center justify-center text-primary border border-outline-variant/20 group-hover:bg-primary-container/10 group-hover:border-primary/20 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full {{if eq .Status "active"}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider {{if eq .Status "active"}}text-secondary{{else}}text-outline{{end}}">{{.Status}}</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full {{if eq .Status "active"}}bg-secondary/10 text-secondary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}}">
|
||||
{{.Status}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-on-surface-variant mb-3">
|
||||
<span>{{.OS}}</span>
|
||||
<span>·</span>
|
||||
<span>{{.Provider}}</span>
|
||||
|
||||
<h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-base truncate">{{.Name}}</h4>
|
||||
<p class="font-mono text-xs text-outline mb-4">{{.IP}}</p>
|
||||
|
||||
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||
<span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.OS}}</span>
|
||||
<span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.Provider}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.LastSeen}}</span>
|
||||
|
||||
<div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center text-xs">
|
||||
<span class="text-outline italic">Last seen {{.LastSeen}}</span>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="alert('Connect to {{.Name}}')" title="Connect">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
<a href="/terminal" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-3 rounded-lg transition-all">Connect</a>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors"
|
||||
hx-delete="/hosts/{{.ID}}" hx-target="#host-list" hx-confirm="Delete {{.Name}}?" title="Delete">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div @click="$dispatch('open-modal')"
|
||||
class="group border-2 border-dashed border-outline-variant hover:border-primary hover:bg-primary/5 rounded-2xl flex flex-col items-center justify-center p-8 transition-all cursor-pointer text-center text-outline hover:text-primary min-h-[200px]">
|
||||
<svg class="w-8 h-8 mb-2 group-active:scale-90 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
|
||||
<span class="font-bold text-sm text-on-surface-variant group-hover:text-primary">Add New Host</span>
|
||||
<p class="text-[10px] uppercase tracking-widest mt-1 opacity-70">Manual Config or Discovery</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="view === 'list'" x-cloak class="flex flex-col gap-2">
|
||||
<div x-show="view === 'list'" x-cloak
|
||||
class="bg-white border border-outline-variant rounded-2xl overflow-hidden shadow-sm divide-y divide-outline-variant/30">
|
||||
{{range .Hosts}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 px-4 py-3 flex items-center gap-4 hover:shadow-sm transition-shadow animate-fade-in">
|
||||
<div class="w-2 h-2 rounded-full {{if eq .Status "active"}}bg-secondary{{else}}bg-on-surface-variant{{end}} shrink-0"></div>
|
||||
<div class="w-8 h-8 rounded-lg {{if eq .Status "active"}}bg-primary/10 text-primary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}} flex items-center justify-center shrink-0">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full {{if eq .Status "active"}}bg-secondary/10 text-secondary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}}">{{.Status}}</span>
|
||||
<div class="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors cursor-pointer group">
|
||||
<div class="flex items-center gap-4 min-w-0 flex-1">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center text-primary shrink-0 border border-outline-variant/20">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 sm:grid sm:grid-cols-3 sm:gap-4 items-center">
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-sm truncate">{{.Name}}</h4>
|
||||
<span class="font-mono text-xs text-outline">{{.IP}}</span>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-xs text-on-surface-variant font-medium">{{.OS}}</p>
|
||||
<p class="text-[10px] text-outline">{{.Provider}}</p>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<span class="text-xs text-outline italic">Seen {{.LastSeen}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant truncate">{{.IP}} · {{.OS}} · {{.Provider}}</p>
|
||||
</div>
|
||||
<span class="text-xs text-on-surface-variant shrink-0">{{.LastSeen}}</span>
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="alert('Connect to {{.Name}}')" title="Connect">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
<div class="flex items-center gap-4 ml-4 shrink-0">
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 {{if eq .Status "active"}}bg-secondary-container/20 text-secondary{{else}}bg-surface-container text-outline{{end}}">
|
||||
<span class="w-1.5 h-1.5 rounded-full {{if eq .Status "active"}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
|
||||
{{.Status}}
|
||||
</span>
|
||||
<a href="/terminal" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-4 rounded-lg transition-all">Connect</a>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors"
|
||||
hx-delete="/hosts/{{.ID}}" hx-target="#host-list" hx-confirm="Delete {{.Name}}?" title="Delete">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div @click="$dispatch('open-modal')"
|
||||
class="p-4 hover:bg-primary/5 transition-colors cursor-pointer flex items-center justify-center gap-2 text-outline hover:text-primary font-bold text-sm">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
|
||||
Add New Host
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if eq (len .Hosts) 0}}
|
||||
@@ -75,11 +92,5 @@
|
||||
<p class="text-sm mt-1">Try a different search or add a new host</p>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="rounded-xl border-2 border-dashed border-outline-variant/30 p-6 flex flex-col items-center justify-center text-on-surface-variant/50 hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer min-h-[160px]"
|
||||
@click="$dispatch('open-modal')">
|
||||
<svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
<span class="text-sm font-medium">Add New Host</span>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -1,36 +1,37 @@
|
||||
{{define "host_modal"}}
|
||||
<div id="host-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
<div id="host-modal" class="fixed inset-0 z-50" x-data="{ open: false, type: 'api' }" x-show="open" x-cloak
|
||||
@open-modal.window="open = true" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6" @click.outside="open = false">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-on-surface">Add New Host</h2>
|
||||
<div class="bg-white rounded-2xl max-w-md w-full border border-outline-variant shadow-2xl overflow-hidden p-6 space-y-4 animate-scale-up" @click.outside="open = false">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<h3 class="font-bold text-lg text-on-surface">Add Host Credentials</h3>
|
||||
<button @click="open = false"
|
||||
class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
|
||||
class="text-outline hover:text-primary cursor-pointer p-1 rounded-lg">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form hx-post="/hosts" hx-target="#host-list" hx-swap="outerHTML"
|
||||
@submit="open = false"
|
||||
class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Host Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. web-prod-01"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
|
||||
focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
class="space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Host Identifier</label>
|
||||
<input type="text" name="name" required placeholder="e.g. prod-db-replica"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">IP Address</label>
|
||||
<input type="text" name="ip" required placeholder="e.g. 10.0.1.100"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
|
||||
focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">IP Address / Domain</label>
|
||||
<input type="text" name="ip" required placeholder="e.g. 10.0.12.19"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">OS</label>
|
||||
<select name="os" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Operating System</label>
|
||||
<select name="os"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
|
||||
<option value="Ubuntu 22.04">Ubuntu 22.04</option>
|
||||
<option value="Ubuntu 24.04">Ubuntu 24.04</option>
|
||||
<option value="Debian 12">Debian 12</option>
|
||||
@@ -38,37 +39,40 @@
|
||||
<option value="Fedora 39">Fedora 39</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Provider</label>
|
||||
<select name="provider" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="AWS US-East">AWS US-East</option>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Provider</label>
|
||||
<select name="provider"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
|
||||
<option value="AWS US-East">AWS Cloud</option>
|
||||
<option value="AWS EU-West">AWS EU-West</option>
|
||||
<option value="DigitalOcean">DigitalOcean</option>
|
||||
<option value="Hetzner">Hetzner</option>
|
||||
<option value="GCP US-Central">GCP US-Central</option>
|
||||
<option value="GCP US-Central">GCP Cloud</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Type</label>
|
||||
<select name="type" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="server">Server</option>
|
||||
<option value="api">API</option>
|
||||
<option value="db">Database</option>
|
||||
<option value="web">Web</option>
|
||||
<option value="edge">Edge</option>
|
||||
<option value="desktop">Desktop</option>
|
||||
</select>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant uppercase">Host Purpose / Type</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button type="button" @click="type = 'api'"
|
||||
:class="type === 'api' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
|
||||
class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">API Node</button>
|
||||
<button type="button" @click="type = 'db'"
|
||||
:class="type === 'db' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
|
||||
class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">DB Node</button>
|
||||
<button type="button" @click="type = 'web'"
|
||||
:class="type === 'web' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
|
||||
class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">Web Node</button>
|
||||
</div>
|
||||
<input type="hidden" name="type" :value="type">
|
||||
</div>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">
|
||||
Add Host
|
||||
</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary-container hover:text-on-primary-container transition-all">Add Host</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -17,64 +17,90 @@
|
||||
<div class="flex min-h-screen">
|
||||
{{template "nav" .}}
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<header class="h-14 border-b border-outline-variant/30 flex items-center px-6 bg-white/70 backdrop-blur-md">
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
<header class="h-14 border-b border-outline-variant/30 flex items-center gap-3 px-6 bg-white/70 backdrop-blur-md">
|
||||
<h1 class="text-xl font-bold tracking-tight text-on-surface">Hosts</h1>
|
||||
<span class="text-xs text-on-surface-variant mt-0.5">Manage connections, monitor uptime, and deploy</span>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="dashboard-page" class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-3 gap-4 mb-6">
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4">
|
||||
<div class="flex items-center gap-2 text-primary mb-1">
|
||||
<span class="w-5 h-5 bg-primary/20 rounded flex items-center justify-center text-xs font-bold">⚡</span>
|
||||
<span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Active Connections</span>
|
||||
<div id="dashboard-page" class="max-w-7xl mx-auto space-y-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
<div class="md:col-span-8 p-6 rounded-2xl bg-white border border-outline-variant shadow-sm flex items-center justify-between overflow-hidden relative group">
|
||||
<div class="relative z-10 space-y-2">
|
||||
<h3 class="text-on-surface-variant font-bold text-xs uppercase tracking-wider">Active Connections</h3>
|
||||
<div class="flex items-end gap-3">
|
||||
<span class="text-4xl font-black text-primary">{{.Active}}</span>
|
||||
<span class="text-secondary font-bold text-sm mb-1 flex items-center bg-secondary-container/20 px-2 py-0.5 rounded-full">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
|
||||
+2 today
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant">Global performance metrics sync integrity active.</p>
|
||||
</div>
|
||||
<div class="absolute right-0 top-0 w-1/3 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none"></div>
|
||||
<div class="flex gap-2 items-end h-16 shrink-0">
|
||||
<div class="w-2.5 h-10 bg-primary/20 rounded-full animate-pulse"></div>
|
||||
<div class="w-2.5 h-14 bg-primary/40 rounded-full animate-pulse delay-75"></div>
|
||||
<div class="w-2.5 h-8 bg-primary/10 rounded-full animate-pulse delay-150"></div>
|
||||
<div class="w-2.5 h-16 bg-primary/60 rounded-full animate-pulse delay-200"></div>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-on-surface">{{.Active}}</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4">
|
||||
<div class="flex items-center gap-2 text-secondary mb-1">
|
||||
<span class="w-5 h-5 bg-secondary/20 rounded flex items-center justify-center text-xs font-bold">✓</span>
|
||||
<span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Transfers Today</span>
|
||||
<div class="md:col-span-4 p-6 rounded-2xl bg-primary text-on-primary shadow-xl shadow-primary/15 flex flex-col justify-between relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<svg class="w-8 h-8 opacity-90 text-white mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
|
||||
<p class="font-bold text-lg leading-tight">Fastest Access Enabled</p>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-on-surface">0</span>
|
||||
</div>
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4">
|
||||
<div class="flex items-center gap-2 text-tertiary mb-1">
|
||||
<span class="w-5 h-5 bg-tertiary/20 rounded flex items-center justify-center text-xs font-bold">#</span>
|
||||
<span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Saved Hosts</span>
|
||||
<p class="text-xs opacity-85 mt-2 relative z-10">Smart routing engine successfully reduces terminal latency by <span class="font-bold">24ms</span> across European and Asian clusters.</p>
|
||||
<div class="absolute -right-6 -bottom-6 opacity-10">
|
||||
<svg class="w-32 h-32 rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-on-surface">{{len .Hosts}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 mb-6" x-data="{ view: 'grid' }">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<input type="search" name="q" placeholder="Search hosts..."
|
||||
hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms"
|
||||
hx-target="#host-list" hx-include="[name='filter']"
|
||||
class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
<div x-data="{ view: 'grid' }">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<h3 class="text-lg font-bold text-on-surface">Recent Hosts</h3>
|
||||
<div class="flex bg-surface-container rounded-lg p-0.5 text-xs font-semibold border border-outline-variant/20"
|
||||
x-data="{ filter: 'all' }">
|
||||
<button @click="filter = 'all'"
|
||||
:class="filter === 'all' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=all" hx-target="#host-list">All</button>
|
||||
<button @click="filter = 'active'"
|
||||
:class="filter === 'active' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=active" hx-target="#host-list">Active</button>
|
||||
<button @click="filter = 'offline'"
|
||||
:class="filter === 'offline' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-2.5 py-1 rounded-md transition-all"
|
||||
hx-get="/hosts?filter=offline" hx-target="#host-list">Offline</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Search hosts..."
|
||||
hx-get="/hosts" hx-trigger="keyup delay:200ms"
|
||||
hx-target="#host-list"
|
||||
class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all text-on-surface placeholder-on-surface-variant">
|
||||
</div>
|
||||
<div class="flex border border-outline-variant/50 rounded-lg p-0.5 bg-white">
|
||||
<button @click="view = 'grid'"
|
||||
:class="view === 'grid' ? 'bg-surface-container text-primary' : 'text-on-surface-variant'"
|
||||
class="p-1.5 rounded transition-colors" title="Grid View">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/></svg>
|
||||
</button>
|
||||
<button @click="view = 'list'"
|
||||
:class="view === 'list' ? 'bg-surface-container text-primary' : 'text-on-surface-variant'"
|
||||
class="p-1.5 rounded transition-colors" title="List View">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<select name="filter"
|
||||
hx-get="/hosts?filter={value}" hx-trigger="change" hx-target="#host-list"
|
||||
class="px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="all">All</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="offline">Offline</option>
|
||||
</select>
|
||||
<div class="flex items-center bg-white rounded-lg border border-outline-variant/50 p-0.5">
|
||||
<button @click="view = 'grid'"
|
||||
:class="view === 'grid' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="p-1.5 rounded transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/></svg>
|
||||
</button>
|
||||
<button @click="view = 'list'"
|
||||
:class="view === 'list' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="p-1.5 rounded transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{template "host_list" .}}
|
||||
{{template "host_list" .}}
|
||||
</div>
|
||||
</div>
|
||||
{{template "host_modal" .}}
|
||||
</main>
|
||||
|
||||
@@ -1,43 +1,86 @@
|
||||
{{define "credential_grid"}}
|
||||
<div id="key-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{{range .Keys}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-tertiary/10 text-tertiary flex items-center justify-center">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
|
||||
<div id="key-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{range $i, $key := .Keys}}
|
||||
<div class="bg-white p-5 rounded-2xl border border-outline-variant/30 hover:border-primary hover:shadow-lg transition-all flex flex-col justify-between space-y-4"
|
||||
x-data="{ reveal: false }">
|
||||
<div class="flex justify-between items-start gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-low border border-outline-variant/20 flex items-center justify-center text-primary">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<p class="text-xs text-on-surface-variant">{{.Username}} @ {{.URL}}</p>
|
||||
<h3 class="font-bold text-on-surface text-base truncate max-w-[180px]">{{.Name}}</h3>
|
||||
<span class="text-[10px] font-mono text-outline uppercase tracking-wider">{{.Type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors shrink-0"
|
||||
hx-delete="/keys/{{.ID}}" hx-target="#key-grid" hx-confirm="Delete {{.Name}}?">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-on-surface-variant mb-3">
|
||||
<span class="font-mono">{{.Passphrase}}</span>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full
|
||||
{{if eq .Strength "secure"}}bg-secondary/10 text-secondary{{else if eq .Strength "moderate"}}bg-tertiary/10 text-tertiary{{else}}bg-red-50 text-red-500{{end}}">
|
||||
{{.Strength}}
|
||||
|
||||
{{if eq .Strength "secure"}}
|
||||
<span class="shrink-0 px-2.5 py-0.5 bg-secondary/10 text-secondary border border-secondary/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
SECURE
|
||||
</span>
|
||||
{{else if eq .Strength "moderate"}}
|
||||
<span class="shrink-0 px-2.5 py-0.5 bg-purple-50 text-tertiary border border-tertiary/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 text-tertiary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
MODERATE
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="shrink-0 px-2.5 py-0.5 bg-red-50 text-error border border-error/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
WEAK
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.CreatedAt}}</span>
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="copyToClipboard('{{.Passphrase}}')" title="Copy">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="space-y-2 text-xs">
|
||||
<div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
|
||||
<span class="text-outline font-semibold uppercase tracking-wider text-[10px]">User Login</span>
|
||||
<span class="font-mono text-on-surface font-semibold">{{.Username}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
|
||||
<span class="text-outline font-semibold uppercase tracking-wider text-[10px]">Credential Secrets</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-on-surface-variant" x-text="reveal ? '{{.Passphrase}}' : '••••••••••••••••'"></span>
|
||||
<button @click="reveal = !reveal"
|
||||
class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Toggle visibility">
|
||||
<svg x-show="reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.06 10.06 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88L6.59 6.59m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
|
||||
<svg x-show="!reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
||||
</button>
|
||||
<button onclick="copyToClipboard('{{.Passphrase}}')"
|
||||
class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Copy secret">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .Fingerprint}}
|
||||
<div class="py-1">
|
||||
<span class="text-outline font-semibold uppercase tracking-wider text-[10px] block mb-0.5">SHA256 FINGERPRINT</span>
|
||||
<code class="text-[10px] text-on-surface-variant font-mono block break-all bg-surface-container-low p-2 rounded border border-outline-variant/20 select-all">{{.Fingerprint}}</code>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-outline-variant/30 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-[10px] text-outline">
|
||||
<span class="shrink-0">Created {{.CreatedAt}}</span>
|
||||
<div class="flex items-center justify-between sm:justify-end gap-2 flex-1 min-w-0 w-full">
|
||||
<div class="flex items-center gap-1.5 min-w-0 flex-1 justify-start sm:justify-end">
|
||||
{{if .URL}}
|
||||
<span class="bg-primary-container/15 text-primary px-1.5 py-0.5 rounded font-mono text-[9px] shrink-0">{{.URL}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<button hx-delete="/keys/{{.ID}}" hx-target="#key-grid" hx-confirm="Delete {{.Name}}?"
|
||||
class="p-1 hover:bg-red-50 hover:text-error rounded text-outline transition-colors shrink-0 ml-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq (len .Keys) 0}}
|
||||
<div class="col-span-full text-center py-12 text-on-surface-variant">
|
||||
<p class="text-lg font-medium">No keys found</p>
|
||||
<p class="text-sm mt-1">Add your first credential</p>
|
||||
<div class="col-span-full p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
|
||||
No credentials found. Add your first credential.
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
@@ -21,105 +21,90 @@
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="keychain-page" class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<input type="search" placeholder="Search keys..."
|
||||
hx-get="/keys/grid?q=..." hx-trigger="keyup delay:200ms"
|
||||
hx-target="#key-grid"
|
||||
class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Header Panel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">Keychain & Credentials</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Secure sandbox containing cluster credentials, private SSH keys, and tokens</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Search credentials..."
|
||||
hx-get="/keys/grid" hx-trigger="keyup delay:200ms" hx-target="#key-grid"
|
||||
class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all">
|
||||
</div>
|
||||
<button @click="$dispatch('open-key-modal')"
|
||||
class="flex items-center gap-1.5 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2 px-4 rounded-xl shadow-md transition-all">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
Add Key
|
||||
</button>
|
||||
</div>
|
||||
<button @click="$dispatch('open-key-modal')"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
Add Key
|
||||
</button>
|
||||
</div>
|
||||
<div id="key-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{{range .Keys}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-tertiary/10 text-tertiary flex items-center justify-center">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<p class="text-xs text-on-surface-variant">{{.Username}} @ {{.URL}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors shrink-0"
|
||||
hx-delete="/keys/{{.ID}}" hx-target="#key-grid" hx-confirm="Delete {{.Name}}?">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-on-surface-variant mb-3">
|
||||
<span class="font-mono">{{.Passphrase}}</span>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full
|
||||
{{if eq .Strength "secure"}}bg-secondary/10 text-secondary{{else if eq .Strength "moderate"}}bg-tertiary/10 text-tertiary{{else}}bg-red-50 text-red-500{{end}}">
|
||||
{{.Strength}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.CreatedAt}}</span>
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="copyToClipboard('{{.Passphrase}}')" title="Copy">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Grid List -->
|
||||
<div id="key-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{template "credential_grid" .}}
|
||||
</div>
|
||||
|
||||
<!-- Security Advisory Bento -->
|
||||
<div class="p-5 border border-outline-variant/60 rounded-2xl bg-white/40 flex items-start gap-4 text-xs text-on-surface">
|
||||
<svg class="w-5 h-5 text-primary shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div class="space-y-1">
|
||||
<h4 class="font-bold text-on-surface">HostKeeper Security Policy & Local Sandbox</h4>
|
||||
<p class="text-on-surface-variant leading-relaxed">
|
||||
Keys are parsed locally inside your isolated browser environment and transmitted strictly within cryptographically verified SSH tunnels. Passphrases are hashed with Argon2id instantly and never touch intermediate telemetry systems.
|
||||
</p>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if eq (len .Keys) 0}}
|
||||
<div class="col-span-full text-center py-12 text-on-surface-variant">
|
||||
<p class="text-lg font-medium">No keys found</p>
|
||||
<p class="text-sm mt-1">Add your first credential</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Credential Modal -->
|
||||
<div id="key-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
@open-key-modal.window="open = true" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6" @click.outside="open = false">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-on-surface">Add New Credential</h2>
|
||||
<button @click="open = false" class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<div class="bg-white rounded-2xl max-w-md w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<h3 class="font-bold text-lg text-on-surface">Register Secure Credential</h3>
|
||||
<button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
|
||||
</div>
|
||||
<form hx-post="/keys" hx-target="#key-grid" hx-swap="outerHTML"
|
||||
@submit="open = false" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. AWS Prod"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
@submit="open = false" class="space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CREDENTIAL NAME / LABEL</label>
|
||||
<input type="text" name="name" required placeholder="e.g. key_aws_alex"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Username</label>
|
||||
<input type="text" name="username" required placeholder="e.g. ec2-user"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">URL / Host</label>
|
||||
<input type="text" name="url" required placeholder="e.g. github.com"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Passphrase</label>
|
||||
<div class="relative">
|
||||
<input type="password" name="passphrase" required placeholder="Enter passphrase"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30 pr-10">
|
||||
<button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-on-surface-variant hover:text-on-surface" title="Toggle visibility">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CREDENTIAL TYPE</label>
|
||||
<select name="type"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
|
||||
<option value="ED25519">ED25519 (Modern)</option>
|
||||
<option value="SSH RSA">SSH RSA (Legacy)</option>
|
||||
<option value="PASSWORD">Master Password</option>
|
||||
<option value="Bearer Token">Bearer Token</option>
|
||||
<option value="AWS Key">AWS Access Key</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">LOGIN USERNAME</label>
|
||||
<input type="text" name="username" required placeholder="e.g. root or ubuntu"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary font-medium">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">PASSPHRASE / TOKEN KEY</label>
|
||||
<input type="password" name="passphrase" required placeholder="Enter secure password secret..."
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono">
|
||||
</div>
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Cancel</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">Add Key</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Credential</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+230
-182
@@ -12,7 +12,6 @@
|
||||
<script src="/static/js/alpine.min.js" defer></script>
|
||||
<script src="/static/js/clipboard.js"></script>
|
||||
<script src="/static/js/utils.js"></script>
|
||||
<script src="/static/js/toggles.js"></script>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased dot-grid min-h-screen">
|
||||
<div class="flex min-h-screen">
|
||||
@@ -22,198 +21,247 @@
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div class="max-w-3xl mx-auto space-y-8 pb-16">
|
||||
<div class="max-w-7xl mx-auto space-y-8 text-sm" x-data="{ toast: '', showToast: false, saveSuccess: false }"
|
||||
x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))">
|
||||
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-on-surface mb-4">Profile</h2>
|
||||
<div class="bg-white rounded-xl border border-outline-variant/30 p-6 space-y-4">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="w-14 h-14 rounded-full bg-tertiary/20 flex items-center justify-center text-tertiary text-xl font-semibold">U</div>
|
||||
<div>
|
||||
<p class="text-base font-medium text-on-surface">User</p>
|
||||
<p class="text-sm text-on-surface-variant">Local administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Display Name</label>
|
||||
<input type="text" value="User" readonly
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-surface-container-low/30 text-sm text-on-surface">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Username</label>
|
||||
<input type="text" value="admin" readonly
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-surface-container-low/30 text-sm text-on-surface">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Toast -->
|
||||
<div x-show="showToast" x-cloak
|
||||
class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
|
||||
<svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="toast"></span>
|
||||
</div>
|
||||
|
||||
<section x-data="{ tab: 'appearance' }">
|
||||
<div class="flex gap-1 mb-4 bg-surface-container-low/50 rounded-lg p-1 w-fit">
|
||||
<button @click="tab = 'appearance'" :class="tab === 'appearance' ? 'bg-white shadow-sm text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors">Appearance</button>
|
||||
<button @click="tab = 'terminal'" :class="tab === 'terminal' ? 'bg-white shadow-sm text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors">Terminal</button>
|
||||
<button @click="tab = 'connection'" :class="tab === 'connection' ? 'bg-white shadow-sm text-on-surface' : 'text-on-surface-variant hover:text-on-surface'"
|
||||
class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors">Connection</button>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="border-b border-outline-variant/30 pb-4">
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">Workspace Preferences</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Configure authentication sync protocols and cloud billing</p>
|
||||
</div>
|
||||
|
||||
<form method="post" action="/settings" class="bg-white rounded-xl border border-outline-variant/30 p-6 space-y-5">
|
||||
<div x-show="tab === 'appearance'" x-cloak class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Theme</label>
|
||||
<select name="theme"
|
||||
class="w-full max-w-xs px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="light" {{if eq .Config.Theme "light"}}selected{{end}}>Light</option>
|
||||
<option value="dark" {{if eq .Config.Theme "dark"}}selected{{end}}>Dark (coming soon)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Font Size</label>
|
||||
<select name="fontSize"
|
||||
class="w-full max-w-xs px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="12" {{if eq .Config.FontSize 12}}selected{{end}}>12px</option>
|
||||
<option value="13" {{if eq .Config.FontSize 13}}selected{{end}}>13px</option>
|
||||
<option value="14" {{if eq .Config.FontSize 14}}selected{{end}}>14px</option>
|
||||
<option value="15" {{if eq .Config.FontSize 15}}selected{{end}}>15px</option>
|
||||
<option value="16" {{if eq .Config.FontSize 16}}selected{{end}}>16px</option>
|
||||
<option value="18" {{if eq .Config.FontSize 18}}selected{{end}}>18px</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Left: profile + toggles -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
|
||||
<div x-show="tab === 'terminal'" x-cloak class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Scrollback Lines</label>
|
||||
<select name="scrollback"
|
||||
class="w-full max-w-xs px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="1000" {{if eq .Config.Scrollback 1000}}selected{{end}}>1,000</option>
|
||||
<option value="5000" {{if eq .Config.Scrollback 5000}}selected{{end}}>5,000</option>
|
||||
<option value="10000" {{if eq .Config.Scrollback 10000}}selected{{end}}>10,000</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm text-on-surface">Blinking Cursor</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: {{if .Config.BlinkCursor}}true{{else}}false{{end}} }"
|
||||
@click="on = !on; $el.classList.toggle('active'); $el.nextElementSibling.value = on ? 'on' : 'off'"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" aria-checked="{{if .Config.BlinkCursor}}true{{else}}false{{end}}">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
<input type="hidden" name="blinkCursor" value="{{if .Config.BlinkCursor}}on{{end}}">
|
||||
</label>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm text-on-surface">Terminal Bell</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: {{if .Config.BellEnabled}}true{{else}}false{{end}} }"
|
||||
@click="on = !on; $el.classList.toggle('active'); $el.nextElementSibling.value = on ? 'on' : 'off'"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
<input type="hidden" name="bellEnabled" value="{{if .Config.BellEnabled}}on{{end}}">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div x-show="tab === 'connection'" x-cloak class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Auto-Lock (minutes)</label>
|
||||
<select name="autoLock"
|
||||
class="w-full max-w-xs px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="1" {{if eq .Config.AutoLock 1}}selected{{end}}>1 min</option>
|
||||
<option value="5" {{if eq .Config.AutoLock 5}}selected{{end}}>5 min</option>
|
||||
<option value="15" {{if eq .Config.AutoLock 15}}selected{{end}}>15 min</option>
|
||||
<option value="30" {{if eq .Config.AutoLock 30}}selected{{end}}>30 min</option>
|
||||
<option value="0" {{if eq .Config.AutoLock 0}}selected{{end}}>Never</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm text-on-surface">TCP Keepalive</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: {{if .Config.Keepalive}}true{{else}}false{{end}} }"
|
||||
@click="on = !on; $el.classList.toggle('active'); $el.nextElementSibling.value = on ? 'on' : 'off'"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
<input type="hidden" name="keepalive" value="{{if .Config.Keepalive}}on{{end}}">
|
||||
</label>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm text-on-surface">Copy on Select</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: {{if .Config.CopyOnSelect}}true{{else}}false{{end}} }"
|
||||
@click="on = !on; $el.classList.toggle('active'); $el.nextElementSibling.value = on ? 'on' : 'off'"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
<input type="hidden" name="copyOnSelect" value="{{if .Config.CopyOnSelect}}on{{end}}">
|
||||
</label>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm text-on-surface">Auto-Reconnect</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: {{if .Config.AutoReconnect}}true{{else}}false{{end}} }"
|
||||
@click="on = !on; $el.classList.toggle('active'); $el.nextElementSibling.value = on ? 'on' : 'off'"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
<input type="hidden" name="autoReconnect" value="{{if .Config.AutoReconnect}}on{{end}}">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-2">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">Save Settings</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-on-surface mb-4">Connected Devices</h2>
|
||||
<div class="bg-white rounded-xl border border-outline-variant/30 divide-y divide-outline-variant/20">
|
||||
{{range .Devices}}
|
||||
<div class="flex items-center gap-4 px-6 py-4">
|
||||
<div class="w-8 h-8 rounded-lg bg-tertiary/10 text-tertiary flex items-center justify-center shrink-0">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
|
||||
{{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
|
||||
{{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
{{if .Current}}<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-secondary/10 text-secondary">Current</span>{{end}}
|
||||
<!-- Profile Form -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
|
||||
<h3 class="font-bold text-on-surface text-base flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||
Developer Profile
|
||||
</h3>
|
||||
<form method="post" action="/settings" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant">FULL NAME</label>
|
||||
<input type="text" name="name" value="User"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-semibold text-on-surface">
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant">{{.OS}} · {{.LastSeen}}</p>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label class="text-xs font-bold text-on-surface-variant">EMAIL ADDRESS</label>
|
||||
<input type="email" name="email" value="user@hostkeeper.io"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5 sm:col-span-2">
|
||||
<label class="text-xs font-bold text-on-surface-variant">WORKPLACE DESIGNATION / ROLE</label>
|
||||
<input type="text" name="role" value="DevOps Engineer"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
|
||||
</div>
|
||||
<div class="sm:col-span-2 pt-2 flex justify-end">
|
||||
<button type="submit"
|
||||
class="flex items-center gap-2 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2.5 px-6 rounded-xl shadow-md transition-all">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Feature Toggles -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
|
||||
<h3 class="font-bold text-on-surface text-base flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
Security & Transmission Protocols
|
||||
</h3>
|
||||
<div class="space-y-4 divide-y divide-outline-variant/20">
|
||||
<label class="flex items-center justify-between py-3">
|
||||
<div class="space-y-0.5 pr-4">
|
||||
<h4 class="font-bold text-on-surface text-xs sm:text-sm">Cryptographic Keychain Backup</h4>
|
||||
<p class="text-xs text-on-surface-variant">Synchronize securely encrypted keys automatically inside iCloud/Google drive sandboxes.</p>
|
||||
</div>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: true }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between pt-3">
|
||||
<div class="space-y-0.5 pr-4">
|
||||
<h4 class="font-bold text-on-surface text-xs sm:text-sm">Real-time SFTP Connection Polling</h4>
|
||||
<p class="text-xs text-on-surface-variant">Enable background file watchers to automatically refresh the directory tree upon local file modifications.</p>
|
||||
</div>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: true }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between pt-3">
|
||||
<div class="space-y-0.5 pr-4">
|
||||
<h4 class="font-bold text-on-surface text-xs sm:text-sm">Desktop Push Notifications</h4>
|
||||
<p class="text-xs text-on-surface-variant">Trigger native system indicators upon complete transmissions of download/upload streams.</p>
|
||||
</div>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: false }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<button class="text-xs font-medium text-red-500 hover:text-red-600 transition-colors">Remove</button>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section x-data="{ confirm: false }">
|
||||
<h2 class="text-lg font-semibold text-red-600 mb-4">Danger Zone</h2>
|
||||
<div class="bg-white rounded-xl border border-red-200 p-6">
|
||||
<p class="text-sm text-on-surface-variant mb-4">This will permanently delete all your data, including hosts, keys, snippets, and settings. This action cannot be undone.</p>
|
||||
<div x-show="!confirm">
|
||||
<button @click="confirm = true"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-red-500 text-white hover:bg-red-600 transition-colors">Reset All Data</button>
|
||||
</div>
|
||||
<div x-show="confirm" x-cloak class="flex items-center gap-3">
|
||||
<p class="text-sm font-medium text-red-600">Are you sure?</p>
|
||||
<button @click="localStorage.clear(); confirm = false; alert('Data cleared')"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-red-500 text-white hover:bg-red-600 transition-colors">Yes, Delete Everything</button>
|
||||
<button @click="confirm = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Cancel</button>
|
||||
<!-- Terminal Settings -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
|
||||
<h3 class="font-bold text-on-surface text-base flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
Terminal Preferences
|
||||
</h3>
|
||||
<form method="post" action="/settings" class="space-y-5">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">FONT SIZE</label>
|
||||
<select name="fontSize"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
|
||||
<option value="12">12px</option>
|
||||
<option value="13">13px</option>
|
||||
<option value="14" selected>14px</option>
|
||||
<option value="15">15px</option>
|
||||
<option value="16">16px</option>
|
||||
<option value="18">18px</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">SCROLLBACK</label>
|
||||
<select name="scrollback"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
|
||||
<option value="1000">1,000</option>
|
||||
<option value="5000" selected>5,000</option>
|
||||
<option value="10000">10,000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm font-medium text-on-surface">Blinking Cursor</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: true }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm font-medium text-on-surface">Terminal Bell</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: false }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between py-2">
|
||||
<span class="text-sm font-medium text-on-surface">Auto-Reconnect</span>
|
||||
<button type="button" role="switch"
|
||||
x-data="{ on: true }"
|
||||
@click="on = !on; $el.classList.toggle('active')"
|
||||
:class="on ? 'active' : ''"
|
||||
class="toggle-switch" style="width:44px;height:24px">
|
||||
<span class="toggle-knob"></span>
|
||||
</button>
|
||||
</label>
|
||||
<div class="pt-2 flex justify-end">
|
||||
<button type="submit"
|
||||
class="bg-primary text-white py-2 px-6 rounded-xl font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Settings</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right: billing + devices + danger -->
|
||||
<div class="lg:col-span-4 space-y-8">
|
||||
|
||||
<!-- Billing Card -->
|
||||
<div class="bg-primary text-on-primary p-6 rounded-2xl shadow-lg relative overflow-hidden flex flex-col justify-between h-48">
|
||||
<div class="relative z-10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="px-2.5 py-1 bg-white/20 rounded-full font-bold text-[9px] uppercase tracking-wider text-white">HostKeeper Pro</span>
|
||||
<svg class="w-5 h-5 text-white fill-white" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||||
</div>
|
||||
<h3 class="font-black text-2xl tracking-tight mt-3">Active Workspace</h3>
|
||||
</div>
|
||||
<div class="relative z-10 flex justify-between items-end">
|
||||
<div>
|
||||
<span class="text-xs opacity-80 uppercase font-semibold">RENEWAL CYCLE</span>
|
||||
<p class="text-xs font-bold text-white">July 2026</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold bg-white text-primary rounded-lg px-2.5 py-1 flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
PAID ACCOUNT
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
|
||||
<svg class="w-48 h-48 -rotate-45" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Devices -->
|
||||
<div class="bg-white p-5 rounded-2xl border border-outline-variant/30 shadow-sm space-y-4">
|
||||
<h3 class="font-bold text-on-surface text-sm flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
||||
Synchronized Devices
|
||||
</h3>
|
||||
<div class="space-y-3.5">
|
||||
{{range .Devices}}
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<div class="p-1.5 bg-surface-container-low border border-outline-variant/20 rounded-lg shrink-0">
|
||||
<svg class="w-4 h-4 {{if eq .Type "desktop"}}text-primary{{else}}text-outline{{end}}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
|
||||
{{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
|
||||
{{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-bold text-on-surface truncate pr-2">{{.Name}}</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 shrink-0 {{if .Current}}bg-secondary/10 text-secondary{{else}}bg-surface-container text-outline{{end}}">
|
||||
<span class="w-1 h-1 rounded-full {{if .Current}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
|
||||
{{if .Current}}Online{{else}}Offline{{end}}
|
||||
</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="p-4 border border-error-container/40 rounded-2xl bg-error-container/5 space-y-3 text-xs" x-data="{ confirm: false }">
|
||||
<h4 class="font-bold text-error flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
|
||||
Reset Local State
|
||||
</h4>
|
||||
<p class="text-on-surface-variant">Resetting will clear all your locally loaded keystores, snippets, and connection cache buffers from the browser storage.</p>
|
||||
<button @click="if(confirm('Are you sure you want to flush all local storage configurations?')) { localStorage.clear(); alert('Workspace storage cleared successfully.'); window.location.reload(); }"
|
||||
class="w-full py-2 border border-error/30 rounded-xl font-bold text-error hover:bg-error/10 transition-colors">
|
||||
Flush All App State
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
+94
-58
@@ -19,102 +19,138 @@
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="sftp-page" class="max-w-7xl mx-auto"
|
||||
<div id="sftp-page" class="max-w-7xl mx-auto space-y-6 relative"
|
||||
x-data="{ toast: '', showToast: false, showFolderModal: false, folderPane: 'local' }"
|
||||
x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3500))">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Local pane -->
|
||||
<div class="rounded-xl bg-white/70 backdrop-blur-md border border-outline-variant/30 overflow-hidden">
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-outline-variant/20 bg-white/50">
|
||||
<svg class="w-4 h-4 text-on-surface-variant" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||
<span class="text-sm font-medium text-on-surface">Local Workstation</span>
|
||||
<div class="flex-1"></div>
|
||||
<button @click="folderPane = 'local'; showFolderModal = true"
|
||||
class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant hover:text-on-surface transition-colors" title="New Folder">
|
||||
<!-- Toast -->
|
||||
<div x-show="showToast" x-cloak
|
||||
class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
|
||||
<svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="toast"></span>
|
||||
</div>
|
||||
|
||||
<!-- Header Panel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">SFTP Secure File Sync</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Dual streams for real-time asset transmission and file editing</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button hx-get="/sftp" hx-target="#main-content"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant/30 hover:border-primary text-xs font-semibold text-on-surface bg-white transition-all hover:bg-surface-container">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
Reset State
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dual Panel Body -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
<!-- Local Pane -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
|
||||
<div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||
<span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Local Workstation</span>
|
||||
</div>
|
||||
<button @click="$dispatch('open-folder-modal', { pane: 'local' })"
|
||||
class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Local Folder">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
|
||||
</button>
|
||||
<input type="search" placeholder="Filter files..." hx-get="/sftp/pane?pane=local&q=..." hx-trigger="keyup delay:200ms" hx-target="#local-pane"
|
||||
class="w-40 px-2 py-1 rounded-lg border border-outline-variant/30 bg-white text-xs text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
</div>
|
||||
<div class="flex items-center gap-1 px-4 py-2 border-b border-outline-variant/10 text-xs text-on-surface-variant font-mono bg-surface-container-low/30">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
|
||||
{{range .LocalBreadcrumb}}
|
||||
<a href="#" hx-get="/sftp/pane?pane=local&dir={{.Path}}" hx-target="#local-pane"
|
||||
class="hover:text-primary transition-colors">{{.Name}}</a>
|
||||
<span class="text-on-surface-variant/40">/</span>
|
||||
class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
|
||||
<svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<div id="local-pane">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="p-3 border-b border-outline-variant/10 relative">
|
||||
<svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Filter local files..."
|
||||
hx-get="/sftp/pane?pane=local" hx-trigger="keyup delay:200ms" hx-target="#local-pane"
|
||||
class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div id="local-pane" class="flex-1 overflow-y-auto min-h-0">
|
||||
{{template "sftp_pane" dict "Pane" "local" "Files" .LocalFiles "Breadcrumb" .LocalBreadcrumb}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Remote pane -->
|
||||
<div class="rounded-xl bg-white/70 backdrop-blur-md border border-outline-variant/30 overflow-hidden">
|
||||
<div class="flex items-center gap-2 px-4 py-3 border-b border-outline-variant/20 bg-white/50">
|
||||
<svg class="w-4 h-4 text-on-surface-variant" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
|
||||
<span class="text-sm font-medium text-on-surface">Remote Cluster Node</span>
|
||||
<div class="flex-1"></div>
|
||||
<button @click="folderPane = 'remote'; showFolderModal = true"
|
||||
class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant hover:text-on-surface transition-colors" title="New Folder">
|
||||
<!-- Remote Pane -->
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
|
||||
<div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<svg class="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
|
||||
<span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Remote Cluster Node</span>
|
||||
</div>
|
||||
<button @click="$dispatch('open-folder-modal', { pane: 'remote' })"
|
||||
class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Remote Folder">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
|
||||
</button>
|
||||
<input type="search" placeholder="Filter files..." hx-get="/sftp/pane?pane=remote&q=..." hx-trigger="keyup delay:200ms" hx-target="#remote-pane"
|
||||
class="w-40 px-2 py-1 rounded-lg border border-outline-variant/30 bg-white text-xs text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
</div>
|
||||
<div class="flex items-center gap-1 px-4 py-2 border-b border-outline-variant/10 text-xs text-on-surface-variant font-mono bg-surface-container-low/30">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
|
||||
{{range .RemoteBreadcrumb}}
|
||||
<a href="#" hx-get="/sftp/pane?pane=remote&dir={{.Path}}" hx-target="#remote-pane"
|
||||
class="hover:text-primary transition-colors">{{.Name}}</a>
|
||||
<span class="text-on-surface-variant/40">/</span>
|
||||
class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
|
||||
<svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<div id="remote-pane">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="p-3 border-b border-outline-variant/10 relative">
|
||||
<svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Filter remote files..."
|
||||
hx-get="/sftp/pane?pane=remote" hx-trigger="keyup delay:200ms" hx-target="#remote-pane"
|
||||
class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div id="remote-pane" class="flex-1 overflow-y-auto min-h-0">
|
||||
{{template "sftp_pane" dict "Pane" "remote" "Files" .RemoteFiles "Breadcrumb" .RemoteBreadcrumb}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drop zone -->
|
||||
<div class="mt-6 rounded-xl border-2 border-dashed border-outline-variant/30 p-8 flex flex-col items-center justify-center text-on-surface-variant/50 hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer">
|
||||
<svg class="w-10 h-10 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
|
||||
<p class="text-sm font-medium">Drop files here to upload</p>
|
||||
<p class="text-xs mt-1">or click to browse</p>
|
||||
<!-- Drop Zone -->
|
||||
<div class="p-8 border-2 border-dashed border-outline-variant/40 rounded-2xl text-center bg-white/40 flex flex-col items-center justify-center space-y-2 relative group hover:border-primary transition-colors cursor-pointer">
|
||||
<svg class="w-10 h-10 text-outline group-hover:text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
|
||||
<h3 class="font-bold text-sm text-on-surface">Drag files directly here to start batch upload</h3>
|
||||
<p class="text-xs text-on-surface-variant max-w-sm">
|
||||
Files are automatically split into parallel streams of 5MB chunks and secured with AES-256 keychain keys.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div x-show="showToast" x-cloak
|
||||
x-text="toast"
|
||||
class="fixed bottom-6 right-6 bg-[#191c1e] text-white px-4 py-3 rounded-xl text-sm shadow-lg z-50 animate-slide-in"
|
||||
style="max-width: 360px;">
|
||||
</div>
|
||||
|
||||
<!-- Folder create modal -->
|
||||
<!-- Folder Modal -->
|
||||
<div id="folder-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
@open-folder-modal.window="open = true; folderPane = $event.detail.pane" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-sm p-6" @click.outside="open = false">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-on-surface">New Folder</h2>
|
||||
<button @click="open = false" class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<div class="bg-white rounded-2xl max-w-sm w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<h3 class="font-bold text-lg text-on-surface">New Folder</h3>
|
||||
<button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
|
||||
</div>
|
||||
<form hx-post="/sftp/mkdir" hx-target="#local-pane" hx-swap="outerHTML"
|
||||
@submit="open = false"
|
||||
class="space-y-4">
|
||||
@submit="open = false" class="space-y-4 text-sm">
|
||||
<input type="hidden" name="pane" :value="folderPane">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Folder Name</label>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">FOLDER NAME</label>
|
||||
<input type="text" name="name" required placeholder="e.g. new-project"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Cancel</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">Create</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Create Folder</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,77 @@
|
||||
{{define "sftp_pane"}}
|
||||
<div class="file-table" id="{{.Pane}}-pane-content" x-data="{ pane: '{{.Pane}}' }">
|
||||
{{range .Files}}
|
||||
<div class="file-table-row group transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-4 h-4 shrink-0 flex items-center justify-center
|
||||
{{if eq .Type "folder"}}text-yellow-500{{else if eq .Type "code"}}text-purple-500{{else if eq .Type "image"}}text-secondary{{else if eq .Type "lock"}}text-red-400{{else}}text-on-surface-variant/50{{end}}">
|
||||
{{if eq .Type "folder"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||
{{else if eq .Type "code"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||
{{else if eq .Type "image"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
{{else if eq .Type "lock"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
{{else}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
||||
{{end}}
|
||||
</span>
|
||||
<span class="text-sm text-on-surface truncate">{{.Name}}</span>
|
||||
</div>
|
||||
<span class="text-xs text-on-surface-variant text-right tabular-nums w-20 shrink-0">{{.Size}}</span>
|
||||
<span class="text-xs text-on-surface-variant w-24 shrink-0">{{.Modified}}</span>
|
||||
<span class="text-xs text-on-surface-variant font-mono w-24 shrink-0 hidden md:inline">{{.Permissions}}</span>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
{{if ne .Type "folder"}}
|
||||
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Downloading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
|
||||
class="p-1 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors" title="Download">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||
</button>
|
||||
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Uploading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
|
||||
class="p-1 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors" title="Upload">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
|
||||
</button>
|
||||
<div id="{{.Pane}}-pane-content" x-data="{ pane: '{{.Pane}}' }">
|
||||
<table class="w-full text-left border-collapse text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-outline-variant/20 text-outline uppercase tracking-wider font-bold">
|
||||
<th class="py-2.5 px-4 font-semibold text-[10px]">Name</th>
|
||||
<th class="py-2.5 px-4 font-semibold text-[10px] text-right">Size</th>
|
||||
<th class="py-2.5 px-4 font-semibold text-[10px] text-right">Modified</th>
|
||||
<th class="py-2.5 px-4 font-semibold text-[10px]"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Files}}
|
||||
<tr class="border-b border-outline-variant/10 hover:bg-primary/5 transition-colors group cursor-pointer"
|
||||
hx-get="/sftp/pane?pane={{$.Pane}}&dir={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML">
|
||||
<td class="py-2.5 px-4">
|
||||
<div class="font-semibold text-on-surface flex items-center gap-2.5 max-w-[180px] cursor-pointer">
|
||||
<span class="shrink-0
|
||||
{{if eq .Type "folder"}}text-yellow-500{{else if eq .Type "code"}}text-purple-500{{else if eq .Type "image"}}text-secondary{{else if eq .Type "lock"}}text-red-400{{else}}text-outline/50{{end}}">
|
||||
{{if eq .Type "folder"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||
{{else if eq .Type "code"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||
{{else if eq .Type "image"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
{{else if eq .Type "lock"}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
{{else}}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
||||
{{end}}
|
||||
</span>
|
||||
<span class="truncate group-hover:text-primary transition-colors">{{.Name}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-2.5 px-4 text-right text-on-surface-variant font-mono">{{.Size}}</td>
|
||||
<td class="py-2.5 px-4 text-right text-outline">{{.Modified}}</td>
|
||||
<td class="py-2.5 px-4 text-right" @click.stop>
|
||||
<div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{{if ne .Type "folder"}}
|
||||
{{if eq $.Pane "local"}}
|
||||
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Uploading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
|
||||
class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Upload to remote">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
|
||||
</button>
|
||||
{{end}}
|
||||
{{if eq $.Pane "remote"}}
|
||||
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Downloading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
|
||||
class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Download to local">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||
</button>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<button hx-delete="/sftp/rm?pane={{$.Pane}}&name={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML"
|
||||
hx-confirm="Delete {{.Name}}?"
|
||||
class="p-1 hover:bg-red-50 hover:text-error rounded text-outline transition-colors" title="Delete file">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
<button hx-delete="/sftp/rm?pane={{$.Pane}}&name={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML"
|
||||
hx-confirm="Delete {{.Name}}?"
|
||||
class="p-1 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors" title="Delete">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{if eq (len .Files) 0}}
|
||||
<div class="text-center py-8 text-on-surface-variant">
|
||||
<p class="text-sm">This directory is empty</p>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if gt (len .Files) 0}}
|
||||
<div class="p-3 bg-surface-container-low border-t border-outline-variant/30 text-[10px] text-outline text-center font-bold">
|
||||
TIP: Click file or {{if eq .Pane "local"}}upload{{else}}download{{end}} button to transmit to server
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@@ -1,32 +1,57 @@
|
||||
{{define "snippet_grid"}}
|
||||
<div id="snippet-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div id="snippet-grid" class="space-y-6">
|
||||
{{range .Snippets}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-tertiary/10 text-tertiary">{{.Language}}</span>
|
||||
<div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-sm flex flex-col group">
|
||||
<div class="p-5 flex justify-between items-start gap-4">
|
||||
<div class="space-y-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h3 class="font-bold text-on-surface text-base group-hover:text-primary transition-colors">{{.Name}}</h3>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{{range .Tags}}
|
||||
<span class="px-2 py-0.5 bg-surface-container text-[10px] font-bold rounded text-on-surface-variant">{{.}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{if .Description}}
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">{{.Description}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors shrink-0"
|
||||
hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<button onclick="copyToClipboard(`{{.Content}}`)"
|
||||
class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-primary text-outline hover:text-primary transition-colors"
|
||||
title="Copy code to clipboard">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
<button hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?"
|
||||
class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-error text-outline hover:text-error transition-colors"
|
||||
title="Delete code snippet">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface-container-low border-t border-outline-variant/40 p-4 font-mono text-xs text-on-surface relative group/code overflow-x-auto">
|
||||
<pre class="text-on-surface select-all leading-relaxed whitespace-pre font-medium">{{.Content}}</pre>
|
||||
<button onclick="copyToClipboard(`{{.Content}}`)"
|
||||
class="absolute right-4 top-4 bg-white/90 backdrop-blur border border-outline-variant/30 shadow px-2.5 py-1 rounded text-[10px] font-mono font-bold hover:border-primary hover:text-primary transition-colors opacity-0 group-hover/code:opacity-100">
|
||||
COPY
|
||||
</button>
|
||||
</div>
|
||||
<pre class="text-xs text-on-surface-variant bg-surface-container-low/50 rounded-lg p-3 mb-3 overflow-x-auto font-mono leading-relaxed">{{.Content}}</pre>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.CreatedAt}}</span>
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="copyToClipboard(`{{.Content}}`)" title="Copy">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="px-5 py-2 border-t border-outline-variant/20 bg-surface-container-lowest flex justify-between items-center text-[10px] text-outline font-semibold">
|
||||
<span>Last adjusted {{.CreatedAt}}</span>
|
||||
<span class="flex items-center gap-1 text-primary">
|
||||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
Ready to inject to shell
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq (len .Snippets) 0}}
|
||||
<div class="col-span-full text-center py-12 text-on-surface-variant">
|
||||
<p class="text-lg font-medium">No snippets found</p>
|
||||
<p class="text-sm mt-1">Add your first snippet to get started</p>
|
||||
<div class="p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
|
||||
No matching snippet found.
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
+131
-65
@@ -21,91 +21,131 @@
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="snippets-page" class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<input type="search" placeholder="Search snippets..."
|
||||
hx-get="/snippets/grid?q=..." hx-trigger="keyup delay:200ms"
|
||||
hx-target="#snippet-grid"
|
||||
class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Search Header Panel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">Snippets & Scripts Library</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Quickly reuse and catalog command line shortcuts across remote clusters</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Search code snippets..."
|
||||
hx-get="/snippets/grid" hx-trigger="keyup delay:200ms" hx-target="#snippet-grid"
|
||||
class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all">
|
||||
</div>
|
||||
<button @click="$dispatch('open-snippet-modal')"
|
||||
class="flex items-center gap-1.5 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2 px-4 rounded-xl shadow-md transition-all">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
New Snippet
|
||||
</button>
|
||||
</div>
|
||||
<button @click="$dispatch('open-snippet-modal')"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
Add Snippet
|
||||
</button>
|
||||
</div>
|
||||
<div id="snippet-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{{range .Snippets}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-tertiary/10 text-tertiary">{{.Language}}</span>
|
||||
|
||||
<!-- Grid: Sidebar + Cards -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-3 space-y-5" x-data="sidebarManager()" x-init="init()">
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-4">
|
||||
<h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Collections</h4>
|
||||
<div class="space-y-1 text-sm font-semibold">
|
||||
<button hx-get="/snippets/grid" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'all' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'all'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> All Code Blocks</span>
|
||||
<span class="text-xs text-outline" x-text="total"></span>
|
||||
</button>
|
||||
<button hx-get="/snippets/grid?collection=favorites" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'favorites' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'favorites'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> Starred Favorites</span>
|
||||
<span class="text-xs text-outline" x-text="favCount"></span>
|
||||
</button>
|
||||
<button hx-get="/snippets/grid?collection=recent" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'recent' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'recent'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Recent</span>
|
||||
<span class="text-xs text-outline" x-text="recentCount"></span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors shrink-0"
|
||||
hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<pre class="text-xs text-on-surface-variant bg-surface-container-low/50 rounded-lg p-3 mb-3 overflow-x-auto font-mono leading-relaxed">{{.Content}}</pre>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.CreatedAt}}</span>
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="copyToClipboard(`{{.Content}}`)" title="Copy">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-3">
|
||||
<h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Tag Categories</h4>
|
||||
<div class="flex flex-wrap gap-1.5 p-1">
|
||||
<button hx-get="/snippets/grid" hx-target="#snippet-grid"
|
||||
:class="activeTag === 'all' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
|
||||
class="px-3 py-1 rounded-full text-xs font-bold transition-all"
|
||||
@click="activeTag = 'all'">All Tags</button>
|
||||
{{range .AllTags}}
|
||||
<button hx-get="/snippets/grid?tag={{.}}" hx-target="#snippet-grid"
|
||||
:class="activeTag === '{{.}}' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
|
||||
class="px-3 py-1 rounded-full text-xs font-bold transition-all"
|
||||
@click="activeTag = '{{.}}'">
|
||||
{{.}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if eq (len .Snippets) 0}}
|
||||
<div class="col-span-full text-center py-12 text-on-surface-variant">
|
||||
<p class="text-lg font-medium">No snippets found</p>
|
||||
<p class="text-sm mt-1">Add your first snippet to get started</p>
|
||||
|
||||
<!-- Snippet Cards -->
|
||||
<div class="lg:col-span-9 space-y-6" id="snippet-grid">
|
||||
{{template "snippet_grid" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Snippet Modal -->
|
||||
<div id="snippet-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
@open-snippet-modal.window="open = true" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-lg p-6" @click.outside="open = false">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-on-surface">Add New Snippet</h2>
|
||||
<button @click="open = false" class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<h3 class="font-bold text-lg text-on-surface">Store Custom Snippet</h3>
|
||||
<button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
|
||||
</div>
|
||||
<form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="outerHTML"
|
||||
@submit="open = false" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Health Check Script"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
@submit="open = false" class="space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">SNIPPET TITLE</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Purge Docker Cache"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Content</label>
|
||||
<textarea name="content" rows="6" required placeholder="Paste your snippet here..."
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface font-mono focus:outline-none focus:ring-2 focus:ring-primary/30"></textarea>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">SHORT DESCRIPTION / USAGE</label>
|
||||
<input type="text" name="description" placeholder="e.g. Safe cleanup to recover workspace disk capacity."
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Language</label>
|
||||
<select name="language"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="bash">Bash</option>
|
||||
<option value="nginx">Nginx</option>
|
||||
<option value="yaml">YAML</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="sql">SQL</option>
|
||||
<option value="dockerfile">Dockerfile</option>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CODE SYNTAX BLOCK</label>
|
||||
<textarea name="content" required rows="4" placeholder="e.g. systemctl restart nginx"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-xs"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">PRIMARY TAG CATEGORY</label>
|
||||
<select name="tags"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary">
|
||||
<option value="DevOps">DevOps</option>
|
||||
<option value="Docker">Docker</option>
|
||||
<option value="Nginx">Nginx</option>
|
||||
<option value="Git">Git</option>
|
||||
<option value="SSL">SSL</option>
|
||||
<option value="Security">Security</option>
|
||||
<option value="Database">Database</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<input type="hidden" name="collection" value="recent">
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Cancel</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">Add Snippet</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Code Snippet</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -114,5 +154,31 @@
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function sidebarManager() {
|
||||
return {
|
||||
activeColl: 'all',
|
||||
activeTag: 'all',
|
||||
total: 0,
|
||||
favCount: 0,
|
||||
recentCount: 0,
|
||||
init() {
|
||||
this.updateCounts();
|
||||
document.body.addEventListener('htmx:afterSwap', () => this.updateCounts());
|
||||
},
|
||||
updateCounts() {
|
||||
const el = document.getElementById('snippet-data');
|
||||
if (!el) return;
|
||||
try {
|
||||
const snippets = JSON.parse(el.textContent) || [];
|
||||
this.total = snippets.length;
|
||||
this.favCount = snippets.filter(s => s.Collection === 'favorites').length;
|
||||
this.recentCount = snippets.filter(s => s.Collection === 'recent').length;
|
||||
} catch(e) {}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,42 +15,105 @@
|
||||
<body class="bg-surface text-on-surface antialiased dot-grid min-h-screen">
|
||||
<div class="flex min-h-screen">
|
||||
{{template "nav" .}}
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="flex-1 flex flex-col overflow-hidden" x-data="terminalManager()" x-init="init()">
|
||||
<header class="h-14 border-b border-outline-variant/30 flex items-center gap-2 px-6 bg-white/70 backdrop-blur-md">
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
<h1 class="text-xl font-bold tracking-tight text-on-surface">{{.Title}}</h1>
|
||||
<span class="text-xs text-on-surface-variant mt-0.5">Interactive SSH shell with multi-tab session management</span>
|
||||
<div class="flex-1"></div>
|
||||
<button @click="addTab()"
|
||||
class="p-1.5 rounded-lg hover:bg-surface-container-low text-on-surface-variant hover:text-on-surface transition-colors" title="New Tab">
|
||||
class="p-1.5 rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant transition-all" title="New Tab">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 flex flex-col overflow-hidden bg-[#0d1117]"
|
||||
x-data="terminalManager()"
|
||||
x-init="init()">
|
||||
<!-- Tab bar -->
|
||||
<div class="flex items-center bg-[#161b22] border-b border-[#30363d] overflow-x-auto no-scrollbar shrink-0" style="height: 36px;">
|
||||
<template x-for="(tab, i) in tabs" :key="tab.id">
|
||||
<div @click="switchTab(i)"
|
||||
:class="activeTab === i ? 'bg-[#0d1117] text-white border-t-2 border-[#58a6ff]' : 'bg-[#161b22] text-[#8b949e] hover:text-[#c9d1d9]'"
|
||||
class="flex items-center gap-1.5 px-3 text-xs cursor-pointer border-r border-[#30363d] shrink-0 select-none"
|
||||
style="height: 34px; padding-top: 1px;">
|
||||
<span class="w-2 h-2 rounded-full" :class="tab.connected ? 'bg-[#3fb950]' : 'bg-[#8b949e]'"></span>
|
||||
<span x-text="tab.name"></span>
|
||||
<button @click.stop="closeTab(i)" class="ml-0.5 p-0.5 rounded hover:bg-[#30363d] text-[#8b949e] hover:text-white transition-colors">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
<main id="main-content" class="flex-1 flex flex-col overflow-auto p-6">
|
||||
<div class="max-w-7xl mx-auto space-y-6 flex flex-col flex-1 min-h-0 w-full">
|
||||
<!-- Session Tab Toolbar -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-3">
|
||||
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth pr-6">
|
||||
<template x-for="(tab, i) in tabs" :key="tab.id">
|
||||
<div @click="switchTab(i)"
|
||||
:class="activeTab === i ? 'bg-white text-primary border-primary shadow-[0_-4px_12px_rgba(0,80,203,0.06)]' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container border-transparent'"
|
||||
class="flex items-center gap-2 px-3.5 py-2 rounded-t-xl text-xs font-bold font-mono transition-all cursor-pointer border-t-2">
|
||||
<svg class="w-3.5 h-3.5" :class="activeTab === i ? 'text-primary' : 'text-outline'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 014 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0110 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25C19.496 5.875 20 6.379 20 7v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0116 17z"/></svg>
|
||||
<span class="truncate max-w-[120px]" x-text="tab.name"></span>
|
||||
<button @click.stop="closeTab(i)" class="p-0.5 hover:bg-black/10 rounded transition-colors">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<button @click="addTab()"
|
||||
class="p-1.5 bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant rounded-lg transition-all" title="Open new terminal connection">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Terminal containers -->
|
||||
<div class="flex-1 relative">
|
||||
<template x-for="(tab, i) in tabs" :key="tab.id">
|
||||
<div :id="'terminal-container-' + tab.id"
|
||||
x-show="activeTab === i"
|
||||
class="absolute inset-0">
|
||||
<div class="flex items-center gap-4 text-xs font-mono shrink-0">
|
||||
<div class="flex items-center gap-1.5 text-secondary">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
|
||||
<span>SECURE CRYPTO PATH</span>
|
||||
</div>
|
||||
<div class="text-outline">
|
||||
HOST: <span class="text-on-surface font-semibold" x-text="tabs.length ? tabs[activeTab].host : '—'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Terminal shell frame -->
|
||||
<div class="flex-1 bg-white border border-outline-variant rounded-2xl shadow-sm flex flex-col overflow-hidden min-h-0">
|
||||
<!-- Terminal Header -->
|
||||
<div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 rounded-full bg-error/80"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-primary-container/80"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-secondary/80"></span>
|
||||
<span class="text-[10px] font-mono font-bold text-outline ml-2">ssh -i id_ed25519 root@<span x-text="tabs.length ? tabs[activeTab].host : '—'"></span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button @click="clearBuffer()"
|
||||
class="text-[10px] uppercase font-bold text-outline hover:text-primary transition-colors flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
|
||||
Clear Buffer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Console display -->
|
||||
<div class="flex-1 overflow-y-auto min-h-0 font-mono text-sm leading-relaxed p-5 bg-white" id="terminal-output">
|
||||
<template x-for="(line, idx) in history" :key="idx">
|
||||
<div :class="line.type === 'input' ? 'text-on-surface font-bold' : line.type === 'error' ? 'text-error bg-error-container/20 px-2.5 py-1 rounded-md' : line.type === 'success' ? 'text-secondary bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold' : 'text-[#2244aa]'"
|
||||
class="whitespace-pre-wrap" x-text="line.text"></div>
|
||||
</template>
|
||||
<div class="h-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- Input prompt -->
|
||||
<form @submit.prevent="submitCommand()"
|
||||
class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5">
|
||||
<span class="font-mono text-xs font-bold text-primary pl-2 shrink-0 flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3"/></svg>
|
||||
root@<span x-text="tabs.length ? tabs[activeTab].name : 'host'"></span>:~$
|
||||
</span>
|
||||
<input type="text" x-model="command" autofocus
|
||||
placeholder='Type a command (e.g. "help", "ls", "docker ps", "ping google.com")...'
|
||||
class="flex-1 bg-transparent border-none font-mono text-xs font-medium focus:ring-0 focus:outline-none text-on-surface p-0">
|
||||
<button type="submit"
|
||||
class="p-1.5 bg-primary text-white rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all" title="Execute Command">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/></svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Shortcut pills -->
|
||||
<div class="flex flex-wrap items-center gap-2 text-[11px] font-mono font-bold text-on-surface-variant">
|
||||
<span class="text-outline">SHORTCUT SUGGESTIONS:</span>
|
||||
<button type="button" @click="insertCommand('help')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">help</button>
|
||||
<button type="button" @click="insertCommand('ls')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ls</button>
|
||||
<button type="button" @click="insertCommand('docker ps')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">docker ps</button>
|
||||
<button type="button" @click="insertCommand('uname -a')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">uname -a</button>
|
||||
<button type="button" @click="insertCommand('ping 8.8.8.8')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ping 8.8.8.8</button>
|
||||
<button type="button" @click="insertCommand('cat server.js')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">cat server.js</button>
|
||||
<button type="button" @click="insertCommand('keychain')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">keychain</button>
|
||||
<button type="button" @click="insertCommand('clear')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user