fix: add missing _content partial templates for HTMX nav (terminal, sftp, settings, brief)
- Create terminal_content.html, sftp_content.html, settings_content.html, brief_content.html
- Update full page templates to use partial templates via {{template}}
- Handlers already rendered these templates on HX-Request, but files were missing → 500
- All pages now return 200 for both full page and HTMX nav requests
This commit is contained in:
swanadiva
@@ -19,82 +19,7 @@
|
||||
<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-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>
|
||||
|
||||
<!-- 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"><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>
|
||||
{{template "brief_content" .}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
{{define "brief_content"}}
|
||||
<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>
|
||||
|
||||
<!-- 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"><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>
|
||||
{{end}}
|
||||
@@ -57,13 +57,13 @@
|
||||
<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>
|
||||
class="py-2.5 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>
|
||||
class="py-2.5 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>
|
||||
class="py-2.5 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>
|
||||
|
||||
@@ -17,12 +17,15 @@
|
||||
<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 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 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">Hosts</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="dashboard-page" class="max-w-7xl mx-auto space-y-8">
|
||||
<div class="border-b border-outline-variant/30 pb-4">
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">Hosts</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Manage connections, monitor uptime, and deploy</p>
|
||||
</div>
|
||||
<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">
|
||||
|
||||
@@ -1,87 +1,85 @@
|
||||
{{define "credential_grid"}}
|
||||
<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>
|
||||
<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>
|
||||
{{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>
|
||||
<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>
|
||||
|
||||
{{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="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 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>
|
||||
|
||||
{{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 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="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>
|
||||
<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 data-copy="{{.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>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq (len .Keys) 0}}
|
||||
<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.
|
||||
{{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>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq (len .Keys) 0}}
|
||||
<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}}
|
||||
{{end}}
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Grid List -->
|
||||
<div id="key-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="key-grid">
|
||||
{{template "credential_grid" .}}
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<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"
|
||||
<form hx-post="/keys" hx-target="#key-grid" hx-swap="innerHTML"
|
||||
@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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{define "nav"}}
|
||||
<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0">
|
||||
<div class="p-4 border-b border-outline-variant/20">
|
||||
<div class="p-3 border-b border-outline-variant/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
|
||||
<span class="font-bold text-lg text-on-surface">Hostkeeper</span>
|
||||
|
||||
@@ -21,248 +21,7 @@
|
||||
<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-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))">
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Left: profile + toggles -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
{{template "settings_content" .}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
{{define "settings_content"}}
|
||||
<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))">
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Left: profile + toggles -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
{{end}}
|
||||
+1
-138
@@ -19,144 +19,7 @@
|
||||
<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 space-y-6 relative"
|
||||
x-data="{ toast: '', showToast: false, showFolderModal: false, folderPane: 'local' }"
|
||||
x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3500))">
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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="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>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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/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-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 text-sm">
|
||||
<input type="hidden" name="pane" :value="folderPane">
|
||||
<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 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="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "sftp_content" .}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
{{define "sftp_content"}}
|
||||
<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))"
|
||||
@toast-message.window="toast = $event.detail.message; showToast = true">
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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="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>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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/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-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 text-sm">
|
||||
<input type="hidden" name="pane" :value="folderPane">
|
||||
<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 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="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -38,13 +38,13 @@
|
||||
<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"
|
||||
<button @click="$dispatch('toast-message', { message: 'Uploading {{.Name}}...' })"
|
||||
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"
|
||||
<button @click="$dispatch('toast-message', { message: 'Downloading {{.Name}}...' })"
|
||||
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>
|
||||
|
||||
@@ -1,58 +1,57 @@
|
||||
{{define "snippet_grid"}}
|
||||
<div id="snippet-grid" class="space-y-6">
|
||||
{{range .Snippets}}
|
||||
<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>
|
||||
<script id="snippet-data" type="application/json">{{.SnippetsJSON}}</script>
|
||||
{{range .Snippets}}
|
||||
<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>
|
||||
{{if .Description}}
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">{{.Description}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{{if .Description}}
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">{{.Description}}</p>
|
||||
{{end}}
|
||||
</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
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<button data-copy="{{.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 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="p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
|
||||
No matching snippet found.
|
||||
<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 data-copy="{{.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>
|
||||
|
||||
<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>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq (len .Snippets) 0}}
|
||||
<div class="p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
|
||||
No matching snippet found.
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
<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"
|
||||
<form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="innerHTML"
|
||||
@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>
|
||||
|
||||
@@ -26,95 +26,7 @@
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
{{template "terminal_content" .}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
{{define "terminal_content"}}
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user