gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve Clipboard Sniffer extension integration and UI fixes

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-27 03:37:33 +00:00
parent 1d7fd9a5bc
commit 8e8bf47297
14 changed files with 872 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

@@ -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"), {

156
extension/background.js Normal file
View File

@@ -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
});
}
}
}
});

66
extension/content.js Normal file
View File

@@ -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);
}

BIN
extension/icon-128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
extension/icon-16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 862 B

BIN
extension/icon-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

47
extension/manifest.json Normal file
View File

@@ -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"
}
}

10
extension/offscreen.html Normal file
View File

@@ -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>

72
extension/offscreen.js Normal file
View File

@@ -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);
}

55
extension/popup.html Normal file
View File

@@ -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>

34
extension/popup.js Normal file
View File

@@ -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);
}
});
});

308
src/components/tools/ClipboardSniffer.vue
View File

@@ -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;

273
src/components/tools/Passwords.vue
View File

@@ -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>

2
src/style.css
View File

@@ -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);