DigitalInfinity/NAI_Photobox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve visibility

Browse Source
This commit is contained in:
Alexander Gabriel 2026-06-28 16:06:31 +00:00
parent 5488a80b91
commit 8e1573a9ac
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/camera.blade.php
View File

@ -9,11 +9,13 @@
@endif
@livewireStyles
</head>
<body class="bg-gray-950 text-white min-h-screen flex flex-col items-center justify-center p-6">
<body class="bg-gray-950 text-white h-screen flex flex-col items-center p-6 overflow-hidden">
<h1 class="text-3xl font-bold mb-8 tracking-wide">Fotobox</h1>
<h1 class="shrink-0 text-3xl font-bold mb-8 tracking-wide">Fotobox</h1>
<div class="flex-1 min-h-0 w-full flex flex-col items-center">
@livewire('camera-capture')
</div>
@livewireScripts
</body>

16
resources/views/livewire/camera-capture.blade.php
View File

@ -1,10 +1,11 @@
<div class="flex flex-col items-center w-full"
<div class="flex flex-col items-center w-full h-full"
x-data="{ lightbox: null }"
x-on:keydown.escape.window="lightbox = null">
<div class="relative w-full max-w-2xl">
<div class="flex-1 min-h-0 w-full flex justify-center">
<div class="relative h-full" style="aspect-ratio: 16/9; max-width: 100%;">
<video id="video" autoplay playsinline
class="w-full rounded-2xl shadow-2xl bg-gray-900 aspect-video object-cover" style="transform: scaleX(-1);"></video>
class="w-full h-full rounded-2xl shadow-2xl bg-gray-900" style="transform: scaleX(-1);"></video>
<canvas id="canvas" class="hidden"></canvas>
@ -14,8 +15,9 @@
<span id="countdown-num" class="text-white font-bold drop-shadow-lg" style="font-size: 8rem; line-height: 1;"></span>
</div>
</div>
</div>
<div class="mt-6 w-full max-w-xs">
<div class="shrink-0 mt-6 w-full max-w-xs">
<select wire:model="photoprofileId"
class="w-full rounded-full bg-black/50 text-white border border-white/20 px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-white/40 appearance-none text-center">
@foreach ($photoprofiles as $id => $name)
@ -27,15 +29,15 @@
<button id="capture-btn"
wire:loading.attr="disabled"
@disabled($hasProcessing)
class="mt-8 px-10 py-4 bg-white text-gray-950 font-semibold text-lg rounded-full shadow-lg hover:bg-gray-200 active:scale-95 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed">
class="shrink-0 mt-8 px-10 py-4 bg-white text-gray-950 font-semibold text-lg rounded-full shadow-lg hover:bg-gray-200 active:scale-95 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove>{{ $hasProcessing ? 'Erstelle Bild...' : 'Foto aufnehmen' }}</span>
<span wire:loading>Saving…</span>
</button>
<div class="mt-4 text-sm text-gray-400 h-6">{{ $status }}</div>
<div class="shrink-0 mt-4 text-sm text-gray-400 h-6">{{ $status }}</div>
@if ($recentPhotos->isNotEmpty())
<div class="mt-10 w-full max-w-2xl">
<div class="shrink-0 mt-10 w-full max-w-2xl">
<h2 class="text-sm font-medium text-gray-400 mb-3 tracking-wide uppercase">Recent Photos</h2>
<div class="grid grid-cols-5 gap-2" @if($hasProcessing) wire:poll.2000ms @endif>
@foreach ($recentPhotos as $photo)