@jjlmoya/utils-social 1.14.0 → 1.16.0

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

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Skopiuj i opublikuj',
-    text: 'Kliknij „Kopiuj tekst” i wklej go bezpośrednio na Reddit lub dowolne forum.',
+    text: 'Kliknij \"Kopiuj tekst\" i wklej go bezpośrednio na Reddit lub dowolne forum.',
   },
 ];
 
@@ -113,7 +113,7 @@ export const content: ToolLocaleContent<RedditFormatterUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Po drugie, narzędzie usuwa niewidoczne znaki i wielokrotne spacje. Podczas kopiowania tekstu ze stron internetowych często „przeciąga się” znaki o zerowej szerokości, które psują formatowanie lub powodują dziwne zachowanie na forach. Czyścik usuwa te intruzywne elementy i normalizuje powtarzające się spacje do pojedynczej, czystej spacji. Opcjonalnie możesz usunąć wszystkie surowe hiperłącza ze swojej treści, aby opublikować całkowicie neutralny tekst.',
+      html: 'Po drugie, narzędzie usuwa niewidoczne znaki i wielokrotne spacje. Podczas kopiowania tekstu ze stron internetowych często \"przeciąga się\" znaki o zerowej szerokości, które psują formatowanie lub powodują dziwne zachowanie na forach. Czyścik usuwa te intruzywne elementy i normalizuje powtarzające się spacje do pojedynczej, czystej spacji. Opcjonalnie możesz usunąć wszystkie surowe hiperłącza ze swojej treści, aby opublikować całkowicie neutralny tekst.',
     },
     {
       type: 'title',
@@ -136,7 +136,7 @@ export const content: ToolLocaleContent<RedditFormatterUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Aplikacje takie jak Microsoft Word czy Google Docs dodają niewidoczną warstwę bogatego formatowania do tekstu. Gdy kopiujesz i wklejasz tę treść bezpośrednio do podstawowego edytora lub trybu Markdown na Reddit, bogate formatowanie znika, a to, co pozostaje, to często bezkształtna mieszanina. Reddit używa dość rygorystycznego wariantu Markdown. Jeśli nie znasz składni Reddit lub po prostu chcesz usprawnić proces przenoszenia esejów lub opowiadań na forum, wcześniejsze wyczyszczenie tekstu tutaj zapobiega otrzymywaniu przez Twój post „downvote’ów” tylko dlatego, że nie da się go wygodnie przeczytać.',
+      html: 'Aplikacje takie jak Microsoft Word czy Google Docs dodają niewidoczną warstwę bogatego formatowania do tekstu. Gdy kopiujesz i wklejasz tę treść bezpośrednio do podstawowego edytora lub trybu Markdown na Reddit, bogate formatowanie znika, a to, co pozostaje, to często bezkształtna mieszanina. Reddit używa dość rygorystycznego wariantu Markdown. Jeśli nie znasz składni Reddit lub po prostu chcesz usprawnić proces przenoszenia esejów lub opowiadań na forum, wcześniejsze wyczyszczenie tekstu tutaj zapobiega otrzymywaniu przez Twój post \"downvote\'ów\" tylko dlatego, że nie da się go wygodnie przeczytać.',
     },
     {
       type: 'title',
@@ -164,7 +164,7 @@ export const content: ToolLocaleContent<RedditFormatterUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Znalezienie właściwych odpowiedzi na temat interakcji z zasadami redakcyjnymi Reddit nie zawsze jest oczywiste. Sprawdź sekcję FAQ, w której omawiamy główne pytania dotyczące poprawnych formatów i sposobów unikania kar za potężne „ściany tekstu”.',
+      html: 'Znalezienie właściwych odpowiedzi na temat interakcji z zasadami redakcyjnymi Reddit nie zawsze jest oczywiste. Sprawdź sekcję FAQ, w której omawiamy główne pytania dotyczące poprawnych formatów i sposobów unikania kar za potężne \"ściany tekstu\".',
     },
   ],
   ui: {

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

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Скопируйте и опубликуйте',
-    text: 'Нажмите «Копировать текст» и вставьте его прямо в Reddit или на любой форум.',
+    text: 'Нажмите \"Копировать текст\" и вставьте его прямо в Reddit или на любой форум.',
   },
 ];
 
@@ -164,7 +164,7 @@ export const content: ToolLocaleContent<RedditFormatterUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Найти правильные ответы на вопросы о том, как взаимодействовать с правилами редактирования Reddit, не всегда просто. Ознакомьтесь с разделом часто задаваемых вопросов, где мы рассматриваем основные вопросы о допустимых форматах и о том, как избежать штрафов за огромные «стены текста».',
+      html: 'Найти правильные ответы на вопросы о том, как взаимодействовать с правилами редактирования Reddit, не всегда просто. Ознакомьтесь с разделом часто задаваемых вопросов, где мы рассматриваем основные вопросы о допустимых форматах и о том, как избежать штрафов за огромные \"стены текста\".',
     },
   ],
   ui: {

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

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: '复制并发布',
-    text: '点击“复制文本”并直接粘贴到 Reddit 或任何论坛。',
+    text: '点击\"复制文本\"并直接粘贴到 Reddit 或任何论坛。',
   },
 ];
 

package/src/tool/safeZones/component.astro

