44 lines
2.8 KiB
PHP
44 lines
2.8 KiB
PHP
<div class="flex flex-col">
|
|
<header class="flex items-center gap-3 px-5 py-4 border-b border-line-soft">
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-accent/10 text-accent shrink-0"><x-icon name="bolt" :size="18" /></span>
|
|
<h2 class="text-[15px] font-bold text-ink truncate">{{ $this->entity->device->name }}</h2>
|
|
<button type="button" wire:click="closeModal" class="ml-auto grid place-items-center w-9 h-9 rounded-lg text-ink-3 hover:bg-raised hover:text-ink transition-colors" aria-label="{{ __('common.close') }}">
|
|
<x-icon name="close" :size="18" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="p-5 flex flex-col gap-5">
|
|
{{-- brightness --}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between text-[12px] font-semibold text-ink-2">
|
|
<span>{{ __('panel.brightness') }}</span>
|
|
<span class="font-mono tabular-nums text-ink">{{ $brightness }}%</span>
|
|
</div>
|
|
<input type="range" min="1" max="100" wire:model.live="brightness"
|
|
class="w-full accent-[color:var(--color-accent)]">
|
|
</div>
|
|
|
|
{{-- color --}}
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-[12px] font-semibold text-ink-2">{{ __('panel.color') }}</span>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@foreach ($presets as $preset)
|
|
<button type="button" wire:click="$set('color', '{{ $preset }}')"
|
|
@style(["background-color: {$preset}"])
|
|
@class(['w-8 h-8 rounded-full border-2 transition-transform hover:scale-110', 'border-ink' => strtoupper($color) === strtoupper($preset), 'border-line-soft' => strtoupper($color) !== strtoupper($preset)])
|
|
aria-label="{{ $preset }}"></button>
|
|
@endforeach
|
|
<label class="w-8 h-8 rounded-full border-2 border-line-soft grid place-items-center cursor-pointer overflow-hidden relative">
|
|
<input type="color" wire:model.live="color" class="absolute inset-0 opacity-0 cursor-pointer">
|
|
<x-icon name="plus" :size="14" class="text-ink-3" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 pt-1">
|
|
<button type="button" wire:click="turnOff" class="rounded-lg border border-line px-3.5 py-2.5 text-[13px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">{{ __('devices.off') }}</button>
|
|
<button type="button" wire:click="apply" class="ml-auto rounded-lg bg-accent px-4 py-2.5 text-[13px] font-bold text-base hover:brightness-110 transition-[filter]">{{ __('panel.apply') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|