0.3.0

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5a5d9309'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.3pcduqlbss8"
+    "revision": "0.mj22prstr4"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

extension/background.js

@@ -0,0 +1,156 @@
+// background.js
+// Listen for messages from content scripts or offscreen document
+
+let isSniffing = false;
+let lastClipboardContent = '';
+let creatingOffscreenDocument;
+
+// Hot-reconnect: Inject content script into existing tabs upon installation/update/restart
+const injectContentScriptIfNeeded = async () => {
+  const tabs = await chrome.tabs.query({ url: ['http://localhost/*', 'http://localhost:*/*', 'https://tools.7u.pl/*'] });
+  for (const tab of tabs) {
+    try {
+      // Try to ping the tab first
+      try {
+        await chrome.tabs.sendMessage(tab.id, { action: 'ping' });
+        // console.log('Content script already active in tab:', tab.id);
+      } catch (e) {
+        // If ping fails (no listener), inject script
+        await chrome.scripting.executeScript({
+          target: { tabId: tab.id },
+          files: ['content.js']
+        });
+        // console.log('Injected content script into existing tab:', tab.id);
+      }
+    } catch (err) {
+      // console.error('Failed to handle tab:', tab.id, err);
+    }
+  }
+};
+
+chrome.runtime.onInstalled.addListener(injectContentScriptIfNeeded);
+// Also run on startup (when extension is enabled/reloaded)
+injectContentScriptIfNeeded();
+
+// Listen for alarms
+try {
+  if (chrome.alarms) {
+    chrome.alarms.onAlarm.addListener((alarm) => {
+      if (alarm.name === 'keepAlive') {
+        refreshOffscreenDocument();
+      }
+    });
+  } else {
+    // console.warn('chrome.alarms API is not available.');
+  }
+} catch (e) {
+  // console.error('Error initializing alarms:', e);
+}
+
+// Setup offscreen document
+async function setupOffscreenDocument(path) {
+  // Check if an offscreen document already exists
+  const existingContexts = await chrome.runtime.getContexts({
+    contextTypes: ['OFFSCREEN_DOCUMENT'],
+  });
+
+  if (existingContexts.length > 0) {
+    return;
+  }
+
+  // Create an offscreen document
+  if (creatingOffscreenDocument) {
+    await creatingOffscreenDocument;
+  } else {
+    creatingOffscreenDocument = chrome.offscreen.createDocument({
+      url: path,
+      reasons: ['CLIPBOARD', 'AUDIO_PLAYBACK'],
+      justification: 'To read clipboard content in the background and play notification sounds',
+    });
+    await creatingOffscreenDocument;
+    creatingOffscreenDocument = null;
+  }
+}
+
+// Lifecycle management: Refresh offscreen document every 25s to avoid 30s timeout
+async function refreshOffscreenDocument() {
+  if (isSniffing) {
+    await chrome.offscreen.closeDocument();
+    await setupOffscreenDocument('offscreen.html');
+  }
+}
+
+// Start sniffing when requested
+chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
+  if (request.action === 'startSniffing') {
+    if (isSniffing) {
+       sendResponse({ status: 'already_started' });
+       return true;
+    }
+
+    isSniffing = true;
+    // console.log('Starting sniffing process...');
+    await setupOffscreenDocument('offscreen.html');
+
+    // Setup interval to keep offscreen alive - more aggressive
+    chrome.alarms.create('keepAlive', { periodInMinutes: 0.1 }); // every 6 seconds
+
+    sendResponse({ status: 'started' });
+    return true;
+  }
+
+  if (request.action === 'stopSniffing') {
+    if (!isSniffing) {
+      sendResponse({ status: 'not_running' });
+      return true;
+    }
+
+    isSniffing = false;
+    // console.log('Stopping sniffing process...');
+
+    // Stop alarm
+    chrome.alarms.clear('keepAlive');
+
+    // Close offscreen document
+    if (creatingOffscreenDocument) {
+      await creatingOffscreenDocument;
+    }
+    await chrome.offscreen.closeDocument().catch(() => {});
+    creatingOffscreenDocument = null;
+
+    sendResponse({ status: 'stopped' });
+    return true;
+  }
+
+  if (request.type === 'clipboard-data' && request.target === 'background') {
+    // Received data from offscreen document
+    if (isSniffing && request.data && request.data !== lastClipboardContent) {
+      lastClipboardContent = request.data;
+      // console.log('Clipboard changed:', request.data.substring(0, 20) + '...');
+
+      // Check if sound should be played
+      chrome.storage.local.get(['playSound'], (result) => {
+        if (result.playSound !== false) {
+          // Send message to offscreen document to play sound
+          chrome.runtime.sendMessage({
+            target: 'offscreen',
+            type: 'play-sound'
+          });
+        }
+      });
+
+      // Broadcast to all active tabs (content scripts)
+      // We could filter by sender.tab.id if we knew which tab started sniffing,
+      // but broadcasting is simpler for now and covers multiple open tabs of the app.
+      const tabs = await chrome.tabs.query({ url: ['http://localhost/*', 'http://localhost:*/*', 'https://tools.7u.pl/*'] });
+      for (const tab of tabs) {
+        chrome.tabs.sendMessage(tab.id, {
+          action: 'clipboardUpdate',
+          content: request.data
+        }).catch(() => {
+          // Tab might be closed or content script not injected yet
+        });
+      }
+    }
+  }
+});

