<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣾⣿⣿⠔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣐⠲⣿⣿⣿⠖⢂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡀⣸⡣⣀⣿⢇⣟⠀⡠⣆⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠈⠻⣿⣷⣽⠮⣟⣵⣿⠟⠉⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⢀⣼⣿⣯⡿⣿⣽⣏⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡧⠀⠀⠀⠀⠀⣴⠈⠿⣟⣿⡯⣿⣿⡿⠁⢆⠀⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢷⡀⡀⠀⣀⣴⣯⣤⢀⠈⣿⣿⣿⠃⣀⣴⣿⣦⣀⠀⠀⢀⣼⠅⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠚⢽⣿⣧⣈⣠⣭⠿⡿⡏⢠⣿⠇⣿⡄⣸⡿⠻⣅⠀⣁⣴⣿⡷⠖⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣀⣄⣀⣦⣼⣿⣛⠿⣾⣏⣀⣤⣺⡿⣽⣿⣮⠹⣅⣀⣐⡿⣿⡛⢟⣽⣇⣤⢀⣠⣀⠀⠀⠀⠀⠀
⠒⠒⠛⠻⢿⣿⠿⣿⣿⣧⣿⣿⣷⣷⣶⣾⣷⣜⣿⣿⣿⢿⣴⣷⣶⣶⣾⣯⣝⢭⣵⣿⣿⣳⡶⠶⠒⠒⠒⠂
⠀⠀⠀⠀⠀⠀⠀⣀⣸⣿⣿⣿⣻⣿⠛⠛⢿⣿⣶⡛⣵⣾⡟⠛⠻⣿⡟⣿⡷⣾⡇⠈⡀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠉⣿⠿⡏⠁⠉⠓⣧⣶⡟⠛⣿⣷⣿⠍⢻⣰⣄⠛⠉⠙⠻⡿⣿⠉⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢠⠏⠀⠀⠀⠙⠻⣿⡿⠉⢀⣿⣿⣿⣀⠉⠿⣷⠞⠉⠀⠀⠀⠹⡆⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢘⡀⠀⠀⠀⠀⠀⠳⠀⣶⣿⣿⣭⣿⣿⣠⠓⠟⠀⠀⠀⠀⠀⢀⠇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣻⣿⣿⢧⣿⣿⢿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣹⣿⡿⣏⢾⣿⣏⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢄⢀⢀⣴⣿⣿⣿⣯⣿⢿⣿⣆⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⢹⡏⠉⣿⣿⣾⠉⢹⡏⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣰⣿⣼⣿⣆⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⢴⣿⣿⣿⡦⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⢀⣿⣿⣿⡁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢩⣿⣿⣿⡍⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⣿⣷⡿⠁⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣿⣿⣿⠆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⢻⣿⡟⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

        ✦ 𝐓𝐇𝐈𝐒 𝐈𝐒 𝐌𝐘 𝐃𝐎𝐌𝐀𝐈𝐍 ✦

        this site is a personal project and was built by me.
        besides from images, all code and layout was created
        by me. 

        please do not:
        ─ copy this site's code or layout
        ─ rip the CSS / HTML / JS for your own site
        ─ recreate this design and pass it off as your own
        ─ take large portions of this site and simply rearrange them
          into something you can call "inspired" by someone else

        ────────────────────────────────────────────────

        ────────────────────────────────────────────────

        this little cathedral took time to build.
        please leave the stones where you found them.

        ♱ @divvine.com
-->


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="divvinify">
<meta name="twitter:description" content="i am still so fucking tired">
<meta name="twitter:image" content="https://divvinify.neocities.org">
<link rel="shortcut icon" href= "https://64.media.tumblr.com/e5f2eea52af50417c15572c7dd2fab63/81851f775e93a0c0-98/s250x400/0a449b497a31fb0b49fb646488c13e3247e20e4c.pnj">

<title>divvinify</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<!-- INTRO -->

