<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Spinna Music - Web player : Music for the selected few</title>

<link rel="icon"
type="image/x-icon"
href="favicon.ico">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
<style>
:root{
    --spotify-green:#1DB954;
    --spotify-black:#121212;
    --spotify-dark:#181818;
    --spotify-light:#282828;
    --spotify-hover:#2A2A2A;
    --spotify-border:#333333;
    --spotify-text:#FFFFFF;
    --spotify-dim:#B3B3B3;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:var(--spotify-black);
    color:var(--spotify-text);
}

body{
    display:flex;
    flex-direction:column;
}

/* APP LAYOUT */

.app{
    display:grid;
    grid-template-columns:1fr 320px;
    flex:1;
    min-height:0;
    gap:10px;
    padding:10px;
    overflow:hidden;
}

/* MAIN COLUMN */
/* WHOLE COLUMN SCROLLS */

.main{
    background:var(--spotify-dark);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
}

/* RIGHT PANEL */

.right-panel{
    background:var(--spotify-dark);
    border-radius:12px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:18px;
}

/* HEADER */

.site-header{
    height:74px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 30px;
    border-bottom:1px solid #242424;
    background:#101010;
    flex-shrink:0;
}

.site-header-title{
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:-.4px;
    line-height:1;
}

.site-header-title span{
    color:var(--spotify-green);
}

.site-header-tagline{
    margin-top:6px;
    color:var(--spotify-dim);
    font-size:.82rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.site-header-subtitle{
    margin-left:auto;
    color:var(--spotify-dim);
    font-size:.9rem;
}

/* HERO WITH 3D FLIP ARCHITECTURE */
.hero{
    padding:36px 30px 28px 30px;
    background:linear-gradient(
        to bottom,
        rgba(29,185,84,.45),
        rgba(24,24,24,1)
    );
    flex-shrink:0;
}

.hero-top{
    display:flex;
    align-items:center;
    gap:22px;
}

.hero-logo{
    width:112px;
    height:112px;
    perspective: 600px;
    flex-shrink:0;
    box-shadow:0 16px 35px rgba(0,0,0,.35);
    border-radius:18px;
}

.hero-logo-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px;
}

.hero-logo.flipped .hero-logo-inner {
    transform: rotateY(180deg);
}

.hero-logo-front,
.hero-logo-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
}

.hero-logo-back {
    transform: rotateY(180deg);
}

.hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-label{
    color:var(--spotify-dim);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.hero h1{
    margin:0;
    font-size:3.4rem;
    font-weight:900;
    letter-spacing:-1.6px;
    line-height:1;
}

.album-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
    color:var(--spotify-dim);
    font-size:.95rem;
}

.album-meta strong{
    color:#fff;
}

.album-dot{
    color:var(--spotify-dim);
}

/* TRACKS */

.track-header{
    display:grid;
    grid-template-columns:60px 1fr 120px;
    padding:0 25px 12px 25px;
    color:var(--spotify-dim);
    font-size:.8rem;
    border-bottom:1px solid #2a2a2a;
    margin-bottom:8px;
    flex-shrink:0;
}

.track-list{
    padding:0 10px 20px 10px;
}

.track{
    display:grid;
    grid-template-columns:60px 1fr 120px;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    border-radius:8px;
    cursor:pointer;
    transition:.15s;
}

.track:hover{
    background:var(--spotify-hover);
}

.track.active{
    background:#1DB95422;
}

.track-number{
    color:var(--spotify-dim);
    text-align:center;
    font-size:.9rem;
}

