+
+
+
+
diff --git a/src/directives/ripple.js b/src/directives/ripple.js
new file mode 100644
index 0000000..7c8a69a
--- /dev/null
+++ 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;
diff --git a/src/main.js b/src/main.js
index 2425c0f..d0ac7a9 100644
--- 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')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..e221a55
--- /dev/null
+++ 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
diff --git a/src/style.css b/src/style.css
index e69de29..8d206b2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,167 @@
+: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;
+}
+
+#app {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 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 */
+}
+
+/* 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;
+ }
+}
diff --git a/vite.config.js b/vite.config.js
index bbcf80c..207aa7f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,11 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import packageJson from './package.json'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
+ define: {
+ '__APP_VERSION__': JSON.stringify(packageJson.version)
+ }
})