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

changed to smaller image again to still see previous images

Browse Source
This commit is contained in:
Alexander Gabriel 2026-07-01 11:22:48 +02:00
parent 52d0d725f5
commit dbff332800
2 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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