extension/content.js

@@ -0,0 +1,66 @@
+// content.js
+// This script runs on the web app page (e.g. localhost:5173)
+
+console.log('Tools App Extension: Content script injected');
+
+// Listen for messages from the Web App (Vue)
+window.addEventListener('message', (event) => {
+  // We should verify the origin, but since we are running on the page itself, we trust window messages
+  // from our own app.
+  if (event.source !== window) return;
+
+  if (event.data.type && event.data.type === 'TOOLS_APP_INIT') {
+    // console.log('Tools App Extension: Received init from Web App');
+    window.postMessage({ type: 'TOOLS_APP_EXTENSION_READY', version: '1.0' }, '*');
+  }
+
+  // Heartbeat check
+  if (event.data.type === 'TOOLS_APP_PING') {
+    try {
+      // Only respond if the extension context is still valid
+      if (chrome.runtime && chrome.runtime.id) {
+        window.postMessage({ type: 'TOOLS_APP_PONG' }, '*');
+      }
+    } catch (e) {
+      // Extension context invalidated
+      // console.warn('Extension context invalidated during ping');
+    }
+  }
+
+  // Example: Receive request to sniff clipboard
+  if (event.data.type === 'TOOLS_APP_START_SNIFFING') {
+    // console.log('Tools App Extension: Start sniffing request');
+    // Relay to background script
+    try {
+      chrome.runtime.sendMessage({ action: 'startSniffing' });
+    } catch (e) {
+      console.warn('Tools App Extension: Connection lost, please reload the page', e);
+    }
+  }
+
+  if (event.data.type === 'TOOLS_APP_STOP_SNIFFING') {
+    // console.log('Tools App Extension: Stop sniffing request');
+    try {
+      chrome.runtime.sendMessage({ action: 'stopSniffing' });
+    } catch (e) {
+      // ignore
+    }
+  }
+});
+
+// Listen for messages from the Extension Background
+try {
+  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === 'clipboardUpdate') {
+      // Send to Web App
+      window.postMessage({ type: 'TOOLS_APP_CLIPBOARD_UPDATE', content: request.content }, '*');
+    }
+
+    // Respond to background ping to confirm we are alive
+    if (request.action === 'ping') {
+      sendResponse('pong');
+    }
+  });
+} catch (e) {
+  console.warn('Tools App Extension: Could not add listener', e);
+}

extension/manifest.json

@@ -0,0 +1,47 @@
+{
+  "manifest_version": 3,
+  "name": "Tools App Extension",
+  "version": "1.0",
+  "description": "Browser extension for Tools App",
+  "permissions": [
+    "clipboardRead",
+    "offscreen",
+    "storage",
+    "alarms",
+    "scripting"
+  ],
+  "host_permissions": [
+    "http://localhost/*",
+    "http://localhost:*/*",
+    "https://tools.7u.pl/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://localhost/*",
+        "http://localhost:*/*",
+        "https://tools.7u.pl/*"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "run_at": "document_start"
+    }
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon-16.png",
+      "48": "icon-48.png",
+      "128": "icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icon-16.png",
+    "48": "icon-48.png",
+    "128": "icon-128.png"
+  }
+}

