Add PDF download functionality to Easter Egg using jsPDF
This commit is contained in:
@@ -46,7 +46,11 @@
|
|||||||
<span class="text-amber-500 font-bold uppercase tracking-wider text-xs">Goldener Brabetz-Grüner-Daumen</span>
|
<span class="text-amber-500 font-bold uppercase tracking-wider text-xs">Goldener Brabetz-Grüner-Daumen</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-stone-500 text-[10px] font-mono leading-tight">Zertifikats-ID: BRB-PLX-2026-NICE</p>
|
<p class="text-stone-500 text-[10px] font-mono leading-tight mb-4">Zertifikats-ID: BRB-PLX-2026-NICE</p>
|
||||||
|
|
||||||
|
<button @click="window.downloadBrabetzPDF()" class="text-xs text-amber-500 hover:text-amber-400 underline uppercase tracking-wider transition-colors">
|
||||||
|
Als PDF herunterladen 📄
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,3 +58,44 @@
|
|||||||
<!-- Listen for custom event -->
|
<!-- Listen for custom event -->
|
||||||
<div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
|
<div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
window.downloadBrabetzPDF = function() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF({
|
||||||
|
orientation: 'landscape',
|
||||||
|
unit: 'mm',
|
||||||
|
format: 'a5'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Background
|
||||||
|
doc.setFillColor(24, 24, 27); // Dark stone-900
|
||||||
|
doc.rect(0, 0, 210, 148, 'F');
|
||||||
|
|
||||||
|
// Border
|
||||||
|
doc.setDrawColor(245, 158, 11); // Amber-500
|
||||||
|
doc.setLineWidth(1);
|
||||||
|
doc.rect(5, 5, 200, 138);
|
||||||
|
|
||||||
|
// Text
|
||||||
|
doc.setTextColor(255, 255, 255);
|
||||||
|
doc.setFontSize(24);
|
||||||
|
doc.text("AUSZEICHNUNG", 105, 30, { align: "center" });
|
||||||
|
|
||||||
|
doc.setTextColor(120, 113, 108); // Stone-500
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.text("Hiermit verleihen wir", 105, 50, { align: "center" });
|
||||||
|
|
||||||
|
doc.setTextColor(245, 158, 11); // Amber-500
|
||||||
|
doc.setFontSize(18);
|
||||||
|
doc.text("Den Goldenen Brabetz-Grünen-Daumen", 105, 70, { align: "center" });
|
||||||
|
|
||||||
|
doc.setTextColor(120, 113, 108); // Stone-500
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.text("für besondere Verdienste um das Pflanzenwachstum.", 105, 90, { align: "center" });
|
||||||
|
|
||||||
|
doc.text("Zertifikats-ID: BRB-PLX-2026-NICE", 105, 120, { align: "center" });
|
||||||
|
|
||||||
|
doc.save("Brabetz_Auszeichnung.pdf");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -122,4 +122,5 @@ import EasterEgg from '../components/EasterEgg.astro';
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" is:inline></script>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
Reference in New Issue
Block a user