Changes to groovescroll.pub.scroll.pub

+ 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

+ {

+ "id": "f3610fb9-863a-45a4-9047-69540081c266",

+ "object": "chat.completion",

+ "created": 1745868223,

+ "model": "deepseek-chat",

+ "choices": [

+ {

+ "index": 0,

+ "message": {

+ "role": "assistant",

+ "content": "Here's my proposal for a Spotify stats visualization app:\n\n---domain---\ngroovescroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://groovescroll.pub\nmetaTags\neditButton /edit.html\ntitle GrooveScroll | Your Spotify Stats Visualized\nstyle.css\n\nheader\n class hero\n nav\n div GrooveScroll\n class logo\n div\n class nav-links\n a Your Stats\n href #stats\n a Top Tracks\n href #tracks\n a Top Artists\n href #artists\n a Connect\n class cta-button\n href #connect\n div\n class hero-content\n h1 Visualize Your Music Journey\n p Discover your listening habits through beautiful interactive charts\n a Connect to Spotify\n class primary-button\n href #connect\nmain\n section\n id stats\n class stats-section\n h2 Your Listening Personality\n div\n class stats-grid\n div\n class stat-card\n div 🎧\n class stat-icon\n h3 Total Minutes\n p 0\n class stat-value\n p Loading...\n class stat-label\n div\n class stat-card\n div 🔥\n class stat-icon\n h3 Top Genre\n p -\n class stat-value\n p Your favorite sound\n class stat-label\n div\n class stat-card\n div 🕰️\n class stat-icon\n h3 Peak Hours\n p -\n class stat-value\n p When you listen most\n class stat-label\n div\n class stat-card\n div 🌈\n class stat-icon\n h3 Mood Spectrum\n p -\n class stat-value\n p Your audio vibe\n class stat-label\n section\n id tracks\n class tracks-section\n h2 Your Top Tracks\n div\n class tracks-container\n div\n class track-grid\n section\n id artists\n class artists-section\n h2 Your Top Artists\n div\n class artists-container\n div\n class artist-grid\n section\n id connect\n class connect-section\n h2 Connect Your Spotify\n p Unlock personalized music insights by connecting your account\n a Connect Now\n class primary-button\n id connect-button\nfooter\n div\n class footer-content\n div\n class footer-links\n a Privacy\n href /privacy\n a Terms\n href /terms\n a Contact\n href mailto:hello@groovescroll.pub\n p Music data provided by Spotify Web API\n---style.css---\n:root {\n --primary: #1DB954;\n --dark: #191414;\n --light: #FFFFFF;\n --gray: #F5F5F5;\n --text: #333333;\n --shadow: 0 4px 12px rgba(0,0,0,0.1);\n --radius: 12px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', system-ui, sans-serif;\n}\n\nbody {\n background-color: var(--gray);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader.hero {\n background: linear-gradient(135deg, var(--dark) 0%, #2A2A2A 100%);\n color: var(--light);\n padding: 2rem 0;\n text-align: center;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: var(--light);\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.cta-button {\n background-color: var(--primary);\n padding: 0.5rem 1.5rem;\n border-radius: 50px;\n font-weight: 600;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 4rem auto;\n padding: 0 2rem;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n}\n\n.primary-button {\n display: inline-block;\n background-color: var(--primary);\n color: var(--light);\n padding: 0.8rem 2rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 600;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.primary-button:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow);\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 4rem 2rem;\n}\n\nsection {\n margin-bottom: 6rem;\n}\n\nh2 {\n font-size: 2rem;\n margin-bottom: 2rem;\n text-align: center;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.stat-card {\n background-color: var(--light);\n padding: 2rem;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n text-align: center;\n transition: transform 0.3s;\n}\n\n.stat-card:hover {\n transform: translateY(-5px);\n}\n\n.stat-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.stat-value {\n font-size: 2rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: var(--primary);\n}\n\n.stat-label {\n color: #666;\n}\n\n.track-grid, .artist-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n}\n\n.track-card, .artist-card {\n background-color: var(--light);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n transition: transform 0.3s;\n}\n\n.track-card:hover, .artist-card:hover {\n transform: scale(1.03);\n}\n\n.track-cover, .artist-image {\n width: 100%;\n aspect-ratio: 1;\n object-fit: cover;\n}\n\n.track-info, .artist-info {\n padding: 1rem;\n}\n\n.track-name, .artist-name {\n font-weight: 600;\n margin-bottom: 0.5rem;\n}\n\n.track-artist, .artist-genre {\n font-size: 0.9rem;\n color: #666;\n}\n\n.connect-section {\n text-align: center;\n max-width: 600px;\n margin: 0 auto;\n}\n\n.connect-section p {\n margin-bottom: 2rem;\n}\n\nfooter {\n background-color: var(--dark);\n color: var(--light);\n padding: 3rem 0;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.footer-links {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n}\n\n.footer-links a {\n color: var(--light);\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.footer-links a:hover {\n color: var(--primary);\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .hero-content h1 {\n font-size: 2.2rem;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n \n .track-grid, .artist-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .nav-links {\n flex-wrap: wrap;\n justify-content: center;\n }\n \n .track-grid, .artist-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // DOM Elements\n const connectBtn = document.getElementById('connect-button');\n const statsValues = document.querySelectorAll('.stat-value');\n const trackGrid = document.querySelector('.track-grid');\n const artistGrid = document.querySelector('.artist-grid');\n \n // Spotify OAuth Configuration\n const clientId = 'YOUR_CLIENT_ID'; // Replace with your Spotify Client ID\n const redirectUri = window.location.href.includes('localhost') \n ? 'http://localhost:8000' \n : 'https://groovescroll.pub';\n const scopes = 'user-top-read user-read-recently-played';\n \n // Connect Button Event\n connectBtn.addEventListener('click', () => {\n window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes)}&show_dialog=true`;\n });\n \n // Check for access token in URL hash\n function checkForToken() {\n const hash = window.location.hash.substring(1);\n const params = new URLSearchParams(hash);\n const accessToken = params.get('access_token');\n \n if (accessToken) {\n // Hide connect section\n document.querySelector('.connect-section').style.display = 'none';\n \n // Fetch user data\n fetchUserData(accessToken);\n \n // Clear URL hash\n history.pushState(null, null, ' ');\n }\n }\n \n // Fetch user data from Spotify API\n async function fetchUserData(token) {\n try {\n // Fetch top tracks\n const tracksResponse = await fetch('https://api.spotify.com/v1/me/top/tracks?limit=6&time_range=short_term', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const tracksData = await tracksResponse.json();\n displayTopTracks(tracksData.items);\n \n // Fetch top artists\n const artistsResponse = await fetch('https://api.spotify.com/v1/me/top/artists?limit=6&time_range=short_term', {\n headers: { 'Authorization': `Bearer ${token}` }\n });\n const artistsData = await artistsResponse.json();\n displayTopArtists(artistsData.items);\n \n // Update stats (mock data for demo)\n updateStats();\n \n } catch (error) {\n console.error('Error fetching data:', error);\n }\n }\n \n // Display top tracks\n function displayTopTracks(tracks) {\n trackGrid.innerHTML = '';\n \n tracks.forEach(track => {\n const trackCard = document.createElement('div');\n trackCard.className = 'track-card';\n trackCard.innerHTML = `\n \n \n `;\n trackGrid.appendChild(trackCard);\n });\n }\n \n // Display top artists\n function displayTopArtists(artists) {\n artistGrid.innerHTML = '';\n \n artists.forEach(artist => {\n const artistCard = document.createElement('div');\n artistCard.className = 'artist-card';\n artistCard.innerHTML = `\n \n \n `;\n artistGrid.appendChild(artistCard);\n });\n }\n \n // Update stats (mock data for demo)\n function updateStats() {\n statsValues[0].textContent = '4,382';\n statsValues[1].textContent = 'Indie Pop';\n statsValues[2].textContent = '8-10 PM';\n statsValues[3].textContent = 'Energetic';\n }\n \n // Initialize\n checkForToken();\n \n // Add animation to stat cards\n const statCards = document.querySelectorAll('.stat-card');\n statCards.forEach((card, index) => {\n card.style.animationDelay = `${index * 0.1}s`;\n });\n});\n---end---"

+ },

+ "logprobs": null,

+ "finish_reason": "stop"

+ }

+ ],

+ "usage": {

+ "prompt_tokens": 780,

+ "completion_tokens": 2915,

+ "total_tokens": 3695,

+ "prompt_tokens_details": {

+ "cached_tokens": 0

+ },

+ "prompt_cache_hit_tokens": 0,

+ "prompt_cache_miss_tokens": 780

+ },

+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"

+ }