@@ -86,7 +86,7 @@ const YOUTUBE_SVG = `<svg viewBox="0 0 24 24" fill="currentColor" width="24" hei
             <span class="szl-section-label">{t.labelOpacity}</span>
             <span class="szl-opacity-val" data-szl-opacity-val>85%</span>
           </div>
-          <input type="range" class="szl-slider" data-szl-slider min="0" max="100" value="85" />
+          <input type="range" class="szl-slider" data-szl-slider min="0" max="100" value="85" aria-label={t.labelOpacity} />
         </div>
 
         <div class="szl-toggles">

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

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Bild oder Video laden',
-    text: 'Laden Sie die Datei hoch, die Sie in der Vorschau sehen möchten. Die Verarbeitung erfolgt lokal und privat – es wird nichts ins Internet hochgeladen.',
+    text: 'Laden Sie die Datei hoch, die Sie in der Vorschau sehen möchten. Die Verarbeitung erfolgt lokal und privat - es wird nichts ins Internet hochgeladen.',
   },
   {
     name: 'Plattform auswählen',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Design für soziale Medien ist nicht nur Ästhetik – es ist <strong>Benutzerfreundlichkeit</strong>. Wenn ein Benutzer kämpfen muss, um Text zu lesen, weil die Symbole der Plattform ihn verdecken, wischt er einfach zum nächsten Video weiter. Die Verweildauer (Watch Time) sinkt drastisch, wenn es visuelle Reibung gibt.',
+      html: 'Design für soziale Medien ist nicht nur Ästhetik - es ist <strong>Benutzerfreundlichkeit</strong>. Wenn ein Benutzer kämpfen muss, um Text zu lesen, weil die Symbole der Plattform ihn verdecken, wischt er einfach zum nächsten Video weiter. Die Verweildauer (Watch Time) sinkt drastisch, wenn es visuelle Reibung gibt.',
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/en.ts

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Load your image or video',
-    text: 'Upload the file you want to preview. Processing is local and private — nothing is uploaded to the internet.',
+    text: 'Upload the file you want to preview. Processing is local and private - nothing is uploaded to the internet.',
   },
   {
     name: 'Select the platform',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Designing for social media is not just aesthetics — it is <strong>usability</strong>. If a user has to struggle to read text because the platform\'s icons are covering it, they will simply swipe to the next video. Retention (Watch Time) drops sharply when there is visual friction.',
+      html: 'Designing for social media is not just aesthetics - it is <strong>usability</strong>. If a user has to struggle to read text because the platform\'s icons are covering it, they will simply swipe to the next video. Retention (Watch Time) drops sharply when there is visual friction.',
     },
     {
       type: 'paragraph',

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

@@ -4,7 +4,7 @@ import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
 
 const slug = 'simulateur-reseaux';
-const title = 'Safe Zones Réseaux Sociaux : Simulateur Vidéo TikTok, Reels et Shorts';
+const title = 'Safe Zones Réseaux Sociaux: Simulateur Vidéo TikTok, Reels et Shorts';
 const description =
   'Prévisualisez vos images et vidéos avec la vraie interface des réseaux sociaux. Assurez-vous que votre contenu est toujours visible et évitez les recadrages accidentels.';
 
@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Charger votre image ou vidéo',
-    text: "Téléchargez le fichier que vous souhaitez prévisualiser. Le traitement est local et privé — rien n'est envoyé sur internet.",
+    text: "Téléchargez le fichier que vous souhaitez prévisualiser. Le traitement est local et privé - rien n'est envoyé sur internet.",
   },
   {
     name: 'Sélectionner la plateforme',
@@ -95,7 +95,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   seo: [
     {
       type: 'title',
-      text: 'Guide Maître des Zones Sécurisées : Optimisez vos Reels, TikToks et Shorts',
+      text: 'Guide Maître des Zones Sécurisées: Optimisez vos Reels, TikToks et Shorts',
       level: 2,
     },
     {
@@ -111,19 +111,19 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
       columns: [
         {
           type: 'card',
-          title: "TikTok : L'interface la plus invasive",
-          html: "<p>TikTok possède l'interface la plus dense. Sur la droite, une colonne d'icônes occupe environ 15% de la largeur. En bas, la description peut s'étendre sur 4 ou 5 lignes si elle est longue, couvrant presque un tiers de l'écran depuis le bas.</p><ul><li><strong>Marge inférieure :</strong> Laissez libres les 250 derniers pixels pour éviter le texte de la description et le nom d'utilisateur.</li><li><strong>Marge droite :</strong> Évitez de placer du texte à moins de 100px du bord droit.</li><li><strong>Haut :</strong> Les boutons « Abonnements » et « Pour toi » occupent la bande supérieure centrale.</li></ul>",
+          title: "TikTok: L'interface la plus invasive",
+          html: "<p>TikTok possède l'interface la plus dense. Sur la droite, une colonne d'icônes occupe environ 15% de la largeur. En bas, la description peut s'étendre sur 4 ou 5 lignes si elle est longue, couvrant presque un tiers de l'écran depuis le bas.</p><ul><li><strong>Marge inférieure :</strong> Laissez libres les 250 derniers pixels pour éviter le texte de la description et le nom d'utilisateur.</li><li><strong>Marge droite :</strong> Évitez de placer du texte à moins de 100px du bord droit.</li><li><strong>Haut :</strong> Les boutons \" Abonnements \" et \" Pour toi \" occupent la bande supérieure centrale.</li></ul>",
         },
         {
           type: 'card',
-          title: 'IG Reels : Le facteur du fil',
+          title: 'IG Reels: Le facteur du fil',
           html: "<p>Contrairement à TikTok, Instagram Reels recadre la vidéo au format 4:5 lorsqu'elle est visualisée depuis le fil principal (pas depuis l'onglet Reels). Cela signifie que si vous placez des informations vitales dans les 15% supérieurs ou inférieurs de votre vidéo 9:16, elles disparaîtront dans le fil.</p><ul><li><strong>La règle du 4:5 :</strong> Gardez les titres et éléments clés dans la zone centrale pour assurer la visibilité dans le fil.</li><li><strong>Interface :</strong> Les icônes de Reels sont plus subtiles que celles de TikTok, permettant un peu plus de marge latérale.</li><li><strong>Bouton audio :</strong> Situé en bas à droite, il couvre généralement bien moins que le disque tournant de TikTok.</li></ul>",
         },
       ],
     },
     {
       type: 'title',
-      text: 'YouTube Shorts : Attention à la droite',
+      text: 'YouTube Shorts: Attention à la droite',
       level: 3,
     },
     {
@@ -135,7 +135,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
       items: [
         '<strong>Marge droite :</strong> Évitez de placer du texte ou des éléments importants dans les 20% inférieurs droits.',
         "<strong>Marge inférieure :</strong> Laissez libres les 150 derniers pixels pour éviter le texte de la description et le nom d'utilisateur.",
-        "<strong>Haut :</strong> Les boutons « S'abonner » et « Plus » occupent la bande supérieure centrale.",
+        "<strong>Haut :</strong> Les boutons \" S'abonner \" et \" Plus \" occupent la bande supérieure centrale.",
       ],
     },
     {
@@ -150,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'La « Zone d\'Or » pour l\'action principale est le tiers central de la vidéo. Si vous filmez une personne, assurez-vous que ses yeux et sa bouche se trouvent dans cette zone. Les éléments graphiques importants doivent être légèrement décalés vers le haut par rapport au centre géométrique pour éviter la description inférieure.',
+      html: 'La \" Zone d\'Or \" pour l\'action principale est le tiers central de la vidéo. Si vous filmez une personne, assurez-vous que ses yeux et sa bouche se trouvent dans cette zone. Les éléments graphiques importants doivent être légèrement décalés vers le haut par rapport au centre géométrique pour éviter la description inférieure.',
     },
     {
       type: 'title',
@@ -168,7 +168,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Rappelez-vous que les téléphones modernes ont des « encoches » ou des trous de caméra à l\'écran. Cet outil inclut une marge de sécurité supérieure pour que votre contenu n\'entre pas en conflit avec l\'horloge ou les icônes système (batterie, signal).',
+      html: 'Rappelez-vous que les téléphones modernes ont des \" encoches \" ou des trous de caméra à l\'écran. Cet outil inclut une marge de sécurité supérieure pour que votre contenu n\'entre pas en conflit avec l\'horloge ou les icônes système (batterie, signal).',
     },
     {
       type: 'title',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "Concevoir pour les réseaux sociaux n'est pas seulement esthétique — c'est de l'<strong>utilisabilité</strong>. Si un utilisateur doit faire un effort pour lire un texte parce que les icônes de la plateforme le couvrent, il passera simplement à la vidéo suivante. La rétention (Watch Time) chute brutalement en cas de friction visuelle.",
+      html: "Concevoir pour les réseaux sociaux n'est pas seulement esthétique - c'est de l'<strong>utilisabilité</strong>. Si un utilisateur doit faire un effort pour lire un texte parce que les icônes de la plateforme le couvrent, il passera simplement à la vidéo suivante. La rétention (Watch Time) chute brutalement en cas de friction visuelle.",
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/id.ts

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Muat gambar atau video Anda',
-    text: 'Unggah file yang ingin Anda pratinjau. Pemrosesan bersifat lokal dan pribadi — tidak ada yang diunggah ke internet.',
+    text: 'Unggah file yang ingin Anda pratinjau. Pemrosesan bersifat lokal dan pribadi - tidak ada yang diunggah ke internet.',
   },
   {
     name: 'Pilih platform',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Mendesain untuk media sosial bukan hanya tentang estetika — ini tentang <strong>kegunaan</strong>. Jika pengguna harus berjuang untuk membaca teks karena ikon platform menutupinya, mereka akan langsung beralih ke video berikutnya. Retensi (Watch Time) turun tajam saat terjadi gesekan visual.',
+      html: 'Mendesain untuk media sosial bukan hanya tentang estetika - ini tentang <strong>kegunaan</strong>. Jika pengguna harus berjuang untuk membaca teks karena ikon platform menutupinya, mereka akan langsung beralih ke video berikutnya. Retensi (Watch Time) turun tajam saat terjadi gesekan visual.',
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/it.ts

@@ -25,7 +25,7 @@ const faqData = [
       "Sono molto simili ma non identiche. I pulsanti di YouTube Shorts sono posizionati diversamente rispetto a quelli di Reels. Il nostro strumento ti consente di passare da una piattaforma all'altra per verificare il tuo design su ognuna di esse.",
   },
   {
-    question: 'Cosa succede se metto del testo nell’angolo in basso a destra?',
+    question: 'Cosa succede se metto del testo nell\'angolo in basso a destra?',
     answer:
       "Probabilmente sarà invisibile o molto difficile da leggere, poiché è lì che si trovano le icone del profilo, del cuore e dei commenti. Idealmente, tieni testi e volti nell'area centrale superiore (Zona Sicura).",
   },
@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Carica la tua immagine o il tuo video',
-    text: "Carica il file che desideri visualizzare in anteprima. L'elaborazione è locale e privata — nulla viene caricato su internet.",
+    text: "Carica il file che desideri visualizzare in anteprima. L'elaborazione è locale e privata - nulla viene caricato su internet.",
   },
   {
     name: 'Seleziona la piattaforma',
@@ -111,8 +111,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
       columns: [
         {
           type: 'card',
-          title: 'TikTok: L’interfaccia più invasiva',
-          html: "<p>TikTok ha l'interfaccia più densa. Sul lato destro, c’è una colonna di icone che occupa circa il 15% della larghezza. In basso, la descrizione può estendersi su 4 o 5 righe, coprendo quasi un terzo dello schermo dal basso.</p><ul><li><strong>Margine inferiore:</strong> Lascia liberi gli ultimi 250px per evitare il testo della descrizione e il nome utente.</li><li><strong>Margine destro:</strong> Evita di posizionare il testo entro 100px dal bordo destro.</li><li><strong>In alto:</strong> I pulsanti \"Seguiti\" e \"Per te\" occupano la fascia centrale superiore.</li></ul>",
+          title: 'TikTok: L\'interfaccia più invasiva',
+          html: "<p>TikTok ha l'interfaccia più densa. Sul lato destro, c\'è una colonna di icone che occupa circa il 15% della larghezza. In basso, la descrizione può estendersi su 4 o 5 righe, coprendo quasi un terzo dello schermo dal basso.</p><ul><li><strong>Margine inferiore:</strong> Lascia liberi gli ultimi 250px per evitare il testo della descrizione e il nome utente.</li><li><strong>Margine destro:</strong> Evita di posizionare il testo entro 100px dal bordo destro.</li><li><strong>In alto:</strong> I pulsanti \"Seguiti\" e \"Per te\" occupano la fascia centrale superiore.</li></ul>",
         },
         {
           type: 'card',
@@ -128,7 +128,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "YouTube Shorts ha un’interfaccia asimmetrica. Il pulsante iscriviti è molto visibile e di colore solido (solitamente nero o bianco), creando un importante punto cieco visivo in basso a destra.",
+      html: "YouTube Shorts ha un\'interfaccia asimmetrica. Il pulsante iscriviti è molto visibile e di colore solido (solitamente nero o bianco), creando un importante punto cieco visivo in basso a destra.",
     },
     {
       type: 'list',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "Progettare per i social media non è solo estetica — è <strong>usabilità</strong>. Se un utente deve sforzarsi per leggere il testo perché le icone della piattaforma lo coprono, passerà semplicemente al video successivo. La ritenzione (Watch Time) cala drasticamente quando c'è un attrito visivo.",
+      html: "Progettare per i social media non è solo estetica - è <strong>usabilità</strong>. Se un utente deve sforzarsi per leggere il testo perché le icone della piattaforma lo coprono, passerà semplicemente al video successivo. La ritenzione (Watch Time) cala drasticamente quando c'è un attrito visivo.",
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/nl.ts

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Laad uw afbeelding of video',
-    text: 'Upload het bestand waarvan u een voorbeeld wilt zien. De verwerking is lokaal en privé — er wordt niets naar internet geüpload.',
+    text: 'Upload het bestand waarvan u een voorbeeld wilt zien. De verwerking is lokaal en privé - er wordt niets naar internet geüpload.',
   },
   {
     name: 'Selecteer het platform',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Ontwerpen voor sociale media gaat niet alleen over esthetiek — het gaat over <strong>gebruiksvriendelijkheid</strong>. Als een gebruiker moeite moet doen om tekst te lezen omdat de iconen van het platform deze bedekken, zullen ze simpelweg naar de volgende video swipen. Retentie (kijkduur) daalt scherp als er visuele wrijving is.',
+      html: 'Ontwerpen voor sociale media gaat niet alleen over esthetiek - het gaat over <strong>gebruiksvriendelijkheid</strong>. Als een gebruiker moeite moet doen om tekst te lezen omdat de iconen van het platform deze bedekken, zullen ze simpelweg naar de volgende video swipen. Retentie (kijkduur) daalt scherp als er visuele wrijving is.',
     },
     {
       type: 'paragraph',

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

@@ -10,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: "Czym są „strefy bezpieczne” (Safe Zones) w mediach społecznościowych?",
+    question: "Czym są \"strefy bezpieczne\" (Safe Zones) w mediach społecznościowych?",
     answer:
       "Są to obszary ekranu, w których treść jest widoczna bez ryzyka zasłonięcia przez elementy interfejsu, takie jak nazwa użytkownika, opis, przyciski interakcji (polubienie, udostępnienie) lub automatyczne przycięcia stosowane przez niektóre urządzenia.",
   },
@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Wczytaj zdjęcie lub film',
-    text: "Prześlij plik, który chcesz podejrzeć. Przetwarzanie odbywa się lokalnie i prywatnie — nic nie jest wysyłane do Internetu.",
+    text: "Prześlij plik, który chcesz podejrzeć. Przetwarzanie odbywa się lokalnie i prywatnie - nic nie jest wysyłane do Internetu.",
   },
   {
     name: 'Wybierz platformę',
@@ -104,7 +104,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "To narzędzie pozwala wczytać pliki multimedialne i podejrzeć dokładnie, które części kadru zostaną pochłonięte przez interfejs. Nie chodzi tylko o <strong>napisy</strong>; chodzi o upewnienie się, że twarze, produkty lub główne akcje w Twoim filmie nie zostaną pogrzebane pod przyciskiem „Lubię to” lub długim opisem.",
+      html: "To narzędzie pozwala wczytać pliki multimedialne i podejrzeć dokładnie, które części kadru zostaną pochłonięte przez interfejs. Nie chodzi tylko o <strong>napisy</strong>; chodzi o upewnienie się, że twarze, produkty lub główne akcje w Twoim filmie nie zostaną pogrzebane pod przyciskiem \"Lubię to\" lub długim opisem.",
     },
     {
       type: 'grid',
@@ -112,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok: Najbardziej inwazyjny interfejs',
-          html: "<p>TikTok posiada najbardziej zagęszczony interfejs. Po prawej stronie znajduje się kolumna ikon zajmująca około 15% szerokości. Na dole opis może rozciągać się na 4 lub 5 linii, zakrywając od dołu prawie jedną trzecią ekranu.</p><ul><li><strong>Dolny margines:</strong> Pozostaw ostatnie 250px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.</li><li><strong>Prawy margines:</strong> Unikaj umieszczania tekstu w odległości mniejszej niż 100px od prawej krawędzi.</li><li><strong>Góra:</strong> Przyciski „Obserwujesz” i „Dla Ciebie” zajmują górny środkowy pas.</li></ul>",
+          html: "<p>TikTok posiada najbardziej zagęszczony interfejs. Po prawej stronie znajduje się kolumna ikon zajmująca około 15% szerokości. Na dole opis może rozciągać się na 4 lub 5 linii, zakrywając od dołu prawie jedną trzecią ekranu.</p><ul><li><strong>Dolny margines:</strong> Pozostaw ostatnie 250px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.</li><li><strong>Prawy margines:</strong> Unikaj umieszczania tekstu w odległości mniejszej niż 100px od prawej krawędzi.</li><li><strong>Góra:</strong> Przyciski \"Obserwujesz\" i \"Dla Ciebie\" zajmują górny środkowy pas.</li></ul>",
         },
         {
           type: 'card',
@@ -135,7 +135,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
       items: [
         '<strong>Prawy margines:</strong> Unikaj umieszczania tekstu lub ważnych elementów w prawym dolnym obszarze 20%.',
         '<strong>Dolny margines:</strong> Pozostaw ostatnie 150px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.',
-        '<strong>Góra:</strong> Przyciski „Subskrybuj” i inne zajmują górny środkowy pas.',
+        '<strong>Góra:</strong> Przyciski \"Subskrybuj\" i inne zajmują górny środkowy pas.',
       ],
     },
     {
@@ -150,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '„Złota Strefa” dla głównej akcji to środkowa jedna trzecia filmu. Jeśli filmujesz osobę, upewnij się, że jej oczy i usta znajdują się w tej strefie. Ważne elementy graficzne powinny być nieco przesunięte w górę od geometrycznego środka, aby uniknąć dolnego opisu.',
+      html: '\"Złota Strefa\" dla głównej akcji to środkowa jedna trzecia filmu. Jeśli filmujesz osobę, upewnij się, że jej oczy i usta znajdują się w tej strefie. Ważne elementy graficzne powinny być nieco przesunięte w górę od geometrycznego środka, aby uniknąć dolnego opisu.',
     },
     {
       type: 'title',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "Projektowanie dla mediów społecznościowych to nie tylko estetyka — to <strong>użyteczność</strong>. Jeśli użytkownik musi walczyć o przeczytanie tekstu, ponieważ ikony platformy go zasłaniają, po prostu przejdzie do następnego filmu. Retencja (Watch Time) gwałtownie spada, gdy pojawia się wizualne tarcie.",
+      html: "Projektowanie dla mediów społecznościowych to nie tylko estetyka - to <strong>użyteczność</strong>. Jeśli użytkownik musi walczyć o przeczytanie tekstu, ponieważ ikony platformy go zasłaniają, po prostu przejdzie do następnego filmu. Retencja (Watch Time) gwałtownie spada, gdy pojawia się wizualne tarcie.",
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/pt.ts

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Carrega a tua imagem ou vídeo',
-    text: 'Faz o upload do ficheiro que desejas pré-visualizar. O processamento é local e privado — nada é carregado para a internet.',
+    text: 'Faz o upload do ficheiro que desejas pré-visualizar. O processamento é local e privado - nada é carregado para a internet.',
   },
   {
     name: 'Seleciona a plataforma',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Desenhar para redes sociais não é apenas estética — é <strong>usabilidade</strong>. Se um utilizador tiver de lutar para ler texto porque os ícones da plataforma o cobrem, ele simplesmente passará para o vídeo seguinte. A retenção (Watch Time) cai drasticamente quando há fricção visual.',
+      html: 'Desenhar para redes sociais não é apenas estética - é <strong>usabilidade</strong>. Se um utilizador tiver de lutar para ler texto porque os ícones da plataforma o cobrem, ele simplesmente passará para o vídeo seguinte. A retenção (Watch Time) cai drasticamente quando há fricção visual.',
     },
     {
       type: 'paragraph',

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

@@ -10,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: 'Что такое «безопасные зоны» в социальных сетях?',
+    question: 'Что такое \"безопасные зоны\" в социальных сетях?',
     answer:
       'Это области экрана, где контент виден без риска быть перекрытым элементами интерфейса, такими как имя пользователя, описание, кнопки взаимодействия (лайк, репост) или автоматическая обрезка, применяемая некоторыми устройствами.',
   },
@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Загрузите изображение или видео',
-    text: 'Загрузите файл, который хотите просмотреть. Обработка происходит локально и конфиденциально — ничего не загружается в интернет.',
+    text: 'Загрузите файл, который хотите просмотреть. Обработка происходит локально и конфиденциально - ничего не загружается в интернет.',
   },
   {
     name: 'Выберите платформу',
@@ -100,11 +100,11 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'В перенасыщенном мире вертикального контента первое впечатление — техническое. Самая большая ошибка авторов — игнорирование того, как их <strong>видео или изображение</strong> взаимодействует с нативным интерфейсом платформы. Каждая социальная сеть (TikTok, Instagram Reels и YouTube Shorts) накладывает слои кнопок, текста и профилей, которые могут свести на нет визуальный эффект вашей композиции.',
+      html: 'В перенасыщенном мире вертикального контента первое впечатление - техническое. Самая большая ошибка авторов - игнорирование того, как их <strong>видео или изображение</strong> взаимодействует с нативным интерфейсом платформы. Каждая социальная сеть (TikTok, Instagram Reels и YouTube Shorts) накладывает слои кнопок, текста и профилей, которые могут свести на нет визуальный эффект вашей композиции.',
     },
     {
       type: 'paragraph',
-      html: 'Этот инструмент позволяет загружать медиафайлы и просматривать, какие именно части вашего кадра будут перекрыты интерфейсом. Речь идет не только о <strong>субтитрах</strong>; речь идет о том, чтобы лица, продукты или основные действия в вашем видео не оказались погребены под кнопкой «Нравится» или длинным описанием.',
+      html: 'Этот инструмент позволяет загружать медиафайлы и просматривать, какие именно части вашего кадра будут перекрыты интерфейсом. Речь идет не только о <strong>субтитрах</strong>; речь идет о том, чтобы лица, продукты или основные действия в вашем видео не оказались погребены под кнопкой \"Нравится\" или длинным описанием.',
     },
     {
       type: 'grid',
@@ -112,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok: самый навязчивый интерфейс',
-          html: '<p>TikTok имеет самый плотный интерфейс. С правой стороны находится колонка иконок, занимающая примерно 15% ширины. Внизу описание может растягиваться на 4 или 5 строк, закрывая почти треть экрана снизу.</p><ul><li><strong>Нижний отступ:</strong> оставляйте последние 250 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.</li><li><strong>Правый отступ:</strong> избегайте размещения текста в пределах 100 пикселей от правого края.</li><li><strong>Верх:</strong> кнопки «Подписки» и «Рекомендации» занимают верхнюю центральную полосу.</li></ul>',
+          html: '<p>TikTok имеет самый плотный интерфейс. С правой стороны находится колонка иконок, занимающая примерно 15% ширины. Внизу описание может растягиваться на 4 или 5 строк, закрывая почти треть экрана снизу.</p><ul><li><strong>Нижний отступ:</strong> оставляйте последние 250 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.</li><li><strong>Правый отступ:</strong> избегайте размещения текста в пределах 100 пикселей от правого края.</li><li><strong>Верх:</strong> кнопки \"Подписки\" и \"Рекомендации\" занимают верхнюю центральную полосу.</li></ul>',
         },
         {
           type: 'card',
@@ -150,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '«Золотая зона» для основного действия — центральная треть видео. Если вы снимаете человека, убедитесь, что его глаза и рот находятся в этой зоне. Важные графические элементы должны быть слегка смещены вверх от геометрического центра, чтобы избежать перекрытия нижним описанием.',
+      html: '\"Золотая зона\" для основного действия - центральная треть видео. Если вы снимаете человека, убедитесь, что его глаза и рот находятся в этой зоне. Важные графические элементы должны быть слегка смещены вверх от геометрического центра, чтобы избежать перекрытия нижним описанием.',
     },
     {
       type: 'title',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Дизайн для социальных сетей — это не только эстетика, но и <strong>удобство использования</strong>. Если пользователю приходится изо всех сил пытаться прочитать текст, потому что иконки платформы закрывают его, он просто перелистнет к следующему видео. Удержание (Watch Time) резко падает при наличии визуального дискомфорта.',
+      html: 'Дизайн для социальных сетей - это не только эстетика, но и <strong>удобство использования</strong>. Если пользователю приходится изо всех сил пытаться прочитать текст, потому что иконки платформы закрывают его, он просто перелистнет к следующему видео. Удержание (Watch Time) резко падает при наличии визуального дискомфорта.',
     },
     {
       type: 'paragraph',
@@ -209,14 +209,14 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     ttFollowing: 'Подписки',
     ttForYou: 'Рекомендации',
     ttDescription: 'Реальный дизайн интерфейса для создателей контента. #uxdesign #socialmedia',
-    ttAudio: 'jjlmoya — оригинальный звук',
+    ttAudio: 'jjlmoya - оригинальный звук',
     ttNavHome: 'Главная',
     ttNavFriends: 'Друзья',
     ttNavInbox: 'Входящие',
     ttNavProfile: 'Профиль',
     reelsFollow: 'Подписаться',
     reelsDescription: 'Этот интерфейс идентичен реальному. #reels #ux #simulator',
-    reelsAudio: 'Trending Music — оригинальное аудио',
+    reelsAudio: 'Trending Music - оригинальное аудио',
     shortsSubscribe: 'ПОДПИСАТЬСЯ',
     shortsDislike: 'Не нравится',
     shortsShare: 'Поделиться',

package/src/tool/safeZones/i18n/sv.ts

@@ -34,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Ladda upp din bild eller video',
-    text: 'Ladda upp filen du vill förhandsgranska. Bearbetningen sker lokalt och privat – inget laddas upp till internet.',
+    text: 'Ladda upp filen du vill förhandsgranska. Bearbetningen sker lokalt och privat - inget laddas upp till internet.',
   },
   {
     name: 'Välj plattform',
@@ -177,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Att designa för sociala medier handlar inte bara om estetik – det handlar om <strong>användbarhet</strong>. Om en användare måste kämpa för att läsa text för att plattformens ikoner täcker den, kommer de helt enkelt att svepa vidare till nästa video. Behållningen (Watch Time) sjunker kraftigt när det finns visuell friktion.',
+      html: 'Att designa för sociala medier handlar inte bara om estetik - det handlar om <strong>användbarhet</strong>. Om en användare måste kämpa för att läsa text för att plattformens ikoner täcker den, kommer de helt enkelt att svepa vidare till nästa video. Behållningen (Watch Time) sjunker kraftigt när det finns visuell friktion.',
     },
     {
       type: 'paragraph',

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

@@ -10,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: '什么是社交媒体上的“安全区域”？',
+    question: '什么是社交媒体上的\"安全区域\"？',
     answer:
       '安全区域是指屏幕上内容可见且不会被界面元素（如用户名、描述、交互按钮（点赞、分享））或某些设备应用的自动裁剪所遮挡的区域。',
   },
@@ -104,7 +104,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '此工具允许您加载媒体文件，并准确预览画面的哪些部分会被界面遮挡。这不仅仅关乎<strong>字幕</strong>；它还关乎确保视频中的脸部、产品或主要动作不会被嵌入“点赞”按钮或冗长的描述之下。',
+      html: '此工具允许您加载媒体文件，并准确预览画面的哪些部分会被界面遮挡。这不仅仅关乎<strong>字幕</strong>；它还关乎确保视频中的脸部、产品或主要动作不会被嵌入\"点赞\"按钮或冗长的描述之下。',
     },
     {
       type: 'grid',
@@ -112,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok：最具侵入性的界面',
-          html: '<p>TikTok 的界面最为密集。在右侧，有一列图标占据了约 15% 的宽度。在底部，描述可以扩展到 4 或 5 行，从下方遮挡了近三分之一的屏幕。</p><ul><li><strong>底部边距：</strong>保留最后 250px 的自由空间，以避开描述文字和用户名。</li><li><strong>右侧边距：</strong>避免在距离右边缘 100px 范围内放置文字。</li><li><strong>顶部：</strong>“关注”和“推荐”按钮占据了顶部中央条案。</li></ul>',
+          html: '<p>TikTok 的界面最为密集。在右侧，有一列图标占据了约 15% 的宽度。在底部，描述可以扩展到 4 或 5 行，从下方遮挡了近三分之一的屏幕。</p><ul><li><strong>底部边距：</strong>保留最后 250px 的自由空间，以避开描述文字和用户名。</li><li><strong>右侧边距：</strong>避免在距离右边缘 100px 范围内放置文字。</li><li><strong>顶部：</strong>\"关注\"和\"推荐\"按钮占据了顶部中央条案。</li></ul>',
         },
         {
           type: 'card',
@@ -150,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '主要动作的“黄金区域”是视频的中央三分之一。如果您正在拍摄人物，请确保他们的眼睛和嘴巴在这个区域内。重要的图形元素应从几何中心略微向上移动，以避开底部的描述。',
+      html: '主要动作的\"黄金区域\"是视频的中央三分之一。如果您正在拍摄人物，请确保他们的眼睛和嘴巴在这个区域内。重要的图形元素应从几何中心略微向上移动，以避开底部的描述。',
     },
     {
       type: 'title',

package/src/tool/socialImageResizer/component.astro

@@ -73,7 +73,7 @@ const icons: Record<string, string> = {
         <h2>{t.uploadTitle}</h2>
         <p>{t.uploadSubtitle}</p>
       </div>
-      <input type="file" id="sri-file-input" accept="image/*" hidden />
+      <input type="file" id="sri-file-input" class="file-input" accept="image/*" hidden />
     </div>
 
     <div class="sri-editor-view" id="sri-editor-view">
@@ -84,7 +84,7 @@ const icons: Record<string, string> = {
       <div class="sri-editor-actions">
         <div class="sri-zoom-control">
           <span set:html={icons.zoomOut} />
-          <input type="range" id="sri-zoom-range" min="10" max="300" value="100" />
+          <input type="range" id="sri-zoom-range" min="10" max="300" value="100" aria-label="Zoom" />
           <span set:html={icons.zoomIn} />
         </div>
 

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

@@ -91,7 +91,7 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Im heutigen digitalen Ökosystem ist der erste Eindruck visuell. Jedes soziale Netzwerk arbeitet mit spezifischen Algorithmen, die Inhalte bevorzugen, die nativ an ihre Proportionen angepasst sind. Unser Social Media Image Resizer ist nicht nur ein technisches Werkzeug – er ist Ihr Partner, um sicherzustellen, dass Ihre Botschaft ohne unerwünschte Zuschnitte oder Qualitätsverluste ankommt.',
+      html: 'Im heutigen digitalen Ökosystem ist der erste Eindruck visuell. Jedes soziale Netzwerk arbeitet mit spezifischen Algorithmen, die Inhalte bevorzugen, die nativ an ihre Proportionen angepasst sind. Unser Social Media Image Resizer ist nicht nur ein technisches Werkzeug - er ist Ihr Partner, um sicherzustellen, dass Ihre Botschaft ohne unerwünschte Zuschnitte oder Qualitätsverluste ankommt.',
     },
     {
       type: 'paragraph',
@@ -105,10 +105,10 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     {
       type: 'grid',
       columns: [
-        { title: 'Instagram — Quadratischer Post', body: '1080 × 1080 px · Verhältnis 1:1' },
-        { title: 'Instagram — Vertikaler Post', body: '1080 × 1350 px · Verhältnis 4:5' },
-        { title: 'TikTok / Reels — Vertikal', body: '1080 × 1920 px · Verhältnis 9:16' },
-        { title: 'YouTube — Thumbnail', body: '1280 × 720 px · Verhältnis 16:9' },
+        { title: 'Instagram: Quadratischer Post', body: '1080 × 1080 px · Verhältnis 1:1' },
+        { title: 'Instagram: Vertikaler Post', body: '1080 × 1350 px · Verhältnis 4:5' },
+        { title: 'TikTok / Reels: Vertikal', body: '1080 × 1920 px · Verhältnis 9:16' },
+        { title: 'YouTube: Thumbnail', body: '1280 × 720 px · Verhältnis 16:9' },
         { title: 'YouTube Kanal Banner', body: '2560 × 1440 px · Verhältnis 16:9' },
         { title: 'X (Twitter) Standard Post', body: '1200 × 675 px · Verhältnis 16:9' },
         { title: 'LinkedIn Profil Header', body: '1584 × 396 px · Verhältnis 4:1' },

package/src/tool/socialImageResizer/i18n/en.ts

@@ -91,7 +91,7 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     },
     {
       type: 'paragraph',
-      html: "In today's digital ecosystem, first impressions are visual. Each social network operates under specific algorithms that prioritize content natively adapted to its proportions. Our social media image resizer is not just a technical tool — it is your ally to ensure your message arrives without unwanted crops or quality loss.",
+      html: "In today's digital ecosystem, first impressions are visual. Each social network operates under specific algorithms that prioritize content natively adapted to its proportions. Our social media image resizer is not just a technical tool - it is your ally to ensure your message arrives without unwanted crops or quality loss.",
     },
     {
       type: 'paragraph',
@@ -105,13 +105,13 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     {
       type: 'grid',
       columns: [
-        { title: 'Instagram — Square Post', body: '1080 × 1080 px · Ratio 1:1' },
-        { title: 'Instagram — Vertical Post', body: '1080 × 1350 px · Ratio 4:5' },
-        { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
-        { title: 'YouTube — Thumbnail', body: '1280 × 720 px · Ratio 16:9' },
-        { title: 'YouTube — Channel Banner', body: '2560 × 1440 px · Ratio 16:9' },
-        { title: 'X (Twitter) — Standard Post', body: '1200 × 675 px · Ratio 16:9' },
-        { title: 'LinkedIn — Profile Cover', body: '1584 × 396 px · Ratio 4:1' },
+        { title: 'Instagram: Square Post', body: '1080 × 1080 px · Ratio 1:1' },
+        { title: 'Instagram: Vertical Post', body: '1080 × 1350 px · Ratio 4:5' },
+        { title: 'TikTok / Reels: Vertical', body: '1080 × 1920 px · Ratio 9:16' },
+        { title: 'YouTube: Thumbnail', body: '1280 × 720 px · Ratio 16:9' },
+        { title: 'YouTube: Channel Banner', body: '2560 × 1440 px · Ratio 16:9' },
+        { title: 'X (Twitter): Standard Post', body: '1200 × 675 px · Ratio 16:9' },
+        { title: 'LinkedIn: Profile Cover', body: '1584 × 396 px · Ratio 4:1' },
       ],
     },
     {