.track-main{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.track-cover{
    width:44px;
    height:44px;
    border-radius:6px;
    overflow:hidden;
    background:#000;
    flex-shrink:0;
}

.track-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.track-info{
    min-width:0;
}

.track-title{
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.track-artist{
    color:var(--spotify-dim);
    font-size:.9rem;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.track-duration{
    text-align:right;
    color:var(--spotify-dim);
    font-size:.9rem;
    padding-right:10px;
}

/* FOOTER */

.album-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 28px 22px 28px;
    border-top:1px solid #242424;
    color:var(--spotify-dim);
    font-size:.8rem;
    line-height:1.5;
    flex-wrap:wrap;
}

.album-footer-left,
.album-footer-right{
    opacity:.75;
}

/* TRACK LOADING */

.track-loading{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:rgba(18,18,18,.82);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:18px;
    z-index:200;
}

.track-loading.active{
    display:flex;
}

.track-loading-spinner{
    width:52px;
    height:52px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.08);
    border-top-color:var(--spotify-green);
    animation:spin 1s linear infinite;
}

.track-loading-text{
    color:#fff;
    font-size:1rem;
    font-weight:600;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}
/* RIGHT PANEL - BASE CARD STYLE */

.artist-card{
    width:100%;
    border:0;
    text-align:left;
    cursor:pointer;
    background:var(--spotify-light);
    color:var(--spotify-text);
    border-radius:16px;
    padding:18px;
    transition:.15s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.artist-card:hover{
    background:var(--spotify-hover);
    transform:translateY(-2px);
}

/* SPOTIFY STYLE FULL-BLEED VARIANT */

.artist-card-bleed {
    aspect-ratio: 1 / 1.15;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.artist-card-bleed:hover {
    background: transparent;
}

.artist-card-bleed .artist-card-label{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    color:#fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin-bottom:0;
}

.artist-card-bleed .artist-card-image{
    position: absolute;
    inset: 0;
    width:100%;
    height:100%;
    z-index: 1;
}

.artist-card-bleed .artist-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: transform 0.3s ease;
}

.artist-card-bleed:hover .artist-card-image img {
    transform: scale(1.03);
}

/* Text overlay at the bottom with a dark blend gradient */
.artist-card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 40px 16px 16px 16px;
    background: linear-gradient(to top, rgba(24,24,24,1) 0%, rgba(24,24,24,0.85) 45%, rgba(24,24,24,0) 100%);
    display: flex;
    flex-direction: column;
}

/* SHARED ELEMENT STYLES */

.artist-card-label{
    color:var(--spotify-dim);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.artist-card-title{
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.artist-card-preview{
    color:var(--spotify-dim);
    font-size:.88rem;
    line-height:1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artist-card-more{
    margin-top:8px;
    color:#fff;
    font-size:.8rem;
    font-weight:700;
}

/* MODALS */

.artist-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}

.artist-modal.active{
    display:flex;
}

/* Glassmorphic overlay for cohesive dark-blend matching */
.artist-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Modal Surface */
.artist-modal-content {
    position: relative;
    z-index: 2;
    width: min(720px, 90vw);
    max-height: 85vh;
    background: #181818;
    border-radius: 16px;
    border: 1px solid #282828;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Structured layout card inside the modal */
.artist-modal-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Content Container with defensive padding */
.artist-modal-text {
    padding: 32px;
}

.artist-modal-text h2 {
    margin: 0 0 16px 0;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--spotify-text);
}

.artist-modal-text p {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--spotify-dim);
}

.artist-modal-text p:last-child {
    margin-bottom: 0;
}

/* Uniform Label Typography matching your sidebar themes */
.art-label {
    color: var(--spotify-green);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Image bounding constraints */
#artistModalImage {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #282828;
}

/* Clean UI Close Anchor matching Spotify design standards */
.art-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.art-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Mobile responsive alignment overrides */
@media(max-width: 768px) {
    .artist-modal-text {
        padding: 22px;
    }
    .artist-modal-text h2 {
        font-size: 1.5rem;
    }
}

/* PLAYER */
.player{
    height:auto;
    /* min-height:125px; */
    background:#000;
    border-top:1px solid #222;
    display:flex;
    flex-direction:column;
    padding:12px 25px 12px 25px;
    gap:14px;
    flex-shrink:0;
}

.player-row-top{
    width:100%;
}

.player-row-bottom{
    display:grid;
    grid-template-columns:320px 1fr 320px;
    align-items:center;
    width:100%;
    gap:20px;
}

.player-left{
    display:flex;
    align-items:center;
    gap:14px;
    overflow:hidden;
}

.player-left-cover{
    width:52px;
    height:52px;
    perspective: 400px;
    flex-shrink:0;
    cursor:pointer;
    position:relative;
}

.player-cover-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.player-left-cover.flipped .player-cover-inner {
    transform: rotateY(180deg);
}

.player-cover-front,
.player-cover-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}

.player-cover-back {
    transform: rotateY(180deg);
}

.player-left-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.player-track{
    min-width:0;
}

.player-track-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-track-title{
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.track-action-btn {
    background: none;
    border: none;
    color: var(--spotify-dim);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    transition: color 0.15s;
}

.track-action-btn:hover {
    color: #fff;
}

.track-action-btn.active {
    color: var(--spotify-green) !important;
}

.player-track-artist{
    font-size:.85rem;
    color:var(--spotify-dim);
    margin-top:4px;
}

.player-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.controls{
    display:flex;
    align-items:center;
    gap:22px;
}

.controls button{
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:1.15rem;
}

.controls button:hover{
    color:var(--spotify-green);
}

.play-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:var(--spotify-green)!important;
    color:#000!important;
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wave-row{
    display:flex;
    align-items:center;
    width:100%;
    gap:14px;
}

.time{
    width:45px;
    text-align:center;
    font-size:.78rem;
    color:var(--spotify-dim);
    font-variant-numeric: tabular-nums;
}

#waveform{
    flex:1;
}

.player-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
}

