@jjlmoya/utils-developer 1.2.0

package/src/tool/urlEncoderDecoder/i18n/es.ts

@@ -0,0 +1,162 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlEncoderDecoderUI } from '../ui';
+
+const slug = 'codificador-decodificador-url';
+const title = 'Codificador y Decodificador de URLs Online';
+const description =
+  'Convierte caracteres especiales de cualquier enlace a formato seguro (Percent-Encoding) o devuélvelos a su estado original legible al instante de forma local.';
+
+const faqData = [
+  {
+    question: '¿Qué caracteres se codifican en una URL?',
+    answer:
+      'Se codifican todos los caracteres no permitidos en el estándar ASCII para URLs: espacios, tildes, ñ, símbolos como &, =, +, #, ?, /, entre otros. Por ejemplo, un espacio se convierte en %20 y la ñ en %C3%B1.',
+  },
+  {
+    question: '¿Cuál es la diferencia entre encodeURI y encodeURIComponent?',
+    answer:
+      'encodeURI codifica una URL completa y deja intactos los caracteres reservados como / y ?. encodeURIComponent codifica todos los caracteres especiales incluyendo los reservados, siendo ideal para codificar valores individuales de parámetros de consulta.',
+  },
+  {
+    question: '¿Por qué mi URL tiene %20 en lugar de espacios?',
+    answer:
+      'El protocolo HTTP no permite espacios en las URLs. El %20 es la representación en Percent-Encoding del espacio en blanco según el estándar ASCII. Algunos sistemas usan el signo + como alternativa, pero %20 es el más universal y seguro.',
+  },
+  {
+    question: '¿Es seguro usar esta herramienta con URLs privadas?',
+    answer:
+      'Sí, completamente seguro. Todo el procesamiento ocurre en tu navegador mediante JavaScript nativo (encodeURIComponent/decodeURIComponent). Ninguna de tus URLs o parámetros se envían a ningún servidor externo.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pegar el texto crudo',
+    text: 'Escribe o pega tu URL o cadena de texto en el campo superior "Texto Crudo (Legible)".',
+  },
+  {
+    name: 'Codificar o decodificar',
+    text: 'Haz clic en "Codificar URL" para convertir el texto a formato seguro Percent-Encoding, o en "Decodificar" para revertir una URL codificada a su forma legible.',
+  },
+  {
+    name: 'Copiar el resultado',
+    text: 'Usa el botón "Copiar" del campo correspondiente para llevar el resultado a tu portapapeles.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: 'Texto Crudo (Legible)',
+  labelEncoded: 'URL Formateada (Encoded)',
+  btnClear: 'Limpiar',
+  btnCopy: 'Copiar',
+  btnCopied: '¡Copiado!',
+  btnEncode: 'Codificar URL',
+  btnDecode: 'Decodificar',
+  placeholderRaw: 'https://ejemplo.com/busqueda?q=zapatos de tacón rojo&talla=38',
+  placeholderEncoded: 'https%3A%2F%2Fejemplo.com%2Fbusqueda%3Fq%3Dzapatos%20de%20tac%C3%B3n%20rojo%26talla%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: encodeURIComponent()',
+      url: 'https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent',
+    },
+    {
+      name: 'IETF RFC 3986: Estructura de URIs',
+      url: 'https://datatracker.ietf.org/doc/html/rfc3986',
+    },
+    {
+      name: 'W3C: URL Living Standard',
+      url: 'https://url.spec.whatwg.org/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '¿Qué es la Codificación de una URL?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Al navegar por internet o enviar peticiones a servidores, es común pensar en una URL (Uniform Resource Locator) como simplemente una "dirección web". Sin embargo, el protocolo de internet dicta que las URLs solo pueden transmitirse utilizando un conjunto muy restringido de caracteres <strong>ASCII estándar</strong>.',
+    },
+    {
+      type: 'paragraph',
+      html: '¿Qué ocurre si la URL contiene un espacio, tildes, o parámetros especiales como símbolos de más (<code>+</code>) o de igual (<code>=</code>)? Para evitar que los sistemas colapsen intentando leer caracteres ilegales, estos deben ser traducidos a su forma segura compatible utilizando <strong>Percent-Encoding</strong> (Codificación porcentual).',
+    },
+    {
+      type: 'title',
+      text: 'Cómo funciona el Percent-Encoding',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Cuando utilizas esta herramienta, el algoritmo toma cualquier carácter "inseguro" (como un espacio en blanco o una letra acentuada como la ñ) y lo sustituye por un signo de porcentaje <code>%</code> seguido de dos dígitos hexadecimales correspondientes a su valor en el estándar UTF-8.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Ejemplo Básico:</strong> Un simple espacio en blanco será sustituido por su equivalente seguro: <code>%20</code>.',
+        '<strong>Soporte Extendido:</strong> Una letra <code>á</code> se transformará en <code>%C3%A1</code>, y la <code>ñ</code> en <code>%C3%B1</code>.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'La importancia en APIs y Consultas GET',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Cuando desarrollas integraciones, un error típico consiste en pasar una cadena cruda a los parámetros de una URL. Si insertas <code>camisa&azul</code> de forma pura a tu backend (<code>/buscar?q=camisa&azul</code>), el servidor interpretará que <code>azul</code> es un nuevo parámetro, rompiendo toda la lógica del código.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta herramienta garantiza cálculos limpios y automáticos con un 100% de ejecución en tu navegador local. Ninguna de tus cadenas URL es transmitida a servidores de terceros, asegurando la privacidad de tus tokens y parámetros analíticos.',
+    },
+  ],
+};

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

