Merge pull request 'Add frontend' (#20) from feat/frontend into dev
build / Go-Build (push) Successful in 1m28s
docker / docker (push) Successful in 5m38s

Reviewed-on: #20
This commit was merged in pull request #20.
This commit is contained in:
2026-05-28 20:37:53 +00:00
6 changed files with 3489 additions and 4 deletions
+6
View File
@@ -0,0 +1,6 @@
package svgtemplater
import "embed"
//go:embed frontend/*
var Frontend embed.FS
+1955
View File
File diff suppressed because it is too large Load Diff
+361
View File
@@ -0,0 +1,361 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Templater - Premium Dashboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="dark-theme">
<div class="app-container">
<!-- Navigation Header -->
<header class="app-header">
<div class="logo-area">
<div class="logo-icon">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
</div>
<h1>SVG <span>Templater</span></h1>
</div>
<div class="header-status">
<div class="status-badge" id="app-mode-badge">
<span class="pulse-dot"></span>
<span id="mode-text">Connecting...</span>
</div>
<span class="status-meta">
<span class="status-meta-item"><span id="stats-total-count">0</span> Vorlagen</span>
<span class="status-meta-item">Host: <span id="stats-api-host" class="text-truncate">Localhost</span></span>
<span id="stats-app-mode" class="hidden">Live</span>
</span>
</div>
</header>
<!-- Main Workspace -->
<main class="workspace-area">
<!-- VIEW 1: HOME PAGE (Upload + List) -->
<div id="view-home" class="view-content active">
<div class="grid-layout">
<!-- Left: Upload & Fonts Column -->
<div class="left-column">
<!-- Upload Section -->
<div class="card upload-card">
<div class="card-header">
<h2>Template hochladen</h2>
<p>Laden Sie eine SVG-Datei hoch, um Platzhalter wie <code>{{ variable }}</code> automatisch zu extrahieren.</p>
</div>
<div class="card-body">
<div class="drop-zone" id="svg-drop-zone">
<input type="file" id="svg-file-input" accept=".svg" class="file-input-hidden">
<div class="drop-zone-content">
<div class="drop-icon">
<svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="1.5" fill="none">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
</div>
<h3>SVG Datei hierher ziehen</h3>
<p>oder <span>Computer durchsuchen</span></p>
<span class="file-limits">Ausschließlich valide .svg Dateien</span>
</div>
</div>
</div>
</div>
<!-- Fonts Management Section -->
<div class="card font-card" style="margin-top: 28px;">
<div class="card-header">
<h2>Schriften verwalten</h2>
<p>Laden Sie globale TTF/OTF-Schriften hoch, die für Text-Renderings verwendet werden können.</p>
</div>
<div class="card-body">
<div class="font-list-container">
<h3>Installierte Schriften</h3>
<div class="spinner-small hidden" id="fonts-loading"></div>
<div class="font-list-empty" id="fonts-empty">
Keine benutzerdefinierten Schriften geladen.
</div>
<ul class="font-list hidden" id="fonts-list">
<!-- Injected dynamically -->
</ul>
</div>
<div class="form-divider" style="margin: 20px 0;"></div>
<div class="font-upload-area">
<input type="file" id="font-file-input" accept=".ttf,.otf" class="file-input-hidden" style="display: none;">
<button class="submit-btn amber-gradient" id="btn-upload-font" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
<span>Schriftart hochladen</span>
</button>
</div>
</div>
</div>
</div>
<!-- Right: Templates List -->
<div class="card templates-card">
<div class="card-header list-header-flex">
<div>
<h2>Meine Vorlagen</h2>
<p>Wählen Sie ein SVG-Template aus, um Variablen auszufüllen und Renderings zu erstellen.</p>
</div>
<button class="icon-btn-toggle" id="btn-toggle-demo" title="Demo-Modus umschalten">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
<span>Demo Mode</span>
</button>
</div>
<div class="card-body">
<!-- Loading indicator -->
<div class="loading-container hidden" id="templates-loading">
<div class="spinner"></div>
<p>Lade SVG Templates...</p>
</div>
<!-- Empty state -->
<div class="empty-state" id="templates-empty">
<div class="empty-icon">
<svg viewBox="0 0 24 24" width="40" height="40" stroke="currentColor" stroke-width="1.5" fill="none">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="15"></line>
<line x1="15" y1="9" x2="9" y2="15"></line>
</svg>
</div>
<h3>Keine Templates vorhanden</h3>
<p>Laden Sie Ihre erste SVG-Vorlage hoch oder aktivieren Sie den Demo-Modus, um fortzufahren.</p>
</div>
<!-- Templates Grid container -->
<div class="templates-grid hidden" id="templates-grid">
<!-- Cards injected dynamically via app.js -->
</div>
</div>
</div>
</div>
</div>
<!-- VIEW 2: EDITOR PAGE (Selected Template Form + Live Preview) -->
<div id="view-editor" class="view-content">
<div class="editor-navigation">
<button class="back-btn" id="btn-back-home">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
Zurück zur Übersicht
</button>
<div class="active-template-title" style="display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; align-items: center; gap: 10px;">
<span class="tag">Vorlage</span>
<h2 id="editor-template-name">template_name.svg</h2>
<button class="preview-action-btn" id="btn-rename-active" title="Name zuweisen/ändern" style="height: 28px; width: 28px; padding: 0; display: flex; align-items: center; justify-content: center;">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
</button>
</div>
<span class="template-id-sub" style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">ID: <code id="editor-template-id" style="font-size: 10px; color: #ff79c6 !important; background: #08090d; border: 1px solid var(--border-color); padding: 2px 6px; border-radius: 2px;">template_id</code></span>
</div>
</div>
<div class="grid-layout-editor">
<div class="left-column-editor" style="display: flex; flex-direction: column; gap: 28px;">
<!-- Left: Variables Input Form -->
<div class="card variables-card">
<div class="card-header">
<h2>Variablen ausfüllen</h2>
<p>Geben Sie die Werte für die im SVG definierten Platzhalter ein.</p>
</div>
<div class="card-body">
<div id="dynamic-variables-form">
<div class="form-inputs-container" id="dynamic-inputs-area">
<!-- Injected dynamically via app.js -->
</div>
<div class="form-divider"></div>
<div class="rendering-settings">
<h3>Ausgabe-Einstellungen</h3>
<div class="setting-row">
<label>Dateiformat</label>
<div class="format-selector">
<button type="button" class="format-btn active" data-format="svg" id="format-svg">SVG</button>
<button type="button" class="format-btn" data-format="png" id="format-png">PNG</button>
</div>
</div>
<div class="setting-row resolution-settings hidden" id="resolution-settings">
<label>Auflösung (PNG)</label>
<div class="resolution-inputs">
<div class="input-with-label">
<input type="number" id="render-width" placeholder="Auto" min="1">
<span>Breite (px)</span>
</div>
<div class="input-with-label">
<input type="number" id="render-height" placeholder="Auto" min="1">
<span>Höhe (px)</span>
</div>
</div>
</div>
</div>
<button type="button" class="submit-btn purple-gradient" id="btn-submit-render">
<span class="btn-spinner hidden" id="render-spinner"></span>
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" id="render-btn-icon">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span id="render-btn-text">Rendering erstellen</span>
</button>
</div>
</div>
</div>
<!-- Left: Pages Manager Panel -->
<div class="card pages-manager-card" id="editor-pages-manager-card">
<div class="card-header" style="padding: 20px 24px;">
<h2 style="font-size: 16px;">Seiten verwalten</h2>
<p style="font-size: 12px; margin-top: 2px;">Fügen Sie neue Seiten hinzu oder löschen Sie bestehende Seiten.</p>
</div>
<div class="card-body" style="padding: 20px 24px;">
<div class="pages-list-container" style="max-height: 240px; overflow-y: auto; margin-bottom: 16px; padding-right: 4px;">
<ul class="font-list" id="editor-pages-list" style="list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0;">
<!-- Injected dynamically via app.js -->
</ul>
</div>
<div class="form-divider" style="margin: 16px 0;"></div>
<div class="page-upload-area">
<input type="file" id="page-file-input" accept=".svg" multiple class="file-input-hidden" style="display: none;">
<button type="button" class="submit-btn indigo-gradient" id="btn-add-page" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; padding: 10px 16px;">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span>Seite(n) hinzufügen</span>
</button>
</div>
</div>
</div>
</div>
<!-- Right: Live Canvas Preview -->
<div class="card preview-card">
<div class="card-header preview-header">
<h2>Live-Vorschau</h2>
<div class="preview-actions">
<div class="page-navigator" id="page-navigator" style="display: none; align-items: center; gap: 8px; margin-right: 8px;">
<button class="preview-action-btn" id="btn-page-prev" title="Vorherige Seite" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<span id="page-indicator" style="font-size: 11px; font-weight: 700; color: var(--text-secondary); font-family: var(--font-body); min-width: 90px; text-align: center;">Seite 1 / 1</span>
<button class="preview-action-btn" id="btn-page-next" title="Nächste Seite" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
<span class="zoom-badge" id="zoom-badge" style="font-size: 11px; font-weight: 700; color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); padding: 7px 10px; border-radius: 6px; font-family: var(--font-body); min-width: 54px; text-align: center; display: inline-flex; align-items: center; justify-content: center; height: 32px;">100%</span>
<button class="preview-action-btn" id="btn-zoom-in" title="Vergrößern">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</button>
<button class="preview-action-btn" id="btn-zoom-out" title="Verkleinern">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</button>
<button class="preview-action-btn" id="btn-zoom-reset" title="Zoom zurücksetzen">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<polyline points="3 3 3 8 8 8"></polyline>
</svg>
</button>
<button class="preview-action-btn" id="btn-fullscreen" title="Vollbildmodus">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
<path d="M15 3h6v6"></path>
<path d="M9 21H3v-6"></path>
<path d="M21 3l-7 7"></path>
<path d="M3 21l7-7"></path>
</svg>
</button>
<button class="download-action-btn hidden" id="btn-download-preview" title="Grafik herunterladen" style="margin-left: 8px;">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>Download</span>
</button>
<button class="download-action-btn download-all-btn hidden" id="btn-download-all" title="Alle Seiten gleichzeitig herunterladen" style="margin-left: 8px;">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>Alle Seiten</span>
</button>
</div>
</div>
<div class="card-body canvas-body">
<div class="canvas-viewport" id="preview-viewport">
<!-- Interactive dynamic placeholder / SVG preview canvas -->
<div class="canvas-container" id="preview-canvas-container">
<div class="canvas-loading hidden" id="preview-loading-overlay">
<div class="spinner"></div>
<p>Rendere Grafik...</p>
</div>
<div class="canvas-placeholder" id="preview-placeholder">
<svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" stroke-width="1.2" fill="none" class="pulse-opacity">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<p>Werte eintragen und Rendering starten</p>
</div>
<img id="preview-image" class="hidden" alt="Rendered Preview" draggable="false">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer">
<p>&copy; 2026 SVG Templater Dashboard. Mit Liebe pair-programmiert von Antigravity.</p>
</footer>
</div>
<!-- Toast Notifications Container -->
<div class="toast-container" id="toast-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="app.js"></script>
</body>
</html>
+1124
View File
File diff suppressed because it is too large Load Diff
+3
View File
@@ -14,6 +14,7 @@ var (
generateTokenFlag bool
deleteTokenFlag bool
datapath string
frontendkey string
)
func PrepareCommandLine() {
@@ -21,6 +22,7 @@ func PrepareCommandLine() {
flag.BoolVar(&generateTokenFlag, "tokengen", false, "Generate token with name")
flag.BoolVar(&deleteTokenFlag, "tokendel", false, "Delete token with name")
flag.StringVar(&datapath, "data", "/var/lib/svg-templater", "Override data directory")
flag.StringVar(&frontendkey, "frontendkey", "", "Specify the api key the frontend should use")
}
func HandleCommandline() {
@@ -45,6 +47,7 @@ func HandleCommandline() {
} else {
svg.Storage = svg.NewFileStorage(datapath, "public", "fonts")
server.PrepareHTTP()
server.PrepareFrontend(frontendkey)
server.Start()
}
}
+40 -4
View File
@@ -1,10 +1,12 @@
package server
import (
"fmt"
"io/fs"
"log"
"net/http"
"text/template"
svgtemplater "tomatentum.net/svg-templater"
"tomatentum.net/svg-templater/internal/routes"
"tomatentum.net/svg-templater/pkg/auth"
"tomatentum.net/svg-templater/pkg/svg"
@@ -14,9 +16,6 @@ var mux http.ServeMux
func PrepareHTTP() {
mux = *http.NewServeMux()
registerAuthorizedFunc("/", func(w http.ResponseWriter, r *http.Request) {
fmt.Fprintln(w, "You are authorized!")
})
registerAuthorizedFunc("/svg/", func(w http.ResponseWriter, r *http.Request) {
switch r.Method {
case "POST":
@@ -71,6 +70,43 @@ func PrepareHTTP() {
mux.Handle("/public/", http.StripPrefix("/public/", http.FileServer(svg.Storage.GetPublicDir())))
}
func PrepareFrontend(key string) {
webFS, _ := fs.Sub(svgtemplater.Frontend, "frontend")
mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/app.js" {
http.FileServer(http.FS(webFS)).ServeHTTP(w, r)
return
}
tmplData, err := fs.ReadFile(webFS, "app.js")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
tmpl, err := template.New("index").Delims("[[", "]]").Parse(string(tmplData))
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// Execute with environment variables
data := map[string]string{
"APIKey": key,
"APIUrl": "",
}
if err := tmpl.Execute(w, data); err != nil {
http.Error(w, "Coudln't render template", http.StatusInternalServerError)
return
}
})
}
func Start() {
log.Println("Starting http server on :3000")
handler := corsMiddleware(&mux)