541 lines
25 KiB
Go
541 lines
25 KiB
Go
package web
|
||
|
||
// All HTML templates and CSS are embedded as Go strings.
|
||
// Compiled into the binary — zero external file dependencies at runtime.
|
||
// As the UI grows, switch to go:embed for easier editing.
|
||
|
||
const allTemplates = layoutTmpl + dashboardTmpl + stacksTmpl + loginTmpl + logsTmpl + deployTmpl
|
||
|
||
const layoutTmpl = `
|
||
{{define "layout_start"}}
|
||
<!DOCTYPE html>
|
||
<html lang="hu">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{.Title}} — Felhom</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<nav class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1 class="logo">☁ Felhom</h1>
|
||
<span class="customer-name">{{.CustomerName}}</span>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li><a href="/" class="{{if eq .Page "dashboard"}}active{{end}}">📊 Vezérlőpult</a></li>
|
||
<li><a href="/stacks" class="{{if eq .Page "stacks"}}active{{end}}">📦 Alkalmazások</a></li>
|
||
</ul>
|
||
<div class="sidebar-footer">
|
||
<span class="version">v{{.Version}}</span>
|
||
<a href="/logout" class="logout-link">Kijelentkezés ↗</a>
|
||
</div>
|
||
</nav>
|
||
<main class="content">
|
||
{{end}}
|
||
|
||
{{define "layout_end"}}
|
||
</main>
|
||
<script>
|
||
async function stackAction(name, action) {
|
||
const btn = event.currentTarget;
|
||
const origText = btn.textContent;
|
||
btn.disabled = true;
|
||
btn.textContent = 'Folyamatban...';
|
||
btn.classList.add('loading');
|
||
try {
|
||
const resp = await fetch('/api/stacks/' + name + '/' + action, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'}
|
||
});
|
||
const data = await resp.json();
|
||
if (!data.ok) {
|
||
alert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
|
||
btn.textContent = origText;
|
||
btn.disabled = false;
|
||
btn.classList.remove('loading');
|
||
return;
|
||
}
|
||
window.location.reload();
|
||
} catch (err) {
|
||
alert('Hálózati hiba: ' + err.message);
|
||
btn.textContent = origText;
|
||
btn.disabled = false;
|
||
btn.classList.remove('loading');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
{{end}}
|
||
`
|
||
|
||
const dashboardTmpl = `
|
||
{{define "dashboard"}}
|
||
{{template "layout_start" .}}
|
||
|
||
<div class="page-header">
|
||
<h2>Vezérlőpult</h2>
|
||
<span class="domain-badge">{{.Domain}}</span>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card stat-running">
|
||
<div class="stat-value">{{.RunningCount}}</div>
|
||
<div class="stat-label">Futó alkalmazás</div>
|
||
</div>
|
||
<div class="stat-card stat-stopped">
|
||
<div class="stat-value">{{.StoppedCount}}</div>
|
||
<div class="stat-label">Leállítva</div>
|
||
</div>
|
||
<div class="stat-card stat-total">
|
||
<div class="stat-value">{{.TotalCount}}</div>
|
||
<div class="stat-label">Összes alkalmazás</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Alkalmazások állapota</h3>
|
||
|
||
<div class="stack-list">
|
||
{{range .Stacks}}
|
||
<div class="stack-card stack-state-{{stateColor .State}}">
|
||
<div class="stack-info">
|
||
<img class="stack-logo" src="{{logoURL .Meta.Slug}}"
|
||
alt="{{.Meta.DisplayName}}" onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
|
||
<div>
|
||
<strong class="stack-name">{{.Meta.DisplayName}}</strong>
|
||
{{if .Meta.Description}}<span class="stack-desc">{{.Meta.Description}}</span>{{end}}
|
||
</div>
|
||
</div>
|
||
<div class="stack-actions">
|
||
<span class="stack-state-label">{{stateLabel .State}}</span>
|
||
|
||
{{if .Protected}}
|
||
<span class="badge badge-protected">🔒 Védett</span>
|
||
{{else if not .Deployed}}
|
||
<a href="/stacks/{{.Name}}/deploy" class="btn btn-sm btn-primary">🚀 Telepítés</a>
|
||
{{else}}
|
||
{{if eq (stateStr .State) "running"}}
|
||
<button class="btn btn-sm btn-warning" onclick="stackAction('{{.Name}}', 'restart')">↻</button>
|
||
<button class="btn btn-sm btn-danger" onclick="stackAction('{{.Name}}', 'stop')">■</button>
|
||
{{else}}
|
||
<button class="btn btn-sm btn-success" onclick="stackAction('{{.Name}}', 'start')">▶</button>
|
||
{{end}}
|
||
<a href="/stacks/{{.Name}}/logs" class="btn btn-sm btn-outline">📋</a>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{else}}
|
||
<div class="empty-state">
|
||
<p>Nincs elérhető alkalmazás.</p>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
{{template "layout_end" .}}
|
||
{{end}}
|
||
`
|
||
|
||
const stacksTmpl = `
|
||
{{define "stacks"}}
|
||
{{template "layout_start" .}}
|
||
|
||
<div class="page-header">
|
||
<h2>Alkalmazások</h2>
|
||
<span class="domain-badge">{{.Domain}}</span>
|
||
</div>
|
||
|
||
<div class="stack-grid">
|
||
{{range .Stacks}}
|
||
<div class="stack-detail-card stack-state-{{stateColor .State}}">
|
||
<div class="stack-detail-header">
|
||
<div class="stack-title-row">
|
||
<img class="stack-logo-lg" src="{{logoURL .Meta.Slug}}"
|
||
alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
|
||
<div>
|
||
<h3>{{.Meta.DisplayName}}</h3>
|
||
{{if .Meta.Subdomain}}
|
||
<a class="subdomain-link" href="https://{{.Meta.Subdomain}}.{{$.Domain}}" target="_blank">
|
||
{{.Meta.Subdomain}}.{{$.Domain}} ↗
|
||
</a>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
<span class="stack-state-badge state-{{stateColor .State}}">{{stateLabel .State}}</span>
|
||
</div>
|
||
|
||
{{if .Meta.Description}}
|
||
<p class="stack-detail-desc">{{.Meta.Description}}</p>
|
||
{{end}}
|
||
|
||
<div class="stack-meta-badges">
|
||
{{if .Meta.Resources.RAM}}<span class="meta-badge">💾 {{.Meta.Resources.RAM}}</span>{{end}}
|
||
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">🥧 Pi kompatibilis</span>{{end}}
|
||
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">💿 HDD szükséges</span>{{end}}
|
||
</div>
|
||
|
||
{{if .Containers}}
|
||
<div class="container-list">
|
||
{{range .Containers}}
|
||
<div class="container-row">
|
||
<span class="container-name">{{.Name}}</span>
|
||
<span class="container-status state-text-{{stateColor .State}}">{{.Status}}</span>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="stack-detail-actions">
|
||
{{if .Protected}}
|
||
<span class="badge badge-protected">🔒 Védett rendszerkomponens</span>
|
||
{{else if not .Deployed}}
|
||
<a href="/stacks/{{.Name}}/deploy" class="btn btn-primary">🚀 Telepítés</a>
|
||
<a href="{{appPageURL .Meta.Slug}}" target="_blank" class="btn btn-outline">ℹ️ Részletek</a>
|
||
{{else}}
|
||
{{if eq (stateStr .State) "running"}}
|
||
<button class="btn btn-success" onclick="stackAction('{{.Name}}', 'update')">⬆ Frissítés</button>
|
||
<button class="btn btn-warning" onclick="stackAction('{{.Name}}', 'restart')">↻ Újraindítás</button>
|
||
<button class="btn btn-danger" onclick="stackAction('{{.Name}}', 'stop')">■ Leállítás</button>
|
||
{{else}}
|
||
<button class="btn btn-success" onclick="stackAction('{{.Name}}', 'start')">▶ Indítás</button>
|
||
{{end}}
|
||
<a href="/stacks/{{.Name}}/logs" class="btn btn-outline">📋 Naplók</a>
|
||
<a href="{{appPageURL .Meta.Slug}}" target="_blank" class="btn btn-outline">ℹ️ Részletek</a>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
{{template "layout_end" .}}
|
||
{{end}}
|
||
`
|
||
|
||
const deployTmpl = `
|
||
{{define "deploy"}}
|
||
{{template "layout_start" .}}
|
||
|
||
<div class="page-header">
|
||
<a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
|
||
<h2>{{.Meta.DisplayName}} — Telepítés</h2>
|
||
</div>
|
||
|
||
<div class="deploy-container">
|
||
<div class="deploy-info">
|
||
<img class="deploy-logo" src="{{.LogoURL}}" alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{.LogoPNGURL}}'">
|
||
<div>
|
||
<h3>{{.Meta.DisplayName}}</h3>
|
||
{{if .Meta.Description}}<p>{{.Meta.Description}}</p>{{end}}
|
||
<div class="stack-meta-badges">
|
||
{{if .Meta.Resources.RAM}}<span class="meta-badge">💾 {{.Meta.Resources.RAM}}</span>{{end}}
|
||
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">🥧 Pi kompatibilis</span>{{end}}
|
||
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">💿 HDD szükséges</span>{{end}}
|
||
</div>
|
||
<a href="{{.AppPageURL}}" target="_blank" class="btn btn-sm btn-outline" style="margin-top:0.5rem">
|
||
ℹ️ Részletes leírás, képernyőképek
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{{if .AlreadyDeployed}}
|
||
<div class="alert alert-info">
|
||
Ez az alkalmazás már telepítve van. Az alábbi beállítások csak olvashatók.
|
||
</div>
|
||
{{end}}
|
||
|
||
<form id="deploy-form" class="deploy-form">
|
||
{{if .AutoFields}}
|
||
<div class="form-section">
|
||
<h4>🔒 Automatikusan generált értékek</h4>
|
||
<p class="form-section-desc">Ezek az értékek automatikusan létrejönnek a telepítéskor.</p>
|
||
{{range .AutoFields}}
|
||
<div class="form-group form-group-auto">
|
||
<label>{{.Label}}</label>
|
||
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if .UserFields}}
|
||
<div class="form-section">
|
||
<h4>⚙️ Beállítások</h4>
|
||
{{range .UserFields}}
|
||
<div class="form-group">
|
||
<label for="field-{{.EnvVar}}">
|
||
{{.Label}}
|
||
{{if .Required}}<span class="required">*</span>{{end}}
|
||
{{if .LockedAfterDeploy}}<span class="locked-hint">🔒 telepítés után nem módosítható</span>{{end}}
|
||
</label>
|
||
|
||
{{if eq .Type "select"}}
|
||
<select id="field-{{.EnvVar}}" name="{{.EnvVar}}" class="form-control"
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
{{range .Options}}
|
||
<option value="{{.Value}}">{{.Label}}</option>
|
||
{{end}}
|
||
</select>
|
||
{{else if eq .Type "password"}}
|
||
<div class="input-with-button">
|
||
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
|
||
class="form-control" value="{{.Default}}"
|
||
placeholder="{{.Placeholder}}"
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
<button type="button" class="btn btn-sm btn-outline"
|
||
onclick="generatePassword('field-{{.EnvVar}}')">🎲 Generálás</button>
|
||
</div>
|
||
{{else if eq .Type "boolean"}}
|
||
<label class="toggle">
|
||
<input type="checkbox" id="field-{{.EnvVar}}" name="{{.EnvVar}}" value="true"
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
<span class="toggle-label">Igen</span>
|
||
</label>
|
||
{{else}}
|
||
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
|
||
class="form-control" value="{{.Default}}"
|
||
placeholder="{{.Placeholder}}"
|
||
{{if .Required}}required{{end}}
|
||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||
{{end}}
|
||
|
||
{{if .Description}}
|
||
<span class="form-hint">{{.Description}}</span>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if not .AlreadyDeployed}}
|
||
<div class="deploy-actions">
|
||
<button type="submit" class="btn btn-primary btn-lg">🚀 Telepítés indítása</button>
|
||
<a href="/stacks" class="btn btn-outline">Mégsem</a>
|
||
</div>
|
||
{{end}}
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
function generatePassword(fieldId) {
|
||
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||
let pass = '';
|
||
const arr = new Uint8Array(16);
|
||
crypto.getRandomValues(arr);
|
||
for (let i = 0; i < 16; i++) {
|
||
pass += chars[arr[i] % chars.length];
|
||
}
|
||
document.getElementById(fieldId).value = pass;
|
||
}
|
||
|
||
document.getElementById('deploy-form').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const btn = e.target.querySelector('[type=submit]');
|
||
const origText = btn.textContent;
|
||
btn.disabled = true;
|
||
btn.textContent = 'Telepítés folyamatban...';
|
||
|
||
const values = {};
|
||
const inputs = e.target.querySelectorAll('input, select');
|
||
inputs.forEach(function(el) {
|
||
if (el.name && !el.disabled) {
|
||
if (el.type === 'checkbox') {
|
||
values[el.name] = el.checked ? 'true' : 'false';
|
||
} else {
|
||
values[el.name] = el.value;
|
||
}
|
||
}
|
||
});
|
||
|
||
try {
|
||
const resp = await fetch('/api/stacks/{{.Stack.Name}}/deploy', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({values: values})
|
||
});
|
||
const data = await resp.json();
|
||
if (!data.ok) {
|
||
alert('Hiba: ' + data.error);
|
||
btn.textContent = origText;
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
alert('Sikeres telepítés! ✓');
|
||
window.location.href = '/stacks';
|
||
} catch (err) {
|
||
alert('Hálózati hiba: ' + err.message);
|
||
btn.textContent = origText;
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{{template "layout_end" .}}
|
||
{{end}}
|
||
`
|
||
|
||
const loginTmpl = `
|
||
{{define "login"}}
|
||
<!DOCTYPE html>
|
||
<html lang="hu">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Bejelentkezés — Felhom</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body class="login-body">
|
||
<div class="login-card">
|
||
<h1 class="logo">☁ Felhom</h1>
|
||
<p class="login-subtitle">{{.CustomerName}}</p>
|
||
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
|
||
<form method="POST" action="/login">
|
||
<div class="form-group">
|
||
<label for="password">Jelszó</label>
|
||
<input type="password" id="password" name="password" required autofocus
|
||
placeholder="Adja meg a jelszavát" class="form-control">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-full">Bejelentkezés</button>
|
||
</form>
|
||
<p class="login-footer">Felhom — Otthoni szerver kezelés<br>
|
||
<a href="https://felhom.eu" target="_blank">felhom.eu</a></p>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
{{end}}
|
||
`
|
||
|
||
const logsTmpl = `
|
||
{{define "logs"}}
|
||
{{template "layout_start" .}}
|
||
<div class="page-header">
|
||
<a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
|
||
<h2>{{.Stack.Meta.DisplayName}} — Naplók</h2>
|
||
</div>
|
||
<div class="logs-container">
|
||
<pre class="logs-output">{{.Logs}}</pre>
|
||
</div>
|
||
<div class="logs-actions">
|
||
<button class="btn btn-outline" onclick="window.location.reload()">🔄 Frissítés</button>
|
||
</div>
|
||
{{template "layout_end" .}}
|
||
{{end}}
|
||
`
|
||
|
||
// CSS is defined in a separate const for readability.
|
||
// Served at /static/style.css
|
||
const cssContent = `
|
||
:root {
|
||
--bg:#f8f9fa; --sidebar-bg:#1a1f36; --sidebar-text:#e2e8f0;
|
||
--card-bg:#fff; --text:#1a202c; --text-muted:#718096; --border:#e2e8f0;
|
||
--green:#38a169; --green-light:#c6f6d5; --red:#e53e3e; --red-light:#fed7d7;
|
||
--yellow:#d69e2e; --yellow-light:#fefcbf; --blue:#3182ce; --blue-light:#bee3f8;
|
||
--gray:#a0aec0; --gray-light:#edf2f7; --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.1);
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
|
||
|
||
.sidebar{width:240px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto}
|
||
.sidebar-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
|
||
.logo{font-size:1.5rem;font-weight:700;color:#fff}
|
||
.customer-name{display:block;font-size:.85rem;color:var(--gray);margin-top:.25rem}
|
||
.nav-links{list-style:none;padding:1rem 0;flex:1}
|
||
.nav-links a{display:block;padding:.75rem 1.5rem;color:var(--sidebar-text);text-decoration:none;font-size:.95rem;transition:background .15s}
|
||
.nav-links a:hover{background:rgba(255,255,255,.08)}
|
||
.nav-links a.active{background:rgba(255,255,255,.12);border-left:3px solid var(--blue)}
|
||
.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
|
||
.version{color:var(--gray)} .logout-link{color:var(--gray);text-decoration:none} .logout-link:hover{color:#fff}
|
||
|
||
.content{margin-left:240px;padding:2rem;flex:1;max-width:1200px}
|
||
.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
|
||
.page-header h2{font-size:1.5rem;font-weight:600}
|
||
.domain-badge{background:var(--blue-light);color:var(--blue);padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:500}
|
||
|
||
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
|
||
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border-left:4px solid var(--gray)}
|
||
.stat-running{border-left-color:var(--green)} .stat-stopped{border-left-color:var(--red)} .stat-total{border-left-color:var(--blue)}
|
||
.stat-value{font-size:2rem;font-weight:700} .stat-label{color:var(--text-muted);font-size:.85rem;margin-top:.25rem}
|
||
|
||
.stack-list{display:flex;flex-direction:column;gap:.5rem}
|
||
.stack-card{background:var(--card-bg);border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;border-left:4px solid var(--gray)}
|
||
.stack-state-green{border-left-color:var(--green)} .stack-state-red{border-left-color:var(--red)} .stack-state-yellow{border-left-color:var(--yellow)} .stack-state-gray{border-left-color:var(--gray)}
|
||
.stack-info{display:flex;align-items:center;gap:.75rem}
|
||
.stack-logo{width:32px;height:32px;border-radius:6px;object-fit:contain;background:#1c2128;padding:4px}
|
||
.stack-logo-lg{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#1c2128;padding:6px}
|
||
.stack-name{font-size:1rem} .stack-desc{display:block;font-size:.8rem;color:var(--text-muted)}
|
||
.stack-actions{display:flex;align-items:center;gap:.5rem} .stack-state-label{font-size:.8rem;color:var(--text-muted);margin-right:.5rem}
|
||
|
||
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1rem}
|
||
.stack-detail-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border-top:4px solid var(--gray)}
|
||
.stack-detail-card.stack-state-green{border-top-color:var(--green)} .stack-detail-card.stack-state-red{border-top-color:var(--red)}
|
||
.stack-detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}
|
||
.stack-title-row{display:flex;align-items:center;gap:.75rem}
|
||
.subdomain-link{font-size:.8rem;color:var(--blue);text-decoration:none} .subdomain-link:hover{text-decoration:underline}
|
||
.stack-state-badge{padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
|
||
.state-green{background:var(--green-light);color:var(--green)} .state-red{background:var(--red-light);color:var(--red)}
|
||
.state-yellow{background:var(--yellow-light);color:var(--yellow)} .state-gray{background:var(--gray-light);color:var(--gray)}
|
||
.state-text-green{color:var(--green)} .state-text-red{color:var(--red)}
|
||
.stack-detail-desc{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem}
|
||
.stack-meta-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
|
||
.meta-badge{background:var(--gray-light);color:var(--text-muted);padding:.15rem .5rem;border-radius:6px;font-size:.75rem}
|
||
.meta-badge-ok{background:var(--green-light);color:var(--green)}
|
||
.container-list{margin:.75rem 0} .container-list h4{font-size:.8rem;color:var(--text-muted);margin-bottom:.4rem}
|
||
.container-row{display:flex;justify-content:space-between;font-size:.8rem;padding:.2rem 0}
|
||
.container-name{font-family:monospace} .container-status{font-size:.75rem}
|
||
.stack-detail-actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
|
||
|
||
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s;text-decoration:none;color:#fff}
|
||
.btn:hover{opacity:.9} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.loading{opacity:.6}
|
||
.btn-sm{padding:.3rem .6rem;font-size:.8rem} .btn-lg{padding:.65rem 1.5rem;font-size:1rem} .btn-full{width:100%;justify-content:center}
|
||
.btn-primary{background:var(--blue)} .btn-success{background:var(--green)} .btn-warning{background:var(--yellow);color:#1a202c} .btn-danger{background:var(--red)}
|
||
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)} .btn-outline:hover{background:var(--gray-light)}
|
||
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:500}
|
||
.badge-protected{background:var(--gray-light);color:var(--text-muted)}
|
||
|
||
/* Deploy page */
|
||
.deploy-container{max-width:700px}
|
||
.deploy-info{display:flex;gap:1rem;align-items:flex-start;background:var(--card-bg);padding:1.25rem;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.5rem}
|
||
.deploy-logo{width:64px;height:64px;border-radius:12px;object-fit:contain;background:#1c2128;padding:8px;flex-shrink:0}
|
||
.deploy-info h3{font-size:1.2rem;margin-bottom:.25rem}
|
||
.deploy-info p{color:var(--text-muted);font-size:.9rem}
|
||
.deploy-form{background:var(--card-bg);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow)}
|
||
.form-section{margin-bottom:1.5rem}
|
||
.form-section h4{font-size:1rem;margin-bottom:.5rem}
|
||
.form-section-desc{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem}
|
||
.form-group{margin-bottom:1rem}
|
||
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem}
|
||
.form-group-auto{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--gray-light);border-radius:6px}
|
||
.form-group-auto label{margin:0}
|
||
.auto-generated-badge{color:var(--green);font-size:.8rem;font-weight:500}
|
||
.form-control{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:#fff}
|
||
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,130,206,.1)}
|
||
.form-control:disabled{background:var(--gray-light);cursor:not-allowed}
|
||
.input-with-button{display:flex;gap:.5rem}
|
||
.input-with-button .form-control{flex:1}
|
||
.form-hint{display:block;font-size:.8rem;color:var(--text-muted);margin-top:.25rem}
|
||
.required{color:var(--red)} .locked-hint{font-size:.75rem;color:var(--text-muted);font-weight:400;margin-left:.5rem}
|
||
.deploy-actions{display:flex;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
|
||
|
||
.alert{padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.85rem}
|
||
.alert-error{background:var(--red-light);color:var(--red)} .alert-info{background:var(--blue-light);color:var(--blue)}
|
||
|
||
/* Logs */
|
||
.logs-container{background:#1a1f36;border-radius:var(--radius);padding:1rem;overflow-x:auto;margin-bottom:1rem}
|
||
.logs-output{color:#e2e8f0;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.8rem;line-height:1.5;white-space:pre-wrap;word-break:break-all}
|
||
.logs-actions{display:flex;gap:.5rem}
|
||
|
||
.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}
|
||
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1a1f36,#2d3748)}
|
||
.login-card{background:var(--card-bg);padding:2.5rem;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.15);width:100%;max-width:380px;text-align:center}
|
||
.login-card .logo{color:var(--text);margin-bottom:.25rem} .login-subtitle{color:var(--text-muted);margin-bottom:1.5rem}
|
||
.login-footer{margin-top:1.5rem;font-size:.75rem;color:var(--text-muted)} .login-footer a{color:var(--blue);text-decoration:none}
|
||
|
||
@media(max-width:768px){
|
||
.sidebar{width:100%;height:auto;position:relative}
|
||
.nav-links{display:flex;padding:0;overflow-x:auto} .nav-links a{padding:.5rem 1rem;white-space:nowrap}
|
||
.content{margin-left:0;padding:1rem} body{flex-direction:column}
|
||
.stack-card{flex-direction:column;align-items:flex-start;gap:.75rem} .stack-actions{width:100%;justify-content:flex-end}
|
||
.stack-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(3,1fr)}
|
||
.deploy-info{flex-direction:column}
|
||
}
|
||
`
|