Codes used for my blog🩰

 iPod html/java code copy the code below for Ipod also I've heard you can use google Gemini for creating codes (if you need more info type in chat and I will try my best to get back to you:)

<link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&amp;display=swap" rel="stylesheet" />

<!-- IPOD CONTAINER -->

<div class="ipod-widget">

  <div class="ipod">

    <div class="sparkle-overlay"></div>

    <div class="screen">

      <img id="cover" src="https://via.placeholder.com/150" alt="Album Cover" />

      <p id="track-title">Your Song Title</p>

      

      <div class="progress-container" id="progress-container">

        <div class="progress-bar" id="progress-bar"></div>

      </div>

      <div class="time-display">

        <span id="current-time">0:00</span> / <span id="duration-time">0:00</span>

      </div>

    </div>

    <div class="controls-wheel">

      <button id="play" class="ipod-btn btn-play-pause state-paused" title="Play/Pause">

        <span class="play-icon"></span>

      </button>

      <button id="prev" class="ipod-btn btn-prev"><span class="icon-prev"></span></button>

      <button id="next" class="ipod-btn btn-next"><span class="icon-next"></span></button>

    </div>

    <div id="player-container"><div id="player"></div></div>

  </div>

</div>

<!-- EASY CUSTOMIZATION SCRIPT -->

<script>

  // -----------------------------------------------------------

  // EDIT YOUR IPOD DETAILS HERE

  // -----------------------------------------------------------

  const YOUTUBE_VIDEO_ID = ""; // Put the YouTube video ID here

  const SONG_TITLE = "Your Song Title";

  const ALBUM_COVER_URL = "https://via.placeholder.com/150"; // Paste image URL here

  // -----------------------------------------------------------

  document.getElementById("cover").src = ALBUM_COVER_URL;

  document.getElementById("track-title").textContent = SONG_TITLE;

  let player, progressTimer;

  if (!window.YT) {

    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";

    document.getElementsByTagName('script')[0].parentNode.insertBefore(tag, document.getElementsByTagName('script')[0]);

  } else {

    onYouTubeIframeAPIReady();

  }

  function onYouTubeIframeAPIReady() {

    if (!YOUTUBE_VIDEO_ID) return;

    player = new YT.Player('player', {

      height: '1', width: '1', videoId: YOUTUBE_VIDEO_ID,

      playerVars: { 'autoplay': 0, 'controls': 0, 'playsinline': 1 },

      events: { 'onStateChange': onPlayerStateChange }

    });

  }

  function onPlayerStateChange(event) {

    const playBtn = document.getElementById("play");

    if (event.data === YT.PlayerState.PLAYING) {

      playBtn.classList.replace("state-paused", "state-playing");

      startTimer();

    } else {

      playBtn.classList.replace("state-playing", "state-paused");

      clearInterval(progressTimer);

    }

  }

  document.getElementById("play").onclick = () => {

    if (!player || !player.getPlayerState) return;

    player.getPlayerState() === YT.PlayerState.PLAYING ? player.pauseVideo() : player.playVideo();

  };

  function startTimer() {

    clearInterval(progressTimer);

    progressTimer = setInterval(() => {

      if (player && player.getCurrentTime) {

        const cur = player.getCurrentTime(), dur = player.getDuration();

        if (dur > 0) {

          document.getElementById("progress-bar").style.width = (cur / dur * 100) + "%";

          document.getElementById("current-time").textContent = formatTime(cur);

          document.getElementById("duration-time").textContent = formatTime(dur);

        }

      }

    }, 500);

  }

  function formatTime(sec) {

    const m = Math.floor(sec / 60), s = Math.floor(sec % 60);

    return m + ":" + (s < 10 ? "0" : "") + s;

  }

  document.getElementById("progress-container").onclick = function(e) {

    if (player && player.getDuration) {

      const rect = this.getBoundingClientRect(), dur = player.getDuration();

      if (dur > 0) player.seekTo(((e.clientX - rect.left) / rect.width) * dur, true);

    }

  };

