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>

.gitignore

@@ -123,3 +123,4 @@ bin
 ref/
 .playwright-mcp/
 canvas-*.png
+.vercel

.vercelignore

@@ -0,0 +1,2 @@
+/*
+!/site

app/backend/cmd/dumptemplates/main.go

@@ -0,0 +1,24 @@
+// dumptemplates prints the seeded official template catalog as JSON in the same
+// shape as GET /api/v1/templates. The landing site (site/templates.json) uses it
+// as the offline fallback catalog: `go run ./cmd/dumptemplates > ../../site/templates.json`.
+package main
+
+import (
+	"containr/internal/api"
+	"encoding/json"
+	"fmt"
+	"os"
+)
+
+func main() {
+	out := struct {
+		Templates []api.ServiceTemplate `json:"templates"`
+	}{Templates: api.SeedTemplates()}
+
+	enc := json.NewEncoder(os.Stdout)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(out); err != nil {
+		fmt.Fprintln(os.Stderr, "encode:", err)
+		os.Exit(1)
+	}
+}

app/backend/internal/api/templates.go

@@ -28,6 +28,7 @@ type ServiceTemplate struct {
 	Variables   string    `json:"variables" db:"variables"`
 	IsOfficial  bool      `json:"is_official" db:"is_official"`
 	OwnerID     string    `json:"owner_id,omitempty" db:"owner_id"`
+	IsPublic    bool      `json:"is_public" db:"is_public"`
 	CreatedAt   time.Time `json:"created_at" db:"created_at"`
 	UpdatedAt   time.Time `json:"updated_at" db:"updated_at"`
 }
@@ -383,6 +384,7 @@ type templateWriteRequest struct {
 	Logo        string          `json:"logo"`
 	Config      json.RawMessage `json:"config" binding:"required"`
 	Variables   json.RawMessage `json:"variables"`
+	IsPublic    bool            `json:"is_public"`
 }
 
 var templateCategories = map[string]bool{
@@ -483,6 +485,7 @@ func handleCreateTemplate(c *gin.Context) {
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
+		IsPublic:    req.IsPublic,
 	}); err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create template"})
 		return
@@ -529,6 +532,7 @@ func handleUpdateTemplate(c *gin.Context) {
 		Logo:        nullableText(req.Logo),
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
+		IsPublic:    req.IsPublic,
 		ID:          templateID,
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
 	})
@@ -1013,10 +1017,11 @@ func defaultTemplateResources(serviceType string) (cpu, memory string) {
 	}
 }
 
-// templateVisibleTo reports whether the caller may see a template: official
+// templateVisibleTo reports whether the caller may see a template: official and
-// templates are public, user templates are owner/admin only.
+// published (is_public) templates are public, other user templates are
+// owner/admin only.
 func templateVisibleTo(c *gin.Context, t ServiceTemplate) bool {
-	if t.IsOfficial {
+	if t.IsOfficial || t.IsPublic {
 		return true
 	}
 	if contextIsAdmin(c) {
@@ -1047,6 +1052,7 @@ func mapSQLCTemplate(row sqlcdb.ServiceTemplate) ServiceTemplate {
 		Variables:   variables,
 		IsOfficial:  row.IsOfficial.Valid && row.IsOfficial.Bool,
 		OwnerID:     ownerID,
+		IsPublic:    row.IsPublic,
 		CreatedAt:   templateNullTime(row.CreatedAt),
 		UpdatedAt:   templateNullTime(row.UpdatedAt),
 	}

app/backend/internal/database/sqlcdb/models.go

@@ -207,6 +207,7 @@ type ServiceTemplate struct {
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	IsOfficial  sql.NullBool          `json:"is_official"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 	CreatedAt   sql.NullTime          `json:"created_at"`
 	UpdatedAt   sql.NullTime          `json:"updated_at"`
 }

app/backend/internal/database/sqlcdb/templates.sql.go

@@ -125,7 +125,7 @@ func (q *Queries) CreateServiceFromTemplate(ctx context.Context, arg CreateServi
 }
 
 const createUserTemplate = `-- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
     $1,
     $2,
@@ -135,7 +135,8 @@ VALUES (
     $6,
     $7,
     false,
-    $8
+    $8,
+    $9
 )
 `
 
@@ -148,6 +149,7 @@ type CreateUserTemplateParams struct {
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 }
 
 func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplateParams) error {
@@ -160,6 +162,7 @@ func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplate
 		arg.Config,
 		arg.Variables,
 		arg.OwnerID,
+		arg.IsPublic,
 	)
 	return err
 }
@@ -198,7 +201,7 @@ func (q *Queries) GetProjectOwnerID(ctx context.Context, id uuid.UUID) (uuid.UUI
 }
 
 const getServiceTemplateByID = `-- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1
 `
@@ -216,6 +219,7 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 		&i.Variables,
 		&i.IsOfficial,
 		&i.OwnerID,
+		&i.IsPublic,
 		&i.CreatedAt,
 		&i.UpdatedAt,
 	)
@@ -223,10 +227,10 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 }
 
 const listServiceTemplatesByCategoryForUser = `-- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = $1
-  AND (is_official = true OR owner_id = $2)
+  AND (is_official = true OR is_public = true OR owner_id = $2)
 ORDER BY is_official DESC, name ASC
 `
 
@@ -254,6 +258,7 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -271,9 +276,9 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 }
 
 const listServiceTemplatesForUser = `-- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = $1
+WHERE is_official = true OR is_public = true OR owner_id = $1
 ORDER BY is_official DESC, name ASC
 `
 
@@ -296,6 +301,7 @@ func (q *Queries) ListServiceTemplatesForUser(ctx context.Context, ownerID uuid.
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -320,9 +326,10 @@ SET name = $1,
     logo = $4,
     config = $5,
     variables = $6,
+    is_public = $7,
     updated_at = NOW()
-WHERE id = $7
+WHERE id = $8
-  AND owner_id = $8
+  AND owner_id = $9
   AND is_official = false
 `
 
@@ -333,6 +340,7 @@ type UpdateUserTemplateParams struct {
 	Logo        sql.NullString        `json:"logo"`
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
+	IsPublic    bool                  `json:"is_public"`
 	ID          string                `json:"id"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
 }
@@ -345,6 +353,7 @@ func (q *Queries) UpdateUserTemplate(ctx context.Context, arg UpdateUserTemplate
 		arg.Logo,
 		arg.Config,
 		arg.Variables,
+		arg.IsPublic,
 		arg.ID,
 		arg.OwnerID,
 	)

app/backend/migrations_goose/20260924120000_template_publishing.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- Railway-style template publishing: owners can mark a user template public so
+-- it appears in the anonymous catalog (GET /api/v1/templates) and on the
+-- landing page. Official templates stay official; is_public only matters for
+-- user templates.
+ALTER TABLE public.service_templates ADD COLUMN IF NOT EXISTS is_public boolean NOT NULL DEFAULT false;
+CREATE INDEX IF NOT EXISTS idx_service_templates_public ON public.service_templates(is_public) WHERE is_public;
+
+-- +goose Down
+DROP INDEX IF EXISTS public.idx_service_templates_public;
+ALTER TABLE public.service_templates DROP COLUMN IF EXISTS is_public;

app/backend/sqlc/queries/templates.sql

@@ -1,18 +1,18 @@
 -- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = sqlc.narg(owner_id)
+WHERE is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id)
 ORDER BY is_official DESC, name ASC;
 
 -- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = sqlc.arg(category)
-  AND (is_official = true OR owner_id = sqlc.narg(owner_id))
+  AND (is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id))
 ORDER BY is_official DESC, name ASC;
 
 -- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1;
 
@@ -39,7 +39,7 @@ SET name = EXCLUDED.name,
     updated_at = NOW();
 
 -- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
     sqlc.arg(id),
     sqlc.arg(name),
@@ -49,7 +49,8 @@ VALUES (
     sqlc.arg(config),
     sqlc.narg(variables),
     false,
-    sqlc.arg(owner_id)
+    sqlc.arg(owner_id),
+    sqlc.arg(is_public)
 );
 
 -- name: UpdateUserTemplate :execrows
@@ -60,6 +61,7 @@ SET name = sqlc.arg(name),
     logo = sqlc.narg(logo),
     config = sqlc.arg(config),
     variables = sqlc.narg(variables),
+    is_public = sqlc.arg(is_public),
     updated_at = NOW()
 WHERE id = sqlc.arg(id)
   AND owner_id = sqlc.arg(owner_id)

app/backend/sqlc/schema.sql

@@ -84,6 +84,7 @@ CREATE TABLE service_templates (
     variables JSONB DEFAULT '[]',
     is_official BOOLEAN DEFAULT false,
     owner_id UUID,
+    is_public BOOLEAN NOT NULL DEFAULT false,
     created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
     updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
 );

app/frontend/src/features/templates/pages/TemplatesPage.tsx

@@ -48,6 +48,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-go',
@@ -59,6 +60,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-postgres',
@@ -70,6 +72,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-mysql',
@@ -81,6 +84,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-mariadb',
@@ -92,6 +96,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-clickhouse',
@@ -103,6 +108,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-dragonfly',
@@ -114,6 +120,7 @@ const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
 ];
 
@@ -445,6 +452,7 @@ export function TemplatesPage() {
   const [editorOpen, setEditorOpen] = useState(false);
   const [editorJson, setEditorJson] = useState(EMPTY_TEMPLATE_JSON);
   const [editingTemplate, setEditingTemplate] = useState<TemplateEntity | null>(null);
+  const [editorIsPublic, setEditorIsPublic] = useState(false);
   const [editorError, setEditorError] = useState<string | null>(null);
 
   const [categoryFilter, setCategoryFilter] = useState('');
@@ -655,6 +663,7 @@ export function TemplatesPage() {
   const openCreateEditor = () => {
     setEditingTemplate(null);
     setEditorJson(EMPTY_TEMPLATE_JSON);
+    setEditorIsPublic(false);
     setEditorError(null);
     setEditorOpen(true);
   };
@@ -687,6 +696,7 @@ export function TemplatesPage() {
         2,
       ),
     );
+    setEditorIsPublic(template.isPublic);
     setEditorError(null);
     setEditorOpen(true);
   };
@@ -711,6 +721,7 @@ export function TemplatesPage() {
       logo: body.logo ?? '',
       config: body.config as Record<string, unknown>,
       variables: Array.isArray(body.variables) ? body.variables : [],
+      isPublic: editorIsPublic,
     });
   };
 
@@ -880,6 +891,11 @@ export function TemplatesPage() {
                                   Mine
                                 </span>
                               ) : null}
+                              {!template.isOfficial && template.isPublic ? (
+                                <span className="px-1.5 py-0.5 rounded bg-[var(--info-soft)] text-[var(--info)] text-[10px] font-semibold">
+                                  Public
+                                </span>
+                              ) : null}
                             </div>
                             <div className="flex items-center gap-2 mt-1">
                               <span 
@@ -955,6 +971,11 @@ export function TemplatesPage() {
                             Official
                           </span>
                         )}
+                        {!selectedDetail.template.isOfficial && selectedDetail.template.isPublic && (
+                          <span className="px-2 py-0.5 rounded-full bg-[var(--info-soft)] text-[var(--info)] text-xs font-medium">
+                            Public
+                          </span>
+                        )}
                       </div>
                       <p className="text-sm text-[var(--text-secondary)] mt-1">{selectedDetail.template.description}</p>
                     </div>
@@ -1230,9 +1251,15 @@ export function TemplatesPage() {
               </div>
             ) : null}
             <div className="flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5">
-              <p className="text-[11px] text-[var(--text-tertiary)]">
+              <label className="inline-flex cursor-pointer items-center gap-2 text-[11px] text-[var(--text-secondary)]">
-                Saved as a user template — only you (and admins) can edit or delete it.
+                <input
-              </p>
+                  type="checkbox"
+                  checked={editorIsPublic}
+                  onChange={(e) => setEditorIsPublic(e.target.checked)}
+                  className="h-3.5 w-3.5 accent-[var(--accent-primary)]"
+                />
+                List in the public catalog - anyone browsing this instance can see and deploy it.
+              </label>
               <div className="flex items-center gap-2">
                 <button
                   type="button"

app/frontend/src/generated/api-types.ts

@@ -7806,6 +7806,8 @@ export interface components {
             is_official?: boolean;
             /** @description Owning user ID for user-created templates; null for official presets */
             owner_id?: string | null;