+ # groovescroll.pub.scroll.pub

+

+ Prompt: website

+ Agent: deepseek

+ Model: deepseek-chat

+

+ ## User prompt

+ Diseñar una aplicación web interactiva y creativa que se conecte a la API de Spotify para mostrar las canciones más escuchadas del usuario, estadísticas personalizadas, portadas de canciones de manera visualmente atractiva y herramientas interactivas que mejoren la experiencia musical.

+

+ ## System prompt

+ You are an expert web developer. Create a website based on this request: "Diseñar una aplicación web interactiva y creativa que se conecte a la API de Spotify para mostrar las canciones más escuchadas del usuario, estadísticas personalizadas, portadas de canciones de manera visualmente atractiva y herramientas interactivas que mejoren la experiencia musical."

+

+ Requirements:

+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)

+ - Create clean, semantic HTML5

+ - Make it mobile-responsive

+ - Follow modern best practices and accessibility guidelines

+ - Keep it simple but professional

+ - Use only relative links and no external resources

+ - Do not put a copyright symbol or all rights reserved in the footer.

+ - Make it beautiful. Dazzling. Advanced used of CSS.

+

+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

+

+ For example:

+

+ header

+ class hero

+ nav

+ div Scroll

+ class logo

+ div

+ class nav-links

+ a Features

