// this will control the title for all of your pages
document.title = "site name ♡";

// this will control the icon for all of your pages (the little image in the tab bar)
const link = document.createElement("link");
link.rel = "icon";
link.href = "/assets/favicon.gif"; 
document.head.appendChild(link);

//if you dont want to have your page title and icon set the same for each page, just delete everything above. 

//music player logic
const player = document.querySelector(".music-player");
const audio = player.querySelector(".audio");
const progressBar = player.querySelector(".progress-bar");
const progressDot = player.querySelector(".progress-dot");
const timeDisplay = player.querySelector(".music-time");


function formatTime(time) {
    if (isNaN(time)) return "0:00";
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60).toString().padStart(2, "0");
    return `${minutes}:${seconds}`;
}


audio.muted = true;
audio.play().then(() => {
    audio.muted = false;
}).catch(() => {
    console.log("Autoplay blocked by browser");
});


audio.addEventListener("timeupdate", () => {
    if (!audio.duration) return;

    const progress = audio.currentTime / audio.duration;
    const width = progressBar.clientWidth;

    progressDot.style.left = `${progress * width}px`;

    timeDisplay.textContent =
        `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
});


progressBar.addEventListener("click", (e) => {
    const rect = progressBar.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const percent = clickX / rect.width;

    audio.currentTime = percent * audio.duration;
});