@jjlmoya/utils-developer 1.17.0 → 1.20.0

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-box-schaduw-generator';
+const title = 'CSS Box Shadow Generator';
+const description = 'Ontwerp gelaagde CSS-schaduwen visueel met live voorbeeld, schuifregelaars, kleurkiezers en presets. Kopieer schone native CSS direct.';
+
+const howTo = [
+  { name: 'Kies een preset of begin vanaf nul', text: 'Kies uit de presets Card, Float, Inset, Glow of Layered, of pas de standaard schaduw aan met de schuifregelaars.' },
+  { name: 'Voeg lagen toe en stapel ze', text: 'Klik + om lagen toe te voegen (tot 5). Selecteer elke laag om offset, blur, spread, kleur en dekking te bewerken.' },
+  { name: 'Schakel inset en achtergrond', text: 'Vink inset aan voor binnenste schaduwen. Wijzig de achtergrondkleur van het voorbeeld.' },
+  { name: 'Kopieer de CSS', text: 'Wanneer het voorbeeld overeenkomt met je ontwerp, kopieer de gegenereerde CSS en plak deze in je stylesheet.' },
+];
+
+const faq = [
+  { question: 'Kan ik meerdere schaduwen op een element gebruiken?', answer: 'Ja. CSS staat komma-gescheiden box-shadow waarden toe. Deze tool laat je tot 5 lagen stapelen met onafhankelijke bediening.' },
+  { question: 'Wat doet een negatieve spread waarde?', answer: 'Negatieve spread verkleint de schaduw naar binnen voor het vervagen. Handig voor subtiele zwevende effecten.' },
+  { question: 'Waarvoor dient de inset optie?', answer: 'Inset schaduwen worden binnen de elementrand weergegeven en creëren een verzonken look. Ideaal voor formuliervelden en ingedrukte kaarten.' },
+  { question: 'Heeft de gegenereerde CSS framework-afhankelijkheden?', answer: 'Nee. Het resultaat is pure native CSS. Gebruik het in elk project met standaard CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Vervaging',
+  spreadLabel: 'Spreiding',
+  opacityLabel: 'Dekking',
+  insetLabel: 'Binnen',
+  addLayer: 'Laag toevoegen',
+  removeLayer: 'Laag verwijderen',
+  resetAll: 'Herstellen',
+  codeTitle: 'Gegenereerde CSS',
+  copyCode: 'CSS kopiëren',
+  copied: 'Gekopieerd!',
+  previewLabel: 'Voorbeeld',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Lagen',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Laag',
+  bgColorLabel: 'Achtergrond',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS Box-Shadow Generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow Referenties',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Ontwerp CSS-schaduwen visueel in plaats van waarden te raden', level: 2 },
+    { type: 'paragraph', html: '<strong>box-shadow</strong> handmatig aanpassen is vervelend. Deze visuele generator laat je meerdere schaduwen stapelen, live bekijken en productieklaar CSS kopiëren.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Schaduwlagen per element', icon: 'mdi:layers' }, { value: 'Live', label: 'Voorbeeld bij elke wijziging', icon: 'mdi:eye' }, { value: '5', label: 'Snelle presets', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Stapel meerdere schaduwen voor realistische diepte', level: 3 },
+    { type: 'paragraph', html: 'Echte schaduwen zijn zelden uniform. Een strakke schaduw dicht bij het element stapelen met een zachtere, bredere creëert natuurlijke diepte. Gebruik <strong>+</strong> om lagen toe te voegen.' },
+    { type: 'table', headers: ['Bediening', 'CSS-waarde', 'Effect'], rows: [['Offset X', '1e lengte', 'Horizontale verplaatsing.'], ['Offset Y', '2e lengte', 'Verticale verplaatsing.'], ['Vervaging', '3e lengte', 'Blur-radius.'], ['Spreiding', '4e lengte', 'Vergroot of verkleint de schaduw.'], ['Kleur & Dekking', 'rgba()', 'Schaduwkleur met onafhankelijke dekking.'], ['Binnen', 'inset', 'Schaduw binnen de elementrand.']] },
+    { type: 'summary', title: 'Aanbevolen workflow', items: ['Begin met een preset.', 'Voeg lagen toe voor realistische diepte.', 'Gebruik negatieve spread voor zwevende kaarten.', 'Kopieer de CSS en plak deze.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generator-cieni-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Projektuj warstwowe cienie CSS wizualnie z podglądem na żywo, suwakami, wybierakami kolorów i presetami. Kopiuj czysty natywny CSS natychmiast.';
+
+const howTo = [
+  { name: 'Wybierz preset lub zacznij od zera', text: 'Wybierz spośród presetów Card, Float, Inset, Glow lub Layered albo dostosuj domyślny cień suwakami.' },
+  { name: 'Dodawaj i układaj warstwy', text: 'Kliknij +, aby dodać warstwy (do 5). Wybierz każdą warstwę, aby edytować offset, blur, spread, kolor i przezroczystość.' },
+  { name: 'Przełącz inset i tło', text: 'Zaznacz inset dla cieni wewnętrznych. Zmień kolor tła podglądu.' },
+  { name: 'Kopiuj CSS', text: 'Gdy podgląd pasuje do twojego projektu, skopiuj wygenerowany CSS i wklej do arkusza stylów.' },
+];
+
+const faq = [
+  { question: 'Czy mogę użyć wielu cieni na jednym elemencie?', answer: 'Tak. CSS pozwala na wartości box-shadow oddzielone przecinkami. To narzędzie umożliwia układanie do 5 warstw z niezależnymi kontrolkami.' },
+  { question: 'Co robi ujemna wartość spread?', answer: 'Ujemny spread zmniejsza cień do wewnątrz przed rozmyciem. Przydatne do subtelnych efektów unoszenia.' },
+  { question: 'Do czego służy opcja inset?', answer: 'Cienie inset są renderowane wewnątrz krawędzi elementu, tworząc efekt wklęsłości. Idealne do pól formularzy i wciśniętych kart.' },
+  { question: 'Czy wygenerowany CSS ma zależności od frameworków?', answer: 'Nie. Wynik to czysty natywny CSS. Używaj w każdym projekcie ze standardowym CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Rozmycie',
+  spreadLabel: 'Rozprz.',
+  opacityLabel: 'Przezrocz.',
+  insetLabel: 'Wewn.',
+  addLayer: 'Dodaj warstwę',
+  removeLayer: 'Usuń warstwę',
+  resetAll: 'Resetuj',
+  codeTitle: 'Wygenerowany CSS',
+  copyCode: 'Kopiuj CSS',
+  copied: 'Skopiowano!',
+  previewLabel: 'Podgląd',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Warstwy',
+  presetsLabel: 'Presety',
+  layerPrefix: 'Warstwa',
+  bgColorLabel: 'Tło',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ Generatora Cieni CSS',
+  faq,
+  bibliographyTitle: 'Referencje Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Projektuj cienie CSS wizualnie zamiast zgadywać wartości', level: 2 },
+    { type: 'paragraph', html: 'Ręczne dostosowywanie <strong>box-shadow</strong> jest uciążliwe. Ten wizualny generator pozwala układać wiele cieni, podglądać je na żywo i kopiować gotowy CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Warstw cienia na element', icon: 'mdi:layers' }, { value: 'Na żywo', label: 'Podgląd przy każdej zmianie', icon: 'mdi:eye' }, { value: '5', label: 'Szybkie presety', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Układaj wiele cieni dla realistycznej głębi', level: 3 },
+    { type: 'paragraph', html: 'Prawdziwe cienie rzadko są jednolitym rozmyciem. Nakładanie ciasnego cienia blisko elementu z bardziej miękkim, szerszym tworzy naturalną głębię. Użyj <strong>+</strong> do dodawania warstw.' },
+    { type: 'table', headers: ['Kontrolka', 'Wartość CSS', 'Efekt'], rows: [['Offset X', '1. długość', 'Przesunięcie poziome.'], ['Offset Y', '2. długość', 'Przesunięcie pionowe.'], ['Rozmycie', '3. długość', 'Promień rozmycia.'], ['Rozprz.', '4. długość', 'Powiększa lub zmniejsza cień.'], ['Kolor i przezrocz.', 'rgba()', 'Kolor cienia z niezależną przezroczystością.'], ['Wewn.', 'inset', 'Cień wewnątrz krawędzi elementu.']] },
+    { type: 'summary', title: 'Zalecany workflow', items: ['Zacznij od presetu.', 'Dodaj warstwy dla realistycznej głębi.', 'Użyj ujemnego spread dla efektu unoszenia karty.', 'Skopiuj wygenerowany CSS i wklej.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'gerador-sombras-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Crie sombras CSS em camadas visualmente com pré-visualização ao vivo, sliders, seletores de cor e presets. Copie CSS nativo limpo instantaneamente.';
+
+const howTo = [
+  { name: 'Escolha um preset ou comece do zero', text: 'Selecione entre os presets Card, Float, Inset, Glow ou Layered, ou ajuste a sombra padrão com os sliders.' },
+  { name: 'Adicione e empilhe camadas', text: 'Clique + para adicionar camadas (até 5). Selecione cada camada para editar offset, blur, spread, cor e opacidade.' },
+  { name: 'Alterne inset e cor de fundo', text: 'Marque inset para sombras internas. Altere a cor de fundo da pré-visualização.' },
+  { name: 'Copie o CSS', text: 'Quando a pré-visualização corresponder ao seu design, copie o CSS gerado e cole na sua folha de estilo.' },
+];
+
+const faq = [
+  { question: 'Posso usar várias sombras em um elemento?', answer: 'Sim. CSS permite valores box-shadow separados por vírgula. Esta ferramenta permite empilhar até 5 camadas com controles independentes.' },
+  { question: 'O que faz um valor spread negativo?', answer: 'Spread negativo encolhe a sombra para dentro antes do desfoque. Útil para efeitos flutuantes sutis.' },
+  { question: 'Para que serve a opção inset?', answer: 'Sombras inset são renderizadas dentro da borda do elemento, criando um efeito afundado. Ideal para inputs e cartões pressionados.' },
+  { question: 'O CSS gerado tem dependências de framework?', answer: 'Não. O resultado é CSS nativo puro. Use em qualquer projeto com CSS padrão.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Desfoque',
+  spreadLabel: 'Expansão',
+  opacityLabel: 'Opacidade',
+  insetLabel: 'Interno',
+  addLayer: 'Adicionar camada',
+  removeLayer: 'Remover camada',
+  resetAll: 'Restaurar',
+  codeTitle: 'CSS Gerado',
+  copyCode: 'Copiar CSS',
+  copied: 'Copiado!',
+  previewLabel: 'Pré-visualização',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Camadas',
+  presetsLabel: 'Presets',
+  layerPrefix: 'Camada',
+  bgColorLabel: 'Fundo',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ do Gerador de Sombras CSS',
+  faq,
+  bibliographyTitle: 'Referências Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Crie sombras CSS visualmente em vez de adivinhar valores', level: 2 },
+    { type: 'paragraph', html: 'Ajustar <strong>box-shadow</strong> manualmente é tedioso. Este gerador visual permite empilhar múltiplas sombras, visualizá-las ao vivo e copiar CSS pronto para produção.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Camadas de sombra por elemento', icon: 'mdi:layers' }, { value: 'Ao vivo', label: 'Pré-visualização a cada mudança', icon: 'mdi:eye' }, { value: '5', label: 'Presets rápidos', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Empilhe múltiplas sombras para profundidade realista', level: 3 },
+    { type: 'paragraph', html: 'Sombras reais raramente são um blur uniforme. Empilhar uma sombra apertada perto do elemento com uma mais suave e ampla cria profundidade natural. Use <strong>+</strong> para adicionar camadas.' },
+    { type: 'table', headers: ['Controle', 'Valor CSS', 'Efeito'], rows: [['Offset X', '1º comprimento', 'Deslocamento horizontal.'], ['Offset Y', '2º comprimento', 'Deslocamento vertical.'], ['Desfoque', '3º comprimento', 'Raio de blur.'], ['Expansão', '4º comprimento', 'Expande ou encolhe a sombra.'], ['Cor e Opacidade', 'rgba()', 'Cor da sombra com opacidade independente.'], ['Interno', 'inset', 'Sombra dentro da borda do elemento.']] },
+    { type: 'summary', title: 'Workflow recomendado', items: ['Comece com um preset.', 'Adicione camadas para profundidade realista.', 'Use spread negativo para efeito de card flutuante.', 'Copie o CSS gerado e cole.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'generator-tenei-css';
+const title = 'CSS Box Shadow Generator';
+const description = 'Проектируйте многослойные тени CSS визуально с живым предпросмотром, ползунками, выбором цвета и пресетами. Копируйте чистый нативный CSS мгновенно.';
+
+const howTo = [
+  { name: 'Выберите пресет или начните с нуля', text: 'Выберите из пресетов Card, Float, Inset, Glow или Layered либо настройте тень по умолчанию ползунками.' },
+  { name: 'Добавляйте и наслаивайте слои', text: 'Нажмите +, чтобы добавить слои (до 5). Выберите слой для редактирования offset, blur, spread, цвета и прозрачности.' },
+  { name: 'Включите inset и измените фон', text: 'Отметьте inset для внутренних теней. Измените цвет фона предпросмотра.' },
+  { name: 'Копируйте CSS', text: 'Когда предпросмотр совпадает с вашим дизайном, скопируйте сгенерированный CSS и вставьте в таблицу стилей.' },
+];
+
+const faq = [
+  { question: 'Можно ли использовать несколько теней на одном элементе?', answer: 'Да. CSS позволяет значения box-shadow через запятую. Этот инструмент позволяет накладывать до 5 слоёв с независимыми настройками.' },
+  { question: 'Что делает отрицательное значение spread?', answer: 'Отрицательный spread сжимает тень внутрь перед размытием. Полезно для тонких эффектов парения.' },
+  { question: 'Для чего нужна опция inset?', answer: 'Тени inset отображаются внутри границы элемента, создавая вдавленный вид. Идеально для полей форм и нажатых карточек.' },
+  { question: 'Есть ли у сгенерированного CSS зависимости от фреймворков?', answer: 'Нет. Результат  -  чистый нативный CSS. Используйте в любом проекте со стандартным CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Смещ. X',
+  offsetYLabel: 'Смещ. Y',
+  blurLabel: 'Размытие',
+  spreadLabel: 'Размах',
+  opacityLabel: 'Прозрач.',
+  insetLabel: 'Внутр.',
+  addLayer: 'Добавить слой',
+  removeLayer: 'Удалить слой',
+  resetAll: 'Сбросить',
+  codeTitle: 'Сгенерированный CSS',
+  copyCode: 'Копировать CSS',
+  copied: 'Скопировано!',
+  previewLabel: 'Предпросмотр',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Слои',
+  presetsLabel: 'Пресеты',
+  layerPrefix: 'Слой',
+  bgColorLabel: 'Фон',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'FAQ Генератора Теней CSS',
+  faq,
+  bibliographyTitle: 'Ссылки по Box Shadow CSS',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Проектируйте тени CSS визуально, а не угадывайте значения', level: 2 },
+    { type: 'paragraph', html: 'Ручная настройка <strong>box-shadow</strong> утомительна. Этот визуальный генератор позволяет накладывать несколько теней, смотреть их вживую и копировать готовый CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Слоёв тени на элемент', icon: 'mdi:layers' }, { value: 'Live', label: 'Предпросмотр при каждом изменении', icon: 'mdi:eye' }, { value: '5', label: 'Быстрых пресетов', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Накладывайте несколько теней для реалистичной глубины', level: 3 },
+    { type: 'paragraph', html: 'Реальные тени редко бывают равномерным размытием. Наложение плотной тени близко к элементу с более мягкой и широкой создаёт естественную глубину. Используйте <strong>+</strong> для добавления слоёв.' },
+    { type: 'table', headers: ['Элемент', 'Значение CSS', 'Эффект'], rows: [['Смещ. X', '1-я длина', 'Горизонтальное смещение.'], ['Смещ. Y', '2-я длина', 'Вертикальное смещение.'], ['Размытие', '3-я длина', 'Радиус размытия.'], ['Размах', '4-я длина', 'Увеличивает или уменьшает тень.'], ['Цвет и прозрач.', 'rgba()', 'Цвет тени с независимой прозрачностью.'], ['Внутр.', 'inset', 'Тень внутри границы элемента.']] },
+    { type: 'summary', title: 'Рекомендуемый рабочий процесс', items: ['Начните с пресета.', 'Добавьте слои для реалистичной глубины.', 'Используйте отрицательный spread для эффекта парящей карточки.', 'Скопируйте сгенерированный CSS и вставьте.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-boxskugga-generator';
+const title = 'CSS Box Shadow Generator';
+const description = 'Designa skiktade CSS-skuggor visuellt med live-förhandsvisning, reglage, färgväljare och förinställningar. Kopiera ren native CSS direkt.';
+
+const howTo = [
+  { name: 'Välj en förinställning eller börja från grunden', text: 'Välj bland förinställningarna Card, Float, Inset, Glow eller Layered, eller justera standardskuggan med reglagen.' },
+  { name: 'Lägg till och stapla lager', text: 'Klicka + för att lägga till lager (upp till 5). Välj varje lager för att redigera offset, blur, spread, färg och opacitet.' },
+  { name: 'Växla inset och bakgrund', text: 'Markera inset för inre skuggor. Ändra bakgrundsfärgen för förhandsvisningen.' },
+  { name: 'Kopiera CSS:en', text: 'När förhandsvisningen matchar din design, kopiera den genererade CSS:en och klistra in i din stilmall.' },
+];
+
+const faq = [
+  { question: 'Kan jag använda flera skuggor på ett element?', answer: 'Ja. CSS tillåter kommaseparerade box-shadow-värden. Det här verktyget låter dig stapla upp till 5 lager med oberoende kontroller.' },
+  { question: 'Vad gör ett negativt spread-värde?', answer: 'Negativ spread krymper skuggan inåt före oskärpan. Användbart för subtila svävande effekter.' },
+  { question: 'Vad är inset-alternativet till för?', answer: 'Inset-skuggor renderas innanför elementkanten och skapar ett försänkt utseende. Idealisk för formulärfält och intryckta kort.' },
+  { question: 'Har den genererade CSS:en ramverksberoenden?', answer: 'Nej. Resultatet är ren native CSS. Använd i alla projekt med standard-CSS.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Offset X',
+  offsetYLabel: 'Offset Y',
+  blurLabel: 'Oskärpa',
+  spreadLabel: 'Spridning',
+  opacityLabel: 'Opacitet',
+  insetLabel: 'Inre',
+  addLayer: 'Lägg till lager',
+  removeLayer: 'Ta bort lager',
+  resetAll: 'Återställ',
+  codeTitle: 'Genererad CSS',
+  copyCode: 'Kopiera CSS',
+  copied: 'Kopierat!',
+  previewLabel: 'Förhandsvisning',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Lager',
+  presetsLabel: 'Förval',
+  layerPrefix: 'Lager',
+  bgColorLabel: 'Bakgrund',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS Box-Shadow Generator FAQ',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow Referenser',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'Designa CSS-skuggor visuellt istället för att gissa värden', level: 2 },
+    { type: 'paragraph', html: 'Att justera <strong>box-shadow</strong> för hand är tråkigt. Denna visuella generator låter dig stapla flera skuggor, se dem live och kopiera produktionsklar CSS.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Skugglager per element', icon: 'mdi:layers' }, { value: 'Live', label: 'Förhandsvisning vid varje ändring', icon: 'mdi:eye' }, { value: '5', label: 'Snabba förval', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Stapla flera skuggor för realistiskt djup', level: 3 },
+    { type: 'paragraph', html: 'Verkliga skuggor är sällan enhetlig oskärpa. Att stapla en tight skugga nära elementet med en mjukare, bredare skapar naturligt djup. Använd <strong>+</strong> för att lägga till lager.' },
+    { type: 'table', headers: ['Kontroll', 'CSS-värde', 'Effekt'], rows: [['Offset X', '1:a längd', 'Horisontell förskjutning.'], ['Offset Y', '2:a längd', 'Vertikal förskjutning.'], ['Oskärpa', '3:e längd', 'Oskärperadie.'], ['Spridning', '4:e längd', 'Expanderar eller krymper skuggan.'], ['Färg & Opacitet', 'rgba()', 'Skuggfärg med oberoende opacitet.'], ['Inre', 'inset', 'Skugga innanför elementkanten.']] },
+    { type: 'summary', title: 'Rekommenderat arbetsflöde', items: ['Börja med en förinställning.', 'Lägg till lager för realistiskt djup.', 'Använd negativ spread för svävande kort.', 'Kopiera CSS:en och klistra in.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-golge-olusturucu';
+const title = 'CSS Box Shadow Generator';
+const description = 'Katmanlı CSS gölgelerini canlı önizleme, kaydırıcılar, renk seçiciler ve hazır ayarlarla görsel olarak tasarlayın. Temiz native CSS\'i anında kopyalayın.';
+
+const howTo = [
+  { name: 'Hazır ayar seçin veya sıfırdan başlayın', text: 'Card, Float, Inset, Glow veya Layered hazır ayarlarından seçim yapın veya varsayılan gölgeyi kaydırıcılarla ayarlayın.' },
+  { name: 'Katman ekleyin ve istifleyin', text: 'Katman eklemek için + tuşuna basın (5\'e kadar). Her katmanı seçerek offset, blur, spread, renk ve opaklığı düzenleyin.' },
+  { name: 'Inset ve arka planı değiştirin', text: 'İç gölgeler için inset\'i işaretleyin. Önizleme arka plan rengini değiştirin.' },
+  { name: 'CSS\'i kopyalayın', text: 'Önizleme tasarımınızla eşleştiğinde, oluşturulan CSS\'i kopyalayın ve stil sayfanıza yapıştırın.' },
+];
+
+const faq = [
+  { question: 'Bir öğede birden fazla gölge kullanabilir miyim?', answer: 'Evet. CSS virgülle ayrılmış box-shadow değerlerine izin verir. Bu araç, bağımsız kontrollere sahip 5\'e kadar katman istiflemenizi sağlar.' },
+  { question: 'Negatif spread değeri ne yapar?', answer: 'Negatif spread, bulanıklaştırmadan önce gölgeyi içe doğru küçültür. İnce yüzen efektler için kullanışlıdır.' },
+  { question: 'Inset seçeneği ne işe yarar?', answer: 'Inset gölgeler öğe kenarının içinde işlenir ve çökük bir görünüm oluşturur. Form alanları ve basılı kartlar için idealdir.' },
+  { question: 'Oluşturulan CSS\'in framework bağımlılığı var mı?', answer: 'Hayır. Sonuç saf native CSS\'tir. Standart CSS kullanan her projede kullanın.' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'Ofset X',
+  offsetYLabel: 'Ofset Y',
+  blurLabel: 'Bulanıklık',
+  spreadLabel: 'Yayılma',
+  opacityLabel: 'Opaklık',
+  insetLabel: 'İç',
+  addLayer: 'Katman ekle',
+  removeLayer: 'Katman kaldır',
+  resetAll: 'Sıfırla',
+  codeTitle: 'Oluşturulan CSS',
+  copyCode: 'CSS kopyala',
+  copied: 'Kopyalandı!',
+  previewLabel: 'Önizleme',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: 'Katmanlı',
+  presetsLabel: 'Hazır Ayar',
+  layerPrefix: 'Katman',
+  bgColorLabel: 'Arka Plan',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS Box-Shadow Oluşturucu SSS',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow Referansları',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'CSS gölgelerini değerleri tahmin etmek yerine görsel olarak tasarlayın', level: 2 },
+    { type: 'paragraph', html: '<strong>box-shadow</strong>\'u elle ayarlamak sıkıcıdır. Bu görsel oluşturucu, birden fazla gölgeyi istiflemenizi, canlı görmenizi ve üretime hazır CSS kopyalamanızı sağlar.' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: 'Öğe başına gölge katmanı', icon: 'mdi:layers' }, { value: 'Canlı', label: 'Her değişiklikte önizleme', icon: 'mdi:eye' }, { value: '5', label: 'Hızlı hazır ayarlar', icon: 'mdi:star' }] },
+    { type: 'title', text: 'Gerçekçi derinlik için birden fazla gölge istifleyin', level: 3 },
+    { type: 'paragraph', html: 'Gerçek gölgeler nadiren tekdüze bulanıklıktır. Öğeye yakın sıkı bir gölgeyi daha yumuşak, daha geniş bir gölgeyle istiflemek doğal derinlik oluşturur. Katman eklemek için <strong>+</strong> kullanın.' },
+    { type: 'table', headers: ['Kontrol', 'CSS Değeri', 'Etki'], rows: [['Ofset X', '1. uzunluk', 'Yatay kaydırma.'], ['Ofset Y', '2. uzunluk', 'Dikey kaydırma.'], ['Bulanıklık', '3. uzunluk', 'Bulanıklık yarıçapı.'], ['Yayılma', '4. uzunluk', 'Gölgeyi büyütür veya küçültür.'], ['Renk & Opaklık', 'rgba()', 'Bağımsız opaklıklı gölge rengi.'], ['İç', 'inset', 'Öğe kenarının içinde gölge.']] },
+    { type: 'summary', title: 'Önerilen İş Akışı', items: ['Bir hazır ayarla başlayın.', 'Gerçekçi derinlik için katman ekleyin.', 'Yüzen kart efekti için negatif spread kullanın.', 'Oluşturulan CSS\'i kopyalayıp yapıştırın.'] },
+  ],
+};

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

@@ -0,0 +1,69 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssBoxShadowGeneratorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'css-box-shadow-generator';
+const title = 'CSS Box Shadow Generator';
+const description = '通过实时预览、滑块、颜色选择器和预设，可视化设计分层CSS阴影。即时复制干净的纯CSS。';
+
+const howTo = [
+  { name: '选择预设或从头开始', text: '从Card、Float、Inset、Glow或Layered预设中选择，或用滑块调整默认阴影。' },
+  { name: '添加并堆叠图层', text: '点击+添加图层（最多5个）。选择每个图层编辑其偏移、模糊、扩散、颜色和不透明度。' },
+  { name: '切换内阴影和背景', text: '勾选inset启用内阴影。更改预览背景颜色。' },
+  { name: '复制CSS', text: '当预览与设计匹配时，复制生成的CSS并粘贴到样式表中。' },
+];
+
+const faq = [
+  { question: '可以在一个元素上使用多个阴影吗？', answer: '可以。CSS支持逗号分隔的box-shadow值。此工具可让您堆叠最多5个图层，每个图层有独立控件。' },
+  { question: '负的spread值有什么作用？', answer: '负spread在模糊之前将阴影向内收缩。适用于微妙的悬浮效果。' },
+  { question: 'inset选项有什么用途？', answer: 'inset阴影渲染在元素边框内部，创建凹陷外观。非常适合表单输入和按下的卡片。' },
+  { question: '生成的CSS有框架依赖吗？', answer: '没有。结果是纯原生CSS。可在任何使用标准CSS的项目中使用。' },
+];
+
+const ui: CssBoxShadowGeneratorUI = {
+  offsetXLabel: 'X偏移',
+  offsetYLabel: 'Y偏移',
+  blurLabel: '模糊',
+  spreadLabel: '扩散',
+  opacityLabel: '不透明度',
+  insetLabel: '内阴影',
+  addLayer: '添加图层',
+  removeLayer: '删除图层',
+  resetAll: '重置',
+  codeTitle: '生成的CSS',
+  copyCode: '复制CSS',
+  copied: '已复制！',
+  previewLabel: '预览',
+  presetCard: 'Card',
+  presetFloat: 'Float',
+  presetInset: 'Inset',
+  presetGlow: 'Glow',
+  presetLayered: '图层',
+  presetsLabel: '预设',
+  layerPrefix: '图层',
+  bgColorLabel: '背景',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<CssBoxShadowGeneratorUI> = {
+  slug, title, description, ui,
+  faqTitle: 'CSS盒阴影生成器常见问题',
+  faq,
+  bibliographyTitle: 'CSS Box-Shadow 参考资料',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: '可视化设计CSS阴影，无需猜测数值', level: 2 },
+    { type: 'paragraph', html: '手动调整<strong>box-shadow</strong>很繁琐。这个可视化生成器让您可以堆叠多个阴影，实时查看并复制生产就绪的CSS。' },
+    { type: 'stats', columns: 3, items: [{ value: '5', label: '每个元素的阴影图层', icon: 'mdi:layers' }, { value: '实时', label: '每次更改时预览更新', icon: 'mdi:eye' }, { value: '5', label: '快速预设', icon: 'mdi:star' }] },
+    { type: 'title', text: '堆叠多个阴影实现逼真深度', level: 3 },
+    { type: 'paragraph', html: '真实阴影很少是均匀模糊的。将紧贴元素的紧密阴影与更柔和、更宽的阴影堆叠在一起，创造自然深度。使用<strong>+</strong>添加图层。' },
+    { type: 'table', headers: ['控件', 'CSS值', '效果'], rows: [['X偏移', '第一个长度', '水平位移。'], ['Y偏移', '第二个长度', '垂直位移。'], ['模糊', '第三个长度', '模糊半径。'], ['扩散', '第四个长度', '扩大或缩小阴影。'], ['颜色和不透明度', 'rgba()', '带独立不透明度的阴影颜色。'], ['内阴影', 'inset', '在元素边框内渲染阴影。']] },
+    { type: 'summary', title: '推荐工作流程', items: ['从预设开始。', '添加图层实现逼真深度。', '使用负spread实现悬浮卡片效果。', '复制生成的CSS并粘贴。'] },
+  ],
+};

package/src/tool/cssBoxShadowGenerator/index.ts

@@ -0,0 +1,9 @@
+import type { ToolDefinition } from '../../types';
+import { cssBoxShadowGenerator } from './entry';
+export * from './entry';
+export const CSS_BOX_SHADOW_GENERATOR_TOOL: ToolDefinition = {
+  entry: cssBoxShadowGenerator,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/cssBoxShadowGenerator/logic.ts

@@ -0,0 +1,35 @@
+export interface ShadowLayer {
+  offsetX: number;
+  offsetY: number;
+  blur: number;
+  spread: number;
+  color: string;
+  opacity: number;
+  inset: boolean;
+}
+
+export function buildShadowCss(layers: ShadowLayer[]): string {
+  if (layers.length === 0) return 'box-shadow: none;';
+
+  const parts = layers.map((l) => {
+    const rr = parseInt(l.color.slice(1, 3), 16) || 0;
+    const gg = parseInt(l.color.slice(3, 5), 16) || 0;
+    const bb = parseInt(l.color.slice(5, 7), 16) || 0;
+    const inset = l.inset ? 'inset ' : '';
+    return `${inset}${l.offsetX}px ${l.offsetY}px ${l.blur}px ${l.spread}px rgba(${rr}, ${gg}, ${bb}, ${l.opacity})`;
+  });
+
+  const value = parts.join(', ');
+  return `box-shadow: ${value};`;
+}
+
+export function buildShadowValue(layers: ShadowLayer[]): string {
+  const parts = layers.map((l) => {
+    const rr = parseInt(l.color.slice(1, 3), 16) || 0;
+    const gg = parseInt(l.color.slice(3, 5), 16) || 0;
+    const bb = parseInt(l.color.slice(5, 7), 16) || 0;
+    const inset = l.inset ? 'inset ' : '';
+    return `${inset}${l.offsetX}px ${l.offsetY}px ${l.blur}px ${l.spread}px rgba(${rr}, ${gg}, ${bb}, ${l.opacity})`;
+  });
+  return parts.join(', ');
+}

package/src/tool/cssBoxShadowGenerator/seo.astro

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

package/src/tool/cssBoxShadowGenerator/ui.ts

@@ -0,0 +1,23 @@
+export interface CssBoxShadowGeneratorUI extends Record<string, string> {
+  offsetXLabel: string;
+  offsetYLabel: string;
+  blurLabel: string;
+  spreadLabel: string;
+  opacityLabel: string;
+  insetLabel: string;
+  addLayer: string;
+  removeLayer: string;
+  resetAll: string;
+  codeTitle: string;
+  copyCode: string;
+  copied: string;
+  previewLabel: string;
+  presetCard: string;
+  presetFloat: string;
+  presetInset: string;
+  presetGlow: string;
+  presetLayered: string;
+  presetsLabel: string;
+  layerPrefix: string;
+  bgColorLabel: string;
+}

package/src/tool/visualCssGridFlexboxGenerator/bibliography.astro

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

package/src/tool/visualCssGridFlexboxGenerator/bibliography.ts

@@ -0,0 +1,20 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'MDN Web Docs: Basic concepts of flexbox',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox',
+  },
+  {
+    name: 'MDN Web Docs: Basic concepts of grid layout',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout',
+  },
+  {
+    name: 'CSS-Tricks: A Complete Guide to Flexbox',
+    url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/',
+  },
+  {
+    name: 'CSS-Tricks: A Complete Guide to CSS Grid',
+    url: 'https://css-tricks.com/snippets/css/complete-guide-grid/',
+  },
+];