|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DJ Production Studio Setup</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> |
|
|
.equipment-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.studio-layout { |
|
|
background-image: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
.acoustic-wave { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.acoustic-wave::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 10px; |
|
|
background: linear-gradient(90deg, |
|
|
rgba(99, 102, 241, 0.8) 0%, |
|
|
rgba(168, 85, 247, 0.6) 20%, |
|
|
rgba(236, 72, 153, 0.4) 40%, |
|
|
rgba(239, 68, 68, 0.2) 60%, |
|
|
transparent 100%); |
|
|
animation: wave 3s linear infinite; |
|
|
} |
|
|
@keyframes wave { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
.knob { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: conic-gradient(from 0deg, #4f46e5, #a855f7, #ec4899, #f43f5e, #4f46e5); |
|
|
position: relative; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.knob::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
left: 50%; |
|
|
width: 2px; |
|
|
height: 15px; |
|
|
background: white; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 font-sans"> |
|
|
|
|
|
<header class="studio-layout py-12 px-6 relative"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600"> |
|
|
DJ Production Studio |
|
|
</h1> |
|
|
<p class="mt-4 text-lg text-gray-300 max-w-lg"> |
|
|
Professional equipment setup and workflow optimization for the modern DJ and music producer. |
|
|
</p> |
|
|
<button id="toggleMode" class="mt-6 px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-medium hover:opacity-90 transition-all"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Studio Mode |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 rounded-full bg-gradient-to-br from-purple-900 to-pink-900 opacity-70 animate-pulse"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
|
|
<div class="knob"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-6xl mx-auto px-6 py-12"> |
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Core Equipment Setup</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="equipment-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border-l-4 border-purple-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-sliders-h text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">DJ Controller/Mixer</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
|
|
<span>Professional-grade with multiple channels</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
|
|
<span>Built-in high-quality audio interface</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i> |
|
|
<span>Precision faders and jog wheels</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400">Recommended:</span> |
|
|
<span class="text-purple-300 font-medium">Pioneer DJM-900NXS2</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="equipment-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border-l-4 border-pink-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-volume-up text-pink-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Audio Monitors</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
|
|
<span>Studio reference monitors for accuracy</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
|
|
<span>Subwoofer for low-end monitoring</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i> |
|
|
<span>Isolation pads for clean sound</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400">Recommended:</span> |
|
|
<span class="text-pink-300 font-medium">KRK Rokit 8 G4</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="equipment-card bg-gray-800 rounded-xl p-6 transition-all duration-300 border-l-4 border-indigo-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-laptop-code text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">Computer System</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> |
|
|
<span>High-performance laptop/desktop</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> |
|
|
<span>SSD storage for quick access</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i> |
|
|
<span>Multiple displays for workflow</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-400">Minimum Specs:</span> |
|
|
<span class="text-indigo-300 font-medium">i7, 16GB RAM, 1TB SSD</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Software Tools</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-music text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">DAW (Digital Audio Workstation)</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
The central hub for music production, offering comprehensive tools for recording, editing, and mixing. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm">Virtual Instruments</span> |
|
|
<span class="px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm">Audio Effects</span> |
|
|
<span class="px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm">MIDI Editing</span> |
|
|
<span class="px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm">Automation</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium mb-2">Popular Options:</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fab fa-ableton text-blue-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">Ableton</span> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-compact-disc text-blue-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">FL Studio</span> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-cube text-blue-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">Logic Pro</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-cyan-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-compact-disc text-cyan-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">DJ Software</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Specialized software for live performance, track organization, and creative mixing. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 rounded-full text-sm">Beat Matching</span> |
|
|
<span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 rounded-full text-sm">Effects</span> |
|
|
<span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 rounded-full text-sm">Sampling</span> |
|
|
<span class="px-3 py-1 bg-cyan-900/50 text-cyan-300 rounded-full text-sm">Recording</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium mb-2">Popular Options:</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-cyan-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fab fa-soundcloud text-cyan-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">Serato</span> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-cyan-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-record-vinyl text-cyan-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">Traktor</span> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-cyan-900/30 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-wave-square text-cyan-400 text-3xl"></i> |
|
|
</div> |
|
|
<span class="text-sm">Rekordbox</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16 studio-layout rounded-xl overflow-hidden"> |
|
|
<div class="acoustic-wave"> |
|
|
<div class="p-8 md:p-12"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-purple-400 to-pink-400 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Studio Layout & Acoustics</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Acoustic Treatment</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-700 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-wave-square text-purple-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Bass Traps</h4> |
|
|
<p class="text-gray-300 text-sm">Installed in corners to control low-frequency buildup and standing waves.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-pink-700 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-border-style text-pink-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Acoustic Panels</h4> |
|
|
<p class="text-gray-300 text-sm">Wall-mounted panels to absorb mid and high frequencies, reducing reflections.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-700 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-project-diagram text-indigo-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Diffusers</h4> |
|
|
<p class="text-gray-300 text-sm">Scatter sound waves evenly throughout the room for natural acoustics.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">Cable Management</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-700 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-plug text-blue-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Under-desk Trays</h4> |
|
|
<p class="text-gray-300 text-sm">Keep cables organized and out of sight while maintaining accessibility.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-cyan-700 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-bolt text-cyan-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Power Conditioning</h4> |
|
|
<p class="text-gray-300 text-sm">Protect equipment from power surges and ensure clean electricity.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700/50"> |
|
|
<h3 class="text-xl font-semibold mb-4">Studio Layout Diagram</h3> |
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-900 rounded-lg overflow-hidden relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-4/5 h-4/5 bg-gray-800 rounded-lg relative"> |
|
|
|
|
|
<div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-8 bg-gray-700 rounded-sm flex items-center justify-center"> |
|
|
<div class="w-14 h-6 bg-gray-900 rounded-sm"></div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-32 h-8 bg-gray-700 rounded-sm"></div> |
|
|
|
|
|
<div class="absolute top-1/3 left-1/4 transform -translate-y-1/2 w-6 h-10 bg-gray-700 rounded-sm"></div> |
|
|
<div class="absolute top-1/3 right-1/4 transform -translate-y-1/2 w-6 h-10 bg-gray-700 rounded-sm"></div> |
|
|
|
|
|
<div class="absolute top-0 left-0 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
<div class="absolute top-0 right-0 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
<div class="absolute bottom-0 left-0 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
<div class="absolute bottom-0 right-0 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
|
|
|
<div class="absolute top-1/2 left-0 w-2 h-16 bg-pink-500"></div> |
|
|
<div class="absolute top-1/2 right-0 w-2 h-16 bg-pink-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex flex-wrap gap-2"> |
|
|
<span class="px-2 py-1 bg-purple-900/50 text-purple-300 rounded-full text-xs flex items-center"> |
|
|
<span class="w-2 h-2 bg-purple-500 rounded-full mr-1"></span> Bass Traps |
|
|
</span> |
|
|
<span class="px-2 py-1 bg-pink-900/50 text-pink-300 rounded-full text-xs flex items-center"> |
|
|
<span class="w-2 h-2 bg-pink-500 rounded-full mr-1"></span> Acoustic Panels |
|
|
</span> |
|
|
<span class="px-2 py-1 bg-gray-700 text-gray-300 rounded-full text-xs flex items-center"> |
|
|
<span class="w-2 h-2 bg-gray-500 rounded-full mr-1"></span> Equipment |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-green-500 to-emerald-500 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Production Workflow</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 md:p-8 border border-gray-700"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-search text-green-400"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">1. Track Selection</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300 text-sm"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-bolt text-green-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>BPM detection and key matching</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-bolt text-green-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Energy level assessment</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-bolt text-green-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Transition point identification</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-emerald-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-cogs text-emerald-400"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">2. Mix Preparation</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300 text-sm"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-sliders-h text-emerald-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Beatgrid adjustment</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-sliders-h text-emerald-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Cue point setting</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-sliders-h text-emerald-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Effects chain setup</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-teal-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-record-vinyl text-teal-400"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">3. Recording</h3> |
|
|
</div> |
|
|
<ul class="space-y-2 text-gray-300 text-sm"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-level-up-alt text-teal-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Mix recording in high quality</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-level-up-alt text-teal-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Track leveling and mastering</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-level-up-alt text-teal-400 mt-1 mr-2 text-xs"></i> |
|
|
<span>Format conversion for distribution</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Workflow Visualization</h3> |
|
|
<div class="bg-gray-900 rounded-lg p-4 overflow-x-auto"> |
|
|
<div class="flex items-center justify-between min-w-max"> |
|
|
<div class="text-center px-4"> |
|
|
<div class="w-12 h-12 bg-green-900/50 rounded-full flex items-center justify-center mx-auto mb-2 border-2 border-green-500"> |
|
|
<i class="fas fa-search text-green-400"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">Track Selection</span> |
|
|
</div> |
|
|
<div class="w-16 h-1 bg-gradient-to-r from-green-500 to-emerald-500"></div> |
|
|
<div class="text-center px-4"> |
|
|
<div class="w-12 h-12 bg-emerald-900/50 rounded-full flex items-center justify-center mx-auto mb-2 border-2 border-emerald-500"> |
|
|
<i class="fas fa-cogs text-emerald-400"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">Mix Prep</span> |
|
|
</div> |
|
|
<div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-teal-500"></div> |
|
|
<div class="text-center px-4"> |
|
|
<div class="w-12 h-12 bg-teal-900/50 rounded-full flex items-center justify-center mx-auto mb-2 border-2 border-teal-500"> |
|
|
<i class="fas fa-record-vinyl text-teal-400"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">Recording</span> |
|
|
</div> |
|
|
<div class="w-16 h-1 bg-gradient-to-r from-teal-500 to-blue-500"></div> |
|
|
<div class="text-center px-4"> |
|
|
<div class="w-12 h-12 bg-blue-900/50 rounded-full flex items-center justify-center mx-auto mb-2 border-2 border-blue-500"> |
|
|
<i class="fas fa-share-alt text-blue-400"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-300">Distribution</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-yellow-500 to-amber-500 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Performance Tools</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead class="bg-gray-700/50"> |
|
|
<tr> |
|
|
<th class="px-6 py-4 text-left font-semibold text-gray-300">Tool Type</th> |
|
|
<th class="px-6 py-4 text-left font-semibold text-gray-300">Purpose</th> |
|
|
<th class="px-6 py-4 text-left font-semibold text-gray-300">Key Features</th> |
|
|
<th class="px-6 py-4 text-left font-semibold text-gray-300">Example</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-700/50"> |
|
|
<tr class="hover:bg-gray-700/30 transition-colors"> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-900/50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-tachometer-alt text-yellow-400"></i> |
|
|
</div> |
|
|
<span>BPM Counter</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 text-gray-300">Tempo matching</td> |
|
|
<td class="px-6 py-4 text-gray-300">Real-time analysis, tap tempo</td> |
|
|
<td class="px-6 py-4 text-yellow-300">Mixed In Key</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/30 transition-colors"> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-amber-900/50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-wave-square text-amber-400"></i> |
|
|
</div> |
|
|
<span>Effects Unit</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 text-gray-300">Sound processing</td> |
|
|
<td class="px-6 py-4 text-gray-300">Filters, delays, reverbs</td> |
|
|
<td class="px-6 py-4 text-amber-300">Pioneer RMX-1000</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/30 transition-colors"> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-orange-900/50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-th text-orange-400"></i> |
|
|
</div> |
|
|
<span>Sample Pad</td> |
|
|
<td class="px-6 py-4 text-gray-300">Live elements</td> |
|
|
<td class="px-6 py-4 text-gray-300">Custom triggers, loop control</td> |
|
|
<td class="px-6 py-4 text-orange-300">Ableton Push</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-700/30 transition-colors"> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-900/50 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-keyboard text-red-400"></i> |
|
|
</div> |
|
|
<span>MIDI Controller</td> |
|
|
<td class="px-6 py-4 text-gray-300">Parameter control</td> |
|
|
<td class="px-6 py-4 text-gray-300">Mappable controls, transport</td> |
|
|
<td class="px-6 py-4 text-red-300">Akai APC40</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-1 bg-gradient-to-r from-red-500 to-rose-500 mr-4"></div> |
|
|
<h2 class="text-3xl font-bold">Maintenance Schedule</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-semibold mb-4">Checklist</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<input type="checkbox" id="weekly" class="mt-1 mr-3 h-5 w-5 rounded border-gray-700 bg-gray-900 text-red-500 focus:ring-red-500"> |
|
|
<label for="weekly" class="text-gray-300"> |
|
|
<span class="font-medium">Weekly equipment cleaning</span> |
|
|
<p class="text-sm text-gray-400">Dust control and surface cleaning</p> |
|
|
</label> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<input type="checkbox" id="monthly" class="mt-1 mr-3 h-5 w-5 rounded border-gray-700 bg-gray-900 text-red-500 focus:ring-red-500"> |
|
|
<label for="monthly" class="text-gray-300"> |
|
|
<span class="font-medium">Monthly software updates</span> |
|
|
<p class="text-sm text-gray-400">Drivers, plugins and applications</p> |
|
|
</label> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<input type="checkbox" id="quarterly" class="mt-1 mr-3 h-5 w-5 rounded border-gray-700 bg-gray-900 text-red-500 focus:ring-red-500"> |
|
|
<label for="quarterly" class="text-gray-300"> |
|
|
<span class="font-medium">Quarterly cable inspection</span> |
|
|
<p class="text-sm text-gray-400">Check for wear and proper connections</p> |
|
|
</label> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<input type="checkbox" id="bi-annual" class="mt-1 mr-3 h-5 w-5 rounded border-gray-700 bg-gray-900 text-red-500 focus:ring-red-500"> |
|
|
<label for="bi-annual" class="text-gray-300"> |
|
|
<span class="font-medium">Bi-annual acoustic treatment check</span> |
|
|
<p class="text-sm text-gray-400">Inspect panels and bass traps</p> |
|
|
</label> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<input type="checkbox" id="annual" class="mt-1 mr-3 h-5 w-5 rounded border-gray-700 bg-gray-900 text-red-500 focus:ring-red-500"> |
|
|
<label for="annual" class="text-gray-300"> |
|
|
<span class="font-medium">Annual equipment calibration</span> |
|
|
<p class="text-sm text-gray-400">Monitor tuning and controller calibration</p> |
|
|
</label> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-semibold mb-4">Safety & Backup</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-red-900/50 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-database text-red-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">File Backup</h4> |
|
|
<p class="text-gray-300 text-sm">Regular backup of project files to external drives and cloud storage.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-rose-900/50 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-shield-alt text-rose-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Surge Protection</h4> |
|
|
<p class="text-gray-300 text-sm">Use high-quality surge protectors for all equipment.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-900/50 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-file-contract text-pink-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Insurance</h4> |
|
|
<p class="text-gray-300 text-sm">Maintain up-to-date equipment insurance documentation.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-medium mb-2">Backup Status</h4> |
|
|
<div class="bg-gray-900 rounded-full h-4 mb-2"> |
|
|
<div class="bg-gradient-to-r from-red-500 to-pink-500 h-4 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-400"> |
|
|
<span>Last backup: 2 days ago</span> |
|
|
<span>75% complete</span> |
|
|
</div> |
|
|
<button class="mt-4 px-4 py-2 bg-gradient-to-r from-red-600 to-pink-600 rounded-full text-sm font-medium hover:opacity-90 transition-all"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Run Backup Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900/50 py-8 border-t border-gray-800"> |
|
|
<div class="max-w-6xl mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h2 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600"> |
|
|
DJ Production Studio |
|
|
</h2> |
|
|
<p class="mt-2 text-gray-400 text-sm"> |
|
|
Professional equipment setup and workflow optimization |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"> |
|
|
<i class="fab fa-facebook text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-red-400 transition-colors"> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> |
|
|
<i class="fab fa-soundcloud text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
|
<p>© 2023 DJ Production Studio. All rights reserved.</p> |
|
|
<p class="mt-2">Designed for professional DJs and music producers.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const toggleMode = document.getElementById('toggleMode'); |
|
|
let darkMode = true; |
|
|
|
|
|
toggleMode.addEventListener('click', () => { |
|
|
darkMode = !darkMode; |
|
|
if (darkMode) { |
|
|
document.body.classList.add('bg-gray-900', 'text-gray-100'); |
|
|
document.body.classList.remove('bg-gray-100', 'text-gray-900'); |
|
|
toggleMode.innerHTML = '<i class="fas fa-lightbulb mr-2"></i> Studio Mode'; |
|
|
} else { |
|
|
document.body.classList.add('bg-gray-100', 'text-gray-900'); |
|
|
document.body.classList.remove('bg-gray-900', 'text-gray-100'); |
|
|
toggleMode.innerHTML = '<i class="fas fa-moon mr-2"></i> Dark Mode'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
document.querySelectorAll('.equipment-card').forEach(card => { |
|
|
observer.observe(card); |
|
|
}); |
|
|
</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=XXXMARK/djps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
