96 lines
3.6 KiB
Plaintext
96 lines
3.6 KiB
Plaintext
---
|
|
import "../styles/global.css";
|
|
import { Icon } from "astro-icon/components";
|
|
import DiskUsage from "../components/DiskUsage.svelte";
|
|
import FileRow from "../components/FileRow.astro";
|
|
import StatusModal from "../components/StatusModal.astro";
|
|
import ConnectButton from "../components/ConnectButton.svelte";
|
|
import SerialWarning from "../components/SerialWarning.svelte";
|
|
import FileStorage from "../components/FileStorage.svelte";
|
|
import DeviceInfo from "../components/DeviceInfo.svelte";
|
|
---
|
|
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Buzzer Dashboard v2</title>
|
|
</head>
|
|
<body class="bg-slate-900 selection:bg-blue-500/30">
|
|
<SerialWarning client:load />
|
|
<StatusModal visible={false} />
|
|
|
|
<div class="min-h-screen max-w-[1600px] min-w-[1024px] mx-auto text-slate-100 flex flex-col font-sans">
|
|
<header
|
|
class="h-16 border-b border-slate-700 bg-slate-800 grid grid-cols-3 items-center px-8 shrink-0 shadow-lg">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-3 w-3 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981] animate-pulse"></div>
|
|
<h1 class="font-bold tracking-tighter text-xl italic text-white uppercase">
|
|
EDIs_BUZZER <span class="text-slate-600 not-italic text-xs font-mono ml-2">PROT_V2</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="justify-self-center">
|
|
<DiskUsage client:load />
|
|
</div>
|
|
|
|
<div class="justify-self-end">
|
|
<ConnectButton client:load />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 flex overflow-hidden p-6 gap-6 bg-gradient-to-b from-slate-900 to-slate-950">
|
|
<section class="flex-1 flex flex-col gap-6">
|
|
<div
|
|
class="h-48 bg-slate-800/30 border-2 border-dashed border-slate-700 rounded-[2rem] flex flex-col items-center justify-center group hover:border-blue-500/40 transition-all cursor-pointer">
|
|
<Icon
|
|
name="ph:cloud-arrow-up-fill"
|
|
class="text-4xl text-slate-700 group-hover:text-blue-500 mb-2 transition-colors"
|
|
/>
|
|
<span
|
|
class="text-slate-500 font-bold uppercase text-[10px] tracking-[0.2em] group-hover:text-blue-400 transition-colors"
|
|
>Drop PC Files</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex-1 bg-slate-800/50 rounded-[2rem] border border-slate-700 flex flex-col overflow-hidden shadow-2xl">
|
|
<div
|
|
class="p-5 border-b border-slate-700 bg-slate-800/80 font-black text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
|
Local Queue
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
|
<FileRow name="Intro_Song.mp3" size="1.2 MB" />
|
|
<FileRow name="Buzzer_Hit.wav" size="450 KB" selected={true} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex-1 flex flex-col gap-6 min-h-0">
|
|
<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">
|
|
<Icon name="ph:cpu-fill" class="w-12 h-12" />
|
|
</div>
|
|
<h3 class="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-4">
|
|
Device Info
|
|
</h3>
|
|
<DeviceInfo client:load />
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<FileStorage client:load />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer
|
|
class="h-10 bg-black/40 border-t border-slate-800 px-8 flex items-center justify-between font-mono text-[9px] text-emerald-500/50 uppercase tracking-widest">
|
|
<div class="flex items-center gap-2">
|
|
<Icon name="ph:terminal-window-fill" class="w-4 h-4" />
|
|
<span>Status: Idle</span>
|
|
</div>
|
|
<span class="text-slate-700 italic font-sans">Protocol V2.0 Active</span>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|