+ href #features

+ a Examples

+ href #examples

+ a Edit

+ href edit.html

+ a GitHub

+ class cta-button

+ href https://github.com/breck7/scroll

+ div

+ class hero-content

+ h1 Write Better with Scroll

+ p The extendible markup language that makes source beautiful and compiles to anything

+ a Get Started

+ class primary-button

+ href https://hub.scroll.pub/

+ main

+ section

+ id features

+ class features

+ h2 Why Scroll?

+ div

+ class feature-grid

+ div

+ class feature-card

+ div ⚡

+ class feature-icon

+ h3 Simple Syntax

+ p Like Markdown, but more powerful. No parentheses needed.

+ div

+ class feature-card

+ div 🧩

+ class feature-icon

+ h3 Extendible

+ p Build your own custom parsers.

+ div

+ class feature-card

+ div 🎨

+ class feature-icon

+ h3 Beautiful Output

+ p Create stunning documents with minimal effort.

+ div

+ class feature-card

+ div 🚀

+ class feature-icon

+ h3 Fast & Light

+ p Built on the efficient PPS Stack.

+ section

+ id examples

+ class code-demo

+ h2 See It In Action

+ div

+ class code-container

+ pre

+ class code-example

+ div

+ class code-output

+ footer

+ div

+ class footer-content

+ div

+ class footer-links

+ a Documentation

+ href https://scroll.pub/tutorial.html

+ a Community

+ href https://www.reddit.com/r/WorldWideScroll/

+ a Blog

+ href https://scroll.pub/blog

+ p Started by Breck Yunits. Evolved by a community.

+ https://twitter.com/breckyunits Breck Yunits

+ https://github.com/breck7/scroll/graphs/contributors community

+

+

+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

+

+ ---domain---

+ (domainscroll.pub here)

+ ---index.scroll---

+ buildHtml

+ baseUrl https://(domainscroll.pub here)

+ metaTags

+ editButton /edit.html

+ title (Title here)

+ style.css

+

+ (body content here. no blank lines please.)

+

+ script.js

+ ---style.css---

+ (CSS content here)

+ ---script.js---

+ (JavaScript content here)

+ ---end---

