<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rock / Metal Mini Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
--bg: #0b0b0c;
--panel: #141416;
--accent: #e0463a;
--text: #f1f1f1;
--muted: #9aa0a6;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(circle at top, #121212, #070707);
font-family: Inter, Arial, sans-serif;
color: var(--text);
}
.container {
max-width: 1150px;
margin: 24px auto 120px;
padding: 16px;
}
/* ===== Albums ===== */
.albums {
display: flex;
gap: 18px;
justify-content: space-between;
}
.album {
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border-radius: 12px;
padding: 12px;
width: 24%;
box-shadow: 0 10px 30px rgba(0,0,0,.6);
border: 1px solid rgba(255,255,255,.04);
}
.album img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 10px;
}
.album h3 {
margin: 6px 0 2px;
font-size: 16px;
}
.album span {
font-size: 13px;
color: var(--muted);
}
/* ===== Songs ===== */
.song-list { margin-top: 10px; }
.song {
padding: 7px 8px;
border-radius: 7px;
cursor: pointer;
transition: background .15s;
font-size: 14px;
}
.song:hover {
background: rgba(255,255,255,.04);
}
.song.playing {
background: linear-gradient(90deg, rgba(224,70,58,.25), rgba(224,70,58,.05));
}
.song-title {
font-weight: 600;
}
.song-meta {
font-size: 12px;
color: var(--muted);
}
/* ===== Player ===== */
.player {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 18px;
background: linear-gradient(180deg, #121212, #0b0b0b);
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
min-width: 560px;
box-shadow: 0 20px 40px rgba(0,0,0,.8);
border: 1px solid rgba(255,255,255,.05);
}
.btn {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .08s, background .12s;
}
.btn:hover {
background: rgba(255,255,255,.06);
}
.btn:active {
transform: scale(.95);
}
.btn img {
max-width: 40px;
}
.now {
flex: 1;
}
.now .title {
font-weight: 700;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.now .album-name {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.progress {
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 6px;
overflow: hidden;
}
.progress div {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), #ff9b8d);
}
.footer-note {
margin-top: 14px;
text-align: center;
font-size: 13px;
color: var(--muted);
}
@media (max-width: 900px) {
.albums { flex-direction: column; }
.album { width: 100%; }
.player { min-width: 94%; }
}
</style>
</head>
<body>
<div class="container">
<div class="albums">
<!-- Awake -->
<div class="album">
<img src="https://files.catbox.moe/2c0kot.jpeg">
<h3>Skillet</h3>
<span>Awake</span>
<div class="song-list" id="awake"></div>
</div>
<!-- One-X -->
<div class="album">
<img src="https://files.catbox.moe/knsuv4.jpeg">
<h3>Three Days Grace</h3>
<span>One-X</span>
<div class="song-list" id="onex"></div>
</div>
<!-- Rise -->
<div class="album">
<img src="https://files.catbox.moe/pntdb9.jpeg">
<h3>Skillet</h3>
<span>Rise</span>
<div class="song-list" id="rise"></div>
</div>
<!-- Unleashed -->
<div class="album">
<img src="https://files.catbox.moe/bde7xg.jpeg">
<h3>Skillet</h3>
<span>Unleashed</span>
<div class="song-list" id="unleashed"></div>
</div>
</div>
<div class="footer-note">
Click any song to play • Back = restart / double-click = previous track
</div>
</div>
<!-- PLAYER -->
<div class="player">
<div class="btn" id="back"><img src="https://files.catbox.moe/2n9wie.png"></div>
<div class="btn" id="play"><img src="https://files.catbox.moe/xt5ed8.png"></div>
<div class="btn" id="stop"><img src="https://files.catbox.moe/a2igrn.png"></div>
<div class="btn" id="next"><img src="https://files.catbox.moe/1imarb.png"></div>
<div class="now">
<div class="title" id="nowTitle">No track selected</div>
<div class="album-name" id="nowAlbum">—</div>
<div class="progress"><div id="bar"></div></div>
</div>
</div>
<audio id="audio"></audio>
<script>
const tracks = [
{g:"Skillet", t:"Hero", a:"Awake", u:"https://files.catbox.moe/43n4x2.mp3"},
{g:"Skillet", t:"Monster", a:"Awake", u:"https://files.catbox.moe/1lngc3.mp3"},
{g:"Three Days Grace", t:"Animal I Have Become", a:"One-X", u:"https://files.catbox.moe/76ww11.mp3"},
{g:"Three Days Grace", t:"It's All Over", a:"One-X", u:"https://files.catbox.moe/qcjcqa.mp3"},
{g:"Three Days Grace", t:"Riot", a:"One-X", u:"https://files.catbox.moe/vpdgu9.mp3"},
{g:"Skillet", t:"Sick of It", a:"Rise", u:"https://files.catbox.moe/j7shg3.mp3"},
{g:"Skillet", t:"Rise", a:"Rise", u:"https://files.catbox.moe/0in1g4.mp3"},
{g:"Skillet", t:"Feel Invincible", a:"Unleashed", u:"https://files.catbox.moe/zjlfk5.mp3"},
{g:"Skillet", t:"The Resistance", a:"Unleashed", u:"https://files.catbox.moe/w9d2yh.mp3"}
];
const lists = {
"Awake": document.getElementById("awake"),
"One-X": document.getElementById("onex"),
"Rise": document.getElementById("rise"),
"Unleashed": document.getElementById("unleashed")
};
const audio = document.getElementById("audio");
const nowTitle = document.getElementById("nowTitle");
const nowAlbum = document.getElementById("nowAlbum");
const bar = document.getElementById("bar");
let index = null;
let backTimer = null;
tracks.forEach((s,i)=>{
const el = document.createElement("div");
el.className = "song";
el.innerHTML = `<div class="song-title">${s.g} – ${s.t}</div><div class="song-meta">${s.a}</div>`;
el.onclick = ()=>play(i);
lists[s.a].appendChild(el);
s.el = el;
});
function play(i){
index = i;
audio.src = tracks[i].u;
audio.currentTime = 0;
audio.play();
updateUI();
}
function updateUI(){
tracks.forEach(s=>s.el.classList.remove("playing"));
tracks[index].el.classList.add("playing");
nowTitle.textContent = `${tracks[index].g} – ${tracks[index].t}`;
nowAlbum.textContent = tracks[index].a;
}
document.getElementById("play").onclick = ()=>{
if(index === null) play(0);
else audio.paused ? audio.play() : audio.pause();
};
document.getElementById("stop").onclick = ()=>{
audio.pause();
audio.currentTime = 0;
};
document.getElementById("next").onclick = ()=>{
play((index+1)%tracks.length);
};
document.getElementById("back").onclick = ()=>{
if(backTimer) clearTimeout(backTimer);
backTimer = setTimeout(()=>audio.currentTime=0, 220);
};
document.getElementById("back").ondblclick = ()=>{
clearTimeout(backTimer);
play((index-1+tracks.length)%tracks.length);
};
audio.ontimeupdate = ()=>{
if(audio.duration) bar.style.width = (audio.currentTime/audio.duration*100)+"%";
};
audio.onended = ()=>document.getElementById("next").click();
</script>
</body>
</html>