From a9d7d3572e2158d42b180149e5685b9383d2cc93 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 06:38:42 +0200
Subject: [PATCH] Add PDF download buttons to tutorials using html2pdf.js

---
 src/components/Tutorials.astro | 55 ++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/Tutorials.astro b/src/components/Tutorials.astro
index 21cec61..61949d5 100644
--- a/src/components/Tutorials.astro
+++ b/src/components/Tutorials.astro
@@ -1,6 +1,37 @@
 ---
 // src/components/Tutorials.astro
 ---
+<!-- Include html2pdf.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" is:inline></script>
+
+<script is:inline>
+function downloadPDF(elementId, title) {
+    const element = document.getElementById(elementId);
+    
+    // Optionen für html2pdf
+    const opt = {
+        margin:       15,
+        filename:     `Tutorial-${title}.pdf`,
+        image:        { type: 'jpeg', quality: 0.98 },
+        html2canvas:  { 
+            scale: 2, 
+            backgroundColor: '#0c0a09', // Stone 950 (Dunkler Hintergrund für Premium-Look)
+            useCORS: true
+        },
+        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
+    };
+    
+    // Klonen um Padding für das PDF hinzuzufügen
+    const clone = element.cloneNode(true);
+    clone.style.padding = "20px";
+    clone.style.borderRadius = "0";
+    clone.style.border = "none";
+    
+    // PDF generieren
+    html2pdf().set(opt).from(clone).save();
+}
+</script>
+
 <!-- Tutorials Section -->
 <section id="tutorials" class="py-32 bg-stone-950 relative overflow-hidden">
     <!-- Background Glow -->
@@ -15,11 +46,13 @@
 
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
             <!-- Tutorial 1: Trockenmauer -->
-            <div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
+            <div id="tutorial-mauer" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                 <div>
                     <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #1</span>
                     <h3 class="text-xl font-bold text-white mt-2 mb-4">Die perfekte Trockenmauer bauen</h3>
                     <p class="text-stone-400 text-sm mb-4">Eine Trockenmauer hält ohne Mörtel – rein durch Schwerkraft und Reibung. Hier ist die Schritt-für-Schritt-Anleitung.</p>
+                    
+                    <!-- Wetter-Hinweis -->
                     <a href="https://www.wetter.com/suche/?q=Rheingau-Taunus" target="_blank" class="text-xs font-mono text-emerald-400 mb-6 bg-stone-900/50 px-3 py-2 rounded-lg border border-emerald-900/30 inline-block hover:bg-emerald-900/20 transition-colors cursor-pointer">
                         <i class="fa-solid fa-cloud-sun"></i> Rheingau-Taunus: 4°C // Gutes Wetter für den Trockenmauerbau.
                     </a>
@@ -58,13 +91,18 @@
                 </div>
                 
                 <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
-                    <span class="text-xs text-stone-500 font-mono">Dauer: ca. 2 Tage</span>
-                    <span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Schwer</span>
+                    <div class="flex gap-4 text-xs font-mono text-stone-500">
+                        <span>Dauer: ca. 2 Tage</span>
+                        <span class="text-emerald-500">Schwierigkeit: Schwer</span>
+                    </div>
+                    <button onclick="downloadPDF('tutorial-mauer', 'Trockenmauer')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
+                        <i class="fa-solid fa-file-pdf"></i> PDF
+                    </button>
                 </div>
             </div>
 
             <!-- Tutorial 2: Rasenpflege -->
-            <div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
+            <div id="tutorial-rasen" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                 <div>
                     <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #2</span>
                     <h3 class="text-xl font-bold text-white mt-2 mb-4">Premium-Rasen im Sommer</h3>
@@ -104,8 +142,13 @@
                 </div>
                 
                 <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
-                    <span class="text-xs text-stone-500 font-mono">Dauer: Kontinuierlich</span>
-                    <span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Einfach</span>
+                    <div class="flex gap-4 text-xs font-mono text-stone-500">
+                        <span>Dauer: Kontinuierlich</span>
+                        <span class="text-emerald-500">Schwierigkeit: Einfach</span>
+                    </div>
+                    <button onclick="downloadPDF('tutorial-rasen', 'Rasenpflege')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
+                        <i class="fa-solid fa-file-pdf"></i> PDF
+                    </button>
                 </div>
             </div>
         </div>