25 lines
1.1 KiB
Svelte
25 lines
1.1 KiB
Svelte
<script>
|
|
import { buzzer } from '../lib/buzzerStore';
|
|
import { CpuIcon } from 'phosphor-svelte';
|
|
</script>
|
|
<div class="h-48 bg-indigo-950/20 border border-indigo-500/20 rounded-[2rem] p-6 relative overflow-hidden shrink-0">
|
|
<div class="absolute top-6 right-6 text-indigo-500 opacity-20">
|
|
<CpuIcon class="w-12 h-12" weight="fill" />
|
|
</div>
|
|
<h3 class="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-4">
|
|
Device Info
|
|
</h3>
|
|
<div class="text-[11px] font-mono text-slate-400 space-y-1 relative z-10 transition-all duration-300 {!$buzzer.connected ? 'blur-[1px] opacity-30 grayscale pointer-events-none' : ''}">
|
|
<p>
|
|
Firmware: <span class="text-indigo-300">{$buzzer.version}</span>
|
|
</p>
|
|
<p>
|
|
Protocol: <span class="text-indigo-300">{$buzzer.protocol}</span>
|
|
</p>
|
|
<p>
|
|
Status: <span class="{$buzzer.connected ? 'text-emerald-400' : 'text-red-400'}">
|
|
{$buzzer.connected ? 'Confirmed' : 'Disconnected'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div> |