Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WebSynth - Browser-Based Music Production</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for audio-specific elements */ | |
| .knob { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #2d3748, #4a5568); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .knob:after { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 50%; | |
| width: 3px; | |
| height: 15px; | |
| background: #4299e1; | |
| transform-origin: bottom center; | |
| transform: translateX(-50%) rotate(0deg); | |
| } | |
| .sequencer-step { | |
| transition: all 0.1s ease; | |
| } | |
| .sequencer-step.active { | |
| background-color: #4299e1 ; | |
| } | |
| .piano-key.white { | |
| background-color: white; | |
| border: 1px solid #ccc; | |
| } | |
| .piano-key.black { | |
| background-color: black; | |
| z-index: 2; | |
| margin-left: -12px; | |
| margin-right: -12px; | |
| height: 60%; | |
| } | |
| .piano-key.active { | |
| background-color: #4299e1; | |
| } | |
| .waveform-display { | |
| background: linear-gradient(to bottom, #2d3748, #1a202c); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #2d3748; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4a5568; | |
| border-radius: 4px; | |
| } | |
| /* Drag and drop styling */ | |
| .dropzone { | |
| border: 2px dashed #4a5568; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #4299e1; | |
| background-color: rgba(66, 153, 225, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 font-sans overflow-hidden"> | |
| <!-- Main App Container --> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Top Toolbar --> | |
| <div class="bg-gray-800 p-2 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-xl font-bold text-blue-400 flex items-center"> | |
| <i class="fas fa-music mr-2"></i> WebSynth | |
| </h1> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> New | |
| </button> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center"> | |
| <i class="fas fa-folder-open mr-1"></i> Open | |
| </button> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center"> | |
| <i class="fas fa-save mr-1"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-sm">BPM:</span> | |
| <input type="number" value="120" min="40" max="300" class="w-16 bg-gray-700 rounded px-2 py-1 text-center"> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="playButton" class="w-8 h-8 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center ml-2"> | |
| <i class="fas fa-stop"></i> | |
| </button> | |
| <button class="w-8 h-8 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center ml-2"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="mr-2 text-sm">Key:</span> | |
| <select class="bg-gray-700 rounded px-2 py-1 text-sm"> | |
| <option>C</option> | |
| <option>C#</option> | |
| <option>D</option> | |
| <option>D#</option> | |
| <option>E</option> | |
| <option>F</option> | |
| <option>F#</option> | |
| <option>G</option> | |
| <option>G#</option> | |
| <option>A</option> | |
| <option>A#</option> | |
| <option>B</option> | |
| </select> | |
| <select class="bg-gray-700 rounded px-2 py-1 text-sm ml-1"> | |
| <option>Major</option> | |
| <option>Minor</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Instruments & Presets --> | |
| <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> | |
| <div class="p-3 border-b border-gray-700"> | |
| <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Instruments</h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-3"> | |
| <div class="mb-4"> | |
| <h3 class="text-sm font-medium mb-2 flex justify-between items-center"> | |
| <span>Synth</span> | |
| <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button> | |
| </h3> | |
| <div class="space-y-1"> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Analog Lead</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">FM Bass</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Wavetable Pad</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-sm font-medium mb-2 flex justify-between items-center"> | |
| <span>Drum Machine</span> | |
| <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button> | |
| </h3> | |
| <div class="space-y-1"> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">808 Kit</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">909 Kit</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Glitch Kit</div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-sm font-medium mb-2 flex justify-between items-center"> | |
| <span>Sampler</span> | |
| <button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600">+</button> | |
| </h3> | |
| <div class="space-y-1"> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Vocal Chops</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">Guitar Loops</div> | |
| <div class="px-3 py-1 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600">FX Samples</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="dropzone p-4 rounded-lg text-center cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-2xl text-gray-500 mb-2"></i> | |
| <p class="text-xs text-gray-400">Drag & drop samples or presets here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Workspace --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Tab Navigation --> | |
| <div class="bg-gray-800 border-b border-gray-700 flex"> | |
| <button class="px-4 py-2 border-b-2 border-blue-500 text-blue-400">Sequencer</button> | |
| <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Piano Roll</button> | |
| <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Mixer</button> | |
| <button class="px-4 py-2 text-gray-400 hover:text-gray-200">Performance</button> | |
| </div> | |
| <!-- Sequencer Grid --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-2">Kick Drum</h3> | |
| <div class="flex space-x-1"> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-2">Snare</h3> | |
| <div class="flex space-x-1"> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-2">Hi-Hat</h3> | |
| <div class="flex space-x-1"> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-2">Bass Synth</h3> | |
| <div class="flex space-x-1"> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| <div class="w-8 h-8 bg-gray-700 rounded sequencer-step cursor-pointer hover:bg-gray-600"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Piano Roll (Hidden by default) --> | |
| <div class="hidden flex-1 overflow-auto p-4"> | |
| <div class="mb-4"> | |
| <div class="flex"> | |
| <div class="w-16 h-16 bg-gray-800 border-r border-gray-700 flex items-center justify-center text-xs"> | |
| C4 | |
| </div> | |
| <div class="flex-1 bg-gray-800 h-16 overflow-x-auto"> | |
| <div class="h-full min-w-full" style="min-width: 800px;"></div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-16 h-8 bg-gray-800 border-r border-gray-700 flex items-center justify-center text-xs"> | |
| C#4 | |
| </div> | |
| <div class="flex-1 bg-gray-800 h-8 overflow-x-auto"> | |
| <div class="h-full min-w-full" style="min-width: 800px;"></div> | |
| </div> | |
| </div> | |
| <!-- More piano keys would go here --> | |
| </div> | |
| </div> | |
| <!-- Mixer (Hidden by default) --> | |
| <div class="hidden flex-1 overflow-auto p-4"> | |
| <div class="flex space-x-4"> | |
| <div class="w-24 bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-center text-xs mb-2">Kick</div> | |
| <div class="flex justify-center mb-2"> | |
| <div class="knob"></div> | |
| </div> | |
| <div class="h-24 bg-gray-700 rounded mb-2 relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-blue-500" style="height: 70%;"></div> | |
| </div> | |
| <div class="text-center text-xs">Pan</div> | |
| <input type="range" class="w-full" min="-50" max="50" value="0"> | |
| </div> | |
| <!-- More mixer channels would go here --> | |
| </div> | |
| </div> | |
| <!-- Performance Mode (Hidden by default) --> | |
| <div class="hidden flex-1 overflow-auto p-4"> | |
| <div class="grid grid-cols-4 gap-4"> | |
| <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center"> | |
| <span>Clip 1</span> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center"> | |
| <span>Clip 2</span> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center"> | |
| <span>Clip 3</span> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-3 h-32 cursor-pointer hover:bg-gray-700 flex items-center justify-center"> | |
| <span>Clip 4</span> | |
| </div> | |
| <!-- More performance clips would go here --> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-sm font-medium mb-4">XY Pad</h3> | |
| <div class="w-64 h-64 bg-gray-800 rounded-lg relative"> | |
| <div class="absolute w-8 h-8 bg-blue-500 rounded-full" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Synth Controls & Effects --> | |
| <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"> | |
| <div class="p-3 border-b border-gray-700"> | |
| <h2 class="font-semibold text-sm uppercase tracking-wider text-gray-400">Synth Controls</h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-3">Oscillators</h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-xs text-center mb-1">Wave</div> | |
| <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2"> | |
| <option>Sine</option> | |
| <option>Square</option> | |
| <option>Saw</option> | |
| <option>Triangle</option> | |
| <option>Noise</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Octave</div> | |
| <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2"> | |
| <option>-2</option> | |
| <option>-1</option> | |
| <option>0</option> | |
| <option>+1</option> | |
| <option>+2</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Detune</div> | |
| <input type="range" class="w-full" min="-50" max="50" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-3">Filter</h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-xs text-center mb-1">Type</div> | |
| <select class="w-full bg-gray-700 rounded px-2 py-1 text-xs mb-2"> | |
| <option>LPF</option> | |
| <option>HPF</option> | |
| <option>BPF</option> | |
| <option>Notch</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Cutoff</div> | |
| <input type="range" class="w-full" min="0" max="100" value="50"> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Reso</div> | |
| <input type="range" class="w-full" min="0" max="100" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-3">Envelope</h3> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div> | |
| <div class="text-xs text-center mb-1">Attack</div> | |
| <input type="range" class="w-full" min="0" max="100" value="10"> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Decay</div> | |
| <input type="range" class="w-full" min="0" max="100" value="30"> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Sustain</div> | |
| <input type="range" class="w-full" min="0" max="100" value="70"> | |
| </div> | |
| <div> | |
| <div class="text-xs text-center mb-1">Release</div> | |
| <input type="range" class="w-full" min="0" max="100" value="20"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm font-medium mb-3">Effects</h3> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-700 rounded p-2"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs">Reverb</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-7 h-4 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-3 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div> | |
| <div class="text-xs mb-1">Size</div> | |
| <input type="range" class="w-full" min="0" max="100" value="50"> | |
| </div> | |
| <div> | |
| <div class="text-xs mb-1">Mix</div> | |
| <input type="range" class="w-full" min="0" max="100" value="30"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded p-2"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs">Delay</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-7 h-4 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-3 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div> | |
| <div class="text-xs mb-1">Time</div> | |
| <input type="range" class="w-full" min="0" max="100" value="50"> | |
| </div> | |
| <div> | |
| <div class="text-xs mb-1">Feedback</div> | |
| <input type="range" class="w-full" min="0" max="100" value="30"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="text-xs text-gray-400 mb-1">Master Volume</div> | |
| <input type="range" class="w-full" min="0" max="100" value="70"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-gray-800 border-t border-gray-700 p-2 text-xs flex justify-between"> | |
| <div> | |
| <span class="text-gray-400">CPU:</span> | |
| <span class="ml-1">12%</span> | |
| <span class="text-gray-400 ml-3">Memory:</span> | |
| <span class="ml-1">45MB</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">MIDI:</span> | |
| <span class="ml-1">Not Connected</span> | |
| <button class="ml-3 text-blue-400 hover:text-blue-300">Connect</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Basic functionality for the app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.bg-gray-800.border-b.border-gray-700 button'); | |
| const tabContents = document.querySelectorAll('.flex-1.flex.flex-col > div'); | |
| tabs.forEach((tab, index) => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('border-b-2', 'border-blue-500', 'text-blue-400')); | |
| tabContents.forEach(c => c.classList.add('hidden')); | |
| tab.classList.add('border-b-2', 'border-blue-500', 'text-blue-400'); | |
| tabContents[index].classList.remove('hidden'); | |
| }); | |
| }); | |
| // Sequencer step activation | |
| const steps = document.querySelectorAll('.sequencer-step'); | |
| steps.forEach(step => { | |
| step.addEventListener('click', () => { | |
| step.classList.toggle('active'); | |
| }); | |
| }); | |
| // Play button functionality | |
| const playButton = document.getElementById('playButton'); | |
| let isPlaying = false; | |
| playButton.addEventListener('click', () => { | |
| isPlaying = !isPlaying; | |
| playButton.innerHTML = isPlaying ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>'; | |
| // This would be replaced with actual WebAudio API code | |
| if (isPlaying) { | |
| // Start sequencer | |
| console.log('Playback started'); | |
| } else { | |
| // Stop sequencer | |
| console.log('Playback stopped'); | |
| } | |
| }); | |
| // Drag and drop for samples | |
| const dropzone = document.querySelector('.dropzone'); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0) { | |
| console.log('File dropped:', files[0].name); | |
| // Here you would process the audio file with WebAudio API | |
| } | |
| }); | |
| // Simple piano keyboard | |
| const pianoKeys = document.querySelectorAll('.piano-key'); | |
| pianoKeys.forEach(key => { | |
| key.addEventListener('mousedown', () => { | |
| key.classList.add('active'); | |
| // Play note with WebAudio API | |
| }); | |
| key.addEventListener('mouseup', () => { | |
| key.classList.remove('active'); | |
| // Stop note | |
| }); | |
| key.addEventListener('mouseleave', () => { | |
| if (key.classList.contains('active')) { | |
| key.classList.remove('active'); | |
| // Stop note | |
| } | |
| }); | |
| }); | |
| // Knob rotation (visual only) | |
| const knobs = document.querySelectorAll('.knob'); | |
| knobs.forEach(knob => { | |
| let isDragging = false; | |
| let startY = 0; | |
| let rotation = 0; | |
| knob.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| startY = e.clientY; | |
| knob.style.cursor = 'grabbing'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (isDragging) { | |
| const deltaY = e.clientY - startY; | |
| rotation = Math.min(Math.max(rotation + deltaY * 0.5, -135), 135); | |
| knob.style.transform = `rotate(${rotation}deg)`; | |
| startY = e.clientY; | |
| } | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| knob.style.cursor = 'pointer'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=fluxthedev/daw" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |