0.8.0

README.md

@@ -40,6 +40,20 @@ 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.
+
+### 🎙️ FFT Audio Analyzer
+Visualize audio signals from your microphone in real-time.
+- **Local Processing:** Utilizes the Web Audio API to process sound locally; no audio leaves your device.
+- **Adjustable Resolution:** Modify the FFT size (Fast Fourier Transform resolution) for higher fidelity or speed.
+- **Smoothing Controls:** Adjust the temporal smoothing parameter for fluid visualizations.
+- **Live Canvas Rendering:** Silky smooth 60fps frame rate via requestAnimationFrame.
+
 ---
 
 ## Chrome Extension 🧩

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.6.24",
+  "version": "0.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.6.24",
+      "version": "0.8.0",
       "hasInstallScript": true,
       "dependencies": {
         "@gkucmierz/utils": "^1.28.7",

package.json

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

src/components/Sidebar.vue

@@ -15,6 +15,8 @@ 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>
+      <router-link to="/fft-analyzer" class="nav-item" v-ripple>FFT Analyzer</router-link>
     </nav>
   </aside>
 </template>

src/components/tools/FftAnalyzer.vue

@@ -0,0 +1,427 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { Mic, MicOff, Settings, Activity } from 'lucide-vue-next'
+
+const isListening = ref(false)
+const hasError = ref(false)
+const errorMessage = ref('')
+const canvasRef = ref(null)
+
+// Analyzer Settings
+const fftSize = ref('2048')
+const smoothingTimeConstant = ref(0.8)
+
+const fftOptions = [
+  { value: '256', label: 'Very Low (256/Fast)' },
+  { value: '512', label: 'Low (512)' },
+  { value: '1024', label: 'Medium (1024)' },
+  { value: '2048', label: 'High (2048)' },
+  { value: '4096', label: 'Ultra (4096)' },
+  { value: '8192', label: 'Max (8192/Slow)' }
+]
+
+let audioContext = null
+let analyser = null
+let microphone = null
+let dataArray = null
+let animationId = null
+let canvasCtx = null
+
+const initAudio = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: false,
+        autoGainControl: false,
+        noiseSuppression: false
+      }
+    })
+
+    // Initialize Audio Context
+    audioContext = new (window.AudioContext || window.webkitAudioContext)()
+    analyser = audioContext.createAnalyser()
+
+    // Apply Settings
+    analyser.fftSize = parseInt(fftSize.value, 10)
+    analyser.smoothingTimeConstant = smoothingTimeConstant.value
+
+    microphone = audioContext.createMediaStreamSource(stream)
+    microphone.connect(analyser)
+
+    // Buffer for data
+    const bufferLength = analyser.frequencyBinCount
+    dataArray = new Uint8Array(bufferLength)
+
+    if (canvasRef.value) {
+      canvasCtx = canvasRef.value.getContext('2d')
+    }
+
+    isListening.value = true
+    hasError.value = false
+    draw()
+  } catch (err) {
+    console.error('Error accessing microphone:', err)
+    hasError.value = true
+    errorMessage.value = 'Could not access the microphone. Please check your system permissions.'
+    isListening.value = false
+  }
+}
+
+const stopAudio = () => {
+  isListening.value = false
+
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+
+  if (microphone) {
+    microphone.disconnect()
+    microphone.mediaStream.getTracks().forEach(track => track.stop())
+    microphone = null
+  }
+
+  if (analyser) {
+    analyser.disconnect()
+    analyser = null
+  }
+
+  if (audioContext) {
+    audioContext.close()
+    audioContext = null
+  }
+
+  // Clear Canvas
+  if (canvasCtx && canvasRef.value) {
+    canvasCtx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  }
+}
+
+const toggleListen = () => {
+  if (isListening.value) {
+    stopAudio()
+  } else {
+    initAudio()
+  }
+}
+
+const draw = () => {
+  if (!isListening.value || !canvasRef.value || !canvasCtx || !analyser) return
+
+  animationId = requestAnimationFrame(draw)
+
+  const width = canvasRef.value.width
+  const height = canvasRef.value.height
+
+  analyser.getByteFrequencyData(dataArray)
+
+  // Clear canvas for next frame
+  canvasCtx.clearRect(0, 0, width, height)
+
+  const bufferLength = analyser.frequencyBinCount
+  const barWidth = (width / bufferLength) * 2.5 // scale factor to look nicer
+  let barHeight
+  let x = 0
+
+  for (let i = 0; i < bufferLength; i++) {
+    barHeight = dataArray[i]
+
+    // Calculate color based on height/frequency
+    // We use a CSS variable mapped to RGB or a fallback gradient
+    const r = barHeight + (25 * (i/bufferLength))
+    const g = 250 * (i/bufferLength)
+    const b = 250 - (barHeight/2)
+
+    canvasCtx.fillStyle = `rgb(${r},${g},${b})`
+    // Draw from bottom up
+    canvasCtx.fillRect(x, height - barHeight, barWidth, barHeight)
+
+    x += barWidth + 1 // Add 1px gap between bars
+  }
+}
+
+// Watchers for live updating settings without needing a restart if already running
+watch(fftSize, (newVal) => {
+  if (analyser) {
+    analyser.fftSize = parseInt(newVal, 10)
+    dataArray = new Uint8Array(analyser.frequencyBinCount) // Recreate array with new size
+  }
+})
+
+watch(smoothingTimeConstant, (newVal) => {
+  if (analyser) {
+    analyser.smoothingTimeConstant = newVal
+  }
+})
+
+const handleResize = () => {
+  if (canvasRef.value) {
+    // Make canvas responsive to its container width
+    const container = canvasRef.value.parentElement
+    canvasRef.value.width = container.clientWidth
+    canvasRef.value.height = 300 // Fixed height or could be dynamic
+  }
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  stopAudio()
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">FFT Audio Analyzer</h2>
+      </div>
+
+      <div class="fft-layout">
+        <div class="canvas-container">
+          <canvas ref="canvasRef"></canvas>
+          <div class="empty-state" v-if="!isListening && !hasError">
+            <Activity size="48" class="pulse-icon" />
+            <p>Click start to visualize your microphone audio</p>
+          </div>
+          <div class="error-state" v-if="hasError">
+            <p class="error-msg">{{ errorMessage }}</p>
+          </div>
+        </div>
+
+        <div class="controls-section">
+          <!-- Main Action -->
+          <div class="action-row">
+            <button
+              class="listen-btn"
+              :class="{ 'is-active': isListening }"
+              @click="toggleListen"
+              v-ripple
+            >
+              <template v-if="!isListening">
+                <Mic size="24" />
+                <span>Start Listening</span>
+              </template>
+              <template v-else>
+                <MicOff size="24" />
+                <span>Stop Listening</span>
+              </template>
+            </button>
+          </div>
+
+          <!-- Settings -->
+          <div class="settings-grid">
+            <div class="control-group">
+              <label>FFT Size (Resolution)</label>
+              <select v-model="fftSize" class="select-input">
+                <option v-for="opt in fftOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
+              </select>
+            </div>
+
+            <div class="control-group">
+              <label>
+                Smoothing
+                <span class="value-readout">{{ smoothingTimeConstant.toFixed(2) }}</span>
+              </label>
+              <input
+                type="range"
+                class="slider"
+                v-model.number="smoothingTimeConstant"
+                min="0"
+                max="0.99"
+                step="0.01"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fft-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.canvas-container {
+  width: 100%;
+  height: 300px;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid var(--panel-border);
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+:global(:root[data-theme="light"]) .canvas-container {
+  background: rgba(15, 23, 42, 0.05); /* Slight dark tint to make neon colors pop in light mode */
+  border-color: rgba(15, 23, 42, 0.1);
+  box-shadow: inset 0 2px 10px rgba(15, 23, 42, 0.05);
+}
+
+canvas {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  /* Prevent interaction so clicks pass down if needed */
+  pointer-events: none;
+}
+
+.empty-state {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: var(--text-muted);
+}
+
+.pulse-icon {
+  opacity: 0.5;
+  animation: idlePulse 3s ease-in-out infinite;
+}
+
+@keyframes idlePulse {
+  0% { transform: scale(0.9); opacity: 0.3; }
+  50% { transform: scale(1.1); opacity: 0.6; }
+  100% { transform: scale(0.9); opacity: 0.3; }
+}
+
+.error-state {
+  position: absolute;
+  padding: 1rem;
+  text-align: center;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 8px;
+  color: #ef4444;
+}
+
+.controls-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+@media (max-width: 640px) {
+  .controls-section {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+.action-row {
+  display: flex;
+  justify-content: center;
+}
+
+.listen-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);
+  width: 100%;
+  max-width: 300px;
+}
+
+.listen-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--primary-accent-rgb), 0.4);
+}
+
+.listen-btn.is-active {
+  background: #ef4444; /* red for stop */
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+
+.listen-btn.is-active:hover {
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.control-group label {
+  font-weight: bold;
+  color: var(--text-strong);
+  display: flex;
+  justify-content: space-between;
+}
+
+.value-readout {
+  color: var(--primary-accent);
+  font-family: monospace;
+}
+
+/* Slider Styles */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--toggle-border);
+  border-radius: 5px;
+  outline: none;
+  margin-top: 0.5rem;
+}
+
+.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);
+}
+</style>

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>

src/router/index.js

@@ -5,6 +5,8 @@ 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 FftAnalyzer from '../components/tools/FftAnalyzer.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'
 
 const routes = [
@@ -42,6 +44,16 @@ const routes = [
     path: '/extension-privacy-policy',
     name: 'PrivacyPolicy',
     component: PrivacyPolicy
+  },
+  {
+    path: '/tone-generator',
+    name: 'ToneGenerator',
+    component: ToneGenerator
+  },
+  {
+    path: '/fft-analyzer',
+    name: 'FftAnalyzer',
+    component: FftAnalyzer
   }
 ]
 

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