Download-Update

static/app.js

@@ -75,6 +75,9 @@ async function renderDashboard() {
       <h1 class="view-title">Projekte</h1>
       <div class="view-subtitle">Lege ein Projekt an, um STL- und 3MF-Dateien zu verwalten.</div>
     </div>
+    <div class="header-actions">
+      <a class="btn" href="/api/download-all" download>Alle Projekte herunterladen</a>
+    </div>
   `;
   view.appendChild(header);
 
@@ -161,9 +164,14 @@ async function renderProject(name) {
       <h1 class="view-title"></h1>
       <div class="view-subtitle">STL- und 3MF-Dateien dieses Projekts.</div>
     </div>
-    <button class="btn btn-danger" type="button" data-action="delete-project">Projekt löschen</button>
+    <div class="header-actions">
+      <a class="btn" data-action="download-project" download>Alle herunterladen</a>
+      <button class="btn btn-danger" type="button" data-action="delete-project">Projekt löschen</button>
+    </div>
   `;
   header.querySelector(".view-title").textContent = name;
+  header.querySelector('[data-action="download-project"]').href =
+    `/api/projects/${encodeURIComponent(name)}/download`;
   header.querySelector('[data-action="delete-project"]').addEventListener("click", async () => {
     if (!confirm(`Projekt "${name}" inklusive aller Dateien löschen?`)) return;
     try {
@@ -275,6 +283,11 @@ async function loadFileGrid(projectName, container) {
     card.querySelector(".file-card-meta").textContent =
       `${file.type.toUpperCase()} · ${formatSize(file.size)}`;
 
+    const fileUrl = `/api/projects/${encodeURIComponent(projectName)}/files/${encodeURIComponent(file.name)}`;
+    const downloadLink = card.querySelector(".file-card-download");
+    downloadLink.href = fileUrl;
+    downloadLink.download = file.name;
+
     card.querySelector(".file-card-delete").addEventListener("click", async (e) => {
       e.stopPropagation();
       if (!confirm(`"${file.name}" löschen?`)) return;

static/index.html

@@ -47,6 +47,7 @@
         <span class="file-card-name"></span>
         <span class="file-card-meta"></span>
       </div>
+      <a class="file-card-download" title="Datei herunterladen" download>⬇</a>
       <button class="file-card-delete" type="button" title="Datei löschen">×</button>
     </div>
   </template>

static/style.css

@@ -312,26 +312,38 @@ button {
   color: var(--text-muted);
 }
 
-.file-card-delete {
+.file-card-delete,
+.file-card-download {
   position: absolute;
   top: 8px;
-  right: 8px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid var(--border-strong);
   background: rgba(20, 23, 26, 0.85);
   color: var(--text-muted);
-  font-size: 15px;
+  font-size: 13px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
+  cursor: pointer;
+  text-decoration: none;
   transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.file-card:hover .file-card-delete {
+.file-card-delete {
+  right: 8px;
+  font-size: 15px;
+}
+
+.file-card-download {
+  right: 38px;
+}
+
+.file-card:hover .file-card-delete,
+.file-card:hover .file-card-download {
   opacity: 1;
 }
 
@@ -340,6 +352,16 @@ button {
   border-color: var(--danger);
 }
 
+.file-card-download:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
 .toast {
   position: fixed;
   bottom: 24px;