@@ -0,0 +1,162 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlEncoderDecoderUI } from '../ui';
+
+const slug = 'encodeur-decodeur-url';
+const title = "Encodeur et Décodeur d'URL en Ligne";
+const description =
+  "Convertissez les caractères spéciaux de n'importe quel lien en format sécurisé (Percent-Encoding) ou restituez-les à leur état original lisible instantanément et localement.";
+
+const faqData = [
+  {
+    question: 'Quels caractères sont encodés dans une URL ?',
+    answer:
+      "Tous les caractères non autorisés dans le standard ASCII pour les URLs sont encodés : espaces, lettres accentuées, symboles tels que &, =, +, #, ?, / et d'autres. Par exemple, un espace devient %20 et ñ devient %C3%B1.",
+  },
+  {
+    question: 'Quelle est la différence entre encodeURI et encodeURIComponent ?',
+    answer:
+      "encodeURI encode une URL complète et laisse intacts les caractères réservés comme / et ?. encodeURIComponent encode tous les caractères spéciaux y compris les réservés, ce qui le rend idéal pour encoder des valeurs individuelles de paramètres de requête.",
+  },
+  {
+    question: "Pourquoi mon URL a-t-elle %20 à la place des espaces ?",
+    answer:
+      "Le protocole HTTP n'autorise pas les espaces dans les URLs. %20 est la représentation en Percent-Encoding d'un espace selon le standard ASCII. Certains systèmes utilisent le signe + comme alternative, mais %20 est le plus universel et sûr.",
+  },
+  {
+    question: "Est-il sûr d'utiliser cet outil avec des URLs privées ?",
+    answer:
+      "Oui, complètement sûr. Tout le traitement se fait dans votre navigateur en utilisant JavaScript natif (encodeURIComponent/decodeURIComponent). Aucune de vos URLs ou paramètres n'est envoyé à un serveur externe.",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Coller le texte brut',
+    text: 'Tapez ou collez votre URL ou chaîne de texte dans le champ supérieur "Texte Brut (Lisible)".',
+  },
+  {
+    name: 'Encoder ou décoder',
+    text: 'Cliquez sur "Encoder URL" pour convertir le texte en format Percent-Encoding sécurisé, ou sur "Décoder" pour revenir à la forme lisible d\'une URL encodée.',
+  },
+  {
+    name: 'Copier le résultat',
+    text: 'Utilisez le bouton "Copier" du champ correspondant pour transférer le résultat dans votre presse-papiers.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: 'Texte Brut (Lisible)',
+  labelEncoded: 'URL Formatée (Encodée)',
+  btnClear: 'Effacer',
+  btnCopy: 'Copier',
+  btnCopied: 'Copié !',
+  btnEncode: "Encoder l'URL",
+  btnDecode: 'Décoder',
+  placeholderRaw: 'https://exemple.com/recherche?q=chaussures à talons rouges&taille=38',
+  placeholderEncoded: 'https%3A%2F%2Fexemple.com%2Frecherche%3Fq%3Dchaussures%20%C3%A0%20talons%20rouges%26taille%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et Documentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: encodeURIComponent()',
+      url: 'https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent',
+    },
+    {
+      name: 'IETF RFC 3986: Syntaxe URI',
+      url: 'https://datatracker.ietf.org/doc/html/rfc3986',
+    },
+    {
+      name: 'W3C: URL Living Standard',
+      url: 'https://url.spec.whatwg.org/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: "Qu'est-ce que l'Encodage d'URL ?",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Lorsqu'on navigue sur internet ou qu'on envoie des requêtes à des serveurs, il est courant de penser à une URL (Uniform Resource Locator) comme simplement une \"adresse web\". Cependant, le protocole internet stipule que les URLs ne peuvent être transmises qu'en utilisant un ensemble très restreint de caractères <strong>ASCII standard</strong>.",
+    },
+    {
+      type: 'paragraph',
+      html: "Que se passe-t-il si l'URL contient un espace, des lettres accentuées ou des paramètres spéciaux comme les symboles plus (<code>+</code>) ou égal (<code>=</code>) ? Pour éviter que les systèmes s'effondrent en tentant de lire des caractères illégaux, ceux-ci doivent être traduits dans leur forme sécurisée compatible en utilisant le <strong>Percent-Encoding</strong>.",
+    },
+    {
+      type: 'title',
+      text: 'Comment fonctionne le Percent-Encoding',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Lorsque vous utilisez cet outil, l'algorithme prend tout caractère \"non sécurisé\" (comme un espace ou une lettre accentuée comme le ñ) et le remplace par un signe pourcentage <code>%</code> suivi de deux chiffres hexadécimaux correspondant à sa valeur dans le standard UTF-8.",
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Exemple Basique :</strong> Un simple espace sera remplacé par son équivalent sécurisé : <code>%20</code>.',
+        '<strong>Support Étendu :</strong> La lettre <code>á</code> devient <code>%C3%A1</code>, et <code>ñ</code> devient <code>%C3%B1</code>.',
+      ],
+    },
+    {
+      type: 'title',
+      text: "L'Importance dans les APIs et Requêtes GET",
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Lors du développement d'intégrations, une erreur typique consiste à passer une chaîne brute aux paramètres d'une URL. Si vous insérez <code>chemise&bleu</code> de façon pure dans votre backend (<code>/chercher?q=chemise&bleu</code>), le serveur interprétera que <code>bleu</code> est un nouveau paramètre, brisant toute la logique du code.",
+    },
+    {
+      type: 'paragraph',
+      html: "Cet outil garantit des calculs propres et automatiques avec une exécution à 100% dans votre navigateur local. Aucune de vos chaînes URL n'est transmise à des serveurs tiers, assurant la confidentialité de vos tokens et paramètres analytiques.",
+    },
+  ],
+};