.player-right button{
    background:none;
    border:none;
    color:var(--spotify-dim);
    cursor:pointer;
    font-size:1.05rem;
}

.player-right button:hover{
    color:#fff;
}

#downloadBtn{
    display:none;
 }

/* MODAL */

.art-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}

.art-modal.active{
    display:flex;
}

.art-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(8px);
}

.art-modal-content{
    position:relative;
    z-index:2;
    width:min(1400px,92vw);
    max-height:90vh;
    overflow:auto;
}

.art-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.art-panel{
    background:#181818;
    border-radius:18px;
    padding:22px;
}

.art-panel img{
    width:100%;
    border-radius:14px;
    display:block;
    background:#000;
}

.art-close-btn{
    position:fixed;
    top:24px;
    right:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:1.2rem;
    cursor:pointer;
}

/* MOBILE */
@media(max-width:768px){

    html,
    body{
        overflow:auto;
    }

    .app{
        grid-template-columns:1fr;
        overflow:visible;
    }

    .right-panel{
        display:none;
    }

    .player{
        padding:16px 14px;
        gap:10px;
    }
/* 
    .player-row-top {
        display: none !important;
    } */
    
    .player-row-bottom{
        display: flex !important;
             align-items: center !important;
        justify-content: space-between  !important;
        width: 100% !important;
        gap: 10px !important;
    } 

    .player-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: start !important;
        width: 100% !important;
        height: 52px !important;
        gap: 14px !important;
    }

    .player-left-cover {
        width: 52px !important;
        height: 52px !important;
    }

    .player-track {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 52px !important;
        text-align: left !important;
    }


    .player-track-title {
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .player-track-artist {
        line-height: 1.2 !important;
        margin: 0 !important;
        margin-top: 2px !important;
    }

    .player-center {
        width: auto !important;
    }

    .player-right{
        display:none !important;
    }

    .track-action-btn {
        display: none;
    }
/* 
    #prevBtn, #nextBtn {
        display: none;
    } */

    .site-header-subtitle{
        display:none;
    }

    .hero h1{
        font-size:2.25rem;
    }

    .hero-logo{
        width:82px;
        height:82px;
    }

    .track-cover {
        display: none;
    }

    .track-header,
    .track{
        grid-template-columns:42px 1fr 72px;
    }

    .art-grid{
        grid-template-columns:1fr;
    }

    .album-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        padding-bottom:26px;
    }
}

/* tablet*/
@media(min-width:768px) and (max-width: 1000px){

       html,
    body{
        overflow:auto;
    }

    .app{
        grid-template-columns:1fr;
        overflow:visible;
    }

    .right-panel{
        display:none;
    }

    .player{
        padding:16px 14px;
        gap:14px;
    }

    .player-row-top {
        display: block !important;
    }
    
    .player-row-bottom{
         display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    width:100%;
    gap:20px;} 

    .player-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: start !important;
        width: 100% !important;
        height: 52px !important;
        gap: 14px !important;
    }

    .player-left-cover {
        width: 52px !important;
        height: 52px !important;
    }

    .player-track {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 52px !important;
        text-align: left !important;
    }


    .player-track-title {
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .player-track-artist {
        line-height: 1.2 !important;
        margin: 0 !important;
        margin-top: 2px !important;
    }

    .player-center {
        width: auto !important;

    }
/* 
    .player-right{
        display:none !important;
    } */

    .site-header-subtitle{
        display:none;
    }

    .hero h1{
        font-size:2.25rem;
    }

    .hero-logo{
        width:82px;
        height:82px;
    }

    .track-cover {
        display: none;
    }

    .track-header,
    .track{
        grid-template-columns:42px 1fr 72px;
    }

    .art-grid{
        grid-template-columns:1fr;
    }

    .album-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        padding-bottom:26px;
    }
}

.volume-control{
    display:flex;
    align-items:center;
    gap:10px;
}

#volumeSlider{
    width:110px;
    accent-color:var(--spotify-green);
    cursor:pointer;
}

.production-card{
    margin-top:18px;
}

.production-preview{
    color:var(--spotify-dim);
    font-size:.95rem;
    line-height:1.55;
}

.production-modal-card{
    grid-template-columns:1fr;
    max-width:820px;
    margin:0 auto;
}

.production-text{
    max-width:720px;
}
</style>

</head>

<body>

