|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Advanced Synth UI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
.knob-indicator { |
|
|
transform-origin: center; |
|
|
transition: transform 0.1s ease; |
|
|
} |
|
|
.waveform-canvas { |
|
|
background: linear-gradient(to bottom, #1a1a1a, #2d2d2d); |
|
|
} |
|
|
.spectrum-canvas { |
|
|
background: linear-gradient(to bottom, #1a1a1a, #2d2d2d); |
|
|
} |
|
|
.glass-effect { |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
} |
|
|
.knob-glow { |
|
|
box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); |
|
|
} |
|
|
.knob-glow-purple { |
|
|
box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); |
|
|
} |
|
|
.knob-glow-orange { |
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.5); |
|
|
} |
|
|
.knob-glow-green { |
|
|
box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); |
|
|
} |
|
|
.knob-tick { |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
height: 8px; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
transform-origin: bottom center; |
|
|
} |
|
|
.key-white { |
|
|
background: linear-gradient(to bottom, #fff, #f3f3f3); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.key-black { |
|
|
background: linear-gradient(to bottom, #333, #222); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.key-white.active { |
|
|
background: linear-gradient(to bottom, #e0e0e0, #d0d0d0); |
|
|
transform: translateY(1px); |
|
|
} |
|
|
.key-black.active { |
|
|
background: linear-gradient(to bottom, #222, #111); |
|
|
transform: translateY(1px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-gray-200"> |
|
|
|
|
|
<div class="bg-black/50 glass-effect border-b border-gray-700 p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent"> |
|
|
Deep PolySynth |
|
|
</h1> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all flex items-center gap-1"> |
|
|
<span>▶</span> Play |
|
|
</button> |
|
|
<button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all flex items-center gap-1"> |
|
|
<span>⏹</span> Stop |
|
|
</button> |
|
|
<button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all flex items-center gap-1"> |
|
|
<span>⏺</span> Rec |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="text-sm text-gray-400">BPM: 120</div> |
|
|
<div class="text-sm text-gray-400">CPU: 23%</div> |
|
|
<button class="px-3 py-1.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg text-sm font-medium shadow hover:from-green-600 hover:to-emerald-600 transition-all"> |
|
|
Save |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex h-[calc(100vh-80px)]"> |
|
|
|
|
|
<div class="w-64 bg-gray-900/50 glass-effect border-r border-gray-700 p-4 overflow-y-auto"> |
|
|
|
|
|
<div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50 mb-4"> |
|
|
<div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Browser</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="space-y-2"> |
|
|
<div class="text-sm text-gray-300">📁 Presets</div> |
|
|
<div class="text-sm text-gray-300">🎵 Samples</div> |
|
|
<div class="text-sm text-gray-300">⚡ Effects</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50 mb-4"> |
|
|
<div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">History</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all"> |
|
|
↶ Undo |
|
|
</button> |
|
|
<button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all"> |
|
|
↷ Redo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-orange-500 bg-orange-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-orange-600 to-orange-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Randomizer</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<span class="text-sm text-gray-300 min-w-16">Intensity</span> |
|
|
<div class="relative w-32 h-6 bg-gray-700 rounded-full cursor-pointer"> |
|
|
<div class="absolute left-0 top-0 h-full bg-orange-500 rounded-full" style="width: 70%"></div> |
|
|
<div class="absolute w-6 h-6 bg-orange-500 rounded-full shadow-lg border-2 border-white transform -translate-y-1/2 top-1/2 hover:scale-105 transition-all" style="left: 70%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-400 min-w-12 text-right">0.70</span> |
|
|
</div> |
|
|
<button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all w-full"> |
|
|
🎲 Randomize |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 p-6 overflow-y-auto"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Oscillators</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(-45deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="113 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Frequency</div> |
|
|
<div class="text-xs text-gray-400">440Hz</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Detune</div> |
|
|
<div class="text-xs text-gray-400">0¢</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(81deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,211,238)" stroke-width="3" stroke-linecap="round" stroke-dasharray="226.4 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Level</div> |
|
|
<div class="text-xs text-gray-400">80%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Filter</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Cutoff</div> |
|
|
<div class="text-xs text-gray-400">1000Hz</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(90deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="70.75 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Resonance</div> |
|
|
<div class="text-xs text-gray-400">5.00</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-16 h-16 relative cursor-pointer select-none knob-glow-purple"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(168,85,247)" stroke-width="3" stroke-linecap="round" stroke-dasharray="141.5 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Drive</div> |
|
|
<div class="text-xs text-gray-400">0dB</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-green-500 bg-green-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-green-600 to-green-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Envelope</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-4 gap-3"> |
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(0deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="28.3 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Attack</div> |
|
|
<div class="text-xs text-gray-400">0.10s</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="84.9 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Decay</div> |
|
|
<div class="text-xs text-gray-400">0.30s</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(135deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="198.1 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Sustain</div> |
|
|
<div class="text-xs text-gray-400">0.70</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-green"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(90deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(34,197,94)" stroke-width="3" stroke-linecap="round" stroke-dasharray="169.8 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Release</div> |
|
|
<div class="text-xs text-gray-400">1.20s</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-orange-500 bg-orange-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-orange-600 to-orange-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Effects</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(45deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="84.9 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Reverb</div> |
|
|
<div class="text-xs text-gray-400">0.30</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(22.5deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="56.6 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Delay</div> |
|
|
<div class="text-xs text-gray-400">0.20</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center gap-2 relative"> |
|
|
<div class="w-12 h-12 relative cursor-pointer select-none knob-glow-orange"> |
|
|
<div class="w-full h-full rounded-full bg-gradient-to-br from-gray-700 to-gray-900 shadow-lg border-2 border-gray-600 transition-all duration-150"> |
|
|
<div class="w-4/5 h-4/5 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-inner transition-transform duration-150 knob-indicator" style="transform: translate(-50%, -50%) rotate(11.25deg);"> |
|
|
<div class="w-2 h-2 bg-white rounded-full absolute top-1 left-1/2 transform -translate-x-1/2 shadow-sm"></div> |
|
|
</div> |
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90"> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="2 4"></circle> |
|
|
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="rgb(249,115,22)" stroke-width="3" stroke-linecap="round" stroke-dasharray="28.3 283" class="transition-all duration-300"></circle> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-xs text-gray-300 font-medium">Distortion</div> |
|
|
<div class="text-xs text-gray-400">0.10</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-900/50 glass-effect rounded-lg p-4 border border-gray-700"> |
|
|
<div class="relative"> |
|
|
<canvas width="300" height="100" class="waveform-canvas rounded border border-gray-600"></canvas> |
|
|
<div class="absolute top-2 left-2 text-xs text-gray-400">WAVEFORM</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-900/50 glass-effect rounded-lg p-4 border border-gray-700"> |
|
|
<div class="relative"> |
|
|
<canvas width="300" height="150" class="spectrum-canvas rounded border border-gray-600"></canvas> |
|
|
<div class="absolute top-2 left-2 text-xs text-gray-400">SPECTRUM</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-80 bg-gray-900/50 glass-effect border-l border-gray-700 p-4 overflow-y-auto"> |
|
|
|
|
|
<div class="rounded-lg border-2 border-purple-500 bg-purple-500/10 bg-gray-900/50 mb-4"> |
|
|
<div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-2 flex items-center justify-between"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Preset Morpher</h3> |
|
|
<button class="text-white hover:text-gray-200 transition-colors">▼</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="space-y-4"> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<select class="bg-gray-700 rounded px-2 py-1 text-sm"> |
|
|
<option>Bass</option> |
|
|
<option>Lead</option> |
|
|
<option>Pad</option> |
|
|
</select> |
|
|
<select class="bg-gray-700 rounded px-2 py-1 text-sm"> |
|
|
<option>Pluck</option> |
|
|
<option>Trance</option> |
|
|
<option>Ambient</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center gap-3"> |
|
|
<span class="text-sm text-gray-300 min-w-16">Morph</span> |
|
|
<div class="relative w-32 h-6 bg-gray-700 rounded-full cursor-pointer"> |
|
|
<div class="absolute left-0 top-0 h-full bg-purple-500 rounded-full" style="width: 50%"></div> |
|
|
<div class="absolute w-6 h-6 bg-purple-500 rounded-full shadow-lg border-2 border-white transform -translate-y-1/2 top-1/2 hover:scale-105 transition-all" style="left: 50%"></div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-400 min-w-12 text-right">0.50</span> |
|
|
</div> |
|
|
<button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all w-full"> |
|
|
Apply |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-lg border-2 border-cyan-500 bg-cyan-500/10 bg-gray-900/50"> |
|
|
<div class="bg-gradient-to-r from-cyan-600 to-cyan-700 px-4 py-2"> |
|
|
<h3 class="font-semibold text-white text-sm uppercase tracking-wide">Sequencer</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-sm font-medium shadow hover:from-cyan-600 hover:to-blue-600 transition-all ring-2 ring-cyan-400"> |
|
|
Drums |
|
|
</button> |
|
|
<button class="px-3 py-1.5 bg-gray-700 text-gray-200 border border-gray-600 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all"> |
|
|
Piano |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-8 gap-1"> |
|
|
<button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-gray-600 hover:border-gray-500 transition-all"></button> |
|
|
<button class="w-6 h-6 rounded border-2 border-cyan-400 bg-cyan-400/20 transition-all"></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black/50 glass-effect border-t border-gray-700 p-4"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<div class="flex gap-1 relative"> |
|
|
|
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">C</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">D</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">E</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">F</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">G</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">A</button> |
|
|
<button class="key-white px-4 py-8 rounded transition-all w-12 text-black">B</button> |
|
|
|
|
|
|
|
|
<button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-9">C#</button> |
|
|
<button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-21">D#</button> |
|
|
<button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-45">F#</button> |
|
|
<button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-57">G#</button> |
|
|
<button class="key-black px-4 py-8 rounded transition-all w-8 -mx-2 z-10 text-white absolute left-69">A#</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const waveformCanvas = document.querySelector('.waveform-canvas'); |
|
|
const waveformCtx = waveformCanvas.getContext('2d'); |
|
|
|
|
|
|
|
|
const waveformData = new Float32Array(300); |
|
|
for (let i = 0; i < waveformData.length; i++) { |
|
|
waveformData[i] = Math.sin(i / 10) * 0.8 + (Math.random() * 0.2 - 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
function drawWaveform() { |
|
|
waveformCtx.fillStyle = '#1a1a1a'; |
|
|
waveformCtx.fillRect(0, 0, 300, 100); |
|
|
|
|
|
|
|
|
waveformCtx.strokeStyle = '#333'; |
|
|
waveformCtx.lineWidth = 1; |
|
|
|
|
|
|
|
|
for (let i = 0; i <= 4; i++) { |
|
|
const y = (100 / 4) * i; |
|
|
waveformCtx.beginPath(); |
|
|
waveformCtx.moveTo(0, y); |
|
|
waveformCtx.lineTo(300, y); |
|
|
waveformCtx.stroke(); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i <= 8; i++) { |
|
|
const x = (300 / 8) * i; |
|
|
waveformCtx.beginPath(); |
|
|
waveformCtx.moveTo(x, 0); |
|
|
waveformCtx.lineTo(x, 100); |
|
|
waveformCtx.stroke(); |
|
|
} |
|
|
|
|
|
|
|
|
waveformCtx.strokeStyle = '#00bcd4'; |
|
|
waveformCtx.lineWidth = 2; |
|
|
waveformCtx.beginPath(); |
|
|
|
|
|
const sliceWidth = 300 / waveformData.length; |
|
|
let x = 0; |
|
|
|
|
|
for (let i = 0; i < waveformData.length; i++) { |
|
|
const v = waveformData[i] * 0.5; |
|
|
const y = (v + 1) * 100 / 2; |
|
|
|
|
|
if (i === 0) { |
|
|
waveformCtx.moveTo(x, y); |
|
|
} else { |
|
|
waveformCtx.lineTo(x, y); |
|
|
} |
|
|
|
|
|
x += sliceWidth; |
|
|
} |
|
|
|
|
|
waveformCtx.stroke(); |
|
|
|
|
|
|
|
|
waveformCtx.shadowColor = '#00bcd4'; |
|
|
waveformCtx.shadowBlur = 10; |
|
|
waveformCtx.stroke(); |
|
|
waveformCtx.shadowBlur = 0; |
|
|
} |
|
|
|
|
|
|
|
|
const spectrumCanvas = document.querySelector('.spectrum-canvas'); |
|
|
const spectrumCtx = spectrumCanvas.getContext('2d'); |
|
|
|
|
|
|
|
|
function drawSpectrum() { |
|
|
spectrumCtx.fillStyle = '#1a1a1a'; |
|
|
spectrumCtx.fillRect(0, 0, 300, 150); |
|
|
|
|
|
|
|
|
const bufferLength = 32; |
|
|
const dataArray = new Uint8Array(bufferLength); |
|
|
for (let i = 0; i < bufferLength; i++) { |
|
|
dataArray[i] = Math.floor(Math.random() * 150) * (1 - i/bufferLength); |
|
|
} |
|
|
|
|
|
const barWidth = 300 / bufferLength * 2.5; |
|
|
let x = 0; |
|
|
|
|
|
for (let i = 0; i < bufferLength; i++) { |
|
|
const barHeight = (dataArray[i] / 255) * 150; |
|
|
|
|
|
|
|
|
const gradient = spectrumCtx.createLinearGradient(0, 150 - barHeight, 0, 150); |
|
|
gradient.addColorStop(0, '#ff6b6b'); |
|
|
gradient.addColorStop(0.5, '#4ecdc4'); |
|
|
gradient.addColorStop(1, '#45b7d1'); |
|
|
|
|
|
spectrumCtx.fillStyle = gradient; |
|
|
spectrumCtx.fillRect(x, 150 - barHeight, barWidth, barHeight); |
|
|
|
|
|
x += barWidth + 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function animate() { |
|
|
|
|
|
for (let i = 0; i < waveformData.length; i++) { |
|
|
waveformData[i] = waveformData[i] * 0.9 + (Math.random() * 0.2 - 0.1); |
|
|
} |
|
|
|
|
|
drawWaveform(); |
|
|
drawSpectrum(); |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
|
|
|
animate(); |
|
|
|
|
|
|
|
|
const keys = document.querySelectorAll('.key-white, .key-black'); |
|
|
keys.forEach(key => { |
|
|
key.addEventListener('mousedown', () => { |
|
|
key.classList.add('active'); |
|
|
}); |
|
|
|
|
|
key.addEventListener('mouseup', () => { |
|
|
key.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
key.addEventListener('mouseleave', () => { |
|
|
key.classList.remove('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const knobs = document.querySelectorAll('.knob-indicator'); |
|
|
knobs.forEach(knob => { |
|
|
let isDragging = false; |
|
|
let startY = 0; |
|
|
let startRotation = 0; |
|
|
|
|
|
knob.parentElement.addEventListener('mousedown', (e) => { |
|
|
isDragging = true; |
|
|
startY = e.clientY; |
|
|
const transform = knob.style.transform.match(/rotate\(([^)]+)deg\)/); |
|
|
startRotation = transform ? parseFloat(transform[1]) : 0; |
|
|
knob.parentElement.classList.add('shadow-xl', 'scale-105'); |
|
|
knob.parentElement.querySelector('.knob-glow, .knob-glow-purple, .knob-glow-orange, .knob-glow-green').classList.add('shadow-lg'); |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const deltaY = startY - e.clientY; |
|
|
const newRotation = Math.max(-135, Math.min(135, startRotation + deltaY * 0.5)); |
|
|
knob.style.transform = `translate(-50%, -50%) rotate(${newRotation}deg)`; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
if (isDragging) { |
|
|
isDragging = false; |
|
|
knob.parentElement.classList.remove('shadow-xl', 'scale-105'); |
|
|
knob.parentElement.querySelector('.knob-glow, .knob-glow-purple, .knob-glow-orange, .knob-glow-green').classList.remove('shadow-lg'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=ninjacricket/cute-synth-no-audio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
