@jjlmoya/utils-audiovisual 1.19.0 → 1.21.0

package/src/tool/imageCompressor/i18n/de.ts

@@ -55,7 +55,7 @@ const howTo: ImageCompressorLocaleContent['howTo'] = [
     },
     {
         name: "Qualität anpassen",
-        text: "Verwenden Sie den Schieberegler, um das perfekte Gleichgewicht zwischen Dateigröße und visueller Qualität zu finden (empfohlen: 75–85 %).",
+        text: "Verwenden Sie den Schieberegler, um das perfekte Gleichgewicht zwischen Dateigröße und visueller Qualität zu finden (empfohlen: 75-85 %).",
     },
     {
         name: "Größe ändern (optional)",
@@ -73,13 +73,13 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         title: 'Professionelle Web Bildoptimierung',
         items: [
             'Intelligente JPG-, PNG- und WebP-Komprimierung',
-            'Gewicht um 50–80 % reduzieren bei Beibehaltung der visuellen Qualität',
-            '100 % lokale Verarbeitung – Privatsphäre garantiert',
+            'Gewicht um 50-80 % reduzieren bei Beibehaltung der visuellen Qualität',
+            '100 % lokale Verarbeitung - Privatsphäre garantiert',
             'Core Web Vitals und SEO-Positionierung verbessern'
         ]
     },
     { type: 'title', text: 'Bildoptimierung: Web Geschwindigkeit und Core Web Vitals', level: 2 },