<div class="app">

    <div class="main">

        <header class="site-header">

            <div>

                <div class="site-header-title">
                    Spinna <span>Music</span>
                </div>

                <div class="site-header-tagline"
                     id="tagline">

                    Loading your grooves...

                </div>

            </div>

            <div class="site-header-subtitle">
                Private demo streaming
            </div>

        </header>

        <div class="hero">

            <div class="hero-top">

                <div class="hero-logo" id="heroCoverButton">
                    <div class="hero-logo-inner">
                        <div class="hero-logo-front">
                            <img src="front.png" id="heroCoverFrontImg" alt="">
                        </div>

                        <div class="hero-logo-back">
                            <img src="back.png" id="heroCoverBackImg" alt="">
                        </div>
                    </div>
                </div>

                <div>

                    <div class="hero-label">
                        Album
                    </div>

                    <h1>Vol. 1 (Demo)</h1>

                    <div class="album-meta">

                        <strong>[Insert project name]</strong>

                        <span class="album-dot">•</span>

                        <span id="albumYear">2026</span>

                        <span class="album-dot">•</span>

                        <span id="albumTrackCount">0 tracks</span>

                        <span class="album-dot">•</span>

                        <span id="albumRuntime">0 min</span>

                    </div>

                </div>

            </div>

        </div>

        <div class="track-header">

            <div>#</div>

            <div>TITLE</div>

            <div style="text-align:right;padding-right:10px;">

                <i class="fa-regular fa-clock"></i>

            </div>

        </div>

        <div class="track-list"
             id="catalog"></div>

        <div class="album-footer">

            <div class="album-footer-left">

                © 2026 Spinna Music.
                All rights reserved.

            </div>

            <div class="album-footer-right"
                 id="albumFooterDate">

                Last updated...

            </div>

        </div>

        <div class="track-loading"
             id="trackLoading">

            <div class="track-loading-spinner"></div>

            <div class="track-loading-text">
                Loading track...
            </div>

        </div>

    </div>

<div class="right-panel">

    <button class="artist-card artist-card-bleed"
            id="artistCardButton"
            type="button">

        <div class="artist-card-label">
            About the artist
        </div>

        <div class="artist-card-image">
            <img src="artist.png"
                 id="artistImage"
                 alt="Artist image">
        </div>

        <div class="artist-card-content-overlay">
            <div class="artist-card-title"
                 id="artistName">
                [Insert project name]
            </div>

            <div class="artist-card-preview"
                 id="artistPreview">
                Forcing a sound that sits between grit and atmosphere, [Insert project name] delivers biting riffs,
                expansive textures, and soaring emotionally charged leads...
            </div>

            <div class="artist-card-more">
                Click to read more
            </div>
        </div>

    </button>

    <button class="artist-card production-card"
            id="productionCardButton"
            type="button">

        <div class="artist-card-label">
            Production Notes
        </div>

        <div class="production-preview">
            Recorded during the late 1990s, the foundation of these tracks was built using a blend of early digital tools and tracker-based production techniques...
        </div>

        <div class="artist-card-more">
            Click to read more
        </div>

    </button>
</div></div>


<div class="player">

    <div class="player-row-top">
        <div class="wave-row">

            <div class="time"
                 id="time">
                0:00
            </div>

            <div id="waveform"></div>

            <div class="time"
                 id="duration">
                0:00
            </div>

        </div>
    </div>

    <div class="player-row-bottom">
        
        <div class="player-left">

            <div class="player-left-cover"
                 id="playerCoverButton">
                <div class="player-cover-inner">
                    <div class="player-cover-front">
                        <img src="front.png" id="playerCoverFrontImg" alt="">
                    </div>
                    <div class="player-cover-back">
                        <img src="back.png" id="playerCoverBackImg" alt="">
                    </div>
                </div>
            </div>

            <div class="player-track">
                
                <div class="player-track-title-row">
                    
                    <div class="player-track-title"
                         id="playerTitle">
                        Nothing Playing
                    </div>  

                </div>

                <div class="player-track-artist"
                     id="playerArtist">
                    Select a track
                </div>

            </div>

        </div>

        <div class="player-center">

            <div class="controls">

                    <button class="track-action-btn" 
                            id="trackShuffleBtn" 
                            type="button" 
                            title="Toggle Shuffle">
                        <i class="fa-solid fa-shuffle"></i>
                    </button>

                <button id="prevBtn"
                        type="button">
                    <i class="fa-solid fa-backward-step"></i>
                </button>

                <button class="play-btn"
                        id="playBtn"
                        type="button">
                    <i class="fa-solid fa-play"
                       id="playIcon"></i>
                </button>

                <button id="nextBtn"
                        type="button">
                    <i class="fa-solid fa-forward-step"></i>
                </button>

                <button class="track-action-btn" 
                            id="trackLoopBtn" 
                            type="button" 
                            title="Toggle Loop">
                        <i class="fa-solid fa-arrows-rotate"></i>
                    </button>

            </div>

        </div>

        <div class="player-right">

             <button id="downloadBtn"
                    type="button">
                <i class="fa-solid fa-download"></i>
            </button>

            <div class="volume-control">

                <button id="muteBtn"
                        type="button">
                    <i class="fa-solid fa-volume-high"
                       id="volumeIcon"></i>
                </button>

                <input id="volumeSlider"
                       type="range"
                       min="0"
                       max="100"
                       value="85"
                       step="1"
                       aria-label="Volume">

            </div>

        </div>
        
    </div>

