<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Playlist Bernadya</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    /* Global Styles */
body {
  background: linear-gradient(to bottom, #1a1a1a, #121212); /* Dark Gradient */
  color: #fff;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */
header {
  width: 100%;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c2c2c;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

header p {
  color: #ccc;
  font-size: 14px;
}

header button {
  color: #fff;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

header button:hover {
  color: #1db954;
}

/* Cover Art */
.cover-art {
  width: 280px;
  height: 280px;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

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

/* Song Info */
.song-info {
  text-align: center;
  margin-top: 15px;
}

.song-info h2 {
  font-size: 2rem;
  font-weight: bold;
}

.song-info p {
  color: #ccc;
  font-size: 1.2rem;
  margin-top: 5px;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #404040;
  border-radius: 10px;
  outline: none;
  margin-top: 15px;
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background-color: #1db954;
  border-radius: 50%;
  cursor: pointer;
}

.progress-bar::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background-color: #1db954;
  border-radius: 50%;
}

#currentTime,
#totalDuration {
  color: #ccc;
  font-size: 14px;
}

/* Control Buttons */
.control-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.control-button:hover {
  color: #1db954;
}

/* Playlist */
.song-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.song-item img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  margin-right: 15px;
}

.song-item .details {
  display: flex;
  flex-direction: column;
}

.song-item .details h4 {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

.song-item .details p {
  font-size: 0.9rem;
  color: #bbb;
}

.song-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
}

/* Footer */
footer {
  margin-top: 30px;
  text-align: center;
}

#deviceInfo {
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
}

/* Dark Theme Switch */
#themeSwitch {
  position: fixed;
  top: 15px;
  right: 15px;
  background-color: #2c2c2c;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

#themeSwitch:hover {
  background-color: #1db954;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
  .cover-art {
    width: 250px;
    height: 250px;
  }

  .song-info h2 {
    font-size: 1.8rem;
  }

  .song-info p {
    font-size: 1rem;
  }

  .song-item img {
    width: 50px;
    height: 50px;
  }
}
  </style>
</head>
<body>
  <div class="flex flex-col items-center min-h-screen">
    <!-- Header -->
    <header class="w-full flex justify-between items-center px-6 py-4">
      <a href="/docs" class="text-white text-xl">
        <i class="fas fa-chevron-left"></i>
      </a>
      <p class="text-sm text-gray-400">~ Playlist bernadya</p>
      <button class="text-white text-xl"><i class="fas fa-ellipsis-h"></i></button>
    </header>

    <!-- Cover Art -->
    <div class="mt-6">
      <img id="coverArt" src="https://files.catbox.moe/pl63td.jpg" alt="Album Art" class="cover-art w-72 h-72 rounded-lg">
    </div>

    <!-- Song Info -->
    <div class="mt-6 text-center">
      <h2 id="songTitle" class="text-2xl font-bold">Hai! happy playing.</h2>
      <p id="artistName" class="text-gray-400 text-lg">~ Bernadya</p>
    </div>

    <!-- Progress Bar -->
    <div class="w-11/12 mt-6">
      <input id="progressBar" type="range" min="0" max="100" value="0" class="progress-bar">
      <div class="flex justify-between text-sm text-gray-400 mt-2">
        <span id="currentTime">0:00</span>
        <span id="totalDuration">0:00</span>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex items-center mt-6 space-x-6">
      <button id="shuffleBtn" class="control-button"><i class="fas fa-random"></i></button> <!-- Shuffle -->
      <button id="prevBtn" class="control-button"><i class="fas fa-step-backward"></i></button> <!-- Previous -->
      <button id="playPauseBtn" class="control-button text-3xl"><i class="fas fa-play"></i></button> <!-- Play/Pause -->
      <button id="nextBtn" class="control-button"><i class="fas fa-step-forward"></i></button> <!-- Next -->
      <button id="repeatBtn" class="control-button"><i class="fas fa-redo"></i></button> <!-- Repeat -->
    </div>

<!-- Playlist Section -->
<div class="w-11/12 mt-8">
  <h3 class="text-lg font-bold text-gray-200 mb-4">Daftar Lagu</h3>

  <!-- Song Item 1 -->
  <div class="song-item flex items-center mb-4" data-title="Untungnya, Hidup harus tetap berjalan" data-artist="Bernadya" data-cover="https://files.catbox.moe/pl63td.jpg" data-url="https://files.catbox.moe/mfuvd4.mp3">
    <img src="https://files.catbox.moe/pl63td.jpg" alt="Cover Art" class="w-16 h-16 rounded-lg mr-4">
    <div class="details">
      <h4 class="font-semibold text-white">Bernadya</h4>
      <p class="text-gray-400">Untungnya, Hidup harus tetap berjalan</p>
    </div>
  </div>

  <!-- Song Item 2 -->
  <div class="song-item flex items-center mb-4" data-title="Belum ada satu bulan" data-artist="Bernadya" data-cover="https://files.catbox.moe/pl63td.jpg" data-url="https://files.catbox.moe/fn169y.mp3">
    <img src="https://files.catbox.moe/pl63td.jpg" alt="Cover Art" class="w-16 h-16 rounded-lg mr-4">
    <div class="details">
      <h4 class="font-semibold text-white">Bernadya</h4>
      <p class="text-gray-400">satu bulan</p>
    </div>
  </div>

