Unified headers: centered with badge tags on all 12 tool pages

- All pages: centered header with animated badge (format tags)
- Badge format: colored dot + tech tags (PNG·JPG·WebP etc)
- Updated descriptions to be more detailed
- Consistent style across compress, video, http, redirects, password,
  pdf, parser, md, sanitizer, converter, formatter, placeholder

public/compress.html

@@ -35,11 +35,15 @@
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
-        <div class="page-header">
+        <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>
+            JPEG · PNG · WebP · AVIF · TIFF · GIF
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Конвертер <span class="text-accent">изображений</span>
         </h1>
-            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">до 50 файлов &middot; до 20 МБ каждый</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Сжатие, ресайз и конвертация до 50 файлов · до 20 МБ</p>
     </div>
     </div>
 

public/converter.html

@@ -21,7 +21,7 @@
 <div class="main-content">
 <div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="page-header text-center mb-8 fade-up">
+    <div class="page-header" style="text-align: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>
             HTML &harr; Markdown
@@ -29,7 +29,7 @@
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Format <span class="text-accent">Converter</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">конвертация между HTML и Markdown</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Конвертация между HTML и Markdown с сохранением форматирования</p>
     </div>
 
     <!-- Tool Toggle -->

public/formatter.html

@@ -20,7 +20,7 @@
 <div class="main-content">
 <div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="page-header text-center mb-8 fade-up">
+    <div class="page-header" style="text-align: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>
             CSS &middot; JavaScript
@@ -28,7 +28,7 @@
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Code <span class="text-accent">Formatter</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">форматирование и beautify кода</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Форматирование и beautify кода с правильными отступами</p>
     </div>
 
     <!-- Tool Toggle -->

public/httpclient.html

@@ -219,11 +219,15 @@
 <div class="tool-container relative z-10 max-w-7xl mx-auto px-4">
 
     <!-- Header -->
-    <div class="page-header">
+    <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>
+            GET · POST · PUT · DELETE
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            HTTP <span class="text-accent">Клиент</span>
+            HTTP <span class="text-accent">клиент</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">тест API запросов</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Тестирование API-запросов — Postman в браузере</p>
     </div>
 
     <!-- URL Bar -->

public/md.html

@@ -59,11 +59,15 @@
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             MD Viewer
         </div>
-        <div class="page-header">
+        <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
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Просмотр <span class="text-accent">Markdown</span>
         </h1>
-            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">drag-drop файл или вставьте текст</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Рендеринг Markdown с подсветкой синтаксиса и экспортом</p>
     </div>
     </div>
 

public/parser.html

@@ -47,11 +47,15 @@
             <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
             URL Article Parser
         </div>
-        <div class="page-header">
+        <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
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Парсер <span class="text-accent">статей</span>
         </h1>
-            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">извлечение контента из любой веб-страницы</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Извлечение контента, метаданных и изображений из любой страницы</p>
     </div>
     </div>
 

public/password.html

@@ -71,11 +71,15 @@
 
     <!-- Header -->
     <div class="text-center mb-8 fade-up">
-        <div class="page-header">
+        <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>
+            A-Z · a-z · 0-9 · !@#$
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Генератор <span class="text-accent">паролей</span>
         </h1>
-            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">криптографически стойкая генерация</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Криптографически стойкая генерация паролей любой сложности</p>
     </div>
     </div>
 

public/pdf.html

@@ -637,9 +637,15 @@
 <div class="tool-container max-w-3xl mx-auto">
 
     <!-- Page header -->
-    <div class="page-header">
+    <div class="page-header" style="text-align:center;">
-        <h1>PDF <span class="text-accent">инструменты</span></h1>
+        <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">
-        <p class="description">объединение, разделение, сжатие, конвертация и защита</p>
+            <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
+            Merge · Split · Rotate · Compress
+        </div>
+        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+            PDF <span class="text-accent">инструменты</span>
+        </h1>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Объединение, разделение, сжатие, конвертация и защита</p>
     </div>
 
     <!-- Error display -->

public/placeholder.html

@@ -46,11 +46,15 @@
             <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">
+        <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
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Placeholder <span class="text-accent">генератор</span>
         </h1>
-            <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">изображения-заглушки любого размера</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Изображения-заглушки любого размера, цвета и формата</p>
     </div>
     </div>
 

public/redirects.html

@@ -242,11 +242,15 @@
 <div class="tool-container relative z-10 max-w-5xl mx-auto px-4">
 
     <!-- Header -->
-    <div class="page-header">
+    <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>
+            HTTP 301 · 302 · 307 · 308
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
-            Redirect <span class="text-accent">Анализатор</span>
+            Redirect <span class="text-accent">анализатор</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">анализ цепочки HTTP-редиректов</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Полная цепочка HTTP-редиректов с заголовками</p>
     </div>
 
     <!-- URL Bar -->

public/sanitizer.html

@@ -22,15 +22,15 @@
 <div class="main-content">
 <div class="tool-container relative z-10 max-w-3xl mx-auto px-4 py-8 sm:py-12">
 
-    <div class="page-header text-center mb-8 fade-up">
+    <div class="page-header" style="text-align: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>
-            XSS Protection &middot; Client-side
+            XSS · Entities · Minify
         </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             HTML <span class="text-accent">Sanitizer</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">очистка, извлечение текста, entities, минификация</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Очистка, извлечение текста, кодирование entities и минификация</p>
     </div>
 
     <!-- Tool Grid -->

public/video.html

@@ -392,11 +392,15 @@
 <div class="tool-container max-w-3xl mx-auto">
 
     <!-- Page header -->
-    <div class="page-header">
+    <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>
+            MP4 · WebM · AVI · MKV · GIF
+        </div>
         <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
             Видео <span class="text-accent">конвертер</span>
         </h1>
-        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">конвертация, сжатие, извлечение аудио, GIF</p>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">Конвертация, сжатие, извлечение аудио и создание GIF</p>
     </div>
 
     <!-- Error display -->