@jjlmoya/utils-audiovisual 1.17.0 → 1.18.0

package/src/tool/depthOfFieldCalculator/depth-of-field-calculator.css

@@ -0,0 +1,417 @@
+.dof-root {
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.dof-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 1.5rem;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+}
+
+.theme-dark .dof-grid {
+  border-color: #334155;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 768px) {
+  .dof-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dof-inputs-panel {
+  padding: 2rem 3rem;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.theme-dark .dof-inputs-panel {
+  background: rgba(15, 23, 42, 0.5);
+}
+
+@media (max-width: 768px) {
+  .dof-inputs-panel {
+    padding: 2rem;
+  }
+}
+
+.dof-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: #1e293b;
+  margin: 0;
+}
+
+.theme-dark .dof-panel-title {
+  color: #f8fafc;
+}
+
+.dof-panel-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #6366f1;
+}
+
+.dof-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.dof-group-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #64748b;
+}
+
+.dof-sensor-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.dof-sensor-btn {
+  padding: 0.4rem 0.9rem;
+  border-radius: 0.5rem;
+  border: 2px solid #e2e8f0;
+  background: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #475569;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+.theme-dark .dof-sensor-btn {
+  background: #1e293b;
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+.dof-sensor-btn:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+}
+
+.dof-sensor-btn.dof-sensor-btn-active {
+  border-color: #6366f1;
+  background: #eef2ff;
+  color: #4338ca;
+}
+
+.theme-dark .dof-sensor-btn.dof-sensor-btn-active {
+  background: rgba(99, 102, 241, 0.2);
+  color: #a5b4fc;
+}
+
+.dof-sensor-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dof-select-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.dof-select {
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+  background: #fff;
+  border: 2px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 0.45rem 2rem 0.45rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #475569;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.theme-dark .dof-select {
+  background: #1e293b;
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+.dof-select:focus {
+  border-color: #6366f1;
+}
+
+.dof-select-arrow {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+.dof-slider-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dof-slider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.dof-slider-value {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #6366f1;
+  font-variant-numeric: tabular-nums;
+}
+
+.theme-dark .dof-slider-value {
+  color: #a5b4fc;
+}
+
+.dof-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 5px;
+  border-radius: 3px;
+  background: linear-gradient(to right, #6366f1 var(--pct, 33%), #e2e8f0 var(--pct, 33%));
+  outline: none;
+  cursor: pointer;
+}
+
+.theme-dark .dof-slider {
+  background: linear-gradient(to right, #818cf8 var(--pct, 33%), #334155 var(--pct, 33%));
+}
+
+.dof-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #6366f1;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+  transition: transform 0.1s;
+}
+
+.dof-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.dof-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #6366f1;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+}
+
+/* Distance slider with unit toggle */
+.dof-distance-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dof-unit-toggle {
+  display: flex;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 2px solid #e2e8f0;
+}
+
+.theme-dark .dof-unit-toggle {
+  border-color: #334155;
+}
+
+.dof-unit-btn {
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.dof-unit-btn.dof-unit-btn-active {
+  background: #6366f1;
+  color: #fff;
+}
+
+.dof-results-panel {
+  padding: 2rem 3rem;
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .dof-results-panel {
+    padding: 2rem;
+  }
+}
+
+.dof-results-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.dof-results-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #a5b4fc;
+}
+
+.dof-primary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dof-primary-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.dof-primary-value {
+  font-size: clamp(3rem, 8vw, 4.5rem);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.dof-bar-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dof-bar-svg {
+  width: 100%;
+  height: 80px;
+  overflow: visible;
+}
+
+.dof-error {
+  display: none;
+  padding: 0.75rem 1rem;
+  background: rgba(239, 68, 68, 0.25);
+  border: 1px solid rgba(239, 68, 68, 0.5);
+  border-radius: 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fca5a5;
+}
+
+.dof-stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+.dof-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.dof-stat-label {
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.dof-stat-value {
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+  line-height: 1.2;
+  color: #e0e7ff;
+}
+
+.dof-details {
+  border-top: 1px solid rgba(165, 180, 252, 0.3);
+  padding-top: 1rem;
+}
+
+.dof-details-toggle {
+  background: none;
+  border: none;
+  color: #a5b4fc;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0;
+}
+
+.dof-details-toggle:hover {
+  color: #c7d2fe;
+}
+
+.dof-details-icon {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.2s;
+}
+
+.dof-details-icon-open {
+  transform: rotate(180deg);
+}
+
+.dof-details-content {
+  display: none;
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  color: #c7d2fe;
+  line-height: 1.6;
+}
+
+.dof-details-content-visible {
+  display: block;
+}
+
+.dof-coc-value {
+  font-weight: 700;
+  color: #a5b4fc;
+}

package/src/tool/depthOfFieldCalculator/entry.ts

@@ -0,0 +1,52 @@
+import type { AudiovisualToolEntry, ToolLocaleContent } from '../../types';
+
+export interface DepthOfFieldUI {
+    title: string;
+    paramsTitle: string;
+    sensorLabel: string;
+    moreLabel: string;
+    apertureLabel: string;
+    focalLabel: string;
+    distanceLabel: string;
+    metersLabel: string;
+    feetLabel: string;
+    resultsTitle: string;
+    totalDofLabel: string;
+    infiniteLabel: string;
+    nearLimitLabel: string;
+    farLimitLabel: string;
+    hyperfocalLabel: string;
+    cocLabel: string;
+    cocUnit: string;
+    showDetailsLabel: string;
+    hideDetailsLabel: string;
+    errorBelowFocal: string;
+    [key: string]: string;
+}
+
+export type DepthOfFieldLocaleContent = ToolLocaleContent<DepthOfFieldUI>;
+
+export const depthOfFieldCalculator: AudiovisualToolEntry<DepthOfFieldUI> = {
+    id: 'depth-of-field-calculator',
+    icons: {
+        bg: 'mdi:lens',
+        fg: 'mdi:image-filter-center-focus',
+    },
+    i18n: {
+        de: async () => (await import('./i18n/de')).content as unknown as DepthOfFieldLocaleContent,
+        en: async () => (await import('./i18n/en')).content as unknown as DepthOfFieldLocaleContent,
+        es: async () => (await import('./i18n/es')).content as unknown as DepthOfFieldLocaleContent,
+        fr: async () => (await import('./i18n/fr')).content as unknown as DepthOfFieldLocaleContent,
+        id: async () => (await import('./i18n/id')).content as unknown as DepthOfFieldLocaleContent,
+        it: async () => (await import('./i18n/it')).content as unknown as DepthOfFieldLocaleContent,
+        ja: async () => (await import('./i18n/ja')).content as unknown as DepthOfFieldLocaleContent,
+        ko: async () => (await import('./i18n/ko')).content as unknown as DepthOfFieldLocaleContent,
+        nl: async () => (await import('./i18n/nl')).content as unknown as DepthOfFieldLocaleContent,
+        pl: async () => (await import('./i18n/pl')).content as unknown as DepthOfFieldLocaleContent,
+        pt: async () => (await import('./i18n/pt')).content as unknown as DepthOfFieldLocaleContent,
+        ru: async () => (await import('./i18n/ru')).content as unknown as DepthOfFieldLocaleContent,
+        sv: async () => (await import('./i18n/sv')).content as unknown as DepthOfFieldLocaleContent,
+        tr: async () => (await import('./i18n/tr')).content as unknown as DepthOfFieldLocaleContent,
+        zh: async () => (await import('./i18n/zh')).content as unknown as DepthOfFieldLocaleContent,
+    },
+};

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

@@ -0,0 +1,141 @@
+import { bibliography } from '../bibliography';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { DepthOfFieldUI, DepthOfFieldLocaleContent } from '../index';
+
+const slug = 'scharfentiefe-rechner';
+const title = 'Schärfentiefe Rechner: Echtzeit DoF für jede Kamera';
+const description = 'Berechnen Sie Schärfentiefe, Hyperfokaldistanz und Fokusgrenzen in Echtzeit. Unterstützt alle Sensorgrößen mit 1/3 Blendenpräzision.';
+
+const ui: DepthOfFieldUI = {
+    title: 'Schärfentiefe Rechner',
+    paramsTitle: 'Parameter',
+    sensorLabel: 'Kamerasensor',
+    moreLabel: 'Weitere Sensoren…',
+    apertureLabel: 'Blende',
+    focalLabel: 'Brennweite',
+    distanceLabel: 'Motivabstand',
+    metersLabel: 'm',
+    feetLabel: 'ft',
+    resultsTitle: 'Ergebnisse',
+    totalDofLabel: 'Gesamte Schärfentiefe',
+    infiniteLabel: 'Unendlich',
+    nearLimitLabel: 'Nahgrenze',
+    farLimitLabel: 'Ferngrenze',
+    hyperfocalLabel: 'Hyperfokal',
+    cocLabel: 'Zerstreuungskreis',
+    cocUnit: 'mm',
+    showDetailsLabel: 'Technische Details anzeigen',
+    hideDetailsLabel: 'Technische Details ausblenden',
+    errorBelowFocal: 'Der Motivabstand muss größer als die Brennweite sein.',
+};
+
+const faq: DepthOfFieldLocaleContent['faq'] = [
+    {
+        question: 'Was ist Schärfentiefe?',
+        answer: 'Die Schärfentiefe (DoF) ist der Entfernungsbereich in einer Szene, der im fertigen Bild akzeptabel scharf erscheint. Sie wird durch Blende, Brennweite, Motivabstand und Sensorgröße bestimmt.',
+    },
+    {
+        question: 'Was ist die hyperfokale Distanz?',
+        answer: 'Die hyperfokale Distanz ist die kürzeste Fokusentfernung, bei der Objekte im Unendlichen noch akzeptabel scharf sind. Eine Fokussierung auf diese Distanz maximiert die Schärfentiefe.',
+    },
+    {
+        question: 'Warum verringert eine größere Blendenöffnung die Schärfentiefe?',
+        answer: 'Eine weitere Blendenöffnung sammelt Licht über einen größeren Bereich des Objektivs, was den Zerstreuungskreis für unscharfe Punkte vergrößert. Dies verengt die Zone der akzeptablen Schärfe.',
+    },
+    {
+        question: 'Wie beeinflusst die Sensorgröße die Schärfentiefe?',
+        answer: 'Größere Sensoren verwenden einen größeren Zerstreuungskreis-Schwellenwert. Bei äquivalenten Bildwinkeln erzeugen größere Sensoren jedoch meist eine geringere Schärfentiefe, da sie längere Brennweiten erfordern.',
+    },
+];
+
+const howTo: DepthOfFieldLocaleContent['howTo'] = [
+    {
+        name: 'Wählen Sie Ihren Kamerasensor',
+        text: 'Wählen Sie das Sensorformat aus, das Ihrem Kameragehäuse entspricht. Dies legt den Wert für den Zerstreuungskreis (CoC) fest.',
+    },
+    {
+        name: 'Blende und Brennweite einstellen',
+        text: 'Wählen Sie die Blende in 1/3-Stufen-Schritten. Der Brennweiten-Schieberegler verwendet eine logarithmische Skala für mehr Granularität im Weitwinkelbereich.',
+    },
+    {
+        name: 'Motivabstand festlegen',
+        text: 'Stellen Sie den Abstand zwischen Kamera und Hauptmotiv ein. Wechseln Sie bei Bedarf zwischen Metern und Fuß.',
+    },
+    {
+        name: 'Ergebnisse ablesen',
+        text: 'Der Fokusbalken visualisiert den scharfen Bereich um Ihr Motiv. Nah- und Ferngrenze zeigen die genauen Grenzen der akzeptablen Schärfe.',
+    },
+];
+
+const seo: DepthOfFieldLocaleContent['seo'] = [
+    { type: 'title', text: 'Schärfentiefe in Fotografie und Film verstehen', level: 2 },
+    { type: 'paragraph', html: 'Die Schärfentiefe ist eines der mächtigsten kreativen Werkzeuge. Eine <strong>geringe Schärfentiefe</strong> isoliert Motive, während eine <strong>große Schärfentiefe</strong> weite Landschaften scharf hält. Dieser Rechner gibt Ihnen die volle Kontrolle.' },
+
+    { type: 'title', text: 'Die drei Variablen der Schärfentiefe', level: 3 },
+    { type: 'table', headers: ['Variable', 'Erhöhung →', 'Effekt auf DoF'], rows: [
+        ['Blende', 'f/1.4 → f/16', 'Größere Blende = geringere Schärfentiefe'],
+        ['Brennweite', '24mm → 200mm', 'Längere Brennweite = geringere Schärfentiefe'],
+        ['Abstand', '1m → 10m', 'Größerer Abstand = größere Schärfentiefe'],
+    ]},
+
+    { type: 'title', text: 'Die hyperfokale Distanz: Maximale Schärfe', level: 3 },
+    { type: 'paragraph', html: 'Wenn Sie auf die <strong>hyperfokale Distanz</strong> fokussieren, erscheint alles von der halben Distanz bis Unendlich scharf. Ideal für die Landschaftsfotografie.' },
+    { type: 'tip', title: 'Praxistipp', html: 'Stellen Sie in der Straßenfotografie den Fokus auf die Hyperfokaldistanz ein. Mit einem 35mm-Objektiv an APS-C bei f/8 liegt diese bei ca. <strong>4 Metern</strong> – alles von 2m bis Unendlich wird scharf.' },
+
+    { type: 'title', text: 'Sensorgröße und Zerstreuungskreis', level: 3 },
+    { type: 'paragraph', html: 'Der <strong>Zerstreuungskreis (CoC)</strong> definiert die akzeptable Schärfe. Ein Vollformatsensor hat einen CoC von 0,030 mm; ein Smartphonesensor ca. 0,006 mm. Kleinere CoC-Werte bedeuten strengere Schärfekriterien.' },
+    { type: 'stats', columns: 3, items: [
+        { label: 'Vollformat', value: '0,030 mm', icon: 'mdi:camera' },
+        { label: 'APS-C', value: '0,019 mm', icon: 'mdi:camera-outline' },
+        { label: 'Smartphone', value: '0,006 mm', icon: 'mdi:cellphone' },
+    ]},
+
+    { type: 'title', text: 'DoF im Kino: Brennweite vs. Sensor', level: 3 },
+    { type: 'paragraph', html: 'Cinematographen, die auf Super 35 drehen, nutzen oft längere Brennweiten für den typischen "Cinematic Look". Die Kombination aus lichtstarkem Objektiv und 85mm+ Brennweite ist der Klassiker.' },
+    { type: 'diagnostic', variant: 'success', title: 'Die Fokus Verteilungsregel', icon: 'mdi:lightbulb-outline', badge: 'Profi Technik', html: 'Bei einem Motiv in 3m Entfernung mit 50mm bei f/2.8: Der Bereich hinter dem Motiv ist immer größer als der davor – etwa im <strong>Verhältnis 2:1</strong>.' },
+];
+
+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) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'de',
+};
+
+export const content: DepthOfFieldLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};