From 3cc7067613efbbdf3a097d439fb17325b7cc216e Mon Sep 17 00:00:00 2001
From: sivaramasastry <sivaramasastrypantula@gmail.com>
Date: Sat, 30 Aug 2025 22:28:06 +0530
Subject: [PATCH] feat: display each saved URL in a colored card with 7
 rotating backgrounds for improved readability and modern UI

---
 index.css  | 43 +++++++++++++++++++++++++++++++++++++++++++
 index.html |  3 +--
 index.js   | 16 +++++++++-------
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/index.css b/index.css
index 6445602..179e08b 100644
--- a/index.css
+++ b/index.css
@@ -1,3 +1,46 @@
+/* 7 background color classes for cards */
+.card-bg-1 { background: linear-gradient(135deg, #1a232b 80%, #193c3c 100%); }
+.card-bg-2 { background: linear-gradient(135deg, #2d1a2b 80%, #3c193c 100%); }
+.card-bg-3 { background: linear-gradient(135deg, #1a2b23 80%, #193c2b 100%); }
+.card-bg-4 { background: linear-gradient(135deg, #1a2330 80%, #193c5a 100%); }
+.card-bg-5 { background: linear-gradient(135deg, #232b1a 80%, #3c5a19 100%); }
+.card-bg-6 { background: linear-gradient(135deg, #2b231a 80%, #5a3c19 100%); }
+.card-bg-7 { background: linear-gradient(135deg, #1a1f2b 80%, #19205a 100%); }
+/* Card style for each saved URL */
+.leads-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-top: 24px;
+}
+
+ .url-card {
+    border: 1.5px solid #5fffc7;
+    border-radius: 14px;
+    box-shadow: 0 4px 18px 0 rgba(16,185,129,0.10), 0 1.5px 4px 0 rgba(0,0,0,0.10);
+    padding: 18px 22px;
+    margin: 0;
+    transition: box-shadow 0.22s, border-color 0.22s;
+    word-break: break-all;
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+}
+.url-card:hover {
+    box-shadow: 0 8px 32px 0 rgba(95,255,199,0.18), 0 2px 8px 0 rgba(0,0,0,0.13);
+    border-color: #10B981;
+}
+.url-card a {
+    color: #5fffc7;
+    text-decoration: none;
+    font-size: 1.08rem;
+    font-weight: 500;
+    transition: color 0.18s;
+}
+.url-card a:hover {
+    color: #10B981;
+    text-decoration: underline;
+}
 body {
     margin: 0;
     padding: 10px;
diff --git a/index.html b/index.html
index 87db6af..57e0637 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,7 @@
         <button id="input-btn">SAVE INPUT</button>
         <button id="tab-btn">SAVE TAB</button>
         <button id="delete-btn">DELETE ALL</button>
-        <ul id="ul-el">
-        </ul>
+    <div id="leads-container" class="leads-list"></div>
         <script src="index.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index bcd7fab..bc9359a 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,7 @@
 let myLeads = []
 const inputEl = document.getElementById("input-el")
 const inputBtn = document.getElementById("input-btn")
-const ulEl = document.getElementById("ul-el")
+const leadsContainer = document.getElementById("leads-container")
 const deleteBtn = document.getElementById("delete-btn")
 const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") )
 const tabBtn = document.getElementById("tab-btn")
@@ -20,17 +20,19 @@ tabBtn.addEventListener("click", function(){
 })
 
 function render(leads) {
-    let listItems = ""
+    let cards = "";
+    const colorCount = 7;
     for (let i = 0; i < leads.length; i++) {
-        listItems += `
-            <li>
+        const colorClass = `card-bg-${(i % colorCount) + 1}`;
+        cards += `
+            <div class="url-card ${colorClass}">
                 <a target='_blank' href='${leads[i]}'>
                     ${leads[i]}
                 </a>
-            </li>
-        `
+            </div>
+        `;
     }
-    ulEl.innerHTML = listItems
+    leadsContainer.innerHTML = cards;
 }
 
 deleteBtn.addEventListener("dblclick", function() {