-    { type: 'paragraph', html: 'In der Ära der digitalen Unmittelbarkeit verliert eine langsame Website Nutzer. Nicht optimierte Bilder machen 60–70 % des Gesamtgewichts einer Webseite aus. Sie zu optimieren ist der erste Schritt, um Ihre Google-Metriken (LCP, CLS) und Ihre Positionierung in den Suchergebnissen zu verbessern.' },
+    { type: 'paragraph', html: 'In der Ära der digitalen Unmittelbarkeit verliert eine langsame Website Nutzer. Nicht optimierte Bilder machen 60-70 % des Gesamtgewichts einer Webseite aus. Sie zu optimieren ist der erste Schritt, um Ihre Google-Metriken (LCP, CLS) und Ihre Positionierung in den Suchergebnissen zu verbessern.' },
 
     { type: 'stats', items: [
         { value: '50-80%', label: 'Typische Gewichtsreduktion', icon: 'mdi:trending-down' },
@@ -89,22 +89,22 @@ const seo: ImageCompressorLocaleContent['seo'] = [
 
     { type: 'title', text: 'Erklärung der Komprimierungsformate', level: 3 },
     { type: 'table', headers: ['Format', 'Komprimierung', 'Anwendungsfälle', 'Kompatibilität'], rows: [
-        ['JPEG', 'Verlustbehaftet 50–90 %', 'Kamerafotos, redaktionelle Inhalte', 'Universal (100 %)'],
-        ['PNG', 'Verlustfrei 30–50 %', 'Grafiken, Logos, Transparenzen', 'Universal (100 %)'],
-        ['WebP', 'Verlustbehaftet/Verlustfrei 25–35 % mehr', 'Modernes Web, soziale Netzwerke', '95 % moderne Browser'],
+        ['JPEG', 'Verlustbehaftet 50-90 %', 'Kamerafotos, redaktionelle Inhalte', 'Universal (100 %)'],
+        ['PNG', 'Verlustfrei 30-50 %', 'Grafiken, Logos, Transparenzen', 'Universal (100 %)'],
+        ['WebP', 'Verlustbehaftet/Verlustfrei 25-35 % mehr', 'Modernes Web, soziale Netzwerke', '95 % moderne Browser'],
         ['AVIF', 'Verlustbehaftet/Verlustfrei 20 % Verbesserung', 'Next-Generation-Web', 'Nur neue Browser']
     ] },
 
-    { type: 'card', title: 'Warum WebP die Zukunft ist', html: 'Google hat WebP speziell für das Web entwickelt. Es bietet eine überlegene Komprimierung gegenüber JPEG und PNG bei gleichbleibender oder verbesserter visueller Qualität. Es ist 25–35 % kleiner als äquivalente JPEGs. Moderne Browser unterstützen es zu 95 %.' },
+    { type: 'card', title: 'Warum WebP die Zukunft ist', html: 'Google hat WebP speziell für das Web entwickelt. Es bietet eine überlegene Komprimierung gegenüber JPEG und PNG bei gleichbleibender oder verbesserter visueller Qualität. Es ist 25-35 % kleiner als äquivalente JPEGs. Moderne Browser unterstützen es zu 95 %.' },
 
     { type: 'title', text: 'Verlustbehaftete vs. verlustfreie Komprimierung', level: 3 },
     { type: 'comparative', items: [
         {
             title: 'Verlustbehaftete Komprimierung',
-            description: 'JPG, WebP – Entfernt unmerkliche visuelle Informationen',
+            description: 'JPG, WebP - Entfernt unmerkliche visuelle Informationen',
             icon: 'mdi:compress',
             points: [
-                'Reduziert 70–90 % des ursprünglichen Gewichts',
+                'Reduziert 70-90 % des ursprünglichen Gewichts',
                 'Für das menschliche Auge unmerklich, wenn die Qualität >75 % bleibt',
                 'Ideal für realistische Fotografie',
                 'Nicht empfohlen für Logos oder scharfen Text'
@@ -113,10 +113,10 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             title: 'Verlustfreie Komprimierung',
-            description: 'PNG, WebP verlustfrei – Behält 100 % der visuellen Daten bei',
+            description: 'PNG, WebP verlustfrei - Behält 100 % der visuellen Daten bei',
             icon: 'mdi:shield',
             points: [
-                'Reduziert 20–50 % des Gewichts',
+                'Reduziert 20-50 % des Gewichts',
                 'Perfekte Qualität, keine Verschlechterung',
                 'Ideal für Grafiken, Logos, Transparenzen',
                 'Schwerere Dateien als bei verlustbehafteter Komprimierung'
@@ -138,7 +138,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
             con: 'Erfordert Browser mit Canvas-API-Unterstützung (universell verfügbar)'
         },
         {
-            pro: 'WebP ist 25–35 % kleiner als JPEG bei gleicher Qualität',
+            pro: 'WebP ist 25-35 % kleiner als JPEG bei gleicher Qualität',
             con: 'Alte Versionen von Safari und IE unterstützen WebP nicht (Fallback verfügbar)'
         },
         {
@@ -147,7 +147,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             pro: 'Optionales Resizing: Reduziert Auflösung zusätzlich zur Komprimierung',
-            con: 'Resizing führt zu Informationsverlust – besser die Auflösung an der Quelle optimieren'
+            con: 'Resizing führt zu Informationsverlust - besser die Auflösung an der Quelle optimieren'
         }
     ], proTitle: 'Vorteile', conTitle: 'Einschränkungen' },
 
@@ -156,7 +156,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
     { type: 'glossary', items: [
         {
             term: 'Verlustbehaftete Komprimierung',
-            definition: 'Entfernt visuelle Daten, die das menschliche Auge als „Rauschen“ wahrnimmt. Ideal für Fotografie. JPEG, verlustbehaftetes WebP, HEIC sind verlustbehaftet.'
+            definition: 'Entfernt visuelle Daten, die das menschliche Auge als \"Rauschen\" wahrnimmt. Ideal für Fotografie. JPEG, verlustbehaftetes WebP, HEIC sind verlustbehaftet.'
         },
         {
             term: 'Verlustfreie Komprimierung',
@@ -168,7 +168,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             term: 'WebP',
-            definition: 'Von Google entwickeltes Format. 25–35 % kleiner als JPEG. Wird von 95 % der modernen Browser unterstützt (alle außer IE).'
+            definition: 'Von Google entwickeltes Format. 25-35 % kleiner als JPEG. Wird von 95 % der modernen Browser unterstützt (alle außer IE).'
         },
         {
             term: 'Komprimierungsartefakte',

package/src/tool/imageCompressor/i18n/fr.ts

@@ -55,7 +55,7 @@ const howTo: ImageCompressorLocaleContent['howTo'] = [
     },
     {
         name: "Ajuster la qualité",
-        text: "Utilisez le curseur pour trouver l'équilibre parfait entre la taille du fichier et la qualité visuelle (recommandé : 75-85 %).",
+        text: "Utilisez le curseur pour trouver l'équilibre parfait entre la taille du fichier et la qualité visuelle (recommandé: 75-85 %).",
     },
     {
         name: "Redimensionner (optionnel)",
@@ -78,7 +78,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
             'Améliorez les Core Web Vitals et le positionnement SEO'
         ]
     },
-    { type: 'title', text: 'Optimisation des Images : Vitesse Web et Core Web Vitals', level: 2 },
+    { type: 'title', text: 'Optimisation des Images: Vitesse Web et Core Web Vitals', level: 2 },
     { type: 'paragraph', html: 'À l\'ère de l\'immédiateté numérique, un site lent perd des utilisateurs. Les images non optimisées représentent 60 à 70 % du poids total d\'une page web. Les optimiser est la première étape pour améliorer vos métriques Google (LCP, CLS) et votre positionnement dans les résultats de recherche.' },
 
     { type: 'stats', items: [
@@ -134,7 +134,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
 
     { type: 'proscons', items: [
         {
-            pro: 'Confidentialité totale : traitement 100 % local, sans serveurs cloud',
+            pro: 'Confidentialité totale: traitement 100 % local, sans serveurs cloud',
             con: 'Nécessite un navigateur supportant l\'API Canvas (c\'est universel)'
         },
         {
@@ -146,12 +146,12 @@ const seo: ImageCompressorLocaleContent['seo'] = [
             con: 'Les images très volumineuses (>50 Mo) peuvent nécessiter un délai'
         },
         {
-            pro: 'Redimensionnement optionnel : réduit la résolution en plus de la compression',
+            pro: 'Redimensionnement optionnel: réduit la résolution en plus de la compression',
             con: 'Le redimensionnement entraîne une perte d\'information - mieux vaut optimiser à la source'
         }
     ], proTitle: 'Avantages', conTitle: 'Limitations' },
 
-    { type: 'diagnostic', variant: 'warning', title: 'Attention : Une Compression Excessive Dégrade', icon: 'mdi:alert', badge: 'Qualité', html: 'Maintenez une qualité > 75 % pour la photographie et > 85 % pour le contenu éditorial. En dessous, les artefacts de compression (taches, bandes) deviennent visibles. Une image de belle apparence en vignette peut être hideuse en grand.' },
+    { type: 'diagnostic', variant: 'warning', title: 'Attention: Une Compression Excessive Dégrade', icon: 'mdi:alert', badge: 'Qualité', html: 'Maintenez une qualité > 75 % pour la photographie et > 85 % pour le contenu éditorial. En dessous, les artefacts de compression (taches, bandes) deviennent visibles. Une image de belle apparence en vignette peut être hideuse en grand.' },
 
     { type: 'glossary', items: [
         {
@@ -164,7 +164,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             term: 'Core Web Vitals (Google)',
-            definition: 'Indicateurs d\'expérience utilisateur : LCP (vitesse de chargement), FID (latence d\'interaction), CLS (stabilité visuelle). Affectent le SEO.'
+            definition: 'Indicateurs d\'expérience utilisateur: LCP (vitesse de chargement), FID (latence d\'interaction), CLS (stabilité visuelle). Affectent le SEO.'
         },
         {
             term: 'WebP',
@@ -172,11 +172,11 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             term: 'Artefacts de Compression',
-            definition: 'Défauts visuels causés par une compression excessive : taches, bandes de couleur, bords flous.'
+            definition: 'Défauts visuels causés par une compression excessive: taches, bandes de couleur, bords flous.'
         }
     ] },
 
-    { type: 'message', title: 'Optimisation Web Professionnelle', ariaLabel: 'Informations sur l\'optimisation d\'images pour le SEO', html: 'Ce n\'est pas de la vanité technique : compresser les images est un investissement direct dans l\'expérience utilisateur et le classement Google. Chaque kilo-octet compte sur mobile. Notre outil transforme ce qui nécessitait auparavant un logiciel professionnel ($$$) en un processus gratuit en 3 clics.' },
+    { type: 'message', title: 'Optimisation Web Professionnelle', ariaLabel: 'Informations sur l\'optimisation d\'images pour le SEO', html: 'Ce n\'est pas de la vanité technique: compresser les images est un investissement direct dans l\'expérience utilisateur et le classement Google. Chaque kilo-octet compte sur mobile. Notre outil transforme ce qui nécessitait auparavant un logiciel professionnel ($$$) en un processus gratuit en 3 clics.' },
 
     { type: 'title', text: 'Prêt pour le Web Moderne', level: 3 },
     { type: 'paragraph', html: 'Utilisez la compression intelligente et le format WebP pour que votre présence en ligne soit rapide, responsive et compétitive dans les recherches.' }

package/src/tool/imageCompressor/i18n/pl.ts

@@ -156,7 +156,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
     { type: 'glossary', items: [
         {
             term: 'Kompresja Stratna (Lossy)',
-            definition: 'Usuwa dane wizualne, które ludzkie oko postrzega jako „szum”. Idealna dla fotografii. JPEG, stratny WebP, HEIC są kompresjami stratnymi.'
+            definition: 'Usuwa dane wizualne, które ludzkie oko postrzega jako \"szum\". Idealna dla fotografii. JPEG, stratny WebP, HEIC są kompresjami stratnymi.'
         },
         {
             term: 'Kompresja Bezstratna (Lossless)',

package/src/tool/imageCompressor/i18n/ru.ts

@@ -44,7 +44,7 @@ const faq: ImageCompressorLocaleContent['faq'] = [
     },
     {
         question: "Почему мне стоит конвертировать в WebP?",
-        answer: "WebP — это современный стандартный формат для интернета. Он предлагает более высокое качество, чем JPG и PNG, при весе на 30% меньше, что ускоряет загрузку страниц.",
+        answer: "WebP - это современный стандартный формат для интернета. Он предлагает более высокое качество, чем JPG и PNG, при весе на 30% меньше, что ускоряет загрузку страниц.",
     },
 ];
 
@@ -74,12 +74,12 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         items: [
             'Интеллектуальное сжатие JPG, PNG и WebP',
             'Уменьшение веса на 50-80% при сохранении визуального качества',
-            '100% локальная обработка — конфиденциальность гарантирована',
+            '100% локальная обработка - конфиденциальность гарантирована',
             'Улучшение Core Web Vitals и позиций в SEO'
         ]
     },
     { type: 'title', text: 'Оптимизация изображений: скорость веба и Core Web Vitals', level: 2 },
-    { type: 'paragraph', html: 'В эпоху цифровой мгновенности медленный веб-сайт теряет пользователей. Неоптимизированные изображения составляют 60-70% от общего веса веб-страницы. Их оптимизация — это первый шаг к улучшению ваших метрик Google (LCP, CLS) и вашего позиционирования в результатах поиска.' },
+    { type: 'paragraph', html: 'В эпоху цифровой мгновенности медленный веб-сайт теряет пользователей. Неоптимизированные изображения составляют 60-70% от общего веса веб-страницы. Их оптимизация - это первый шаг к улучшению ваших метрик Google (LCP, CLS) и вашего позиционирования в результатах поиска.' },
 
     { type: 'stats', items: [
         { value: '50-80%', label: 'Типичное сокращение веса', icon: 'mdi:trending-down' },
@@ -95,13 +95,13 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         ['AVIF', 'С потерями/без потерь на 20% лучше', 'Веб следующего поколения', 'Только новые браузеры']
     ] },
 
-    { type: 'card', title: 'Почему WebP — это будущее', html: 'Google разработал WebP специально для веба. Он предлагает лучшее сжатие, чем JPEG и PNG, сохраняя или улучшая визуальное качество. Он на 25-35% меньше эквивалентов JPEG. Современные браузеры поддерживают его на 95%.' },
+    { type: 'card', title: 'Почему WebP: это будущее', html: 'Google разработал WebP специально для веба. Он предлагает лучшее сжатие, чем JPEG и PNG, сохраняя или улучшая визуальное качество. Он на 25-35% меньше эквивалентов JPEG. Современные браузеры поддерживают его на 95%.' },
 
     { type: 'title', text: 'Сжатие с потерями и без потерь', level: 3 },
     { type: 'comparative', items: [
         {
             title: 'Сжатие с потерями (Lossy)',
-            description: 'JPG, WebP — удаляет незаметную визуальную информацию',
+            description: 'JPG, WebP - удаляет незаметную визуальную информацию',
             icon: 'mdi:compress',
             points: [
                 'Уменьшает вес на 70-90% от исходного',
@@ -113,7 +113,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             title: 'Сжатие без потерь (Lossless)',
-            description: 'PNG, WebP без потерь — сохраняет 100% визуальных данных',
+            description: 'PNG, WebP без потерь - сохраняет 100% визуальных данных',
             icon: 'mdi:shield',
             points: [
                 'Уменьшает вес на 20-50%',
@@ -147,7 +147,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         },
         {
             pro: 'Опциональное изменение размера: уменьшает как разрешение, так и сжатие',
-            con: 'Изменение размера приводит к потере информации — лучше оптимизировать разрешение в источнике'
+            con: 'Изменение размера приводит к потере информации - лучше оптимизировать разрешение в источнике'
         }
     ], proTitle: 'Преимущества', conTitle: 'Ограничения' },
 
@@ -156,7 +156,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
     { type: 'glossary', items: [
         {
             term: 'Сжатие с потерями (Lossy)',
-            definition: 'Удаляет визуальные данные, которые человеческий глаз воспринимает как «шум». Идеально для фотографий. JPEG, WebP с потерями, HEIC являются форматами с потерями.'
+            definition: 'Удаляет визуальные данные, которые человеческий глаз воспринимает как \"шум\". Идеально для фотографий. JPEG, WebP с потерями, HEIC являются форматами с потерями.'
         },
         {
             term: 'Сжатие без потерь (Lossless)',
@@ -176,7 +176,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
         }
     ] },
 
-    { type: 'message', title: 'Профессиональная веб оптимизация', ariaLabel: 'Информация об оптимизации изображений для SEO', html: 'Это не техническая прихоть: сжатие изображений — это прямая инвестиция в пользовательский опыт и рейтинг в Google. На мобильных устройствах важен каждый килобайт. Наш инструмент превращает то, что раньше требовало профессионального ПО ($$$), в бесплатный процесс в 3 клика.' },
+    { type: 'message', title: 'Профессиональная веб оптимизация', ariaLabel: 'Информация об оптимизации изображений для SEO', html: 'Это не техническая прихоть: сжатие изображений - это прямая инвестиция в пользовательский опыт и рейтинг в Google. На мобильных устройствах важен каждый килобайт. Наш инструмент превращает то, что раньше требовало профессионального ПО ($$$), в бесплатный процесс в 3 клика.' },
 
     { type: 'title', text: 'Готовы к современному вебу', level: 3 },
     { type: 'paragraph', html: 'Используйте интеллектуальное сжатие и формат WebP, чтобы ваше онлайн-присутствие было быстрым, адаптивным и конкурентоспособным в поиске. Профессиональное качество, минимальный вес, мгновенная загрузка.' }

package/src/tool/imageCompressor/i18n/zh.ts

@@ -158,7 +158,7 @@ const seo: ImageCompressorLocaleContent['seo'] = [
     { type: 'glossary', items: [
         {
             term: '有损压缩',
-            definition: '删除人眼视为“噪声”的视觉数据。摄影的理想选择。JPEG、有损 WebP、HEIC 均属于有损压缩。'
+            definition: '删除人眼视为\"噪声\"的视觉数据。摄影的理想选择。JPEG、有损 WebP、HEIC 均属于有损压缩。'
         },
         {
             term: '无损压缩',

package/src/tool/printQualityCalculator/component.astro

@@ -10,126 +10,134 @@ const { ui } = Astro.props;
 ---
 
 <div class="pq-wrapper" id="pq-root" data-ui={JSON.stringify(ui)}>
-    <div
-        id="drop-zone"
-        class="pq-drop-zone pq-group"
-    >
-        <input type="file" id="file-input" class="pq-hidden" accept="image/webp, image/jpeg, image/png, image/tiff" />
-
-        <div class="pq-drop-inner">
-            <div class="pq-upload-icon-wrap pq-group-icon">
-                <Icon name="mdi:cloud-upload" style="width:2.5rem;height:2.5rem" />
-            </div>
-            <div>
-                <h3 class="pq-drop-title">{ui.dropTitle}</h3>
-                <p class="pq-drop-sub">{ui.dropSubtitle}</p>
+    <div class="pq-tool-card">
+        <div
+            id="drop-zone"
+            class="pq-drop-zone pq-group"
+        >
+            <input type="file" id="file-input" class="pq-hidden" accept="image/webp, image/jpeg, image/png, image/tiff" aria-label={ui.dropTitle} />
+
+            <div class="pq-drop-inner">
+                <div class="pq-upload-icon-wrap pq-group-icon">
+                    <Icon name="mdi:cloud-upload" style="width:2.5rem;height:2.5rem" />
+                </div>
+                <div>
+                    <h3 class="pq-drop-title">{ui.dropTitle}</h3>
+                    <p class="pq-drop-sub">{ui.dropSubtitle}</p>
+                </div>
             </div>
-        </div>
 
-        <div class="pq-drop-overlay"></div>
-    </div>
+            <div class="pq-drop-overlay"></div>
+        </div>
 
-    <div id="results-area" class="pq-results pq-hidden">
-        <div class="pq-file-card">
-            <div class="pq-file-left">
-                <div class="pq-preview-wrap">
-                    <img id="preview-img" class="pq-preview-img" src="#" alt="Preview" />
-                </div>
-                <div class="pq-file-info">
-                    <h3 id="file-name" class="pq-file-name">nombre_archivo.jpg</h3>
-                    <div class="pq-file-meta">
-                        <span class="pq-meta-item">
-                            <Icon name="mdi:arrow-expand" style="width:1rem;height:1rem" />
-                            <span id="pixel-dims">0 x 0 px</span>
-                        </span>
-                        <span class="pq-meta-item">
-                            <Icon name="mdi:harddisk" style="width:1rem;height:1rem" />
-                            <span id="file-size">0 MB</span>
-                        </span>
-                        <span class="pq-meta-item">
-                            <Icon name="mdi:image-filter-hdr" style="width:1rem;height:1rem" />
-                            <span id="megapixels">0 MP</span>
-                        </span>
+        <div id="results-area" class="pq-results pq-hidden">
+            <div class="pq-file-card">
+                <div class="pq-file-left">
+                    <div class="pq-preview-wrap" id="preview-wrap">
+                        <img id="preview-img" class="pq-preview-img" src="#" alt="Preview" />
+                    </div>
+                    <div class="pq-file-info">
+                        <div class="pq-file-header">
+                            <p id="file-name" class="pq-file-name">nombre_archivo.jpg</p>
+                            <button type="button" id="replace-image-btn" class="pq-replace-btn">
+                                <Icon name="mdi:image-refresh" style="width:1rem;height:1rem" />
+                                <span>{ui.dropTitle}</span>
+                            </button>
+                        </div>
+                        <div class="pq-file-meta">
+                            <span class="pq-meta-item">
+                                <Icon name="mdi:arrow-expand" style="width:1rem;height:1rem" />
+                                <span id="pixel-dims">0 x 0 px</span>
+                            </span>
+                            <span class="pq-meta-item">
+                                <Icon name="mdi:harddisk" style="width:1rem;height:1rem" />
+                                <span id="file-size">0 MB</span>
+                            </span>
+                            <span class="pq-meta-item">
+                                <Icon name="mdi:image-filter-hdr" style="width:1rem;height:1rem" />
+                                <span id="megapixels">0 MP</span>
+                            </span>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="pq-main-grid">
-            <div class="pq-config-panel">
-                <label class="pq-config-label">{ui.dpiDensityLabel}</label>
-
-                <input
-                    type="range"
-                    id="dpi-slider"
-                    min="72"
-                    max="600"
-                    value="300"
-                    step="1"
-                    class="pq-slider"
-                />
-
-                <div class="pq-dpi-row">
+            <div class="pq-main-grid">
+                <div class="pq-config-panel">
+                    <label class="pq-config-label" for="dpi-slider">{ui.dpiDensityLabel}</label>
+
                     <input
-                        type="number"
-                        id="dpi-input"
+                        type="range"
+                        id="dpi-slider"
+                        min="72"
+                        max="600"
                         value="300"
-                        class="pq-dpi-number"
+                        step="1"
+                        class="pq-slider"
                     />
-                    <span class="pq-dpi-label">{ui.dpiPointsLabel}</span>
-                </div>
 
-                <div class="pq-presets">
-                    <button class="pq-preset-btn" data-val="72">{ui.dpiScreenLabel} (72)</button>
-                    <button class="pq-preset-btn" data-val="150">{ui.dpiNewspaperLabel} (150)</button>
-                    <button class="pq-preset-btn pq-preset-active" data-val="300">{ui.dpiPrintLabel} (300)</button>
-                    <button class="pq-preset-btn" data-val="600">{ui.dpiFineArtLabel} (600)</button>
-                </div>
-            </div>
-
-            <div class="pq-output-panel">
-                <div class="pq-output-gradient">
-                    <div class="pq-output-blur-bg"></div>
-                    <h3 class="pq-output-subtitle">{ui.maxPrintTitle}</h3>
-
-                    <div class="pq-output-size">
-                        <span id="print-cm-w">0</span>
-                        <span class="pq-size-sep">x</span>
-                        <span id="print-cm-h">0</span>
-                        <span class="pq-size-unit">cm</span>
+                    <div class="pq-dpi-row">
+                        <input
+                            type="number"
+                            id="dpi-input"
+                            value="300"
+                            class="pq-dpi-number"
+                        />
+                        <label class="pq-dpi-label" for="dpi-input">{ui.dpiPointsLabel}</label>
                     </div>
 
-                    <div class="pq-output-inches">
-                        <span id="print-in-w">0</span>" x <span id="print-in-h">0</span>"
+                    <div class="pq-presets">
+                        <button class="pq-preset-btn" data-val="72">{ui.dpiScreenLabel} (72)</button>
+                        <button class="pq-preset-btn" data-val="150">{ui.dpiNewspaperLabel} (150)</button>
+                        <button class="pq-preset-btn pq-preset-active" data-val="300">{ui.dpiPrintLabel} (300)</button>
+                        <button class="pq-preset-btn" data-val="600">{ui.dpiFineArtLabel} (600)</button>
                     </div>
+                </div>
 
-                    <div class="pq-quality-section">
-                        <span id="quality-badge" class="pq-quality-badge">
-                            <Icon name="mdi:check-decagram" style="width:1rem;height:1rem" />
-                            <span id="quality-text">{ui.qualityExcellent}</span>
-                        </span>
-                        <p id="quality-desc" class="pq-quality-desc">{ui.qualityExcellentDesc}</p>
+                <div class="pq-output-panel">
+                    <div class="pq-output-gradient">
+                        <div class="pq-output-blur-bg"></div>
+                        <h3 class="pq-output-subtitle">{ui.maxPrintTitle}</h3>
+
+                        <div class="pq-output-size">
+                            <span id="print-cm-w">0</span>
+                            <span class="pq-size-sep">x</span>
+                            <span id="print-cm-h">0</span>
+                            <span class="pq-size-unit">cm</span>
+                        </div>
+
+                        <div class="pq-output-inches">
+                            <span id="print-in-w">0</span>" x <span id="print-in-h">0</span>"
+                        </div>
+
+                        <div class="pq-quality-section">
+                            <span id="quality-badge" class="pq-quality-badge">
+                                <Icon name="mdi:check-decagram" style="width:1rem;height:1rem" />
+                                <span id="quality-text">{ui.qualityExcellent}</span>
+                            </span>
+                            <p id="quality-desc" class="pq-quality-desc">{ui.qualityExcellentDesc}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="pq-formats-card">
-            <h4 class="pq-formats-title">
-                <Icon name="mdi:ruler-square" style="width:1.2rem;height:1.2rem;color:#6366f1" />
-                {ui.standardFormatsTitle}
-            </h4>
-            <div class="pq-formats-scroll">
-                <table class="pq-formats-table">
-                    <thead>
-                        <tr>
-                            <th>{ui.formatColumn}</th>
-                            <th>{ui.measureColumn} (cm)</th>
-                            <th>{ui.supportColumn}</th>
-                        </tr>
-                    </thead>
-                    <tbody id="formats-table-body"></tbody>
-                </table>
+            <div class="pq-formats-card">
+                <h4 class="pq-formats-title">
+                    <Icon name="mdi:ruler-square" style="width:1.2rem;height:1.2rem;color:#6366f1" />
+                    {ui.standardFormatsTitle}
+                </h4>
+                <div class="pq-formats-scroll">
+                    <table class="pq-formats-table">
+                        <thead>
+                            <tr>
+                                <th>{ui.formatColumn}</th>
+                                <th>{ui.measureColumn} (cm)</th>
+                                <th>{ui.supportColumn}</th>
+                            </tr>
+                        </thead>
+                        <tbody id="formats-table-body"></tbody>
+                    </table>
+                </div>
             </div>
         </div>
     </div>
@@ -150,10 +158,6 @@ const { ui } = Astro.props;
     ];
 
     function initPQCalc() {
-        console.log('DEBUG: initPQCalc called');
-        console.log('DEBUG: ui object:', ui);
-        console.log('DEBUG: ui.formatPostal:', ui.formatPostal);
-
         function getFormatName(format) {
             const keyMap = {
                 postal: 'formatPostal',
@@ -165,9 +169,7 @@ const { ui } = Astro.props;
                 plane: 'formatPlane'
             };
             const uiKey = keyMap[format.key];
-            const result = format.label + ' (' + (ui[uiKey] || format.key) + ')';
-            console.log('DEBUG: getFormatName for', format.key, '=', result, '(uiKey:', uiKey, ', ui[uiKey]:', ui[uiKey], ')');
-            return result;
+            return format.label + ' (' + (ui[uiKey] || format.key) + ')';
         }
 
         const dropZone = document.getElementById("drop-zone");
@@ -176,6 +178,8 @@ const { ui } = Astro.props;
         if (!dropZone || !fileInput || !resultsArea) return;
 
         const previewImg = document.getElementById("preview-img");
+        const previewWrap = document.getElementById("preview-wrap");
+        const replaceImageBtn = document.getElementById("replace-image-btn");
         const fileNameEl = document.getElementById("file-name");
         const pixelDimsEl = document.getElementById("pixel-dims");
         const fileSizeEl = document.getElementById("file-size");
@@ -212,6 +216,11 @@ const { ui } = Astro.props;
         });
 
         dropZone.addEventListener("click", function() { fileInput.click(); });
+        if (replaceImageBtn) {
+            replaceImageBtn.addEventListener("click", function() {
+                fileInput.click();
+            });
+        }
 
         fileInput.addEventListener("change", function() {
             if (fileInput.files && fileInput.files.length > 0) processFile(fileInput.files[0]);
@@ -251,6 +260,7 @@ const { ui } = Astro.props;
             resultsArea.classList.remove("pq-hidden");
             dropZone.classList.add("pq-hidden");
             if (previewImg) previewImg.src = src;
+            if (previewWrap) previewWrap.classList.toggle("pq-hidden", !src);
             if (fileNameEl) fileNameEl.textContent = file.name;
             if (pixelDimsEl) pixelDimsEl.textContent = currentWidth + " x " + currentHeight + " px";
             if (fileSizeEl) fileSizeEl.textContent = (file.size / (1024 * 1024)).toFixed(2) + " MB";
@@ -311,13 +321,11 @@ const { ui } = Astro.props;
         }
 
         function updateFormatsTable(cmW, cmH) {
-            console.log('DEBUG: updateFormatsTable called, ui.supportedText:', ui.supportedText);
             if (!formatsTableBody) return;
             formatsTableBody.innerHTML = "";
             const imgMin = Math.min(cmW, cmH);
             const imgMax = Math.max(cmW, cmH);
             PAPER_FORMATS.forEach(function(paper) {
-                console.log('DEBUG: Processing paper format:', paper.key);
                 const paperMin = Math.min(paper.w, paper.h);
                 const paperMax = Math.max(paper.w, paper.h);
                 const covers = imgMin >= paperMin - 0.1 && imgMax >= paperMax - 0.1;

package/src/tool/printQualityCalculator/i18n/de.ts

@@ -54,7 +54,7 @@ const faq: PrintQualityCalculatorLocaleContent['faq'] = [
     },
     {
         question: "Kann ich die DPI meines Bildes erhöhen, ohne an Qualität zu verlieren?",
-        answer: "Nein. Erhöhen Sie die DPI, ohne die Pixel zu ändern, verringert sich einfach die Druckgröße. Wenn Sie Pixel mit Software „erfinden“ (Upscaling), kann das Bild unscharf wirken.",
+        answer: "Nein. Erhöhen Sie die DPI, ohne die Pixel zu ändern, verringert sich einfach die Druckgröße. Wenn Sie Pixel mit Software \"erfinden\" (Upscaling), kann das Bild unscharf wirken.",
     },
 ];
 
@@ -73,7 +73,7 @@ const howTo: PrintQualityCalculatorLocaleContent['howTo'] = [
     },
     {
         name: "Qualität bestätigen",
-        text: "Stellen Sie sicher, dass die Anzeige „Hervorragende Qualität“ anzeigt, bevor Sie den Druck in Auftrag geben.",
+        text: "Stellen Sie sicher, dass die Anzeige \"Hervorragende Qualität\" anzeigt, bevor Sie den Druck in Auftrag geben.",
     },
 ];
 
@@ -154,7 +154,7 @@ const seo: PrintQualityCalculatorLocaleContent['seo'] = [
     { type: 'proscons', items: [
         {
             pro: 'CMYK vs. RGB: Drucker verwenden Tinte (CMYK), Bildschirme Licht (RGB). Konvertieren Sie, um Farbüberraschungen zu vermeiden.',
-            con: 'Farben können sich beim Konvertieren ändern – erst Vorschau prüfen'
+            con: 'Farben können sich beim Konvertieren ändern - erst Vorschau prüfen'
         },
         {
             pro: 'Beschnitt: Fügen Sie 3 mm extra pro Seite hinzu, wenn das Bild bis zum Papierrand reichen soll',
@@ -170,7 +170,7 @@ const seo: PrintQualityCalculatorLocaleContent['seo'] = [
         }
     ], proTitle: 'Empfehlungen', conTitle: 'Gegenanzeigen' },
 
-    { type: 'diagnostic', variant: 'warning', title: 'Häufiger Fehler: Der Upscaling Mythos', icon: 'mdi:alert', badge: 'Kritisch', html: '<strong>Erhöhen Sie DPI in Photoshop NICHT ohne die Pixel zu ändern.</strong> Eine Erhöhung von 72 DPI auf 300 DPI verringert einfach die physische Druckgröße. Wenn Sie Pixel durch Interpolation (Upscaling) „hinzufügen“, wirkt das Bild geglättet oder unscharf. Sie benötigen REAL-Pixel von der Quelle.' },
+    { type: 'diagnostic', variant: 'warning', title: 'Häufiger Fehler: Der Upscaling Mythos', icon: 'mdi:alert', badge: 'Kritisch', html: '<strong>Erhöhen Sie DPI in Photoshop NICHT ohne die Pixel zu ändern.</strong> Eine Erhöhung von 72 DPI auf 300 DPI verringert einfach die physische Druckgröße. Wenn Sie Pixel durch Interpolation (Upscaling) \"hinzufügen\", wirkt das Bild geglättet oder unscharf. Sie benötigen REAL-Pixel von der Quelle.' },
 
     { type: 'glossary', items: [
         {
@@ -187,7 +187,7 @@ const seo: PrintQualityCalculatorLocaleContent['seo'] = [
         },
         {
             term: 'Native Auflösung',
-            definition: 'ECHTE, von der Kamera erfasste Pixel ohne Manipulation. DPI-Erhöhung ohne Pixeländerung erzeugt keine „native Auflösung“.'
+            definition: 'ECHTE, von der Kamera erfasste Pixel ohne Manipulation. DPI-Erhöhung ohne Pixeländerung erzeugt keine \"native Auflösung\".'
         },
         {
             term: 'Interpolation (Upscaling)',