script.js

const musicData = [
  {
    title: "Today's Top Hits",
    description: "Featuring new music from popular artists",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/c8d6df7c-5937-4f86-9184-15723a7c8bd1.png"
  },
  {
    title: "Chill Vibes",
    description: "Relaxing beats for your day",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/23a6f36a-7821-4ab2-bbc0-f7488535630f.png"
  },
  {
    title: "Rock Classics",
    description: "Rock legends & epic songs",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/44ed0d22-c74a-4950-8195-93ea9a9a6624.png"
  },
  {
    title: "Workout Energy",
    description: "High intensity workout playlist",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/c0d496b1-ed39-4681-9309-9b286f05b2ba.png"
  },
  {
    title: "Hip Hop Central",
    description: "The pulse of hip hop",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/cf72340b-c35e-4e2b-89ea-9543910fee70.png"
  },
  {
    title: "Indie Mix",
    description: "The best new indie tracks",
    img: "https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/48c54310-4eb1-41a0-8c71-41a72686840a.png"
  }
];

const container = document.getElementById("music-container");

musicData.forEach(item => {
  container.innerHTML += `
    <div class="card rounded-lg group relative">
      <img src="${item.img}" alt="${item.title}" class="w-full rounded-md shadow-lg mb-4" />
      <h3 class="font-bold truncate">${item.title}</h3>
      <p class="text-gray-400 text-sm mt-1 truncate">${item.description}</p>
      <button class="play-button absolute bg-green-500 rounded-full p-3 text-black">
        <i class="fas fa-play"></i>
      </button>
    </div>
  `;
});