101 lines
5.1 KiB
PHP
101 lines
5.1 KiB
PHP
|
<div class="min-h-screen bg-black">
|
||
|
|
@if ($needsOnboarding)
|
||
|
|
<div class="min-h-screen flex items-center justify-center p-4">
|
||
|
|
<div class="w-full max-w-md">
|
||
|
|
<div class="border-2 border-red-500 bg-black shadow-[0_0_20px_rgba(239,68,68,0.3)] p-8">
|
||
|
|
<form wire:submit="initialise" class="space-y-4">
|
||
|
|
<label for="starting-value" class="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||
|
|
> Starting Value
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="starting-value"
|
||
|
|
type="number"
|
||
|
|
min="0"
|
||
|
|
step="1"
|
||
|
|
autofocus
|
||
|
|
wire:model="value"
|
||
|
|
class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red px-3 py-2"
|
||
|
|
>
|
||
|
|
@error('value')
|
||
|
|
<p class="text-red-400 font-mono text-xs">{{ $message }}</p>
|
||
|
|
@enderror
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="w-full bg-red-500 hover:bg-red-500 text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red px-4 py-2"
|
||
|
|
>
|
||
|
|
[INITIALIZE]
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@else
|
||
|
|
<div class="w-full max-w-4xl mx-auto px-4">
|
||
|
|
<div class="pt-32">
|
||
|
|
<div
|
||
|
|
wire:click="increment"
|
||
|
|
class="w-full text-center select-none cursor-pointer bg-black text-red-500 px-8 py-12 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<div class="relative w-full flex items-center justify-center">
|
||
|
|
<div
|
||
|
|
class="relative z-10 text-[8rem] md:text-[12rem] lg:text-[16rem] font-digital font-normal text-red-500 drop-shadow-[0_0_10px_rgba(239,68,68,0.8)] filter brightness-110 leading-none transition-all duration-300"
|
||
|
|
style="letter-spacing: 0.15em"
|
||
|
|
>{{ $count }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
wire:click="edit"
|
||
|
|
class="text-red-400/60 hover:text-red-400 font-mono text-xs uppercase tracking-widest transition-colors"
|
||
|
|
>
|
||
|
|
[SET VALUE]
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if ($editing)
|
||
|
|
<div class="bg-black p-8">
|
||
|
|
<div class="w-full border-4 border-red-500 p-6 bg-black glow-red">
|
||
|
|
<form wire:submit="save" class="space-y-4">
|
||
|
|
<label for="count" class="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||
|
|
> Set Value
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="count"
|
||
|
|
type="number"
|
||
|
|
min="0"
|
||
|
|
step="1"
|
||
|
|
autofocus
|
||
|
|
wire:model="value"
|
||
|
|
class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red px-3 py-2"
|
||
|
|
>
|
||
|
|
@error('value')
|
||
|
|
<p class="text-red-400 font-mono text-xs">{{ $message }}</p>
|
||
|
|
@enderror
|
||
|
|
|
||
|
|
<div class="flex gap-3 pt-2">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="flex-1 bg-red-500 hover:bg-red-500 text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red px-4 py-2"
|
||
|
|
>
|
||
|
|
[EXECUTE]
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
wire:click="cancel"
|
||
|
|
class="flex-1 bg-black border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300 font-mono text-sm font-bold rounded-none border-2 uppercase tracking-wider transition-all glow-red px-4 py-2"
|
||
|
|
>
|
||
|
|
[ABORT]
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|