</div>

<div class="artist-modal"
     id="artistModal">

    <div class="artist-modal-backdrop"
         onclick="closeArtistModal()"></div>

    <div class="artist-modal-content">

        <button class="art-close-btn"
                onclick="closeArtistModal()"
                type="button">

            <i class="fa-solid fa-xmark"></i>

        </button>

        <div class="artist-modal-card">

            <img src="artist.png"
                 id="artistModalImage"
                 alt="Artist image">

            <div class="artist-modal-text">

                <div class="art-label">
                    About the artist
                </div>

                <h2 id="artistModalName">
                    Yet unnamed project
                </h2>

                <p>
                    Forging a sound that sits between grit and atmosphere, this project delivers a powerful mix of biting riffs, expansive textures, and soaring, emotionally charged leads. The music balances raw energy with careful craftsmanship—each track unfolding with intention, tension, and release.
                </p>

                <p>
                    Drawing from classic rock roots while embracing a more modern, expansive edge, it carves out a sonic identity that feels both familiar and strikingly original. Driving rhythms, immersive ambience, and expressive guitar work come together to create a sound that is as heavy as it is evocative.
                </p>

                <p>
                    Never shy to push boundaries, it blends melody with distortion and restraint with explosive intensity. The result is a dynamic listening experience that lingers long after the final note fades.
                </p>

            </div>

        </div>

    </div>

</div>

<div class="artist-modal"
     id="productionModal">

    <div class="artist-modal-backdrop"
         onclick="closeProductionModal()"></div>

    <div class="artist-modal-content">

        <button class="art-close-btn"
                onclick="closeProductionModal()"
                type="button">

            <i class="fa-solid fa-xmark"></i>

        </button>

        <div class="artist-modal-card production-modal-card">

            <div class="artist-modal-text production-text">

                <div class="art-label">
                    Production Notes
                </div>

                <h2>
                    Late 90s Foundations
                </h2>

                <p>
                    Recorded during the late 1990s, the foundation of these tracks was built using a blend of early digital tools and tracker-based production techniques. Guitars were recorded in Cool Edit Pro, while additional instruments and sequencing were created in Impulse Tracker.
                </p>

                <p>
                    Final tracker renders were produced using the legendary Magic Mushroom’s ModPlug Tracker (“magicfish”) WAV rendering process before being brought into Reaper for full mixing and arrangement.
                </p>

                <p>
                    The mixes intentionally lean on stock plugins and straightforward processing, with iZotope Ozone used on the mix bus for final mastering and cohesion.
                </p>

                <p>
                    Some early placeholder lyrics were generated with the help of OpenAI's ChatGPT, using only song titles and themes as inspiration. Later, Suno was used to replace temporary placeholder instruments with vocal performances, merging late-90s production methods with modern AI-assisted experimentation.
                </p>

            </div>

        </div>

    </div>

</div>

<div class="art-modal"
     id="artModal">

    <div class="art-modal-backdrop"
         onclick="closeArtModal()"></div>

    <div class="art-modal-content">

        <button class="art-close-btn"
                onclick="closeArtModal()"
                type="button">

            <i class="fa-solid fa-xmark"></i>

        </button>

        <div class="art-grid">

            <div class="art-panel">

                <div class="art-label">
                    Front Cover
                </div>

                <img id="modalFrontCover"
                     src="front.png"
                     alt="Front Cover">

            </div>

            <div class="art-panel">

                <div class="art-label">
                    Back Cover
                </div>

                <img id="modalBackCover"
                     src="back.png"
                     alt="Back Cover">

            </div>

        </div>

    </div>

</div>

<script>

const LOGO_PATH = "logo.png";
const FRONT_COVER_PATH = "front.png";
const BACK_COVER_PATH = "back.png";
const MP3_FOLDER = "/mp3";
const REFRESH_INTERVAL = 300000;
const ALBUM_YEAR = "2026";