extension/offscreen.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Offscreen Clipboard Access</title>
+  </head>
+  <body>
+    <textarea id="text"></textarea>
+    <script src="offscreen.js"></script>
+  </body>
+</html>

extension/offscreen.js

@@ -0,0 +1,72 @@
+// offscreen.js
+// This script runs in the offscreen document to access DOM APIs like navigator.clipboard
+
+const textEl = document.querySelector('#text');
+
+let lastText = '';
+
+setInterval(async () => {
+  try {
+    textEl.focus();
+    textEl.value = '';
+    textEl.select();
+
+    // Method 1: execCommand
+    try {
+      document.execCommand('paste');
+    } catch (e) {
+      // Ignore
+    }
+
+    let text = textEl.value;
+
+    // Method 2: navigator.clipboard (Fallback)
+    if (!text) {
+      try {
+        text = await navigator.clipboard.readText();
+      } catch (e) {
+        // Silent fail for navigator
+      }
+    }
+
+    if (text && text.trim().length > 0 && text !== lastText) {
+      lastText = text;
+      chrome.runtime.sendMessage({
+        type: 'clipboard-data',
+        target: 'background',
+        data: text
+      }).catch(() => {});
+    }
+  } catch (error) {
+    // Ignore critical errors to keep running
+  }
+}, 50);
+
+// Listen for messages from background if we need to change behavior
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.target === 'offscreen') {
+    // Handle commands
+    if (message.type === 'play-sound') {
+      playNotificationSound();
+    }
+  }
+});
+
+function playNotificationSound() {
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const oscillator = audioContext.createOscillator();
+  const gainNode = audioContext.createGain();
+
+  oscillator.connect(gainNode);
+  gainNode.connect(audioContext.destination);
+
+  oscillator.type = 'sine';
+  oscillator.frequency.setValueAtTime(500, audioContext.currentTime);
+  oscillator.frequency.exponentialRampToValueAtTime(1000, audioContext.currentTime + 0.1);
+
+  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+
+  oscillator.start();
+  oscillator.stop(audioContext.currentTime + 0.1);
+}

