0.6.15

README.md

@@ -20,6 +20,26 @@ Monitor and capture your clipboard history in real-time.
 - Clears history on demand.
 - Privacy-focused: Data is processed locally and never sent to any server.
 
+### 🔗 URL Cleaner
+Clean tracking parameters and clutter from URLs.
+- **Privacy:** Removes known tracking parameters (UTM, fbclid, gclid, etc.).
+- **Bulk Processing:** Clean list of URLs at once.
+- **Customizable:** Manage exceptions to keep specific parameters.
+- **Smart:** "Direct Clean" mode for quick single-URL cleaning.
+
+### ⬛ QR Generator
+Create custom QR codes instantly.
+- **Customizable:** Adjustable error correction level and size.
+- **Download:** Save as PNG (raster) or SVG (vector) for high-quality printing.
+- **Persistent Settings:** Remembers your preferences.
+
+### 📷 QR Scanner
+Scan QR codes directly from your camera or device.
+- **Privacy First:** Works entirely in the browser using local `BarcodeDetector` API. No images are sent to any server.
+- **Multi-Camera:** Support for front and back cameras with easy switching.
+- **History:** Keeps a log of scanned codes with options to copy or download as JSON.
+- **Responsive:** Fullscreen mode for immersive scanning experience.
+
 ---
 
 ## Chrome Extension 🧩

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "tools-app",
-  "version": "0.6.8",
+  "version": "0.6.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.6.8",
+      "version": "0.6.15",
       "hasInstallScript": true,
       "dependencies": {
         "barcode-detector": "^3.1.0",
         "lucide-vue-next": "^0.575.0",
+        "marked": "^17.0.3",
         "qrcode": "^1.5.4",
         "vue": "^3.5.25",
         "vue-router": "^5.0.3"
@@ -4750,6 +4751,18 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.3.tgz",
+      "integrity": "sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.6.8",
+  "version": "0.6.15",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
   "dependencies": {
     "barcode-detector": "^3.1.0",
     "lucide-vue-next": "^0.575.0",
+    "marked": "^17.0.3",
     "qrcode": "^1.5.4",
     "vue": "^3.5.25",
     "vue-router": "^5.0.3"

src/components/Header.vue

@@ -44,7 +44,7 @@ onMounted(() => {
             <line x1="3" y1="18" x2="21" y2="18"></line>
           </svg>
         </button>
-        <h1 class="app-title">Tools App</h1>
+        <router-link to="/" class="app-title">Tools App</router-link>
       </div>
 
       <button
@@ -115,10 +115,11 @@ onMounted(() => {
 .app-title {
   margin: 0;
   font-size: 1.5rem;
-  font-weight: 600;
   background: var(--title-gradient);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
   background-clip: text;
+  color: transparent;
+  text-decoration: none;
+  font-weight: bold;
 }
 </style>

src/components/InstallPrompt.vue

@@ -51,12 +51,20 @@ const dismissPrompt = () => {
   deferredPrompt = null
 }
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showInstallPrompt.value) {
+    dismissPrompt()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.addEventListener('keydown', handleKeydown)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('keydown', handleKeydown)
 })
 </script>
 

src/components/Main.vue

@@ -1,11 +1,99 @@
 <script setup>
-import { ref } from 'vue'
+import { marked } from 'marked'
+import { computed } from 'vue'
+import readmeContent from '../../README.md?raw'
 
+const htmlContent = computed(() => {
+  return marked(readmeContent)
+})
 </script>
 
 <template>
-  main
+  <div class="readme-container glass-panel">
+    <div class="markdown-body" v-html="htmlContent"></div>
+  </div>
 </template>
 
 <style scoped>
+.readme-container {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.markdown-body :deep(h1) {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: var(--primary-accent);
+}
+
+.markdown-body :deep(h2) {
+  font-size: 1.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  padding-bottom: 0.5rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(h3) {
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-strong);
+}
+
+.markdown-body :deep(p) {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(ul) {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-body :deep(li) {
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+.markdown-body :deep(a) {
+  color: var(--primary-accent);
+  text-decoration: none;
+}
+
+.markdown-body :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.markdown-body :deep(code) {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body :deep(pre) {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  border: 1px solid var(--glass-border);
+}
+
+.markdown-body :deep(pre code) {
+  background: none;
+  padding: 0;
+  color: #e6e6e6;
+}
+
+.markdown-body :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--glass-border);
+  margin: 2rem 0;
+}
 </style>

src/components/tools/QrScanner.vue

@@ -8,7 +8,7 @@ const scannedCodes = ref([])
 const hasMultipleCameras = ref(false)
 const isFullscreen = ref(false)
 const videoAspect = ref(1)
-const isFront = computed(() => facingMode.value === 'user')
+const isMirrored = ref(false)
 const wrapperRef = ref(null)
 const bgCanvas = ref(null)
 let bgRafId = null
@@ -65,7 +65,7 @@ const paintDetections = (codes) => {
   }
 
   const scale = drawWidth / vw
-  const isMirrored = isFront.value
+   // Canvas is mirrored via CSS if isMirrored is true, so no manual coordinate mirroring needed
 
    // Styles
    const styles = getComputedStyle(document.documentElement)
@@ -84,10 +84,6 @@ const paintDetections = (codes) => {
      const transform = (p) => {
        let x = p.x * scale + startX
        let y = p.y * scale + startY
-
-      if (isMirrored) {
-        x = width - x
-      }
        return { x, y }
      }
 
@@ -203,6 +199,23 @@ const startScan = async () => {
 
     stream = await navigator.mediaDevices.getUserMedia(constraints)
 
+    // Detect actual facing mode to mirror front camera correctly
+    const videoTrack = stream.getVideoTracks()[0]
+    if (videoTrack) {
+      const settings = videoTrack.getSettings()
+      if (settings.facingMode) {
+        isMirrored.value = settings.facingMode === 'user'
+      } else {
+        // Fallback: check label for desktop cameras or assume requested mode
+        const label = videoTrack.label ? videoTrack.label.toLowerCase() : ''
+        if (label.includes('front') || label.includes('facetime') || label.includes('macbook')) {
+          isMirrored.value = true
+        } else {
+          isMirrored.value = facingMode.value === 'user'
+        }
+      }
+    }
+
     if (videoRef.value) {
       videoRef.value.srcObject = stream
       // Wait for metadata to play
@@ -364,11 +377,18 @@ watch(scannedCodes, (newVal) => {
   localStorage.setItem('qr-history', JSON.stringify(newVal))
 }, { deep: true })
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+
 onMounted(() => {
   checkCameras()
   loadHistory()
   window.addEventListener('resize', updateVideoAspect)
   window.addEventListener('resize', startBackgroundLoop)
+  window.addEventListener('keydown', handleKeydown)
   watch(isFullscreen, (fs) => {
     if (fs) {
       startBackgroundLoop()
@@ -383,6 +403,7 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', updateVideoAspect)
   window.removeEventListener('resize', startBackgroundLoop)
+  window.removeEventListener('keydown', handleKeydown)
   stopScan()
 })
 
@@ -457,6 +478,7 @@ const isUrl = (string) => {
             v-if="isFullscreen"
             ref="bgCanvas"
             class="camera-bg"
+            :class="{ 'is-mirrored': isMirrored }"
           ></canvas>
           <button v-if="isFullscreen" class="close-fullscreen-btn" @click="toggleFullscreen">
             <X size="24" />
@@ -464,7 +486,7 @@ const isUrl = (string) => {
 
           <div
             class="camera-wrapper"
-            :class="{ 'clickable': !isFullscreen, 'is-front': isFront }"
+            :class="{ 'clickable': !isFullscreen, 'is-mirrored': isMirrored }"
             :style="desktopFullscreenStyle"
             ref="wrapperRef"
             @click="!isFullscreen && toggleFullscreen()"
@@ -472,13 +494,13 @@ const isUrl = (string) => {
             <video
               ref="videoRef"
               class="camera-feed"
-              :class="{ 'is-front': isFront }"
+              :class="{ 'is-mirrored': isMirrored }"
               autoplay
               playsinline
               muted
             ></video>
 
-            <canvas ref="overlayCanvas" class="scan-overlay-canvas"></canvas>
+            <canvas ref="overlayCanvas" class="scan-overlay-canvas" :class="{ 'is-mirrored': isMirrored }"></canvas>
 
             <div v-if="error" class="error-overlay">
               <p>{{ error }}</p>
@@ -625,6 +647,10 @@ const isUrl = (string) => {
   z-index: 0;
 }
 
+.camera-bg.is-mirrored {
+  transform: scaleX(-1);
+}
+
 .camera-feed {
   width: 100%;
   height: 100%;
@@ -632,7 +658,7 @@ const isUrl = (string) => {
   display: block;
 }
 
-.camera-feed.is-front {
+.camera-feed.is-mirrored {
   transform: scaleX(-1);
 }
 
@@ -646,6 +672,10 @@ const isUrl = (string) => {
   z-index: 5;
 }
 
+.scan-overlay-canvas.is-mirrored {
+  transform: scaleX(-1);
+}
+
 /* front mirror canvas removed */
 
 .error-overlay {

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -10,6 +10,24 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'update:exceptions'])
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
 const newRule = ref({
   domainPattern: '',
   keepParams: '',

src/components/tools/common/ExtensionStatus.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { Plug, Plus, X } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -13,6 +13,24 @@ const props = defineProps({
 })
 
 const showModal = ref(false)
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showModal.value) {
+    showModal.value = false
+  }
+}
+
+watch(showModal, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <template>