@jjlmoya/utils-creative 1.4.0 → 1.6.0

package/src/tool/zalgo-generator/component.astro

@@ -1,21 +1,28 @@
 ---
 import { Icon } from 'astro-icon/components';
+import type { ZalgoGeneratorUI } from './index';
+
+interface Props {
+    ui: ZalgoGeneratorUI;
+}
+
+const { ui } = Astro.props;
 ---
 
-<section class="zg-section">
+<section class="zg-section" id="zalgo-generator-root" data-ui={JSON.stringify(ui)}>
     <div class="zg-grid">
         <div class="zg-left">
             <div class="zg-config-card">
                 <div class="zg-config-hover-bg"></div>
                 <h3 class="zg-config-title">
                     <Icon name="mdi:tune-variant" style="width:1.25rem;height:1.25rem;color:#9333ea" />
-                    Configuración
+                    {ui.configTitle}
                 </h3>
 
                 <div class="zg-config-body">
                     <div class="zg-field">
                         <div class="zg-field-header">
-                            <label class="zg-field-label">Intensidad</label>
+                            <label class="zg-field-label">{ui.intensity}</label>
                             <span id="intensity-value" class="zg-intensity-val">50%</span>
                         </div>
                         <input type="range" id="intensity-slider" min="0.1" max="1.5" step="0.1" value="0.5" class="zg-slider" />
