images
paper tigers
dragons
demons
songs
Papertigers_Httpsstatiswixstaticcommedia22A4B23b69165d904e4d7985226d2c711ce52bmv2Png_Httpsstatiswixstaticcommp322A4B23D98171B9Bbf4F9Dafbf9Fbf37Fd9742Mp3
Backtothesky_Httpsstatiswixstaticcommedia22A4B2F3F97C13Fcaf45A4B2275F2Aa027Dcc5Mv2Png_Httpsstatiswixstaticcommp322A4B2E2D3Ae18E72F402382Da71C121B1D6Afmp3
Climbin_Httpsstatiswixstaticcommedia22A4B2C1Ff515Fd6Fb4Bd9A262Ccbb66626235Mv2Png_Httpsstatiswixstaticcommp322A4B230F26C860B2C4E0983C12D69C01Bcd31Wav
Sweetdreams_Httpsstatiswixstaticcommedia22A4B2E7B9Ae52E5D94Ab889Af0581Dd0346F9Mv2Png_Httpsstatiswixstaticcommp322A4B262Df9E3Cdfc5470385929E95Bb437C42Mp3
Psychedeliceyes_Httpsstatiswixstaticcommedia22A4B2611038346D9D44B7Ac595Ad604C47F86Mv2Png_Httpsstatiswixstaticcommp322A4B20F10Cf2815734C1Bbeaa69930F6F2E09Mp3
Withthemonsters_Httpsstatiswixstaticcommedia22A4B2058A46Ddd8F1401Bbdacdc08D5C43B33Mv2Png_Httpsstatiswixstaticcommp322A4B23D98171B9Bbf4F9Dafbf9Fbf37Fd9742Mp3
Foolsgold_Httpsstatiswixstaticcommedia22A4B2363C83Ede00947F1Ab92A2B8E1Bae179Mv2Png_Httpsstatiswixstaticcommp322A4B20D4E0E663B784B43B824932Ed7D929Cfmp3
Beyondtheblue_Httpsstatiswixstaticcommedia22A4B2292B8862A6Be4D42B0E8E91E731D9E0DMp3_Httpsstatiswixstaticcommedia22A4B25159139B2E824337B7463647C54AE614Mv2Png
Mia_Httpsstatiswixstaticcommp322a4b2ef0cf40aff4c4cb5b619bc7f0c089fa8mp3_Httpsstatiswixstaticcommedia99962ee2b6385967464d248b070f68bccdeb56mv2jpg
Goodbyeyellowbrickroad_Httpsstatiswixstaticcommp322a4b2d6e7b677309a4841af5af7a0edb63d1emp3_Httpsstatiswixstaticcommedia22a4b260992a9863fe48769b1f5b67db442535mv2png
Youresovain_Httpsstatiswixstaticcommp322a4b2cbe26565b3cb4994b28463caf2760ccemp3_Httpsstatiswixstaticcommedia22a4b234104f27e48a4a4fa86368069c933b60mv2png
Youmakemefeelsoyoung_Httpsstatiswixstaticcommp322a4b2b091dfee8e97488fa34310d480de065bmp3_Httpsstatiswixstaticcommedia22a4b23f7124f3bc624ec78e5c21690b48b30fmv2png
Iris_Httpsstatiswixstaticcommp322a4b296100c210d764762b2f64d15811d59ebmp3_Httpsstatiswixstaticcommedia22a4b29032c55bc35540d7a8c706641eeb89edmv2png
Thelogicalsong_Httpsstatiswixstaticcommp322a4b2b7b87d5592b246f7a34ba471cdda0f4bmp3_Httpsstatiswixstaticcommedia22a4b2ea2e4350f42e4b87888c5a9c6009e317mv2png
Flymetothemoon_Httpsstatiswixstaticcommp322a4b28a44a43a9c7947e2b6bb729959f717f2mp3_Httpsstatiswixstaticcommedia22a4b22aba34047c694b7dbc981391631b998amv2png
tracklist + styling
styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casey McCreary - Music Playlist</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
body {
background: #0a0a0a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: #ffffff;
font-size: 9px;
line-height: 1.2;
padding: 8px;
}
.playlist-container {
max-width: 600px;
margin: 0 auto;
background: #111111;
border-radius: 6px;
border: 1px solid #222;
overflow: hidden;
}
.track-list {
padding: 0;
}
.track-item {
display: flex;
align-items: center;
padding: 6px 12px;
border-bottom: 1px solid #1a1a1a;
transition: background 0.15s ease;
cursor: pointer;
min-height: 24px;
}
.track-item:hover {
background: #191919;
}
.track-item:last-child {
border-bottom: none;
}
.track-number {
font-size: 8px;
color: #666;
min-width: 18px;
text-align: right;
font-weight: 500;
}
.track-info {
flex: 1;
margin-left: 8px;
min-width: 0;
}
.track-title {
font-size: 9px;
font-weight: 500;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-artist {
font-size: 8px;
color: #888;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-controls {
display: flex;
gap: 6px;
opacity: 0;
transition: opacity 0.15s ease;
}
.track-item:hover .track-controls {
opacity: 1;
}
.control-btn {
background: #333;
border: none;
color: #ccc;
padding: 3px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 7px;
font-weight: 500;
transition: all 0.15s ease;
height: 16px;
min-width: 24px;
}
.control-btn:hover {
background: #444;
color: #fff;
}
.play-btn {
background: #0066cc;
color: white;
}
.play-btn:hover {
background: #0080ff;
}
.current-playing {
background: #0d1117;
border-left: 2px solid #0066cc;
}
.current-playing .track-number {
color: #0066cc;
}
.current-playing .track-title {
color: #0080ff;
}
.now-playing-indicator {
display: none;
margin-left: 8px;
}
.current-playing .now-playing-indicator {
display: flex;
}
.sound-waves {
display: flex;
gap: 1px;
align-items: center;
height: 10px;
}
.wave {
width: 1px;
background: #0066cc;
border-radius: 1px;
animation: wave 1.2s ease-in-out infinite;
}
.wave:nth-child(1) { height: 3px; animation-delay: 0s; }
.wave:nth-child(2) { height: 6px; animation-delay: 0.1s; }
.wave:nth-child(3) { height: 4px; animation-delay: 0.2s; }
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.3); }
}
.track-duration {
font-size: 7px;
color: #666;
margin-left: 8px;
min-width: 28px;
text-align: right;
}
@media (max-width: 480px) {
body {
padding: 4px;
font-size: 8px;
}
.track-item {
padding: 5px 8px;
min-height: 22px;
}
.track-number {
min-width: 16px;
font-size: 7px;
}
.track-title {
font-size: 8px;
}
.track-artist {
font-size: 7px;
}
}
</style>
```
</head>
<body>
<div class="playlist-container">
<div class="track-list">
<div class="track-item" onclick="playTrack(this, 1)">
<div class="track-number">01</div>
<div class="track-info">
<div class="track-title">Paper Tigers</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">3:24</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
```
<div class="track-item" onclick="playTrack(this, 2)">
<div class="track-number">02</div>
<div class="track-info">
<div class="track-title">Back to the Sky</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">4:12</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="track-item" onclick="playTrack(this, 3)">
<div class="track-number">03</div>
<div class="track-info">
<div class="track-title">Climbin'</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">3:48</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="track-item" onclick="playTrack(this, 4)">
<div class="track-number">04</div>
<div class="track-info">
<div class="track-title">Sweet Dreams</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">3:56</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="track-item" onclick="playTrack(this, 5)">
<div class="track-number">05</div>
<div class="track-info">
<div class="track-title">Psychedelic Eyes</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">4:32</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="track-item" onclick="playTrack(this, 6)">
<div class="track-number">06</div>
<div class="track-info">
<div class="track-title">With The Monsters</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">3:18</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
<div class="track-item" onclick="playTrack(this, 7)">
<div class="track-number">07</div>
<div class="track-info">
<div class="track-title">Fool's Gold</div>
<div class="track-artist">Casey McCreary</div>
</div>
<div class="track-duration">4:05</div>
<div class="track-controls">
<button class="control-btn play-btn">▶</button>
<button class="control-btn">♡</button>
</div>
<div class="now-playing-indicator">
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
</div>
</div>
<script>
let currentPlaying = null;
function playTrack(element, trackNumber) {
document.querySelectorAll('.track-item').forEach(item => {
item.classList.remove('current-playing');
const playBtn = item.querySelector('.play-btn');
playBtn.textContent = '▶';
});
if (currentPlaying === trackNumber) {
currentPlaying = null;
return;
}
element.classList.add('current-playing');
currentPlaying = trackNumber;
const playBtn = element.querySelector('.play-btn');
playBtn.textContent = '⏸';
}
document.querySelectorAll('.control-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
if (this.textContent === '♡') {
this.textContent = '♥';
this.style.color = '#ff4444';
} else if (this.textContent === '♥') {
this.textContent = '♡';
this.style.color = '';
}
});
});
</script>
```
</body>
</html>
viewport
mobile
viewport
mobile style
