From 06d9adf7d565787dfab0864b1a48f713cb61270e Mon Sep 17 00:00:00 2001
From: treamz <treamz@gmail.com>
Date: Sun, 22 Mar 2026 10:47:51 +0300
Subject: [PATCH] Fix duplicate badges, custom logout modal, cache bust v3

- Remove duplicate badges on md, parser, placeholder pages
- Custom logout modal (blur overlay, confirm/cancel buttons)
- Replace native confirm() with styled modal
- Cache bust shared.js?v=3
---
 public/compress.html    |  2 +-
 public/converter.html   |  2 +-
 public/dashboard.html   |  2 +-
 public/editor.html      |  2 +-
 public/formatter.html   |  2 +-
 public/httpclient.html  |  2 +-
 public/md.html          |  9 ++-------
 public/parser.html      |  9 ++-------
 public/password.html    |  2 +-
 public/pdf.html         |  2 +-
 public/placeholder.html |  9 ++-------
 public/redirects.html   |  2 +-
 public/sanitizer.html   |  2 +-
 public/shared.css       | 14 ++++++++++++++
 public/shared.js        | 22 +++++++++++++++++++---
 public/svgeditor.html   |  2 +-
 public/video.html       |  2 +-
 17 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/public/compress.html b/public/compress.html
index 5f555a9..b9b05b6 100644
--- a/public/compress.html
+++ b/public/compress.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Конвертер изображений — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <script>window.WA_TOOL_ID = 'compress';</script>
diff --git a/public/converter.html b/public/converter.html
index 5c67ddc..7dfd2ed 100644
--- a/public/converter.html
+++ b/public/converter.html
@@ -6,7 +6,7 @@
     <title>Format Converter — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'converter';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <script src="/vendor/marked.min.js"></script>
diff --git a/public/dashboard.html b/public/dashboard.html
index 19e378c..7085496 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -6,7 +6,7 @@
     <title>WA Dev Tools — Панель</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'home';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
diff --git a/public/editor.html b/public/editor.html
index 9b133b3..415931d 100644
--- a/public/editor.html
+++ b/public/editor.html
@@ -6,7 +6,7 @@
     <title>Code Editor — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'editor';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <link rel="stylesheet" href="/editor.css">
diff --git a/public/formatter.html b/public/formatter.html
index 0e693f9..1acf379 100644
--- a/public/formatter.html
+++ b/public/formatter.html
@@ -6,7 +6,7 @@
     <title>Code Formatter — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'formatter';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
diff --git a/public/httpclient.html b/public/httpclient.html
index eb9bc3a..33edc4e 100644
--- a/public/httpclient.html
+++ b/public/httpclient.html
@@ -6,7 +6,7 @@
     <title>HTTP Client — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'httpclient';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <link rel="stylesheet" href="/vendor/hljs-github-dark.css">
diff --git a/public/md.html b/public/md.html
index 86ca169..fbe07ef 100644
--- a/public/md.html
+++ b/public/md.html
@@ -6,7 +6,7 @@
     <title>Markdown Viewer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'md';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <script src="/vendor/marked.min.js"></script>
@@ -54,12 +54,7 @@
 <div class="tool-container relative z-10 max-w-4xl mx-auto">
 
     <!-- Header -->
-    <div class="text-center mb-8 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            MD Viewer
-        </div>
-        <div class="page-header" style="text-align:center;">
+    <div class="page-header" style="text-align:center;">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             MD · GitHub Flavored
diff --git a/public/parser.html b/public/parser.html
index 4e2ffac..1e66e9e 100644
--- a/public/parser.html
+++ b/public/parser.html
@@ -6,7 +6,7 @@
     <title>Парсер статей — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'parser';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
@@ -42,12 +42,7 @@
 <div class="tool-container relative z-10 max-w-3xl mx-auto">
 
     <!-- Header -->
-    <div class="text-center mb-8 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            URL Article Parser
-        </div>
-        <div class="page-header" style="text-align:center;">
+    <div class="page-header" style="text-align:center;">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             HTML · Readability · Meta
diff --git a/public/password.html b/public/password.html
index 5e3d8e7..ea93a80 100644
--- a/public/password.html
+++ b/public/password.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Генератор паролей — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <script>window.WA_TOOL_ID = 'password';</script>
diff --git a/public/pdf.html b/public/pdf.html
index 458144c..71a94b8 100644
--- a/public/pdf.html
+++ b/public/pdf.html
@@ -6,7 +6,7 @@
     <title>WA Dev Tools — PDF инструменты</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'pdf';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
diff --git a/public/placeholder.html b/public/placeholder.html
index ebd6021..15134ca 100644
--- a/public/placeholder.html
+++ b/public/placeholder.html
@@ -6,7 +6,7 @@
     <title>Placeholder — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'placeholder';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
@@ -41,12 +41,7 @@
 <div class="tool-container relative z-10 max-w-2xl mx-auto">
 
     <!-- Header -->
