Spaces:
Paused
Paused
| <html class="dark" lang="en"><head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>STEM_LAB_v1.0 | LIBRARY</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| "colors": { | |
| "surface-dim": "#131315", | |
| "secondary-fixed-dim": "#adc6ff", | |
| "surface": "#131315", | |
| "on-error": "#690005", | |
| "outline-variant": "#584237", | |
| "inverse-surface": "#e5e1e4", | |
| "on-tertiary": "#003351", | |
| "on-secondary": "#002e6a", | |
| "inverse-on-surface": "#313032", | |
| "tertiary-fixed": "#cde5ff", | |
| "surface-tint": "#ffb690", | |
| "on-surface-variant": "#e0c0b1", | |
| "tertiary-fixed-dim": "#93ccff", | |
| "surface-container-highest": "#353437", | |
| "on-error-container": "#ffdad6", | |
| "primary-fixed-dim": "#ffb690", | |
| "background": "#131315", | |
| "on-primary-fixed-variant": "#783200", | |
| "on-secondary-container": "#e6ecff", | |
| "primary-fixed": "#ffdbca", | |
| "outline": "#a78b7d", | |
| "on-primary-container": "#582200", | |
| "on-tertiary-fixed": "#001d32", | |
| "tertiary": "#93ccff", | |
| "surface-variant": "#353437", | |
| "on-secondary-fixed": "#001a42", | |
| "error-container": "#93000a", | |
| "surface-container-high": "#2a2a2c", | |
| "on-secondary-fixed-variant": "#004395", | |
| "surface-bright": "#39393b", | |
| "on-background": "#e5e1e4", | |
| "tertiary-container": "#00a2f4", | |
| "surface-container-low": "#1c1b1d", | |
| "secondary": "#adc6ff", | |
| "on-tertiary-container": "#003554", | |
| "primary-container": "#f97316", | |
| "secondary-fixed": "#d8e2ff", | |
| "surface-container": "#201f22", | |
| "on-surface": "#e5e1e4", | |
| "on-tertiary-fixed-variant": "#004b74", | |
| "on-primary-fixed": "#341100", | |
| "error": "#ffb4ab", | |
| "surface-container-lowest": "#0e0e10", | |
| "on-primary": "#552100", | |
| "primary": "#ffb690", | |
| "inverse-primary": "#9d4300", | |
| "secondary-container": "#0566d9" | |
| }, | |
| "borderRadius": { | |
| "DEFAULT": "0.125rem", | |
| "lg": "0.25rem", | |
| "xl": "0.5rem", | |
| "full": "0.75rem" | |
| }, | |
| "fontFamily": { | |
| "headline": ["Space Grotesk"], | |
| "body": ["Manrope"], | |
| "label": ["Space Grotesk"] | |
| } | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #131315; | |
| background-image: | |
| radial-gradient(circle at 2px 2px, rgba(249,115,22,0.05) 1px, transparent 0); | |
| background-size: 32px 32px; | |
| font-family: 'Manrope', sans-serif; | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| .grain-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| pointer-events: none; | |
| z-index: 9999; | |
| opacity: 0.02; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| } | |
| </style> | |
| <style> | |
| body { | |
| min-height: max(884px, 100dvh); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container"> | |
| <div class="grain-overlay"></div> | |
| <!-- TopAppBar --> | |
| <header class="bg-[#131315] dark:bg-zinc-950 bg-zinc-900/50 backdrop-blur-xl flex justify-between items-center px-6 h-16 w-full sticky top-0 z-50"> | |
| <div class="flex items-center gap-4"> | |
| <span class="material-symbols-outlined text-orange-500 dark:text-orange-600 cursor-pointer">menu</span> | |
| <h1 class="font-['Space_Grotesk'] tracking-tighter uppercase text-xl font-bold tracking-widest text-orange-500 dark:text-orange-600">STEM_LAB_v1.0</h1> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-8 h-8 rounded-full bg-surface-container-highest border border-orange-500/20 flex items-center justify-center overflow-hidden"> | |
| <img alt="User profile icon" data-alt="Cybernetic technical profile avatar with geometric patterns and orange accents on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBN6hSzAuGDOJ3iN1axA77vgJ2aPjlkEWHiM30wm0M5pR-LZwBD4eLSRBqXhYd_OG6UelXO5iL5RAWmtAUYWjiiB_yqZMHhR5InDFM3R0Js_ZoV_GVStZ9AApZ4mewy_4sVWgDf87ki4MKiU8Yj90fbF9gG4yNaLQiKAYSTO1Wn3QZGeGdgrM4FQ7iPWi8b75kuL4CzuFbWgzRdhXlIyI8MBrkWEPid14hE-VBjGWC4wQn5NVUr_RVIOdsABcnP8Jdj1AAW3edqfg"/> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-7xl mx-auto px-4 py-8 pb-32"> | |
| <!-- Dashboard Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-12"> | |
| <div> | |
| <span class="font-label text-primary-container text-xs tracking-[0.3em] uppercase font-bold">Data Archive</span> | |
| <h2 class="font-headline text-5xl md:text-7xl font-bold text-on-surface tracking-tighter mt-2">LIBRARY</h2> | |
| </div> | |
| <div class="w-full md:w-auto flex flex-col gap-4"> | |
| <!-- Search & Filters --> | |
| <div class="flex items-center gap-2 bg-surface-container-lowest border-t border-l border-outline-variant/15 p-1 rounded-lg"> | |
| <div class="flex items-center px-3 py-2 text-zinc-500"> | |
| <span class="material-symbols-outlined text-sm">search</span> | |
| </div> | |
| <input class="bg-transparent border-none focus:ring-0 text-sm font-label tracking-widest text-on-surface placeholder:text-zinc-700 w-full md:w-64" placeholder="SEARCH_ARCHIVE..." type="text"/> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-1.5 bg-primary-container text-on-primary-container font-label text-[10px] font-bold tracking-widest uppercase rounded-sm flex items-center gap-2"> | |
| <span class="material-symbols-outlined text-sm">filter_list</span> | |
| PROJECTS | |
| </button> | |
| <button class="px-4 py-1.5 bg-surface-container-high text-zinc-400 font-label text-[10px] font-bold tracking-widest uppercase rounded-sm border-t border-l border-outline-variant/15"> | |
| STEMS | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bento Grid Library --> | |
| <div class="grid grid-cols-1 md:grid-cols-12 gap-6"> | |
| <!-- Featured Recent Project --> | |
| <div class="md:col-span-8 group relative overflow-hidden bg-surface-container-low p-1 rounded-xl border-t border-l border-outline-variant/15"> | |
| <div class="relative h-64 w-full overflow-hidden rounded-lg"> | |
| <img class="w-full h-full object-cover grayscale opacity-40 group-hover:scale-105 group-hover:opacity-60 transition-all duration-700" data-alt="Close-up of a high-tech audio mixing console with glowing orange and blue LEDs in a dark studio setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDArkku75T1usQa1wZeYQnL0_njeMZ8Bf6FutK2JtWknOuYE9MWQlb3_Tv9PUEaTwS4QtZOFUHGSdnLaH_GwVoIBsZCXxnQzSstRtCVw2-BcVH5hv4lQVbsBhYMjoYz76XgFFiK1hg3N9PwOX0hRyZG6vpUWVPT6vNBcoGTv4d4Ur0rrtjs6ZPWFCX0M2JL_3vmq5B2ZbKl9fK7r3Rz0Dtiozhtg643Uc5G8vYYw3DJokjdJqiUfXpHmmWu6gHGKo_Y3GOsuPMv3Q"/> | |
| <div class="absolute inset-0 bg-gradient-to-t from-surface-dim via-transparent to-transparent"></div> | |
| <div class="absolute bottom-6 left-6 right-6"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="bg-primary-container text-on-primary-container px-2 py-0.5 font-label text-[9px] font-extrabold tracking-widest rounded-sm">LATEST</span> | |
| <span class="text-zinc-400 font-label text-[10px] tracking-widest">2024.05.21 // 14:32</span> | |
| </div> | |
| <h3 class="font-headline text-3xl font-bold text-on-surface tracking-tight uppercase">Cyber_Nexus_Main_Mix.wav</h3> | |
| </div> | |
| </div> | |
| <div class="p-6 flex flex-wrap justify-between items-center gap-4"> | |
| <div class="flex gap-3"> | |
| <div class="flex flex-col gap-1"> | |
| <span class="font-label text-[8px] text-zinc-500 tracking-widest">VOCALS</span> | |
| <div class="w-8 h-8 rounded-sm bg-orange-500/10 border border-orange-500/30 flex items-center justify-center text-orange-500 font-bold">V</div> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <span class="font-label text-[8px] text-zinc-500 tracking-widest">BASS</span> | |
| <div class="w-8 h-8 rounded-sm bg-orange-500/10 border border-orange-500/30 flex items-center justify-center text-orange-500 font-bold">B</div> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <span class="font-label text-[8px] text-zinc-500 tracking-widest">DRUMS</span> | |
| <div class="w-8 h-8 rounded-sm bg-orange-500/10 border border-orange-500/30 flex items-center justify-center text-orange-500 font-bold">D</div> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <span class="font-label text-[8px] text-zinc-500 tracking-widest">OTHER</span> | |
| <div class="w-8 h-8 rounded-sm bg-zinc-800 border border-zinc-700 flex items-center justify-center text-zinc-600 font-bold">O</div> | |
| </div> | |
| </div> | |
| <button class="bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-container transition-colors w-12 h-12 flex items-center justify-center rounded-full border-t border-l border-outline-variant/15 shadow-lg"> | |
| <span class="material-symbols-outlined">play_arrow</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Module --> | |
| <div class="md:col-span-4 bg-surface-container-high p-8 rounded-xl border-t border-l border-outline-variant/15 flex flex-col justify-between"> | |
| <div> | |
| <h4 class="font-label text-[10px] text-zinc-500 tracking-[0.4em] uppercase mb-8">System_Audit</h4> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between font-label text-xs mb-2"> | |
| <span class="text-zinc-400">STORAGE_USED</span> | |
| <span class="text-orange-500">74.2%</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-lowest rounded-full overflow-hidden"> | |
| <div class="h-full bg-orange-500 w-3/4"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-4 bg-surface-container-lowest rounded"> | |
| <span class="block font-label text-[9px] text-zinc-500 tracking-widest mb-1">TOTAL_PROJECTS</span> | |
| <span class="block font-headline text-2xl font-bold text-on-surface">128</span> | |
| </div> | |
| <div class="p-4 bg-surface-container-lowest rounded"> | |
| <span class="block font-label text-[9px] text-zinc-500 tracking-widest mb-1">STEM_EXTRACTIONS</span> | |
| <span class="block font-headline text-2xl font-bold text-on-surface">512</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-outline-variant/10"> | |
| <button class="w-full py-3 bg-secondary-container text-on-secondary-container font-label text-xs font-bold tracking-widest uppercase rounded hover:opacity-90 transition-opacity"> | |
| BACKUP_DATABASE | |
| </button> | |
| </div> | |
| </div> | |
| <!-- List of Saved Projects --> | |
| <div class="md:col-span-12 space-y-4"> | |
| <div class="flex items-center justify-between px-2"> | |
| <h3 class="font-label text-xs text-zinc-500 tracking-[0.2em] uppercase font-bold">Archive_Entries</h3> | |
| <span class="font-label text-[10px] text-orange-500/50">LATEST_SYNC: 04_MIN_AGO</span> | |
| </div> | |
| <!-- List Item 1 --> | |
| <div class="group bg-surface-container-low hover:bg-surface-container-high transition-colors p-4 rounded-lg flex flex-col md:flex-row items-center gap-6 border-t border-l border-outline-variant/15"> | |
| <div class="w-full md:w-16 h-16 bg-surface-container-lowest rounded overflow-hidden flex-shrink-0 border border-outline-variant/10"> | |
| <img class="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 transition-transform duration-500" data-alt="Neon blue and purple stage lights in a smoke-filled concert venue, abstract high energy" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAT-cOeQ9ye3y6MTDVwb0zc49rfWaaII1FPsmLLM9AYNprAsvOXlFUmOthiM077lqotSdwE8hseAlmAUnPL74kT6xVJw2M84WYmHM2uE5zmnZJaaTR7IfoRD7-6zQ444xO0bqpcp3cNS8a_oZ1nt4H0eZ6Wnzz8u13yrIdfzVde3LJ3lSSVQFfkSXr7mmTWiYNSqvIaToN1pzmCn6l4rWIddYR2gZTmvozbKMQwgOWtYYexHqPnJ-BrA2eVZPP6X9MTK_aH_xIqvg"/> | |
| </div> | |
| <div class="flex-grow flex flex-col gap-1 w-full"> | |
| <h4 class="font-headline text-lg font-bold text-on-surface tracking-tight">Neon_Pulse_v2_Remix.mp3</h4> | |
| <div class="flex items-center gap-4 text-zinc-500 font-label text-[10px] tracking-widest"> | |
| <span>2024.05.19</span> | |
| <span class="text-zinc-700">|</span> | |
| <span>44.1 KHZ / 24-BIT</span> | |
| <span class="text-zinc-700">|</span> | |
| <span class="text-primary-container font-bold">COMPLETE</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <span class="w-6 h-6 flex items-center justify-center border border-orange-500/20 text-[10px] font-bold text-orange-500/60 rounded-sm">V</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-orange-500/20 text-[10px] font-bold text-orange-500/60 rounded-sm">B</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">D</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-orange-500/20 text-[10px] font-bold text-orange-500/60 rounded-sm">O</span> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">download</span></button> | |
| <button class="text-zinc-500 hover:text-error transition-colors"><span class="material-symbols-outlined">delete</span></button> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button> | |
| </div> | |
| </div> | |
| <!-- List Item 2 --> | |
| <div class="group bg-surface-container-low hover:bg-surface-container-high transition-colors p-4 rounded-lg flex flex-col md:flex-row items-center gap-6 border-t border-l border-outline-variant/15"> | |
| <div class="w-full md:w-16 h-16 bg-surface-container-lowest rounded overflow-hidden flex-shrink-0 border border-outline-variant/10"> | |
| <img class="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 transition-transform duration-500" data-alt="Classic studio microphone with a pop filter in a dimly lit recording booth" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdeiJ086NmUvWPLpccLmEe7_tjODqPyShNXM0akoIz6LB8pFoiPA4oun79xoC34inBpXdpFt13gmsnGErxjHU0474YRZzpa-Ws_6e_AUQSmZvqdG3g3xBk5G-5OzP1FUGaYUQbk4gKqaZucxKovgEi7r_X5EDdUJco3NWRpYKh1obqHwVivl1Aq_Hnm1yFCuvkL8iUkOzReIv9RtTCLwcwu_CK6P_qRRKj4LKHXcHWSL7jDzuGNczF-D1VUZjyfIqUNLIYtbcoXw"/> | |
| </div> | |
| <div class="flex-grow flex flex-col gap-1 w-full"> | |
| <h4 class="font-headline text-lg font-bold text-on-surface tracking-tight">Acoustic_Soul_Vocals_ONLY.flac</h4> | |
| <div class="flex items-center gap-4 text-zinc-500 font-label text-[10px] tracking-widest"> | |
| <span>2024.05.15</span> | |
| <span class="text-zinc-700">|</span> | |
| <span>96.0 KHZ / 32-BIT</span> | |
| <span class="text-zinc-700">|</span> | |
| <span class="text-primary-container font-bold">COMPLETE</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <span class="w-6 h-6 flex items-center justify-center border border-orange-500/20 text-[10px] font-bold text-orange-500/60 rounded-sm">V</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">B</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">D</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">O</span> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">download</span></button> | |
| <button class="text-zinc-500 hover:text-error transition-colors"><span class="material-symbols-outlined">delete</span></button> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button> | |
| </div> | |
| </div> | |
| <!-- List Item 3 --> | |
| <div class="group bg-surface-container-low hover:bg-surface-container-high transition-colors p-4 rounded-lg flex flex-col md:flex-row items-center gap-6 border-t border-l border-outline-variant/15 opacity-70"> | |
| <div class="w-full md:w-16 h-16 bg-surface-container-lowest rounded overflow-hidden flex-shrink-0 border border-outline-variant/10"> | |
| <img class="w-full h-full object-cover grayscale opacity-50" data-alt="Top view of a DJ controller with spinning platters and vibrant colored pads" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzCRRBB7jtsiTikJadQtTFuUQK4bJ-d_ja4OJfij91bzgnCMYlbuQxK3mpcUxfo8ahEce49CuYlpe433PCHBp8YThOGQm6wByGPlMzgGMHnSiQbM1lg9JyW2_UBtN4wxLRvNd64U8vAogx0qc3eATK4PAtzhzc8b3EMgpxteUbYRU46yAIYJN0GvjO9oSPppeNn1jw2fdAFAYLVDtpioo2LeX8fabWFfyxgrCIe1-9wLqVmslU4djghXwYHYW3XB1LkvmJp-rXIQ"/> | |
| </div> | |
| <div class="flex-grow flex flex-col gap-1 w-full"> | |
| <h4 class="font-headline text-lg font-bold text-on-surface tracking-tight">Dark_Synth_Exp_04.wav</h4> | |
| <div class="flex items-center gap-4 text-zinc-500 font-label text-[10px] tracking-widest"> | |
| <span>2024.04.12</span> | |
| <span class="text-zinc-700">|</span> | |
| <span>48.0 KHZ / 24-BIT</span> | |
| <span class="text-zinc-700">|</span> | |
| <span class="text-zinc-600 font-bold uppercase">Archived</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">V</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">B</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-zinc-800 text-[10px] font-bold text-zinc-700 rounded-sm">D</span> | |
| <span class="w-6 h-6 flex items-center justify-center border border-orange-500/20 text-[10px] font-bold text-orange-500/60 rounded-sm">O</span> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">download</span></button> | |
| <button class="text-zinc-500 hover:text-error transition-colors"><span class="material-symbols-outlined">delete</span></button> | |
| <button class="text-zinc-500 hover:text-primary transition-colors"><span class="material-symbols-outlined">more_vert</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- FAB --> | |
| <button class="fixed right-6 bottom-24 bg-primary-container text-on-primary-container p-4 rounded-full shadow-2xl flex items-center justify-center group hover:scale-110 active:scale-95 transition-all z-40 border-t border-l border-white/20"> | |
| <span class="material-symbols-outlined text-3xl">add</span> | |
| <span class="max-w-0 overflow-hidden group-hover:max-w-xs group-hover:ml-3 transition-all duration-300 font-label text-xs font-bold tracking-widest uppercase whitespace-nowrap">NEW_EXTRACTION</span> | |
| </button> | |
| <!-- BottomNavBar --> | |
| <nav class="fixed bottom-0 left-0 w-full bg-[#131315]/80 dark:bg-zinc-950/80 backdrop-blur-2xl border-t border-orange-500/10 shadow-[0_-4px_20px_rgba(249,115,22,0.05)] z-50 flex justify-around items-center px-4 pb-4 h-20"> | |
| <div class="flex flex-col items-center justify-center text-zinc-600 pt-2 pb-1 hover:bg-orange-500/5 transition-all cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="dynamic_form">dynamic_form</span> | |
| <span class="font-['Space_Grotesk'] text-[10px] font-bold tracking-widest mt-1">EXTRACT</span> | |
| </div> | |
| <!-- ACTIVE: LIBRARY --> | |
| <div class="flex flex-col items-center justify-center text-orange-500 border-t-2 border-orange-500 pt-2 pb-1 hover:bg-orange-500/5 transition-all cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="library_music" style="font-variation-settings: 'FILL' 1;">library_music</span> | |
| <span class="font-['Space_Grotesk'] text-[10px] font-bold tracking-widest mt-1">LIBRARY</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center text-zinc-600 pt-2 pb-1 hover:bg-orange-500/5 transition-all cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="settings_backup_restore">settings_backup_restore</span> | |
| <span class="font-['Space_Grotesk'] text-[10px] font-bold tracking-widest mt-1">HISTORY</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center text-zinc-600 pt-2 pb-1 hover:bg-orange-500/5 transition-all cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="tune">tune</span> | |
| <span class="font-['Space_Grotesk'] text-[10px] font-bold tracking-widest mt-1">CONFIG</span> | |
| </div> | |
| </nav> | |
| </body></html> |