function generateInlineHtml() {
try {
return `
<style>
body {
font-family: ‘Arial’, sans-serif;
background-color: #f7f7f7;
color: #333;
padding: 20px;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h2 {
text-align: center;
color: #0073e6;
}
#signature-pad {
border: 2px solid #0073e6;
border-radius: 5px;
width: 100%;
height: 300px;
touch-action: none;
background-color: #fafafa;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
background-color: #0073e6;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #005bb5;
}
button:disabled {
background-color: #ccc;
}
#clear-btn {
background-color: #ff6666;
}
#clear-btn:hover {
background-color: #cc4d4d;
}
input[type=”hidden”] {
display: none;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #777;
}
</style>
<div class=”container”>
<h2>Capture Your Signature</h2>
<canvas id=”signature-pad”></canvas>
<div class=”button-container”>
<button type=”button” id=”clear-btn”>Clear</button>
<button type=”submit” id=”submit-btn”>Submit</button>
</div>
<input type=”hidden” id=”signature” name=”signature”>
</div>
<script src=”https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js”></script>
<script>
let canvas = document.getElementById(“signature-pad”);
let signaturePad = new SignaturePad(canvas, { penColor: “black” });
// Resize the canvas to match the container size
window.addEventListener(“resize”, resizeCanvas);
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
signaturePad.clear();
}
resizeCanvas();
// Handle the clear button
document.getElementById(“clear-btn”).addEventListener(“click”, function () {
signaturePad.clear();
});
// Capture the signature and submit it
document.getElementById(“submit-btn”).addEventListener(“click”, function () {
if (!signaturePad.isEmpty()) {
let signatureData = signaturePad.toDataURL(); // Get base64 encoded image data
document.getElementById(“signature”).value = signatureData; // Set the base64 data to the hidden field
document.forms[0].submit(); // Submit the form to the server
} else {
alert(“Please provide a signature”);
}
});
</script>
`;
} catch (error) {
log.error(‘Error @generateInlineHtml’, e);
}
}