const PLAYER_ART_ROTATE_INTERVAL = 5000;
const HERO_ART_ROTATE_INTERVAL = 8000;

const SNAPPY_TAGLINES = [
    "Where every beat finds a home.",
    "Serving grooves and basslines.",
    "Metadata mastered, rhythm ready.",
    "The official spin of the server.",
    "High fidelity, higher energy."
];

let tracks = [];
let currentTrack = null;
let wavesurfer = null;
let isTransitioning = false;

let playerVolume =
parseFloat(localStorage.getItem("spinna_volume") || "0.85");

let lastPlayerVolume =
playerVolume > 0 ? playerVolume : 0.85;

let isShuffle =
localStorage.getItem("spinna_shuffle") === "true";

let isLoop = 
localStorage.getItem("spinna_loop") === "true";

function applyVolume(){

    if(wavesurfer){
        wavesurfer.setVolume(playerVolume);
    }

    document.getElementById("volumeSlider").value =
    Math.round(playerVolume * 100);

    document.getElementById("volumeIcon").className =
    playerVolume === 0
    ? "fa-solid fa-volume-xmark"
    : playerVolume < 0.5
        ? "fa-solid fa-volume-low"
        : "fa-solid fa-volume-high";

    localStorage.setItem(
        "spinna_volume",
        playerVolume.toString()
    );
}

function updateModifierUI(){
    const inlineShuffle = document.getElementById("trackShuffleBtn");
    const loopBtn = document.getElementById("trackLoopBtn");

    if(inlineShuffle) inlineShuffle.classList.toggle("active", isShuffle);
    if(loopBtn) loopBtn.classList.toggle("active", isLoop);
}

const formatTime = (sec) => {

    if (!sec || isNaN(sec)) return "0:00";

    const s = Math.floor(sec);

    return `${Math.floor(s / 60)}:${(s % 60)
        .toString()
        .padStart(2, "0")}`;
};

const formatRuntime = (seconds) => {

    if (!seconds || isNaN(seconds)) return "0 min";

    const totalMinutes = Math.round(seconds / 60);

    if (totalMinutes < 60) {
        return `${totalMinutes} min`;
    }

    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;

    if (minutes === 0) {
        return `${hours} hr`;
    }

    return `${hours} hr ${minutes} min`;
};

function parseDuration(timeStr){

    if(!timeStr) return 0;

    const parts = timeStr.split(":").reverse();

    let seconds = 0;

    if(parts[0]) seconds += parseInt(parts[0], 10);
    if(parts[1]) seconds += parseInt(parts[1], 10) * 60;
    if(parts[2]) seconds += parseInt(parts[2], 10) * 3600;

    return seconds;
}

function showTrackLoading(){

    document.getElementById("trackLoading")
    .classList.add("active");
}

function hideTrackLoading(){

    document.getElementById("trackLoading")
    .classList.remove("active");
}

function updateAlbumInfo(){

    const totalSeconds =
    tracks.reduce(
        (sum, track) => sum + (track.duration || 0),
        0
    );

    document.getElementById("albumYear").innerText =
    ALBUM_YEAR;

    document.getElementById("albumTrackCount").innerText =
    tracks.length === 1
    ? "1 track"
    : `${tracks.length} tracks`;

    document.getElementById("albumRuntime").innerText =
    formatRuntime(totalSeconds);

    if(tracks.length){

        const latestTrackDate =
        tracks
            .map(t => new Date(t.dateModified))
            .sort((a, b) => b - a)[0];

        const formattedDate =
        latestTrackDate.toLocaleDateString(
            undefined,
            {
                year:"numeric",
                month:"long",
                day:"numeric"
            }
        );

        document.getElementById("albumFooterDate")
        .innerText =
        `Last updated ${formattedDate}`;
    }
}

function initWaveSurfer(){

    if(wavesurfer) return;

    wavesurfer = WaveSurfer.create({

        container:"#waveform",
        waveColor:"#555555",
        progressColor:"#1DB954",
        cursorColor:"#FFFFFF",
        height:42,
        barWidth:2,
        barGap:2,
        barRadius:4,
        normalize:true,
        backend:"WebAudio"
    });

applyVolume();

    wavesurfer.on("timeupdate", (t)=>{

        document.getElementById("time").innerText =
        formatTime(t);
    });

    wavesurfer.on("ready", ()=>{

        hideTrackLoading();

        document.getElementById("duration").innerText =
        formatTime(wavesurfer.getDuration());

        updatePlayButton();

        if(isTransitioning){

            wavesurfer.play()
            .catch(e => console.log(e));

            isTransitioning = false;
        }
    });

    wavesurfer.on("error", ()=>{

        hideTrackLoading();
    });

    wavesurfer.on("finish", ()=>{

        // FIXED INTEGRATION ACTION: Updates metadata layer text nodes during loop resets 
        if(isLoop && currentTrack){
            wavesurfer.setTime(0);
            updatePlayerUI(currentTrack);
            wavesurfer.play().catch(e => console.log(e));
        } else {
            playNextTrack();
        }
    });

    wavesurfer.on("play", updatePlayButton);

    wavesurfer.on("pause", updatePlayButton);
}

