admin/deploy-felhom-compose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added some info

Browse Source
This commit is contained in:
authentik Default Admin
2026-02-14 11:15:53 +01:00
parent 1644af616e
commit 4a19fda795
2 changed files with 605 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
controller/internal/web/templates.go
+603 -126
View File
@@ -19,12 +19,12 @@ const layoutTmpl = `
<body>
<nav class="sidebar">
<div class="sidebar-header">
<h1 class="logo">☁ Felhom</h1>
<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>
<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>
@@ -111,9 +111,9 @@ const dashboardTmpl = `
<span class="stack-state-label">{{stateLabel .State}}</span>
{{if .Protected}}
<span class="badge badge-protected">🔒 Védett</span>
<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>
<a href="/stacks/{{.Name}}/deploy" class="btn btn-sm btn-primary">Telepítés</a>
{{else}}
{{if isOperational .State}}
<button class="btn btn-sm btn-warning" onclick="stackAction('{{.Name}}', 'restart')">↻</button>
@@ -121,7 +121,7 @@ const dashboardTmpl = `
{{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>
<a href="/stacks/{{.Name}}/logs" class="btn btn-sm btn-outline">Napló</a>
{{end}}
</div>
</div>
@@ -169,9 +169,9 @@ const stacksTmpl = `
{{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}}
{{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}}
@@ -187,20 +187,20 @@ const stacksTmpl = `
<div class="stack-detail-actions">
{{if .Protected}}
<span class="badge badge-protected">🔒 Védett rendszerkomponens</span>
<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}}" class="btn btn-outline">ℹ️ Részletek</a>
<a href="/stacks/{{.Name}}/deploy" class="btn btn-primary">Telepítés</a>
<a href="{{appPageURL .Meta.Slug}}" class="btn btn-outline">Részletek</a>
{{else}}
{{if isOperational .State}}
<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-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}}" class="btn btn-outline">ℹ️ Részletek</a>
<a href="/stacks/{{.Name}}/logs" class="btn btn-outline">Naplók</a>
<a href="{{appPageURL .Meta.Slug}}" class="btn btn-outline">Részletek</a>
{{end}}
</div>
</div>
@@ -227,12 +227,12 @@ const deployTmpl = `
<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}}
{{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
Részletes leírás, képernyőképek
</a>
</div>
</div>
@@ -246,7 +246,7 @@ const deployTmpl = `
<form id="deploy-form" class="deploy-form">
{{if .AutoFields}}
<div class="form-section">
<h4>🔒 Automatikusan generált értékek</h4>
<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">
@@ -259,13 +259,13 @@ const deployTmpl = `
{{if .UserFields}}
<div class="form-section">
<h4>⚙️ Beállítások</h4>
<h4>Beállítások</h4>
{{range .UserFields}}
<div class="form-group">
<label for="field-{{.EnvVar}}">
{{.Label}}
{{if or .Required (eq .Type "password")}}<span class="required">*</span>{{end}}
{{if .LockedAfterDeploy}}<span class="locked-hint">🔒 telepítés után nem módosítható</span>{{end}}
{{if .LockedAfterDeploy}}<span class="locked-hint">telepítés után nem módosítható</span>{{end}}
</label>
{{if eq .Type "select"}}
@@ -284,7 +284,7 @@ const deployTmpl = `
required
{{if $.AlreadyDeployed}}disabled{{end}}>
<button type="button" class="btn btn-sm btn-outline"
onclick="generatePassword('field-{{.EnvVar}}')">🎲 Generálás</button>
onclick="generatePassword('field-{{.EnvVar}}')">Generálás</button>
</div>
{{else if eq .Type "boolean"}}
<label class="toggle">
@@ -310,7 +310,7 @@ const deployTmpl = `
{{if not .AlreadyDeployed}}
<div class="deploy-actions">
<button type="submit" class="btn btn-primary btn-lg">🚀 Telepítés indítása</button>
<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}}
@@ -384,7 +384,7 @@ document.getElementById('deploy-form').addEventListener('submit', async function
btn.disabled = false;
return;
}
alert('Sikeres telepítés! ✔');
alert('Sikeres telepítés!');
window.location.href = '/stacks';
} catch (err) {
alert('Hálózati hiba: ' + err.message);
@@ -410,7 +410,7 @@ const loginTmpl = `
</head>
<body class="login-body">
<div class="login-card">
<h1 class="logo">☁ Felhom</h1>
<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">
@@ -440,7 +440,7 @@ const logsTmpl = `
<pre class="logs-output">{{.Logs}}</pre>
</div>
<div class="logs-actions">
<button class="btn btn-outline" onclick="window.location.reload()">🔄 Frissítés</button>
<button class="btn btn-outline" onclick="window.location.reload()">Frissítés</button>
</div>
{{template "layout_end" .}}
{{end}}
@@ -449,118 +449,595 @@ const logsTmpl = `
// CSS is defined in a separate const for readability.
// Served at /static/style.css
const cssContent = `
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
: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;
--orange:#dd6b20; --orange-light:#feebc8;
--gray:#a0aec0; --gray-light:#edf2f7; --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.1);
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-card: #1c2128;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--accent-blue: #0088cc;
--accent-light: #00aaff;
--accent-glow: rgba(0, 136, 204, 0.3);
--border-color: #30363d;
--green: #238636;
--green-bg: rgba(35, 134, 54, 0.15);
--red: #da3633;
--red-bg: rgba(218, 54, 51, 0.15);
--yellow: #d29922;
--yellow-bg: rgba(210, 153, 34, 0.15);
--orange: #db6d28;
--orange-bg: rgba(219, 109, 40, 0.15);
--gray: #6e7681;
--gray-bg: rgba(110, 118, 129, 0.15);
--radius: 12px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
*{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}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
.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}
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
display: flex;
min-height: 100vh;
line-height: 1.6;
}
.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}
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: -1;
}
.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-orange{border-left-color:var(--orange)} .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}
/* Sidebar */
.sidebar {
width: 240px;
background: var(--bg-secondary);
color: var(--text-primary);
display: flex;
flex-direction: column;
position: fixed;
height: 100vh;
overflow-y: auto;
border-right: 1px solid var(--border-color);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.customer-name {
display: block;
font-size: .85rem;
color: var(--text-secondary);
margin-top: .25rem;
}
.nav-links {
list-style: none;
padding: 1rem 0;
flex: 1;
}
.nav-links a {
display: block;
padding: .75rem 1.5rem;
color: var(--text-secondary);
text-decoration: none;
font-size: .95rem;
font-weight: 500;
transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover {
color: var(--accent-light);
background: rgba(0, 136, 204, 0.08);
}
.nav-links a.active {
color: var(--accent-light);
background: rgba(0, 136, 204, 0.12);
border-left: 3px solid var(--accent-blue);
}
.sidebar-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
font-size: .8rem;
}
.version { color: var(--text-muted); }
.logout-link { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.logout-link:hover { color: var(--accent-light); }
.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-card.stack-state-orange{border-top-color:var(--orange)} .stack-detail-card.stack-state-yellow{border-top-color:var(--yellow)}
.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-orange{background:var(--orange-light);color:var(--orange)} .state-gray{background:var(--gray-light);color:var(--gray)}
.state-text-green{color:var(--green)} .state-text-red{color:var(--red)} .state-text-orange{color:var(--orange)} .state-text-yellow{color:var(--yellow)}
.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}
/* Main content */
.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;
color: var(--text-primary);
}
.domain-badge {
background: rgba(0, 136, 204, 0.15);
color: var(--accent-light);
padding: .25rem .75rem;
border-radius: 999px;
font-size: .8rem;
font-weight: 500;
}
.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)}
h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
/* Stats grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--bg-card);
border-radius: var(--radius);
padding: 1.25rem;
border: 1px solid var(--border-color);
border-left: 4px solid var(--gray);
transition: border-color 0.3s ease;
}
.stat-running { border-left-color: var(--green); }
.stat-stopped { border-left-color: var(--red); }
.stat-total { border-left-color: var(--accent-blue); }
.stat-value {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-running .stat-value { background: var(--green); -webkit-background-clip: text; background-clip: text; }
.stat-stopped .stat-value { background: var(--red); -webkit-background-clip: text; background-clip: text; }
.stat-label {
color: var(--text-secondary);
font-size: .85rem;
margin-top: .25rem;
}
/* Stack list (dashboard) */
.stack-list {
display: flex;
flex-direction: column;
gap: .5rem;
}
.stack-card {
background: var(--bg-card);
border-radius: var(--radius);
padding: 1rem 1.25rem;
border: 1px solid var(--border-color);
border-left: 4px solid var(--gray);
display: flex;
justify-content: space-between;
align-items: center;
transition: border-color 0.3s ease, transform 0.2s ease;
}
.stack-card:hover {
border-color: var(--accent-blue);
}
.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-orange { border-left-color: var(--orange); }
.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: var(--bg-secondary);
padding: 4px;
}
.stack-logo-lg {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: contain;
background: var(--bg-secondary);
padding: 6px;
}
.stack-name { font-size: 1rem; font-weight: 500; }
.stack-desc { display: block; font-size: .8rem; color: var(--text-secondary); }
.stack-actions {
display: flex;
align-items: center;
gap: .5rem;
}
.stack-state-label {
font-size: .8rem;
color: var(--text-secondary);
margin-right: .5rem;
}
/* Stack detail grid (applications page) */
.stack-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1rem;
}
.stack-detail-card {
background: var(--bg-card);
border-radius: var(--radius);
padding: 1.25rem;
border: 1px solid var(--border-color);
border-top: 4px solid var(--gray);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.stack-detail-card:hover {
border-color: var(--accent-blue);
transform: translateY(-2px);
}
.stack-detail-card.stack-state-green { border-top-color: var(--green); }
.stack-detail-card.stack-state-red { border-top-color: var(--red); }
.stack-detail-card.stack-state-orange { border-top-color: var(--orange); }
.stack-detail-card.stack-state-yellow { border-top-color: var(--yellow); }
.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(--accent-light);
text-decoration: none;
transition: color 0.2s ease;
}
.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-bg); color: var(--green); }
.state-red { background: var(--red-bg); color: var(--red); }
.state-yellow { background: var(--yellow-bg); color: var(--yellow); }
.state-orange { background: var(--orange-bg); color: var(--orange); }
.state-gray { background: var(--gray-bg); color: var(--gray); }
.state-text-green { color: var(--green); }
.state-text-red { color: var(--red); }
.state-text-orange { color: var(--orange); }
.state-text-yellow { color: var(--yellow); }
.stack-detail-desc {
color: var(--text-secondary);
font-size: .85rem;
margin-bottom: .75rem;
}
.stack-meta-badges {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: .5rem 0;
}
.meta-badge {
background: rgba(0, 136, 204, 0.1);
color: var(--text-secondary);
padding: .15rem .5rem;
border-radius: 6px;
font-size: .75rem;
}
.meta-badge-ok {
background: var(--green-bg);
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: .3rem 0;
border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}
.container-row:last-child { border-bottom: none; }
.container-name { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); }
.container-status { font-size: .75rem; }
.stack-detail-actions {
display: flex;
gap: .5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .5rem 1rem;
border: none;
border-radius: 8px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: #fff;
font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.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: linear-gradient(135deg, var(--accent-blue), var(--accent-light));
box-shadow: 0 4px 12px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow); }
.btn-success { background: var(--green); }
.btn-success:hover { box-shadow: 0 4px 12px rgba(35, 134, 54, 0.3); }
.btn-warning { background: var(--yellow); color: #0d1117; }
.btn-danger { background: var(--red); }
.btn-danger:hover { box-shadow: 0 4px 12px rgba(218, 54, 51, 0.3); }
.btn-outline {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.btn-outline:hover {
border-color: var(--accent-blue);
color: var(--accent-light);
background: rgba(0, 136, 204, 0.08);
}
.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-bg);
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)}
.deploy-container { max-width: 700px; }
.deploy-info {
display: flex;
gap: 1rem;
align-items: flex-start;
background: var(--bg-card);
padding: 1.25rem;
border-radius: var(--radius);
border: 1px solid var(--border-color);
margin-bottom: 1.5rem;
}
.deploy-logo {
width: 64px;
height: 64px;
border-radius: 12px;
object-fit: contain;
background: var(--bg-secondary);
padding: 8px;
flex-shrink: 0;
}
.deploy-info h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.deploy-info p { color: var(--text-secondary); font-size: .9rem; }
.deploy-form {
background: var(--bg-card);
padding: 1.5rem;
border-radius: var(--radius);
border: 1px solid var(--border-color);
}
.form-section { margin-bottom: 1.5rem; }
.form-section h4 { font-size: 1rem; margin-bottom: .5rem; color: var(--text-primary); }
.form-section-desc { color: var(--text-secondary); 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; color: var(--text-primary); }
.form-group-auto {
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem .75rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.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-color);
border-radius: 8px;
font-size: .9rem;
background: var(--bg-secondary);
color: var(--text-primary);
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-control:disabled {
background: var(--bg-primary);
color: var(--text-muted);
cursor: not-allowed;
}
select.form-control { appearance: auto; }
select.form-control option { background: var(--bg-secondary); color: var(--text-primary); }
.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-color);
}
.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)}
/* Toggle switch */
.toggle { cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.toggle input[type="checkbox"] { accent-color: var(--accent-blue); }
.toggle-label { font-size: .9rem; color: var(--text-secondary); }
/* Alerts */
.alert {
padding: .75rem 1rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: .85rem;
border: 1px solid;
}
.alert-error {
background: var(--red-bg);
color: var(--red);
border-color: rgba(218, 54, 51, 0.3);
}
.alert-info {
background: rgba(0, 136, 204, 0.1);
color: var(--accent-light);
border-color: rgba(0, 136, 204, 0.3);
}
/* 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}
.logs-container {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.logs-output {
color: var(--text-primary);
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}
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
@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}
/* Login page */
.login-body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bg-primary);
}
.login-body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: 0;
}
.login-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid var(--border-color);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
width: 100%;
max-width: 380px;
text-align: center;
position: relative;
z-index: 1;
}
.login-card .logo {
margin-bottom: .25rem;
font-size: 1.8rem;
}
.login-subtitle {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.login-footer {
margin-top: 1.5rem;
font-size: .75rem;
color: var(--text-muted);
}
.login-footer a {
color: var(--accent-light);
text-decoration: none;
transition: color 0.2s ease;
}
.login-footer a:hover { color: var(--accent-blue); }
/* Responsive */
@media(max-width: 768px) {
.sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border-color); }
.nav-links { display: flex; padding: 0; overflow-x: auto; }
.nav-links a { padding: .5rem 1rem; white-space: nowrap; }
.nav-links a.active { border-left: none; border-bottom: 2px solid var(--accent-blue); }
.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; }
}
`