</div>
    <!-- Share Button -->
    <a href="#" id="shareBtn" class="share-btn">
      <i class="fab fa-whatsapp"></i> Share on WhatsApp
    </a>

    <!-- Device Info -->
    <div id="deviceInfo" class="text-sm text-gray-400 mt-4">Perangkat Audio: Tidak Tersedia</div>
  </div>

  <script>
    const playPauseBtn = document.getElementById('playPauseBtn');
    const progressBar = document.getElementById('progressBar');
    const currentTime = document.getElementById('currentTime');
    const totalDuration = document.getElementById('totalDuration');
    const coverArt = document.getElementById('coverArt');
    const songTitle = document.getElementById('songTitle');
    const artistName = document.getElementById('artistName');
    const shareBtn = document.getElementById('shareBtn');
    const deviceInfo = document.getElementById('deviceInfo');

    let isPlaying = false;
    let audio = new Audio();

    // Play/Pause functionality
    playPauseBtn.addEventListener('click', () => {
      if (isPlaying) {
        audio.pause();
        playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
      } else {
        audio.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
      }
      isPlaying = !isPlaying;
    });

    // Load selected song
    document.querySelectorAll('.song-item').forEach(item => {
      item.addEventListener('click', function () {
        const title = this.getAttribute('data-title');
        const artist = this.getAttribute('data-artist');
        const cover = this.getAttribute('data-cover');
        const url = this.getAttribute('data-url');

        songTitle.textContent = title;
        artistName.textContent = artist;
        coverArt.src = cover;
        audio.src = url;
        audio.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
        isPlaying = true;

        // Highlight active song
        document.querySelectorAll('.song-item').forEach(item => {
          item.classList.remove('active');
        });
        this.classList.add('active');
      });
    });

    // Update progress bar
    audio.addEventListener('timeupdate', () => {
      progressBar.value = (audio.currentTime / audio.duration) * 100 || 0;
      currentTime.textContent = formatTime(audio.currentTime);
    });

    progressBar.addEventListener('input', () => {
      audio.currentTime = (progressBar.value / 100) * audio.duration;
    });

    audio.addEventListener('loadedmetadata', () => {
      totalDuration.textContent = formatTime(audio.duration);
    });

    function formatTime(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
      return `${mins}:${secs}`;
    }

    // Share on WhatsApp
      shareBtn.addEventListener('click', () => {
        const songName = songTitle.textContent;
        const artist = artistName.textContent;
        const message = `Check out this song: ${songName} by ${artist}`;
        const url = encodeURIComponent(message);
        const whatsappUrl = `https://wa.me/?text=${url}`;
        window.open(whatsappUrl, '_blank');
      });

    // Shuffle functionality (this can be added based on your needs)
    let songs = document.querySelectorAll('.song-item');
    let isShuffleOn = false;
    document.getElementById('shuffleBtn').addEventListener('click', () => {
      isShuffleOn = !isShuffleOn;
      if (isShuffleOn) {
        document.getElementById('shuffleBtn').style.color = '#1db954';
        songs = shuffleArray(Array.from(songs));
      } else {
        document.getElementById('shuffleBtn').style.color = 'white';
      }
    });

    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      // Re-render songs
      const songContainer = document.querySelector('.w-11/12');
      songContainer.innerHTML = '';
      array.forEach(song => songContainer.appendChild(song));
      return array;
    }
    
    // Event listener untuk memutar lagu berikutnya secara otomatis
audio.addEventListener('ended', () => {
  // Memutar lagu berikutnya
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  songs[currentSongIndex].click();
});

    // Repeat functionality (Repeat current song)
    document.getElementById('repeatBtn').addEventListener('click', () => {
      audio.currentTime = 0;
      audio.play();
    });

    // Handle previous and next song functionality
    let currentSongIndex = 0;

    document.getElementById('prevBtn').addEventListener('click', () => {
      currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
      songs[currentSongIndex].click();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      currentSongIndex = (currentSongIndex + 1) % songs.length;
      songs[currentSongIndex].click();
    });

    // Update device info (this could be improved based on actual device capabilities)
    function updateDeviceInfo() {
      const audioDevice = navigator.mediaDevices.enumerateDevices();
      audioDevice.then(devices => {
        const audioOutput = devices.filter(device => device.kind === 'audiooutput');
        deviceInfo.textContent = `Perangkat Audio: ${audioOutput.length > 0 ? audioOutput[0].label : 'Tidak Ditemukan'}`;
      }).catch(err => {
        deviceInfo.textContent = 'Perangkat Audio: Tidak Ditemukan';
      });
    }
    updateDeviceInfo();

  </script>
</body>
</html>