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>STEMFORGE | Signal Processing</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&family=Space+Mono&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": { | |
| "on-tertiary-container": "#003554", | |
| "on-surface-variant": "#e0c0b1", | |
| "on-background": "#e5e1e4", | |
| "on-error": "#690005", | |
| "primary-container": "#f97316", | |
| "primary-fixed-dim": "#ffb690", | |
| "inverse-surface": "#e5e1e4", | |
| "surface-container": "#201f22", | |
| "outline": "#a78b7d", | |
| "on-tertiary-fixed": "#001d32", | |
| "outline-variant": "#584237", | |
| "tertiary-fixed-dim": "#93ccff", | |
| "secondary-fixed-dim": "#adc6ff", | |
| "on-secondary": "#002e6a", | |
| "on-tertiary": "#003351", | |
| "on-surface": "#e5e1e4", | |
| "tertiary": "#93ccff", | |
| "on-primary-fixed-variant": "#783200", | |
| "surface": "#131315", | |
| "on-error-container": "#ffdad6", | |
| "on-secondary-fixed": "#001a42", | |
| "error": "#ffb4ab", | |
| "background": "#131315", | |
| "secondary": "#adc6ff", | |
| "surface-container-lowest": "#0e0e10", | |
| "inverse-primary": "#9d4300", | |
| "on-primary": "#552100", | |
| "on-primary-fixed": "#341100", | |
| "error-container": "#93000a", | |
| "inverse-on-surface": "#313032", | |
| "surface-variant": "#353437", | |
| "surface-dim": "#131315", | |
| "on-tertiary-fixed-variant": "#004b74", | |
| "secondary-container": "#0566d9", | |
| "tertiary-container": "#00a2f4", | |
| "surface-container-low": "#1c1b1d", | |
| "surface-bright": "#39393b", | |
| "on-secondary-container": "#e6ecff", | |
| "on-primary-container": "#582200", | |
| "on-secondary-fixed-variant": "#004395", | |
| "secondary-fixed": "#d8e2ff", | |
| "surface-container-high": "#2a2a2c", | |
| "surface-tint": "#ffb690", | |
| "primary-fixed": "#ffdbca", | |
| "tertiary-fixed": "#cde5ff", | |
| "primary": "#ffb690", | |
| "surface-container-highest": "#353437" | |
| }, | |
| "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 { font-family: 'Manrope', sans-serif; background-color: #131315; color: #e5e1e4; -webkit-font-smoothing: antialiased; } | |
| .headline { font-family: 'Space Grotesk', sans-serif; } | |
| .label-mono { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; } | |
| .glass-panel { background: rgba(14, 14, 16, 0.6); backdrop-filter: blur(20px); } | |
| .grain-overlay { pointer-events: none; position: fixed; inset: 0; z-index: 99; 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"); } | |
| .ghost-edge { border-top: 1px solid rgba(167, 139, 125, 0.1); border-left: 1px solid rgba(167, 139, 125, 0.1); } | |
| input[type=range] { -webkit-appearance: none; background: transparent; } | |
| input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 100%; cursor: pointer; background: transparent; } | |
| input[type=range]::-webkit-slider-thumb { height: 12px; width: 48px; border-radius: 2px; background: #353437; cursor: pointer; -webkit-appearance: none; margin-top: -4px; border: 1px solid rgba(255,182,144,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.5); } | |
| </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 min-h-screen"> | |
| <div class="grain-overlay"></div> | |
| <!-- Top Navigation Anchor --> | |
| <header class="bg-[#131315] fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 py-4"> | |
| <div class="flex items-center gap-3"> | |
| <span class="material-symbols-outlined text-orange-500 text-2xl" data-icon="graphic_eq">graphic_eq</span> | |
| <h1 class="text-2xl font-bold tracking-tighter text-orange-500">STEMFORGE</h1> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-8"> | |
| <a class="text-orange-500 label-mono text-xs font-bold transition-colors" href="#">MIXER</a> | |
| <a class="text-zinc-400 label-mono text-xs font-bold hover:bg-zinc-800 transition-colors p-2 rounded" href="#">EXTRACT</a> | |
| <a class="text-zinc-400 label-mono text-xs font-bold hover:bg-zinc-800 transition-colors p-2 rounded" href="#">LIBRARY</a> | |
| </nav> | |
| <div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden border border-outline-variant/20"> | |
| <img alt="User profile" class="w-full h-full object-cover" data-alt="professional user avatar icon with a tech-focused minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBMkDtI_tWYVFFk-qoFISIhiAxw-cQjuNroHtta5jMMkP20MzO3nTqUIVaIE-IvCEVKhrwAWGNvyBzhK9vRAFtGXoFwui08-AZAQY7Lkz4dFtfnumki0czOptsKj0-pKEd-khlKif5MMQpI-Qlcex0-1_-t5Z0XbnkeelIWO9iYlbcAIBwNs6vlM_VXQkV52kaVJmW8gtl1p3womwtagjs-URwAKMr9yUfdCOfdj0cSoGE92Jf9whVLxmf41vs_ff-uHRXw1yqORA"/> | |
| </div> | |
| </header> | |
| <main class="pt-24 pb-32 px-4 md:px-8 max-w-7xl mx-auto space-y-8"> | |
| <!-- Waveform Section --> | |
| <section class="w-full bg-surface-container-low rounded-xl p-6 ghost-edge relative overflow-hidden group"> | |
| <div class="flex justify-between items-end mb-6"> | |
| <div> | |
| <span class="label-mono text-[10px] text-zinc-500">Current Track</span> | |
| <h2 class="headline text-2xl font-bold tracking-tight text-on-surface">NEURAL_DYNAMICS_V4.WAV</h2> | |
| </div> | |
| <div class="text-right"> | |
| <span class="label-mono text-[10px] text-zinc-500">Sample Rate</span> | |
| <p class="label-mono text-sm text-primary">96.0 KHZ / 32-BIT</p> | |
| </div> | |
| </div> | |
| <!-- Visualizer Canvas --> | |
| <div class="h-48 w-full flex items-center justify-center gap-[2px]"> | |
| <!-- Simulated Waveform Bars --> | |
| <div class="flex items-end justify-between w-full h-32 gap-1 px-2"> | |
| <!-- Generating dynamic heights via inline styles to simulate a waveform --> | |
| <div class="w-full bg-primary-container/20 rounded-t-sm relative"> | |
| <div class="absolute bottom-0 w-full bg-primary h-[40%] rounded-t-sm shadow-[0_0_15px_rgba(249,115,22,0.3)]"></div> | |
| </div> | |
| <div class="w-full bg-primary-container/20 h-[60%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[30%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[85%] rounded-t-sm relative"> | |
| <div class="absolute bottom-0 w-full bg-primary h-[70%] rounded-t-sm shadow-[0_0_15px_rgba(249,115,22,0.3)]"></div> | |
| </div> | |
| <div class="w-full bg-primary-container/20 h-[45%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[20%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[90%] rounded-t-sm relative"> | |
| <div class="absolute bottom-0 w-full bg-primary h-[60%] rounded-t-sm"></div> | |
| </div> | |
| <div class="w-full bg-primary-container/20 h-[55%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[75%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[40%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[15%] rounded-t-sm"></div> | |
| <div class="w-full bg-primary-container/20 h-[65%] rounded-t-sm relative"> | |
| <div class="absolute bottom-0 w-full bg-primary h-[90%] rounded-t-sm shadow-[0_0_20px_rgba(249,115,22,0.4)]"></div> | |
| </div> | |
| <!-- Playhead --> | |
| <div class="absolute left-[42%] top-0 bottom-0 w-[2px] bg-on-background z-10 shadow-[0_0_10px_white]"> | |
| <div class="absolute -top-1 -left-1 w-3 h-3 bg-on-background rotate-45"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between label-mono text-[10px] text-zinc-500"> | |
| <span>00:42.12</span> | |
| <span class="text-primary-fixed-dim">PLAYING</span> | |
| <span>03:14.00</span> | |
| </div> | |
| </section> | |
| <!-- Stem Mixer Section --> | |
| <section class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-3 bg-surface-container-low rounded-xl p-8 ghost-edge"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h3 class="headline text-lg font-bold flex items-center gap-2"> | |
| <span class="material-symbols-outlined text-secondary" data-icon="tune">tune</span> | |
| STEM MIXER | |
| </h3> | |
| <div class="flex gap-4"> | |
| <button class="label-mono text-[10px] px-3 py-1 bg-surface-container-highest rounded border border-outline-variant/30 hover:bg-zinc-800 transition-colors">SOLO ALL</button> | |
| <button class="label-mono text-[10px] px-3 py-1 bg-surface-container-highest rounded border border-outline-variant/30 hover:bg-zinc-800 transition-colors">MUTE ALL</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-around items-end h-[320px] pb-4"> | |
| <!-- Vocals (Purple) --> | |
| <div class="flex flex-col items-center h-full group"> | |
| <div class="mb-4 text-center"> | |
| <span class="label-mono text-xs font-bold text-[#a855f7]">88%</span> | |
| </div> | |
| <div class="relative w-12 flex-grow bg-surface-container-lowest rounded-full border border-outline-variant/10 p-1"> | |
| <div class="absolute bottom-1 left-1 right-1 bg-gradient-to-t from-[#a855f7] to-[#d8b4fe] rounded-full" style="height: 88%"></div> | |
| <input class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" orient="vertical" type="range" value="88"/> | |
| </div> | |
| <span class="mt-4 label-mono text-[10px] text-zinc-400 group-hover:text-on-surface transition-colors">VOCALS</span> | |
| </div> | |
| <!-- Bass (Blue) --> | |
| <div class="flex flex-col items-center h-full group"> | |
| <div class="mb-4 text-center"> | |
| <span class="label-mono text-xs font-bold text-secondary">64%</span> | |
| </div> | |
| <div class="relative w-12 flex-grow bg-surface-container-lowest rounded-full border border-outline-variant/10 p-1"> | |
| <div class="absolute bottom-1 left-1 right-1 bg-gradient-to-t from-secondary-container to-secondary rounded-full" style="height: 64%"></div> | |
| <input class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" orient="vertical" type="range" value="64"/> | |
| </div> | |
| <span class="mt-4 label-mono text-[10px] text-zinc-400 group-hover:text-on-surface transition-colors">BASS</span> | |
| </div> | |
| <!-- Drums (Orange) --> | |
| <div class="flex flex-col items-center h-full group"> | |
| <div class="mb-4 text-center"> | |
| <span class="label-mono text-xs font-bold text-primary">72%</span> | |
| </div> | |
| <div class="relative w-12 flex-grow bg-surface-container-lowest rounded-full border border-outline-variant/10 p-1"> | |
| <div class="absolute bottom-1 left-1 right-1 bg-gradient-to-t from-primary-container to-primary rounded-full" style="height: 72%"></div> | |
| <input class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" orient="vertical" type="range" value="72"/> | |
| </div> | |
| <span class="mt-4 label-mono text-[10px] text-zinc-400 group-hover:text-on-surface transition-colors">DRUMS</span> | |
| </div> | |
| <!-- Other (Gray) --> | |
| <div class="flex flex-col items-center h-full group"> | |
| <div class="mb-4 text-center"> | |
| <span class="label-mono text-xs font-bold text-zinc-400">45%</span> | |
| </div> | |
| <div class="relative w-12 flex-grow bg-surface-container-lowest rounded-full border border-outline-variant/10 p-1"> | |
| <div class="absolute bottom-1 left-1 right-1 bg-gradient-to-t from-zinc-600 to-zinc-400 rounded-full" style="height: 45%"></div> | |
| <input class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" orient="vertical" type="range" value="45"/> | |
| </div> | |
| <span class="mt-4 label-mono text-[10px] text-zinc-400 group-hover:text-on-surface transition-colors">OTHER</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diagnostics Panel --> | |
| <div class="space-y-6"> | |
| <div class="bg-surface-container-high rounded-xl p-6 ghost-edge h-full"> | |
| <h4 class="label-mono text-[10px] text-zinc-500 mb-6">SIGNAL_DIAGNOSTICS</h4> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between label-mono text-[10px] mb-2"> | |
| <span>PEAK GAIN</span> | |
| <span class="text-error">-1.2 dB</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-lowest rounded-full overflow-hidden"> | |
| <div class="h-full bg-error w-[90%]"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between label-mono text-[10px] mb-2"> | |
| <span>RMS LEVEL</span> | |
| <span class="text-secondary">-14.4 dB</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-lowest rounded-full overflow-hidden"> | |
| <div class="h-full bg-secondary w-[65%]"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between label-mono text-[10px] mb-2"> | |
| <span>PHASE COHERENCE</span> | |
| <span class="text-primary">OPTIMAL</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-lowest rounded-full overflow-hidden"> | |
| <div class="h-full bg-primary w-[85%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 p-4 bg-surface-container-lowest rounded border border-outline-variant/20"> | |
| <span class="label-mono text-[9px] text-zinc-600 block mb-2">AI_RECONSTRUCTION_LOG</span> | |
| <p class="label-mono text-[10px] text-zinc-400 leading-relaxed"> | |
| [14:02:11] Analyzing vocal harmonics...<br/> | |
| [14:02:14] Noise floor suppressed (-48dB)<br/> | |
| [14:02:18] Transient preservation active<br/> | |
| <span class="text-primary-fixed-dim">>> READY FOR EXPORT</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Transport Controls (Floating Dock) --> | |
| <div class="fixed bottom-24 left-1/2 -translate-x-1/2 z-40"> | |
| <div class="glass-panel border border-outline-variant/30 rounded-full px-8 py-4 flex items-center gap-8 shadow-2xl"> | |
| <button class="text-zinc-400 hover:text-on-surface transition-colors active:scale-90"> | |
| <span class="material-symbols-outlined text-3xl" data-icon="skip_previous">skip_previous</span> | |
| </button> | |
| <button class="w-14 h-14 bg-primary text-on-primary-container rounded-full flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(249,115,22,0.4)]"> | |
| <span class="material-symbols-outlined text-4xl" data-icon="play_arrow" data-weight="fill">play_arrow</span> | |
| </button> | |
| <button class="text-zinc-400 hover:text-on-surface transition-colors active:scale-90"> | |
| <span class="material-symbols-outlined text-3xl" data-icon="skip_next">skip_next</span> | |
| </button> | |
| <div class="w-[1px] h-8 bg-outline-variant/30"></div> | |
| <button class="text-error hover:text-red-400 transition-colors active:scale-90"> | |
| <span class="material-symbols-outlined text-3xl" data-icon="fiber_manual_record" data-weight="fill">fiber_manual_record</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bottom Nav Bar Anchor --> | |
| <nav class="bg-[#131315]/80 backdrop-blur-xl fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2"> | |
| <a class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors" href="#"> | |
| <span class="material-symbols-outlined mb-1" data-icon="blur_on">blur_on</span> | |
| <span class="text-[10px] font-bold headline tracking-widest uppercase">EXTRACT</span> | |
| </a> | |
| <a class="flex flex-col items-center justify-center text-orange-500 bg-orange-500/10 rounded-xl p-2 scale-90 transition-all" href="#"> | |
| <span class="material-symbols-outlined mb-1" data-icon="tune">tune</span> | |
| <span class="text-[10px] font-bold headline tracking-widest uppercase">MIXER</span> | |
| </a> | |
| <a class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors" href="#"> | |
| <span class="material-symbols-outlined mb-1" data-icon="🥁">article</span> | |
| <span class="text-[10px] font-bold headline tracking-widest uppercase">DRUMS</span> | |
| </a> | |
| <a class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors" href="#"> | |
| <span class="material-symbols-outlined mb-1" data-icon="library_music">library_music</span> | |
| <span class="text-[10px] font-bold headline tracking-widest uppercase">LIBRARY</span> | |
| </a> | |
| </nav> | |
| </body></html> |