treamz/wa-dev-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
treamz 2026-03-22 10:45:38 +03:00
parent 26f122c4fe
commit 89345551ef
12 changed files with 1170 additions and 1132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/compress.html
View File

@ -35,12 +35,16 @@
<!-- Header -->
<div class="text-center mb-8 fade-up">
<div class="page-header">
<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>
<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 файлов · до 20 МБ</p>
</div>
</div>
<!-- Main Card -->

4
public/converter.html
View File

@ -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 -->

4
public/formatter.html
View File

@ -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 -->

10
public/httpclient.html
View File

@ -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 -->

14
public/md.html
View File

@ -59,12 +59,16 @@
<span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
MD Viewer
</div>
<div class="page-header">
<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>
<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">Рендеринг Markdown с подсветкой синтаксиса и экспортом</p>
</div>
</div>
<!-- Input Card -->

14
public/parser.html
View File

@ -47,12 +47,16 @@
<span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
URL Article Parser
</div>
<div class="page-header">
<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>
<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>
</div>
</div>
<!-- Input Card -->

14
public/password.html
View File

@ -71,12 +71,16 @@
<!-- Header -->
<div class="text-center mb-8 fade-up">
<div class="page-header">
<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>
<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>
</div>
</div>
<!-- Settings Card -->

12
public/pdf.html
View File

@ -637,9 +637,15 @@
<div class="tool-container max-w-3xl mx-auto">
<!-- Page header -->
<div class="page-header">
<h1>PDF <span class="text-accent">инструменты</span></h1>
<p class="description">объединение, разделение, сжатие, конвертация и защита</p>
<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>
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 -->

14
public/placeholder.html
View File

@ -46,12 +46,16 @@
<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">
<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>
<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>
</div>
</div>
<!-- Controls Card -->

10
public/redirects.html
View File

@ -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 -->

6
public/sanitizer.html
View File

@ -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 -->

8
public/video.html
View File

@ -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 -->