sync
This commit is contained in:
@@ -1,73 +1,95 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
import DiskUsage from '../components/DiskUsage.astro';
|
||||
import FileRow from '../components/FileRow.astro';
|
||||
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">
|
||||
<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 flex items-center justify-between 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">EDI_BUZZER <span class="text-slate-600 not-italic text-xs font-mono ml-2">PROT_V2</span></h1>
|
||||
</div>
|
||||
|
||||
<DiskUsage />
|
||||
<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} />
|
||||
|
||||
<button class="px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-black rounded-full transition-all shadow-lg hover:shadow-emerald-900/40 active:scale-95 uppercase tracking-widest">
|
||||
Connect
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<div class="justify-self-center">
|
||||
<DiskUsage client:load />
|
||||
</div>
|
||||
|
||||
<section class="w-16 flex flex-col items-center justify-center gap-8">
|
||||
<button class="w-14 h-14 bg-blue-600 rounded-2xl shadow-xl hover:bg-blue-500 active:scale-90 transition-all flex items-center justify-center text-2xl">⮕</button>
|
||||
<button class="w-14 h-14 bg-slate-700 rounded-2xl shadow-xl hover:bg-slate-600 active:scale-90 transition-all flex items-center justify-center text-2xl">⬅</button>
|
||||
</section>
|
||||
<div class="justify-self-end">
|
||||
<ConnectButton client:load />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="flex-1 flex flex-col gap-6">
|
||||
<div class="h-48 bg-indigo-950/20 border border-indigo-500/20 rounded-[2rem] p-6">
|
||||
<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">
|
||||
<p>Firmware: <span class="text-indigo-300">v0.1.12</span></p>
|
||||
<p>Build: <span class="text-indigo-300">NCS 3.2.1</span></p>
|
||||
</div>
|
||||
</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">Flash Storage /lfs/a</div>
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
||||
<FileRow name="confirm.bin" size="12 KB" isSystem={true} />
|
||||
<FileRow name="test_sound.bin" size="142 KB" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
</main>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<span>Status: Idle</span>
|
||||
<span class="text-slate-700 italic font-sans">Protocol V2.0 Active</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user