0.2.0

dev-dist/sw.js

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

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/favicon.svg" />
-    <meta name="theme-color" content="#242424" />
+    <meta name="theme-color" content="#4facfe" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tools App</title>
   </head>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.1.1",
+      "version": "0.2.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.1.1",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Header.vue

@@ -31,7 +31,13 @@ onMounted(() => {
   <header class="app-header glass-panel unselectable">
     <div class="header-content">
       <div class="header-left">
-        <button class="menu-btn" @click="$emit('toggleSidebar')" aria-label="Toggle Menu" v-ripple>
+        <button
+          class="menu-btn"
+          @click="$emit('toggleSidebar')"
+          aria-label="Toggle Menu"
+          title="Toggle Menu"
+          v-ripple
+        >
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="3" y1="12" x2="21" y2="12"></line>
             <line x1="3" y1="6" x2="21" y2="6"></line>

src/components/InstallPrompt.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
     <div class="prompt-content">
-      <span class="prompt-text">Zainstaluj aplikację dla szybszego dostępu</span>
+      <span class="prompt-text">Install app for faster access</span>
       <div class="prompt-actions">
-        <button @click="installPWA" class="install-btn">Zainstaluj</button>
+        <button @click="installPWA" class="install-btn">Install</button>
         <button @click="dismissPrompt" class="dismiss-btn">✕</button>
       </div>
     </div>
@@ -19,6 +19,12 @@ let deferredPrompt = null
 const handleBeforeInstallPrompt = (e) => {
   // Prevent Chrome 67 and earlier from automatically showing the prompt
   e.preventDefault()
+
+  // Only show install prompt if we are on the specific domain
+  if (window.location.hostname !== 'tools.7u.pl') {
+    return
+  }
+
   // Stash the event so it can be triggered later.
   deferredPrompt = e
   // Update UI to notify the user they can add to home screen

src/components/Sidebar.vue

@@ -11,6 +11,7 @@ defineProps({
   <aside class="sidebar unselectable" :class="{ 'is-open': isOpen }">
     <nav class="sidebar-nav">
       <router-link to="/passwords" class="nav-item" v-ripple>Passwords</router-link>
+      <router-link to="/clipboard-sniffer" class="nav-item" v-ripple>Clipboard Sniffer</router-link>
     </nav>
   </aside>
 </template>

src/components/tools/ClipboardSniffer.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { ref, onUnmounted, nextTick } from 'vue'
+import { useFillHeight } from '../../composables/useFillHeight'
+
+const clipboardContent = ref('')
+const isListening = ref(false)
+const lastClipboardText = ref('')
+const textareaRef = ref(null)
+let intervalId = null
+
+const { height: textareaHeight } = useFillHeight(textareaRef, 40) // 40px margin bottom
+
+const startListening = async () => {
+  try {
+    // Initial read to ask for permission/check access
+    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
+    }
+
+    isListening.value = true
+
+    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
+          }
+        }
+      } 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.
+      }
+    }, 1000)
+  } catch (err) {
+    console.error('Permission denied or clipboard error:', err)
+    alert('Clipboard access denied. Please allow clipboard access to use this tool.')
+  }
+}
+
+const stopListening = () => {
+  isListening.value = false
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+}
+
+const clearText = () => {
+  clipboardContent.value = ''
+  // Don't reset lastClipboardText so if they copy the same thing again it's detected?
+  // No, if they clear, they might want to see it again if they copy it again.
+  // But usually "change" means diff from clipboard.
+  // If I clear text, but clipboard still has "A", and I copy "A" again (refresh clipboard), readText still returns "A".
+  // So it won't be detected as a change.
+  // If user wants to capture "A" again, they need to copy something else then "A".
+  // That's standard behavior for "sniffer" (detect changes).
+}
+
+const copyToClipboard = async () => {
+  if (!clipboardContent.value) return
+  try {
+    await navigator.clipboard.writeText(clipboardContent.value)
+  } catch (err) {
+    console.error('Failed to copy to clipboard:', err)
+  }
+}
+
+onUnmounted(() => {
+  stopListening()
+})
+</script>
+
+<template>
+  <div class="tool-container" style="max-width: 100%;">
+    <div class="tool-panel">
+      <h2 class="tool-title">Clipboard Sniffer</h2>
+
+      <div class="controls">
+        <button
+          v-if="!isListening"
+          class="btn-neon"
+          @click="startListening"
+          v-ripple
+        >
+          Start Sniffing
+        </button>
+        <button
+          v-else
+          class="btn-neon active"
+          @click="stopListening"
+          v-ripple
+        >
+          Stop Sniffing
+        </button>
+
+        <button class="btn-neon" @click="copyToClipboard" v-ripple>
+          Copy
+        </button>
+
+        <button class="btn-neon" @click="clearText" v-ripple>
+          Clear
+        </button>
+      </div>
+
+      <div class="result-area" style="margin-top: 2rem;">
+        <div ref="textareaRef" :style="{ height: textareaHeight, width: '100%' }">
+          <textarea
+            v-model="clipboardContent"
+            class="tool-textarea"
+            placeholder="Clipboard content will appear here line by line..."
+          ></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-neon {
+  padding: 0.75rem 1.5rem;
+  min-width: 120px;
+}
+
+.btn-neon.active {
+  background: rgba(255, 0, 0, 0.2);
+  border-color: rgba(255, 0, 0, 0.5);
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
+}
+
+.tool-textarea {
+  height: 100%;
+}
+</style>

