0.7.0

feat: add Tone Generator tool with precise audio controls and wave selection
0.6.24
2026-03-04 06:14:03 +00:00 · 2026-03-04 06:13:52 +00:00 · 2026-03-04 05:29:38 +00:00 · 2026-03-04 05:28:31 +00:00 · 2026-03-04 05:22:07 +00:00 · 2026-03-04 05:21:53 +00:00
21 changed files with 803 additions and 73 deletions
--- a/README.md
+++ b/README.md
@@ -40,6 +40,13 @@ Scan QR codes directly from your camera or device.
 - **History:** Keeps a log of scanned codes with options to copy or download as JSON.
 - **Responsive:** Fullscreen mode for immersive scanning experience.

+### 🎵 Tone Generator
+Generate precise audio frequencies directly in the browser.
+- **Customizable:** Slide from 20 Hz to 20,000 Hz or type exact values.
+- **Waveforms:** Choose between Sine, Square, Sawtooth, and Triangle waves.
+- **Presets:** Quick access to common frequencies like 440 Hz (A4) and 528 Hz.
+- **Safe:** Smooth volume ramping to protect against audio clicking.
+
 ---

 ## Chrome Extension 🧩
--- a/index.html
+++ b/index.html
@@ -7,6 +7,10 @@
    <meta name="theme-color" content="#4facfe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tools App</title>
