MULTIPLE PLAYLISTS - SCROLL VERS

<!--
MULTIPLE PLAYLISTS - SCROLL VERS
HTML BY @NEBULASBOX ON TOYHOU.SE

EDITING INFORMATION :

    TO CHANGE BOX SIZE :
        AUTO ADJUST :
            - CHANGE PX SIZE IN THE FIRST DIV TO WHATEVER PERCENTAGE YOU WANT ((EX : "style="width:400px;" -> "style="width:75%;"))
            - DONE !
        CUSTOM SIZE :
            - CHANGE PX SIZE IN THE FIRST DIV TO WHATEVER PX SIZE YOU WANT ((EX : "style="width:400px;" -> "style="width:500px;"))
            - DONE !

    TO ADD AUDIO :
        - DOWNLOAD YOUR AUDIO FROM YOUTUBE USING A CONVERTER
        - UPLOAD AUDIO TO A HOSTING SITE ((EX : DISCORD))
        - COPY LINK TO THE DIRECT FILE ((NOT A MESSAGE LINK, THE FILE LINK {EX: https://cdn.discordapp.com/attachments/667169408300482590/813104297667592192/MARETU_-_SIU.mp3}))
        - REPLACE THE "#" IN THE CODE WITH THE AUDIO LINK ((EX : src="#" -> src="https://cdn.discordapp.com/attachments/667169408300482590/813104297667592192/MARETU_-_SIU.mp3"))
        - DONE !

    TO ADD NEW PLAYLIST SECTION :
        - COPY THE CODE FOR A PREVIOUS SECTION
        - PASTE THE CODE UNDERNEATH THE END OF THE LAST PLAYLIST
        - REPLACE THE ID WITH A NEW NUMBER ((EX : id="playlist03" -> id="playlist04"))  !! NO SPACES AND NO CAPS !!
        - REPLACE THE HREF LINK WITH THE NEW ID ((EX : href="#playlist03" -> href="#playlist04"))
        - DONE !

    TO MAKE ALL LISTS VISIBLE AT ONCE :
        - REMOVE THE DATAPARENT ((data-parent="#menu"))
        - DONE !

    TO MAKE IT SO COLORS ARE CUSTOM :
        BACKGROUND :
            - REMOVE THE "bg-muted" FROM THE CLASS AREA IN THE FIRST DIV ((EX : <div class="card card-block bg-muted" style="width:400px;"> -> <div class="card card-block" style="width:400px;">))
            - ADD "background: #{hex code}" TO THE STYLE AREA IN THE FIRST DIV ((EX : <div class="card card-block" style="width:400px;"> -> <div class="card card-block" style="width:400px; background: #181d25;">))
            - DONE !
        TEXT :
            - REMOVE ALL OF THE "class="text-primary" FROM THE CODE ((EX : <p class="text-primary"> -> <p> ,  <a data-toggle="collapse" href="#menu" style="text-decoration:none;" class="text-primary"> -> <a data-toggle="collapse" href="#menu" style="text-decoration:none;">))
            - ADD "color: #{hex code};" IN THE STYLE AREA ((EX : <p> -> <p style="color: #5aff54;"> , <a data-toggle="collapse" href="#menu" style="text-decoration:none;"> -> <a data-toggle="collapse" href="#menu" style="text-decoration:none; color: #5aff54;">))
            - DONE !
        DIVIDER :
            - ADD #{hex code} AFTER "solid" IN THE STYLE AREA ((EX : style="border:1px solid;" -> style="border:1px solid #303845;"))
            - DONE !

USEFUL LINKS :
    AUDIO CONVERTERS
        - https://ytmp3.cc/en13/
        - https://x2convert.com/en41

    HEX CODE GENERATORS
        - https://html-color-codes.info/colors-from-image/#
        - https://htmlcolorcodes.com/color-picker/
        - https://imagecolorpicker.com/color-code/59423f

    PREVIEW SITE ((TO SEE IF CODE IS HOW YOU WANT IT))
        - https://th.circlejourney.net/#

-->

<div class="card card-block bg-muted" style="width:400px; float: left;">
    <div style="font-size:1.125em;" class="text-center">
        <a data-toggle="collapse" href="#menu" style="text-decoration:none;">
            <i class="fad fa-mp3-player"></i> My Playlists</a><div class="collapse" id="menu">
                <ul class="side-nav list-unstyled">
                    <li class="sidebar-li-links">
                        <div class="card w-75 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                        <a data-toggle="collapse" href="#playlist01" style="text-decoration:none;" class="text-primary"><!--START OF PLAYLIST 01-->
                            <i class="fad fa-list-music"></i> Playlist 01</a><div class="collapse" id="playlist01" data-parent="#menu">
                             <ul class="side-nav list-unstyled">
                                <li class="sidebar-li-links" style="height: 100px; overflow: auto;">
                                    <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                </li>
                            </ul>
                        </a></div>
                        <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                        <!--END OF PLAYLIST 01-->
                        <a data-toggle="collapse" href="#playlist02" style="text-decoration:none;" class="text-primary"><!--START OF PLAYLIST 02-->
                            <i class="fad fa-list-music"></i> Playlist 02</a><div class="collapse" id="playlist02" data-parent="#menu">
                             <ul class="side-nav list-unstyled">
                                <li class="sidebar-li-links" style="height: 100px; overflow: auto;">
                                    <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                </li>
                            </ul>
                        </a></div>
                        <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                        <!--END OF PLAYLIST 02-->
                        <a data-toggle="collapse" href="#playlist03" style="text-decoration:none;" class="text-primary"><!--START OF PLAYLIST 03-->
                            <i class="fad fa-list-music"></i> Playlist 03</a><div class="collapse" id="playlist03" data-parent="#menu">
                             <ul class="side-nav list-unstyled">
                                <li class="sidebar-li-links" style="height: 100px; overflow: auto;">
                                    <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                    <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
                                </li>
                            </ul>
                        </a></div>
                        <div class="card w-50 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
                        <!--END OF PLAYLIST 03-->
                    </li>
                </ul>
        </a></div>
    </div>
</div>