402 lines
18 KiB
HTML
402 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DJ System - Professional Interface</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- DJ Interface Container -->
|
|
<div id="dj-interface" class="hidden">
|
|
<!-- Header -->
|
|
<div class="dj-header">
|
|
<div class="logo">
|
|
<i class="fas fa-music"></i>
|
|
<span>DJ SYSTEM</span>
|
|
</div>
|
|
<div class="status-bar">
|
|
<div class="status-item">
|
|
<i class="fas fa-signal"></i>
|
|
<span id="connection-status">CONNECTED</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<i class="fas fa-clock"></i>
|
|
<span id="current-time">00:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="close-btn" onclick="closeDJInterface()">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main DJ Console -->
|
|
<div class="dj-console">
|
|
<!-- Left Deck -->
|
|
<div class="deck deck-left">
|
|
<div class="deck-header">
|
|
<h3>DECK A</h3>
|
|
<div class="deck-controls">
|
|
<button class="btn-deck" onclick="loadTrackToDeck('A')">
|
|
<i class="fas fa-folder-open"></i>
|
|
</button>
|
|
<button class="btn-deck" onclick="ejectDeck('A')">
|
|
<i class="fas fa-eject"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vinyl Plattenspieler -->
|
|
<div class="turntable">
|
|
<div class="vinyl-container">
|
|
<div class="vinyl" id="vinyl-a">
|
|
<div class="vinyl-center">
|
|
<div class="vinyl-hole"></div>
|
|
<div class="vinyl-label">
|
|
<span id="track-name-a">NO TRACK</span>
|
|
</div>
|
|
</div>
|
|
<div class="vinyl-grooves">
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tonearm">
|
|
<div class="tonearm-base"></div>
|
|
<div class="tonearm-arm"></div>
|
|
<div class="tonearm-needle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plattenspieler Controls -->
|
|
<div class="turntable-controls">
|
|
<button class="play-btn" id="play-a" onclick="togglePlay('A')">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
<button class="cue-btn" onclick="cue('A')">CUE</button>
|
|
<div class="pitch-slider">
|
|
<label>PITCH</label>
|
|
<input type="range" id="pitch-a" min="-20" max="20" value="0" oninput="adjustPitch('A', this.value)">
|
|
<span id="pitch-value-a">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waveform Display -->
|
|
<div class="waveform-container">
|
|
<canvas id="waveform-a" width="300" height="80"></canvas>
|
|
<div class="playhead" id="playhead-a"></div>
|
|
</div>
|
|
|
|
<!-- Track Info -->
|
|
<div class="track-info">
|
|
<div class="track-title" id="title-a">No Track Loaded</div>
|
|
<div class="track-artist" id="artist-a">-</div>
|
|
<div class="track-time">
|
|
<span id="time-elapsed-a">00:00</span> /
|
|
<span id="time-total-a">00:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Mixer -->
|
|
<div class="mixer">
|
|
<div class="mixer-header">
|
|
<h3>MIXER</h3>
|
|
</div>
|
|
|
|
<!-- Crossfader Section -->
|
|
<div class="crossfader-section">
|
|
<div class="crossfader-container">
|
|
<label>A</label>
|
|
<input type="range" id="crossfader" min="0" max="100" value="50" oninput="adjustCrossfader(this.value)">
|
|
<label>B</label>
|
|
</div>
|
|
<div class="crossfader-curve">
|
|
<button class="curve-btn active" onclick="setCrossfaderCurve('smooth')">~</button>
|
|
<button class="curve-btn" onclick="setCrossfaderCurve('cut')">|</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="playlist-browser">
|
|
<div class="browser-header">
|
|
<h4>PLAYLISTS</h4>
|
|
<button id="create-playlist-btn" class="create-playlist-btn">
|
|
<i class="fas fa-plus"></i> Neue Playlist
|
|
</button>
|
|
</div>
|
|
<div id="playlist-container" class="playlist-container">
|
|
<!-- Playlists werden hier dynamisch eingefügt -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Channel Controls -->
|
|
<div class="channel-controls">
|
|
<!-- Channel A -->
|
|
<div class="channel channel-a">
|
|
<div class="channel-header">CH A</div>
|
|
|
|
<!-- EQ -->
|
|
<div class="eq-section">
|
|
<div class="eq-knob">
|
|
<label>HIGH</label>
|
|
<div class="knob" data-channel="A" data-eq="high">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
<div class="eq-knob">
|
|
<label>MID</label>
|
|
<div class="knob" data-channel="A" data-eq="mid">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
<div class="eq-knob">
|
|
<label>LOW</label>
|
|
<div class="knob" data-channel="A" data-eq="low">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volume Fader -->
|
|
<div class="volume-fader">
|
|
<input type="range" id="volume-a" min="0" max="100" value="75" orient="vertical" oninput="adjustVolume('A', this.value)">
|
|
<label>VOLUME</label>
|
|
</div>
|
|
|
|
<!-- VU Meter -->
|
|
<div class="vu-meter">
|
|
<div class="vu-bar" id="vu-a"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Master Section -->
|
|
<div class="master-section">
|
|
<div class="master-header">MASTER</div>
|
|
|
|
<!-- Master Volume -->
|
|
<div class="master-volume">
|
|
<input type="range" id="master-volume" min="0" max="100" value="80" orient="vertical" oninput="adjustMasterVolume(this.value)">
|
|
<label>MASTER</label>
|
|
</div>
|
|
|
|
<!-- Master VU -->
|
|
<div class="master-vu">
|
|
<div class="vu-bar" id="master-vu"></div>
|
|
</div>
|
|
|
|
<!-- BPM Display -->
|
|
<div class="bpm-display">
|
|
<div class="bpm-value" id="bpm-display">120</div>
|
|
<label>BPM</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Channel B -->
|
|
<div class="channel channel-b">
|
|
<div class="channel-header">CH B</div>
|
|
|
|
<!-- EQ -->
|
|
<div class="eq-section">
|
|
<div class="eq-knob">
|
|
<label>HIGH</label>
|
|
<div class="knob" data-channel="B" data-eq="high">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
<div class="eq-knob">
|
|
<label>MID</label>
|
|
<div class="knob" data-channel="B" data-eq="mid">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
<div class="eq-knob">
|
|
<label>LOW</label>
|
|
<div class="knob" data-channel="B" data-eq="low">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
<span class="eq-value">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volume Fader -->
|
|
<div class="volume-fader">
|
|
<input type="range" id="volume-b" min="0" max="100" value="75" orient="vertical" oninput="adjustVolume('B', this.value)">
|
|
<label>VOLUME</label>
|
|
</div>
|
|
|
|
<!-- VU Meter -->
|
|
<div class="vu-meter">
|
|
<div class="vu-bar" id="vu-b"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Effects Section -->
|
|
<div class="effects-section">
|
|
<div class="effect-unit">
|
|
<h4>EFFECTS</h4>
|
|
<div class="effect-buttons">
|
|
<button class="effect-btn" onclick="toggleEffect('reverb')">REVERB</button>
|
|
<button class="effect-btn" onclick="toggleEffect('delay')">DELAY</button>
|
|
<button class="effect-btn" onclick="toggleEffect('filter')">FILTER</button>
|
|
<button class="effect-btn" onclick="toggleEffect('flanger')">FLANGER</button>
|
|
</div>
|
|
<div class="effect-knob">
|
|
<label>WET/DRY</label>
|
|
<div class="knob" data-effect="wetdry">
|
|
<div class="knob-indicator"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Deck -->
|
|
<div class="deck deck-right">
|
|
<div class="deck-header">
|
|
<h3>DECK B</h3>
|
|
<div class="deck-controls">
|
|
<button class="btn-deck" onclick="loadTrackToDeck('B')">
|
|
<i class="fas fa-folder-open"></i>
|
|
</button>
|
|
<button class="btn-deck" onclick="ejectDeck('B')">
|
|
<i class="fas fa-eject"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vinyl Plattenspieler -->
|
|
<div class="turntable">
|
|
<div class="vinyl-container">
|
|
<div class="vinyl" id="vinyl-b">
|
|
<div class="vinyl-center">
|
|
<div class="vinyl-hole"></div>
|
|
<div class="vinyl-label">
|
|
<span id="track-name-b">NO TRACK</span>
|
|
</div>
|
|
</div>
|
|
<div class="vinyl-grooves">
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
<div class="groove"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tonearm">
|
|
<div class="tonearm-base"></div>
|
|
<div class="tonearm-arm"></div>
|
|
<div class="tonearm-needle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plattenspieler Controls -->
|
|
<div class="turntable-controls">
|
|
<button class="play-btn" id="play-b" onclick="togglePlay('B')">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
<button class="cue-btn" onclick="cue('B')">CUE</button>
|
|
<div class="pitch-slider">
|
|
<label>PITCH</label>
|
|
<input type="range" id="pitch-b" min="-20" max="20" value="0" oninput="adjustPitch('B', this.value)">
|
|
<span id="pitch-value-b">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waveform Display -->
|
|
<div class="waveform-container">
|
|
<canvas id="waveform-b" width="300" height="80"></canvas>
|
|
<div class="playhead" id="playhead-b"></div>
|
|
</div>
|
|
|
|
<!-- Track Info -->
|
|
<div class="track-info">
|
|
<div class="track-title" id="title-b">No Track Loaded</div>
|
|
<div class="track-artist" id="artist-b">-</div>
|
|
<div class="track-time">
|
|
<span id="time-elapsed-b">00:00</span> /
|
|
<span id="time-total-b">00:00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Panel -->
|
|
<div class="bottom-panel">
|
|
<!-- Playlist Browser -->
|
|
<div class="playlist-browser">
|
|
<div class="browser-header">
|
|
<h4>MUSIC LIBRARY</h4>
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="search-input" placeholder="Search tracks..." oninput="searchTracks(this.value)">
|
|
</div>
|
|
</div>
|
|
<div class="track-list" id="track-list">
|
|
<!-- Tracks werden hier dynamisch geladen -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recording Section -->
|
|
<div class="recording-section">
|
|
<h4>RECORDING</h4>
|
|
<button class="record-btn" onclick="toggleRecording()">
|
|
<i class="fas fa-circle"></i>
|
|
<span>REC</span>
|
|
</button>
|
|
<div class="recording-time">00:00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Track Loader Modal -->
|
|
<div id="track-loader" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Load Track</h3>
|
|
<button class="close-modal" onclick="closeTrackLoader()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="input-group">
|
|
<label>Track Title</label>
|
|
<input type="text" id="track-title" placeholder="Enter track title">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Artist</label>
|
|
<input type="text" id="track-artist" placeholder="Enter artist name">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>URL (YouTube or Direct)</label>
|
|
<input type="text" id="track-url" placeholder="https://www.youtube.com/watch?v=...">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn-cancel" onclick="closeTrackLoader()">Cancel</button>
|
|
<button class="btn-load" onclick="confirmLoadTrack()">Load Track</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Players (versteckt) -->
|
|
<audio id="audio-player-a" style="display: none;"></audio>
|
|
<audio id="audio-player-b" style="display: none;"></audio>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|