mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-28 07:41:27 +00:00
feat: public template catalog + Vercel git integration
Backend: service_templates.is_public lets owners publish user templates to the anonymous catalog (GET /api/v1/templates), mirroring Railway's marketplace publish flow. Migration, sqlc queries, visibility rules, and openapi.yaml updated; types regenerated. App: template editor gains a "List in the public catalog" checkbox; Public badge on catalog cards and detail view. Site: new templates.html catalog page - search, category filters, Official vs Community badges, detail modal with variables and copyable import JSON. Fetches the live catalog from a reachable instance (?api= or localStorage override) and falls back to templates.json, generated from SeedTemplates via cmd/dumptemplates. Shared styles extracted to style.css. Vercel: project connected to GitHub repo with rootDirectory=site; .vercelignore limits CLI uploads to site/ so `vercel deploy --prod` from repo root matches git builds. Authored By: TDvorak <[email protected]> Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Tomas DvorakandDevin committed
1 parent
2b38406a63
commit
117b469fae
18 files changed
+1589
-492
No files matched your search
@@ -0,0 +1,2 @@
|
||||
.vercel
|
||||
.env*
|
||||
+3
-470
@@ -14,474 +14,7 @@
|
||||
<meta name="theme-color" content="#0c0d0f">
|
||||
<link rel="icon" type="image/svg+xml" href="containr.svg">
|
||||
<script>document.documentElement.classList.add('js');</script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('fonts/inter-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('fonts/inter-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400 800;
|
||||
font-display: swap;
|
||||
src: url('fonts/jbmono-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400 800;
|
||||
font-display: swap;
|
||||
src: url('fonts/jbmono-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-void: #0c0d0f;
|
||||
--bg-base: #0e0f12;
|
||||
--surface-card: #131518;
|
||||
--surface-card-hover: #1a1d22;
|
||||
--surface-muted: #1a1d22;
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--border-default: rgba(255, 255, 255, 0.1);
|
||||
--border-strong: rgba(255, 255, 255, 0.18);
|
||||
--text-primary: #ecedf0;
|
||||
--text-secondary: #8b919e;
|
||||
--text-tertiary: #575d68;
|
||||
--accent: #b4e34a;
|
||||
--accent-dim: rgba(180, 227, 74, 0.12);
|
||||
--accent-on: #131507;
|
||||
--mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
||||
--sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--radius: 14px;
|
||||
--radius-sm: 9px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--bg-void);
|
||||
color: var(--text-secondary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.5;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: radial-gradient(1000px 480px at 50% -8%, rgba(180, 227, 74, 0.05), transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
::selection { background: rgba(180, 227, 74, 0.25); color: var(--text-primary); }
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
img { display: block; max-width: 100%; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* ---------- nav ---------- */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: rgba(14, 15, 18, 0.82);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
.nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
gap: 28px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.brand img { width: 26px; height: 26px; border-radius: 7px; }
|
||||
.brand em { font-style: normal; color: var(--accent); }
|
||||
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text-primary); background: var(--surface-muted); }
|
||||
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||||
.gh-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.gh-link:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, border-color 0.15s, background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: var(--accent-on); }
|
||||
.btn-primary:hover { transform: translateY(-1px); }
|
||||
.btn-ghost { border-color: var(--border-default); color: var(--text-secondary); }
|
||||
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero { padding: 84px 0 0; }
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-card);
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.pill svg { color: var(--accent); }
|
||||
.hero h1 {
|
||||
margin-top: 22px;
|
||||
font-size: clamp(34px, 5.4vw, 58px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.06;
|
||||
color: var(--text-primary);
|
||||
max-width: 22ch;
|
||||
}
|
||||
.hero h1 em { font-style: normal; color: var(--accent); }
|
||||
.hero .sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.65;
|
||||
max-width: 46ch;
|
||||
}
|
||||
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
|
||||
.hero-cta .btn { font-size: 14px; padding: 11px 22px; }
|
||||
|
||||
.shot-frame {
|
||||
margin-top: 56px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.shot-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.shot-bar .addr {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
padding: 3px 0;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
|
||||
|
||||
/* ---------- install ---------- */
|
||||
.install { padding: 72px 0 0; }
|
||||
.install-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-base);
|
||||
padding: 26px 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.install-copy h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||
.install-copy p { font-size: 13px; margin-top: 4px; }
|
||||
.cmd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 12.5px;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cmd code {
|
||||
padding: 11px 14px;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.cmd code::-webkit-scrollbar { display: none; }
|
||||
.cmd code::before { content: '$ '; color: var(--accent); }
|
||||
.copy-btn {
|
||||
border: none;
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
padding: 11px 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.copy-btn:hover { color: var(--accent); background: var(--surface-muted); }
|
||||
|
||||
/* ---------- sections ---------- */
|
||||
section { padding: 96px 0 0; }
|
||||
.sec-head { margin-bottom: 40px; }
|
||||
.sec-head h2 {
|
||||
font-size: clamp(24px, 3vw, 32px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--text-primary);
|
||||
max-width: 22ch;
|
||||
}
|
||||
.sec-head p { margin-top: 10px; font-size: 14.5px; max-width: 56ch; }
|
||||
|
||||
/* ---------- bento ---------- */
|
||||
.bento {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.cell {
|
||||
grid-column: span 2;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-card);
|
||||
padding: 22px;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell:hover { border-color: var(--border-default); transform: translateY(-2px); }
|
||||
.cell.wide { grid-column: span 4; display: flex; gap: 26px; align-items: stretch; }
|
||||
.cell h3 { font-size: 14.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||
.cell p { font-size: 12.5px; line-height: 1.6; margin-top: 8px; color: var(--text-tertiary); }
|
||||
.cell .icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.cell.wide .icon { margin-bottom: 12px; }
|
||||
.cell-media {
|
||||
flex: 0 0 46%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-subtle);
|
||||
align-self: center;
|
||||
}
|
||||
.cell-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
|
||||
.cell.tinted { background: linear-gradient(160deg, rgba(180, 227, 74, 0.09), rgba(180, 227, 74, 0.02) 55%), var(--surface-card); }
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
|
||||
.chips span {
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
.snippet {
|
||||
margin-top: 14px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-secondary);
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.snippet b { color: var(--accent); font-weight: 500; }
|
||||
|
||||
/* ---------- screenshots ---------- */
|
||||
.shot-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
|
||||
.shot-tab {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-tertiary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 999px;
|
||||
padding: 7px 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.shot-tab:hover { color: var(--text-secondary); border-color: var(--border-default); }
|
||||
.shot-tab.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
|
||||
.gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-default); }
|
||||
.gallery .cap { font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
|
||||
|
||||
/* ---------- templates marquee ---------- */
|
||||
.marquee {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-base);
|
||||
padding: 18px 0;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: max-content;
|
||||
animation: scroll 46s linear infinite;
|
||||
}
|
||||
@keyframes scroll { to { transform: translateX(-50%); } }
|
||||
.tpl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-card);
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tpl img { width: 15px; height: 15px; }
|
||||
|
||||
/* ---------- access ---------- */
|
||||
.access {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.access > div { padding: 28px 28px 4px 0; }
|
||||
.access > div + div { padding-left: 28px; border-left: 1px solid var(--border-subtle); }
|
||||
.access h3 {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
}
|
||||
.access ul { list-style: none; margin-top: 14px; }
|
||||
.access li { font-size: 13px; padding: 5px 0; color: var(--text-secondary); }
|
||||
.access li::before { content: '- '; color: var(--text-tertiary); }
|
||||
|
||||
/* ---------- cta ---------- */
|
||||
.cta { text-align: center; padding: 110px 0; }
|
||||
.cta h2 {
|
||||
font-size: clamp(30px, 4.5vw, 46px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.cta p { margin: 14px auto 0; font-size: 14.5px; max-width: 46ch; }
|
||||
.cta .hero-cta { justify-content: center; }
|
||||
|
||||
/* ---------- footer ---------- */
|
||||
footer { border-top: 1px solid var(--border-subtle); }
|
||||
.foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 26px 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-tertiary);
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
.foot .l { display: flex; align-items: center; gap: 8px; }
|
||||
.foot img { width: 18px; height: 18px; border-radius: 5px; }
|
||||
.foot nav { display: flex; gap: 20px; position: static; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
||||
.foot nav a:hover { color: var(--text-primary); }
|
||||
|
||||
/* ---------- reveal (JS-gated: content stays visible without JS) ---------- */
|
||||
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
|
||||
.js .reveal.in { opacity: 1; transform: none; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
.marquee-track { animation: none; }
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
.btn-primary:hover, .cell:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width: 860px) {
|
||||
.nav-links { display: none; }
|
||||
.bento { grid-template-columns: repeat(2, 1fr); }
|
||||
.cell, .cell.wide { grid-column: span 2; }
|
||||
.cell.wide { flex-direction: column; }
|
||||
.cell-media { flex: none; }
|
||||
.access { grid-template-columns: 1fr; }
|
||||
.access > div { padding: 22px 0; }
|
||||
.access > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--border-subtle); }
|
||||
section { padding: 72px 0 0; }
|
||||
.hero { padding-top: 56px; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.bento { grid-template-columns: 1fr; }
|
||||
.cell, .cell.wide { grid-column: span 1; }
|
||||
.install-inner { padding: 20px; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -494,7 +27,7 @@
|
||||
<div class="nav-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#product">Product</a>
|
||||
<a href="#templates">Templates</a>
|
||||
<a href="templates.html">Templates</a>
|
||||
<a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
@@ -629,7 +162,7 @@
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<h2>A catalog worth browsing</h2>
|
||||
<p>Thirty official templates plus your own. One click from catalog to running service.</p>
|
||||
<p>Thirty official templates plus community presets. <a href="templates.html" style="color: var(--accent);">Browse the full catalog</a> or publish your own.</p>
|
||||
</div>
|
||||
<div class="marquee reveal" aria-label="Template catalog">
|
||||
<div class="marquee-track" id="marquee-track">
|
||||
|
||||
+466
@@ -0,0 +1,466 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('fonts/inter-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url('fonts/inter-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400 800;
|
||||
font-display: swap;
|
||||
src: url('fonts/jbmono-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400 800;
|
||||
font-display: swap;
|
||||
src: url('fonts/jbmono-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-void: #0c0d0f;
|
||||
--bg-base: #0e0f12;
|
||||
--surface-card: #131518;
|
||||
--surface-card-hover: #1a1d22;
|
||||
--surface-muted: #1a1d22;
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--border-default: rgba(255, 255, 255, 0.1);
|
||||
--border-strong: rgba(255, 255, 255, 0.18);
|
||||
--text-primary: #ecedf0;
|
||||
--text-secondary: #8b919e;
|
||||
--text-tertiary: #575d68;
|
||||
--accent: #b4e34a;
|
||||
--accent-dim: rgba(180, 227, 74, 0.12);
|
||||
--accent-on: #131507;
|
||||
--mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
||||
--sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--radius: 14px;
|
||||
--radius-sm: 9px;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--bg-void);
|
||||
color: var(--text-secondary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.5;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: radial-gradient(1000px 480px at 50% -8%, rgba(180, 227, 74, 0.05), transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
::selection { background: rgba(180, 227, 74, 0.25); color: var(--text-primary); }
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
img { display: block; max-width: 100%; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* ---------- nav ---------- */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: rgba(14, 15, 18, 0.82);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
.nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
gap: 28px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.brand img { width: 26px; height: 26px; border-radius: 7px; }
|
||||
.brand em { font-style: normal; color: var(--accent); }
|
||||
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text-primary); background: var(--surface-muted); }
|
||||
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||||
.gh-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.gh-link:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, border-color 0.15s, background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: var(--accent-on); }
|
||||
.btn-primary:hover { transform: translateY(-1px); }
|
||||
.btn-ghost { border-color: var(--border-default); color: var(--text-secondary); }
|
||||
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero { padding: 84px 0 0; }
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-card);
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.pill svg { color: var(--accent); }
|
||||
.hero h1 {
|
||||
margin-top: 22px;
|
||||
font-size: clamp(34px, 5.4vw, 58px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.06;
|
||||
color: var(--text-primary);
|
||||
max-width: 22ch;
|
||||
}
|
||||
.hero h1 em { font-style: normal; color: var(--accent); }
|
||||
.hero .sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.65;
|
||||
max-width: 46ch;
|
||||
}
|
||||
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
|
||||
.hero-cta .btn { font-size: 14px; padding: 11px 22px; }
|
||||
|
||||
.shot-frame {
|
||||
margin-top: 56px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-card);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.shot-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.shot-bar .addr {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
padding: 3px 0;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
|
||||
|
||||
/* ---------- install ---------- */
|
||||
.install { padding: 72px 0 0; }
|
||||
.install-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-base);
|
||||
padding: 26px 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.install-copy h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||
.install-copy p { font-size: 13px; margin-top: 4px; }
|
||||
.cmd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 12.5px;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cmd code {
|
||||
padding: 11px 14px;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.cmd code::-webkit-scrollbar { display: none; }
|
||||
.cmd code::before { content: '$ '; color: var(--accent); }
|
||||
.copy-btn {
|
||||
border: none;
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
padding: 11px 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.copy-btn:hover { color: var(--accent); background: var(--surface-muted); }
|
||||
|
||||
/* ---------- sections ---------- */
|
||||
section { padding: 96px 0 0; }
|
||||
.sec-head { margin-bottom: 40px; }
|
||||
.sec-head h2 {
|
||||
font-size: clamp(24px, 3vw, 32px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--text-primary);
|
||||
max-width: 22ch;
|
||||
}
|
||||
.sec-head p { margin-top: 10px; font-size: 14.5px; max-width: 56ch; }
|
||||
|
||||
/* ---------- bento ---------- */
|
||||
.bento {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.cell {
|
||||
grid-column: span 2;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-card);
|
||||
padding: 22px;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell:hover { border-color: var(--border-default); transform: translateY(-2px); }
|
||||
.cell.wide { grid-column: span 4; display: flex; gap: 26px; align-items: stretch; }
|
||||
.cell h3 { font-size: 14.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||
.cell p { font-size: 12.5px; line-height: 1.6; margin-top: 8px; color: var(--text-tertiary); }
|
||||
.cell .icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.cell.wide .icon { margin-bottom: 12px; }
|
||||
.cell-media {
|
||||
flex: 0 0 46%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-subtle);
|
||||
align-self: center;
|
||||
}
|
||||
.cell-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
|
||||
.cell.tinted { background: linear-gradient(160deg, rgba(180, 227, 74, 0.09), rgba(180, 227, 74, 0.02) 55%), var(--surface-card); }
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
|
||||
.chips span {
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 6px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
.snippet {
|
||||
margin-top: 14px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-secondary);
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.snippet b { color: var(--accent); font-weight: 500; }
|
||||
|
||||
/* ---------- screenshots ---------- */
|
||||
.shot-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
|
||||
.shot-tab {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-tertiary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 999px;
|
||||
padding: 7px 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.shot-tab:hover { color: var(--text-secondary); border-color: var(--border-default); }
|
||||
.shot-tab.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
|
||||
.gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-default); }
|
||||
.gallery .cap { font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
|
||||
|
||||
/* ---------- templates marquee ---------- */
|
||||
.marquee {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-base);
|
||||
padding: 18px 0;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: max-content;
|
||||
animation: scroll 46s linear infinite;
|
||||
}
|
||||
@keyframes scroll { to { transform: translateX(-50%); } }
|
||||
.tpl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--surface-card);
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tpl img { width: 15px; height: 15px; }
|
||||
|
||||
/* ---------- access ---------- */
|
||||
.access {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.access > div { padding: 28px 28px 4px 0; }
|
||||
.access > div + div { padding-left: 28px; border-left: 1px solid var(--border-subtle); }
|
||||
.access h3 {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
}
|
||||
.access ul { list-style: none; margin-top: 14px; }
|
||||
.access li { font-size: 13px; padding: 5px 0; color: var(--text-secondary); }
|
||||
.access li::before { content: '- '; color: var(--text-tertiary); }
|
||||
|
||||
/* ---------- cta ---------- */
|
||||
.cta { text-align: center; padding: 110px 0; }
|
||||
.cta h2 {
|
||||
font-size: clamp(30px, 4.5vw, 46px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.cta p { margin: 14px auto 0; font-size: 14.5px; max-width: 46ch; }
|
||||
.cta .hero-cta { justify-content: center; }
|
||||
|
||||
/* ---------- footer ---------- */
|
||||
footer { border-top: 1px solid var(--border-subtle); }
|
||||
.foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 26px 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-tertiary);
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
.foot .l { display: flex; align-items: center; gap: 8px; }
|
||||
.foot img { width: 18px; height: 18px; border-radius: 5px; }
|
||||
.foot nav { display: flex; gap: 20px; position: static; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
|
||||
.foot nav a:hover { color: var(--text-primary); }
|
||||
|
||||
/* ---------- reveal (JS-gated: content stays visible without JS) ---------- */
|
||||
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
|
||||
.js .reveal.in { opacity: 1; transform: none; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
.marquee-track { animation: none; }
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
.btn-primary:hover, .cell:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width: 860px) {
|
||||
.nav-links { display: none; }
|
||||
.bento { grid-template-columns: repeat(2, 1fr); }
|
||||
.cell, .cell.wide { grid-column: span 2; }
|
||||
.cell.wide { flex-direction: column; }
|
||||
.cell-media { flex: none; }
|
||||
.access { grid-template-columns: 1fr; }
|
||||
.access > div { padding: 22px 0; }
|
||||
.access > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--border-subtle); }
|
||||
section { padding: 72px 0 0; }
|
||||
.hero { padding-top: 56px; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.bento { grid-template-columns: 1fr; }
|
||||
.cell, .cell.wide { grid-column: span 1; }
|
||||
.install-inner { padding: 20px; }
|
||||
}
|
||||
@@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Template catalog - Containr</title>
|
||||
<meta name="description" content="Deploy-ready service templates for Containr. Official presets plus community templates published from live instances.">
|
||||
<meta name="theme-color" content="#0c0d0f">
|
||||
<link rel="icon" type="image/svg+xml" href="containr.svg">
|
||||
<script>document.documentElement.classList.add('js');</script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
.tpl-hero { padding: 72px 0 0; }
|
||||
.tpl-hero h1 {
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text-primary);
|
||||
max-width: 20ch;
|
||||
}
|
||||
.tpl-hero .sub { margin-top: 12px; font-size: 15px; max-width: 56ch; }
|
||||
.source-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-top: 16px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.source-tag i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
.source-tag.live i { background: var(--accent); }
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 36px 0 22px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
max-width: 340px;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 13px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.search input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-family: var(--sans);
|
||||
}
|
||||
.search input::placeholder { color: var(--text-tertiary); }
|
||||
.cats { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.cat {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 999px;
|
||||
padding: 7px 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.cat:hover { color: var(--text-secondary); border-color: var(--border-default); }
|
||||
.cat.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
.tcard {
|
||||
text-align: left;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-card);
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
font-family: var(--sans);
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tcard:hover { border-color: var(--border-default); transform: translateY(-2px); }
|
||||
.tcard .top { display: flex; align-items: center; gap: 12px; }
|
||||
.tcard .logo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-muted);
|
||||
border: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.tcard .logo img { width: 20px; height: 20px; }
|
||||
.tcard h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||
.badge {
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge-official { background: rgba(242, 201, 76, 0.12); color: #f2c94c; }
|
||||
.badge-community { background: var(--accent-dim); color: var(--accent); }
|
||||
.tcard .desc {
|
||||
margin-top: 12px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-tertiary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
.tcard .meta {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.tcard .meta .catname { color: var(--accent); }
|
||||
.tcard .meta .rt { margin-left: auto; }
|
||||
|
||||
.grid .empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.publish-card {
|
||||
border: 1px dashed var(--border-default);
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.publish-card:hover { border-color: rgba(180, 227, 74, 0.4); }
|
||||
.publish-card .plus {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.publish-card h3 { color: var(--text-secondary); }
|
||||
.publish-card p { font-size: 12px; color: var(--text-tertiary); max-width: 26ch; }
|
||||
|
||||
/* ---------- detail modal ---------- */
|
||||
.modal-back {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
max-height: 86vh;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius);
|
||||
padding: 26px 28px;
|
||||
}
|
||||
.modal .mhead { display: flex; align-items: flex-start; gap: 14px; }
|
||||
.modal .mhead .logo {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
background: var(--surface-muted);
|
||||
border: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
color: var(--accent);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.modal .mhead .logo img { width: 24px; height: 24px; }
|
||||
.modal .mhead h2 { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
|
||||
.modal .mhead .badges { display: flex; gap: 6px; margin-top: 6px; }
|
||||
.modal .x {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.modal .x:hover { color: var(--text-primary); background: var(--surface-muted); }
|
||||
.modal .mdesc { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
|
||||
.msec { margin-top: 22px; }
|
||||
.msec h4 {
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.kv { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.kv span {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 7px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.kv span b { color: var(--text-tertiary); font-weight: 500; }
|
||||
.vars { display: grid; gap: 6px; }
|
||||
.vrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
background: var(--bg-void);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.vrow code { font-family: var(--mono); font-size: 11.5px; color: var(--text-primary); }
|
||||
.vrow .lbl { color: var(--text-tertiary); font-size: 11.5px; }
|
||||
.vrow .tags { margin-left: auto; display: flex; gap: 5px; }
|
||||
.vrow .tags i {
|
||||
font-style: normal;
|
||||
font-family: var(--mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.vrow .tags i.req { color: var(--accent); background: var(--accent-dim); }
|
||||
.vrow .tags i.sec { color: #f2c94c; background: rgba(242, 201, 76, 0.1); }
|
||||
.mfoot { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.hint { margin-top: 16px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.6; }
|
||||
.hint code { font-family: var(--mono); color: var(--text-secondary); }
|
||||
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
.modal { padding: 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="wrap nav-inner">
|
||||
<a href="index.html" class="brand">
|
||||
<img src="containr.svg" alt="Containr logo">
|
||||
contain<em>r</em>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="index.html#features">Features</a>
|
||||
<a href="index.html#product">Product</a>
|
||||
<a href="templates.html">Templates</a>
|
||||
<a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
|
||||
</a>
|
||||
<a class="btn btn-primary" href="index.html#install">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="tpl-hero">
|
||||
<div class="wrap">
|
||||
<h1>Template catalog</h1>
|
||||
<p class="sub">Deploy-ready service presets plus templates published by the community. Pick one, import it into your instance, deploy.</p>
|
||||
<span class="source-tag" id="source-tag"><i></i><span id="source-label">loading catalog</span></span>
|
||||
|
||||
<div class="toolbar">
|
||||
<label class="search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||||
<input id="q" type="search" placeholder="Search templates" autocomplete="off">
|
||||
</label>
|
||||
<div class="cats" id="cats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="wrap">
|
||||
<div class="grid" id="grid"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal-back" id="modal-back" hidden>
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
|
||||
<div class="mhead">
|
||||
<span class="logo" id="m-logo"></span>
|
||||
<div>
|
||||
<h2 id="m-title"></h2>
|
||||
<div class="badges" id="m-badges"></div>
|
||||
</div>
|
||||
<button class="x" id="m-close" aria-label="Close">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mdesc" id="m-desc"></p>
|
||||
<div class="msec" id="m-meta-sec">
|
||||
<h4>Runtime</h4>
|
||||
<div class="kv" id="m-meta"></div>
|
||||
</div>
|
||||
<div class="msec" id="m-vars-sec" hidden>
|
||||
<h4>Variables</h4>
|
||||
<div class="vars" id="m-vars"></div>
|
||||
</div>
|
||||
<div class="mfoot">
|
||||
<button class="btn btn-primary" id="m-copy">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
Copy template JSON
|
||||
</button>
|
||||
<a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Deploy guide</a>
|
||||
</div>
|
||||
<p class="hint">In your instance: <code>Templates → New template → Upload .json</code> (or paste the copied JSON). Deploy it to any project from there.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="wrap foot">
|
||||
<span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
|
||||
<nav>
|
||||
<a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
|
||||
<a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
|
||||
<a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// The catalog comes from a live Containr instance when one is reachable.
|
||||
// Default is the project's public API; override once with ?api=https://host
|
||||
// (persisted in localStorage) or fall back to the bundled snapshot.
|
||||
const DEFAULT_API = 'https://containr-api.up.railway.app';
|
||||
const params = new URLSearchParams(location.search);
|
||||
const paramApi = params.get('api');
|
||||
if (paramApi) localStorage.setItem('containr-api', paramApi.replace(/\/$/, ''));
|
||||
const API_BASE = (localStorage.getItem('containr-api') || DEFAULT_API).replace(/\/$/, '');
|
||||
|
||||
const grid = document.getElementById('grid');
|
||||
const catsEl = document.getElementById('cats');
|
||||
const qEl = document.getElementById('q');
|
||||
const sourceTag = document.getElementById('source-tag');
|
||||
const sourceLabel = document.getElementById('source-label');
|
||||
|
||||
let templates = [];
|
||||
let activeCat = '';
|
||||
let query = '';
|
||||
let current = null;
|
||||
|
||||
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
|
||||
async function loadTemplates() {
|
||||
const ctrl = new AbortController();
|
||||
const timer = setTimeout(() => ctrl.abort(), 4000);
|
||||
try {
|
||||
const res = await fetch(API_BASE + '/api/v1/templates', { signal: ctrl.signal });
|
||||
if (!res.ok) throw new Error('api ' + res.status);
|
||||
const data = await res.json();
|
||||
const list = Array.isArray(data.templates) ? data.templates : [];
|
||||
if (!list.length) throw new Error('empty catalog');
|
||||
setTemplates(list, 'live: ' + API_BASE.replace(/^https?:\/\//, ''), true);
|
||||
} catch {
|
||||
const res = await fetch('templates.json');
|
||||
const data = await res.json();
|
||||
setTemplates(data.templates || [], 'offline snapshot - official catalog', false);
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
|
||||
function setTemplates(list, label, live) {
|
||||
const seen = new Set();
|
||||
templates = list.filter((t) => t && t.id && !seen.has(t.id) && seen.add(t.id));
|
||||
sourceLabel.textContent = label;
|
||||
sourceTag.classList.toggle('live', live);
|
||||
renderCats();
|
||||
render();
|
||||
}
|
||||
|
||||
function runtime(t) {
|
||||
try { return (JSON.parse(t.config || '{}').runtime || ''); } catch { return ''; }
|
||||
}
|
||||
function cfg(t) {
|
||||
try { return JSON.parse(t.config || '{}'); } catch { return {}; }
|
||||
}
|
||||
function vars(t) {
|
||||
try { const v = JSON.parse(t.variables || '[]'); return Array.isArray(v) ? v : []; } catch { return []; }
|
||||
}
|
||||
|
||||
const CATS = [['', 'All'], ['web', 'Web'], ['frontend', 'Frontend'], ['database', 'Databases'], ['app', 'Apps'], ['worker', 'Workers'], ['cron', 'Cron'], ['custom', 'Custom']];
|
||||
|
||||
function renderCats() {
|
||||
const present = new Set(templates.map((t) => (t.category || 'custom').toLowerCase()));
|
||||
catsEl.innerHTML = CATS.filter(([k]) => k === '' || present.has(k))
|
||||
.map(([k, label]) => `<button class="cat${k === activeCat ? ' on' : ''}" data-cat="${k}">${label}</button>`)
|
||||
.join('');
|
||||
catsEl.querySelectorAll('.cat').forEach((b) =>
|
||||
b.addEventListener('click', () => { activeCat = b.dataset.cat; renderCats(); render(); })
|
||||
);
|
||||
}
|
||||
|
||||
function logoHtml(t, size) {
|
||||
const letter = esc((t.name || '?').trim().charAt(0).toUpperCase());
|
||||
if (t.logo) {
|
||||
return `<img src="${esc(t.logo)}" alt="" loading="lazy" onerror="this.outerHTML='${letter}'">`;
|
||||
}
|
||||
return letter;
|
||||
}
|
||||
|
||||
function badge(t) {
|
||||
if (t.is_official) return '<span class="badge badge-official">Official</span>';
|
||||
return '<span class="badge badge-community">Community</span>';
|
||||
}
|
||||
|
||||
function filtered() {
|
||||
const q = query.toLowerCase();
|
||||
return templates.filter((t) => {
|
||||
if (activeCat && (t.category || '').toLowerCase() !== activeCat) return false;
|
||||
if (!q) return true;
|
||||
return (t.name + ' ' + (t.description || '') + ' ' + (t.category || '')).toLowerCase().includes(q);
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
const list = filtered();
|
||||
let html = list.map((t) => `
|
||||
<button class="tcard" data-id="${esc(t.id)}">
|
||||
<div class="top">
|
||||
<span class="logo">${logoHtml(t)}</span>
|
||||
<h3>${esc(t.name)}</h3>
|
||||
${badge(t)}
|
||||
</div>
|
||||
<p class="desc">${esc(t.description || 'No description.')}</p>
|
||||
<div class="meta"><span class="catname">${esc(t.category || 'custom')}</span><span class="rt">${esc(runtime(t))}</span></div>
|
||||
</button>`).join('');
|
||||
|
||||
html += `
|
||||
<button class="tcard publish-card" id="publish-card">
|
||||
<span class="plus">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
</span>
|
||||
<h3>Publish yours</h3>
|
||||
<p>Any template you mark public in your instance shows up in the catalog.</p>
|
||||
</button>`;
|
||||
|
||||
if (!list.length) {
|
||||
html += '<div class="empty">Nothing matches. Try a different search or category.</div>';
|
||||
}
|
||||
|
||||
grid.innerHTML = html;
|
||||
grid.querySelectorAll('.tcard[data-id]').forEach((card) =>
|
||||
card.addEventListener('click', () => openModal(templates.find((t) => t.id === card.dataset.id)))
|
||||
);
|
||||
document.getElementById('publish-card').addEventListener('click', () => {
|
||||
document.getElementById('modal-back').hidden = false;
|
||||
showPublish();
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- modal ----------
|
||||
const back = document.getElementById('modal-back');
|
||||
const closeModal = () => (back.hidden = true);
|
||||
document.getElementById('m-close').addEventListener('click', closeModal);
|
||||
back.addEventListener('click', (e) => { if (e.target === back) closeModal(); });
|
||||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
|
||||
|
||||
function openModal(t) {
|
||||
if (!t) return;
|
||||
current = t;
|
||||
document.getElementById('m-logo').innerHTML = logoHtml(t);
|
||||
document.getElementById('m-title').textContent = t.name;
|
||||
document.getElementById('m-badges').innerHTML =
|
||||
badge(t) + `<span class="badge" style="background:var(--surface-muted);color:var(--text-tertiary)">${esc(t.category || 'custom')}</span>`;
|
||||
document.getElementById('m-desc').textContent = t.description || 'No description.';
|
||||
|
||||
const c = cfg(t);
|
||||
const meta = [];
|
||||
if (c.type) meta.push(['type', c.type]);
|
||||
if (c.runtime) meta.push(['runtime', c.runtime]);
|
||||
if (c.port) meta.push(['port', c.port]);
|
||||
if (c.build_command) meta.push(['build', c.build_command]);
|
||||
if (c.start_command) meta.push(['start', c.start_command]);
|
||||
if (c.health_check) meta.push(['health', c.health_check]);
|
||||
document.getElementById('m-meta').innerHTML = meta.length
|
||||
? meta.map(([k, v]) => `<span><b>${esc(k)}</b> ${esc(String(v))}</span>`).join('')
|
||||
: '<span>self-contained image</span>';
|
||||
|
||||
const vs = vars(t);
|
||||
const varsSec = document.getElementById('m-vars-sec');
|
||||
varsSec.hidden = vs.length === 0;
|
||||
document.getElementById('m-vars').innerHTML = vs.map((v) => `
|
||||
<div class="vrow">
|
||||
<code>${esc(v.key)}</code>
|
||||
<span class="lbl">${esc(v.label || '')}</span>
|
||||
<span class="tags">
|
||||
${v.required ? '<i class="req">required</i>' : ''}
|
||||
${v.secret ? '<i class="sec">secret</i>' : ''}
|
||||
</span>
|
||||
</div>`).join('');
|
||||
|
||||
back.hidden = false;
|
||||
}
|
||||
|
||||
function showPublish() {
|
||||
document.getElementById('m-logo').innerHTML = '+';
|
||||
document.getElementById('m-title').textContent = 'Publish a template';
|
||||
document.getElementById('m-badges').innerHTML = '<span class="badge badge-community">Community</span>';
|
||||
document.getElementById('m-desc').textContent =
|
||||
'Templates are published from inside a running Containr instance. Create a template (or edit one you own), tick "List in the public catalog", and it becomes browsable and deployable by anyone who can reach that instance.';
|
||||
document.getElementById('m-meta').innerHTML =
|
||||
'<span><b>1</b> Templates → New template</span><span><b>2</b> paste or upload JSON</span><span><b>3</b> tick public catalog</span>';
|
||||
document.getElementById('m-vars-sec').hidden = true;
|
||||
current = null;
|
||||
}
|
||||
|
||||
document.getElementById('m-copy').addEventListener('click', async (e) => {
|
||||
if (!current) return;
|
||||
const c = cfg(current);
|
||||
const payload = JSON.stringify({
|
||||
name: current.name,
|
||||
description: current.description || '',
|
||||
category: current.category || 'custom',
|
||||
logo: current.logo || '',
|
||||
config: c,
|
||||
variables: vars(current),
|
||||
}, null, 2);
|
||||
try { await navigator.clipboard.writeText(payload); } catch {}
|
||||
const btn = e.currentTarget;
|
||||
btn.style.color = 'var(--accent)';
|
||||
setTimeout(() => (btn.style.color = ''), 1200);
|
||||
});
|
||||
|
||||
let debounce;
|
||||
qEl.addEventListener('input', () => {
|
||||
clearTimeout(debounce);
|
||||
debounce = setTimeout(() => { query = qEl.value.trim(); render(); }, 120);
|
||||
});
|
||||
|
||||
loadTemplates();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,394 @@
|
||||
{
|
||||
"templates": [
|
||||
{
|
||||
"id": "tpl-nodejs",
|
||||
"name": "Node.js Application",
|
||||
"description": "Generic Node.js application with automatic dependency detection",
|
||||
"category": "web",
|
||||
"logo": "https://cdn.simpleicons.org/node.js",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install \u0026\u0026 npm run build\",\"start_command\":\"npm start\",\"port\":3000,\"health_check\":\"/health\"}",
|
||||
"variables": "[{\"key\":\"NODE_ENV\",\"label\":\"Node Environment\",\"default\":\"production\",\"required\":false,\"secret\":false},{\"key\":\"NPM_TOKEN\",\"label\":\"NPM Token\",\"default\":\"\",\"required\":false,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-react",
|
||||
"name": "React Application",
|
||||
"description": "React single-page application with Vite",
|
||||
"category": "frontend",
|
||||
"logo": "https://cdn.simpleicons.org/react",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install \u0026\u0026 npm run build\",\"start_command\":\"npx serve -s dist\",\"port\":3000}",
|
||||
"variables": "[{\"key\":\"VITE_API_URL\",\"label\":\"API URL\",\"default\":\"\",\"required\":true,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-python",
|
||||
"name": "Python Application",
|
||||
"description": "Python application with FastAPI/Flask support",
|
||||
"category": "web",
|
||||
"logo": "https://cdn.simpleicons.org/python",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"python\",\"build_command\":\"pip install -r requirements.txt\",\"start_command\":\"python main.py\",\"port\":8000}",
|
||||
"variables": "[{\"key\":\"PYTHON_VERSION\",\"label\":\"Python Version\",\"default\":\"3.11\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-go",
|
||||
"name": "Go Application",
|
||||
"description": "Go backend service",
|
||||
"category": "web",
|
||||
"logo": "https://cdn.simpleicons.org/go",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"go\",\"build_command\":\"go build -o app .\",\"start_command\":\"./app\",\"port\":8080}",
|
||||
"variables": "[{\"key\":\"GO_VERSION\",\"label\":\"Go Version\",\"default\":\"1.21\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-postgres",
|
||||
"name": "PostgreSQL Database",
|
||||
"description": "Managed PostgreSQL database",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/postgresql",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"postgres\",\"port\":5432}",
|
||||
"variables": "[{\"key\":\"POSTGRES_USER\",\"label\":\"Username\",\"default\":\"postgres\",\"required\":true,\"secret\":false},{\"key\":\"POSTGRES_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"POSTGRES_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-redis",
|
||||
"name": "Redis Cache",
|
||||
"description": "In-memory data store",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/redis",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"redis\",\"port\":6379}",
|
||||
"variables": "[{\"key\":\"REDIS_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-mongodb",
|
||||
"name": "MongoDB Database",
|
||||
"description": "NoSQL document database",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/mongodb",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"mongodb\",\"port\":27017}",
|
||||
"variables": "[{\"key\":\"MONGO_INITDB_ROOT_USERNAME\",\"label\":\"Root Username\",\"default\":\"admin\",\"required\":true,\"secret\":false},{\"key\":\"MONGO_INITDB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-mysql",
|
||||
"name": "MySQL Database",
|
||||
"description": "Managed MySQL database service",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/mysql",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"mysql\",\"port\":3306}",
|
||||
"variables": "[{\"key\":\"MYSQL_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MYSQL_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-mariadb",
|
||||
"name": "MariaDB Database",
|
||||
"description": "Managed MariaDB database service",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/mariadb",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"mariadb\",\"port\":3306}",
|
||||
"variables": "[{\"key\":\"MARIADB_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MARIADB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-clickhouse",
|
||||
"name": "ClickHouse Database",
|
||||
"description": "Column-oriented analytics database",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/clickhouse",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"clickhouse\",\"port\":8123}",
|
||||
"variables": "[{\"key\":\"CLICKHOUSE_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_USER\",\"label\":\"Username\",\"default\":\"default\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-dragonfly",
|
||||
"name": "Dragonfly Database",
|
||||
"description": "Redis-compatible in-memory data store powered by Dragonfly",
|
||||
"category": "database",
|
||||
"logo": "https://cdn.simpleicons.org/redis",
|
||||
"config": "{\"type\":\"database\",\"runtime\":\"dragonfly\",\"port\":6379}",
|
||||
"variables": "[{\"key\":\"DRAGONFLY_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-worker",
|
||||
"name": "Background Worker",
|
||||
"description": "Background job processing service",
|
||||
"category": "worker",
|
||||
"logo": "https://cdn.simpleicons.org/terminal",
|
||||
"config": "{\"type\":\"worker\",\"runtime\":\"node\",\"build_command\":\"npm install\",\"start_command\":\"npm run worker\"}",
|
||||
"variables": "[{\"key\":\"WORKER_CONCURRENCY\",\"label\":\"Concurrency\",\"default\":\"4\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-cron",
|
||||
"name": "Cron Job",
|
||||
"description": "Scheduled task runner",
|
||||
"category": "cron",
|
||||
"logo": "https://cdn.simpleicons.org/clock",
|
||||
"config": "{\"type\":\"cron\",\"runtime\":\"node\",\"build_command\":\"npm install\",\"start_command\":\"npm run cron\"}",
|
||||
"variables": "[{\"key\":\"CRON_SCHEDULE\",\"label\":\"Schedule\",\"default\":\"0 * * * *\",\"required\":true,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-docker",
|
||||
"name": "Docker Image",
|
||||
"description": "Deploy from any Docker image",
|
||||
"category": "custom",
|
||||
"logo": "https://cdn.simpleicons.org/docker",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"docker\",\"port\":80}",
|
||||
"variables": "[{\"key\":\"IMAGE\",\"label\":\"Docker Image\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"TAG\",\"label\":\"Image Tag\",\"default\":\"latest\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-nextcloud",
|
||||
"name": "Nextcloud",
|
||||
"description": "Self-hosted file sync, share and collaboration platform",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/nextcloud",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"nextcloud:30-apache\",\"port\":80,\"health_check\":\"/status.php\"}",
|
||||
"variables": "[{\"key\":\"NEXTCLOUD_ADMIN_USER\",\"label\":\"Admin User\",\"default\":\"admin\",\"required\":false,\"secret\":false},{\"key\":\"NEXTCLOUD_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"NEXTCLOUD_TRUSTED_DOMAINS\",\"label\":\"Trusted Domains\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-gitea",
|
||||
"name": "Gitea",
|
||||
"description": "Lightweight self-hosted Git service",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/gitea",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"gitea/gitea:1\",\"port\":3000,\"health_check\":\"/api/healthz\"}",
|
||||
"variables": "[{\"key\":\"GITEA__server__DOMAIN\",\"label\":\"Server Domain\",\"default\":\"localhost\",\"required\":false,\"secret\":false},{\"key\":\"GITEA__server__ROOT_URL\",\"label\":\"Root URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-ghost",
|
||||
"name": "Ghost",
|
||||
"description": "Independent publishing platform for blogs and newsletters",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/ghost",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"ghost:5-alpine\",\"port\":2368,\"health_check\":\"/ghost/api/admin/site/\"}",
|
||||
"variables": "[{\"key\":\"url\",\"label\":\"Public URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"database__client\",\"label\":\"Database Client\",\"default\":\"sqlite3\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-uptime-kuma",
|
||||
"name": "Uptime Kuma",
|
||||
"description": "Self-hosted monitoring tool for services and websites",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/uptimerobot",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"louislam/uptime-kuma:1\",\"port\":3001,\"health_check\":\"/\"}",
|
||||
"variables": "[]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-vaultwarden",
|
||||
"name": "Vaultwarden",
|
||||
"description": "Lightweight Bitwarden-compatible password manager",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/bitwarden",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"vaultwarden/server:latest\",\"port\":80,\"health_check\":\"/alive\"}",
|
||||
"variables": "[{\"key\":\"ADMIN_TOKEN\",\"label\":\"Admin Token\",\"default\":\"\",\"required\":false,\"secret\":true},{\"key\":\"SIGNUPS_ALLOWED\",\"label\":\"Allow Signups\",\"default\":\"false\",\"required\":false,\"secret\":false},{\"key\":\"DOMAIN\",\"label\":\"Domain URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-jellyfin",
|
||||
"name": "Jellyfin",
|
||||
"description": "Free software media system for movies, shows and music",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/jellyfin",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"jellyfin/jellyfin:latest\",\"port\":8096,\"health_check\":\"/health\"}",
|
||||
"variables": "[]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-n8n",
|
||||
"name": "n8n",
|
||||
"description": "Workflow automation tool with hundreds of integrations",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/n8n",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"n8nio/n8n:latest\",\"port\":5678,\"health_check\":\"/healthz\"}",
|
||||
"variables": "[{\"key\":\"N8N_HOST\",\"label\":\"Hostname\",\"default\":\"\",\"required\":false,\"secret\":false},{\"key\":\"N8N_ENCRYPTION_KEY\",\"label\":\"Encryption Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WEBHOOK_URL\",\"label\":\"Webhook URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-grafana",
|
||||
"name": "Grafana",
|
||||
"description": "Observability dashboards for metrics, logs and traces",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/grafana",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"grafana/grafana:latest\",\"port\":3000,\"health_check\":\"/api/health\"}",
|
||||
"variables": "[{\"key\":\"GF_SECURITY_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-immich",
|
||||
"name": "Immich",
|
||||
"description": "Self-hosted photo and video backup",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/immich",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/immich-app/immich-server:release\",\"port\":2283,\"health_check\":\"/api/server/ping\"}",
|
||||
"variables": "[{\"key\":\"DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"DB_HOSTNAME\",\"label\":\"Database Host\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-meilisearch",
|
||||
"name": "Meilisearch",
|
||||
"description": "Fast, typo-tolerant search engine API",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/meilisearch",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"getmeili/meilisearch:v1\",\"port\":7700,\"health_check\":\"/health\"}",
|
||||
"variables": "[{\"key\":\"MEILI_MASTER_KEY\",\"label\":\"Master Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MEILI_ENV\",\"label\":\"Environment\",\"default\":\"production\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-plausible",
|
||||
"name": "Plausible Analytics",
|
||||
"description": "Lightweight, privacy-friendly web analytics",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/plausibleanalytics",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/plausible/community-edition:v2\",\"port\":8000,\"health_check\":\"/api/health\"}",
|
||||
"variables": "[{\"key\":\"BASE_URL\",\"label\":\"Base URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"SECRET_KEY_BASE\",\"label\":\"Secret Key Base\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-minio",
|
||||
"name": "MinIO",
|
||||
"description": "S3-compatible object storage",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/minio",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"minio/minio:latest\",\"start_command\":\"server /data --console-address \\\":9001\\\"\",\"port\":9001,\"health_check\":\"/minio/health/live\"}",
|
||||
"variables": "[{\"key\":\"MINIO_ROOT_USER\",\"label\":\"Root User\",\"default\":\"minioadmin\",\"required\":true,\"secret\":false},{\"key\":\"MINIO_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-appwrite",
|
||||
"name": "Appwrite",
|
||||
"description": "Backend-as-a-service for web and mobile apps",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/appwrite",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"appwrite/appwrite:1.6\",\"port\":80,\"health_check\":\"/health\"}",
|
||||
"variables": "[]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-wordpress",
|
||||
"name": "WordPress",
|
||||
"description": "Classic CMS powering a large share of the web",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/wordpress",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"wordpress:6-apache\",\"port\":80,\"health_check\":\"/wp-login.php\"}",
|
||||
"variables": "[{\"key\":\"WORDPRESS_DB_HOST\",\"label\":\"Database Host\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_USER\",\"label\":\"Database User\",\"default\":\"wordpress\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WORDPRESS_DB_NAME\",\"label\":\"Database Name\",\"default\":\"wordpress\",\"required\":true,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-paperless",
|
||||
"name": "Paperless-ngx",
|
||||
"description": "Document management system with OCR",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/paperlessngx",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/paperless-ngx/paperless-ngx:latest\",\"port\":8000,\"health_check\":\"/api/\"}",
|
||||
"variables": "[{\"key\":\"PAPERLESS_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"PAPERLESS_URL\",\"label\":\"Public URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "tpl-ntfy",
|
||||
"name": "ntfy",
|
||||
"description": "Push notification service over HTTP",
|
||||
"category": "app",
|
||||
"logo": "https://cdn.simpleicons.org/ntfy",
|
||||
"config": "{\"type\":\"web\",\"runtime\":\"binwiederhier/ntfy:latest\",\"start_command\":\"serve\",\"port\":80,\"health_check\":\"/v1/health\"}",
|
||||
"variables": "[]",
|
||||
"is_official": true,
|
||||
"is_public": false,
|
||||
"created_at": "0001-01-01T00:00:00Z",
|
||||
"updated_at": "0001-01-01T00:00:00Z"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user