package/src/tool/urlEncoderDecoder/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import UrlEncoderDecoderComponent from './component.astro';
+import UrlEncoderDecoderSEO from './seo.astro';
+import UrlEncoderDecoderBibliography from './bibliography.astro';
+
+import type { UrlEncoderDecoderUI } from './ui';
+
+export type UrlEncoderDecoderLocaleContent = ToolLocaleContent<UrlEncoderDecoderUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const urlEncoderDecoder: DeveloperToolEntry<UrlEncoderDecoderUI> = {
+  id: 'url-encoder-decoder',
+  icons: {
+    bg: 'mdi:link-variant',
+    fg: 'mdi:code-brackets',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { UrlEncoderDecoderComponent, UrlEncoderDecoderSEO, UrlEncoderDecoderBibliography };
+
+export const URL_ENCODER_DECODER_TOOL: ToolDefinition = {
+  entry: urlEncoderDecoder,
+  Component: UrlEncoderDecoderComponent,
+  SEOComponent: UrlEncoderDecoderSEO,
+  BibliographyComponent: UrlEncoderDecoderBibliography,
+};

package/src/tool/urlEncoderDecoder/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { urlEncoderDecoder } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await urlEncoderDecoder.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/urlEncoderDecoder/ui.ts

@@ -0,0 +1,11 @@
+export interface UrlEncoderDecoderUI extends Record<string, string> {
+  labelRaw: string;
+  labelEncoded: string;
+  btnClear: string;
+  btnCopy: string;
+  btnCopied: string;
+  btnEncode: string;
+  btnDecode: string;
+  placeholderRaw: string;
+  placeholderEncoded: string;
+}

package/src/tool/utmGenerator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { utmGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await utmGenerator.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/utmGenerator/component.astro

@@ -0,0 +1,270 @@
+---
+import type { UtmGeneratorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as UtmGeneratorUI;
+---
+
+<div id="ug-root" class="ug-root" data-i18n={JSON.stringify(t)}>
+  <div class="ug-container">
+    <div class="ug-grid">
+      <div class="ug-input-group ug-col-span-2">
+        <label for="ug-url">{t.labelUrl}</label>
+        <input type="url" id="ug-url" class="ug-input" placeholder="https://example.com" />
+      </div>
+
+      <div class="ug-input-group">
+        <label for="ug-source">{t.labelSource}</label>
+        <input type="text" id="ug-source" class="ug-input" placeholder="google" />
+      </div>
+
+      <div class="ug-input-group">
+        <label for="ug-medium">{t.labelMedium}</label>
+        <input type="text" id="ug-medium" class="ug-input" placeholder="cpc" />
+      </div>
+
+      <div class="ug-input-group">
+        <label for="ug-campaign">{t.labelCampaign}</label>
+        <input type="text" id="ug-campaign" class="ug-input" placeholder="summer_offer" />
+      </div>
+
+      <div class="ug-input-group">
+        <label for="ug-term">{t.labelTerm}</label>
+        <input type="text" id="ug-term" class="ug-input" placeholder="buy_shoes" />
+      </div>
+
+      <div class="ug-input-group">
+        <label for="ug-content">{t.labelContent}</label>
+        <input type="text" id="ug-content" class="ug-input" placeholder="banner_top" />
+      </div>
+    </div>
+
+    <div class="ug-result">
+      <div class="ug-result-header">
+        <span class="ug-result-label">{t.labelGenerated}</span>
+        <button id="ug-btn-copy" class="ug-btn-copy">{t.btnCopy}</button>
+      </div>
+      <div id="ug-output" class="ug-result-url">https://example.com</div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ug-root {
+    width: 100%;
+  }
+
+  .ug-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    border-radius: 1.5rem;
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.06);
+  }
+
+  :global(.theme-dark) .ug-container {
+    background: rgba(15, 23, 42, 0.75);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .ug-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 640px) {
+    .ug-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .ug-grid .ug-col-span-2 {
+      grid-column: span 1;
+    }
+
+    .ug-container {
+      padding: 1.5rem;
+    }
+  }
+
+  .ug-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .ug-input-group label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgb(100, 116, 139);
+  }
+
+  :global(.theme-dark) .ug-input-group label {
+    color: rgb(148, 163, 184);
+  }
+
+  .ug-input {
+    padding: 0.8rem 1rem;
+    border-radius: 0.75rem;
+    border: 1px solid rgb(226, 232, 240);
+    background: white;
+    color: rgb(51, 65, 85);
+    transition: all 0.2s ease;
+  }
+
+  :global(.theme-dark) .ug-input {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgb(51, 65, 85);
+    color: rgb(203, 213, 225);
+  }
+
+  .ug-input:focus {
+    outline: none;
+    border-color: rgb(99, 102, 241);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  }
+
+  .ug-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .ug-result {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 1rem;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+  }
+
+  :global(.theme-dark) .ug-result {
+    background: rgba(99, 102, 241, 0.05);
+    border-color: rgba(99, 102, 241, 0.15);
+  }
+
+  .ug-result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .ug-result-label {
+    font-weight: 600;
+    color: rgb(51, 65, 85);
+    font-size: 0.875rem;
+  }
+
+  :global(.theme-dark) .ug-result-label {
+    color: rgb(203, 213, 225);
+  }
+
+  .ug-result-url {
+    word-break: break-all;
+    font-size: 0.875rem;
+    color: rgb(99, 102, 241);
+    background: white;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .ug-result-url {
+    background: rgb(30, 41, 59);
+    border-color: rgb(51, 65, 85);
+    color: rgb(129, 140, 248);
+  }
+
+  .ug-btn-copy {
+    padding: 0.5rem 1rem;
+    background: rgb(99, 102, 241);
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .ug-btn-copy:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  .ug-btn-copy:active {
+    transform: translateY(0);
+  }
+
+  .ug-btn-copy.ug-copied {
+    background: rgb(16, 185, 129);
+  }
+</style>
+
+<script>
+  import type { UtmGeneratorUI } from './ui';
+
+  const root = document.getElementById('ug-root') as HTMLElement;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as UtmGeneratorUI;
+
+  const urlInput = document.getElementById('ug-url') as HTMLInputElement;
+  const sourceInput = document.getElementById('ug-source') as HTMLInputElement;
+  const mediumInput = document.getElementById('ug-medium') as HTMLInputElement;
+  const campaignInput = document.getElementById('ug-campaign') as HTMLInputElement;
+  const termInput = document.getElementById('ug-term') as HTMLInputElement;
+  const contentInput = document.getElementById('ug-content') as HTMLInputElement;
+  const outputEl = document.getElementById('ug-output') as HTMLElement;
+  const copyBtn = document.getElementById('ug-btn-copy') as HTMLButtonElement;
+
+  function updateUrl(): void {
+    const baseUrl = urlInput.value.trim();
+    if (!baseUrl) {
+      outputEl.textContent = t.errorInvalid;
+      return;
+    }
+
+    try {
+      const url = new URL(baseUrl);
+      const params = new URLSearchParams(url.search);
+
+      if (sourceInput.value.trim()) params.set('utm_source', sourceInput.value.trim());
+      if (mediumInput.value.trim()) params.set('utm_medium', mediumInput.value.trim());
+      if (campaignInput.value.trim()) params.set('utm_campaign', campaignInput.value.trim());
+      if (termInput.value.trim()) params.set('utm_term', termInput.value.trim());
+      if (contentInput.value.trim()) params.set('utm_content', contentInput.value.trim());
+
+      url.search = params.toString();
+      outputEl.textContent = url.toString();
+    } catch {
+      outputEl.textContent = t.errorInvalidUrl;
+    }
+  }
+
+  [urlInput, sourceInput, mediumInput, campaignInput, termInput, contentInput].forEach((input) => {
+    input.addEventListener('input', updateUrl);
+  });
+
+  copyBtn.addEventListener('click', () => {
+    const text = outputEl.textContent || '';
+    navigator.clipboard.writeText(text).then(() => {
+      const origText = copyBtn.textContent;
+      copyBtn.textContent = t.btnCopied;
+      copyBtn.classList.add('ug-copied');
+      setTimeout(() => {
+        copyBtn.textContent = origText;
+        copyBtn.classList.remove('ug-copied');
+      }, 2000);
+    });
+  });
+
+  updateUrl();
+</script>