-    <div class="text-center mb-8 fade-up">
-        <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
-            PNG &middot; JPG &middot; WebP
-        </div>
-        <div class="page-header" style="text-align:center;">
+    <div class="page-header" style="text-align:center;">
         <div class="inline-flex items-center gap-2 mb-3 px-3 py-1 rounded-full border dark:border-surface-600 border-gray-300 dark:bg-surface-800/60 bg-white/60 text-xs font-mono dark:text-gray-400 text-gray-500 tracking-wide">
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             PNG · JPG · WebP
diff --git a/public/redirects.html b/public/redirects.html
index 7a9788c..6fb0939 100644
--- a/public/redirects.html
+++ b/public/redirects.html
@@ -6,7 +6,7 @@
     <title>Redirect Analyzer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'redirects';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
diff --git a/public/sanitizer.html b/public/sanitizer.html
index 9a4fa59..2ceb9c2 100644
--- a/public/sanitizer.html
+++ b/public/sanitizer.html
@@ -6,7 +6,7 @@
     <title>HTML Sanitizer — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'sanitizer';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>
diff --git a/public/shared.css b/public/shared.css
index 896b589..e300008 100644
--- a/public/shared.css
+++ b/public/shared.css
@@ -102,6 +102,20 @@ body {
 .wa-btn:disabled { opacity:0.5;cursor:not-allowed }
 .wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s }
 
+/* Modal overlay */
+.wa-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease-out }
+.wa-modal { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:16px;padding:28px 24px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .2s ease-out }
+.wa-modal h3 { font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:6px }
+.wa-modal p { font-size:13px;color:var(--text-muted);margin-bottom:20px }
+.wa-modal-actions { display:flex;gap:8px }
+.wa-modal-actions button { flex:1;padding:10px;border-radius:8px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;cursor:pointer;border:none;transition:all .15s }
+.wa-modal-cancel { background:var(--surface-600);color:var(--text-secondary) }
+.wa-modal-cancel:hover { background:var(--surface-800) }
+.wa-modal-danger { background:#ef4444;color:#fff }
+.wa-modal-danger:hover { background:#dc2626 }
+@keyframes fadeIn { from{opacity:0} to{opacity:1} }
+@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+
 /* Top header (public pages: landing, auth, status) */
 .top-header { position:fixed;top:0;left:0;right:0;height:56px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:center;padding:0 24px;z-index:50;backdrop-filter:blur(12px) }
 .top-logo { font-size:18px;font-weight:800;color:var(--text-primary);text-decoration:none;display:flex;align-items:center;gap:8px }
diff --git a/public/shared.js b/public/shared.js
index 5a5d741..24d197a 100644
--- a/public/shared.js
+++ b/public/shared.js
@@ -123,9 +123,7 @@ async function _loadUser() {
         container.style.display = 'block';
 
         avatar.addEventListener('click', () => {
-            if (confirm('Выйти из аккаунта?')) {
-                window.location.href = '/auth/logout';
-            }
+            _showLogoutModal(user.name || user.email);
         });
 
         // Show admin links for admin users
@@ -137,6 +135,24 @@ async function _loadUser() {
     } catch {}
 }
 
+/* Logout modal */
+function _showLogoutModal(userName) {
+    const overlay = document.createElement('div');
+    overlay.className = 'wa-modal-overlay';
+    overlay.innerHTML = `<div class="wa-modal">
+        <h3>Выход из аккаунта</h3>
+        <p>${userName}</p>
+        <div class="wa-modal-actions">
+            <button class="wa-modal-cancel" id="modalCancel">Отмена</button>
+            <button class="wa-modal-danger" id="modalLogout">Выйти</button>
+        </div>
+    </div>`;
+    document.body.appendChild(overlay);
+    overlay.querySelector('#modalCancel').addEventListener('click', () => overlay.remove());
+    overlay.querySelector('#modalLogout').addEventListener('click', () => { window.location.href = '/auth/logout'; });
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+}
+
 /* Theme management */
 function initTheme() {
     const html = document.documentElement;
diff --git a/public/svgeditor.html b/public/svgeditor.html
index 5f58f62..9cd4905 100644
--- a/public/svgeditor.html
+++ b/public/svgeditor.html
@@ -6,7 +6,7 @@
     <title>SVG Editor — WA Dev Tools</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'svgeditor';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <script src="/vendor/opentype.min.js"></script>
diff --git a/public/video.html b/public/video.html
index d0e3a1a..4d796dd 100644
--- a/public/video.html
+++ b/public/video.html
@@ -6,7 +6,7 @@
     <title>WA Dev Tools — Видео конвертер</title>
     <script src="/vendor/tailwind.js"></script>
     <script>window.WA_TOOL_ID = 'video';</script>
-    <script src="/shared.js?v=2"></script>
+    <script src="/shared.js?v=3"></script>
     <link href="/vendor/fonts.css" rel="stylesheet">
     <link href="/shared.css" rel="stylesheet">
     <style>