src/components/tools/Passwords.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue';
+import { useFillHeight } from '../../composables/useFillHeight';
 
 // Options
 const useLower = ref(true);
@@ -12,6 +13,8 @@ const count = ref(20);
 
 // Result
 const result = ref('');
+const textareaRef = ref(null);
+const { height: textareaHeight } = useFillHeight(textareaRef, 40);
 
 // Character Sets
 const CHARS_LOWER = 'abcdefghijklmnopqrstuvwxyz';
@@ -68,8 +71,8 @@ const generatePasswords = () => {
 </script>
 
 <template>
-  <div class="passwords-tool">
-    <div class="glass-panel tool-panel">
+  <div class="tool-container">
+    <div class="tool-panel">
       <h2 class="tool-title">Bulk Passwords Generator</h2>
 
       <div class="options-grid">
@@ -104,11 +107,19 @@ const generatePasswords = () => {
         <div class="inputs-group">
           <div class="input-wrapper">
             <label>Password Length</label>
-            <input type="number" v-model="length" min="4" max="128" class="number-input">
+            <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">
+              <button class="control-btn" @click="length < 128 ? length++ : null">+</button>
+            </div>
           </div>
           <div class="input-wrapper">
             <label>Passwords Number</label>
-            <input type="number" v-model="count" min="1" max="1000" class="number-input">
+            <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">
+              <button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
+            </div>
           </div>
         </div>
       </div>
@@ -121,44 +132,19 @@ const generatePasswords = () => {
 
       <div class="result-area">
         <label>Passwords</label>
-        <textarea
-          class="result-textarea glass-panel"
-          v-model="result"
-          placeholder="Generated passwords will appear here..."
-        ></textarea>
+        <div ref="textareaRef" :style="{ height: textareaHeight, width: '100%' }">
+          <textarea
+            class="tool-textarea"
+            v-model="result"
+            placeholder="Generated passwords will appear here..."
+          ></textarea>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.passwords-tool {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.tool-panel {
-  width: 100%;
-  padding: 2rem;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.tool-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  background: var(--title-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  filter: drop-shadow(0 0 10px var(--title-glow));
-}
-
 .options-grid {
   display: flex;
   flex-direction: column;
@@ -198,16 +184,17 @@ const generatePasswords = () => {
   background-color: var(--toggle-bg);
   border: 1px solid var(--toggle-border);
   border-radius: 4px;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
 }
 
-.checkbox-label:hover input ~ .checkmark {
-  border-color: var(--accent-cyan);
+.checkbox-label:hover .checkmark {
+  border-color: var(--toggle-hover-border);
 }
 
 .checkbox-label input:checked ~ .checkmark {
-  background-color: var(--accent-cyan);
-  border-color: var(--accent-cyan);
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 10px var(--primary-accent);
 }
 
 .checkmark:after {
@@ -232,8 +219,8 @@ const generatePasswords = () => {
 
 .inputs-group {
   display: flex;
-  gap: 2rem;
   flex-wrap: wrap;
+  gap: 1.5rem;
 }
 
 .input-wrapper {
@@ -245,69 +232,158 @@ const generatePasswords = () => {
 }
 
 .input-wrapper label {
+  color: var(--text-secondary);
+  font-weight: 500;
   font-size: 0.9rem;
-  color: var(--text-muted);
-  font-weight: 600;
+}
+
+.number-control {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.control-btn {
+  width: 42px;
+  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);
 }
 
 .number-input {
-  background: var(--toggle-bg);
+  flex: 1;
+  padding: 0.8rem;
+  background-color: var(--toggle-bg);
   border: 1px solid var(--toggle-border);
+  border-radius: 0;
   color: var(--text-color);
-  padding: 10px 15px;
-  border-radius: 8px;
   font-size: 1rem;
-  outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.3s;
+  text-align: center;
+  appearance: textfield; /* Remove default spinner */
+  min-width: 0;
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .number-input:focus {
-  border-color: var(--accent-cyan);
+  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: flex-end; /* Align button to right */
+  justify-content: center;
+  margin-top: 1rem;
+  width: 100%;
 }
 
-.generate-btn {
+.btn-neon {
   width: 100%;
-  padding: 12px;
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
+  padding: 0.8rem 2rem;
   font-size: 1.1rem;
-  letter-spacing: 0.5px;
+  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 {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  flex: 1;
+  min-height: 200px;
 }
 
 .result-area label {
-  font-size: 0.9rem;
-  color: var(--text-muted);
-  font-weight: 600;
-  border-left: 3px solid var(--accent-purple);
-  padding-left: 10px;
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 0.9rem;margin-top: auto;
 }
 
-.result-textarea {
-  width: 100%;
-  height: 300px;
-  background: rgba(0, 0, 0, 0.2); /* Slightly darker for contrast */
-  color: var(--text-color);
-  border: 1px solid var(--accent-purple);
-  padding: 1rem;
-  border-radius: 8px;
-  font-family: monospace;
-  font-size: 1rem;
-  line-height: 1.5;
+.tool-textarea {
+  min-height: 200px;
   resize: vertical;
-  outline: none;
-  box-sizing: border-box;
 }
 
-:root[data-theme="light"] .result-textarea {
-  background: rgba(255, 255, 255, 0.5);
+.result-textarea:focus {
+  outline: none;
+  border-color: var(--primary-accent);
+}
+
+/* Scrollbar for textarea */
+.result-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.result-textarea::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.result-textarea::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.result-textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
 }
 </style>

src/composables/useFillHeight.js

@@ -0,0 +1,47 @@
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+
+export function useFillHeight(elementRef, marginBottom = 20) {
+  const height = ref('auto')
+
+  const updateHeight = () => {
+    if (!elementRef.value) return
+
+    const rect = elementRef.value.getBoundingClientRect()
+    const windowHeight = window.innerHeight
+    // Calculate available space: window height - element top position - margin bottom
+    // We also need to account for the footer height if it's fixed or layout related
+    // The user mentioned "margin bottom from footer".
+    // If footer is in the flow, we might just want to fill the parent container?
+    // But user asked for JS resizing.
+    
+    // Let's assume we want to fill down to (windowHeight - marginBottom).
+    // This assumes the element should stretch to the bottom of the viewport.
+    
+    const availableHeight = windowHeight - rect.top - marginBottom
+    
+    // Ensure minimum height
+    if (availableHeight > 100) {
+      height.value = `${availableHeight}px`
+    }
+  }
+
+  onMounted(() => {
+    // Initial update after render
+    nextTick(() => {
+      updateHeight()
+      window.addEventListener('resize', updateHeight)
+    })
+    
+    // Also update after a short delay to ensure layout is settled (e.g. sidebar transitions)
+    setTimeout(updateHeight, 300)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateHeight)
+  })
+
+  return {
+    height,
+    updateHeight
+  }
+}

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Main from '../components/Main.vue'
 import Passwords from '../components/tools/Passwords.vue'
+import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
 
 const routes = [
   {
@@ -12,6 +13,11 @@ const routes = [
     path: '/passwords',
     name: 'Passwords',
     component: Passwords
+  },
+  {
+    path: '/clipboard-sniffer',
+    name: 'ClipboardSniffer',
+    component: ClipboardSniffer
   }
 ]
 

src/style.css

@@ -1,3 +1,9 @@
+/* Box sizing reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+@import 'tailwindcss';
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -86,6 +92,14 @@ body {
   min-width: 320px;
   min-height: 100vh;
   overflow-x: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.selectable {
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
 }
 
 #app {
@@ -107,6 +121,115 @@ body {
   }
 }
 
+/* --- Shared styles for all tools (moved from tools.css) --- */
+
+.tool-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  height: 100%;
+  padding: 1rem;
+}
+
+.tool-panel {
+  width: 100%;
+  padding: 2rem;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-height: 100%;
+  overflow-y: auto;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* Custom scrollbar for tool panel */
+.tool-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tool-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.tool-title {
+  margin: 0;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 10px var(--title-glow));
+}
+
+:root[data-theme="light"] .tool-title {
+  /* background: none !important;
+  -webkit-background-clip: unset !important;
+  background-clip: unset !important;
+  color: #000000 !important;
+  -webkit-text-fill-color: #000000 !important;
+  filter: none !important; */
+}
+
+.tool-textarea {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  border: 1px solid var(--toggle-border);
+  border-radius: 12px;
+  color: #ffffff !important; /* Explicit white color for dark mode */
+  font-family: monospace;
+  font-size: 1rem;
+  line-height: 1.6;
+  resize: none;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+:root[data-theme="light"] .tool-textarea {
+  color: #000000 !important;
+  background-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.tool-textarea:focus {
+  outline: none;
+  border-color: #00f2fe !important; /* Force cyan accent */
+  box-shadow: 0 0 0 1px #00f2fe !important;
+}
+
+.result-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 200px;
+}
+
+.result-area label {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
 /* Common UI Element Styles */
 .glass-panel {
   background: var(--glass-bg);

src/styles/tools.css

@@ -0,0 +1,107 @@
+/* Shared styles for all tools */
+
+.tool-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  height: 100%;
+  padding: 1rem;
+}
+
+.tool-panel {
+  width: 100%;
+  padding: 2rem;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-height: 100%;
+  overflow-y: auto;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* Custom scrollbar for tool panel */
+.tool-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tool-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.tool-title {
+  margin: 0;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 10px var(--title-glow));
+}
+
+:root[data-theme="light"] .tool-title {
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: #000000;
+  -webkit-text-fill-color: #000000;
+  filter: none;
+}
+
+.tool-textarea {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--toggle-border);
+  border-radius: 12px;
+  color: #ffffff; /* Explicit white color for dark mode */
+  font-family: monospace;
+  font-size: 1rem;
+  line-height: 1.6;
+  resize: none;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+:root[data-theme="light"] .tool-textarea {
+  color: #000000;
+}
+
+.tool-textarea:focus {
+  outline: none;
+  border-color: #00f2fe; /* Force cyan accent */
+  box-shadow: 0 0 0 1px #00f2fe;
+}
+
+.result-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 200px;
+}
+
+.result-area label {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}

vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
         name: 'Tools App',
         short_name: 'Tools',
         description: 'A collection of useful tools',
-        theme_color: '#242424',
+        theme_color: '#4facfe',
         background_color: '#242424',
         display: 'standalone',
         orientation: 'portrait',