Minimal Music Player

.minimal-player {
  max-width: 380px;
  margin: 0 auto;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #2d3748;
}

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

.track-info h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1a202c;
  line-height: 1.2;
}

.track-info p {
  font-size: 16px;
  margin: 0;
  color: #718096;
  font-weight: 400;
}

.progress-container {
  margin-bottom: 32px;
}

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

.progress-track {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.progress-bar {
  height: 100%;
  background: #4a5568;
  width: 33%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.btn-control {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #718096;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-control:hover {
  background: #f7fafc;
  color: #4a5568;
  transform: scale(1.05);
}

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

.btn-play {
  width: 64px;
  height: 64px;
  border: none;
  background: #4a5568;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(74, 85, 104, 0.3);
}

.btn-play:hover {
  background: #2d3748;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(74, 85, 104, 0.4);
}

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

.playlist-minimal {
  border-top: 1px solid #e2e8f0;
  padding-top: 24px;
}

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

.track-item:hover {
  background: #f7fafc;
}

.track-item.active {
  background: #edf2f7;
  color: #4a5568;
}

.track-item.active .track-name {
  font-weight: 600;
}

.track-name {
  font-size: 15px;
  font-weight: 500;
  color: #2d3748;
}

.track-time {
  font-size: 14px;
  color: #a0aec0;
  font-weight: 500;
}

/* Focus states for accessibility */
.btn-control:focus,
.btn-play:focus {
  outline: 2px solid #4a5568;
  outline-offset: 2px;
}

.progress-track:focus {
  outline: 2px solid #4a5568;
  outline-offset: 2px;
}

/* Responsive design */
@media (max-width: 480px) {
  .minimal-player {
    margin: 16px;
    padding: 32px 24px;
  }
  
  .track-info h2 {
    font-size: 20px;
  }
  
  .controls {
    gap: 20px;
  }
  
  .btn-control {
    width: 40px;
    height: 40px;
  }
  
  .btn-play {
    width: 56px;
    height: 56px;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // Elements
  const playBtn = document.getElementById('play-btn');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  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 progressBar = document.getElementById('progress-bar');
  const progressTrack = document.querySelector('.progress-track');
  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 isDragging = false;
  
  // Initialize
  loadTrack(currentTrackIndex);
  
  function loadTrack(index) {
    const track = trackItems[index];
    const title = track.dataset.title;
    const artist = track.dataset.artist;
    const duration = track.dataset.duration;
    
    trackTitle.textContent = title;
    trackArtist.textContent = artist;
    totalTimeEl.textContent = duration;
    currentTimeEl.textContent = '0:00';
    
    // Update active state
    trackItems.forEach(item => item.classList.remove('active'));
    track.classList.add('active');
    
    // Reset progress
    progressBar.style.width = '0%';
  }
  
  function togglePlay() {
    if (audioElement.paused) {
      // Simulate play (no actual audio file)
      isPlaying = true;
      playIcon.style.display = 'none';
      pauseIcon.style.display = 'block';
      simulateProgress();
    } else {
      isPlaying = false;
      playIcon.style.display = 'block';
      pauseIcon.style.display = 'none';
    }
  }
  
  function nextTrack() {
    currentTrackIndex = (currentTrackIndex + 1) % trackItems.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
      simulateProgress();
    }
  }
  
  function prevTrack() {
    currentTrackIndex = (currentTrackIndex - 1 + trackItems.length) % trackItems.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 simulateProgress() {
    if (!isPlaying) return;
    
    let currentTime = 0;
    const totalTime = 255; // 4:15 in seconds
    
    const interval = setInterval(() => {
      if (!isPlaying) {
        clearInterval(interval);
        return;
      }
      
      currentTime += 1;
      const progress = (currentTime / totalTime) * 100;
      
      if (!isDragging) {
        progressBar.style.width = `${progress}%`;
        currentTimeEl.textContent = formatTime(currentTime);
      }
      
      if (currentTime >= totalTime) {
        clearInterval(interval);
        nextTrack();
      }
    }, 1000);
  }
  
  function setProgress(e) {
    const rect = progressTrack.getBoundingClientRect();
    const percent = (e.clientX - rect.left) / rect.width;
    const clampedPercent = Math.max(0, Math.min(1, percent));
    
    progressBar.style.width = `${clampedPercent * 100}%`;
    
    // Update time display
    const totalTime = 255; // 4:15 in seconds
    const newTime = clampedPercent * totalTime;
    currentTimeEl.textContent = formatTime(newTime);
  }
  
  // Event listeners
  playBtn.addEventListener('click', togglePlay);
  nextBtn.addEventListener('click', nextTrack);
  prevBtn.addEventListener('click', prevTrack);
  
  // Progress bar interaction
  progressTrack.addEventListener('click', setProgress);
  progressTrack.addEventListener('mousedown', () => {
    isDragging = true;
  });
  
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      setProgress(e);
    }
  });
  
  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
  
  // 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':
        nextTrack();
        break;
      case 'ArrowLeft':
        prevTrack();
        break;
    }
  });
});