0.1.2

feat: update passwords tool UI, fix layout issues, and set PWA theme color
fix(pwa): add workbox cleanup options to fix undefined payload error
2026-02-27 00:31:40 +00:00 · 2026-02-27 00:31:26 +00:00 · 2026-02-26 23:52:47 +00:00 · 2026-02-26 23:49:55 +00:00 · 2026-02-26 23:46:17 +00:00 · 2026-02-26 23:41:28 +00:00
18 changed files with 10095 additions and 18 deletions
--- a/dev-dist/registerSW.js
+++ b/dev-dist/registerSW.js
@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-5a5d9309'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "url": "index.html",
+    "revision": "0.blm8uefachg"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));
--- a/dev-dist/workbox-5a5d9309.js
+++ b/dev-dist/workbox-5a5d9309.js
--- a/index.html
+++ b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
+    <meta name="theme-color" content="#4facfe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>web-tools</title>
+    <title>Tools App</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.1.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -9,10 +9,13 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.5.25"
+    "lucide-vue-next": "^0.575.0",
+    "vue": "^3.5.25",
+    "vue-router": "^5.0.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,20 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:1" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-opacity="0.25"/>
+    </filter>
+  </defs>
+  
+  <!-- Background Circle with Gradient -->
+  <circle cx="256" cy="256" r="240" fill="url(#grad1)" />
+  
+  <!-- Gear Icon -->
+  <g transform="translate(106, 106) scale(0.6)" filter="url(#shadow)">
+    <path fill="white" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/>
+  </g>
+  
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,111 @@
 <script setup>
