@jjlmoya/utils-developer 1.4.0 → 1.6.0

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-converter-inline-html';
+const title = 'Conversor CSS para HTML Inline. Embutidor para Emails';
+const description =
+  'Transforme suas folhas de estilos e classes CSS em estilos embutidos automaticamente no HTML. Ideal para newsletters, e-mails transacionais e layout web seguro.';
+
+const faqData = [
+  {
+    question: 'Por que e-mails precisam de CSS inline em vez de folhas de estilos externas?',
+    answer:
+      'Clientes de e-mail como Outlook, Gmail ou Apple Mail filtram ou ignoram tags <link> e <style> por motivos de segurança. A única maneira garantida de um estilo ser aplicado corretamente em um e-mail é incorporá-lo diretamente no atributo style de cada elemento HTML.',
+  },
+  {
+    question: 'O que acontece se um elemento já tiver seu próprio atributo style?',
+    answer:
+      'A ferramenta respeita estilos inline existentes e acrescenta as novas propriedades, simulando o comportamento em cascata do CSS: propriedades declaradas depois substituem as anteriores em caso de conflito.',
+  },
+  {
+    question: 'Funciona com seletores complexos como :hover ou media queries?',
+    answer:
+      'A ferramenta processa seletores de classe, id, atributo e pseudo-classe estrutural que o DOMParser consegue resolver. Seletores dependentes de estado como :hover e media queries não podem ser embutidos (dependem do ambiente de tempo de execução) e são ignorados.',
+  },
+  {
+    question: 'Meu HTML e CSS são enviados para algum servidor?',
+    answer:
+      'Não. Todo processamento acontece 100% em seu navegador usando a API nativa DOMParser. Nenhum byte de seu código sai de seu dispositivo, garantindo total privacidade para templates com conteúdo sensível.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Cole seu HTML original',
+    text: 'Escreva ou cole o HTML que deseja processar no campo "HTML Original". Pode ser um fragmento ou um documento completo.',
+  },
+  {
+    name: 'Adicione suas regras CSS',
+    text: 'Cole as classes e ids que deseja injetar no campo "Regras CSS". A ferramenta as aplica respeitando especificidade de seletores.',
+  },
+  {
+    name: 'Converta e copie',
+    text: 'Clique em "Injetar CSS no HTML". O resultado com todos os estilos embutidos aparecerá abaixo, pronto para copiar e colar em seu gerenciador de e-mail ou CMS.',
+  },
+];
+
+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: 'pt',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'HTML Original',
+  labelCss: 'Regras CSS',
+  labelOutput: 'Resultado HTML Inline',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Seu HTML com estilos incorporados aparecerá aqui...',
+  btnConvert: 'Injetar CSS no HTML',
+  btnCopy: 'Copiar Código',
+  btnCopied: 'Copiado!',
+  msgError: 'Erro no processamento. Verifique se seu HTML e CSS são válidos.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências e Documentação',
+  bibliography: [
+    {
+      name: 'Can I email: Matriz de Suporte HTML e CSS para Emails',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: O atributo global style',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'API DOMParser: Análise Segura no Navegador',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'O que é um Embutidor CSS e Por que Você Precisa de Um?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ao desenvolver aplicações web modernas, estamos acostumados a separar preocupações: HTML constrói a estrutura e um arquivo CSS externo fornece todo o styling visual. No entanto, nem todos os ambientes confiam em folhas de estilo externas ou tags globais <code>&lt;style&gt;</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'O caso de uso mais popular e rigoroso onde CSS externo falha é <strong>Desenvolvimento de Templates de E-mail</strong>. Nestes ambientes, a única maneira confiável para uma fonte, cor ou margem render corretamente é estar aninhada diretamente na tag: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'O Problema CSS em Clientes de E-mail',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Clientes de e-mail como Microsoft Outlook, Apple Mail ou Gmail têm histórias notórias de seus mecanismos de renderização CSS restritivos. A maioria filtra ou descarta tags <code>&lt;link&gt;</code> ou <code>&lt;style&gt;</code> por medo de injeções de código que possam quebrar a interface de leitura.',
+    },
+    {
+      type: 'tip',
+      html: 'Para newsletters ou e-mails transacionais (recibos, confirmações de conta), usar tabelas e <em>CSS inline</em> é o padrão ouro na indústria de marketing de e-mail.',
+    },
+    {
+      type: 'title',
+      text: 'Como Esta Ferramenta Funciona em Seu Navegador',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Análise Segura:</strong> Usa a <code>API DOMParser</code> para transformar temporariamente o HTML de entrada em um DOM virtual seguro dentro de seu navegador.',
+        '<strong>Simulação em Cascata:</strong> Analisa suas regras CSS, aplica pesos de especificidade a seletores e modifica os atributos <code>style</code> de elementos HTML selecionados injetando o código.',
+        '<strong>100% Offline:</strong> Nenhum byte de seu código sai de seu dispositivo. Total privacidade para templates com conteúdo sensível.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-v-vstrochnye-stilii-html';
+const title = 'Конвертер CSS в Встроченные HTML Стили. Встроитель для Email';
+const description =
+  'Трансформируйте ваши стили и CSS классы в автоматически встроченные стили в HTML. Идеально для рассылок, транзакционных писем и безопасного веб-макета.';
+
+const faqData = [
+  {
+    question: 'Почему письма нуждаются во встроченном CSS вместо внешних таблиц стилей?',
+    answer:
+      'Почтовые клиенты, такие как Outlook, Gmail или Apple Mail, фильтруют или игнорируют теги <link> и <style> по соображениям безопасности. Единственный гарантированный способ, чтобы стиль был применён правильно в письме - это встроить его непосредственно в атрибут style каждого HTML элемента.',
+  },
+  {
+    question: 'Что происходит, если элемент уже имеет собственный атрибут style?',
+    answer:
+      'Инструмент уважает существующие встроченные стили и добавляет новые свойства, имитируя поведение каскада CSS: свойства, объявленные позже, переопределяют более ранние в случае конфликта.',
+  },
+  {
+    question: 'Работает ли это со сложными селекторами, такими как :hover или media queries?',
+    answer:
+      'Инструмент обрабатывает селекторы классов, идентификаторов, атрибутов и структурные псевдоклассы, которые может разрешить DOMParser. Селекторы, зависящие от состояния, такие как :hover и media queries, не могут быть встроены (они зависят от среды выполнения) и игнорируются.',
+  },
+  {
+    question: 'Отправляется ли мой HTML и CSS на какой-либо сервер?',
+    answer:
+      'Нет. Вся обработка происходит 100% в вашем браузере с использованием встроенного API DOMParser. Ни один байт вашего кода не покидает ваше устройство, гарантируя полную приватность для шаблонов с чувствительным содержимым.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Вставьте исходный HTML',
+    text: 'Напишите или вставьте HTML, который вы хотите обработать, в поле "Исходный HTML". Это может быть фрагмент или полный документ.',
+  },
+  {
+    name: 'Добавьте ваши CSS правила',
+    text: 'Вставьте классы и идентификаторы, которые вы хотите внедрить, в поле "CSS Правила". Инструмент применяет их, соблюдая специфичность селектора.',
+  },
+  {
+    name: 'Конвертируйте и копируйте',
+    text: 'Нажмите "Внедрить CSS в HTML". Результат со всеми встроченными стилями будет отображен ниже, готов к копированию и вставке в ваш менеджер e-mail или CMS.',
+  },
+];
+
+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: 'ru',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Исходный HTML',
+  labelCss: 'CSS Правила',
+  labelOutput: 'Результат HTML со Встроченными Стилями',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Ваш HTML с встроченными стилями появится здесь...',
+  btnConvert: 'Внедрить CSS в HTML',
+  btnCopy: 'Копировать Код',
+  btnCopied: 'Скопировано!',
+  msgError: 'Ошибка обработки. Проверьте, что ваш HTML и CSS корректны.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто Задаваемые Вопросы',
+  faq: faqData,
+  bibliographyTitle: 'Ссылки и Документация',
+  bibliography: [
+    {
+      name: 'Can I email: Матрица Поддержки HTML и CSS для Email',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Глобальный атрибут style',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'API DOMParser: Безопасный парсинг в браузере',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Что такое CSS встроитель и почему вам он нужен?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'При разработке современных веб-приложений мы привыкли разделять ответственность: HTML строит структуру, а внешний CSS файл предоставляет весь визуальный стайлинг. Однако не все окружения доверяют внешним стилям или глобальным тегам <code>&lt;style&gt;</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Наиболее популярный и строгий случай использования, когда внешний CSS не работает, это <strong>Разработка Email Шаблонов</strong>. В этих окружениях единственный надёжный способ, чтобы шрифт, цвет или отступ отрендерился правильно - это быть вложенным непосредственно в тег: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Проблема CSS в Email Клиентах',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Почтовые клиенты, такие как Microsoft Outlook, Apple Mail или Gmail, имеют печальную историю с ограничительными CSS движками отрисовки. Большинство фильтруют или отбрасывают теги <code>&lt;link&gt;</code> или <code>&lt;style&gt;</code> из страха перед инъекциями кода, которые могут сломать интерфейс чтения.',
+    },
+    {
+      type: 'tip',
+      html: 'Для рассылок или транзакционных писем (чеки, подтверждения аккаунта) использование таблиц и <em>встроченного CSS</em> - это золотой стандарт в индустрии email маркетинга.',
+    },
+    {
+      type: 'title',
+      text: 'Как Этот Инструмент Работает в Вашем Браузере',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Безопасный Парсинг:</strong> Использует <code>API DOMParser</code> для временного преобразования входного HTML в безопасный виртуальный DOM внутри вашего браузера.',
+        '<strong>Имитация Каскада:</strong> Анализирует ваши CSS правила, применяет веса специфичности к селекторам и мутирует атрибуты <code>style</code> выбранных HTML элементов путём внедрения кода.',
+        '<strong>100% Offline:</strong> Ни один байт вашего кода не покидает ваше устройство. Полная приватность для шаблонов с чувствительным содержимым.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-till-inline-html-konverterare';
+const title = 'CSS till Inline HTML Konverterare. Inliner för Epost';
+const description =
+  'Transformera dina stilmallar och CSS-klasser till automatiskt infogade stilar i din HTML. Perfekt för nyhetsbrev, transaktionsmeddelanden och säker webblayout.';
+
+const faqData = [
+  {
+    question: 'Varför behöver e-post infogad CSS istället för externa stilmallar?',
+    answer:
+      'Epostklienter som Outlook, Gmail eller Apple Mail filtrerar eller ignorerar <link> och <style>-taggar av säkerhetsskäl. Det enda garanterade sättet för en stil att tillämpas korrekt i ett e-postmeddelande är att bädda in den direkt i style-attributet för varje HTML-element.',
+  },
+  {
+    question: 'Vad händer om ett element redan har sitt eget style-attribut?',
+    answer:
+      'Verktyget respekterar befintliga infogade stilar och lägger till nya egenskaper, simulerar CSS-överskridningsbeteendet: egenskaper som deklareras senare åsidosätter tidigare i händelse av konflikt.',
+  },
+  {
+    question: 'Fungerar det med komplexa väljare som :hover eller media queries?',
+    answer:
+      'Verktyget behandlar klass-, id-, attribut- och strukturell pseudoklassväljare som DOMParser kan lösa. Tillståndsberoendeväljare som :hover och media queries kan inte infogas (de beror på körningsmiljön) och ignoreras.',
+  },
+  {
+    question: 'Skickas min HTML och CSS till någon server?',
+    answer:
+      'Nej. All bearbetning sker 100% i din webbläsare med använt av det inbyggda DOMParser API:t. Ingen del av din kod lämnar din enhet, vilket garanterar fullständig integritet för mallar med känsligt innehål.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Klistra in din original HTML',
+    text: 'Skriv eller klistra in HTML-koden du vill bearbeta i fältet "Original HTML". Det kan vara ett fragment eller ett fullständigt dokument.',
+  },
+  {
+    name: 'Lägg till dina CSS-regler',
+    text: 'Klistra in klasserna och id:na du vill injicera i fältet "CSS-regler". Verktyget tillämpar dem med respekt för väljarespecificitet.',
+  },
+  {
+    name: 'Konvertera och kopiera',
+    text: 'Klicka på "Injicera CSS i HTML". Resultatet med alla infogade stilar visas nedan, redo att kopiera och klistra in i din e-posthanterare eller CMS.',
+  },
+];
+
+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: 'sv',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Original HTML',
+  labelCss: 'CSS Regler',
+  labelOutput: 'Inline HTML Resultat',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Din HTML med infogade stilar kommer att visas här...',
+  btnConvert: 'Injicera CSS i HTML',
+  btnCopy: 'Kopiera Kod',
+  btnCopied: 'Kopierad!',
+  msgError: 'Bearbetningsfel. Kontrollera att din HTML och CSS är giltiga.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga Frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och Dokumentation',
+  bibliography: [
+    {
+      name: 'Can I email: HTML och CSS-stödmatris för Epost',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Det globala style-attributet',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Säker parsning i webbläsaren',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Vad är en CSS Inliner och varför behöver du en?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Vid utveckling av moderna webbapplikationer är vi vana vid att separera ansvaret: HTML bygger strukturen och en extern CSS-fil tillhandahåller all visuell styling. Dock inte alla miljöer litar på externa stilmallar eller globala <code>&lt;style&gt;</code>-taggar.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Det mest populära och strikta användningsfallet där extern CSS misslyckas är <strong>Epostmallsutveckling</strong>. I dessa miljöer är det enda pålitliga sättet för en typsnitt, färg eller marginal att renderas korrekt att vara inbäddad direkt i taggen: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'CSS-problemet i Epostklienter',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Epostklienter som Microsoft Outlook, Apple Mail eller Gmail har infamösa historier med sina restriktiva CSS-renderingsmotorer. De flesta filtrerar eller förkastas <code>&lt;link&gt;</code> eller <code>&lt;style&gt;</code>-taggar av rädsla för kodinjektioner som kan bryta läsgränssnittet.',
+    },
+    {
+      type: 'tip',
+      html: 'För nyhetsbrev eller transaktionsmeddelanden (kvitton, kontobekräftelser) är det att använda tabeller och <em>infogad CSS</em> som är guldstandarden i e-postmarknadsföringsindustrin.',
+    },
+    {
+      type: 'title',
+      text: 'Hur detta verktyg fungerar i din webbläsare',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Säker Parsning:</strong> Använder <code>DOMParser API</code> för att temporärt omvandla den inmatade HTML:n till en säker virtuell DOM i din webbläsare.',
+        '<strong>Kaskadsimulering:</strong> Analyserar dina CSS-regler, tillämpar specificitetsvolymer på väljare och muterar <code>style</code>-attributen för valda HTML-element genom att injicera koden.',
+        '<strong>100% Offline:</strong> Ingen del av din kod lämnar din enhet. Total integritet för mallar med känsligt innehål.',
+      ],
+    },
+  ],
+};

package/src/tool/cssToInlineConverter/i18n/tr.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-satir-ici-html-donusturucu';
+const title = 'CSS Satır İçi HTML Dönüştürücü. Epostaları İçin Satır İçi Işlemci';
+const description =
+  'Stil sayfalarınızı ve CSS sınıflarınızı otomatik olarak satır içi stillerle HTML\'ye dönüştürün. E-bültenleri, işlemsel e-postaları ve güvenli web düzeni için ideal.';
+
+const faqData = [
+  {
+    question: 'Epostalar dış stil sayfaları yerine neden satır içi CSS\'ye ihtiyaç duyar?',
+    answer:
+      'Outlook, Gmail veya Apple Mail gibi e-posta istemcileri güvenlik nedenleriyle <link> ve <style> etiketlerini filtreler veya görmezden gelir. Bir stilin bir e-postada doğru şekilde uygulanmasının tek garantili yolu, onu doğrudan her HTML öğesinin style özniteliğine gömmektir.',
+  },
+  {
+    question: 'Bir öğenin zaten kendi style özniteliği varsa ne olur?',
+    answer:
+      'Araç mevcut satır içi stilleri saygıyla karşılar ve yeni özellikler ekler, CSS kaskad davranışını simüle eder: daha sonra bildirilen özellikler, çakışma durumunda öncekini geçersiz kılar.',
+  },
+  {
+    question: ':hover veya media queries gibi karmaşık seçicilerle çalışır mı?',
+    answer:
+      'Araç, DOMParser\'ın çözebildiği sınıf, id, öznitelik ve yapısal sahte sınıf seçicilerini işler. :hover gibi durum bağımlı seçicileri ve media queries satır içine alınamaz (çalışma zamanı ortamına bağlıdır) ve göz ardı edilir.',
+  },
+  {
+    question: 'HTML ve CSS kodum herhangi bir sunucuya gönderilir mi?',
+    answer:
+      'Hayır. Tüm işlemler, yerel DOMParser API\'si kullanılarak %100 tarayıcınızda gerçekleşir. Kodunuzun hiçbir baytı cihazınızdan ayrılmaz, hassas içerik içeren şablonlar için tam gizliliği garantiler.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Orijinal HTML\'inizi yapıştırın',
+    text: '"Orijinal HTML" alanına işlemek istediğiniz HTML\'i yazın veya yapıştırın. Bir parça veya tam bir belge olabilir.',
+  },
+  {
+    name: 'CSS kurallarınızı ekleyin',
+    text: '"CSS Kuralları" alanına enjekte etmek istediğiniz sınıfları ve id\'leri yapıştırın. Araç bunları seçici özgüllüğüne saygı göstererek uygular.',
+  },
+  {
+    name: 'Dönüştürün ve kopyalayın',
+    text: '"CSS\'yi HTML\'ye Enjekte Et" düğmesini tıklayın. Tüm satır içi stillerle sonuç aşağıda görünür, e-posta yöneticinize veya CMS\'nize kopyalayıp yapıştırmaya hazırdır.',
+  },
+];
+
+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: 'tr',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Orijinal HTML',
+  labelCss: 'CSS Kuralları',
+  labelOutput: 'Satır İçi HTML Sonucu',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Gömülü stillerle HTML\'iniz burada görünecek...',
+  btnConvert: 'CSS\'yi HTML\'ye Enjekte Et',
+  btnCopy: 'Kodu Kopyala',
+  btnCopied: 'Kopyalandı!',
+  msgError: 'İşleme hatası. HTML ve CSS\'niz geçerli olup olmadığını kontrol edin.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Sık Sorulan Sorular',
+  faq: faqData,
+  bibliographyTitle: 'Referanslar ve Belgeler',
+  bibliography: [
+    {
+      name: 'Can I email: Epostalar İçin HTML ve CSS Destek Matrisi',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Genel style özniteliği',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Tarayıcıda Güvenli Ayrıştırma',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSS Satır İçi Işlemci Nedir ve Neden Biri\'ye İhtiyacınız Vardır?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Modern web uygulamaları geliştirirken, kaygıları ayırmaya alışkınız: HTML yapıyı oluşturur ve harici bir CSS dosyası tüm görsel stilleri sağlar. Ancak, tüm ortamlar harici stil sayfalarına veya genel <code>&lt;style&gt;</code> etiketlerine güvenmez.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Harici CSS başarısız olduğu en popüler ve katı kullanım durumu <strong>Eposta Şablonu Geliştirmedir</strong>. Bu ortamlarda, bir yazı tipinin, rengin veya kenarboşluğunun doğru şekilde işlenmesinin tek güvenilir yolu, onu doğrudan etiketin içine yerleştirmektir: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Eposta İstemcilerinde CSS Sorunu',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Microsoft Outlook, Apple Mail veya Gmail gibi e-posta istemcileri kısıtlayıcı CSS işleme motorlarıyla ödünü unutulmayan bir geçmişe sahiptir. Çoğu, okuma arayüzünü bozabilecek kod enjeksiyonları korkusundan <code>&lt;link&gt;</code> veya <code>&lt;style&gt;</code> etiketlerini filtreler veya atar.',
+    },
+    {
+      type: 'tip',
+      html: 'E-bültenleri veya işlemsel e-postalar (makbuzlar, hesap onaylamaları) için tablolar ve <em>satır içi CSS</em> kullanımı e-posta pazarlaması endüstrisinde altın standarttır.',
+    },
+    {
+      type: 'title',
+      text: 'Bu Araç Tarayıcınızda Nasıl Çalışır',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Güvenli Ayrıştırma:</strong> Giriş HTML\'sini tarayıcınızın içinde güvenli bir sanal DOM\'a dönüştürmek için <code>DOMParser API</code> kullanır.',
+        '<strong>Kaskad Simülasyonu:</strong> CSS kurallarınızı analiz eder, seçicilere özgüllük ağırlıkları uygular ve kodu enjekte ederek seçilen HTML öğelerinin <code>style</code> özniteliklerini değiştirir.',
+        '<strong>%100 Çevrimdışı:</strong> Kodunuzun hiçbir baytı cihazınızdan ayrılmaz. Hassas içerik içeren şablonlar için tam gizlilik.',
+      ],
+    },
+  ],
+};