function updatePlayButton(){

    const isPlaying =
    wavesurfer?.isPlaying();

    document.getElementById("playIcon").className =
    isPlaying
    ? "fa-solid fa-pause"
    : "fa-solid fa-play";
}

function updatePlayerUI(track){

    if(!track) return;

    document.getElementById("playerTitle").innerText =
    track.title || track.file || "Unknown Track";

    document.getElementById("playerArtist").innerText =
    track.artist || "Unknown Artist";

    document.getElementById("playerCoverFrontImg").src = track.coverPath || FRONT_COVER_PATH;
    document.getElementById("playerCoverBackImg").src = BACK_COVER_PATH;

    document.getElementById("heroCoverFrontImg").src = track.coverPath || FRONT_COVER_PATH;
    document.getElementById("heroCoverBackImg").src = BACK_COVER_PATH;
}

function openArtModal(){

    document.getElementById("modalFrontCover").src =
    currentTrack?.coverPath || FRONT_COVER_PATH;

    document.getElementById("modalBackCover").src =
    BACK_COVER_PATH;

    document.getElementById("artModal")
    .classList.add("active");
}

function closeArtModal(){

    document.getElementById("artModal")
    .classList.remove("active");
}

window.playById = (id)=>{

    const t =
    tracks.find(x => x.id === id);

    if(!t) return;

    showTrackLoading();

    initWaveSurfer();

    isTransitioning = true;

    currentTrack = t;

    document.getElementById("playerCoverButton").classList.remove("flipped");
    document.getElementById("heroCoverButton").classList.remove("flipped");

    updatePlayerUI(t);

    renderCatalog();

    wavesurfer.pause();

    wavesurfer.setTime(0);

    setTimeout(()=>{

        wavesurfer.load(t.url);

    },100);
};

function playNextTrack(){

    if(!tracks.length) return;

    const currIdx =
    tracks.findIndex(
        t => t.id === currentTrack?.id
    );

    let nextIdx =
    isShuffle
    ? Math.floor(Math.random() * tracks.length)
    : currIdx + 1;

    if(nextIdx === currIdx && tracks.length > 1){

        nextIdx =
        (nextIdx + 1) % tracks.length;
    }

    if(nextIdx >= 0 && nextIdx < tracks.length){

        window.playById(tracks[nextIdx].id);
    }
}

function playPrevTrack(){

    if(wavesurfer &&
       wavesurfer.getCurrentTime() > 3){

        wavesurfer.setTime(0);

        return;
    }

    const currIdx =
    tracks.findIndex(
        t => t.id === currentTrack?.id
    );

    if(currIdx > 0){

        window.playById(tracks[currIdx - 1].id);
    }
}

async function refreshLibrary(isInitialLoad = false){

    try{

        const resp =
        await fetch(
            `${MP3_FOLDER}/index.json?v=${Date.now()}`
        );

        const serverTracks =
        await resp.json();

        tracks =
        serverTracks.map((t, i)=>({

            id:"t" + i,
            file:t.file,
            trackNo:t.trackNo,
            title:t.title,
            artist:t.artist,
            album:t.album,
            duration:parseDuration(t.duration),
            url:t.url,
            coverPath:t.coverPath,
            dateModified:t.dateModified
        }));

        renderCatalog();

        updateAlbumInfo();

        if(isInitialLoad){

            document.getElementById("tagline").innerText =
            SNAPPY_TAGLINES[
                Math.floor(
                    Math.random() *
                    SNAPPY_TAGLINES.length
                )
            ];
        }

    }catch(e){

        console.warn(
            "Background sync failed",
            e
        );
    }
}

function renderCatalog(){

    const container =
    document.getElementById("catalog");

    if(!container) return;

    container.innerHTML =
    tracks.map(t=>{

        const hasTrack =
        t.trackNo && t.trackNo < 999;

        return `

        <div class="track
             ${currentTrack?.id === t.id ? "active" : ""}"
             onclick="window.playById('${t.id}')">

            <div class="track-number">
                ${hasTrack ? t.trackNo : ""}
            </div>

            <div class="track-main">

                <div class="track-cover">

                    <img src="${t.coverPath || FRONT_COVER_PATH}" alt="">

                </div>

                <div class="track-info">

                    <div class="track-title">
                        ${t.title}
                    </div>

                    <div class="track-artist">
                        ${t.artist || "Unknown Artist"}
                    </div>

                </div>

            </div>

            <div class="track-duration">
                ${formatTime(t.duration)}
            </div>

        </div>

        `;

    }).join("");
}