-import Main from './components/Main.vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import Header from './components/Header.vue'
+import Footer from './components/Footer.vue'
+import Sidebar from './components/Sidebar.vue'
+import InstallPrompt from './components/InstallPrompt.vue'
+
+const isSidebarOpen = ref(window.innerWidth >= 768)
+const router = useRouter()
+
+// Close sidebar on route change for mobile
+router.afterEach(() => {
+  if (window.innerWidth < 768) {
+    isSidebarOpen.value = false
+  }
+})
+
+let lastWidth = window.innerWidth
+
+const handleResize = () => {
+  const width = window.innerWidth
+  // Only change state when crossing the breakpoint
+  if (width >= 768 && lastWidth < 768) {
+    isSidebarOpen.value = true
+  } else if (width < 768 && lastWidth >= 768) {
+    isSidebarOpen.value = false
+  }
+  lastWidth = width
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 </script>

 <template>
-  <Main />
+  <Header @toggle-sidebar="isSidebarOpen = !isSidebarOpen" />
+  <div class="app-body">
+    <div
+      class="sidebar-overlay"
+      :class="{ 'is-visible': isSidebarOpen }"
+      @click="isSidebarOpen = false"
+    ></div>
+    <Sidebar :is-open="isSidebarOpen" />
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+  <Footer />
+  <InstallPrompt />
 </template>

 <style scoped>
+.app-body {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  position: relative;
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem;
+  width: 100%;
+  max-width: 100%;
+  /* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
+  padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
+}
+
+@media (min-width: 768px) {
+  .app-body {
+    overflow: hidden;
+  }
+
+  .main-content {
+    overflow-y: auto;
+    height: 100%;
+    padding-bottom: 2rem;
+  }
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 900; /* Below sidebar (1000), above content */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(2px);
+}
+
+.sidebar-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (min-width: 768px) {
+  .sidebar-overlay {
+    display: none;
+  }
+}
 </style>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -0,0 +1,54 @@
+<script setup>
+const currentYear = new Date().getFullYear();
+const version = __APP_VERSION__;
+</script>
+
+<template>
+  <footer class="app-footer glass-panel unselectable">
+    <div class="footer-content">
+      <p>&copy; {{ currentYear }} Tools App. v{{ version }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.app-footer {
+  width: 100%;
+  padding: 0.5rem;
+  /* Background handled by glass-panel */
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  /* Remove fixed height to allow content to dictate size */
+  /* height: 30px; */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+}
+
+@media (min-width: 768px) {
+  .app-footer {
+    position: static;
+    margin-top: auto;
+  }
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin: 0;
+  font-family: monospace;
+}
+</style>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Sun, Moon } from 'lucide-vue-next'
+
+defineEmits(['toggleSidebar'])
+
+const isDark = ref(true)
+
+const setTheme = (dark) => {
+  isDark.value = dark
+  const theme = dark ? 'dark' : 'light'
+  document.documentElement.dataset.theme = theme
+  localStorage.setItem('theme', theme)
+}
+
+const toggleTheme = () => {
+  setTheme(!isDark.value)
+}
+
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme')
+  if (savedTheme) {
+    setTheme(savedTheme === 'dark')
+  } else {
+    setTheme(true)
+  }
+})
+</script>
+
+<template>
+  <header class="app-header glass-panel unselectable">
+    <div class="header-content">
+      <div class="header-left">
+        <button
+          class="menu-btn"
+          @click="$emit('toggleSidebar')"
+          aria-label="Toggle Menu"
+          title="Toggle Menu"
+          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">
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+        <h1 class="app-title">Tools App</h1>
+      </div>
+
+      <button
+        class="btn-neon nav-btn icon-only"
+        @click="toggleTheme"
+        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        v-ripple
+      >
+        <Sun v-if="isDark" :size="20" />
+        <Moon v-else :size="20" />
+      </button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  /* Remove hardcoded colors and use theme variables */
+  background: var(--glass-bg);
+  color: var(--text-color);
+  padding: 1rem;
+  /* box-shadow handled by glass-panel class */
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-radius: 0;
+}
+
+.header-content {
+  max-width: 100%;
+  padding: 0;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.menu-btn {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.menu-btn:hover {
+  background-color: var(--button-hover-bg);
+}
+
+.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;
+}
+</style>
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -0,0 +1,153 @@
+<template>
+  <div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
+    <div class="prompt-content">
+      <span class="prompt-text">Install app for faster access</span>
+      <div class="prompt-actions">
+        <button @click="installPWA" class="install-btn">Install</button>
+        <button @click="dismissPrompt" class="dismiss-btn">✕</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const showInstallPrompt = ref(false)
+let deferredPrompt = null
+
+const handleBeforeInstallPrompt = (e) => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault()
+
+  // Only show install prompt if we are on the specific domain
+  if (window.location.hostname !== 'tools.7u.pl') {
+    return
+  }
+
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e
+  // Update UI to notify the user they can add to home screen
+  showInstallPrompt.value = true
+}
+
+const installPWA = async () => {
+  if (!deferredPrompt) return
+
+  // Show the install prompt
+  deferredPrompt.prompt()
+
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.userChoice
+  console.log(`User response to the install prompt: ${outcome}`)
+
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt = null
+  showInstallPrompt.value = false
+}
+
+const dismissPrompt = () => {
+  showInstallPrompt.value = false
+  deferredPrompt = null
+}
+
+onMounted(() => {
+  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+})
+</script>
+
+<style scoped>
+.install-prompt {
+  position: fixed;
+  bottom: calc(5rem + env(safe-area-inset-bottom)); /* Above footer with extra space */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 400px;
+  padding: 1rem;
+  z-index: 9999;
+  animation: slideUp 0.3s ease-out;
+  border-radius: 12px;
+}
+
+.prompt-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.prompt-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-strong);
+}
+
+.prompt-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.install-btn {
+  background-color: var(--primary-accent);
+  color: #000; /* Dark text on bright cyan accent for dark mode */
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.dismiss-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0 0.5rem;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 20px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+@media (min-width: 768px) {
+  .install-prompt {
+    bottom: 2rem;
+    right: 2rem;
+    left: auto;
+    transform: none;
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/* Light theme overrides for better contrast */
+:global(:root[data-theme="light"]) .install-btn {
+  background-color: var(--accent-purple);
+  color: #fff;
+}
+</style>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,99 @@
+<script setup>
+defineProps({
+  isOpen: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<template>
+  <aside class="sidebar unselectable" :class="{ 'is-open': isOpen }">
+    <nav class="sidebar-nav">
+      <router-link to="/passwords" class="nav-item" v-ripple>Passwords</router-link>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  /* Mobile First Styles */
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 250px;
+  background-color: var(--panel-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  overflow-x: hidden;
+  transition: transform 0.3s ease;
+  border-right: 1px solid var(--panel-border);
+  z-index: 1000;
+  box-shadow: var(--panel-shadow);
+  transform: translateX(-100%);
+}
+
+.sidebar.is-open {
+  transform: translateX(0);
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    position: static;
+    transform: none;
+    width: 0;
+    height: auto;
+    transition: width 0.3s ease;
+    z-index: auto;
+    box-shadow: none; /* Shadow handled by panel logic or not needed inline */
+  }
+
+  .sidebar.is-open {
+    width: 250px;
+    transform: none;
+  }
+}
+
+.sidebar-nav {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  width: 250px; /* Fixed width for content */
+  min-width: 250px;
+  padding-top: 1rem; /* Add some top padding for mobile aesthetic */
+}
+
+@media (min-width: 768px) {
+  .sidebar-nav {
+    padding-top: 0;
+  }
+}
+
+.nav-item {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: background-color 0.2s, color 0.2s;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.nav-item:hover {
+  background-color: var(--button-hover-bg);
+  color: var(--text-strong);
+}
+
+.nav-item.router-link-active {
+  color: var(--primary-accent);
+  background-color: var(--toggle-bg);
+  border-right: 2px solid var(--primary-accent);
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--panel-border);
+  margin: 0.5rem 0;
+}
+</style>
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -0,0 +1,444 @@
+<script setup>
+import { ref } from 'vue';
+
+// Options
+const useLower = ref(true);
+const useUpper = ref(true);
+const useDigits = ref(true);
+const useSpecial = ref(false);
+const skipSimilar = ref(true);
+const length = ref(16);
+const count = ref(20);
+
+// Result
+const result = ref('');
+
+// Character Sets
+const CHARS_LOWER = 'abcdefghijklmnopqrstuvwxyz';
+const CHARS_UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const CHARS_DIGITS = '0123456789';
+const CHARS_SPECIAL = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
+const CHARS_SIMILAR = /[Il1O0o]/g;
+
+const generatePasswords = () => {
+  let charset = '';
+  if (useLower.value) charset += CHARS_LOWER;
+  if (useUpper.value) charset += CHARS_UPPER;
+  if (useDigits.value) charset += CHARS_DIGITS;
+  if (useSpecial.value) charset += CHARS_SPECIAL;
+
+  if (skipSimilar.value) {
+    charset = charset.replace(CHARS_SIMILAR, '');
+  }
+
+  if (!charset) {
+    result.value = 'Please select at least one character set.';
+    return;
+  }
+
+  const passwords = [];
+  const charsetLength = charset.length;
+
+  // We need (count * length) random values.
+  // However, crypto.getRandomValues has a limit on array size (65536 bytes).
+  // So we'll generate one random value per character needed in a loop or batch.
+  // For simplicity and safety, let's generate per password or per character if needed.
+  // The most robust way for "bulk" is to just loop.
+
+  for (let i = 0; i < count.value; i++) {
+    let password = '';
+    // Create a typed array for the random values for this password
+    const randomValues = new Uint32Array(length.value);
+    crypto.getRandomValues(randomValues);
+
+    for (let j = 0; j < length.value; j++) {
+      // Use modulo to map the random 32-bit integer to a charset index
+      // Note: This introduces a tiny bias if charsetLength is not a power of 2,
+      // but for typical password generation it is negligible compared to Math.random().
+      // For cryptographic perfection, rejection sampling would be needed,
+      // but this is standard practice for password managers.
+      const randomIndex = randomValues[j] % charsetLength;
+      password += charset[randomIndex];
+    }
+    passwords.push(password);
+  }
+
+  result.value = passwords.join('\n');
+};
+</script>
+
+<template>
+  <div class="passwords-tool">
+    <div class="glass-panel tool-panel">
+      <h2 class="tool-title">Bulk Passwords Generator</h2>
+
+      <div class="options-grid">
+        <div class="checkbox-group">
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="useLower">
+            <span class="checkmark"></span>
+            Lower Case (a-z)
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="useUpper">
+            <span class="checkmark"></span>
+            Upper Case (A-Z)
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="useDigits">
+            <span class="checkmark"></span>
+            Digits (0-9)
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="useSpecial">
+            <span class="checkmark"></span>
+            Special Chars
+          </label>
+          <label class="checkbox-label">
+            <input type="checkbox" v-model="skipSimilar">
+            <span class="checkmark"></span>
+            Skip Similar Chars (I, l, 1, O, 0, o)
+          </label>
+        </div>
+
+        <div class="inputs-group">
+          <div class="input-wrapper">
+            <label>Password Length</label>
+            <div class="number-control">
+              <button class="control-btn" @click="length > 4 ? length-- : null">-</button>
+              <input type="number" v-model="length" min="4" max="128" class="number-input">
+              <button class="control-btn" @click="length < 128 ? length++ : null">+</button>
+            </div>
+          </div>
+          <div class="input-wrapper">
+            <label>Passwords Number</label>
+            <div class="number-control">
+              <button class="control-btn" @click="count > 1 ? count-- : null">-</button>
+              <input type="number" v-model="count" min="1" max="1000" class="number-input">
+              <button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="action-area">
+        <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
+          Generate
+        </button>
+      </div>
+
+      <div class="result-area">
+        <label>Passwords</label>
+        <textarea
+          class="result-textarea glass-panel selectable"
+          v-model="result"
+          placeholder="Generated passwords will appear here..."
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.passwords-tool {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  height: 100%;
+}
+
+.tool-panel {
+  width: 100%;
+  padding: 2rem;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+/* Custom scrollbar for tool panel */
+.tool-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tool-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.tool-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.tool-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 10px var(--title-glow));
+}
+
+.options-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-secondary);
+  font-weight: 500;
+  white-space: nowrap;
+  flex: 1 0 auto;
+}
+
+.checkbox-label input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.checkbox-label:hover .checkmark {
+  border-color: var(--toggle-hover-border);
+}
+
+.checkbox-label input:checked ~ .checkmark {
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 10px var(--primary-accent);
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.checkbox-label input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.checkbox-label .checkmark:after {
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.inputs-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 200px;
+}
+
+.input-wrapper label {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.number-control {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.control-btn {
+  width: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  color: var(--text-color);
+  border-radius: 0;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.control-btn:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-right: none;
+}
+
+.control-btn:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-left: none;
+}
+
+.control-btn:hover {
+  background-color: var(--button-hover-bg);
+  border-color: var(--toggle-hover-border);
+  z-index: 1;
+}
+
+.control-btn:active {
+  transform: scale(0.98);
+}
+
+.number-input {
+  flex: 1;
+  padding: 0.8rem;
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 0;
+  color: var(--text-color);
+  font-size: 1rem;
+  transition: border-color 0.3s;
+  text-align: center;
+  appearance: textfield; /* Remove default spinner */
+  min-width: 0;
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.number-input:focus {
+  outline: none;
+  border-color: var(--primary-accent);
+  box-shadow: 0 0 0 2px var(--toggle-active-shadow);
+  z-index: 2;
+  position: relative;
+}
+
+.action-area {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.btn-neon {
+  width: 100%;
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
+  padding: 0.8rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-neon:hover {
+  background: var(--button-hover-bg);
+  box-shadow: var(--button-hover-shadow);
+  transform: translateY(-2px);
+  border-color: var(--toggle-hover-border);
+}
+
+.btn-neon:active {
+  transform: translateY(1px);
+  box-shadow: var(--button-active-shadow);
+}
+
+.result-area {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-height: 200px;
+}
+
+.result-area label {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.result-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 200px;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--toggle-border);
+  border-radius: 12px;
+  color: var(--text-strong);
+  font-family: monospace;
+  font-size: 1rem;
+  resize: vertical;
+  line-height: 1.6;
+}
+
+.result-textarea:focus {
+  outline: none;
+  border-color: var(--primary-accent);
+}
+
+/* Scrollbar for textarea */
+.result-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.result-textarea::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.result-textarea::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.result-textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
--- a/src/directives/ripple.js
+++ b/src/directives/ripple.js
@@ -0,0 +1,34 @@
+const Ripple = {
+  mounted(el, binding) {
+    el.style.position = 'relative';
+    el.style.overflow = 'hidden';
+
+    el.addEventListener('click', function (e) {
+      const rect = el.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const circle = document.createElement('span');
+      const diameter = Math.max(rect.width, rect.height);
+      const radius = diameter / 2;
+
+      circle.style.width = circle.style.height = `${diameter}px`;
+      circle.style.left = `${x - radius}px`;
+      circle.style.top = `${y - radius}px`;
+      circle.classList.add('ripple');
+
+      // Allow custom color via directive value
+      if (binding.value && typeof binding.value === 'string') {
+          circle.style.backgroundColor = binding.value;
+      }
+
+      el.appendChild(circle);
+
+      setTimeout(() => {
+        circle.remove();
+      }, 600); // Match animation duration
+    });
+  }
+};
+
+export default Ripple;
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,11 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
+import Ripple from './directives/ripple'

-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.directive('ripple', Ripple)
+app.use(router)
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Main from '../components/Main.vue'
+import Passwords from '../components/tools/Passwords.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Main
+  },
+  {
+    path: '/passwords',
+    name: 'Passwords',
+    component: Passwords
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,199 @@
+/* Box sizing reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+
+  /* --- Default Dark Theme Variables --- */
+  --bg-gradient: radial-gradient(circle at center, #444 0%, #000000 100%);
+  --glass-bg: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.2);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  --text-color: #ffffff;
+  --text-strong: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.85);
+  --text-muted: rgba(255, 255, 255, 0.7);
+  --accent-cyan: #00f2fe;
+  --accent-purple: #4facfe;
+  --primary-accent: #00f2fe;
+  --title-glow: rgba(0, 255, 255, 0.2);
+  --toggle-bg: rgba(255, 255, 255, 0.08);
+  --toggle-border: rgba(255, 255, 255, 0.2);
+  --toggle-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  --toggle-btn-border: rgba(255, 255, 255, 0.2);
+  --toggle-hover-border: #ffffff;
+  --toggle-active-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
+  --panel-bg: rgba(0, 0, 0, 0.4);
+  --panel-border: rgba(255, 255, 255, 0.1);
+  --panel-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  --button-bg: rgba(255, 255, 255, 0.1);
+  --button-border: rgba(255, 255, 255, 0.2);
+  --button-text: #ffffff;
+  --button-hover-bg: rgba(255, 255, 255, 0.25);
+  --button-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  --button-active-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
+  --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
+  --ripple-color: rgba(255, 255, 255, 0.3);
+  --nav-item-weight: 400;
+
+  color: var(--text-color);
+  background-color: #242424; /* Fallback */
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root[data-theme="light"] {
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #cccccc 100%);
+  --glass-bg: rgba(255, 255, 255, 0.75);
+  --glass-border: rgba(15, 23, 42, 0.12);
+  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);
+  --text-color: #000000;
+  --text-strong: #000000;
+  --text-secondary: #000000;
+  --text-muted: rgba(0, 0, 0, 0.7);
+  --accent-cyan: #0ea5e9;
+  --accent-purple: #6366f1;
+  --primary-accent: #0ea5e9;
+  --title-glow: rgba(14, 165, 233, 0.35);
+  --toggle-bg: rgba(255, 255, 255, 0.85);
+  --toggle-border: rgba(15, 23, 42, 0.12);
+  --toggle-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+  --toggle-btn-border: rgba(15, 23, 42, 0.18);
+  --toggle-hover-border: rgba(15, 23, 42, 0.5);
+  --toggle-active-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
+  --panel-bg: rgba(255, 255, 255, 0.7);
+  --panel-border: rgba(15, 23, 42, 0.12);
+  --panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+  --button-bg: rgba(255, 255, 255, 0.85);
+  --button-border: rgba(15, 23, 42, 0.16);
+  --button-text: #0f172a;
+  --button-hover-bg: rgba(0, 0, 0, 0.05);
+  --button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
+  --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
+  --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
+  --ripple-color: rgba(0, 0, 0, 0.1);
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow-x: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.selectable {
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  body {
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #app {
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+
+/* Common UI Element Styles */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+.btn-neon {
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  outline: none; /* Remove focus outline */
+}
+
+/* Global button styles */
+button {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Remove focus outline for all buttons */
+button:focus {
+  outline: none;
+}
+
+.btn-neon:hover {
+  background: var(--button-hover-bg);
+  transform: translateY(-2px);
+  box-shadow: var(--button-hover-shadow);
+  border-color: var(--accent-cyan);
+}
+
+.btn-neon:active {
+  transform: translateY(1px);
+  box-shadow: var(--button-active-shadow);
+}
+
+.icon-only {
+  padding: 8px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+.unselectable {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Ripple Effect */
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-color);
+  pointer-events: none;
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,47 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+import packageJson from './package.json'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg'],
+      manifest: {
+        name: 'Tools App',
+        short_name: 'Tools',
+        description: 'A collection of useful tools',
+        theme_color: '#4facfe',
+        background_color: '#242424',
+        display: 'standalone',
+        orientation: 'portrait',
+        icons: [
+          {
+            src: 'favicon.svg',
+            sizes: 'any',
+            type: 'image/svg+xml',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}'],
+        cleanupOutdatedCaches: true,
+        clientsClaim: true,
+        skipWaiting: true
+      },
+      devOptions: {
+        enabled: true,
+        /* when using generateSW the PWA plugin will switch to classic */
+        type: 'module',
+        navigateFallback: 'index.html',
+      }
+    })
+  ],
+  define: {
+    '__APP_VERSION__': JSON.stringify(packageJson.version)
+  }
 })
Author	SHA1	Message	Date
Grzegorz Kucmierz	782786ec7e	0.1.2 All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-27 00:31:40 +00:00
Grzegorz Kucmierz	c8a009dda1	feat: update passwords tool UI, fix layout issues, and set PWA theme color	2026-02-27 00:31:26 +00:00
Grzegorz Kucmierz	7c4f1b20b3	fix(pwa): add workbox cleanup options to fix undefined payload error All checks were successful Deploy to Production / deploy (push) Successful in 7s Details	2026-02-26 23:52:47 +00:00
Grzegorz Kucmierz	c3f96bacc7	fix(pwa): improve install prompt visibility and styling All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:49:55 +00:00
Grzegorz Kucmierz	8655533a2d	feat(pwa): add PWA support with auto-update and install prompt All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-26 23:46:17 +00:00
Grzegorz Kucmierz	bec57f9e49	feat(ui): add new app icon svg All checks were successful Deploy to Production / deploy (push) Successful in 5s Details	2026-02-26 23:41:28 +00:00
Grzegorz Kucmierz	9ec71db87c	fix(ui): prevent label wrapping in passwords tool All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:38:07 +00:00
Grzegorz Kucmierz	3b229b4719	fix(ui): adjust mobile bottom padding to match top margin All checks were successful Deploy to Production / deploy (push) Successful in 5s Details	2026-02-26 23:35:00 +00:00
Grzegorz Kucmierz	c6baace721	fix(ui): prevent text selection on buttons All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:32:36 +00:00
Grzegorz Kucmierz	ab2da36aa1	0.1.1 All checks were successful Deploy to Production / deploy (push) Successful in 8s Details	2026-02-26 23:21:39 +00:00
Grzegorz Kucmierz	8691106d2f	fix(passwords): adjust textarea width with box-sizing	2026-02-26 23:21:30 +00:00
Grzegorz Kucmierz	5480b57615	0.1.0 All checks were successful Deploy to Production / deploy (push) Successful in 9s Details	2026-02-26 23:19:31 +00:00
Grzegorz Kucmierz	f0dffa6cad	feat: implement bulk passwords generator	2026-02-26 23:19:13 +00:00
Grzegorz Kucmierz	ace98a0fbc	0.0.2 All checks were successful Deploy to Production / deploy (push) Successful in 9s Details	2026-02-26 23:08:04 +00:00
Grzegorz Kucmierz	b2ddd95ff5	refactor: improve mobile layout, sticky footer, and UI spacing	2026-02-26 23:07:51 +00:00
Grzegorz Kucmierz	776f367ee1	0.0.1 All checks were successful Deploy to Production / deploy (push) Successful in 9s Details	2026-02-26 22:57:17 +00:00
Grzegorz Kucmierz	12a4130c38	feat: add ripple effect, update theme styles and layout	2026-02-26 22:57:03 +00:00
				`@@ -0,0 +1 @@`
				`if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })`