64 lines
1.7 KiB
PHP
64 lines
1.7 KiB
PHP
<style>
|
|
.signature-pad-container canvas {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.signature-pad-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.signature-pad {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 2/1;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|
|
|
|
<div class="signature-pad-container mx-auto border p-4 max-w-md sm:max-w-lg lg:max-w-xl">
|
|
<h3 class="signature-title text-lg sm:text-xl font-semibold mb-2">{{ ucfirst($type) }}</h3>
|
|
<div class="w-full aspect-w-2 aspect-h-1">
|
|
<canvas
|
|
id="signature-pad-{{ $type }}"
|
|
class="signature-pad w-full h-full bg-white border rounded"
|
|
></canvas>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
class="input w-full border p-2 mt-2 rounded"
|
|
name="name-{{ $type }}"
|
|
id="name-{{ $type }}"
|
|
placeholder="Enter your name"
|
|
/>
|
|
<div class="button-container flex justify-between py-4">
|
|
<button
|
|
type="button"
|
|
id="save-{{ $type }}"
|
|
class="btn btn-primary px-4 py-2 rounded "
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="clear-{{ $type }}"
|
|
class="btn btn-light px-4 py-2 rounded"
|
|
>
|
|
Clear
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="delete-{{ $type }}"
|
|
class="btn btn-danger text-white px-4 py-2 rounded hover:bg-red-600"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<div id="status-{{ $type }}" class="status-message text-sm text-gray-600 mt-2"></div>
|
|
</div>
|