+            /** @description Whether a user-created template is published to the public catalog */
+            is_public?: boolean;
             /**
              * Format: date-time
              * @description Creation timestamp
@@ -7830,6 +7832,8 @@ export interface components {
             config: Record<string, never>;
             /** @description Configurable variables exposed at deploy time */
             variables?: components["schemas"]["TemplateVariable"][];
+            /** @description Publish this template to the public catalog (visible anonymously) */
+            is_public?: boolean;
         };
         TemplateConfig: {
             /** @description Service type for created service */

app/frontend/src/lib/api-client.ts

@@ -124,6 +124,7 @@ export type TemplateEntity = {
   variablesRaw: string;
   isOfficial: boolean;
   ownerId: string | null;
+  isPublic: boolean;
   createdAt?: string;
   updatedAt?: string;
 };
@@ -615,6 +616,7 @@ function normalizeTemplate(template: RawServiceTemplate): TemplateEntity | null
     variablesRaw: template.variables ?? '',
     isOfficial: Boolean(template.is_official),
     ownerId: template.owner_id ?? null,
+    isPublic: Boolean(template.is_public),
     createdAt: template.created_at,
     updatedAt: template.updated_at,
   };
@@ -1358,6 +1360,7 @@ export type TemplateWriteInput = {
   logo?: string;
   config: Record<string, unknown>;
   variables?: TemplateVariableEntity[];
+  isPublic?: boolean;
 };
 
 function templateWriteBody(input: TemplateWriteInput): string {
@@ -1368,6 +1371,7 @@ function templateWriteBody(input: TemplateWriteInput): string {
     logo: input.logo ?? '',
     config: input.config,
     variables: input.variables ?? [],
+    is_public: input.isPublic ?? false,
   });
 }
 

docs/api/openapi.yaml

@@ -5216,6 +5216,9 @@ components:
           type: string
           nullable: true
           description: Owning user ID for user-created templates; null for official presets
+        is_public:
+          type: boolean
+          description: Whether a user-created template is published to the public catalog
         created_at:
           type: string
           format: date-time
@@ -5251,6 +5254,9 @@ components:
           items:
             $ref: '#/components/schemas/TemplateVariable'
           description: Configurable variables exposed at deploy time
+        is_public:
+          type: boolean
+          description: Publish this template to the public catalog (visible anonymously)
 
     TemplateConfig:
       type: object

site/.gitignore

@@ -0,0 +1,2 @@
+.vercel
+.env*

site/index.html

@@ -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>
+<link rel="stylesheet" href="style.css">
-  @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>
 </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">

site/style.css

@@ -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; }
+  }

site/templates.html

@@ -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 &rarr; New template &rarr; 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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[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 &rarr; 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>

site/templates.json

@@ -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"
+    }
+  ]
+}