Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
15a6a143ee
|
|||
|
024bd0f20d
|
|||
|
d395d8754a
|
|||
|
4c1815b3b3
|
|||
|
d82f5ec7c5
|
|||
|
4711102407
|
|||
|
a367d364df
|
|||
|
27fee3ac34
|
@@ -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.21",
|
"version": "0.7.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "tools-app",
|
"name": "tools-app",
|
||||||
"version": "0.6.21",
|
"version": "0.7.0",
|
||||||
"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.21",
|
"version": "0.7.0",
|
||||||
"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 |
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
|
|||||||
import Sidebar from './components/Sidebar.vue'
|
import Sidebar from './components/Sidebar.vue'
|
||||||
import InstallPrompt from './components/InstallPrompt.vue'
|
import InstallPrompt from './components/InstallPrompt.vue'
|
||||||
import ReloadPrompt from './components/ReloadPrompt.vue'
|
import ReloadPrompt from './components/ReloadPrompt.vue'
|
||||||
|
import GlobalTooltip from './components/common/GlobalTooltip.vue'
|
||||||
import { UI_CONFIG } from './config/ui'
|
import { UI_CONFIG } from './config/ui'
|
||||||
|
|
||||||
const isSidebarOpen = ref(window.innerWidth >= 768)
|
const isSidebarOpen = ref(window.innerWidth >= 768)
|
||||||
@@ -61,6 +62,7 @@ onUnmounted(() => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
<InstallPrompt />
|
<InstallPrompt />
|
||||||
<ReloadPrompt />
|
<ReloadPrompt />
|
||||||
|
<GlobalTooltip />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ onMounted(() => {
|
|||||||
class="menu-btn"
|
class="menu-btn"
|
||||||
@click="$emit('toggleSidebar')"
|
@click="$emit('toggleSidebar')"
|
||||||
aria-label="Toggle Menu"
|
aria-label="Toggle Menu"
|
||||||
title="Toggle Menu"
|
v-tooltip="'Toggle Menu'"
|
||||||
v-ripple
|
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">
|
<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
|
<button
|
||||||
class="btn-neon nav-btn icon-only"
|
class="btn-neon nav-btn icon-only"
|
||||||
@click="toggleTheme"
|
@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
|
v-ripple
|
||||||
>
|
>
|
||||||
<Sun v-if="isDark" :size="20" />
|
<Sun v-if="isDark" :size="20" />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
138
src/components/common/GlobalTooltip.vue
Normal file
138
src/components/common/GlobalTooltip.vue
Normal file
@@ -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>
|
||||||
@@ -62,7 +62,7 @@ const clearText = () => {
|
|||||||
class="btn-neon"
|
class="btn-neon"
|
||||||
@click="startListening"
|
@click="startListening"
|
||||||
:disabled="!isExtensionReady"
|
:disabled="!isExtensionReady"
|
||||||
:title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
|
v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
Start Sniffing
|
Start Sniffing
|
||||||
|
|||||||
@@ -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,50 +345,47 @@ 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"
|
|
||||||
title="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">
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label>Size (px)</label>
|
<label>Size (px)</label>
|
||||||
<div class="number-control size-control">
|
<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 - 100)" v-tooltip="'-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 - 10)" v-tooltip="'-10'" v-ripple>-10</button>
|
||||||
<input type="number" v-model.number="size" class="number-input" />
|
<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 += 10" v-tooltip="'+10'" v-ripple>+10</button>
|
||||||
<button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
|
<button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -322,7 +322,7 @@ const isUrl = (string) => {
|
|||||||
v-if="hasMultipleCameras"
|
v-if="hasMultipleCameras"
|
||||||
class="switch-camera-btn"
|
class="switch-camera-btn"
|
||||||
@click.stop="switchCamera"
|
@click.stop="switchCamera"
|
||||||
title="Switch Camera"
|
v-tooltip="'Switch Camera'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
<SwitchCamera size="24" />
|
<SwitchCamera size="24" />
|
||||||
@@ -333,13 +333,13 @@ const isUrl = (string) => {
|
|||||||
<div class="results-header">
|
<div class="results-header">
|
||||||
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
|
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
|
||||||
<div v-if="scannedCodes.length > 0" class="header-actions">
|
<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" />
|
<Copy size="18" />
|
||||||
</button>
|
</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" />
|
<Download size="18" />
|
||||||
</button>
|
</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" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -358,13 +358,13 @@ const isUrl = (string) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-actions">
|
<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" />
|
<Copy size="18" />
|
||||||
</button>
|
</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" />
|
<QrCode size="18" />
|
||||||
</button>
|
</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" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -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;
|
||||||
|
|||||||
438
src/components/tools/ToneGenerator.vue
Normal file
438
src/components/tools/ToneGenerator.vue
Normal file
@@ -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>
|
||||||
@@ -110,7 +110,7 @@ onUnmounted(() => {
|
|||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<h2 class="tool-title">URL Cleaner</h2>
|
<h2 class="tool-title">URL Cleaner</h2>
|
||||||
<div class="header-actions">
|
<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" />
|
<Settings size="20" />
|
||||||
</button>
|
</button>
|
||||||
<ExtensionStatus :isReady="isExtensionReady" />
|
<ExtensionStatus :isReady="isExtensionReady" />
|
||||||
@@ -137,7 +137,7 @@ onUnmounted(() => {
|
|||||||
:class="{ 'active': isWatchEnabled && isExtensionReady }"
|
:class="{ 'active': isWatchEnabled && isExtensionReady }"
|
||||||
@click="toggleWatch"
|
@click="toggleWatch"
|
||||||
:disabled="!isExtensionReady"
|
: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
|
v-ripple
|
||||||
>
|
>
|
||||||
<Power size="18" />
|
<Power size="18" />
|
||||||
@@ -151,13 +151,13 @@ onUnmounted(() => {
|
|||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
|
<h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
|
||||||
<div class="history-actions">
|
<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" />
|
<Copy size="18" />
|
||||||
</button>
|
</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" />
|
<Download size="18" />
|
||||||
</button>
|
</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" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -176,13 +176,13 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-actions">
|
<div class="item-actions">
|
||||||
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
|
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
|
||||||
<Copy size="18" />
|
<Copy size="16" />
|
||||||
</button>
|
</button>
|
||||||
<a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
|
<a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
|
||||||
<ExternalLink size="18" />
|
<ExternalLink size="16" />
|
||||||
</a>
|
</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" />
|
<X size="18" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -268,13 +268,13 @@ const resetToDefault = (ruleId) => {
|
|||||||
|
|
||||||
<div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
|
<div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
|
||||||
<div class="rule-info">
|
<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="rule-details">
|
||||||
<div class="params-list">
|
<div class="params-list">
|
||||||
<template v-if="rule.keepAllParams">
|
<template v-if="rule.keepAllParams">
|
||||||
<span class="detail-tag">
|
<span class="detail-tag">
|
||||||
Keep all params
|
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" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
@@ -282,14 +282,14 @@ const resetToDefault = (ruleId) => {
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<span v-for="param in rule.keepParams" :key="param" class="detail-tag">
|
<span v-for="param in rule.keepParams" :key="param" class="detail-tag">
|
||||||
{{ param }}
|
{{ 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" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-if="rule.keepHash" class="detail-tag hash-tag">
|
<span v-if="rule.keepHash" class="detail-tag hash-tag">
|
||||||
Keep #
|
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" />
|
<X size="12" />
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
@@ -302,7 +302,7 @@ const resetToDefault = (ruleId) => {
|
|||||||
<button
|
<button
|
||||||
class="icon-btn"
|
class="icon-btn"
|
||||||
@click="toggleRule(rule.id)"
|
@click="toggleRule(rule.id)"
|
||||||
:title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
|
v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
|
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
|
||||||
@@ -312,12 +312,12 @@ const resetToDefault = (ruleId) => {
|
|||||||
v-if="!rule.isDefault"
|
v-if="!rule.isDefault"
|
||||||
class="icon-btn delete-btn"
|
class="icon-btn delete-btn"
|
||||||
@click="removeRule(rule.id)"
|
@click="removeRule(rule.id)"
|
||||||
title="Remove rule"
|
v-tooltip="'Remove rule'"
|
||||||
v-ripple
|
v-ripple
|
||||||
>
|
>
|
||||||
<Trash2 size="18" />
|
<Trash2 size="18" />
|
||||||
</button>
|
</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
|
<RotateCcw size="16" /> Default
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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" />
|
<Plug v-if="isReady" size="18" />
|
||||||
<Plus v-else size="18" />
|
<Plus v-else size="18" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
34
src/composables/useTooltip.js
Normal file
34
src/composables/useTooltip.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
84
src/directives/tooltip.js
Normal file
84
src/directives/tooltip.js
Normal file
@@ -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();
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -3,6 +3,7 @@ import './style.css'
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import Ripple from './directives/ripple'
|
import Ripple from './directives/ripple'
|
||||||
|
import { tooltipDirective } from './directives/tooltip'
|
||||||
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
|
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
|
||||||
|
|
||||||
// Configure BarcodeDetector polyfill to use local WASM file
|
// Configure BarcodeDetector polyfill to use local WASM file
|
||||||
@@ -28,5 +29,6 @@ try {
|
|||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.directive('ripple', Ripple)
|
app.directive('ripple', Ripple)
|
||||||
|
app.directive('tooltip', tooltipDirective)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -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