<section id="intro">

    <div class="intro-wrapper">

        <p>OC LIBRARY</p>

        <h1>DIVVINIFY</h1>

        <span>loading music player...</span>

    </div>

</section>

<!-- TOAST -->

<div id="toast"></div>

<!-- CREATE PLAYLIST MODAL -->

<div id="playlistModal" class="modal hidden">

    <div class="modal-content">

        <h2>Create Playlist</h2>

        <p>This will eventually create a new OC playlist.</p>

        <label>Name</label>
        <input placeholder="Character name">

        <label>Universe</label>
        <input placeholder="Fandom">

        <button id="closeModal">
            Close
        </button>

    </div>

</div>

<!-- SETTINGS DRAWER -->

<aside id="settingsPanel">

    <div class="settings-header">

        <h2>Seraphim.</h2>

        <span>@divvine.com</span>

    </div>

    <div class="settings-group">

        <p>library</p>

        <span id="settingsPlaylistCount">13 playlists</span>

    </div>

    <div class="settings-group">

        <p>Theme</p>

        <span>White</span>

    </div>

    <div class="settings-group">

        <p>Status</p>

        <span>Version 1.1</span>

    </div>

</aside>

<main id="spotify">

<!-- SIDEBAR -->

<aside id="sidebar">

    <div class="sidebar-nav">

        <button id="homeButton" class="nav active" aria-label="Home">
            <img src="assets/ui/icons/home.svg" alt="Home">
        </button>

        <button id="searchButton" class="nav" aria-label="Search">
            <img src="assets/ui/icons/search.svg" alt="Search">
        </button>

        <button id="libraryButton" class="nav" aria-label="Library">
            <img src="assets/ui/icons/library.svg" alt="Library">
        </button>

    </div>

    <div class="sidebar-title">
        <span>Your Library</span>
    </div>

    <div id="sidebarPlaylists">
      <div class="side-item">
        <img src="assets/sidebar/daimonas.jpg" alt="">
         <div class="info">
           <strong>Daimonas</strong>
           <br>
           <small>Obey Me!</small>
          </div>
      </div>
      <div class="side-item">
        <img src="assets/sidebar/satoru.jpg" alt="">
          <div class=info>
            <strong>Satoru</strong>
            <br>
            <small>Blue Exorcist</small>
          </div>
      </div>
      <div class="side-item">
      <img src="assets/sidebar/anton-chekov.jpg" alt=""><div class="info"><strong>Anton Chekov</strong><br><small>Bungou Stray Dogs</small></div></div><div class="side-item"><img src="assets/sidebar/yuusona.jpg" alt=""><div class="info"><strong>Yuusona</strong><br><small>Twisted Wonderland • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/mcsona.jpg" alt=""><div class="info"><strong>MCsona</strong><br><small>Obey Me! • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/bsdsona.jpg" alt=""><div class="info"><strong>BSDSona</strong><br><small>Bungou Stray Dogs • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/edgar.jpg" alt=""><div class="info"><strong>Edgar</strong><br><small>Black Butler • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/uriel.jpg" alt=""><div class="info"><strong>Uriel</strong><br><small>Black Butler</small></div></div><div class="side-item"><img src="assets/sidebar/yan-luo-jun.jpg" alt=""><div class="info"><strong>Yan Luo Jun (阎落君)</strong><br><small>Heaven Official's Blessing</small></div></div><div class="side-item"><img src="assets/sidebar/emile.jpg" alt=""><div class="info"><strong>Émile</strong><br><small>Twisted Wonderland</small></div></div><div class="side-item"><img src="assets/sidebar/ambrose.jpg" alt=""><div class="info"><strong>Ambrose</strong><br><small>Twisted Wonderland</small></div></div><div class="side-item"><img src="assets/sidebar/pahnsona.jpg" alt=""><div class="info"><strong>PahnSona</strong><br><small>Mr Villain's Day Off • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/tiansona.jpg" alt=""><div class="info"><strong>TiānSona</strong><br><small>Heaven Official's Blessing • Self Insert</small></div></div><div class="side-item"><img src="assets/sidebar/shengsona.jpg" alt=""><div class="info"><strong>ShèngSona</strong><br><small>All Saints Street • Self Insert</small></div></div></div>