+ document.addEventListener('DOMContentLoaded', () => {

+ // DOM Elements

+ const connectBtn = document.getElementById('connect-button');

+ const statsValues = document.querySelectorAll('.stat-value');

+ const trackGrid = document.querySelector('.track-grid');

+ const artistGrid = document.querySelector('.artist-grid');

+

+ // Spotify OAuth Configuration

+ const clientId = 'YOUR_CLIENT_ID'; // Replace with your Spotify Client ID

+ const redirectUri = window.location.href.includes('localhost')

+ ? 'http://localhost:8000'

+ : 'https://groovescroll.pub';

+ const scopes = 'user-top-read user-read-recently-played';

+

+ // Connect Button Event

+ connectBtn.addEventListener('click', () => {

+ window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes)}&show_dialog=true`;

+ });

+

+ // Check for access token in URL hash

+ function checkForToken() {

+ const hash = window.location.hash.substring(1);

+ const params = new URLSearchParams(hash);

+ const accessToken = params.get('access_token');

+

+ if (accessToken) {

+ // Hide connect section

+ document.querySelector('.connect-section').style.display = 'none';

+

+ // Fetch user data

+ fetchUserData(accessToken);

+

+ // Clear URL hash

+ history.pushState(null, null, ' ');

+ }

+ }

+

+ // Fetch user data from Spotify API

+ async function fetchUserData(token) {

+ try {

+ // Fetch top tracks

+ const tracksResponse = await fetch('https://api.spotify.com/v1/me/top/tracks?limit=6&time_range=short_term', {

+ headers: { 'Authorization': `Bearer ${token}` }

+ });

+ const tracksData = await tracksResponse.json();

+ displayTopTracks(tracksData.items);

+

+ // Fetch top artists

+ const artistsResponse = await fetch('https://api.spotify.com/v1/me/top/artists?limit=6&time_range=short_term', {

+ headers: { 'Authorization': `Bearer ${token}` }

+ });

+ const artistsData = await artistsResponse.json();

+ displayTopArtists(artistsData.items);

+

+ // Update stats (mock data for demo)

+ updateStats();

+

+ } catch (error) {

+ console.error('Error fetching data:', error);

+ }

+ }

+

+ // Display top tracks

+ function displayTopTracks(tracks) {

+ trackGrid.innerHTML = '';

+

+ tracks.forEach(track => {

+ const trackCard = document.createElement('div');

+ trackCard.className = 'track-card';

+ trackCard.innerHTML = `

+

+

+ `;

+ trackGrid.appendChild(trackCard);

+ });

+ }

+

+ // Display top artists

+ function displayTopArtists(artists) {

+ artistGrid.innerHTML = '';

+

+ artists.forEach(artist => {

+ const artistCard = document.createElement('div');

+ artistCard.className = 'artist-card';

+ artistCard.innerHTML = `

+

+

+ `;

+ artistGrid.appendChild(artistCard);

+ });

+ }

+

+ // Update stats (mock data for demo)

+ function updateStats() {

+ statsValues[0].textContent = '4,382';

+ statsValues[1].textContent = 'Indie Pop';

+ statsValues[2].textContent = '8-10 PM';

+ statsValues[3].textContent = 'Energetic';

+ }

+

+ // Initialize

+ checkForToken();

+

+ // Add animation to stat cards

+ const statCards = document.querySelectorAll('.stat-card');

+ statCards.forEach((card, index) => {

+ card.style.animationDelay = `${index * 0.1}s`;

+ });

+ });

+ :root {

+ --primary: #1DB954;

+ --dark: #191414;

+ --light: #FFFFFF;

+ --gray: #F5F5F5;

+ --text: #333333;

+ --shadow: 0 4px 12px rgba(0,0,0,0.1);

+ --radius: 12px;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ font-family: 'Segoe UI', system-ui, sans-serif;

+ }

+

+ body {

+ background-color: var(--gray);

+ color: var(--text);

+ line-height: 1.6;

+ }

+

+ header.hero {

+ background: linear-gradient(135deg, var(--dark) 0%, #2A2A2A 100%);

+ color: var(--light);

+ padding: 2rem 0;

+ text-align: center;

+ }

+

+ nav {

+ display: flex;

+ justify-content: space-between;

+ align-items: center;

+ max-width: 1200px;

+ margin: 0 auto;

+ padding: 0 2rem;

+ }

+

+ .logo {

+ font-size: 1.8rem;

+ font-weight: 700;

+ color: var(--primary);

+ }

+

+ .nav-links {

+ display: flex;

+ gap: 2rem;

+ }

+

+ .nav-links a {

+ color: var(--light);

+ text-decoration: none;

+ transition: color 0.3s;

+ }

+

+ .nav-links a:hover {

+ color: var(--primary);

+ }

+

+ .cta-button {

+ background-color: var(--primary);

+ padding: 0.5rem 1.5rem;

+ border-radius: 50px;

+ font-weight: 600;

+ }

+

+ .hero-content {

+ max-width: 800px;

+ margin: 4rem auto;

+ padding: 0 2rem;

+ }

+

+ .hero-content h1 {

+ font-size: 3rem;

+ margin-bottom: 1rem;

+ }

+

+ .hero-content p {

+ font-size: 1.2rem;

+ margin-bottom: 2rem;

+ opacity: 0.9;

+ }

+

+ .primary-button {

+ display: inline-block;

+ background-color: var(--primary);

+ color: var(--light);

+ padding: 0.8rem 2rem;

+ border-radius: 50px;

+ text-decoration: none;

+ font-weight: 600;

+ transition: transform 0.3s, box-shadow 0.3s;

+ }

+

+ .primary-button:hover {

+ transform: translateY(-2px);

+ box-shadow: var(--shadow);

+ }

+

+ main {

+ max-width: 1200px;

+ margin: 0 auto;

+ padding: 4rem 2rem;

+ }

+

+ section {

+ margin-bottom: 6rem;

+ }

+

+ h2 {

+ font-size: 2rem;

+ margin-bottom: 2rem;

+ text-align: center;

+ }

+

+ .stats-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+ gap: 2rem;

+ margin-top: 2rem;

+ }

+

+ .stat-card {

+ background-color: var(--light);

+ padding: 2rem;

+ border-radius: var(--radius);

+ box-shadow: var(--shadow);

+ text-align: center;

+ transition: transform 0.3s;

+ }

+

+ .stat-card:hover {

+ transform: translateY(-5px);

+ }

+

+ .stat-icon {

+ font-size: 2.5rem;

+ margin-bottom: 1rem;

+ }

+

+ .stat-value {

+ font-size: 2rem;

+ font-weight: 700;

+ margin-bottom: 0.5rem;

+ color: var(--primary);

+ }

+

+ .stat-label {

+ color: #666;

+ }

+

+ .track-grid, .artist-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

+ gap: 1.5rem;

+ margin-top: 2rem;

+ }

+

+ .track-card, .artist-card {

+ background-color: var(--light);

+ border-radius: var(--radius);

+ overflow: hidden;

+ box-shadow: var(--shadow);

+ transition: transform 0.3s;

+ }

+

+ .track-card:hover, .artist-card:hover {

+ transform: scale(1.03);

+ }

+

+ .track-cover, .artist-image {

+ width: 100%;

+ aspect-ratio: 1;

+ object-fit: cover;

+ }

+

+ .track-info, .artist-info {

+ padding: 1rem;

+ }

+

+ .track-name, .artist-name {

+ font-weight: 600;

+ margin-bottom: 0.5rem;

+ }

+

+ .track-artist, .artist-genre {

+ font-size: 0.9rem;

+ color: #666;

+ }

+

+ .connect-section {

+ text-align: center;

+ max-width: 600px;

+ margin: 0 auto;

+ }

+

+ .connect-section p {

+ margin-bottom: 2rem;

+ }

+

+ footer {

+ background-color: var(--dark);

+ color: var(--light);

+ padding: 3rem 0;

+ }

+

+ .footer-content {

+ max-width: 1200px;

+ margin: 0 auto;

+ padding: 0 2rem;

+ display: flex;

+ flex-direction: column;

+ align-items: center;

+ }

+

+ .footer-links {

+ display: flex;

+ gap: 2rem;

+ margin-bottom: 1.5rem;

+ }

+

+ .footer-links a {

+ color: var(--light);

+ text-decoration: none;

+ transition: color 0.3s;

+ }

+

+ .footer-links a:hover {

+ color: var(--primary);

+ }

+

+ @media (max-width: 768px) {

+ nav {

+ flex-direction: column;

+ gap: 1rem;

+ }

+

+ .hero-content h1 {

+ font-size: 2.2rem;

+ }

+

+ .stats-grid {

+ grid-template-columns: 1fr;

+ }

+

+ .track-grid, .artist-grid {

+ grid-template-columns: repeat(2, 1fr);

+ }

+ }

+

+ @media (max-width: 480px) {

+ .nav-links {

+ flex-wrap: wrap;

+ justify-content: center;

+ }

+

+ .track-grid, .artist-grid {

+ grid-template-columns: 1fr;

+ }

+ }