Загрузка...
Секция с UI плеером для аудиоинженерии: интерактивный эквалайзер, регулятор громкости, кнопки управления. Для лендингов и страниц продукта.
<section class="bg-[#0e1017] border-white/5 border-t py-24">
<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="grid lg:grid-cols-2 gap-16 gap-x-16 gap-y-16 items-center">
<div class="">
<div class="text-xs font-medium text-cyan-400 uppercase tracking-widest mb-4 flex items-center gap-2">
<span class="w-8 h-px bg-cyan-400/50"></span>
Engineering
</div>
<h2 class="text-4xl md:text-5xl font-medium tracking-tight text-white mb-6">Master the <br> Soundstage</h2>
<p class="text-lg text-slate-400 mb-8 leading-relaxed font-light">
The AX-7000 is engineered for absolute acoustic clarity. Featuring custom-weighted rotary controls and
precision signal toggles, it allows for granular adjustment of bass response and frequency isolation.
Experience studio-grade sound engineering in a refined industrial form factor.
</p>
</div>
<!-- Chart UI -->
<div
class="sm:p-8 overflow-hidden w-full max-w-md border-[#2a2a2d] border rounded-[2.5rem] pt-6 pr-6 pb-6 pl-6 relative"
style="--panel-bg: linear-gradient(145deg, #222226, #121215); --panel-shadow: 20px 25px 50px rgba(0, 0, 0, 0.9), -2px -2px 10px rgba(255, 255, 255, 0.03), inset 1px 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 4px rgba(0, 0, 0, 0.8); --recessed-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.9), inset -1px -1px 3px rgba(255, 255, 255, 0.04); --button-bg: linear-gradient(145deg, #2a2a2e, #1a1a1d); --button-shadow: 5px 5px 12px rgba(0, 0, 0, 0.7), -1px -1px 4px rgba(255, 255, 255, 0.05), inset 1px 1px 1px rgba(255, 255, 255, 0.1); --dial-metallic: conic-gradient(from 180deg at 50% 50%, #2a2a2e 0%, #44444a 15%, #2a2a2e 30%, #151518 50%, #2a2a2e 70%, #44444a 85%, #2a2a2e 100%); --neon-rose: #fb7185; --neon-orange: #fb923c; --neon-glow-rose: 0 0 15px rgba(251, 113, 133, 0.6), inset 0 0 10px rgba(251, 113, 133, 0.4); --neon-glow-orange: 0 0 15px rgba(251, 146, 60, 0.6), inset 0 0 10px rgba(251, 146, 60, 0.4); background: var(--panel-bg); box-shadow: var(--panel-shadow)">
<!-- Corner Screws -->
<div
class="absolute top-5 left-5 w-2 h-2 rounded-full bg-[#151515] flex items-center justify-center shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div class="w-full h-[1px] bg-black/60 rotate-45"></div>
</div>
<div
class="absolute top-5 right-5 w-2 h-2 rounded-full bg-[#151515] flex items-center justify-center shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div class="w-full h-[1px] bg-black/60 -rotate-45"></div>
</div>
<div
class="absolute bottom-5 left-5 w-2 h-2 rounded-full bg-[#151515] flex items-center justify-center shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div class="w-full h-[1px] bg-black/60 -rotate-12"></div>
</div>
<div
class="absolute bottom-5 right-5 w-2 h-2 rounded-full bg-[#151515] flex items-center justify-center shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div class="w-full h-[1px] bg-black/60 rotate-12"></div>
</div>
<!-- Header / Logo -->
<div class="flex justify-between items-center mb-8 px-2">
<div class="flex flex-col">
<span class="text-[10px] font-normal tracking-widest uppercase text-[#050505]" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">
Precision Audio
</span>
<span class="text-xl font-medium tracking-tight uppercase text-[#050505] leading-none mt-1" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">
AX-7000
</span>
</div>
<!-- Sensor/Mic Grille -->
<div
class="w-12 h-4 rounded-full bg-[#0a0a0c] overflow-hidden relative shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div class="absolute inset-0 opacity-70"
style="background-image: radial-gradient(#111 1.5px, transparent 1.5px); background-size: 4px 4px;"></div>
</div>
</div>
<!-- Digital Display Screen -->
<div
class="overflow-hidden flex flex-col w-full h-24 rounded-2xl mb-10 pt-4 pr-4 pb-4 pl-4 relative justify-center"
style="background: #050505; box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 1), inset 0px -2px 5px rgba(255, 255, 255, 0.05); border-top: 2px solid #000; border-bottom: 1px solid #333;">
<!-- Screen Glare Reflection -->
<div
class="absolute -top-10 -left-10 w-full h-full bg-gradient-to-br from-white/5 to-transparent rotate-12 pointer-events-none rounded-full blur-xl">
</div>
<div class="flex flex-col items-center justify-center z-10">
<div id="display-track"
class="text-[10px] font-medium tracking-[0.2em] uppercase text-rose-500/80 mb-2 truncate max-w-full">
System Paused</div>
<div class="flex opacity-80 h-6 gap-x-1 items-end" id="equalizer">
<div class="w-1 bg-rose-500 h-2 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 113, 133, 0.4)"></div>
<div class="w-1 bg-rose-400 h-4 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 113, 133, 0.4)"></div>
<div class="w-1 bg-orange-400 h-3 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 146, 60, 0.4)"></div>
<div class="w-1 bg-orange-500 h-5 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 146, 60, 0.4)"></div>
<div class="w-1 bg-rose-400 h-2 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 113, 133, 0.4)"></div>
<div class="w-1 bg-orange-400 h-4 rounded-t-sm" style="box-shadow: 0 0 8px rgba(251, 146, 60, 0.4)"></div>
</div>
</div>
</div>
<!-- Central Rotary Dial Assembly -->
<div id="dial-wrapper"
class="flex w-64 h-64 mr-auto mb-10 ml-auto relative items-center justify-center cursor-pointer group">
<!-- Outer Recessed Groove -->
<div
class="absolute inset-0 rounded-full bg-[#111113] border border-[#222] shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
</div>
<!-- Neon Progress Arc Layer -->
<div class="absolute inset-[10px] rounded-full overflow-hidden">
<div id="volume-arc" class="w-full h-full rounded-full transition-all duration-300"
style="background: conic-gradient(from 215deg, #fb7185 0%, #fb923c 65%, transparent 65%, transparent 100%); filter: blur(2px);">
</div>
</div>
<!-- Inner Mask -->
<div class="absolute inset-[16px] rounded-full bg-[#121215]"
style="box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 8px, rgba(255, 255, 255, 0.05) 1px 1px 2px inset;"></div>
<!-- The Mechanical Dial -->
<div id="main-dial"
class="relative w-44 h-44 rounded-full flex items-center justify-center z-10 transition-transform duration-300 active:scale-[0.98]"
style="background: conic-gradient(from 180deg, rgb(42, 42, 46) 0%, rgb(68, 68, 74) 15%, rgb(42, 42, 46) 30%, rgb(21, 21, 24) 50%, rgb(42, 42, 46) 70%, rgb(68, 68, 74) 85%, rgb(42, 42, 46) 100%); box-shadow: rgba(0, 0, 0, 0.8) 10px 15px 30px, rgba(255, 255, 255, 0.06) -2px -2px 6px, rgba(255, 255, 255, 0.15) 2px 2px 3px inset, rgba(0, 0, 0, 0.6) -2px -2px 5px inset; transform: rotate(39deg);">
<div class="absolute inset-2 rounded-full border border-black/40"
style="box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1);"></div>
<div class="absolute inset-4 rounded-full border border-black/30"></div>
<!-- Dial Indicator Dot -->
<div id="dial-dot"
class="absolute top-4 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-rose-400 transition-all duration-300 shadow-[0_0_15px_rgba(251,113,133,0.6),inset_0_0_10px_rgba(251,113,133,0.4)]"
style="transform-origin: center 88px;"></div>
</div>
<!-- Fixed Center Cap -->
<div
class="flex flex-col bg-gradient-to-br from-[#1a1a1d] to-[#111113] w-20 h-20 border-[#2a2a2d] border rounded-full absolute items-center justify-center z-20 pointer-events-none shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-volume-2 text-zinc-500 mb-1">
<path d="M11 5L6 9H2v6h4l5 4V5z" class=""></path>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" class=""></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14" class=""></path>
</svg>
<span id="volume-text" class="text-[10px] font-medium text-zinc-600 tracking-tighter uppercase" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">65%</span>
</div>
</div>
<!-- Primary Playback Controls -->
<div class="flex items-center justify-center gap-6 mb-10">
<button id="prev-btn" class="w-14 h-14 rounded-full flex items-center justify-center text-zinc-500 transition-all duration-150 border border-[#2a2a2d] active:scale-95 shadow-[5px_5px_12px_rgba(0,0,0,0.7),-1px_-1px_4px_rgba(255,255,255,0.05),inset_1px_1px_1px_rgba(255,255,255,0.1)]" style="background: linear-gradient(145deg, #2a2a2e, #1a1a1d);">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-back drop-shadow-[0_1px_1px_rgba(0,0,0,1)]"><polygon points="19 20 9 12 19 4 19 20" class=""></polygon><line x1="5" x2="5" y1="19" y2="5" class=""></line></svg>
</button>
<button id="play-btn" class="w-20 h-20 rounded-full flex items-center justify-center text-zinc-400 transition-all duration-150 border border-[#333] active:scale-95 group shadow-[5px_5px_12px_rgba(0,0,0,0.7),-1px_-1px_4px_rgba(255,255,255,0.05),inset_1px_1px_1px_rgba(255,255,255,0.1)]" style="background: linear-gradient(145deg, #2a2a2e, #1a1a1d);">
<div id="play-icon" class="flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play w-[32px] h-[32px] ml-1 drop-shadow-[0_2px_2px_rgba(0,0,0,1)]"><polygon points="5 3 19 12 5 21 5 3" class=""></polygon></svg>
</div>
<div id="pause-icon" class="hidden flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause drop-shadow-[0_2px_2px_rgba(0,0,0,1)]"><rect x="6" y="4" width="4" height="16" class=""></rect><rect x="14" y="4" width="4" height="16" class=""></rect></svg>
</div>
</button>
<button id="next-btn" class="w-14 h-14 rounded-full flex items-center justify-center text-zinc-500 transition-all duration-150 border border-[#2a2a2d] active:scale-95 shadow-[5px_5px_12px_rgba(0,0,0,0.7),-1px_-1px_4px_rgba(255,255,255,0.05),inset_1px_1px_1px_rgba(255,255,255,0.1)]" style="background: linear-gradient(145deg, #2a2a2e, #1a1a1d);">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-forward drop-shadow-[0_1px_1px_rgba(0,0,0,1)]"><polygon points="5 4 15 12 5 20 5 4" class=""></polygon><line x1="19" x2="19" y1="5" y2="19" class=""></line></svg>
</button>
</div>
<!-- Hardware Toggles Section -->
<div
class="flex justify-between items-center px-4 pt-4 border-t border-[#2a2a2d] shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
<div class="flex flex-col items-center gap-3">
<span class="text-[10px] tracking-widest uppercase font-normal text-[#050505]" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">Bass Boost</span>
<div class="flex items-center gap-3">
<div id="led-bass" class="w-1.5 h-1.5 rounded-full bg-zinc-700 transition-colors duration-300"></div>
<div id="toggle-bass"
class="relative w-10 h-5 rounded-full bg-[#0a0a0c] border border-black/50 cursor-pointer shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div
class="knob absolute top-[1px] left-[1px] w-[16px] h-[16px] rounded-full border border-[#333] transition-all duration-200"
style="background: linear-gradient(145deg, #3a3a40, #1a1a1d);"></div>
</div>
</div>
</div>
<div class="flex flex-col items-center gap-3">
<span class="text-[10px] tracking-widest uppercase font-normal text-[#050505]" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">Isolation</span>
<div class="flex items-center gap-3">
<div id="led-iso" class="w-1.5 h-1.5 rounded-full bg-zinc-700 transition-colors duration-300"></div>
<div id="toggle-iso"
class="relative w-10 h-5 rounded-full bg-[#0a0a0c] border border-black/50 cursor-pointer shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div
class="knob absolute top-[1px] left-[1px] w-[16px] h-[16px] rounded-full border border-[#333] transition-all duration-200"
style="background: linear-gradient(145deg, #3a3a40, #1a1a1d);"></div>
</div>
</div>
</div>
<div class="flex flex-col items-center gap-3">
<span class="text-[10px] tracking-widest uppercase font-normal text-[#050505]" style="text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.08);">Direct</span>
<div class="flex items-center gap-3">
<div id="led-direct"
class="w-1.5 h-1.5 rounded-full bg-amber-400 shadow-[0_0_15px_rgba(251,146,60,0.6),inset_0_0_10px_rgba(251,146,60,0.4)]">
</div>
<div id="toggle-direct"
class="relative w-10 h-5 rounded-full bg-[#0a0a0c] border border-black/50 cursor-pointer shadow-[inset_4px_4px_10px_rgba(0,0,0,0.9),_inset_-1px_-1px_3px_rgba(255,255,255,0.04)]">
<div
class="knob absolute top-[1px] left-[21px] w-[16px] h-[16px] rounded-full border border-[#444] transition-all duration-200 shadow-[2px_2px_5px_rgba(0,0,0,0.6)]"
style="background: linear-gradient(145deg, #4a4a52, #2a2a2e);"></div>
</div>
</div>
</div>
</div>
<audio id="audio-player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" loop=""></audio>
<script>
(function() {
const audio = document.getElementById('audio-player');
const playBtn = document.getElementById('play-btn');
const playIcon = document.getElementById('play-icon');
const pauseIcon = document.getElementById('pause-icon');
const trackDisplay = document.getElementById('display-track');
const volumeDial = document.getElementById('main-dial');
const volumeArc = document.getElementById('volume-arc');
const volumeText = document.getElementById('volume-text');
const equalizer = document.getElementById('equalizer').children;
let isPlaying = false;
let volume = 0.65;
let trackIndex = 1;
function updateUI() {
if (isPlaying) {
playIcon.classList.add('hidden');
pauseIcon.classList.remove('hidden');
trackDisplay.textContent = "Audio Stream 0" + trackIndex;
trackDisplay.classList.add('animate-pulse');
} else {
playIcon.classList.remove('hidden');
pauseIcon.classList.add('hidden');
trackDisplay.textContent = "System Paused";
trackDisplay.classList.remove('animate-pulse');
}
const deg = volume * 260 - 130;
volumeDial.style.transform = `rotate(${deg}deg)`;
volumeArc.style.background = `conic-gradient(from 215deg, #fb7185 0%, #fb923c ${volume * 100}%, transparent ${volume * 100}%, transparent 100%)`;
volumeText.textContent = Math.round(volume * 100) + '%';
audio.volume = volume;
}
playBtn.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
} else {
audio.play();
}
isPlaying = !isPlaying;
updateUI();
});
document.getElementById('prev-btn').addEventListener('click', () => {
trackIndex = trackIndex > 1 ? trackIndex - 1 : 9;
audio.src = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-${trackIndex}.mp3`;
if (isPlaying) audio.play();
updateUI();
});
document.getElementById('next-btn').addEventListener('click', () => {
trackIndex = trackIndex < 9 ? trackIndex + 1 : 1;
audio.src = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-${trackIndex}.mp3`;
if (isPlaying) audio.play();
updateUI();
});
document.getElementById('dial-wrapper').addEventListener('click', (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - (rect.left + rect.width / 2);
const y = e.clientY - (rect.top + rect.height / 2);
let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
if (angle < 0) angle += 360;
if (angle > 180 && angle < 360) {
volume = Math.min(1, Math.max(0, (angle - 215) / 130));
updateUI();
}
});
const setupToggle = (id, ledId) => {
const toggle = document.getElementById(id);
const led = document.getElementById(ledId);
let active = id === 'toggle-direct';
toggle.addEventListener('click', () => {
active = !active;
const knob = toggle.querySelector('.knob');
if (active) {
knob.style.left = '21px';
knob.style.background = 'linear-gradient(145deg, #4a4a52, #2a2a2e)';
led.style.backgroundColor = id === 'toggle-direct' ? '#fbbf24' : '#fb923c';
if (ledId !== 'led-direct') led.style.boxShadow = '0 0 15px rgba(251, 146, 60, 0.6), inset 0 0 10px rgba(251, 146, 60, 0.4)';
} else {
knob.style.left = '1px';
knob.style.background = 'linear-gradient(145deg, #3a3a40, #1a1a1d)';
led.style.backgroundColor = '#3f3f46';
led.style.boxShadow = 'none';
}
});
};
setupToggle('toggle-bass', 'led-bass');
setupToggle('toggle-iso', 'led-iso');
setupToggle('toggle-direct', 'led-direct');
setInterval(() => {
if (isPlaying) {
Array.from(equalizer).forEach(bar => {
const h = 4 + Math.random() * 16;
bar.style.height = `${h}px`;
});
} else {
Array.from(equalizer).forEach(bar => {
bar.style.height = '4px';
});
}
}, 150);
updateUI();
})();
</script>
</div>
</div>
</div>
</section>