<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>רשימת שירים יוטיוב</title>
  <style>
    body {
      background: linear-gradient(135deg, #1c1c1c, #3a3a3a);
      color: #fff;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 40px;
    }

    h1 {
      text-align: center;
      font-size: 2.5em;
      margin-bottom: 30px;
      color: #ffd700;
      text-shadow: 2px 2px 4px #000;
    }

    .song-list {
      max-width: 800px;
      margin: 0 auto;
      background: #2c2c2c;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }

    .song {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #444;
      padding: 15px 20px;
      margin-bottom: 10px;
      border-radius: 12px;
      transition: background 0.3s ease;
    }

    .song:hover {
      background: #555;
    }

    .song-title {
      font-size: 1.2em;
      flex: 1;
    }

    .song button {
      margin-right: 10px;
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      background-color: #ffd700;
      color: #000;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .song button:hover {
      background-color: #ffc107;
    }

    #randomButton {
      display: block;
      margin: 30px auto 0;
      padding: 15px 30px;
      font-size: 1.2em;
      border: none;
      border-radius: 12px;
      background-color: #00c6ff;
      color: white;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 5px 20px rgba(0,0,0,0.4);
      transition: background-color 0.3s;
    }

    #randomButton:hover {
      background-color: #00a6dd;
    }
  </style>
</head>
<body>

  <h1>רשימת שירים אהובים</h1>
  <div class="song-list" id="songList">
    <!-- שירים יוזנו כאן דרך JS -->
  </div>

  <button id="randomButton">🎵 נגן שיר אקראי</button>

  <script>
    const songs = [
      { title: "פשוט אוהב אותך", url: "https://www.youtube.com/watch?v=LIMkBZyWDX0" },
      { title: "שמור נא עלינו כמו ילדים - עפרה חזה", url: "https://www.youtube.com/watch?v=bnh5VZwnp0U" },
      { title: "שמר נא עלינו כמו ילדים - עומר אדם", url: "https://www.youtube.com/watch?v=mQiTfvht20I" },
      { title: "שלום - נעמי שמר", url: "https://www.youtube.com/watch?v=b4MOk9Rn9sc" },
      { title: "Show Must Go On", url: "https://www.youtube.com/watch?v=t99KH0TR-J4" },
      { title: "אלוהים שלי רציתי שתדע - עוזי חיטמן", url: "https://www.youtube.com/watch?v=O_E9cjwpIk4" },
      { title: "יגאל בשן – אם הייתי שר לך", url: "https://www.youtube.com/watch?v=yxad4tPlVPo" },
      { title: "קפה אצל ברטה", url: "https://www.youtube.com/watch?v=lEdCKGQ8hZk" },
      { title: "יהורם גאון - הנני כאן", url: "https://www.youtube.com/watch?v=ijPL6Yi8VRM" },
      { title: "אלוהים נתן לך במתנה", url: "https://www.youtube.com/watch?v=GQOFdm3bCzw" },
      { title: "זה קורה – אריק לביא", url: "https://www.youtube.com/watch?v=bSF90A2qBdU" },
      { title: "אלי לוזון - איזה מדינה", url: "https://www.youtube.com/watch?v=PT9hEKCMz_w" },
      { title: "לשיר איתך - בועז שרעבי ויפה ירקוני", url: "https://www.youtube.com/watch?v=6kLEk3_Swhc" },
      { title: "עוזי חיטמן - אני נולדתי לשלום", url: "https://www.youtube.com/watch?v=3ivSCrzPYd4" },
      { title: "אלף כבאים", url: "https://www.youtube.com/watch?v=2dgOhxgFios" }
    ];

    const songList = document.getElementById("songList");

    songs.forEach((song, index) => {
      const songDiv = document.createElement("div");
      songDiv.className = "song";

      const titleSpan = document.createElement("span");
      titleSpan.className = "song-title";
      titleSpan.textContent = song.title;

      const playBtn = document.createElement("button");
      playBtn.textContent = "▶ נגן";
      playBtn.onclick = () => {
        window.open(song.url, "_blank");
      };

      songDiv.appendChild(titleSpan);
      songDiv.appendChild(playBtn);

      songList.appendChild(songDiv);
    });

    document.getElementById("randomButton").addEventListener("click", () => {
      const randomSong = songs[Math.floor(Math.random() * songs.length)];
      window.open(randomSong.url, "_blank");
    });
  </script>
</body>
</html>