Max/Main
1
0
Fork 0
forked from Simnation/Main
Code Pull requests Activity
Main/resources/[tools]/nordi_dj/html/index.html
Nordi98 b0f9fbee65 ed
2025-08-03 19:32:07 +02:00

402 lines
18 KiB
HTML
Raw Permalink Blame History

<!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>
View git blame Copy permalink