diff --git a/popup.js b/popup.js index 01ff7cd..fa9121e 100644 --- a/popup.js +++ b/popup.js @@ -13,17 +13,20 @@ document.addEventListener('DOMContentLoaded', () => { } function updateUI(enabled) { - toggleAdBlockerInput.checked = enabled; + toggleAdBlockerInput.checked = enabled; statusText.textContent = enabled ? 'Blocker is ON' : 'Blocker is OFF'; + statusText.style.color = enabled ? '#00ff00' : '#ff0000'; } toggleAdBlockerInput.addEventListener('change', () => { - const isEnabled = toggleAdBlockerInput.checked; - toggleAdBlocker(isEnabled); + const isEnabled = toggleAdBlockerInput.checked; + updateUI(isEnabled); // Immediately update UI + toggleAdBlocker(isEnabled); }); chrome.storage.local.get('adBlockerEnabled', (data) => { - const adBlockerEnabled = data.adBlockerEnabled || false; + const adBlockerEnabled = data.adBlockerEnabled || false; + toggleAdBlockerInput.checked = adBlockerEnabled; // Set the initial state of the toggle updateUI(adBlockerEnabled); }); }); diff --git a/style.css b/style.css index 477d48d..4966e52 100644 --- a/style.css +++ b/style.css @@ -1,33 +1,40 @@ body { margin: 0; padding: 20px; - font-family: Arial, sans-serif; - background-color: #f4f4f4; - color: #333; - width: 200px; + font-family: 'Courier New', monospace; + background-color: #1a1a1a; + color: #00ff00; + width: 300px; } .popup-container { text-align: center; + background-color: #2a2a2a; + border-radius: 8px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); } h1 { - font-size: 18px; - margin-bottom: 10px; + font-size: 24px; + margin-bottom: 20px; + color: #00ff00; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); } .toggle-container { display: flex; align-items: center; justify-content: center; + margin-bottom: 20px; } .switch { position: relative; display: inline-block; - width: 50px; - height: 24px; - margin-right: 10px; + width: 60px; + height: 34px; + margin-right: 15px; } .switch input { @@ -44,31 +51,33 @@ h1 { right: 0; bottom: 0; background-color: #ccc; - border-radius: 24px; - transition: .4s; + border-radius: 34px; + transition: .4s; } .slider:before { position: absolute; content: ""; - height: 20px; - width: 20px; - left: 2px; - bottom: 2px; - background-color: white; - border-radius: 50%; - transition: .4s; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + border-radius: 50%; + transition: .4s; } input:checked + .slider { - background-color: #4CAF50; + background-color: #4CAF50; } input:checked + .slider:before { - transform: translateX(26px); + transform: translateX(26px); } #status { - font-size: 14px; - margin-top: 10px; + font-size: 18px; + font-weight: bold; + margin-top: 10px; + color: #4CAF50; }