From 4baf23d8ad81d690ef2a7fad3a5a898f202a8fad Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Thu, 8 Jan 2026 20:02:11 +0900
Subject: [PATCH] feat: Add card background color distinction by status -
 Completed: green gradient - Error: red gradient - Cancelled: gray with
 reduced opacity - Downloading: blue tint - Extracting: purple tint

---
 info.yaml                                     |  2 +-
 .../gommi_downloader_manager_queue_list.html  | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/info.yaml b/info.yaml
index 1ad6cea..5c9e087 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,6 +1,6 @@
 title: "GDM"
 package_name: gommi_downloader_manager
-version: '0.2.21'
+version: '0.2.22'
 description: FlaskFarm 범용 다운로더 큐 - YouTube, 애니24, 링크애니, Anilife 지원
 developer: projectdx
 home: https://gitea.yommi.duckdns.org/projectdx/gommi_downloader_manager
diff --git a/templates/gommi_downloader_manager_queue_list.html b/templates/gommi_downloader_manager_queue_list.html
index 529efc6..f4d668b 100644
--- a/templates/gommi_downloader_manager_queue_list.html
+++ b/templates/gommi_downloader_manager_queue_list.html
@@ -226,6 +226,29 @@
         background: rgba(30, 41, 59, 0.85);
         box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
     }
+    
+    /* Card Status Background Colors */
+    .dl-card.status-completed {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(30, 41, 59, 0.95));
+        border-color: rgba(16, 185, 129, 0.3);
+    }
+    .dl-card.status-error {
+        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(30, 41, 59, 0.95));
+        border-color: rgba(239, 68, 68, 0.3);
+    }
+    .dl-card.status-cancelled {
+        background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(30, 41, 59, 0.95));
+        border-color: rgba(107, 114, 128, 0.3);
+        opacity: 0.7;
+    }
+    .dl-card.status-downloading {
+        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(30, 41, 59, 0.95));
+        border-color: rgba(59, 130, 246, 0.25);
+    }
+    .dl-card.status-extracting {
+        background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(30, 41, 59, 0.95));
+        border-color: rgba(168, 85, 247, 0.25);
+    }
 
     /* ID & Meta Row */
     .dl-meta {
@@ -856,7 +879,7 @@
         const sourceStyle = sourceColors[source.toLowerCase()] || sourceColors['auto'];
         
         return `
-            <div class="dl-card" id="card_${item.id}" onclick="toggleCardDetail(this, event)">
+            <div class="dl-card ${statusClass}" id="card_${item.id}" onclick="toggleCardDetail(this, event)">
                 <div class="dl-card-header">
                     <div class="dl-header-left">
                         <input type="checkbox" class="dl-select-checkbox" data-id="${item.id}" onclick="event.stopPropagation(); updateSelectedCount();">