</script>

<!-- IPOD STYLING (PLAIN WHITE BASE FOR CUSTOMIZATION) -->

<style>

/* CHANGE COLOR VARIABLES HERE */

:root {

  --ipod-bg: #ffffff;

  --ipod-border: #cccccc;

  --ipod-accent: #666666;

  --ipod-text: #333333;

  --screen-bg: #f9f9f9;

}

.ipod-widget { all: initial; display: block; font-family: sans-serif; }

.ipod-widget .ipod {

  width: 175px; 

  background-color: var(--ipod-bg);

  border-radius: 20px; 

  padding: 10px; 

  text-align: center; 

  margin: 15px auto;

  border: 3px solid var(--ipod-border); 

  position: relative; 

  overflow: hidden;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}

#player-container { position: absolute; top: -9999px; left: -9999px; }

.ipod-widget .screen {

  position: relative; z-index: 2; 

  background: var(--screen-bg); 

  border-radius: 14px;

  padding: 10px; 

  display: flex; 

  flex-direction: column; 

  align-items: center;

  gap: 6px; 

  border: 2px solid var(--ipod-border);

}

.ipod-widget .screen img {

  width: 95px; height: 95px; object-fit: cover; border-radius: 10px;

  border: 2px solid var(--ipod-border);

}

.ipod-widget .screen p {

  font-family: sans-serif; font-size: 11px; color: var(--ipod-text);

  margin: 4px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;

}

.ipod-widget .time-display { font-size: 9px; color: var(--ipod-text); font-family: monospace; font-weight: bold; }

.ipod-widget .progress-container {

  width: 100%; background: #e0e0e0; height: 6px; border-radius: 3px;

  cursor: pointer; position: relative; overflow: hidden; border: 1px solid var(--ipod-border);

}

.ipod-widget .progress-bar { background: var(--ipod-accent); height: 100%; width: 0%; }

.ipod-widget .controls-wheel {

  position: relative; z-index: 2; width: 125px; height: 125px; background: #ffffff;

  border-radius: 50%; margin: 15px auto 5px auto; border: 2.5px solid var(--ipod-border);

}

.ipod-widget .ipod-btn { position: absolute; border: none; background: transparent; cursor: pointer; }

.ipod-widget .btn-play-pause {

  top: 50%; left: 50%; transform: translate(-50%, -50%);

  background: #ffffff;

  border: 2px solid var(--ipod-border); width: 42px; height: 42px; border-radius: 50%;

}

.ipod-widget .state-paused .play-icon {

  display: block; width: 0; height: 0; border-top: 7px solid transparent;

  border-bottom: 7px solid transparent; border-left: 12px solid var(--ipod-accent); margin-left: 3px;

}

.ipod-widget .state-playing .play-icon {

  display: block; width: 10px; height: 12px; border-left: 3.5px solid var(--ipod-accent); border-right: 3.5px solid var(--ipod-accent);

}

.ipod-widget .btn-prev { top: 50%; left: 12px; transform: translateY(-50%); }

.ipod-widget .icon-prev {

  display: block; width: 0; height: 0; border-top: 5px solid transparent;

  border-bottom: 5px solid transparent; border-right: 9px solid var(--ipod-accent); position: relative;

}

.ipod-widget .icon-prev::before {

  content: ''; position: absolute; top: -5px; left: 8px; width: 0; height: 0;

  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 9px solid var(--ipod-accent);

}

.ipod-widget .btn-next { top: 50%; right: 12px; transform: translateY(-50%); }

.ipod-widget .icon-next {

  display: block; width: 0; height: 0; border-top: 5px solid transparent;

  border-bottom: 5px solid transparent; border-left: 9px solid var(--ipod-accent); position: relative;

}

.ipod-widget .icon-next::after {

  content: ''; position: absolute; top: -5px; right: 8px; width: 0; height: 0;

  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--ipod-accent);

}

</style>

I do have to redo some codes so you can use them in your own way I will update this post tomorrow so I can gather all my codes!