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&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!