|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NEXUS Audio Processor</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #6d28d9; |
|
|
--secondary: #10b981; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: var(--light); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.visualizer { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.audio-bar { |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
height: 4px; |
|
|
transition: all 0.1s ease; |
|
|
transform-origin: left; |
|
|
} |
|
|
|
|
|
.knob { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(145deg, #1e293b, #0f172a); |
|
|
box-shadow: 5px 5px 15px #0a101a, -5px -5px 15px #334155; |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.knob::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background-color: var(--secondary); |
|
|
border-radius: 50%; |
|
|
top: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.effect-card { |
|
|
background: rgba(30, 41, 59, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.effect-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.led { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: #4b5563; |
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.led.active { |
|
|
background-color: var(--secondary); |
|
|
box-shadow: 0 0 10px var(--secondary); |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.6; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.6; } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
canvas { |
|
|
border-radius: 12px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
<header class="py-6 px-6 border-b border-slate-800"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-wave-square text-white"></i> |
|
|
</div> |
|
|
<h1 class="title-font text-2xl font-bold bg-gradient-to-r from-purple-500 to-emerald-400 bg-clip-text text-transparent">NEXUS</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-slate-300 hover:text-white transition">Dashboard</a> |
|
|
<a href="#" class="text-slate-300 hover:text-white transition">Effects</a> |
|
|
<a href="#" class="text-slate-300 hover:text-white transition">Presets</a> |
|
|
<a href="#" class="text-slate-300 hover:text-white transition">Settings</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-slate-300"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="flex-grow container mx-auto px-6 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
|
|
|
<div class="visualizer p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="title-font text-xl font-semibold">Audio Visualizer</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-slate-700 rounded-md text-sm">Waveform</button> |
|
|
<button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Frequency</button> |
|
|
<button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Spectrum</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64 relative"> |
|
|
<canvas id="visualizerCanvas" class="w-full h-full"></canvas> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-1 bg-slate-700"> |
|
|
<div class="audio-bar" id="progressBar"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="text-sm text-slate-400">00:00</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-slate-300 hover:text-white"> |
|
|
<i class="fas fa-backward"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-slate-300 hover:text-white"> |
|
|
<i class="fas fa-forward"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="text-sm text-slate-400">03:42</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="visualizer p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="title-font text-xl font-semibold">10-Band Equalizer</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="led"></div> |
|
|
<span class="text-sm text-slate-400">Flat</span> |
|
|
<button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Presets</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-10 gap-2 h-40"> |
|
|
|
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-3/4 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">60Hz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-2/3 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">150Hz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/2 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">300Hz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/3 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">600Hz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/4 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">1.2kHz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/5 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">2.4kHz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/6 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">4.8kHz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/4 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">9.6kHz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/3 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">14kHz</div> |
|
|
</div> |
|
|
<div class="flex flex-col items-center justify-end"> |
|
|
<div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/2 rounded-t-sm"></div> |
|
|
<div class="text-xs text-slate-400 mt-1">18kHz</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 grid grid-cols-10 gap-2"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
<input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="visualizer p-6"> |
|
|
<h2 class="title-font text-xl font-semibold mb-4">Input Controls</h2> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-2">Input Source</label> |
|
|
<select class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm"> |
|
|
<option>Microphone</option> |
|
|
<option>System Audio</option> |
|
|
<option>Audio File</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-2">Input Gain</label> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="knob"></div> |
|
|
<div class="flex-grow"> |
|
|
<input type="range" min="0" max="100" value="75" class="w-full h-1 bg-slate-700 rounded-full appearance-none"> |
|
|
</div> |
|
|
<span class="text-sm w-10 text-right">75%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<button class="px-4 py-2 bg-slate-800 rounded-md text-sm flex items-center space-x-2"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-emerald-500 rounded-md text-sm flex items-center space-x-2"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
<span>Calibrate</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="visualizer p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="title-font text-xl font-semibold">Effects Rack</h2> |
|
|
<button class="px-3 py-1 bg-gradient-to-r from-purple-600 to-emerald-500 rounded-md text-sm"> |
|
|
<i class="fas fa-plus mr-1"></i> Add |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="effect-card p-4 rounded-lg border border-slate-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-volume-up text-xs text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Compressor</h3> |
|
|
<p class="text-xs text-slate-400">Threshold: -12dB</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="led active"></div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="effect-card p-4 rounded-lg border border-slate-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-xs text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Vocoder</h3> |
|
|
<p class="text-xs text-slate-400">Band: 16</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="led active"></div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="effect-card p-4 rounded-lg border border-slate-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-echo text-xs text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Delay</h3> |
|
|
<p class="text-xs text-slate-400">Feedback: 30%</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="led"></div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="effect-card p-4 rounded-lg border border-slate-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-mountain text-xs text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Reverb</h3> |
|
|
<p class="text-xs text-slate-400">Decay: 2.4s</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="led"></div> |
|
|
<button class="text-slate-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="py-4 px-6 border-t border-slate-800"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center"> |
|
|
<i class="fas fa-wave-square text-xs text-white"></i> |
|
|
</div> |
|
|
<span class="title-font text-sm">NEXUS Audio Processor</span> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<span class="text-xs text-slate-400">v1.0.0</span> |
|
|
<span class="text-xs text-slate-400">CPU: 12%</span> |
|
|
<span class="text-xs text-slate-400">Latency: 4.2ms</span> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const canvas = document.getElementById('visualizerCanvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
|
|
|
canvas.width = canvas.offsetWidth; |
|
|
canvas.height = canvas.offsetHeight; |
|
|
|
|
|
|
|
|
let animationId; |
|
|
let dataArray = new Array(128).fill(0); |
|
|
|
|
|
function drawVisualizer() { |
|
|
animationId = requestAnimationFrame(drawVisualizer); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'rgba(15, 23, 42, 0.2)'; |
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
|
|
|
ctx.lineWidth = 2; |
|
|
ctx.strokeStyle = '#6d28d9'; |
|
|
ctx.beginPath(); |
|
|
|
|
|
const sliceWidth = canvas.width / dataArray.length; |
|
|
let x = 0; |
|
|
|
|
|
for(let i = 0; i < dataArray.length; i++) { |
|
|
|
|
|
dataArray[i] = Math.random() * 0.4 + 0.1; |
|
|
|
|
|
const v = dataArray[i]; |
|
|
const y = canvas.height / 2 + v * canvas.height / 2 * (i % 2 === 0 ? 1 : -1); |
|
|
|
|
|
if(i === 0) { |
|
|
ctx.moveTo(x, y); |
|
|
} else { |
|
|
ctx.lineTo(x, y); |
|
|
} |
|
|
|
|
|
x += sliceWidth; |
|
|
} |
|
|
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); |
|
|
gradient.addColorStop(0, 'rgba(109, 40, 217, 0.1)'); |
|
|
gradient.addColorStop(1, 'rgba(16, 185, 129, 0.1)'); |
|
|
ctx.fillStyle = gradient; |
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
} |
|
|
|
|
|
|
|
|
drawVisualizer(); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
setInterval(() => { |
|
|
progress = (progress + 0.5) % 100; |
|
|
document.getElementById('progressBar').style.width = `${progress}%`; |
|
|
}, 100); |
|
|
|
|
|
|
|
|
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) return; |
|
|
|
|
|
const deltaY = e.clientY - startY; |
|
|
rotation = Math.min(Math.max(rotation + deltaY * 0.5, -90), 90); |
|
|
knob.style.transform = `rotate(${rotation}deg)`; |
|
|
startY = e.clientY; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
isDragging = false; |
|
|
knob.style.cursor = 'pointer'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const effectCards = document.querySelectorAll('.effect-card'); |
|
|
effectCards.forEach(card => { |
|
|
const led = card.querySelector('.led'); |
|
|
card.addEventListener('click', () => { |
|
|
led.classList.toggle('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
canvas.width = canvas.offsetWidth; |
|
|
canvas.height = canvas.offsetHeight; |
|
|
}); |
|
|
</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=AhBoh/prova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
