Card-Style Music Player

.card-music-player {
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.card-music-player::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.player-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(45deg, #ffffff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.player-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.total-songs, .total-duration {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.now-playing-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.album-art-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
}

.album-art {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.album-art:hover {
  transform: scale(1.05);
}

.album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-art:hover .play-overlay {
  opacity: 1;
}

.main-play-btn {
  width: 50px;
  height: 50px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.main-play-btn:hover {
  transform: scale(1.1);
  background: #ffffff;
}

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

.vinyl-effect {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  animation: rotate 20s linear infinite;
  opacity: 0;
}

.card-music-player.playing .vinyl-effect {
  opacity: 1;
}

.track-info {
  text-align: center;
  margin-bottom: 20px;
}

.track-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #ffffff;
}

.track-artist {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px 0;
}

.track-details {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

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

.time-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.progress-bar-container {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
  border-radius: 3px;
  width: 60%;
  transition: width 0.3s ease;
}

.progress-handle {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.progress-bar-container:hover .progress-handle {
  opacity: 1;
}

.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.control-btn {
  width: 44px;
  height: 44px;
  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);
}

.control-btn.active {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.play-pause-btn {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.play-pause-btn:hover {
  background: #ffffff;
  transform: scale(1.05);
}

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

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

.volume-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.volume-slider {
  width: 80px;
  position: relative;
}

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

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.volume-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transform: translateY(-50%);
  width: 75%;
  z-index: 1;
}

.playlist-section {
  position: relative;
  z-index: 2;
}

.playlist-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: rgba(255, 255, 255, 0.9);
}

.music-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.music-cards-container::-webkit-scrollbar {
  width: 4px;
}

.music-cards-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.music-cards-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.music-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.music-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.music-card.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.card-album-art {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.card-album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-play-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #ffffff;
}

.card-album-art:hover .card-play-btn {
  opacity: 1;
}

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

.card-info {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-artist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-duration {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.card-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-card:hover .card-actions {
  opacity: 1;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.1);
}

.action-btn.liked {
  color: #ff6b6b;
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

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

/* Responsive design */
@media (max-width: 480px) {
  .card-music-player {
    margin: 16px;
    padding: 20px;
  }
  
  .player-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .player-stats {
    align-items: flex-start;
  }
  
  .album-art-container {
    width: 100px;
    height: 100px;
  }
  
  .player-controls {
    gap: 12px;
  }
  
  .control-btn {
    width: 40px;
    height: 40px;
  }
  
  .play-pause-btn {
    width: 52px;
    height: 52px;
  }
  
  .volume-section {
    justify-content: center;
    margin-top: 12px;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // Elements
  const player = document.querySelector('.card-music-player');
  const mainPlayBtn = document.getElementById('main-play-btn');
  const playPauseBtn = document.getElementById('play-pause-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 volumeSlider = document.getElementById('volume-slider');
  const progressBar = document.getElementById('progress-bar');
  const progressFill = document.getElementById('progress-fill');
  const progressHandle = document.getElementById('progress-handle');
  const currentTimeEl = document.getElementById('current-time');
  const totalTimeEl = document.getElementById('total-time');
  const currentTrackTitle = document.getElementById('current-track-title');
  const currentTrackArtist = document.getElementById('current-track-artist');
  const musicCards = document.querySelectorAll('.music-card');
  const cardPlayBtns = document.querySelectorAll('.card-play-btn');
  const actionBtns = document.querySelectorAll('.action-btn');
  
  // State
  let currentTrackIndex = 0;
  let isPlaying = false;
  let isShuffled = false;
  let repeatMode = 0; // 0: no repeat, 1: repeat all, 2: repeat one
  let currentTime = 154; // 2:34
  let duration = 252; // 4:12
  let volume = 75;
  
  // Track data
  const tracks = [
    { title: 'Midnight Dreams', artist: 'Luna & The Stars', album: 'Cosmic Vibes', duration: '4:12' },
    { title: 'Stellar Waves', artist: 'Cosmic Collective', album: 'Deep Space', duration: '3:45' },
    { title: 'Neon Nights', artist: 'Synthwave Society', album: 'Retro Future', duration: '5:28' },
    { title: 'Ocean Breeze', artist: 'Ambient Collective', album: 'Nature Sounds', duration: '6:15' }
  ];
  
  // Initialize
  loadTrack(currentTrackIndex);
  updateProgress();
  updateVolumeDisplay();
  
  function loadTrack(index) {
    const track = tracks[index];
    currentTrackTitle.textContent = track.title;
    currentTrackArtist.textContent = track.artist;
    totalTimeEl.textContent = track.duration;
    
    // Parse duration
    const [mins, secs] = track.duration.split(':').map(Number);
    duration = mins * 60 + secs;
    currentTime = 0;
    
    // Update active card
    musicCards.forEach((card, i) => {
      card.classList.toggle('active', i === index);
    });
    
    updateProgress();
  }
  
  function togglePlay() {
    isPlaying = !isPlaying;
    
    // Update main play button
    const mainPlayIcon = mainPlayBtn.querySelector('.play-icon');
    const mainPauseIcon = mainPlayBtn.querySelector('.pause-icon');
    
    // Update control play button
    const controlPlayIcon = playPauseBtn.querySelector('.play-icon');
    const controlPauseIcon = playPauseBtn.querySelector('.pause-icon');
    
    if (isPlaying) {
      mainPlayIcon.style.display = 'none';
      mainPauseIcon.style.display = 'block';
      controlPlayIcon.style.display = 'none';
      controlPauseIcon.style.display = 'block';
      player.classList.add('playing');
      simulateProgress();
    } else {
      mainPlayIcon.style.display = 'block';
      mainPauseIcon.style.display = 'none';
      controlPlayIcon.style.display = 'block';
      controlPauseIcon.style.display = 'none';
      player.classList.remove('playing');
    }
  }
  
  function nextTrack() {
    if (isShuffled) {
      currentTrackIndex = Math.floor(Math.random() * tracks.length);
    } else {
      currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
    }
    loadTrack(currentTrackIndex);
    if (isPlaying) {
      simulateProgress();
    }
  }
  
  function prevTrack() {
    if (currentTime > 3) {
      currentTime = 0;
      updateProgress();
      return;
    }
    
    currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
      simulateProgress();
    }
  }
  
  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}%`;
    progressHandle.style.left = `${progress}%`;
    currentTimeEl.textContent = formatTime(currentTime);
  }
  
  function updateVolumeDisplay() {
    document.querySelector('.volume-fill').style.width = `${volume}%`;
    volumeSlider.value = volume;
  }
  
  function simulateProgress() {
    if (!isPlaying) return;
    
    const interval = setInterval(() => {
      if (!isPlaying) {
        clearInterval(interval);
        return;
      }
      
      currentTime += 1;
      updateProgress();
      
      if (currentTime >= duration) {
        clearInterval(interval);
        
        if (repeatMode === 2) {
          currentTime = 0;
          simulateProgress();
        } else if (repeatMode === 1 || currentTrackIndex < tracks.length - 1) {
          nextTrack();
        } else {
          isPlaying = false;
          const mainPlayIcon = mainPlayBtn.querySelector('.play-icon');
          const mainPauseIcon = mainPlayBtn.querySelector('.pause-icon');
          const controlPlayIcon = playPauseBtn.querySelector('.play-icon');
          const controlPauseIcon = playPauseBtn.querySelector('.pause-icon');
          
          mainPlayIcon.style.display = 'block';
          mainPauseIcon.style.display = 'none';
          controlPlayIcon.style.display = 'block';
          controlPauseIcon.style.display = 'none';
          player.classList.remove('playing');
        }
      }
    }, 1000);
  }
  
  // Event listeners
  mainPlayBtn.addEventListener('click', togglePlay);
  playPauseBtn.addEventListener('click', togglePlay);
  nextBtn.addEventListener('click', nextTrack);
  prevBtn.addEventListener('click', prevTrack);
  
  shuffleBtn.addEventListener('click', () => {
    isShuffled = !isShuffled;
    shuffleBtn.classList.toggle('active', isShuffled);
  });
  
  repeatBtn.addEventListener('click', () => {
    repeatMode = (repeatMode + 1) % 3;
    repeatBtn.classList.toggle('active', repeatMode > 0);
  });
  
  // Volume control
  volumeSlider.addEventListener('input', () => {
    volume = parseInt(volumeSlider.value);
    updateVolumeDisplay();
  });
  
  // Progress bar interaction
  progressBar.addEventListener('click', (e) => {
    const rect = progressBar.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const progress = clickX / rect.width;
    currentTime = Math.floor(progress * duration);
    updateProgress();
  });
  
  // Music card interactions
  musicCards.forEach((card, index) => {
    card.addEventListener('click', (e) => {
      if (e.target.closest('.action-btn')) return;
      
      currentTrackIndex = index;
      loadTrack(currentTrackIndex);
      if (!isPlaying) {
        togglePlay();
      }
    });
  });
  
  // Card play button interactions
  cardPlayBtns.forEach((btn, index) => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      currentTrackIndex = index;
      loadTrack(currentTrackIndex);
      if (!isPlaying) {
        togglePlay();
      }
    });
  });
  
  // Action button interactions
  actionBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      
      if (btn.getAttribute('aria-label') === 'Like' || btn.getAttribute('aria-label') === 'Unlike') {
        btn.classList.toggle('liked');
        btn.setAttribute('aria-label', btn.classList.contains('liked') ? 'Unlike' : 'Like');
      }
    });
  });
  
  // Keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT') return;
    
    switch(e.code) {
      case 'Space':
        e.preventDefault();
        togglePlay();
        break;
      case 'ArrowRight':
        nextTrack();
        break;
      case 'ArrowLeft':
        prevTrack();
        break;
      case 'ArrowUp':
        e.preventDefault();
        volume = Math.min(100, volume + 5);
        updateVolumeDisplay();
        break;
      case 'ArrowDown':
        e.preventDefault();
        volume = Math.max(0, volume - 5);
        updateVolumeDisplay();
        break;
    }
  });
});