Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
65089fb6d2
|
|||
|
ba6514add2
|
|||
|
15a6a143ee
|
|||
|
024bd0f20d
|
|||
|
d395d8754a
|
|||
|
4c1815b3b3
|
|||
|
d82f5ec7c5
|
|||
|
4711102407
|
@@ -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.
|
- **History:** Keeps a log of scanned codes with options to copy or download as JSON.
|
||||||
- **Responsive:** Fullscreen mode for immersive scanning experience.
|
- **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 🧩
|
## Chrome Extension 🧩
|
||||||
|
|||||||
@@ -7,6 +7,10 @@
|
|||||||
<meta name="theme-color" content="#4facfe" />
|
<meta name="theme-color" content="#4facfe" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Tools App</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"version": "0.6.22",
|
"version": "0.7.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"version": "0.6.22",
|
"version": "0.7.1",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gkucmierz/utils": "^1.28.7",
|
"@gkucmierz/utils": "^1.28.7",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.6.22",
|
"version": "0.7.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
BIN
public/preview.png
Normal file
BIN
public/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
@@ -15,6 +15,7 @@ defineProps({
|
|||||||
<router-link to="/url-cleaner" class="nav-item" v-ripple>URL Cleaner</router-link>
|
<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-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="/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>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -113,7 +113,13 @@ const onDrag = (e) => {
|
|||||||
posRef.value[`y${point}`] = Math.round(y)
|
posRef.value[`y${point}`] = Math.round(y)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let justDragged = false
|
||||||
|
|
||||||
const stopDrag = () => {
|
const stopDrag = () => {
|
||||||
|
if (activeHandle.value) {
|
||||||
|
justDragged = true
|
||||||
|
setTimeout(() => { justDragged = false }, 50)
|
||||||
|
}
|
||||||
activeHandle.value = null
|
activeHandle.value = null
|
||||||
window.removeEventListener('mousemove', onDrag)
|
window.removeEventListener('mousemove', onDrag)
|
||||||
window.removeEventListener('mouseup', stopDrag)
|
window.removeEventListener('mouseup', stopDrag)
|
||||||
@@ -121,6 +127,14 @@ const stopDrag = () => {
|
|||||||
window.removeEventListener('touchend', 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
|
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
|
||||||
|
|
||||||
let worker = null
|
let worker = null
|
||||||
@@ -331,39 +345,36 @@ const triggerDownload = (blob, filename) => {
|
|||||||
|
|
||||||
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
||||||
<div class="qr-container">
|
<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 class="svg-wrapper" ref="qrFrameRef">
|
||||||
<div v-html="svgContent" class="svg-content-box"></div>
|
<div v-html="svgContent" class="svg-content-box"></div>
|
||||||
|
|
||||||
<template v-if="showHandles">
|
<template v-if="showHandles">
|
||||||
<!-- Background Gradient Handles -->
|
<!-- Background Gradient Handles -->
|
||||||
<template v-if="!isBgTransparent && bgType !== 'solid'">
|
<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-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')"></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>
|
<svg class="grad-line-svg"><line :x1="bgLinePts.x1 + '%'" :y1="bgLinePts.y1 + '%'" :x2="bgLinePts.x2 + '%'" :y2="bgLinePts.y2 + '%'" class="bg-line" /></svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Foreground Gradient Handles -->
|
<!-- Foreground Gradient Handles -->
|
||||||
<template v-if="fgType !== 'solid'">
|
<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-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')"></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>
|
<svg class="grad-line-svg"><line :x1="fgLinePts.x1 + '%'" :y1="fgLinePts.y1 + '%'" :x2="fgLinePts.x2 + '%'" :y2="fgLinePts.y2 + '%'" class="fg-line" /></svg>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</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"
|
|
||||||
v-tooltip="'Toggle edit handles'"
|
|
||||||
>
|
|
||||||
<Eye v-if="showHandles" size="20" />
|
|
||||||
<EyeOff v-else size="20" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="download-settings">
|
<div class="download-settings">
|
||||||
@@ -504,26 +515,7 @@ const triggerDownload = (blob, filename) => {
|
|||||||
position: relative;
|
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 {
|
:root[data-theme="light"] .preview-section {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
@@ -619,5 +611,23 @@ const triggerDownload = (blob, filename) => {
|
|||||||
min-width: 100px !important;
|
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>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -492,9 +492,11 @@ const isUrl = (string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.switch-camera-btn {
|
.switch-camera-btn {
|
||||||
position: absolute;
|
position: absolute !important;
|
||||||
top: 1rem;
|
top: auto !important;
|
||||||
right: 1rem;
|
left: auto !important;
|
||||||
|
bottom: 0.75rem !important;
|
||||||
|
right: 0.75rem !important;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
464
src/components/tools/ToneGenerator.vue
Normal file
464
src/components/tools/ToneGenerator.vue
Normal file
@@ -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>
|
||||||
@@ -3,11 +3,60 @@ import { showTooltip, hideTooltip, tooltipState } from '../composables/useToolti
|
|||||||
export const tooltipDirective = {
|
export const tooltipDirective = {
|
||||||
mounted(el, binding) {
|
mounted(el, binding) {
|
||||||
el._tooltipText = binding.value;
|
el._tooltipText = binding.value;
|
||||||
|
let touchTimeout = null;
|
||||||
|
let isTouch = false;
|
||||||
|
|
||||||
el.addEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
|
el._handleMouseEnter = () => {
|
||||||
el.addEventListener('mouseleave', hideTooltip);
|
if (!isTouch) showTooltip(el, el._tooltipText);
|
||||||
el.addEventListener('focus', () => showTooltip(el, el._tooltipText));
|
};
|
||||||
el.addEventListener('blur', hideTooltip);
|
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) {
|
updated(el, binding) {
|
||||||
el._tooltipText = binding.value;
|
el._tooltipText = binding.value;
|
||||||
@@ -19,10 +68,17 @@ export const tooltipDirective = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
unmounted(el) {
|
unmounted(el) {
|
||||||
el.removeEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
|
if (el._handleMouseEnter) {
|
||||||
el.removeEventListener('mouseleave', hideTooltip);
|
el.removeEventListener('mouseenter', el._handleMouseEnter);
|
||||||
el.removeEventListener('focus', () => showTooltip(el, el._tooltipText));
|
el.removeEventListener('mouseleave', el._handleMouseLeave);
|
||||||
el.removeEventListener('blur', hideTooltip);
|
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();
|
hideTooltip();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
|
|||||||
import UrlCleaner from '../components/tools/UrlCleaner.vue'
|
import UrlCleaner from '../components/tools/UrlCleaner.vue'
|
||||||
import QrScanner from '../components/tools/QrScanner.vue'
|
import QrScanner from '../components/tools/QrScanner.vue'
|
||||||
import QrCode from '../components/tools/QrCode.vue'
|
import QrCode from '../components/tools/QrCode.vue'
|
||||||
|
import ToneGenerator from '../components/tools/ToneGenerator.vue'
|
||||||
import PrivacyPolicy from '../views/PrivacyPolicy.vue'
|
import PrivacyPolicy from '../views/PrivacyPolicy.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@@ -42,6 +43,11 @@ const routes = [
|
|||||||
path: '/extension-privacy-policy',
|
path: '/extension-privacy-policy',
|
||||||
name: 'PrivacyPolicy',
|
name: 'PrivacyPolicy',
|
||||||
component: PrivacyPolicy
|
component: PrivacyPolicy
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/tone-generator',
|
||||||
|
name: 'ToneGenerator',
|
||||||
|
component: ToneGenerator
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,7 @@
|
|||||||
--accent-cyan: #00f2fe;
|
--accent-cyan: #00f2fe;
|
||||||
--accent-purple: #4facfe;
|
--accent-purple: #4facfe;
|
||||||
--primary-accent: #00f2fe;
|
--primary-accent: #00f2fe;
|
||||||
|
--primary-accent-rgb: 0, 242, 254;
|
||||||
--title-glow: rgba(0, 255, 255, 0.2);
|
--title-glow: rgba(0, 255, 255, 0.2);
|
||||||
--toggle-bg: rgba(255, 255, 255, 0.08);
|
--toggle-bg: rgba(255, 255, 255, 0.08);
|
||||||
--toggle-border: rgba(255, 255, 255, 0.2);
|
--toggle-border: rgba(255, 255, 255, 0.2);
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
--accent-cyan: #0ea5e9;
|
--accent-cyan: #0ea5e9;
|
||||||
--accent-purple: #6366f1;
|
--accent-purple: #6366f1;
|
||||||
--primary-accent: #0ea5e9;
|
--primary-accent: #0ea5e9;
|
||||||
|
--primary-accent-rgb: 14, 165, 233;
|
||||||
--title-glow: rgba(14, 165, 233, 0.35);
|
--title-glow: rgba(14, 165, 233, 0.35);
|
||||||
--toggle-bg: rgba(255, 255, 255, 1);
|
--toggle-bg: rgba(255, 255, 255, 1);
|
||||||
--toggle-border: rgba(15, 23, 42, 0.2);
|
--toggle-border: rgba(15, 23, 42, 0.2);
|
||||||
|
|||||||
Reference in New Issue
Block a user