@@ -23,21 +30,21 @@ import { Icon } from 'astro-icon/components';
 
                     <div class="zg-toggles">
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Corrupción Superior</span>
+                            <span class="zg-toggle-label">{ui.upLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-up" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
                             </div>
                         </label>
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Ruido Central</span>
+                            <span class="zg-toggle-label">{ui.midLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-middle" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
                             </div>
                         </label>
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Corrupción Inferior</span>
+                            <span class="zg-toggle-label">{ui.downLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-down" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
@@ -47,13 +54,13 @@ import { Icon } from 'astro-icon/components';
 
                     <button id="reset-options" class="zg-reset-btn">
                         <Icon name="mdi:history" style="width:1rem;height:1rem" />
-                        Restablecer Valores
+                        {ui.resetBtn}
                     </button>
                 </div>
             </div>
 
             <div class="zg-warning">
-                <p>ADVERTENCIA: El texto Zalgo utiliza caracteres combinados de Unicode que pueden desbordar visualmente su contenedor. Úsese con precaución en redes sociales.</p>
+                <p>{ui.warningText}</p>
             </div>
         </div>
 
@@ -68,14 +75,14 @@ import { Icon } from 'astro-icon/components';
                 <textarea
                     id="input-text"
                     class="zg-textarea"
-                    placeholder="Escribe aquí el mensaje que deseas corromper..."
+                    placeholder={ui.inputPlaceholder}
                 ></textarea>
                 <div class="zg-editor-footer">
-                    <span id="char-count" class="zg-char-count">0 CARACTERES</span>
+                    <span id="char-count" class="zg-char-count">0 {ui.charLabel}</span>
                     <div class="zg-footer-sep"></div>
                     <button id="copy-btn" class="zg-copy-btn">
                         <Icon name="mdi:content-copy" style="width:1.25rem;height:1.25rem" />
-                        Copiar Resultado
+                        {ui.copyBtn}
                     </button>
                     <button id="clear-btn" class="zg-clear-btn">
                         <Icon name="mdi:trash-can-outline" style="width:1.25rem;height:1.25rem" />
@@ -84,24 +91,28 @@ import { Icon } from 'astro-icon/components';
             </div>
 
             <div class="zg-preview-wrap">
-                <div class="zg-preview-badge">Vista Previa en Tiempo Real</div>
+                <div class="zg-preview-badge">{ui.previewLabel}</div>
                 <div id="fake-ui-body" class="zg-preview-body">
                     <div class="zg-preview-dots"></div>
                     <div id="zalgo-output" class="zg-output">
-                        <span class="zg-output-empty">Vacío</span>
+                        <span class="zg-output-empty">{ui.emptyLabel}</span>
                     </div>
                     <div id="glitch-overlay" class="zg-glitch-overlay">
                         <div class="zg-glitch-line zg-glitch-line-1"></div>
                         <div class="zg-glitch-line zg-glitch-line-2"></div>
                     </div>
                 </div>
-                <p class="zg-preview-note">Nota: Algunos navegadores pueden limitar el renderizado de caracteres combinados</p>
+                <p class="zg-preview-note">{ui.noteText}</p>
             </div>
         </div>
     </div>
 </section>
 
 <script>
+    import type { ZalgoGeneratorUI } from './index';
+    const root = document.getElementById('zalgo-generator-root') as HTMLElement;
+    const ui = JSON.parse(root.dataset.ui || '{}') as ZalgoGeneratorUI;
+
     const UP = ["\u030d","\u030e","\u0304","\u0305","\u033f","\u0311","\u0306","\u0310","\u0352","\u0357","\u0351","\u0307","\u0308","\u030a","\u0342","\u0343","\u0344","\u034a","\u034b","\u034c","\u0303","\u0302","\u030c","\u0350","\u0300","\u0301","\u030b","\u030f","\u0312","\u0313","\u0314","\u033d","\u0309","\u0363","\u0364","\u0365","\u0366","\u0367","\u0368","\u0369","\u036a","\u036b","\u036c","\u036d","\u036e","\u036f","\u033e","\u035b","\u0346","\u031a"];
     const MID = ["\u0315","\u031b","\u0340","\u0341","\u0358","\u0321","\u0322","\u0327","\u0328","\u0334","\u0335","\u0336","\u034f","\u035c","\u035d","\u035e","\u035f","\u0360","\u0362","\u0338","\u0337","\u0361","\u0489"];
     const DOWN = ["\u0316","\u0317","\u0318","\u0319","\u031c","\u031d","\u031e","\u031f","\u0320","\u0324","\u0325","\u0326","\u0329","\u032a","\u032b","\u032c","\u032d","\u032e","\u032f","\u0330","\u0331","\u0332","\u0333","\u0339","\u033a","\u033b","\u033c","\u0345","\u0347","\u0348","\u0349","\u034d","\u034e","\u0353","\u0354","\u0355","\u0356","\u0359","\u035a","\u0323"];
@@ -142,10 +153,10 @@ import { Icon } from 'astro-icon/components';
     function update() {
         const text = input.value;
         const intensity = parseFloat(intensitySlider.value);
-        if (charCount) charCount.textContent = `${text.length} CARACTERES`;
+        if (charCount) charCount.textContent = `${text.length} ${ui.charLabel}`;
         if (intensityValue) intensityValue.textContent = `${Math.round(intensity * 100)}%`;
         if (!text.trim()) {
-            output.innerHTML = '<span class="zg-output-empty">Vacío</span>';
+            output.innerHTML = `<span class="zg-output-empty">${ui.emptyLabel}</span>`;
             glitchOverlay.style.opacity = "0";
             fakeUiBody.style.borderColor = "";
             fakeUiBody.style.boxShadow = "";
@@ -174,10 +185,10 @@ import { Icon } from 'astro-icon/components';
 
     copyBtn?.addEventListener("click", () => {
         const text = output.textContent || "";
-        if (text && text !== "Vacío") {
+        if (text && text !== ui.emptyLabel) {
             navigator.clipboard.writeText(text);
             const orig = copyBtn.innerHTML;
-            copyBtn.innerHTML = "¡Copiado!";
+            copyBtn.innerHTML = ui.copied || '¡Copiado!';
             setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
         }
     });

package/src/tool/zalgo-generator/i18n/en.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copy Chaos',
     copied: 'Copied!',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'References'
+    bibliographyTitle: 'References',
+    configTitle: 'Configuration',
+    intensity: 'Intensity',
+    upLabel: 'Upper Corruption',
+    midLabel: 'Middle Noise',
+    downLabel: 'Lower Corruption',
+    resetBtn: 'Reset Values',
+    warningText: 'WARNING: Zalgo text uses combined Unicode characters that may visually overflow their container. Use with caution on social media.',
+    previewLabel: 'Real-time Preview',
+    emptyLabel: 'Empty',
+    charLabel: 'CHARACTERS',
+    noteText: 'Note: Some browsers may limit the rendering of combined characters'
   },
   seo: [
     { type: 'title', text: 'What Is Zalgo Text and How Does Visual Corruption Work?', level: 2 },

package/src/tool/zalgo-generator/i18n/es.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copiar Caos',
     copied: '¡Copiado!',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referencias'
+    bibliographyTitle: 'Referencias',
+    configTitle: 'Configuración',
+    intensity: 'Intensidad',
+    upLabel: 'Corrupción Superior',
+    midLabel: 'Ruido Central',
+    downLabel: 'Corrupción Inferior',
+    resetBtn: 'Restablecer Valores',
+    warningText: 'ADVERTENCIA: El texto Zalgo utiliza caracteres combinados de Unicode que pueden desbordar visualmente su contenedor. Úsese con precaución en redes sociales.',
+    previewLabel: 'Vista Previa en Tiempo Real',
+    emptyLabel: 'Vacío',
+    charLabel: 'CARACTERES',
+    noteText: 'Nota: Algunos navegadores pueden limitar el renderizado de caracteres combinados'
   },
   seo: [
     { type: 'title', text: '¿Qué es el Texto Zalgo y cómo funciona la corrupción visual?', level: 2 },

package/src/tool/zalgo-generator/i18n/fr.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copier le Chaos',
     copied: 'Copié !',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Références'
+    bibliographyTitle: 'Références',
+    configTitle: 'Configuration',
+    intensity: 'Intensité',
+    upLabel: 'Corruption Supérieure',
+    midLabel: 'Bruit Central',
+    downLabel: 'Corruption Inférieure',
+    resetBtn: 'Réinitialiser les Valeurs',
+    warningText: 'AVERTISSEMENT : Le texte Zalgo utilise des caractères combinés Unicode qui peuvent déborder visuellement de leur conteneur. À utiliser avec précaution sur les réseaux sociaux.',
+    previewLabel: 'Aperçu en Temps Réel',
+    emptyLabel: 'Vide',
+    charLabel: 'CARACTÈRES',
+    noteText: 'Note : Certains navigateurs peuvent limiter le rendu des caractères combinés'
   },
   seo: [
     { type: 'title', text: 'Qu\'est-ce que le Texte Zalgo et comment fonctionne la corruption visuelle ?', level: 2 },

package/src/tool/zalgo-generator/index.ts

@@ -14,6 +14,17 @@ export interface ZalgoGeneratorUI {
   copied: string;
   faqTitle: string;
   bibliographyTitle: string;
+  configTitle: string;
+  intensity: string;
+  upLabel: string;
+  midLabel: string;
+  downLabel: string;
+  resetBtn: string;
+  warningText: string;
+  previewLabel: string;
+  emptyLabel: string;
+  charLabel: string;
+  noteText: string;
 }
 
 export type ZalgoGeneratorLocaleContent = ToolLocaleContent<ZalgoGeneratorUI>;

package/src/tool/excuse-generator/style.css

@@ -1,316 +0,0 @@
-.excuse-generator {
-  --excuse-generator-bg: #fff;
-  --excuse-generator-bg-transparent: rgba(255, 255, 255, 0.8);
-  --excuse-generator-bg-muted: #f1f5f9;
-  --excuse-generator-text: #0f172a;
-  --excuse-generator-text-muted: #475569;
-  --excuse-generator-text-dim: #64748b;
-  --excuse-generator-border: #e2e8f0;
-  --excuse-generator-shadow: rgba(0, 0, 0, 0.05);
-  --excuse-generator-primary: #ec4899;
-  --excuse-generator-primary-on: #fff;
-  --excuse-generator-accent: #f43f5e;
-  --excuse-generator-success: #10b981;
-  --excuse-generator-warning: #f59e0b;
-  --excuse-generator-error: #f43f5e;
-  --excuse-generator-ring: rgba(236, 72, 153, 0.2);
-}
-
-.theme-dark .excuse-generator {
-  --excuse-generator-bg: #0f172a;
-  --excuse-generator-bg-transparent: rgba(15, 23, 42, 0.8);
-  --excuse-generator-bg-muted: #1e293b;
-  --excuse-generator-text: #f8fafc;
-  --excuse-generator-text-muted: #94a3b8;
-  --excuse-generator-text-dim: #64748b;
-  --excuse-generator-border: #334155;
-  --excuse-generator-shadow: rgba(0, 0, 0, 0.3);
-  --excuse-generator-primary: #f472b6;
-  --excuse-generator-primary-on: #fff;
-  --excuse-generator-accent: #fb7185;
-  --excuse-generator-success: #34d399;
-  --excuse-generator-warning: #fbbf24;
-  --excuse-generator-error: #fb7185;
-  --excuse-generator-ring: rgba(244, 114, 182, 0.2);
-}
-
-.excuse-generator-root {
-  max-width: 64rem;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 1rem;
-}
-
-@media (min-width: 768px) {
-  .excuse-generator-root {
-    padding: 2rem;
-  }
-}
-
-.excuse-generator-card {
-  position: relative;
-  background-color: var(--excuse-generator-bg-transparent);
-  backdrop-filter: blur(24px);
-  border-radius: 2rem;
-  padding: 2rem;
-  box-shadow: 0 25px 50px -12px var(--excuse-generator-shadow);
-  border: 1px solid var(--excuse-generator-border);
-  min-height: 500px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  overflow: hidden;
-}
-
-@media (min-width: 768px) {
-  .excuse-generator-card {
-    padding: 3rem;
-  }
-}
-
-.excuse-generator-blob {
-  position: absolute;
-  width: 24rem;
-  height: 24rem;
-  border-radius: 9999px;
-  filter: blur(64px);
-  pointer-events: none;
-}
-
-.excuse-generator-blob-1 {
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  background-color: rgba(244, 114, 182, 0.2);
-}
-
-.excuse-generator-blob-2 {
-  bottom: 0;
-  left: 0;
-  transform: translate(-50%, 50%);
-  background-color: rgba(251, 113, 133, 0.2);
-}
-
-.excuse-generator-slots {
-  position: relative;
-  z-index: 10;
-  width: 100%;
-  max-width: 80rem;
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 3rem;
-}
-
-@media (min-width: 1024px) {
-  .excuse-generator-slots {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-.excuse-generator-slot {
-  position: relative;
-  flex: 1;
-  min-width: 200px;
-  background-color: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(4px);
-  border-radius: 1rem;
-  padding: 1.5rem;
-  border: 2px solid var(--excuse-generator-border);
-  box-shadow: 0 10px 15px -3px var(--excuse-generator-shadow);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-}
-
-.theme-dark .excuse-generator-slot {
-  background-color: rgba(15, 23, 42, 0.6);
-}
-
-.excuse-generator-slot:hover {
-  transform: scale(1.05);
-  background-color: var(--excuse-generator-bg);
-  border-color: var(--excuse-generator-primary);
-}
-
-.excuse-generator-slot-label {
-  position: absolute;
-  top: 0.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  color: var(--excuse-generator-text-dim);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  opacity: 0.5;
-}
-
-.excuse-generator-slot-text {
-  font-size: 1.5rem;
-  font-weight: 900;
-  color: var(--excuse-generator-primary);
-  line-height: 1.25;
-  overflow-wrap: break-word;
-  width: 100%;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 100ms;
-}
-
-@media (min-width: 768px) {
-  .excuse-generator-slot-text {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-}
-
-.excuse-generator-slot-text.blur {
-  filter: blur(3px);
-  opacity: 0.7;
-  transform: scale(0.95);
-}
-
-.excuse-generator-separator {
-  display: none;
-  font-size: 2rem;
-  color: var(--excuse-generator-border);
-}
-
-@media (min-width: 1024px) {
-  .excuse-generator-separator {
-    display: block;
-  }
-}
-
-.excuse-generator-separator-mobile {
-  display: flex;
-  justify-content: center;
-  color: var(--excuse-generator-border);
-}
-
-@media (min-width: 1024px) {
-  .excuse-generator-separator-mobile {
-    display: none;
-  }
-}
-
-.excuse-generator-actions {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  align-items: center;
-}
-
-.excuse-generator-btn {
-  position: relative;
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-  background-color: #0f172a;
-  border-radius: 1rem;
-  color: #fff;
-  font-weight: 900;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  box-shadow: 0 25px 50px -12px rgba(236, 72, 153, 0.2);
-  border: none;
-  cursor: pointer;
-  overflow: hidden;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-}
-
-.theme-dark .excuse-generator-btn {
-  background-color: #f8fafc;
-  color: #0f172a;
-}
-
-.excuse-generator-btn:hover {
-  transform: translateY(-0.25rem);
-  box-shadow: 0 25px 50px -12px rgba(236, 72, 153, 0.4);
-}
-
-.excuse-generator-btn:active {
-  transform: translateY(0);
-}
-
-.excuse-generator-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.excuse-generator-btn-content {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.excuse-generator-btn-gradient {
-  position: absolute;
-  inset: 0;
-  background-image: linear-gradient(to right, var(--excuse-generator-primary), var(--excuse-generator-accent), var(--excuse-generator-primary));
-  opacity: 0;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-}
-
-.excuse-generator-btn:hover .excuse-generator-btn-gradient {
-  opacity: 1;
-}
-
-.excuse-generator-btn:hover .excuse-generator-btn-content {
-  color: var(--excuse-generator-primary-on);
-}
-
-.excuse-generator-copy {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--excuse-generator-text-dim);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(0.5rem);
-}
-
-.excuse-generator-copy.visible {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0);
-}
-
-.excuse-generator-copy:hover {
-  color: var(--excuse-generator-primary);
-}
-
-.excuse-generator-copy-success {
-  color: var(--excuse-generator-success);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}