</aside>

    <!-- MAIN CONTENT -->

    <section id="content">

        <header id="topbar">

            <div class="top-left">

                <button>←</button>

                <button>→</button>

            </div>

            <input
                id="searchInput"
                class="search"
                placeholder="Search for fandoms and characters...">

<div class="top-right">

    <button id="plusButton">
        <img src="assets/ui/icons/plus.svg" alt="Add Playlist">
    </button>

    <button id="settingsButton">
        <img src="assets/ui/icons/settings.svg" alt="Settings">
    </button>

</div>

        </header>

        <!-- HERO -->

        <section id="hero">

            <img class="hero-bg" src="assets/hero/hero.png">

            <div class="hero-overlay"></div>

            <div class="hero-content">

                <img src="assets/profile/avatar.jpg" class="hero-avatar">

                <div>

                    <span class="hero-small">
                        PUBLIC PROFILE
                    </span>

                    <h1>Seraphim.</h1>

                    <div class="hero-meta">

                        <span>@divvine.com</span>

                        <span>•</span>

                        <span id="settingsPlaylistCount">13 playlists</span>

                        <span>•</span>

                        <span>Last Updated . . . 28 August</span>

                    </div>

                    <p>
                        YO WHOS YOUR HOUSEKEEPER WHAT YOU KEEP IN YOUR HOUSE???
                    </p>

                </div>

            </div>

        </section>

        <!-- FILTER CHIPS -->

        <section id="chips">

            <button class="chip active" data-filter="all">
                ALL
            </button>

            <button class="chip" data-filter="obeyme">
                OBEY ME!
            </button>
            
            <button class="chip" data-filter="blueexorcist">
               BLUE EXORCIST
            </button>

            <button class="chip" data-filter="twst">
                TWISTED WONDERLAND
            </button>

            <button class="chip" data-filter="bungou">
                BUNGOU STRAY DOGS
            </button>

            <button class="chip" data-filter="blackbutler">
                BLACK BUTLER
            </button>

            <button class="chip" data-filter="tgcf">
                HEAVEN OFFICIAL'S BLESSING
            </button>

            <button class="chip" data-filter="allsaints">
                ALL SAINTS STREET
            </button>

            <button class="chip" data-filter="mrvillain">
                MR VILLAIN'S DAY OFF
            </button>

            <button class="chip" data-filter="selfinsert">
                SELF INSERT
            </button>

        </section>

        <!-- PLAYLIST TABLE -->

        <section class="library-section">

            <div class="section-title">

                <h2>Playlists</h2>

                <span id="playlistCount">
                    13 playlists
                </span>

            </div>

            <div class="playlist-head">

                <span>#</span>

                <span>Title</span>

                <span>Last Updated</span>

            </div>

            <div id="playlistContainer"></div>

            <div id="emptyState">

                No playlists found.

            </div>

        </section>

    </section>

</main>

<footer id="player">

    <div class="player-left">

        <img src="assets/profile/avatar.jpg">

        <div>

            <small>CURRENTLY VIEWING</small>

            <h4>divvinify.com</h4>

        </div>

    </div>

    <div class="player-middle">

        <div class="controls">

            <button>⏮</button>

            <button class="pause">▌▌</button>

            <button>⏭</button>

        </div>

        <div class="progress-bar">

            <div class="progress"></div>

        </div>

    </div>

    <div class="player-right">

        

    </div>

</footer>

<script src="js/playlists.js"></script>
<script src="js/app.js"></script>

</body>
</html>