Arbeitsunfall melden<\/title>\n <meta name=\"description\" content=\"Unterschriftenfeld in HTML mit Signature Pad\" \/>\n <link href=\"w3.css\" type=\"text\/css\" rel=\"stylesheet\" \/>\n <style>\n body {\n margin: 0px;\n font-family: 'Trebuchet MS';\n font-size: 25px;\n padding: 20px;\n background-color: #fff;\n height: max-content;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \/* body {\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n background-color: white;\n font-size: 10px;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n width: stretch;\n }\n *\/\n .form {\n background: #efeded;\n padding: 20px;\n border-radius: 8px;\n width: 1000px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n h2 {\n text-align: left;\n margin-bottom: 20px;\n }\n label {\n margin-bottom: 5px;\n }\n input, select, textarea, button {\n background: #efeded;\n padding: 10px;\n border: none;\n border-radius: 4px;\n width: 600px;\n }\n button {\n background-color: #007BFF;\n color: white;\n border: none;\n cursor: pointer;\n transition: background 0.3s;\n }\n button:hover {\n background-color: #0056b3;\n }\n @media (min-width: 768px) {\n .form-row {\n display: flex;\n gap: 20px;\n }\n .form-row .form-group {\n flex: 1;\n }\n }\n \/*\n **********************************************************\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n }\n .form-container {\n max-width: 500px;\n margin: 30px auto;\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n h2 {\n text-align: center;\n margin-bottom: 20px;\n }\n label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n }\n input, textarea, select, button {\n width: 100%;\n padding: 10px;\n margin-top: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 1rem;\n }\n button {\n background-color: #28a745;\n color: white;\n border: none;\n cursor: pointer;\n margin-top: 15px;\n }\n button:hover {\n background-color: #218838;\n }\n @media (max-width: 600px) {\n .form-container {\n margin: 15px;\n padding: 15px;\n }\n }\n **********************************************************\n *\/\n \/* body {\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n background-color: white;\n font-size: larger;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n width:stretch;\n }\n .form {\n display: flex;\n flex-direction: column;\n gap: 200px;\n }\n .input {\n background-color: #e0e0e0;\n border: 0px solid #999;\n color: #333;\n padding: 10px;\n width:stretch;\n }\n *\/\n .radio-option {\n display: flex;\n align-items: normal;\n background-color: #f4f4f4;\n padding: 15px; \/* Gro\u00dfe Klickfl\u00e4che *\/\n border-radius: 8px;\n cursor: pointer;\n }\n \/* Radio Button vergr\u00f6\u00dfern f\u00fcr den Daumen *\/\n .radio-option input {\n width: 20px;\n height: 20px;\n margin-right: 15px;\n }\n .radio-option label {\n font-size: 16px;\n cursor: pointer;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <form action=\"process_1.php\" method=\"POST\" name=\"DAFORM\" onSubmit=\"lowercase\" enctype=\"multipart\/form-data\" target=\"_self\">\n <div class=\"form-group\">\n <h2>Arbeitsunfall melden<\/h2><br \/>\n <h4>Angaben zum Hergang des Unfalls bzw. des Gesundheitsschadens:<\/h4><br \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"nameundvorname\">Name und Vorname der verletzten Person:<\/label><br>\n <input type=\"text\" class=\"input\" name=\"nameundvorname\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"datumuhrzeit\">Datum Uhrzeit Unfall:<\/label><br>\n <input type=\"datetime-local\" class=\"input\" id=\"datumuhrzeitunfall\" name=\"datumuhrzeitunfall\"\n value=\"2026-02-04T14:30\"\n min=\"2026-02-01T00:00\"\n max=\"2026-12-31T23:59\" required\n style=\"background-color: #e0e0e0; color: #555;\">\n <br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"Ort Unfall\">Ort des Unfalls:<\/label><br>\n \n <label><input type=\"radio\" name=\"ortunfall\" value=\"post\" checked> Post<\/label><br>\n <label><input type=\"radio\" name=\"ortunfall\" value=\"eingangsbereich\"> Eingangsbereich<\/label><br>\n <label><input type=\"radio\" name=\"ortunfall\" value=\"produktion\"> Produktion<\/label><br>\n \n <\/div>\n <div class=\"form-group\">\n <label for=\"Unfallhergang\">Unfallhergang:<\/label><br>\n <input name=\"unfallhergang\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"artundumfang\">Art und Umfang:<\/label><br>\n <input name=\"artundumfang\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"1stehilfe\">Datum Erste Hilfe:<\/label><br>\n <input type=\"datetime-local\" class=\"input\" id=\"1stehilfe\" name=\"1stehilfe\"\n value=\"2026-02-04T14:30\"\n min=\"2026-02-01T00:00\"\n max=\"2026-12-31T23:59\" required><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"VorundNachname1sthilfe\">Vor und Nachname erste Hilfe:<\/label><br>\n <input name=\"VorundNachname1sthilfe\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"Artundweise1hilfe\">Art und Weise erste Hilfe:<\/label><br>\n <input name=\"Artundweise1hilfe\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"zeugen\">Zeugen:<\/label><br>\n <input name=\"zeugen\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"sonstiges\">Sonstiges:<\/label><br>\n <input name=\"sonstiges\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"formularbestmail\">Formular Ersteller Mail:<\/label><br>\n <input name=\"formularbestmail\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"file\">W\u00e4hle eine Datei:<\/label><br><br>\n <input type=\"file\" class=\"input\" name=\"file\" id=\"file\" required><br><br>\n <\/div>\n <div class=\"form-group\">\n <div id=\"signature-pad\" class=\"m-signature-pad\">\n <div class=\"m-signature-pad--body\">\n <canvas><\/canvas>\n <input type=\"hidden\" name=\"signature\" id=\"signature\" value=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\" class=\"w3-btn w3-blue-grey\">Absenden<\/button>\n <button type=\"button\" class=\"w3-btn w3-black\" onclick=\"signaturePad.clear();\">L\u00f6schen<\/button>\n <button type=\"button\" class=\"w3-btn w3-red\" onclick=\"download('sig.png');\">Speichern<\/button>\n <\/div>\n <\/form>\n <script src=\"signature_pad.js\"><\/script>\n <script type=\"text\/javascript\">\n var wrapper = document.getElementById(\"signature-pad\"),\n canvas = wrapper.querySelector(\"canvas\"),\n signaturePad;\n \/*\n * Behandlung der Gr\u00f6\u00dfen\u00e4nderung der Unterschriftenfelds\n *\/\n function resizeCanvas() {\n var oldContent = signaturePad.toData();\n var ratio = Math.max(window.devicePixelRatio || 1, 1);\n canvas.width = canvas.offsetWidth * ratio;\n canvas.height = canvas.offsetHeight * ratio;\n canvas.getContext(\"2d\").scale(ratio, ratio);\n signaturePad.clear();\n signaturePad.fromData(oldContent);\n }\n \/**\n * Speichern des Inhaltes als Bild\n *\/\n function download(filename) {\n var blob = dataURLToBlob(signaturePad.toDataURL());\n var url = window.URL.createObjectURL(blob);\n var a = document.createElement(\"a\");\n a.style = \"display: none\";\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n }\n \/**\n * DataURL in Bin\u00e4r umwandeln\n *\/\n function dataURLToBlob(dataURL) {\n \/\/ Code von https:\/\/github.com\/ebidel\/filer.js\n var parts = dataURL.split(';base64,');\n var contentType = parts[0].split(\":\")[1];\n var raw = window.atob(parts[1]);\n var rawLength = raw.length;\n var uInt8Array = new Uint8Array(rawLength);\n for (var i = 0; i < rawLength; ++i) {\n uInt8Array[i] = raw.charCodeAt(i);\n }\n return new Blob([uInt8Array], { type: contentType });\n }\n \/**\n * Behanlung beim Absenden, damit der Inhalt des Canvas\n * \u00fcbermittelt werden kann, wird dieser als DataURL dem\n * versteckten Feld zugewiesen\n *\/\n function submitForm() {\n \/\/Unterschrift in verstecktes Feld \u00fcbernehmen\n document.getElementById('signature').value = signaturePad.toDataURL();\n }\n var signaturePad = new SignaturePad(canvas);\n signaturePad.minWidth = 1; \/\/minimale Breite des Stiftes\n signaturePad.maxWidth = 3; \/\/maximale Breite des Stiftes\n signaturePad.penColor = \"#000000\"; \/\/Stiftfarbe\n signaturePad.backgroundColor = \"#C0C0C0\"; \/\/Hintergrundfarbe\n window.onresize = resizeCanvas;\n resizeCanvas();\n <\/script>\n<\/body>\n<\/html><\/div>\n <div class=\"u-custom-php u-custom-php-2\" ><!DOCTYPE html>\n<html lang=\"de\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Unterschriftenfeld mit Signature Pad<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n #signature-pad {\n border: 2px solid #ccc;\n border-radius: 5px;\n width: 400px;\n height: 200px;\n }\n .buttons {\n margin-top: 10px;\n }\n button {\n margin-right: 10px;\n padding: 8px 12px;\n font-size: 14px;\n }\n<\/style>\n<\/head>\n<body>\n<h2>Bitte unterschreiben:<\/h2>\n\n<canvas id=\"signature-pad\" width=\"400\" height=\"200\"><\/canvas>\n<div class=\"buttons\">\n <button id=\"clear\">L\u00f6schen<\/button>\n <button id=\"save\">Speichern<\/button>\n<\/div>\n\n<p><strong>Base64-Daten:<\/strong><\/p>\n<textarea id=\"output\" rows=\"5\" cols=\"60\" readonly><\/textarea>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/signature_pad@4.1.7\/dist\/signature_pad.umd.min.js\"><\/script>\n<script>\n \/\/ Canvas-Element holen\n const canvas = document.getElementById('signature-pad');\n \/\/ SignaturePad initialisieren\n const signaturePad = new SignaturePad(canvas, {\n backgroundColor: 'rgb(255, 255, 255)', \/\/ Wei\u00dfer Hintergrund\n penColor: 'rgb(0, 0, 0)' \/\/ Schwarze Tinte\n });\n \/\/ L\u00f6schen-Button\n document.getElementById('clear').addEventListener('click', () => {\n signaturePad.clear();\n document.getElementById('output').value = '';\n });\n \/\/ Speichern-Button\n document.getElementById('save').addEventListener('click', () => {\n if (signaturePad.isEmpty()) {\n alert('Bitte zuerst unterschreiben.');\n return;\n }\n \/\/ Unterschrift als PNG-Base64 exportieren\n const dataURL = signaturePad.toDataURL('image\/png');\n document.getElementById('output').value = dataURL;\n \/\/ Beispiel: An Server senden (AJAX \/ Fetch)\n \/*\n fetch('\/upload-signature', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ signature: dataURL })\n }).then(res => res.json())\n .then(data => console.log(data));\n *\/\n });\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n <\/div>\n <\/section>\n <section class=\"u-clearfix u-container-align-center u-image u-lightbox u-parallax u-section-3\" id=\"block-2\" data-href=\"https:\/\/au.joomlinos.de\/au-test\/index.html\" data-image-width=\"1000\" data-image-height=\"1529\" style=\"background-image: url("https:\/\/au.joomlinos.de\/wp-content\/uploads\/2026\/03\/24770152_101.png");\">\n <div class=\"u-clearfix u-sheet u-sheet-1\"><\/div>\n <\/section>\n \n \n \n \n","protected":false},"excerpt":{"rendered":"<p>Arbeitsunfall melden Arbeitsunfall melden Angaben zum Hergang des Unfalls bzw. des Gesundheitsschadens: Name und Vorname der verletzten Person: Datum Uhrzeit Unfall: Ort des Unfalls: Post Eingangsbereich Produktion Unfallhergang: Art und Umfang: Datum Erste Hilfe: Vor und Nachname erste Hilfe: Art und Weise erste Hilfe: Zeugen: Sonstiges: Formular Ersteller Mail: W\u00e4hle eine Datei: Absenden L\u00f6schen Speichern … <a href=\"https:\/\/au.joomlinos.de\/index.php\/arbeitsunfaelle-melden\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> „Arbeitsunf\u00e4lle melden“<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-764","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":14,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/media?parent=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n $\"\"$ \n

\n\n\n \n Arbeitsunfall melden<\/title>\n <meta name=\"description\" content=\"Unterschriftenfeld in HTML mit Signature Pad\" \/>\n <link href=\"w3.css\" type=\"text\/css\" rel=\"stylesheet\" \/>\n <style>\n body {\n margin: 0px;\n font-family: 'Trebuchet MS';\n font-size: 25px;\n padding: 20px;\n background-color: #fff;\n height: max-content;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \/* body {\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n background-color: white;\n font-size: 10px;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n width: stretch;\n }\n *\/\n .form {\n background: #efeded;\n padding: 20px;\n border-radius: 8px;\n width: 1000px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n h2 {\n text-align: left;\n margin-bottom: 20px;\n }\n label {\n margin-bottom: 5px;\n }\n input, select, textarea, button {\n background: #efeded;\n padding: 10px;\n border: none;\n border-radius: 4px;\n width: 600px;\n }\n button {\n background-color: #007BFF;\n color: white;\n border: none;\n cursor: pointer;\n transition: background 0.3s;\n }\n button:hover {\n background-color: #0056b3;\n }\n @media (min-width: 768px) {\n .form-row {\n display: flex;\n gap: 20px;\n }\n .form-row .form-group {\n flex: 1;\n }\n }\n \/*\n **********************************************************\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n }\n .form-container {\n max-width: 500px;\n margin: 30px auto;\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n h2 {\n text-align: center;\n margin-bottom: 20px;\n }\n label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n }\n input, textarea, select, button {\n width: 100%;\n padding: 10px;\n margin-top: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 1rem;\n }\n button {\n background-color: #28a745;\n color: white;\n border: none;\n cursor: pointer;\n margin-top: 15px;\n }\n button:hover {\n background-color: #218838;\n }\n @media (max-width: 600px) {\n .form-container {\n margin: 15px;\n padding: 15px;\n }\n }\n **********************************************************\n *\/\n \/* body {\n margin: 0;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n background-color: white;\n font-size: larger;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n width:stretch;\n }\n .form {\n display: flex;\n flex-direction: column;\n gap: 200px;\n }\n .input {\n background-color: #e0e0e0;\n border: 0px solid #999;\n color: #333;\n padding: 10px;\n width:stretch;\n }\n *\/\n .radio-option {\n display: flex;\n align-items: normal;\n background-color: #f4f4f4;\n padding: 15px; \/* Gro\u00dfe Klickfl\u00e4che *\/\n border-radius: 8px;\n cursor: pointer;\n }\n \/* Radio Button vergr\u00f6\u00dfern f\u00fcr den Daumen *\/\n .radio-option input {\n width: 20px;\n height: 20px;\n margin-right: 15px;\n }\n .radio-option label {\n font-size: 16px;\n cursor: pointer;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <form action=\"process_1.php\" method=\"POST\" name=\"DAFORM\" onSubmit=\"lowercase\" enctype=\"multipart\/form-data\" target=\"_self\">\n <div class=\"form-group\">\n <h2>Arbeitsunfall melden<\/h2><br \/>\n <h4>Angaben zum Hergang des Unfalls bzw. des Gesundheitsschadens:<\/h4><br \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"nameundvorname\">Name und Vorname der verletzten Person:<\/label><br>\n <input type=\"text\" class=\"input\" name=\"nameundvorname\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"datumuhrzeit\">Datum Uhrzeit Unfall:<\/label><br>\n <input type=\"datetime-local\" class=\"input\" id=\"datumuhrzeitunfall\" name=\"datumuhrzeitunfall\"\n value=\"2026-02-04T14:30\"\n min=\"2026-02-01T00:00\"\n max=\"2026-12-31T23:59\" required\n style=\"background-color: #e0e0e0; color: #555;\">\n <br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"Ort Unfall\">Ort des Unfalls:<\/label><br>\n \n <label><input type=\"radio\" name=\"ortunfall\" value=\"post\" checked> Post<\/label><br>\n <label><input type=\"radio\" name=\"ortunfall\" value=\"eingangsbereich\"> Eingangsbereich<\/label><br>\n <label><input type=\"radio\" name=\"ortunfall\" value=\"produktion\"> Produktion<\/label><br>\n \n <\/div>\n <div class=\"form-group\">\n <label for=\"Unfallhergang\">Unfallhergang:<\/label><br>\n <input name=\"unfallhergang\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"artundumfang\">Art und Umfang:<\/label><br>\n <input name=\"artundumfang\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"1stehilfe\">Datum Erste Hilfe:<\/label><br>\n <input type=\"datetime-local\" class=\"input\" id=\"1stehilfe\" name=\"1stehilfe\"\n value=\"2026-02-04T14:30\"\n min=\"2026-02-01T00:00\"\n max=\"2026-12-31T23:59\" required><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"VorundNachname1sthilfe\">Vor und Nachname erste Hilfe:<\/label><br>\n <input name=\"VorundNachname1sthilfe\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"Artundweise1hilfe\">Art und Weise erste Hilfe:<\/label><br>\n <input name=\"Artundweise1hilfe\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"zeugen\">Zeugen:<\/label><br>\n <input name=\"zeugen\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"sonstiges\">Sonstiges:<\/label><br>\n <input name=\"sonstiges\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"formularbestmail\">Formular Ersteller Mail:<\/label><br>\n <input name=\"formularbestmail\" class=\"input\"><br><br>\n <\/div>\n <div class=\"form-group\">\n <label for=\"file\">W\u00e4hle eine Datei:<\/label><br><br>\n <input type=\"file\" class=\"input\" name=\"file\" id=\"file\" required><br><br>\n <\/div>\n <div class=\"form-group\">\n <div id=\"signature-pad\" class=\"m-signature-pad\">\n <div class=\"m-signature-pad--body\">\n <canvas><\/canvas>\n <input type=\"hidden\" name=\"signature\" id=\"signature\" value=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <button type=\"submit\" class=\"w3-btn w3-blue-grey\">Absenden<\/button>\n <button type=\"button\" class=\"w3-btn w3-black\" onclick=\"signaturePad.clear();\">L\u00f6schen<\/button>\n <button type=\"button\" class=\"w3-btn w3-red\" onclick=\"download('sig.png');\">Speichern<\/button>\n <\/div>\n <\/form>\n <script src=\"signature_pad.js\"><\/script>\n <script type=\"text\/javascript\">\n var wrapper = document.getElementById(\"signature-pad\"),\n canvas = wrapper.querySelector(\"canvas\"),\n signaturePad;\n \/*\n * Behandlung der Gr\u00f6\u00dfen\u00e4nderung der Unterschriftenfelds\n *\/\n function resizeCanvas() {\n var oldContent = signaturePad.toData();\n var ratio = Math.max(window.devicePixelRatio || 1, 1);\n canvas.width = canvas.offsetWidth * ratio;\n canvas.height = canvas.offsetHeight * ratio;\n canvas.getContext(\"2d\").scale(ratio, ratio);\n signaturePad.clear();\n signaturePad.fromData(oldContent);\n }\n \/**\n * Speichern des Inhaltes als Bild\n *\/\n function download(filename) {\n var blob = dataURLToBlob(signaturePad.toDataURL());\n var url = window.URL.createObjectURL(blob);\n var a = document.createElement(\"a\");\n a.style = \"display: none\";\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n }\n \/**\n * DataURL in Bin\u00e4r umwandeln\n *\/\n function dataURLToBlob(dataURL) {\n \/\/ Code von https:\/\/github.com\/ebidel\/filer.js\n var parts = dataURL.split(';base64,');\n var contentType = parts[0].split(\":\")[1];\n var raw = window.atob(parts[1]);\n var rawLength = raw.length;\n var uInt8Array = new Uint8Array(rawLength);\n for (var i = 0; i < rawLength; ++i) {\n uInt8Array[i] = raw.charCodeAt(i);\n }\n return new Blob([uInt8Array], { type: contentType });\n }\n \/**\n * Behanlung beim Absenden, damit der Inhalt des Canvas\n * \u00fcbermittelt werden kann, wird dieser als DataURL dem\n * versteckten Feld zugewiesen\n *\/\n function submitForm() {\n \/\/Unterschrift in verstecktes Feld \u00fcbernehmen\n document.getElementById('signature').value = signaturePad.toDataURL();\n }\n var signaturePad = new SignaturePad(canvas);\n signaturePad.minWidth = 1; \/\/minimale Breite des Stiftes\n signaturePad.maxWidth = 3; \/\/maximale Breite des Stiftes\n signaturePad.penColor = \"#000000\"; \/\/Stiftfarbe\n signaturePad.backgroundColor = \"#C0C0C0\"; \/\/Hintergrundfarbe\n window.onresize = resizeCanvas;\n resizeCanvas();\n <\/script>\n<\/body>\n<\/html><\/div>\n <div class=\"u-custom-php u-custom-php-2\" ><!DOCTYPE html>\n<html lang=\"de\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Unterschriftenfeld mit Signature Pad<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n }\n #signature-pad {\n border: 2px solid #ccc;\n border-radius: 5px;\n width: 400px;\n height: 200px;\n }\n .buttons {\n margin-top: 10px;\n }\n button {\n margin-right: 10px;\n padding: 8px 12px;\n font-size: 14px;\n }\n<\/style>\n<\/head>\n<body>\n<h2>Bitte unterschreiben:<\/h2>\n\n<canvas id=\"signature-pad\" width=\"400\" height=\"200\"><\/canvas>\n<div class=\"buttons\">\n <button id=\"clear\">L\u00f6schen<\/button>\n <button id=\"save\">Speichern<\/button>\n<\/div>\n\n<p><strong>Base64-Daten:<\/strong><\/p>\n<textarea id=\"output\" rows=\"5\" cols=\"60\" readonly><\/textarea>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/signature_pad@4.1.7\/dist\/signature_pad.umd.min.js\"><\/script>\n<script>\n \/\/ Canvas-Element holen\n const canvas = document.getElementById('signature-pad');\n \/\/ SignaturePad initialisieren\n const signaturePad = new SignaturePad(canvas, {\n backgroundColor: 'rgb(255, 255, 255)', \/\/ Wei\u00dfer Hintergrund\n penColor: 'rgb(0, 0, 0)' \/\/ Schwarze Tinte\n });\n \/\/ L\u00f6schen-Button\n document.getElementById('clear').addEventListener('click', () => {\n signaturePad.clear();\n document.getElementById('output').value = '';\n });\n \/\/ Speichern-Button\n document.getElementById('save').addEventListener('click', () => {\n if (signaturePad.isEmpty()) {\n alert('Bitte zuerst unterschreiben.');\n return;\n }\n \/\/ Unterschrift als PNG-Base64 exportieren\n const dataURL = signaturePad.toDataURL('image\/png');\n document.getElementById('output').value = dataURL;\n \/\/ Beispiel: An Server senden (AJAX \/ Fetch)\n \/*\n fetch('\/upload-signature', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ signature: dataURL })\n }).then(res => res.json())\n .then(data => console.log(data));\n *\/\n });\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n <\/div>\n <\/section>\n <section class=\"u-clearfix u-container-align-center u-image u-lightbox u-parallax u-section-3\" id=\"block-2\" data-href=\"https:\/\/au.joomlinos.de\/au-test\/index.html\" data-image-width=\"1000\" data-image-height=\"1529\" style=\"background-image: url("https:\/\/au.joomlinos.de\/wp-content\/uploads\/2026\/03\/24770152_101.png");\">\n <div class=\"u-clearfix u-sheet u-sheet-1\"><\/div>\n <\/section>\n \n \n \n \n","protected":false},"excerpt":{"rendered":"<p>Arbeitsunfall melden Arbeitsunfall melden Angaben zum Hergang des Unfalls bzw. des Gesundheitsschadens: Name und Vorname der verletzten Person: Datum Uhrzeit Unfall: Ort des Unfalls: Post Eingangsbereich Produktion Unfallhergang: Art und Umfang: Datum Erste Hilfe: Vor und Nachname erste Hilfe: Art und Weise erste Hilfe: Zeugen: Sonstiges: Formular Ersteller Mail: W\u00e4hle eine Datei: Absenden L\u00f6schen Speichern … <a href=\"https:\/\/au.joomlinos.de\/index.php\/arbeitsunfaelle-melden\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> „Arbeitsunf\u00e4lle melden“<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-764","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/comments?post=764"}],"version-history":[{"count":14,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/pages\/764\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/au.joomlinos.de\/index.php\/wp-json\/wp\/v2\/media?parent=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}