0.7.1

style: add svg icons for waveforms in Tone Generator
0.7.0
2026-03-04 06:19:59 +00:00 · 2026-03-04 06:19:58 +00:00 · 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
9 changed files with 487 additions and 3 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.23",
+  "version": "0.7.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tools-app",
-      "version": "0.6.23",
+      "version": "0.7.1",
      "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.23",
+  "version": "0.7.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/public/preview.png
+++ b/public/preview.png
--- 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/tools/ToneGenerator.vue
+++ b/src/components/tools/ToneGenerator.vue
@@ -0,0 +1,464 @@
+<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', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3.5-8 5.5-8 9 0 3.5 8 5.5 8 9 0"/></svg>' },
+  { value: 'square', label: 'Square', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15h6V9h6v6h6"/></svg>' },
+  { value: 'sawtooth', label: 'Sawtooth', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15l8-8v8l8-8v8"/></svg>' },
+  { value: 'triangle', label: 'Triangle', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-6 8 12 6-8"/></svg>' }
+]
+
+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
+            >
+              <div class="wf-btn-content">
+                <span class="wf-label">{{ wf.label }}</span>
+                <span class="wf-icon" v-html="wf.icon"></span>
+              </div>
+            </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;
+  flex: 1; /* make buttons take even space by default on desktop too */
+}
+
+.wf-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.wf-label {
+  flex: 1;
+  text-align: left;
+}
+
+.wf-icon {
+  display: flex;
+  opacity: 0.6;
+  transition: opacity 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);
+}
+
+.wf-btn.active .wf-icon {
+  opacity: 1;
+}
+
+.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/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	65089fb6d2	0.7.1 All checks were successful Deploy to Production / deploy (push) Successful in 24s Details	2026-03-04 06:19:59 +00:00
Grzegorz Kucmierz	ba6514add2	style: add svg icons for waveforms in Tone Generator	2026-03-04 06:19:58 +00:00
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