+    <meta property="og:title" content="Tools App" />
+    <meta property="og:description" content="A versatile collection of developer and everyday tools including a Password Generator, QR Code Scanner/Generator, URL Cleaner, and more." />
+    <meta property="og:image" content="/preview.png" />
+    <meta property="og:type" content="website" />
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "tools-app",
-  "version": "0.6.21",
+  "version": "0.7.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tools-app",
-      "version": "0.6.21",
+      "version": "0.7.0",
      "hasInstallScript": true,
      "dependencies": {
        "@gkucmierz/utils": "^1.28.7",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.6.21",
+  "version": "0.7.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/preview.png
+++ b/public/preview.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import GlobalTooltip from './components/common/GlobalTooltip.vue'
 import { UI_CONFIG } from './config/ui'

 const isSidebarOpen = ref(window.innerWidth >= 768)
@@ -61,6 +62,7 @@ onUnmounted(() => {
  <Footer />
  <InstallPrompt />
  <ReloadPrompt />
+  <GlobalTooltip />
 </template>

 <style scoped>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -35,7 +35,7 @@ onMounted(() => {
          class="menu-btn"
          @click="$emit('toggleSidebar')"
          aria-label="Toggle Menu"
-          title="Toggle Menu"
+          v-tooltip="'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">
@@ -50,7 +50,7 @@ onMounted(() => {
      <button
        class="btn-neon nav-btn icon-only"
        @click="toggleTheme"
-        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        v-tooltip="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
        v-ripple
      >
        <Sun v-if="isDark" :size="20" />
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -15,6 +15,7 @@ defineProps({
      <router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
      <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
      <router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
+      <router-link to="/tone-generator" class="nav-item" v-ripple>Tone Generator</router-link>
    </nav>
  </aside>
 </template>
--- a/src/components/common/GlobalTooltip.vue
+++ b/src/components/common/GlobalTooltip.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { tooltipState } from '../../composables/useTooltip'
+import { ref, watch, nextTick } from 'vue'
+
+const tooltipRef = ref(null)
+const x = ref(0)
+const y = ref(0)
+const arrowX = ref(0)
+const isBottom = ref(false)
+
+watch(() => tooltipState.isVisible, async (visible) => {
+  if (visible) {
+    // Wait for DOM update to ensure the text content affects height before measuring
+    await nextTick()
+    if (!tooltipRef.value || !tooltipState.targetRect) return
+
+    const rect = tooltipState.targetRect
+    const tooltipRect = tooltipRef.value.getBoundingClientRect()
+
+    let top = rect.top - tooltipRect.height - 8
+    let idealCenter = rect.left + (rect.width / 2)
+    let left = idealCenter - (tooltipRect.width / 2)
+
+    isBottom.value = false
+    if (top < 8) {
+      top = rect.bottom + 8
+      isBottom.value = true
+    }
+
+    // Bounds checking for the tooltip box
+    let actualLeft = left
+    if (actualLeft < 8) {
+      actualLeft = 8
+    } else if (actualLeft + tooltipRect.width > window.innerWidth - 8) {
+      actualLeft = window.innerWidth - tooltipRect.width - 8
+    }
+
+    // Calculate the difference between where the box is forced to be,
+    // and where it naturally wanted to be. We move the arrow by the opposite amount.
+    arrowX.value = idealCenter - (actualLeft + (tooltipRect.width / 2))
+
+    x.value = actualLeft
+    y.value = top
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="tooltipRef"
+    class="global-tooltip"
+    :class="{ 'visible': tooltipState.isVisible, 'tooltip-bottom': isBottom }"
+    :style="{
+      transform: `translate(${x}px, ${y}px)`,
+      '--arrow-offset': `${arrowX}px`
+    }"
+  >
+    {{ tooltipState.text }}
+  </div>
+</template>
+
+<style scoped>
+.global-tooltip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #f8fafc;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateY(4px) scale(0.95);
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.global-tooltip::after {
+  content: '';
+  position: absolute;
+  left: calc(50% + var(--arrow-offset, 0px));
+  bottom: -5px;
+  margin-left: -5px;
+  width: 10px;
+  height: 10px;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transform: rotate(45deg);
+  border-radius: 0 0 2px 0;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.global-tooltip.tooltip-bottom::after {
+  bottom: auto;
+  top: -5px;
+  border-right: none;
+  border-bottom: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px 0 0 0;
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+.global-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+  /* Transform returns to natural pos defined by inline styles when visible */
+}
+
+:root[data-theme="light"] .global-tooltip {
+  background: rgba(255, 255, 255, 0.95);
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.1);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip::after {
+  background: rgba(255, 255, 255, 0.95);
+  border-right-color: rgba(15, 23, 42, 0.1);
+  border-bottom-color: rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip.tooltip-bottom::after {
+  border-left-color: rgba(15, 23, 42, 0.1);
+  border-top-color: rgba(15, 23, 42, 0.1);
+}
+</style>
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -62,7 +62,7 @@ const clearText = () => {
          class="btn-neon"
          @click="startListening"
          :disabled="!isExtensionReady"
-          :title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
+          v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
          v-ripple
        >
          Start Sniffing
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -113,7 +113,13 @@ const onDrag = (e) => {
  posRef.value[`y${point}`] = Math.round(y)
 }

+let justDragged = false
+
 const stopDrag = () => {
+  if (activeHandle.value) {
+    justDragged = true
+    setTimeout(() => { justDragged = false }, 50)
+  }
  activeHandle.value = null
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
@@ -121,6 +127,14 @@ const stopDrag = () => {
  window.removeEventListener('touchend', stopDrag)
 }

+const handleFrameClick = (event) => {
+  if (justDragged) return
+
+  if (!activeHandle.value) {
+    showHandles.value = !showHandles.value
+  }
+}
+
 const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin

 let worker = null
@@ -331,50 +345,47 @@ const triggerDownload = (blob, filename) => {

      <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
        <div class="qr-container">
-          <div class="qr-frame" :style="{ background: isBgTransparent ? 'white' : bgType === 'solid' ? bgColor1 : (bgType === 'linear' ? `linear-gradient(to bottom right, ${bgColor1}, ${bgColor2})` : `radial-gradient(circle, ${bgColor1}, ${bgColor2})`) }">
+          <div
+            class="qr-frame"
+            :style="{
+              background: isBgTransparent ? 'white' : bgType === 'solid' ? bgColor1 : (bgType === 'linear' ? `linear-gradient(to bottom right, ${bgColor1}, ${bgColor2})` : `radial-gradient(circle, ${bgColor1}, ${bgColor2})`),
+              cursor: (fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? 'pointer' : 'default'
+            }"
+            @click="handleFrameClick"
+            v-tooltip="(fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')) ? (showHandles ? 'Hide edit handles' : 'Show edit handles') : ''"
+          >
             <div class="svg-wrapper" ref="qrFrameRef">
                <div v-html="svgContent" class="svg-content-box"></div>

                <template v-if="showHandles">
                  <!-- Background Gradient Handles -->
                  <template v-if="!isBgTransparent && bgType !== 'solid'">
-                    <div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')"></div>
-                    <div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')"></div>
+                    <div class="grad-handle bg-handle handle-1" :style="{ left: bgGradPos.x1 + '%', top: bgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'bg:1')" @touchstart.prevent="startDrag($event, 'bg:1')" @click.stop></div>
+                    <div class="grad-handle bg-handle handle-2" :style="{ left: bgGradPos.x2 + '%', top: bgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'bg:2')" @touchstart.prevent="startDrag($event, 'bg:2')" @click.stop></div>
                    <svg class="grad-line-svg"><line :x1="bgLinePts.x1 + '%'" :y1="bgLinePts.y1 + '%'" :x2="bgLinePts.x2 + '%'" :y2="bgLinePts.y2 + '%'" class="bg-line" /></svg>
                  </template>

                  <!-- Foreground Gradient Handles -->
                  <template v-if="fgType !== 'solid'">
-                    <div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')"></div>
-                    <div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')"></div>
+                    <div class="grad-handle fg-handle handle-1" :style="{ left: fgGradPos.x1 + '%', top: fgGradPos.y1 + '%' }" @mousedown="startDrag($event, 'fg:1')" @touchstart.prevent="startDrag($event, 'fg:1')" @click.stop></div>
+                    <div class="grad-handle fg-handle handle-2" :style="{ left: fgGradPos.x2 + '%', top: fgGradPos.y2 + '%' }" @mousedown="startDrag($event, 'fg:2')" @touchstart.prevent="startDrag($event, 'fg:2')" @click.stop></div>
                    <svg class="grad-line-svg"><line :x1="fgLinePts.x1 + '%'" :y1="fgLinePts.y1 + '%'" :x2="fgLinePts.x2 + '%'" :y2="fgLinePts.y2 + '%'" class="fg-line" /></svg>
                  </template>
                </template>
             </div>
          </div>

-           <!-- Overlay Icon Toggle -->
-           <button
-              v-if="fgType !== 'solid' || (!isBgTransparent && bgType !== 'solid')"
-              class="icon-btn edit-toggle-btn"
-              :class="{ 'active': showHandles }"
-              @click="showHandles = !showHandles"
-              title="Toggle edit handles"
-            >
-              <Eye v-if="showHandles" size="20" />
-              <EyeOff v-else size="20" />
-           </button>
        </div>

        <div class="download-settings">
          <div class="control-group">
            <label>Size (px)</label>
            <div class="number-control size-control">
-              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100" v-ripple>-100</button>
-              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10" v-ripple>-10</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" v-tooltip="'-100'" v-ripple>-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" v-tooltip="'-10'" v-ripple>-10</button>
              <input type="number" v-model.number="size" class="number-input" />
-              <button class="control-btn" @click="size += 10" title="+10" v-ripple>+10</button>
-              <button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
+              <button class="control-btn" @click="size += 10" v-tooltip="'+10'" v-ripple>+10</button>
+              <button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
            </div>
          </div>

@@ -504,26 +515,7 @@ const triggerDownload = (blob, filename) => {
  position: relative;
 }

-.edit-toggle-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 20;
-  color: var(--text-secondary);
-  opacity: 0.6;
-  background: var(--panel-bg);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}

-.edit-toggle-btn:hover {
-  opacity: 1;
-  color: var(--text-strong);
-}
-
-.edit-toggle-btn.active {
-  color: var(--primary-accent);
-  opacity: 0.9;
-}

 :root[data-theme="light"] .preview-section {
  background: rgba(255, 255, 255, 0.3);
@@ -619,5 +611,23 @@ const triggerDownload = (blob, filename) => {
  min-width: 100px !important;
 }

+@media (max-width: 600px) {
+  .preview-section {
+    padding: 1rem 0.5rem;
+    gap: 1rem;
+    border-radius: 8px;
+  }
+
+  .qr-container {
+    width: 100%;
+    aspect-ratio: 1;
+    min-height: unset;
+  }
+
+  .qr-frame {
+    padding: 0.5rem;
+  }
+}
+
 </style>

--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -322,7 +322,7 @@ const isUrl = (string) => {
              v-if="hasMultipleCameras"
              class="switch-camera-btn"
              @click.stop="switchCamera"
-              title="Switch Camera"
+              v-tooltip="'Switch Camera'"
              v-ripple
            >
              <SwitchCamera size="24" />
@@ -333,13 +333,13 @@ const isUrl = (string) => {
            <div class="results-header">
              <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
              <div v-if="scannedCodes.length > 0" class="header-actions">
-                <button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
+                <button class="icon-btn" @click="copyAll" v-tooltip="'Copy All'" v-ripple>
                  <Copy size="18" />
                </button>
-                <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+                <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
                  <Download size="18" />
                </button>
-                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
+                <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear All'" v-ripple>
                  <Trash2 size="18" />
                </button>
              </div>
@@ -358,13 +358,13 @@ const isUrl = (string) => {
                  </div>
                </div>
                <div class="item-actions">
-                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" v-tooltip="'Copy'" v-ripple>
                    <Copy size="18" />
                  </button>
-                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" title="Generate QR Code" v-ripple>
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" v-tooltip="'Generate QR Code'" v-ripple>
                    <QrCode size="18" />
                  </button>
-                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" v-tooltip="'Remove'" v-ripple>
                    <Trash2 size="18" />
                  </button>
                </div>
@@ -492,9 +492,11 @@ const isUrl = (string) => {
 }

 .switch-camera-btn {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  position: absolute !important;
+  top: auto !important;
+  left: auto !important;
+  bottom: 0.75rem !important;
+  right: 0.75rem !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
--- a/src/components/tools/ToneGenerator.vue
+++ b/src/components/tools/ToneGenerator.vue
@@ -0,0 +1,438 @@
+<script setup>
+import { ref, onUnmounted, watch } from 'vue'
+import { Volume2, VolumeX, Play, Square, Activity } from 'lucide-vue-next'
+
+const frequency = ref(440)
+const volume = ref(20)
+const waveform = ref('sine')
+const isPlaying = ref(false)
+
+const waveforms = [
+  { value: 'sine', label: 'Sine' },
+  { value: 'square', label: 'Square' },
+  { value: 'sawtooth', label: 'Sawtooth' },
+  { value: 'triangle', label: 'Triangle' }
+]
+
+let audioContext = null
+let oscillator = null
+let gainNode = null
+
+const initAudio = () => {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)()
+  }
+}
+
+const updateOscillator = () => {
+  if (oscillator && isPlaying.value) {
+    // Ramp to prevent clicking sounds
+    oscillator.frequency.setTargetAtTime(frequency.value, audioContext.currentTime, 0.05)
+    oscillator.type = waveform.value
+  }
+}
+
+const updateVolume = () => {
+  if (gainNode && isPlaying.value) {
+    // Ramp to prevent clicking sounds
+    const gainValue = volume.value / 100
+    gainNode.gain.setTargetAtTime(gainValue, audioContext.currentTime, 0.05)
+  }
+}
+
+watch(frequency, updateOscillator)
+watch(waveform, updateOscillator)
+watch(volume, updateVolume)
+
+const togglePlay = () => {
+  if (isPlaying.value) {
+    stopTone()
+  } else {
+    playTone()
+  }
+}
+
+const playTone = () => {
+  initAudio()
+
+  if (audioContext.state === 'suspended') {
+    audioContext.resume()
+  }
+
+  oscillator = audioContext.createOscillator()
+  gainNode = audioContext.createGain()
+
+  oscillator.type = waveform.value
+  oscillator.frequency.setValueAtTime(frequency.value, audioContext.currentTime)
+
+  const gainValue = volume.value / 100
+  gainNode.gain.setValueAtTime(0, audioContext.currentTime)
+  gainNode.gain.setTargetAtTime(gainValue, audioContext.currentTime, 0.05)
+
+  oscillator.connect(gainNode)
+  gainNode.connect(audioContext.destination)
+
+  oscillator.start()
+  isPlaying.value = true
+}
+
+const stopTone = () => {
+  if (oscillator && isPlaying.value) {
+    gainNode.gain.setTargetAtTime(0, audioContext.currentTime, 0.05)
+    setTimeout(() => {
+      if (oscillator) {
+        oscillator.stop()
+        oscillator.disconnect()
+        oscillator = null
+      }
+      if (gainNode) {
+        gainNode.disconnect()
+        gainNode = null
+      }
+    }, 100) // wait for ramp down
+  }
+  isPlaying.value = false
+}
+
+const handleFreqInput = (e) => {
+  let val = parseInt(e.target.value)
+  if (isNaN(val)) val = 440
+  // allow temporary out of bounds typing but bound eventually
+  frequency.value = val
+}
+
+const clampFreq = () => {
+  if (frequency.value < 1) frequency.value = 1
+  if (frequency.value > 24000) frequency.value = 24000
+}
+
+onUnmounted(() => {
+  stopTone()
+  if (audioContext) {
+    audioContext.close()
+  }
+})
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">Tone Generator</h2>
+      </div>
+
+      <div class="tone-controls">
+        <!-- Frequency Control -->
+        <div class="control-group">
+          <div class="number-input-container">
+            <span class="input-label">Frequency</span>
+            <input
+              type="number"
+              class="bare-number-input"
+              v-model="frequency"
+              @change="clampFreq"
+              @input="handleFreqInput"
+              min="1"
+              max="24000"
+            />
+            <span class="input-unit">Hz</span>
+          </div>
+          <input
+            type="range"
+            class="slider"
+            v-model.number="frequency"
+            min="20"
+            max="10000"
+            step="1"
+          />
+          <div class="presets">
+            <button class="btn-preset" @click="frequency = 440">A4 (440)</button>
+            <button class="btn-preset" @click="frequency = 528">C5 (528)</button>
+            <button class="btn-preset" @click="frequency = 432">A4 (432)</button>
+            <button class="btn-preset" @click="frequency = 1000">1 kHz</button>
+            <button class="btn-preset" @click="frequency = 10000">10 kHz</button>
+          </div>
+        </div>
+
+        <!-- Waveform Control -->
+        <div class="control-group">
+          <div class="control-header">
+            <label>Waveform</label>
+            <Activity size="18" class="label-icon" />
+          </div>
+          <div class="waveform-selector">
+            <button
+              v-for="wf in waveforms"
+              :key="wf.value"
+              class="wf-btn"
+              :class="{ active: waveform === wf.value }"
+              @click="waveform = wf.value"
+              v-ripple
+            >
+              {{ wf.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Volume Control -->
+        <div class="control-group">
+          <div class="control-header">
+            <label>Volume</label>
+            <div class="vol-label">
+              <VolumeX v-if="volume == 0" size="18" />
+              <Volume2 v-else size="18" />
+              <span>{{ volume }}%</span>
+            </div>
+          </div>
+          <input
+            type="range"
+            class="slider"
+            v-model.number="volume"
+            min="0"
+            max="100"
+            step="1"
+          />
+        </div>
+
+        <!-- Play Button -->
+        <div class="action-section">
+          <button
+            class="play-btn"
+            :class="{ 'is-playing': isPlaying }"
+            @click="togglePlay"
+            v-ripple
+          >
+            <template v-if="!isPlaying">
+              <Play size="24" fill="currentColor" />
+              <span>Play Tone</span>
+            </template>
+            <template v-else>
+              <Square size="24" fill="currentColor" />
+              <span>Stop Tone</span>
+            </template>
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tone-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+@media (max-width: 640px) {
+  .tone-controls {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.control-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.control-header label {
+  font-weight: bold;
+  color: var(--text-strong);
+}
+
+.label-icon {
+  color: var(--text-secondary);
+}
+
+.number-input-container {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+}
+
+.input-label {
+  color: var(--text-strong);
+  font-weight: bold;
+  flex: 1;
+}
+
+.bare-number-input {
+  background: transparent;
+  border: none;
+  color: var(--primary-accent);
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: right;
+  width: 80px;
+  outline: none;
+  font-family: inherit;
+  padding: 0;
+}
+
+.bare-number-input::-webkit-outer-spin-button,
+.bare-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+.bare-number-input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.input-unit {
+  color: var(--text-secondary);
+  margin-left: 0.5rem;
+  font-weight: normal;
+}
+
+.vol-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+/* Common Slider Styles */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--toggle-border);
+  border-radius: 5px;
+  outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-accent);
+  cursor: pointer;
+  transition: transform 0.1s;
+  box-shadow: 0 0 10px var(--primary-accent);
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: -0.5rem;
+}
+
+.btn-preset {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--panel-border);
+  color: var(--text-secondary);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-preset:hover {
+  background: rgba(var(--primary-accent-rgb), 0.1);
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
+}
+
+.waveform-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .waveform-selector {
+    flex-wrap: wrap;
+  }
+  .wf-btn {
+    flex: 1;
+    min-width: calc(50% - 0.5rem);
+    text-align: center;
+  }
+}
+
+.wf-btn {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--panel-border);
+  color: var(--text-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s;
+}
+
+.wf-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.wf-btn.active {
+  background: rgba(var(--primary-accent-rgb), 0.15);
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.2);
+}
+
+.action-section {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.play-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: var(--primary-accent);
+  color: #fff;
+  border: none;
+  border-radius: 30px;
+  padding: 1rem 3rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(var(--primary-accent-rgb), 0.3);
+}
+
+.play-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--primary-accent-rgb), 0.4);
+}
+
+.play-btn.is-playing {
+  background: #ef4444; /* red for stop */
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+
+.play-btn.is-playing:hover {
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+</style>
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
      <div class="panel-header">
        <h2 class="tool-title">URL Cleaner</h2>
        <div class="header-actions">
-          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" v-tooltip="'Cleaning Exceptions'" v-ripple>
            <Settings size="20" />
          </button>
          <ExtensionStatus :isReady="isExtensionReady" />
@@ -137,7 +137,7 @@ onUnmounted(() => {
            :class="{ 'active': isWatchEnabled && isExtensionReady }"
            @click="toggleWatch"
            :disabled="!isExtensionReady"
-            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-tooltip="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
            v-ripple
          >
            <Power size="18" />
@@ -151,13 +151,13 @@ onUnmounted(() => {
        <div class="history-header">
          <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
          <div class="history-actions">
-            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
+            <button class="icon-btn" @click="copyAllUrls" v-tooltip="'Copy all URLs'" v-ripple>
              <Copy size="18" />
            </button>
-            <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+            <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
              <Download size="18" />
            </button>
-            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
+            <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear History'" v-ripple>
              <Trash2 size="18" />
            </button>
          </div>
@@ -176,13 +176,13 @@ onUnmounted(() => {
              </div>
            </div>
            <div class="item-actions">
-              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
-                <Copy size="18" />
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
+                <Copy size="16" />
              </button>
-              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
-                <ExternalLink size="18" />
+              <a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
+                <ExternalLink size="16" />
              </a>
-              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" v-tooltip="'Remove'" v-ripple>
                <X size="18" />
              </button>
            </div>
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -268,13 +268,13 @@ const resetToDefault = (ruleId) => {

            <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
              <div class="rule-info">
-                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" v-tooltip="'Click to edit'">{{ rule.domainPattern }}</div>
                <div class="rule-details">
                  <div class="params-list">
                    <template v-if="rule.keepAllParams">
                      <span class="detail-tag">
                        Keep all params
-                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" v-tooltip="'Disable keep all params'">
                          <X size="12" />
                        </button>
                      </span>
@@ -282,14 +282,14 @@ const resetToDefault = (ruleId) => {
                    <template v-else>
                      <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
                        {{ param }}
-                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" v-tooltip="'Remove parameter'">
                          <X size="12" />
                        </button>
                      </span>
                    </template>
                    <span v-if="rule.keepHash" class="detail-tag hash-tag">
                      Keep #
-                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" v-tooltip="'Remove hash exception'">
                        <X size="12" />
                      </button>
                    </span>
@@ -302,7 +302,7 @@ const resetToDefault = (ruleId) => {
                <button
                  class="icon-btn"
                  @click="toggleRule(rule.id)"
-                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
                  v-ripple
                >
                  <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
@@ -312,12 +312,12 @@ const resetToDefault = (ruleId) => {
                  v-if="!rule.isDefault"
                  class="icon-btn delete-btn"
                  @click="removeRule(rule.id)"
-                  title="Remove rule"
+                  v-tooltip="'Remove rule'"
                  v-ripple
                >
                  <Trash2 size="18" />
                </button>
-                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" v-tooltip="'Restore default rule'" v-ripple>
                  <RotateCcw size="16" /> Default
                </button>
              </div>
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" v-tooltip="isReady ? 'Extension Connected' : 'Extension Not Connected'">
    <Plug v-if="isReady" size="18" />
    <Plus v-else size="18" />
  </div>
--- a/src/composables/useTooltip.js
+++ b/src/composables/useTooltip.js
@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+
+export const tooltipState = reactive({
+  isVisible: false,
+  text: '',
+  targetRect: null
+})
+
+export function showTooltip(el, text) {
+  if (!text) return;
+
+  if (!el.hasAttribute('aria-label')) {
+    el.setAttribute('aria-label', text);
+  }
+
+  const rect = el.getBoundingClientRect();
+  tooltipState.targetRect = {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    bottom: rect.bottom
+  };
+  tooltipState.text = text;
+  tooltipState.isVisible = true;
+}
+
+// Hide tooltip on any scroll event to avoid floating detached tooltips
+if (typeof window !== 'undefined') {
+  window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
+}
+
+export function hideTooltip() {
+  tooltipState.isVisible = false;
+}
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -0,0 +1,84 @@
+import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
+
+export const tooltipDirective = {
+  mounted(el, binding) {
+    el._tooltipText = binding.value;
+    let touchTimeout = null;
+    let isTouch = false;
+
+    el._handleMouseEnter = () => {
+      if (!isTouch) showTooltip(el, el._tooltipText);
+    };
+    el._handleMouseLeave = () => {
+      if (!isTouch) hideTooltip();
+    };
+    el._handleFocus = () => {
+      if (!isTouch) showTooltip(el, el._tooltipText);
+    };
+    el._handleBlur = () => {
+      if (!isTouch) hideTooltip();
+    };
+
+    el._handleTouchStart = () => {
+      isTouch = true;
+      if (touchTimeout) clearTimeout(touchTimeout);
+      touchTimeout = setTimeout(() => {
+        showTooltip(el, el._tooltipText);
+      }, 400); // 400ms long press threshold
+    };
+
+    el._handleTouchEnd = () => {
+      if (touchTimeout) clearTimeout(touchTimeout);
+      hideTooltip();
+      // Block ensuing simulated mouseenter events
+      setTimeout(() => { isTouch = false; }, 500);
+    };
+
+    el._handleTouchCancel = () => {
+      if (touchTimeout) clearTimeout(touchTimeout);
+      hideTooltip();
+      setTimeout(() => { isTouch = false; }, 500);
+    };
+
+    el._handleContextMenu = (e) => {
+      // Prevent the OS context menu if we're showing a tooltip via long press
+      if (isTouch && tooltipState.isVisible && tooltipState.text === el._tooltipText) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('mouseenter', el._handleMouseEnter);
+    el.addEventListener('mouseleave', el._handleMouseLeave);
+    el.addEventListener('focus', el._handleFocus);
+    el.addEventListener('blur', el._handleBlur);
+
+    el.addEventListener('touchstart', el._handleTouchStart, { passive: true });
+    el.addEventListener('touchend', el._handleTouchEnd);
+    el.addEventListener('touchmove', el._handleTouchCancel, { passive: true });
+    el.addEventListener('touchcancel', el._handleTouchCancel);
+    el.addEventListener('contextmenu', el._handleContextMenu);
+  },
+  updated(el, binding) {
+    el._tooltipText = binding.value;
+
+    if (tooltipState.isVisible && tooltipState.text !== binding.value) {
+      if (el.matches(':hover') || document.activeElement === el) {
+        showTooltip(el, binding.value);
+      }
+    }
+  },
+  unmounted(el) {
+    if (el._handleMouseEnter) {
+      el.removeEventListener('mouseenter', el._handleMouseEnter);
+      el.removeEventListener('mouseleave', el._handleMouseLeave);
+      el.removeEventListener('focus', el._handleFocus);
+      el.removeEventListener('blur', el._handleBlur);
+      el.removeEventListener('touchstart', el._handleTouchStart);
+      el.removeEventListener('touchend', el._handleTouchEnd);
+      el.removeEventListener('touchmove', el._handleTouchCancel);
+      el.removeEventListener('touchcancel', el._handleTouchCancel);
+      el.removeEventListener('contextmenu', el._handleContextMenu);
+    }
+    hideTooltip();
+  }
+};
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import Ripple from './directives/ripple'
+import { tooltipDirective } from './directives/tooltip'
 import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'

 // Configure BarcodeDetector polyfill to use local WASM file
@@ -28,5 +29,6 @@ try {
 const app = createApp(App)

 app.directive('ripple', Ripple)
+app.directive('tooltip', tooltipDirective)
 app.use(router)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
 import UrlCleaner from '../components/tools/UrlCleaner.vue'
 import QrScanner from '../components/tools/QrScanner.vue'
 import QrCode from '../components/tools/QrCode.vue'
+import ToneGenerator from '../components/tools/ToneGenerator.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'

 const routes = [
@@ -42,6 +43,11 @@ const routes = [
    path: '/extension-privacy-policy',
    name: 'PrivacyPolicy',
    component: PrivacyPolicy
+  },
+  {
+    path: '/tone-generator',
+    name: 'ToneGenerator',
+    component: ToneGenerator
  }
 ]

--- a/src/style.css
+++ b/src/style.css
@@ -24,6 +24,7 @@
  --accent-cyan: #00f2fe;
  --accent-purple: #4facfe;
  --primary-accent: #00f2fe;
+  --primary-accent-rgb: 0, 242, 254;
  --title-glow: rgba(0, 255, 255, 0.2);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-border: rgba(255, 255, 255, 0.2);
@@ -65,6 +66,7 @@
  --accent-cyan: #0ea5e9;
  --accent-purple: #6366f1;
  --primary-accent: #0ea5e9;
+  --primary-accent-rgb: 14, 165, 233;
  --title-glow: rgba(14, 165, 233, 0.35);
  --toggle-bg: rgba(255, 255, 255, 1);
  --toggle-border: rgba(15, 23, 42, 0.2);
Author	SHA1	Message	Date
Grzegorz Kucmierz	15a6a143ee	0.7.0 All checks were successful Deploy to Production / deploy (push) Successful in 15s Details	2026-03-04 06:14:03 +00:00
Grzegorz Kucmierz	024bd0f20d	feat: add Tone Generator tool with precise audio controls and wave selection	2026-03-04 06:13:52 +00:00
Grzegorz Kucmierz	d395d8754a	0.6.24 All checks were successful Deploy to Production / deploy (push) Successful in 27s Details	2026-03-04 05:29:38 +00:00
Grzegorz Kucmierz	4c1815b3b3	chore: add open graph meta tags and preview image All checks were successful Deploy to Production / deploy (push) Successful in 14s Details	2026-03-04 05:28:31 +00:00
Grzegorz Kucmierz	d82f5ec7c5	0.6.23 All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 05:22:07 +00:00
Grzegorz Kucmierz	4711102407	feat(qr): improve mobile UX for scanner and generator	2026-03-04 05:21:53 +00:00
Grzegorz Kucmierz	a367d364df	0.6.22 All checks were successful Deploy to Production / deploy (push) Successful in 16s Details	2026-03-04 04:30:46 +00:00
Grzegorz Kucmierz	27fee3ac34	feat: replace native titles with global vue tooltips	2026-03-04 04:30:38 +00:00