Typeface Lab Dashboard with Sidebar and Tester

<div class="flex h-screen overflow-hidden bg-black text-white selection:bg-zinc-700"
  style="--accent: #8FA89B; --bg-card: #0F0F0F; font-family: 'Inter', sans-serif;">
  <!-- Ambient Background Effects -->
  <div class="fixed top-[-10%] left-[20%] w-[60vw] h-[60vw] opacity-20 pointer-events-none"
    style="background: radial-gradient(circle, var(--accent) 0%, #5E7065 30%, transparent 70%); filter: blur(100px); z-index: 0;">
  </div>

  <!-- Sidebar Navigation -->
  <aside class="w-64 h-full border-r border-white/10 flex flex-col p-6 z-10 backdrop-blur-xl bg-black/20">
    <div class="flex items-center gap-3 mb-10">
      <div class="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden border border-white/10">
        <img src="https://i.pravatar.cc/150?u=type" class="w-full h-full object-cover" alt="User">
      </div>
      <span class="text-sm font-semibold tracking-tight">Vault.Type</span>
    </div>

    <nav class="space-y-8">
      <div>
        <label class="text-[10px] uppercase tracking-[0.2em] text-white/40 font-bold mb-4 block">Repository</label>
        <ul class="space-y-1 text-sm">
          <li
            class="flex items-center justify-between py-2 text-white cursor-pointer hover:text-white transition-colors">
            All Typefaces <div class="w-1 h-1 rounded-full bg-white"></div>
          </li>
          <li class="py-2 text-white/50 cursor-pointer hover:text-white transition-colors">Bookmarked</li>
          <li class="py-2 text-white/50 cursor-pointer hover:text-white transition-colors">System Local</li>
          <li class="py-2 text-white/50 cursor-pointer hover:text-white transition-colors">Cloud Sync</li>
        </ul>
      </div>

      <div>
        <label class="text-[10px] uppercase tracking-[0.2em] text-white/40 font-bold mb-4 block">Categories</label>
        <ul class="space-y-1 text-sm">
          <li
            class="flex items-center justify-between py-2 text-white/50 cursor-pointer hover:text-white transition-colors">
            Humanist <span class="text-[10px] opacity-30">142</span></li>
          <li
            class="flex items-center justify-between py-2 text-white/50 cursor-pointer hover:text-white transition-colors">
            Geometric <span class="text-[10px] opacity-30">98</span></li>
          <li
            class="flex items-center justify-between py-2 text-white/50 cursor-pointer hover:text-white transition-colors">
            Display <span class="text-[10px] opacity-30">56</span></li>
          <li
            class="flex items-center justify-between py-2 text-white/50 cursor-pointer hover:text-white transition-colors">
            Technical <span class="text-[10px] opacity-30">24</span></li>
        </ul>
      </div>
    </nav>

    <div class="mt-auto pt-6 border-t border-white/5 text-[11px] text-white/30 flex items-center gap-2">
      <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
      Database Optimized
    </div>
  </aside>

  <!-- Main Workspace -->
  <main class="flex-1 h-full overflow-y-auto z-10 relative flex flex-col">
    <header class="p-12 pb-8 flex items-end justify-between bg-gradient-to-b from-white/5 to-transparent">
      <div>
        <label class="text-[10px] uppercase tracking-[0.2em] text-white/40 font-bold mb-2 block">Archive</label>
        <h1 class="text-5xl font-light tracking-tighter mb-2">Typeface Lab</h1>
        <p class="text-sm text-white/40">320 active font families currently indexed.</p>
      </div>
      <div class="flex gap-4">
        <button class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all">
          <svg class="w-5 h-5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="1.5"/></svg>
        </button>
        <button class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center bg-white text-black hover:scale-105 transition-all">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4" stroke-width="2"/></svg>
        </button>
      </div>
    </header>

    <!-- Interactive Type Tester -->
    <section class="px-12 py-6 border-y border-white/5 flex items-center gap-8 bg-zinc-950/30" id="tester-container">
      <input type="text" id="main-tester" class="bg-transparent border-none text-xl w-full focus:outline-none placeholder:text-white/20" value="Typography endows language with a durable visual form.">
      <div class="flex items-center gap-4 whitespace-nowrap">
        <span class="text-[10px] uppercase tracking-widest text-white/40">Scale</span>
        <input type="range" id="size-slider" min="16" max="96" value="32" class="w-32 accent-white h-1 bg-zinc-800 rounded-full appearance-none cursor-pointer">
        <span id="size-label" class="text-[10px] w-8 font-mono opacity-60">32px</span>
      </div>
      <script>
        const slider = document.getElementById('size-slider');
        const label = document.getElementById('size-label');
        const tester = document.getElementById('main-tester');
        const previews = document.querySelectorAll('.font-preview');
        
        slider.addEventListener('input', (e) => {
          const val = e.target.value + 'px';
          label.textContent = val;
          tester.style.fontSize = val;
          document.querySelectorAll('.preview-text').forEach(el => el.style.fontSize = val);
        });
      </script>
    </section>

    <!-- Featured Selection -->
    <div class="px-12 pt-8">
      <label class="text-[10px] uppercase tracking-[0.2em] text-white/40 font-bold mb-6 block">Featured Releases</label>
      <div class="grid grid-cols-3 gap-px bg-white/5 border border-white/5 rounded-xl overflow-hidden shadow-2xl">
        <div class="bg-zinc-950 p-8 group hover:bg-zinc-900 transition-colors">
          <div class="flex justify-between items-start mb-12">
            <span class="font-medium text-sm">Canela</span>
            <span class="text-[10px] opacity-40">Display</span>
          </div>
          <div class="text-6xl mb-6 font-serif italic opacity-80 group-hover:opacity-100 transition-opacity">Ab</div>
          <p class="text-[11px] text-white/30 uppercase tracking-widest">Commercial Type</p>
        </div>
        <div class="bg-zinc-950 p-8 group hover:bg-zinc-900 transition-colors">
          <div class="flex justify-between items-start mb-12">
            <span class="font-medium text-sm">Pangram Mori</span>
            <span class="text-[10px] px-2 py-0.5 rounded-full border border-white/10">6 Styles</span>
          </div>
          <div class="text-6xl mb-6 font-bold opacity-80 group-hover:opacity-100 transition-opacity">Gg</div>
          <p class="text-[11px] text-white/30 uppercase tracking-widest">Pangram Pangram</p>
        </div>
        <div class="bg-zinc-950 p-8 group hover:bg-zinc-900 transition-colors relative overflow-hidden">
          <div class="absolute top-0 right-0 p-2 text-[8px] bg-white text-black font-bold uppercase">New</div>
          <div class="flex justify-between items-start mb-12">
            <span class="font-medium text-sm">Geist Mono</span>
            <span class="text-[10px] opacity-40">Variable</span>
          </div>
          <div class="text-6xl mb-6 font-mono opacity-80 group-hover:opacity-100 transition-opacity">0x</div>
          <p class="text-[11px] text-white/30 uppercase tracking-widest">Vercel Design</p>
        </div>
      </div>
    </div>

    <!-- Full Collection List -->
    <section class="p-12">
      <label class="text-[10px] uppercase tracking-[0.2em] text-white/40 font-bold mb-6 block">Master Collection</label>
      <div class="space-y-px bg-white/5 rounded-xl border border-white/5 overflow-hidden">

        <!-- Row Item -->
        <div
          class="grid grid-cols-[240px_1fr_120px] items-center px-8 py-10 bg-black hover:bg-zinc-950 transition-all group border-b border-white/5">
          <div class="flex flex-col gap-1">
            <span class="font-medium text-lg">Aeonik Pro</span>
            <span class="text-xs text-white/30">CoType™ Foundry</span>
            <div class="mt-3 flex gap-2">
              <span class="px-2 py-0.5 border border-white/10 rounded text-[9px] text-white/50 uppercase">Neo-Grotesque</span>
            </div>
          </div>
          <div class="preview-text truncate pr-12 text-3xl opacity-80 transition-all" style="font-family: sans-serif;">
            Typography endows language with a durable visual form.
          </div>
          <div class="flex justify-end items-center gap-6">
            <span class="text-xs font-mono opacity-30 group-hover:opacity-100 transition-opacity">12 Styles</span>
            <button class="w-8 h-8 rounded-full border border-white/40 flex items-center justify-center opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all hover:bg-white hover:text-black">
              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M5 3l14 9-14 9V3z"/></svg>
            </button>
          </div>
        </div>

        <!-- Row Item -->
        <div
          class="grid grid-cols-[240px_1fr_120px] items-center px-8 py-10 bg-black hover:bg-zinc-950 transition-all group border-b border-white/5">
          <div class="flex flex-col gap-1">
            <span class="font-medium text-lg">Fraunces</span>
            <span class="text-xs text-white/30">Undercase Type</span>
            <div class="mt-3 flex gap-2">
              <span class="px-2 py-0.5 border border-white/10 rounded text-[9px] text-white/50 uppercase">Variable</span>
              <span class="px-2 py-0.5 border border-white/10 rounded text-[9px] text-white/50 uppercase">Soft Serif</span>
            </div>
          </div>
          <div class="preview-text truncate pr-12 text-3xl opacity-80 transition-all font-serif"
            style="font-family: serif;">
            Typography endows language with a durable visual form.
          </div>
          <div class="flex justify-end items-center gap-6">
            <span class="text-xs font-mono opacity-30 group-hover:opacity-100 transition-opacity">V-Axes</span>
            <button class="w-8 h-8 rounded-full border border-white/40 flex items-center justify-center opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all hover:bg-white hover:text-black">
              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M5 3l14 9-14 9V3z"/></svg>
            </button>
          </div>
        </div>

        <!-- Row Item -->
        <div
          class="grid grid-cols-[240px_1fr_120px] items-center px-8 py-10 bg-black hover:bg-zinc-950 transition-all group border-b border-white/5">
          <div class="flex flex-col gap-1">
            <span class="font-medium text-lg">JetBrains Mono</span>
            <span class="text-xs text-white/30">JetBrains</span>
            <div class="mt-3 flex gap-2">
              <span class="px-2 py-0.5 border border-white/10 rounded text-[9px] text-white/50 uppercase">Coding</span>
            </div>
          </div>
          <div class="preview-text truncate pr-12 text-3xl opacity-80 transition-all font-mono"
            style="font-family: monospace;">
            Typography endows language with a durable visual form.
          </div>
          <div class="flex justify-end items-center gap-6">
            <span class="text-xs font-mono opacity-30 group-hover:opacity-100 transition-opacity">20 Styles</span>
            <button class="w-8 h-8 rounded-full border border-white/40 flex items-center justify-center opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all hover:bg-white hover:text-black">
              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M5 3l14 9-14 9V3z"/></svg>
            </button>
          </div>
        </div>

      </div>
    </section>
  </main>
</div>