Dark Theme Music Player

.dark-player {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(145deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  border-radius: 20px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  overflow: hidden;
}

.dark-player::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.dark-player > * {
  position: relative;
  z-index: 2;
}

.player-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.album-art {
  position: relative;
}

.album-cover {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.3);
  position: relative;
  overflow: hidden;
}

.vinyl-record {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #333 40%, #1a1a1a 41%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 3s linear infinite paused;
}

.vinyl-center {
  width: 12px;
  height: 12px;
  background: #ff006e;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.6);
}

.play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}

.track-details h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
  background: linear-gradient(45deg, #00f5ff, #ff006e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.track-details p {
  font-size: 14px;
  color: #a0a0a0;
  margin: 0 0 8px 0;
}

.genre-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 245, 255, 0.2);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 12px;
  font-size: 11px;
  color: #00f5ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.waveform-container {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.waveform {
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 40px;
  gap: 3px;
}

.wave-bar {
  flex: 1;
  background: linear-gradient(to top, #ff006e, #00f5ff);
  border-radius: 2px;
  min-height: 4px;
  animation: wave 2s ease-in-out infinite;
  opacity: 0.7;
}

.wave-bar:nth-child(odd) {
  animation-delay: 0.1s;
}

.wave-bar:nth-child(even) {
  animation-delay: 0.2s;
}

.progress-section {
  margin-bottom: 24px;
}

.time-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: #a0a0a0;
  font-weight: 500;
}

.progress-container {
  position: relative;
}

.progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff006e, #00f5ff);
  border-radius: 3px;
  width: 48%;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}

.progress-thumb {
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.progress-track:hover .progress-thumb {
  opacity: 1;
}

.control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.secondary-controls,
.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
}

.control-btn.active {
  background: linear-gradient(45deg, #ff006e, #00f5ff);
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
}

.control-btn svg {
  width: 18px;
  height: 18px;
}

.play-btn {
  width: 60px;
  height: 60px;
  border: none;
  background: linear-gradient(45deg, #ff006e, #8338ec, #00f5ff);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4);
  position: relative;
  overflow: hidden;
}

.play-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.6);
}

.play-btn:hover::before {
  left: 100%;
}

.play-btn svg {
  width: 24px;
  height: 24px;
}

.volume-slider {
  width: 60px;
}

.volume-slider input[type="range"] {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #00f5ff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 245, 255, 0.6);
}

