buildHtml
baseUrl https://groovescroll.pub
metaTags
editButton /edit.html
title GrooveScroll | Your Spotify Stats Visualized
style.css

header
 class hero
 nav
  div GrooveScroll
   class logo
  div
   class nav-links
   a Your Stats
    href #stats
   a Top Tracks
    href #tracks
   a Top Artists
    href #artists
   a Connect
    class cta-button
    href #connect
 div
  class hero-content
  h1 Visualize Your Music Journey
  p Discover your listening habits through beautiful interactive charts
  a Connect to Spotify
   class primary-button
   href #connect
main
 section
  id stats
  class stats-section
  h2 Your Listening Personality
  div
   class stats-grid
   div
    class stat-card
    div 🎧
     class stat-icon
    h3 Total Minutes
    p 0
     class stat-value
    p Loading...
     class stat-label
   div
    class stat-card
    div 🔥
     class stat-icon
    h3 Top Genre
    p -
     class stat-value
    p Your favorite sound
     class stat-label
   div
    class stat-card
    div 🕰️
     class stat-icon
    h3 Peak Hours
    p -
     class stat-value
    p When you listen most
     class stat-label
   div
    class stat-card
    div 🌈
     class stat-icon
    h3 Mood Spectrum
    p -
     class stat-value
    p Your audio vibe
     class stat-label
 section
  id tracks
  class tracks-section
  h2 Your Top Tracks
  div
   class tracks-container
  div
   class track-grid
 section
  id artists
  class artists-section
  h2 Your Top Artists
  div
   class artists-container
  div
   class artist-grid
 section
  id connect
  class connect-section
  h2 Connect Your Spotify
  p Unlock personalized music insights by connecting your account
  a Connect Now
   class primary-button
   id connect-button
footer
 div
  class footer-content
  div
   class footer-links
   a Privacy
    href /privacy
   a Terms
    href /terms
   a Contact
    href mailto:hello@groovescroll.pub
  p Music data provided by Spotify Web API