Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update PhotoUploader.vue

Browse Source
This commit is contained in:
Baghaztra 2025-10-27 22:00:16 +07:00
parent 3ef626d97a
commit ce8218dc47
1 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/PhotoUploader.vue
View File

@ -135,12 +135,12 @@
<!-- Camera Modal -->
<div
v-if="showCamera"
class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]"
class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999] p-4"
>
<div class="bg-white rounded-lg shadow-lg p-4 relative">
<div class="bg-white rounded-lg shadow-lg p-4 relative w-full max-w-md">
<h3 class="text-lg font-semibold mb-3 text-center">Ambil Foto</h3>
<div class="relative bg-black rounded overflow-hidden" style="width: 400px; height: 400px;">
<div class="relative bg-black rounded overflow-hidden w-full aspect-square">
<video
ref="video"
autoplay
@ -156,17 +156,8 @@
"
></video>
<!-- Square Crop Overlay with Darkened Outside Area -->
<!-- Square Crop Overlay -->
<div class="absolute inset-0 pointer-events-none">
<!-- Top dark overlay -->
<div class="absolute top-0 left-0 right-0 bg-black/60" style="height: 0;"></div>
<!-- Bottom dark overlay -->
<div class="absolute bottom-0 left-0 right-0 bg-black/60" style="height: 0;"></div>
<!-- Left dark overlay -->
<div class="absolute top-0 bottom-0 left-0 bg-black/60" style="width: 0;"></div>
<!-- Right dark overlay -->
<div class="absolute top-0 bottom-0 right-0 bg-black/60" style="width: 0;"></div>
<!-- Crop area border -->
<div class="absolute inset-0 border-2 border-blue-500"></div>
@ -181,11 +172,11 @@
</div>
<canvas ref="canvas" class="hidden"></canvas>
<div class="mt-3 flex justify-between">
<button @click="closeCamera" class="px-4 py-2 bg-gray-400 text-white rounded">
<div class="mt-3 flex justify-between gap-2">
<button @click="closeCamera" class="flex-1 px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition-colors">
Batal
</button>
<button @click="capturePhoto" class="px-4 py-2 bg-blue-500 text-white rounded">
<button @click="capturePhoto" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
Ambil Foto
</button>
</div>