.playlist-dark {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist-dark h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.track-item.active {
  background: linear-gradient(90deg, rgba(255, 0, 110, 0.2), rgba(0, 245, 255, 0.2));
  border: 1px solid rgba(255, 0, 110, 0.3);
}

.track-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.track-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.track-artist {
  font-size: 12px;
  color: #a0a0a0;
}

.track-duration {
  font-size: 12px;
  color: #a0a0a0;
  font-weight: 500;
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

/* Playing state */
.dark-player.playing .vinyl-record {
  animation-play-state: running;
}

.dark-player.playing .play-indicator {
  display: flex;
}

.dark-player.playing .wave-bar {
  animation-play-state: running;
}

/* Responsive design */
@media (max-width: 480px) {
  .dark-player {
    margin: 16px;
    padding: 20px;
  }
  
  .player-header {
    gap: 16px;
  }
  
  .album-cover {
    width: 70px;
    height: 70px;
  }
  
  .vinyl-record {
    width: 50px;
    height: 50px;
  }
  
  .control-panel {
    flex-direction: column;
    gap: 16px;
  }
  
  .volume-control {
    order: -1;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // Elements
  const player = document.querySelector('.dark-player');
  const playBtn = document.getElementById('play-btn');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const shuffleBtn = document.getElementById('shuffle-btn');
  const repeatBtn = document.getElementById('repeat-btn');
  const volumeBtn = document.getElementById('volume-btn');
  const volumeRange = document.getElementById('volume-range');
  const audioElement = document.getElementById('audio-element');
  const trackTitle = document.getElementById('track-title');
  const trackArtist = document.getElementById('track-artist');
  const currentTimeEl = document.getElementById('current-time');
  const totalTimeEl = document.getElementById('total-time');
  const progressFill = document.getElementById('progress-fill');
  const progressTrack = document.getElementById('progress-track');
  const progressThumb = document.getElementById('progress-thumb');
  const playIcon = document.querySelector('.play-icon');
  const pauseIcon = document.querySelector('.pause-icon');
  const trackItems = document.querySelectorAll('.track-item');
  
  // State
  let currentTrackIndex = 0;
  let isPlaying = false;
  let isShuffled = false;
  let repeatMode = 0; // 0: no repeat, 1: repeat all, 2: repeat one
  let isDragging = false;
  let currentTime = 134; // 2:14 in seconds
  let duration = 272; // 4:32 in seconds
  
  // Initialize
  loadTrack(currentTrackIndex);
  updateProgress();
  
  function loadTrack(index) {
    const track = trackItems[index];
    const title = track.dataset.title;
    const artist = track.dataset.artist;
    const trackDuration = track.dataset.duration;
    
    trackTitle.textContent = title;
    trackArtist.textContent = artist;
    totalTimeEl.textContent = trackDuration;
    
    // Update active state
    trackItems.forEach(item => item.classList.remove('active'));
    track.classList.add('active');
    
    // Parse duration
    const [mins, secs] = trackDuration.split(':').map(Number);
    duration = mins * 60 + secs;
    currentTime = 0;
    
    updateProgress();
  }
  
  function togglePlay() {
    isPlaying = !isPlaying;
    
    if (isPlaying) {
      playIcon.style.display = 'none';
      pauseIcon.style.display = 'block';
      player.classList.add('playing');
      simulateProgress();
    } else {
      playIcon.style.display = 'block';
      pauseIcon.style.display = 'none';
      player.classList.remove('playing');
    }
  }
  
  function nextTrack() {
    if (isShuffled) {
      currentTrackIndex = Math.floor(Math.random() * trackItems.length);
    } else {
      currentTrackIndex = (currentTrackIndex + 1) % trackItems.length;
    }
    loadTrack(currentTrackIndex);
    if (isPlaying) {
      simulateProgress();
    }
  }
  
  function prevTrack() {
    if (currentTime > 3) {
      currentTime = 0;
      updateProgress();
      return;
    }
    
    currentTrackIndex = (currentTrackIndex - 1 + trackItems.length) % trackItems.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
      simulateProgress();
    }
  }
  
  function toggleShuffle() {
    isShuffled = !isShuffled;
    shuffleBtn.classList.toggle('active', isShuffled);
  }
  
  function toggleRepeat() {
    repeatMode = (repeatMode + 1) % 3;
    repeatBtn.classList.toggle('active', repeatMode > 0);
    
    // Update repeat button icon based on mode
    const svg = repeatBtn.querySelector('svg path');
    if (repeatMode === 2) {
      // Repeat one - could add a "1" indicator
      repeatBtn.style.color = '#ff006e';
    } else if (repeatMode === 1) {
      // Repeat all
      repeatBtn.style.color = '#00f5ff';
    } else {
      // No repeat
      repeatBtn.style.color = '';
    }
  }
  
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }
  
  function updateProgress() {
    const progress = (currentTime / duration) * 100;
    progressFill.style.width = `${progress}%`;
    progressThumb.style.left = `${progress}%`;
    currentTimeEl.textContent = formatTime(currentTime);
  }
  
  function simulateProgress() {
    if (!isPlaying) return;
    
    const interval = setInterval(() => {
      if (!isPlaying) {
        clearInterval(interval);
        return;
      }
      
      currentTime += 1;
      
      if (!isDragging) {
        updateProgress();
      }
      
      if (currentTime >= duration) {
        clearInterval(interval);
        
        if (repeatMode === 2) {
          // Repeat current track
          currentTime = 0;
          simulateProgress();
        } else if (repeatMode === 1 || currentTrackIndex < trackItems.length - 1) {
          // Repeat all or not last track
          nextTrack();
        } else {
          // End of playlist
          isPlaying = false;
          playIcon.style.display = 'block';
          pauseIcon.style.display = 'none';
          player.classList.remove('playing');
        }
      }
    }, 1000);
  }
  
  function setProgress(e) {
    const rect = progressTrack.getBoundingClientRect();
    const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    
    currentTime = percent * duration;
    updateProgress();
  }
  
  function updateVolume() {
    const volume = volumeRange.value;
    // Visual feedback for volume
    volumeRange.style.background = `linear-gradient(to right, #00f5ff 0%, #00f5ff ${volume}%, rgba(255,255,255,0.2) ${volume}%, rgba(255,255,255,0.2) 100%)`;
  }
  
  // Event listeners
  playBtn.addEventListener('click', togglePlay);
  nextBtn.addEventListener('click', nextTrack);
  prevBtn.addEventListener('click', prevTrack);
  shuffleBtn.addEventListener('click', toggleShuffle);
  repeatBtn.addEventListener('click', toggleRepeat);
  
  // Progress bar interaction
  progressTrack.addEventListener('click', setProgress);
  progressTrack.addEventListener('mousedown', (e) => {
    isDragging = true;
    setProgress(e);
  });
  
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      setProgress(e);
    }
  });
  
  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
  
  // Volume control
  volumeRange.addEventListener('input', updateVolume);
  volumeBtn.addEventListener('click', () => {
    const isMuted = volumeRange.value === '0';
    volumeRange.value = isMuted ? '75' : '0';
    updateVolume();
  });
  
  // Playlist interaction
  trackItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      currentTrackIndex = index;
      loadTrack(currentTrackIndex);
      if (!isPlaying) {
        togglePlay();
      }
    });
  });
  
  // Keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT') return;
    
    switch(e.code) {
      case 'Space':
        e.preventDefault();
        togglePlay();
        break;
      case 'ArrowRight':
        if (e.shiftKey) {
          currentTime = Math.min(currentTime + 10, duration);
          updateProgress();
        } else {
          nextTrack();
        }
        break;
      case 'ArrowLeft':
        if (e.shiftKey) {
          currentTime = Math.max(currentTime - 10, 0);
          updateProgress();
        } else {
          prevTrack();
        }
        break;
      case 'KeyS':
        toggleShuffle();
        break;
      case 'KeyR':
        toggleRepeat();
        break;
    }
  });
  
  // Initialize volume slider
  updateVolume();
});