document.getElementById("playBtn").onclick = ()=>{

    initWaveSurfer();

    if(!currentTrack){

        if(tracks.length){

            window.playById(tracks[0].id);
        }

        return;
    }

    wavesurfer.playPause();
};

document.getElementById("nextBtn").onclick =
playNextTrack;

document.getElementById("prevBtn").onclick =
playPrevTrack;

document.getElementById("trackShuffleBtn").onclick = function(){
    isShuffle = !isShuffle;
    localStorage.setItem("spinna_shuffle", isShuffle);
    updateModifierUI();
};


document.getElementById("trackLoopBtn").onclick = function(){
    isLoop = !isLoop;
    localStorage.setItem("spinna_loop", isLoop);
    updateModifierUI();
};

document.getElementById("downloadBtn").onclick = ()=>{

    if(!currentTrack) return;

    const a =
    document.createElement("a");

    a.href =
    currentTrack.url;

    a.download =
    currentTrack.file;

    a.click();
};
// --- MODAL CLICK HANDLERS ---

// Open Artist Modal from Right Panel Card
const artistCardButton = document.getElementById("artistCardButton");
if(artistCardButton){
    artistCardButton.addEventListener("click", openArtistModal);
}

// Open Production Notes Modal from Right Panel Card
const productionCardButton = document.getElementById("productionCardButton");
if(productionCardButton){
    productionCardButton.addEventListener("click", openProductionModal);
}

// Open Artwork View Modal from Player Cover
const playerCoverButton = document.getElementById("playerCoverButton");
if(playerCoverButton){
    playerCoverButton.addEventListener("click", openArtModal);
}

// Core Modal Toggle Logic
function openArtistModal(){
    document.getElementById("artistModal").classList.add("active");
}

function closeArtistModal(){
    document.getElementById("artistModal").classList.remove("active");
}

function openProductionModal(){
    document.getElementById("productionModal").classList.add("active");
}

function closeProductionModal(){
    document.getElementById("productionModal").classList.remove("active");
}

// Bind close event dynamically to the backdrops & cross icons to bypass old inline HTML onClick limits
document.querySelectorAll('#artistModal .artist-modal-backdrop, #artistModal .art-close-btn').forEach(btn => {
    btn.addEventListener('click', closeArtistModal);
});

document.querySelectorAll('#productionModal .artist-modal-backdrop, #productionModal .art-close-btn').forEach(btn => {
    btn.addEventListener('click', closeProductionModal);
});


+66+6+66
3+6


function openArtistModal(){

    document.getElementById("artistModal")
    .classList.add("active");
}

function closeArtistModal(){

    document.getElementById("artistModal")
    .classList.remove("active");
}

document.addEventListener("keydown", (e)=>{

    if(e.key === "Escape"){

        closeArtModal();
        closeArtistModal();
        closeProductionModal();
    }
});

refreshLibrary(true).then(()=>{
    updateModifierUI();
});

setInterval(()=>{

    refreshLibrary(false);

}, REFRESH_INTERVAL);

setInterval(() => {
    if (wavesurfer && wavesurfer.isPlaying() && currentTrack) {
        document.getElementById("playerCoverButton").classList.toggle("flipped");
    }
}, PLAYER_ART_ROTATE_INTERVAL);

setInterval(() => {
    if (wavesurfer && wavesurfer.isPlaying() && currentTrack) {
        document.getElementById("heroCoverButton").classList.toggle("flipped");
    }
}, HERO_ART_ROTATE_INTERVAL);

document.getElementById("volumeSlider").addEventListener("input", (e)=>{

    playerVolume =
    parseInt(e.target.value, 10) / 100;

    if(playerVolume > 0){
        lastPlayerVolume = playerVolume;
    }

    applyVolume();
});

document.getElementById("muteBtn").addEventListener("click", ()=>{

    if(playerVolume > 0){

        lastPlayerVolume = playerVolume;
        playerVolume = 0;

    }else{

        playerVolume = lastPlayerVolume || 0.85;
    }

    applyVolume();
});

function openProductionModal(){

    document.getElementById("productionModal")
    .classList.add("active");
}

function closeProductionModal(){

    document.getElementById("productionModal")
    .classList.remove("active");
}

</script>

</body>
</html>