Not-ify Playlist
created by:dragon-heist
Mixed ColorsHTMLMiscellaneous
Copy
<div class="col-xl-6 col-md-8 col-sm-10 mx-auto">
<div class="tab-content" style="background:#282828; border-radius:10px 10px 0 0; position:relative;">
<a href="#" class="fa-brands fa-spotify fa-xl text-light" style="position:absolute; right:20px; top:30px; text-decoration:none;"></a>
<div class="tab-pane fade active show" id="song-1">
<div class="d-sm-flex d-block p-4 align-items-center">
<div style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('https://img.freepik.com/free-photo/cosmos-flowers_1373-83.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">Song Name</div>
<p>Artist Name</p>
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%;">
<source src="MP3LINK">
</audio>
</div>
</div>
<div class="d-none align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
</div>
</div>
<div class="tab-pane fade" id="song-2">
<div class="d-sm-flex d-block p-4 align-items-center">
<div class="" style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('https://img.freepik.com/free-photo/niagara-falls_649448-3318.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">Song Name</div>
<p>Artist Name</p>
<!-- audio player; add d-none to class to hide -->
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%;">
<source src="MP3LINK">
</audio>
</div>
</div>
<!-- remove d-none from class to show; use if not using the audio player -->
<div class="d-none align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
</div>
</div>
<div class="tab-pane fade" id="song-3">
<div class="d-sm-flex d-block p-4 align-items-center">
<div class="" style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('https://img.freepik.com/free-photo/vertical-aerial-shot-sea-waves-hitting-cliff_181624-2039.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">Song Name</div>
<p>Artist Name</p>
<!-- audio player; add d-none to class to hide -->
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%;">
<source src="MP3LINK">
</audio>
</div>
</div>
<!-- remove d-none from class to show; use if not using the audio player -->
<div class="d-none align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
</div>
</div>
<div class="tab-pane fade" id="song-4">
<div class="d-sm-flex d-block p-4 align-items-center">
<div class="" style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('https://img.freepik.com/free-photo/aerial-view-mountain-covered-fog-beautiful-pink-sky_181624-4676.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">Song Name</div>
<p>Artist Name</p>
<!-- audio player; add d-none to class to hide -->
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%;">
<source src="MP3LINK">
</audio>
</div>
</div>
<!-- remove d-none from class to show; use if not using the audio player -->
<div class="d-none align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
</div>
</div>
<div class="tab-pane fade" id="song-5">
<div class="d-sm-flex d-block p-4 align-items-center">
<div class="" style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('https://img.freepik.com/free-photo/shallow-focus-shot-beautiful-pink-cherry-blossoms-breathtaking-blue-sky_181624-4350.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">Song Name</div>
<p>Artist Name</p>
<!-- audio player; add d-none to class to hide -->
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%;">
<source src="MP3LINK">
</audio>
</div>
</div>
<!-- remove d-none from class to show; use if not using the audio player -->
<div class="d-none align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
</div>
</div>
</div>
<div style="background:#242424; border-radius:0 0 10px 10px;">
<ul class="nav nav-pills flex-column" style="height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link active text-center" style="width:40px;" data-toggle="pill" href="#song-1">
1
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">Song Name</div>
<div class="mt-0" style="font-size:0.85em;">Artist Name</div>
</div>
<div class="pr-3">00:00</div>
</li>
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link text-center" style="width:40px;" data-toggle="pill" href="#song-2">
2
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">Song Name</div>
<div class="mt-0" style="font-size:0.85em;">Artist Name</div>
</div>
<div class="pr-3">00:00</div>
</li>
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link text-center" style="width:40px;" data-toggle="pill" href="#song-3">
3
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">Song Name</div>
<div class="mt-0" style="font-size:0.85em;">Artist Name</div>
</div>
<div class="pr-3">00:00</div>
</li>
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link text-center" style="width:40px;" data-toggle="pill" href="#song-4">
4
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">Song Name</div>
<div class="mt-0" style="font-size:0.85em;">Artist Name</div>
</div>
<div class="pr-3">00:00</div>
</li>
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link text-center" style="width:40px;" data-toggle="pill" href="#song-5">
5
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">Song Name</div>
<div class="mt-0" style="font-size:0.85em;">Artist Name</div>
</div>
<div class="pr-3">00:00</div>
</li>
</div>
<div class="col-12 mt-1 pr-0 text-right">
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
</div>
Copy
<div class="col-12 mx-auto">
<div class="tab-content" style="background:{{c!Top BG Colour (default #282828)!}}; border-radius:10px 10px 0 0; position:relative;">
<a href="{{u!Link to Playlist!}}" class="fa-brands fa-spotify fa-xl text-light" style="position:absolute; right:20px; top:30px; text-decoration:none;"></a>
{{%Song Preview%
<div class="tab-pane fade {{?1st in Playlist?active show?end?}}" id="song-{{%Number in Playlist%}}">
<div class="d-sm-flex d-block p-4 align-items-center">
<div style="box-shadow: 0 0 5px #0a0a0a; border-radius:10px; height:150px; width:150px; background:url('{{u%Album Image URL%}}'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>
<div class="pl-sm-4" style="color:#a1a1a1;">
<div class="text-white" style="font-size:1.7em; font-weight:600;">{{%Song Name%}}</div>
<p>{{%Artist Name%}}</p>
{{%%Music Player%
{{?Show Music Player?
<div class="mt-sm-3 mt-2">
<audio controls="" muted style="border-radius:7px; height:35px; width:100%">
<source src="{{u%Link to File%}}">
</audio>
</div>
?end?}}
%end%}}
</div>
{{?Hide Music Player?
<div class="d-flex align-items-center text-light" style="position:absolute; bottom:20px; right:25px;">
<i class="fa-xl fa-solid fa-backward-step mt-2" style="opacity:0.3;"></i> <i class="ml-3 fa-xl fa-solid fa-forward-step mt-2" style="opacity:0.3;"></i> <i class="ml-4 fa-solid fa-play-circle" style="font-size:2.5em;"></i>
</div>
?end?}}
</div>
</div>
%end%}}
</div>
<div style="background:{{c!Bottom BG Colour (default #242424)!}}; border-radius:0 0 10px 10px;">
<ul class="nav nav-pills flex-column" style="height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
{{%Song List%
<li class="nav-item d-flex justify-content-between align-items-center my-3">
<a class="ml-1 nav-link {{?1st in Playlist?active?end?}} text-center" style="width:40px;" data-toggle="pill" href="#song-{{%Number in Playlist%}}">
{{%Number in Playlist%}}
</a>
<div class="container-fluid">
<div class="text-white" style="font-weight:600;">{{%Song Name%}}</div>
<div class="mt-0" style="font-size:0.85em;">{{%Artist Name%}}</div>
</div>
<div class="pr-3">{{%Song Playtime%}}</div>
</li>
%end%}}
</ul>
</div>
<div class="col-12 mt-1 pr-0 text-right">
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
</div>