khanirfan18 · shifa-23 · Aug 12, 2025
diff --git a/index.css b/index.css
@@ -1,44 +1,123 @@
+/* === Global Reset === */
 body {
     margin: 0;
-    padding: 10px;
-    font-family: Arial, Helvetica, sans-serif;
-    min-width: 400px;
-    background-color: #111827;
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #1a1a40, #3b0066);
+    color: #fff;
+    padding: 15px;
+    min-width: 300px;
+}
+
+/* === Header === */
+h1 {
+    font-size: 20px;
+    text-align: center;
+    font-weight: bold;
+    background: linear-gradient(90deg, #ffd700, #ff9d00);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 15px;
 }
 
-input {
+/* === Input Fields === */
+input, select {
     width: 100%;
     padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid whitesmoke;
-    margin-bottom: 4px;
+    margin: 6px 0;
+    border: none;
+    border-radius: 12px;
+    outline: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-size: 14px;
+    transition: 0.3s ease-in-out;
+}
+
+input:focus, select:focus {
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 10px #ffd700;
 }
 
+/* === Buttons === */
 button {
-    background:  #10B981;
-    color: white;
-    padding: 10px 20px;
-    border: 1px solid #065F46;
+    background: linear-gradient(90deg, #ff9d00, #ffd700);
+    color: #000;
     font-weight: bold;
+    padding: 10px;
+    margin: 6px 0;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    width: 100%;
+    transition: 0.3s;
 }
 
-#delete-btn {
-    background: white;
-    color:  #10B981;
+button:hover {
+    box-shadow: 0 0 15px #ffd700;
+    transform: scale(1.05);
 }
 
-ul {
-    margin-top: 20px;
-    list-style: none;
-    padding-left: 0;
+/* === Lead List === */
+.lead-category {
+    margin-top: 12px;
+    font-weight: bold;
+    font-size: 16px;
+    color: #ffd700;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    padding-bottom: 5px;
 }
 
-li {
-    margin-top: 5px;
+.lead-item {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 8px;
+    margin: 6px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: 0.3s;
 }
 
-a {
-    color:  #10B981;
+.lead-item:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
 }
 
+.lead-item a {
+    color: #ffd700;
+    text-decoration: none;
+    font-size: 14px;
+}
 
+.lead-item a:hover {
+    text-decoration: underline;
+}
+
+/* === Delete Button for Items === */
+.delete-btn {
+    background: transparent;
+    border: none;
+    color: #ff4d4d;
+    cursor: pointer;
+    font-size: 16px;
+    transition: 0.3s;
+}
+
+.delete-btn:hover {
+    transform: scale(1.3);
+}
+
+/* === Delete All Button Special === */
+#deleteAllBtn {
+    background: linear-gradient(90deg, #ff4d4d, #ff0000);
+    color: rgb(249, 249, 112);
+    font-weight: bold;
+}
+
+#deleteAllBtn:hover {
+    box-shadow: 0 0 15px #ff4d4d;
+}
+#category-filter{
+    background-color: gray;
+    color: yellow;
+}
diff --git a/index.html b/index.html
@@ -3,12 +3,18 @@
         <link rel="stylesheet" href="index.css">
     </head>
     <body>
-        <input type="text" id="input-el">
+        <input type="text" id="input-el" placeholder="Enter URL">
+        <input type="text" id="category-el" placeholder="Enter Category">
         <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>
+
+        <select id="category-filter">
+            <option value="All">All</option>
+        </select>
+
+        <ul id="ul-el"></ul>
+
         <script src="index.js"></script>
     </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,47 +1,102 @@
 let myLeads = []
 const inputEl = document.getElementById("input-el")
+const categoryEl = document.getElementById("category-el")
 const inputBtn = document.getElementById("input-btn")
 const ulEl = document.getElementById("ul-el")
 const deleteBtn = document.getElementById("delete-btn")
-const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") )
 const tabBtn = document.getElementById("tab-btn")
+const categoryFilter = document.getElementById("category-filter")
 
+// Load data & migrate if needed
+const leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads"))
 if (leadsFromLocalStorage) {
-    myLeads = leadsFromLocalStorage
+    myLeads = leadsFromLocalStorage.map(item =>
+        typeof item === "string"
+            ? { url: item, category: "Uncategorized" }
+            : item
+    )
+    localStorage.setItem("myLeads", JSON.stringify(myLeads))
+    populateCategoryFilter()
     render(myLeads)
 }
 
-tabBtn.addEventListener("click", function(){    
-    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
-        myLeads.push(tabs[0].url)
-        localStorage.setItem("myLeads", JSON.stringify(myLeads) )
+// Save current tab
+tabBtn.addEventListener("click", function () {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        const category = categoryEl.value.trim() || "Uncategorized"
+        myLeads.push({ url: tabs[0].url, category })
+        localStorage.setItem("myLeads", JSON.stringify(myLeads))
+        categoryEl.value = ""
+        populateCategoryFilter()
         render(myLeads)
     })
 })
 
-function render(leads) {
-    let listItems = ""
-    for (let i = 0; i < leads.length; i++) {
-        listItems += `
-            <li>
-                <a target='_blank' href='${leads[i]}'>
-                    ${leads[i]}
-                </a>
-            </li>
-        `
+// Save input URL
+inputBtn.addEventListener("click", function () {
+    const url = inputEl.value.trim()
+    const category = categoryEl.value.trim() || "Uncategorized"
+    if (url) {
+        myLeads.push({ url, category })
+        localStorage.setItem("myLeads", JSON.stringify(myLeads))
+        inputEl.value = ""
+        categoryEl.value = ""
+        populateCategoryFilter()
+        render(myLeads)
     }
-    ulEl.innerHTML = listItems
+})
+
+// Delete all (FIXED)
+deleteBtn.addEventListener("dblclick", function () {
+    localStorage.removeItem("myLeads") // Clear saved data
+    myLeads = [] // Reset memory
+    populateCategoryFilter() // Reset dropdown to All
+    render([]) // Instantly clear UI
+})
+
+// Populate category filter dropdown
+function populateCategoryFilter() {
+    categoryFilter.innerHTML = `<option value="All">All</option>`
+    const categories = [...new Set(myLeads.map(lead => lead.category))]
+    categories.forEach(cat => {
+        let opt = document.createElement("option")
+        opt.value = cat
+        opt.textContent = cat
+        categoryFilter.appendChild(opt)
+    })
 }
 
-deleteBtn.addEventListener("dblclick", function() {
-    localStorage.clear()
-    myLeads = []
-    render(myLeads)
+// Filter change
+categoryFilter.addEventListener("change", function () {
+    if (categoryFilter.value === "All") {
+        render(myLeads)
+    } else {
+        render(myLeads.filter(lead => lead.category === categoryFilter.value))
+    }
 })
 
-inputBtn.addEventListener("click", function() {
-    myLeads.push(inputEl.value)
-    inputEl.value = ""
-    localStorage.setItem("myLeads", JSON.stringify(myLeads) )
-    render(myLeads)
-})
+// Render grouped by category
+function render(leads) {
+    ulEl.innerHTML = ""
+    const grouped = leads.reduce((acc, lead) => {
+        if (!acc[lead.category]) acc[lead.category] = []
+        acc[lead.category].push(lead)
+        return acc
+    }, {})
+
+    for (let category in grouped) {
+        const heading = document.createElement("h3")
+        heading.textContent = category
+        ulEl.appendChild(heading)
+
+        grouped[category].forEach(lead => {
+            const li = document.createElement("li")
+            const a = document.createElement("a")
+            a.target = "_blank"
+            a.href = lead.url
+            a.textContent = lead.url
+            li.appendChild(a)
+            ulEl.appendChild(li)
+        })
+    }
+}