From 7821d4cba503a2dada21df9057f466d6c5f9eaf6 Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Tue, 30 Sep 2025 13:58:02 -0700
Subject: [PATCH] beatport progress

---
 webui/static/script.js | 15 ++++++++++++++-
 webui/static/style.css | 13 ++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index bbe7fa24..92875ccd 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -19885,7 +19885,7 @@ function populateBeatportTop10Releases(releases) {
 
     releases.forEach((release, index) => {
         releasesHtml += `
-            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}">
+            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
                 <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
                 <div class="beatport-releases-top10-card-artwork">
                     ${release.image_url ?
@@ -19904,6 +19904,19 @@ function populateBeatportTop10Releases(releases) {
 
     releasesHtml += '</div>';
     container.innerHTML = releasesHtml;
+
+    // Set background images for cards
+    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
+    cards.forEach(card => {
+        const bgImage = card.getAttribute('data-bg-image');
+        if (bgImage) {
+            // Transform image URL from 95x95 to 500x500 for higher quality background
+            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
+            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
+            card.style.backgroundSize = 'cover';
+            card.style.backgroundPosition = 'center';
+        }
+    });
 }
 
 /**
diff --git a/webui/static/style.css b/webui/static/style.css
index b1b4ac5d..25e18832 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -12537,7 +12537,7 @@ body {
 
 /* Single column container for releases */
 .beatport-releases-top10-container {
-    max-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
 }
 
@@ -12561,7 +12561,7 @@ body {
 /* Track containers with grid layout for releases */
 .beatport-releases-top10-tracks {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
     gap: 20px;
 }
 
@@ -12689,7 +12689,7 @@ body {
 
 .beatport-releases-top10-card-label {
     font-size: 13px;
-    color: rgba(138, 43, 226, 0.95);
+    color: white;
     font-weight: 700;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12698,8 +12698,15 @@ body {
     letter-spacing: 0.8px;
     max-width: 100%;
     width: 100%;
+    transition: .5s;
 }
 
+.beatport-releases-top10-card:hover .beatport-releases-top10-card-label{
+    color: rgba(138, 43, 226, 0.95);
+    transition: .5s;
+}
+
+
 /* Loading states for releases */
 .beatport-releases-top10-loading {
     display: flex;