From 014401dfd22e498f4075b934a7168d80af2dfa75 Mon Sep 17 00:00:00 2001 From: shifa-23 Date: Tue, 12 Aug 2025 14:07:02 +0530 Subject: [PATCH] feat: updated web --- index.css | 125 +++++++++++++++++++++++++++++++++++++++++++---------- index.html | 14 ++++-- index.js | 109 ++++++++++++++++++++++++++++++++++------------ 3 files changed, 194 insertions(+), 54 deletions(-) diff --git a/index.css b/index.css index 6445602..0f29121 100644 --- 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 index 87db6af..d0c5cda 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,18 @@ - + + - + + + + + - \ No newline at end of file + diff --git a/index.js b/index.js index bcd7fab..7616556 100644 --- 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 += ` -
  • - - ${leads[i]} - -
    • - ` +// 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 = `` + 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) -}) \ No newline at end of file +// 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) + }) + } +}