extension/popup.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Tools App Extension</title>
+    <style>
+      body {
+        width: 250px;
+        padding: 15px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        background-color: #f5f5f5;
+        user-select: none;
+      }
+      h3 {
+        margin-top: 0;
+        color: #333;
+      }
+      .status {
+        padding: 10px;
+        border-radius: 6px;
+        background: #e0e0e0;
+        margin-top: 10px;
+        font-size: 14px;
+      }
+      .status.active {
+        background: #e3f2fd;
+        color: #1565c0;
+        border: 1px solid #90caf9;
+      }
+      .footer {
+        margin-top: 15px;
+        font-size: 12px;
+        color: #666;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Tools App Extension</h3>
+    <div class="status active">
+      Extension is active and ready to communicate with Tools App.
+    </div>
+
+    <div style="margin-top: 15px;">
+      <label style="display: flex; align-items: center; cursor: pointer;">
+        <input type="checkbox" id="soundToggle" style="margin-right: 8px;">
+        <span>Play sound on capture</span>
+      </label>
+    </div>
+
+    <div class="footer">
+      Visit <a href="https://tools.7u.pl" target="_blank">tools.7u.pl</a>
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>

extension/popup.js

@@ -0,0 +1,34 @@
+// popup.js
+document.addEventListener('DOMContentLoaded', () => {
+  const soundToggle = document.getElementById('soundToggle');
+
+  // Load saved setting
+  chrome.storage.local.get(['playSound'], (result) => {
+    soundToggle.checked = result.playSound !== false; // Default to true
+  });
+
+  // Save setting on change
+  soundToggle.addEventListener('change', () => {
+    chrome.storage.local.set({ playSound: soundToggle.checked });
+
+    // Play test sound if enabled
+    if (soundToggle.checked) {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+
+      oscillator.type = 'sine';
+      oscillator.frequency.setValueAtTime(500, audioContext.currentTime);
+      oscillator.frequency.exponentialRampToValueAtTime(1000, audioContext.currentTime + 0.1);
+
+      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+
+      oscillator.start();
+      oscillator.stop(audioContext.currentTime + 0.1);
+    }
+  });
+});

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "lucide-vue-next": "^0.575.0",
         "vue": "^3.5.25",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/tools/ClipboardSniffer.vue

@@ -1,51 +1,135 @@
 <script setup>
-import { ref, onUnmounted, nextTick } from 'vue'
+import { ref, onUnmounted, nextTick, onMounted } from 'vue'
 import { useFillHeight } from '../../composables/useFillHeight'
+import { Plug, Info, X } from 'lucide-vue-next'
 
 const clipboardContent = ref('')
 const isListening = ref(false)
 const lastClipboardText = ref('')
 const textareaRef = ref(null)
+const isExtensionReady = ref(false)
+const showExtensionModal = ref(false)
 let intervalId = null
+let extensionCheckInterval = null
 
 const { height: textareaHeight } = useFillHeight(textareaRef, 40) // 40px margin bottom
 
+// Listen for extension messages
+const handleExtensionMessage = (event) => {
+  if (event.source !== window) return
+
+  if (event.data.type === 'TOOLS_APP_EXTENSION_READY' || event.data.type === 'TOOLS_APP_PONG') {
+    isExtensionReady.value = true
+    lastPongTime = Date.now()
+    // console.log('Extension is ready')
+  }
+
+  if (event.data.type === 'TOOLS_APP_CLIPBOARD_UPDATE' && isListening.value) {
+    const text = event.data.content
+    if (text && text !== lastClipboardText.value) {
+      lastClipboardText.value = text
+      clipboardContent.value += (clipboardContent.value ? '\n' : '') + text
+      scrollToBottom()
+    }
+  }
+}
+
+const closeModalOnEsc = (e) => {
+  if (e.key === 'Escape' && showExtensionModal.value) {
+    showExtensionModal.value = false
+  }
+}
+
+// Watchdog for extension
+let lastPongTime = Date.now()
+const PING_INTERVAL = 200
+const TIMEOUT_THRESHOLD = 500
+
+const startExtensionWatchdog = () => {
+  extensionCheckInterval = setInterval(() => {
+    // 1. Send Ping
+    window.postMessage({ type: 'TOOLS_APP_PING' }, '*')
+
+    // 2. Check timeout
+    // If current time - lastPongTime > threshold, then disconnected
+    if (Date.now() - lastPongTime > TIMEOUT_THRESHOLD) {
+       isExtensionReady.value = false
+    }
+  }, PING_INTERVAL)
+}
+
+// Wrapper to intercept PONG and update heartbeat
+const messageListener = (event) => {
+  if (event.source !== window) return
+
+  if (event.data.type === 'TOOLS_APP_PONG' || event.data.type === 'TOOLS_APP_EXTENSION_READY') {
+    lastPongTime = Date.now()
+    isExtensionReady.value = true
+  }
+
+  handleExtensionMessage(event)
+}
+
+onMounted(() => {
+  window.addEventListener('message', messageListener)
+  window.addEventListener('keydown', closeModalOnEsc)
+
+  // Initial check
+  window.postMessage({ type: 'TOOLS_APP_INIT' }, '*')
+
+  // Start heartbeat
+  startExtensionWatchdog()
+})
+
+onUnmounted(() => {
+  stopListening()
+  if (extensionCheckInterval) clearInterval(extensionCheckInterval)
+  window.removeEventListener('message', messageListener)
+  window.removeEventListener('keydown', closeModalOnEsc)
+})
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    const textarea = document.querySelector('.tool-textarea')
+    if (textarea) {
+      textarea.scrollTop = textarea.scrollHeight
+    }
+  })
+}
+
 const startListening = async () => {
   try {
-    // Initial read to ask for permission/check access
+    isListening.value = true
+
+    // Try native API first (for web app usage without extension)
+    // Initial read
+    try {
       const text = await navigator.clipboard.readText()
-    lastClipboardText.value = text // Don't paste existing content immediately, only new content?
-    // Or maybe we want to paste the current content immediately?
-    // "wklejaj nasluchane wartosci" - usually implies new values.
-    // Let's set current as last seen so we don't duplicate it if it's already there?
-    // Actually, user might want the current clipboard too.
-    // Let's assume we start clean or append.
-    // If I set lastClipboardText to current, it won't be added.
-    // Let's add the current text if it's not empty.
       if (text) {
           lastClipboardText.value = text
           clipboardContent.value += (clipboardContent.value ? '\n' : '') + text
+          scrollToBottom()
+      }
+    } catch (e) {
+      console.log('Native clipboard read failed (expected if not focused), relying on extension if available')
     }
 
-    isListening.value = true
+    // If extension is ready, ask it to start sniffing
+    if (isExtensionReady.value) {
+      window.postMessage({ type: 'TOOLS_APP_START_SNIFFING' }, '*')
+    }
 
+    // Fallback polling for web app (only works when focused usually)
     intervalId = setInterval(async () => {
       try {
         const currentText = await navigator.clipboard.readText()
         if (currentText && currentText !== lastClipboardText.value) {
           lastClipboardText.value = currentText
           clipboardContent.value += (clipboardContent.value ? '\n' : '') + currentText
-
-          // Auto-scroll to bottom
-          const textarea = document.querySelector('.tool-textarea')
-          if (textarea) {
-            textarea.scrollTop = textarea.scrollHeight
-          }
+          scrollToBottom()
         }
       } catch (err) {
-        console.error('Failed to read clipboard:', err)
-        // Don't stop immediately on one error, could be temporary focus loss?
-        // But if permission revoked, maybe stop.
+        // Ignore errors in polling (e.g. lost focus)
       }
     }, 1000)
   } catch (err) {
@@ -60,6 +144,10 @@ const stopListening = () => {
     clearInterval(intervalId)
     intervalId = null
   }
+
+  if (isExtensionReady.value) {
+    window.postMessage({ type: 'TOOLS_APP_STOP_SNIFFING' }, '*')
+  }
 }
 
 const clearText = () => {
@@ -90,7 +178,18 @@ onUnmounted(() => {
 <template>
   <div class="tool-container" style="max-width: 100%;">
     <div class="tool-panel">
+      <div class="tool-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
+        <div
+          class="extension-status"
+          :class="{ 'connected': isExtensionReady }"
+          @click="showExtensionModal = true"
+          :title="isExtensionReady ? 'Extension connected' : 'Extension not detected - Click for info'"
+        >
+          <Plug v-if="isExtensionReady" size="20" />
+          <Info v-else size="20" />
+        </div>
+      </div>
 
       <div class="controls">
         <button
@@ -119,20 +218,187 @@ onUnmounted(() => {
         </button>
       </div>
 
-      <div class="result-area" style="margin-top: 2rem;">
+      <div class="result-area" style="margin-top: 1rem;">
         <div ref="textareaRef" :style="{ height: textareaHeight, width: '100%' }">
           <textarea
             v-model="clipboardContent"
             class="tool-textarea"
             placeholder="Clipboard content will appear here line by line..."
+            readonly
           ></textarea>
         </div>
       </div>
     </div>
+
+    <!-- Extension Info Modal -->
+    <div v-if="showExtensionModal" class="modal-overlay" @click.self="showExtensionModal = false">
+      <div class="modal-content glass-panel">
+        <button class="close-btn" @click="showExtensionModal = false">
+          <X size="24" />
+        </button>
+
+        <div v-if="!isExtensionReady">
+          <h3>Enhance Your Experience</h3>
+          <p>
+            Install our browser extension to enable <strong>background clipboard sniffing</strong>!
+          </p>
+          <p class="description">
+            Without the extension, this tool can only capture clipboard content when the tab is active.
+            With the extension, you can capture content even when you're working in other apps.
+          </p>
+          <div class="modal-actions">
+            <a href="#" class="btn-neon" @click.prevent>Extension Coming Soon</a>
+          </div>
+        </div>
+
+        <div v-else>
+          <h3>Extension Connected!</h3>
+          <p>
+            You have successfully enabled <strong>background clipboard sniffing</strong>.
+          </p>
+          <p class="description">
+            The extension is active and monitoring your clipboard in the background.
+            You can now switch to other apps and copy text - it will appear here automatically.
+          </p>
+          <div class="modal-actions">
+            <button class="btn-neon" @click="showExtensionModal = false">Got it!</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.tool-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+.extension-status {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+:global(:root[data-theme="light"]) .extension-status {
+  background: rgba(0, 0, 0, 0.05);
+  color: #666;
+}
+
+.extension-status:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-color);
+}
+
+:global(:root[data-theme="light"]) .extension-status:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: #000;
+}
+
+.extension-status.connected {
+  color: #4ade80; /* Green for connected */
+  cursor: pointer; /* Allow clicking to see status */
+}
+
+/* :global(:root[data-theme="light"]) .extension-status.connected {
+  color: #16a34a;
+} */
+
+.extension-status.connected:hover {
+  background: rgba(74, 222, 128, 0.1);
+}
+
+/* :global(:root[data-theme="light"]) .extension-status.connected:hover {
+  background: rgba(22, 163, 74, 0.1);
+} */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  position: relative;
+  width: 90%;
+  max-width: 500px;
+  padding: 2rem;
+  border-radius: 16px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  text-align: center;
+}
+
+.close-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-color);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  color: var(--text-color);
+}
+
+.modal-content p {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: var(--text-color);
+}
+
+.description {
+  color: var(--text-secondary) !important;
+  font-size: 0.9rem;
+  margin-bottom: 2rem !important;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: center;
+}
+
 .controls {
   display: flex;
   gap: 1rem;

src/components/tools/Passwords.vue

@@ -71,9 +71,16 @@ const generatePasswords = () => {
 </script>
 
 <template>
-  <div class="tool-container">
+  <div class="tool-container full-width">
     <div class="tool-panel">
+      <div class="panel-header">
         <h2 class="tool-title">Bulk Passwords Generator</h2>
+        <div class="action-area">
+          <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
+            Generate
+          </button>
+        </div>
+      </div>
 
       <div class="options-grid">
         <div class="checkbox-group">
@@ -100,13 +107,13 @@ const generatePasswords = () => {
           <label class="checkbox-label">
             <input type="checkbox" v-model="skipSimilar">
             <span class="checkmark"></span>
-            Skip Similar Chars (I, l, 1, O, 0, o)
+            Skip Similar (I, l, 1, O, 0, o)
           </label>
         </div>
 
         <div class="inputs-group">
           <div class="input-wrapper">
-            <label>Password Length</label>
+            <label>Length</label>
             <div class="number-control">
               <button class="control-btn" @click="length > 4 ? length-- : null">-</button>
               <input type="number" v-model="length" min="4" max="128" class="number-input">
@@ -114,7 +121,7 @@ const generatePasswords = () => {
             </div>
           </div>
           <div class="input-wrapper">
-            <label>Passwords Number</label>
+            <label>Count</label>
             <div class="number-control">
               <button class="control-btn" @click="count > 1 ? count-- : null">-</button>
               <input type="number" v-model="count" min="1" max="1000" class="number-input">
@@ -124,37 +131,74 @@ const generatePasswords = () => {
         </div>
       </div>
 
-      <div class="action-area">
-        <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
-          Generate
-        </button>
-      </div>
-
-      <div class="result-area">
-        <label>Passwords</label>
-        <div ref="textareaRef" :style="{ height: textareaHeight, width: '100%' }">
+      <div class="result-area" :style="{ height: textareaHeight }">
         <textarea
           class="tool-textarea"
           v-model="result"
           placeholder="Generated passwords will appear here..."
+          readonly
         ></textarea>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <style scoped>
-.options-grid {
+.tool-container.full-width {
+  max-width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
+}
+
+.tool-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   gap: 1.5rem;
 }
 
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.tool-title {
+  margin: 0;
+}
+
+.options-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  padding: 1rem;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 12px;
+}
+
 .checkbox-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 1.5rem;
+  flex: 2;
+}
+
+.inputs-group {
+  display: flex;
+  gap: 2rem;
+  flex: 1;
+  min-width: 300px;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
 }
 
 .checkbox-label {
@@ -166,9 +210,9 @@ const generatePasswords = () => {
   color: var(--text-secondary);
   font-weight: 500;
   white-space: nowrap;
-  flex: 1 0 auto;
 }
 
+/* Custom Checkbox */
 .checkbox-label input {
   position: absolute;
   opacity: 0;
@@ -212,86 +256,63 @@ const generatePasswords = () => {
   top: 2px;
   width: 5px;
   height: 10px;
-  border: solid white;
+  border: solid #000;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }
 
-.inputs-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
-  min-width: 200px;
-}
-
-.input-wrapper label {
-  color: var(--text-secondary);
-  font-weight: 500;
-  font-size: 0.9rem;
-}
-
+/* Number Control */
 .number-control {
   display: flex;
   align-items: stretch;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 8px;
+  overflow: hidden;
   gap: 0;
 }
 
 .control-btn {
-  width: 42px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 1.2rem;
+  width: 40px;
+  height: auto;
+  min-height: 40px;
+  cursor: pointer;
+  transition: background 0.2s;
+  padding: 0;
+  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  color: var(--text-color);
-  border-radius: 0;
-  font-size: 1.2rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  user-select: none;
-}
-
-.control-btn:first-child {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-  border-right: none;
-}
-
-.control-btn:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-left: none;
 }
 
 .control-btn:hover {
-  background-color: var(--button-hover-bg);
-  border-color: var(--toggle-hover-border);
-  z-index: 1;
-}
-
-.control-btn:active {
-  transform: scale(0.98);
+  background: var(--button-hover-bg);
 }
 
 .number-input {
-  flex: 1;
-  padding: 0.8rem;
-  background-color: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  border-radius: 0;
+  background: none;
+  border: none;
   color: var(--text-color);
-  font-size: 1rem;
-  transition: border-color 0.3s;
+  width: 100%;
+  flex: 1;
   text-align: center;
-  appearance: textfield; /* Remove default spinner */
-  min-width: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  appearance: textfield;
+  -moz-appearance: textfield;
+  height: 100%;
+  border-radius: 0;
+  min-width: 60px;
+}
+
+.number-input:focus {
+  outline: none;
+  box-shadow: none;
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .number-input::-webkit-outer-spin-button,
@@ -300,90 +321,54 @@ const generatePasswords = () => {
   margin: 0;
 }
 
-.number-input:focus {
-  outline: none;
-  border-color: var(--primary-accent);
-  box-shadow: 0 0 0 2px var(--toggle-active-shadow);
-  z-index: 2;
-  position: relative;
-}
-
-.action-area {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-  width: 100%;
-}
-
-.btn-neon {
-  width: 100%;
-  background: var(--button-bg);
-  border: 1px solid var(--button-border);
-  color: var(--button-text);
-  padding: 0.8rem 2rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  position: relative;
-  overflow: hidden;
-}
-
-.btn-neon:hover {
-  background: var(--button-hover-bg);
-  box-shadow: var(--button-hover-shadow);
-  transform: translateY(-2px);
-  border-color: var(--toggle-hover-border);
-}
-
-.btn-neon:active {
-  transform: translateY(1px);
-  box-shadow: var(--button-active-shadow);
-}
-
 .result-area {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
   min-height: 200px;
 }
 
-.result-area label {
-  color: var(--text-secondary);
-  font-weight: 500;
-  font-size: 0.9rem;margin-top: auto;
-}
-
 .tool-textarea {
-  min-height: 200px;
-  resize: vertical;
-}
-
-.result-textarea:focus {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  border-radius: 12px;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-color);
+  font-family: monospace;
+  font-size: 0.9rem;
+  resize: none;
   outline: none;
-  border-color: var(--primary-accent);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* Scrollbar for textarea */
-.result-textarea::-webkit-scrollbar {
-  width: 8px;
+.generate-btn {
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-.result-textarea::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-}
+@media (max-width: 768px) {
+  .options-grid {
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-.result-textarea::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-}
+  .inputs-group {
+    flex-direction: column;
+    min-width: 100%;
+  }
 
-.result-textarea::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  .panel-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .generate-btn {
+    width: 100%;
+  }
 }
 </style>

src/style.css

@@ -55,7 +55,7 @@
 }
 
 :root[data-theme="light"] {
-  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #cccccc 100%);
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e5e7eb 100%);
   --glass-bg: rgba(255, 255, 255, 0.75);
   --glass-border: rgba(15, 23, 42, 0.12);
   --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);