49 lines
2.0 KiB
PHP
49 lines
2.0 KiB
PHP
<div style="w-full">
|
|
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
|
|
<h2 class="text-xl text-center mx-auto py-4 px-4">{{ ctrans('texts.sign_here_ux_tip') }}</h2>
|
|
<canvas id="signature-pad" class="border border-gray-300 w-full h-64"></canvas>
|
|
<div class="flex justify-between px-4 py-4">
|
|
<button id="clear-signature" class="px-4 bg-red-500 text-white rounded">{{ ctrans('texts.clear') }}</button>
|
|
<button id="save-button" class="button button-primary bg-primary hover:bg-primary-darken inline-flex items-center">{{ ctrans('texts.next') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@assets
|
|
<script src="{{ asset('vendor/signature_pad@5/signature_pad.umd.min.js') }}"></script>
|
|
@endassets
|
|
@script
|
|
<script>
|
|
|
|
const canvas = document.getElementById('signature-pad');
|
|
const signaturePad = new SignaturePad(canvas);
|
|
|
|
// Resize canvas to fit the parent container
|
|
function resizeCanvas() {
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
canvas.getContext("2d").scale(ratio, ratio);
|
|
}
|
|
|
|
window.addEventListener('resize', resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
document.getElementById('save-button').addEventListener('click', function() {
|
|
if (!signaturePad.isEmpty()) {
|
|
$wire.dispatch('signature-captured', {base64: signaturePad.toDataURL()});
|
|
|
|
} else {
|
|
alert('Please provide a signature first.');
|
|
}
|
|
});
|
|
|
|
document.getElementById('clear-signature').addEventListener('click', function() {
|
|
signaturePad.clear();
|
|
});
|
|
|
|
|
|
</script>
|
|
@endscript
|
|
</div> |