@jjlmoya/utils-games-development 1.46.0

package/src/tool/steamCapsuleGenerator/component.astro

@@ -0,0 +1,289 @@
+---
+import type { SteamCapsuleGeneratorUI } from './ui';
+import SteamStoreMockup from './components/SteamStoreMockup.astro';
+import SteamLibraryMockup from './components/SteamLibraryMockup.astro';
+import SteamLibraryGridMockup from './components/SteamLibraryGridMockup.astro';
+import './steam-capsule-generator.css';
+
+interface Props {
+  ui: SteamCapsuleGeneratorUI;
+}
+
+const { ui: t } = Astro.props;
+---
+
+<div class="steam-tool-container" id="steam-capsule-tool">
+  <div class="steam-unified-card">
+    <div class="steam-compact-bar">
+      <div class="steam-mode-tabs" role="tablist" aria-label="Steam Preview Modes">
+        <button type="button" class="steam-tab-btn active" id="tab-store" role="tab" aria-selected="true" data-tab="store">
+          {t.storePreviewTab}
+        </button>
+        <button type="button" class="steam-tab-btn" id="tab-library" role="tab" aria-selected="false" data-tab="library">
+          {t.libraryPreviewTab}
+        </button>
+        <button type="button" class="steam-tab-btn" id="tab-assets" role="tab" aria-selected="false" data-tab="assets">
+          {t.allAssetsTab}
+        </button>
+      </div>
+
+      <div class="steam-preset-chips">
+        <span class="preset-label">{t.minimumSize}</span>
+        <button type="button" class="preset-chip active" data-preset="gamebob">GameBob Crunch</button>
+        <button type="button" class="preset-chip" data-preset="retro">Pixel RPG</button>
+        <button type="button" class="preset-chip" data-preset="cyber">Cyberpunk AAA</button>
+      </div>
+
+      <div class="steam-inline-sliders">
+        <div class="slider-item">
+          <label for="focus-x-slider">{t.horizontalFocus}</label>
+          <input type="range" id="focus-x-slider" class="steam-range-input" min="0" max="100" value="50" aria-label={t.horizontalFocus} />
+        </div>
+        <div class="slider-item">
+          <label for="focus-y-slider">{t.verticalFocus}</label>
+          <input type="range" id="focus-y-slider" class="steam-range-input" min="0" max="100" value="50" aria-label={t.verticalFocus} />
+        </div>
+        <div class="slider-item">
+          <label for="zoom-slider">{t.zoomLevel}</label>
+          <input type="range" id="zoom-slider" class="steam-range-input" min="100" max="250" value="100" aria-label={t.zoomLevel} />
+        </div>
+      </div>
+
+      <div class="steam-quick-actions">
+        <button type="button" class="preset-chip" id="steam-reset-btn">{t.resetFocus}</button>
+        <label for="toggle-safe-zones" class="steam-toggle-label">
+          <input type="checkbox" id="toggle-safe-zones" class="steam-toggle-checkbox" checked />
+          {t.toggleSafeZones}
+        </label>
+        <button type="button" class="steam-btn-primary" id="steam-choose-btn">{t.chooseFile}</button>
+        <button type="button" class="steam-btn-primary download-zip-highlight" id="steam-zip-download-btn">{t.downloadZip}</button>
+      </div>
+
+      <input type="file" id="steam-image-input" class="steam-upload-input" accept="image/png,image/jpeg,image/webp" aria-label={t.uploadTitle} />
+      <span style="display: none;">{t.uploadHint} {t.toggleSteamOverlay}</span>
+    </div>
+
+    <div class="steam-preview-viewport">
+      <div id="panel-store" class="steam-preview-panel">
+        <SteamStoreMockup ui={t} />
+      </div>
+
+      <div id="panel-library" class="steam-preview-panel" style="display: none;">
+        <SteamLibraryMockup ui={t} />
+        <div style="margin-top: 1.25rem;">
+          <SteamLibraryGridMockup ui={t} />
+        </div>
+      </div>
+
+      <div id="panel-assets" class="steam-preview-panel" style="display: none;">
+        <div class="steam-assets-grid">
+          <div class="steam-asset-item">
+            <div class="steam-asset-info">
+              <span class="steam-asset-title">{t.headerCapsule}</span>
+              <span class="steam-asset-badge">920x430</span>
+            </div>
+            <div class="steam-asset-preview-box">
+              <canvas id="canvas-header-capsule-grid" width="920" height="430" aria-label={t.headerCapsule}></canvas>
+            </div>
+          </div>
+
+          <div class="steam-asset-item">
+            <div class="steam-asset-info">
+              <span class="steam-asset-title">{t.smallCapsule}</span>
+              <span class="steam-asset-badge">462x174</span>
+            </div>
+            <div class="steam-asset-preview-box">
+              <canvas id="canvas-small-capsule-grid" width="462" height="174" aria-label={t.smallCapsule}></canvas>
+            </div>
+          </div>
+
+          <div class="steam-asset-item">
+            <div class="steam-asset-info">
+              <span class="steam-asset-title">{t.verticalCapsule}</span>
+              <span class="steam-asset-badge">600x900</span>
+            </div>
+            <div class="steam-asset-preview-box">
+              <canvas id="canvas-vertical-capsule-grid" width="600" height="900" aria-label={t.verticalCapsule}></canvas>
+            </div>
+          </div>
+
+          <div class="steam-asset-item">
+            <div class="steam-asset-info">
+              <span class="steam-asset-title">{t.communityIcon}</span>
+              <span class="steam-asset-badge">184x184</span>
+            </div>
+            <div class="steam-asset-preview-box">
+              <canvas id="canvas-community-icon" width="184" height="184" aria-label={t.communityIcon}></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import JSZip from 'jszip';
+  import { calculateCropBounds, loadStateFromStorage } from './logic';
+
+  function createPlaceholder(): HTMLImageElement {
+    const cvs = document.createElement('canvas');
+    cvs.width = 1920;
+    cvs.height = 1080;
+    const ctx = cvs.getContext('2d')!;
+    ctx.fillStyle = '#101822';
+    ctx.fillRect(0, 0, 1920, 1080);
+    ctx.fillStyle = '#66c0f4';
+    ctx.font = 'bold 56px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('GAMEBOB STUDIOS KEY VISUAL', 960, 480);
+    const img = new Image();
+    img.src = cvs.toDataURL('image/png');
+    return img;
+  }
+
+  function setupTabs(root: HTMLElement) {
+    root.querySelectorAll('.steam-tab-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        root.querySelectorAll('.steam-tab-btn').forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        const target = btn.getAttribute('data-tab');
+        root.querySelectorAll('.steam-preview-panel').forEach((p) => {
+          (p as HTMLElement).style.display = p.id === `panel-${target}` ? 'block' : 'none';
+        });
+      });
+    });
+  }
+
+  function setupZipDownload(btn: HTMLElement | null) {
+    if (!btn) return;
+    btn.addEventListener('click', async () => {
+      const zip = new JSZip();
+      const list = [
+        { id: 'canvas-main-capsule', name: 'main_capsule_1232x706.png' },
+        { id: 'canvas-header-capsule', name: 'header_capsule_920x430.png' },
+        { id: 'canvas-vertical-capsule', name: 'vertical_library_capsule_600x900.png' },
+        { id: 'canvas-library-hero', name: 'library_hero_3840x1240.png' },
+        { id: 'canvas-community-icon', name: 'community_icon_184x184.png' }
+      ];
+      for (const item of list) {
+        const cvs = document.getElementById(item.id) as HTMLCanvasElement;
+        if (cvs) zip.file(item.name, cvs.toDataURL('image/png').replace(/^data:image\/png;base64,/, ''), { base64: true });
+      }
+      const blob = await zip.generateAsync({ type: 'blob' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'steam_capsules_package.zip';
+      a.click();
+    });
+  }
+
+  interface DrawConfig {
+    id: string;
+    w: number;
+    h: number;
+    img: HTMLImageElement;
+    fx: number;
+    fy: number;
+    zoom: number;
+  }
+
+  function drawCanvas(cfg: DrawConfig) {
+    const cvs = document.getElementById(cfg.id) as HTMLCanvasElement;
+    if (!cvs || !cfg.img) return;
+    const ctx = cvs.getContext('2d');
+    if (!ctx) return;
+    const b = calculateCropBounds({ srcWidth: cfg.img.width, srcHeight: cfg.img.height, targetWidth: cfg.w, targetHeight: cfg.h, focusX: cfg.fx, focusY: cfg.fy, zoom: cfg.zoom });
+    ctx.clearRect(0, 0, cfg.w, cfg.h);
+    ctx.drawImage(cfg.img, b.sx, b.sy, b.sWidth, b.sHeight, 0, 0, cfg.w, cfg.h);
+  }
+
+  function renderCanvasesBatch(img: HTMLImageElement, fx: number, fy: number, zoom: number) {
+    const draw = (id: string, w: number, h: number) => drawCanvas({ id, w, h, img, fx, fy, zoom });
+    draw('canvas-main-capsule', 1232, 706);
+    draw('canvas-library-hero', 3840, 1240);
+    draw('canvas-header-capsule', 920, 430);
+    draw('canvas-header-capsule-grid', 920, 430);
+    draw('canvas-small-capsule-grid', 462, 174);
+    draw('canvas-vertical-capsule', 600, 900);
+    draw('canvas-vertical-capsule-grid', 600, 900);
+    draw('canvas-community-icon', 184, 184);
+  }
+
+  function bindUploader(chooseBtn: HTMLElement | null, fileInput: HTMLInputElement | null, root: HTMLElement, onImage: (img: HTMLImageElement) => void) {
+    if (chooseBtn && fileInput) chooseBtn.addEventListener('click', () => fileInput.click());
+    root.querySelectorAll('.diegetic-upload-trigger').forEach((t) => t.addEventListener('click', () => fileInput?.click()));
+    if (fileInput) {
+      fileInput.addEventListener('change', (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+          if (!evt.target?.result) return;
+          const img = new Image();
+          img.onload = () => onImage(img);
+          img.src = evt.target.result as string;
+        };
+        reader.readAsDataURL(file);
+      });
+    }
+  }
+
+  function setupControls(fx: HTMLInputElement | null, fy: HTMLInputElement | null, zoom: HTMLInputElement | null, renderFn: () => void) {
+    const resetBtn = document.getElementById('steam-reset-btn');
+    if (resetBtn) {
+      resetBtn.addEventListener('click', () => {
+        if (fx) fx.value = '50';
+        if (fy) fy.value = '50';
+        if (zoom) zoom.value = '100';
+        renderFn();
+      });
+    }
+  }
+
+  function loadInitialSliders(fx: HTMLInputElement | null, fy: HTMLInputElement | null, zoom: HTMLInputElement | null) {
+    const state = loadStateFromStorage();
+    if (fx) fx.value = String(state.focalPoint.x * 100);
+    if (fy) fy.value = String(state.focalPoint.y * 100);
+    if (zoom) zoom.value = String(state.focalPoint.zoom * 100);
+  }
+
+  function initApp(root: HTMLElement) {
+    const fxSlider = document.getElementById('focus-x-slider') as HTMLInputElement;
+    const fySlider = document.getElementById('focus-y-slider') as HTMLInputElement;
+    const zoomSlider = document.getElementById('zoom-slider') as HTMLInputElement;
+    const safeZonesToggle = document.getElementById('toggle-safe-zones') as HTMLInputElement;
+
+    loadInitialSliders(fxSlider, fySlider, zoomSlider);
+    let sourceImg: HTMLImageElement = createPlaceholder();
+
+    const renderAll = () => {
+      if (!root) return;
+      const fx = fxSlider ? Number(fxSlider.value) / 100 : 0.5;
+      const fy = fySlider ? Number(fySlider.value) / 100 : 0.5;
+      const zoom = zoomSlider ? Number(zoomSlider.value) / 100 : 1;
+      renderCanvasesBatch(sourceImg, fx, fy, zoom);
+      const show = safeZonesToggle ? safeZonesToggle.checked : true;
+      root.querySelectorAll('.steam-safe-overlay').forEach((el) => {
+        (el as HTMLElement).style.display = show ? 'flex' : 'none';
+      });
+    };
+
+    sourceImg.onload = () => renderAll();
+    bindUploader(document.getElementById('steam-choose-btn'), document.getElementById('steam-image-input') as HTMLInputElement, root, (img) => {
+      sourceImg = img;
+      renderAll();
+    });
+
+    setupControls(fxSlider, fySlider, zoomSlider, renderAll);
+    [fxSlider, fySlider, zoomSlider, safeZonesToggle].forEach((c) => c?.addEventListener('input', renderAll));
+    setupTabs(root);
+    setupZipDownload(document.getElementById('steam-zip-download-btn'));
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const root = document.getElementById('steam-capsule-tool');
+    if (root) initApp(root);
+  });
+</script>

package/src/tool/steamCapsuleGenerator/components/SteamLibraryGridMockup.astro

@@ -0,0 +1,51 @@
+---
+import type { SteamCapsuleGeneratorUI } from '../ui';
+
+interface Props {
+  ui: SteamCapsuleGeneratorUI;
+}
+
+const { ui: t } = Astro.props;
+---
+
+<div class="steam-grid-mockup-frame">
+  <div class="steam-grid-header">
+    <span class="steam-grid-title">ALL GAMES (42)</span>
+    <div class="steam-grid-search-bar">
+      <input type="text" placeholder="Search by name" readonly value="Super Crunch Bros: GameBob Edition" id="library-grid-search-input" aria-label="Search games" />
+    </div>
+  </div>
+
+  <div class="steam-grid-tiles-container">
+    <div class="steam-grid-card active-card diegetic-upload-trigger" id="vertical-capsule-trigger" tabindex="0" role="button" aria-label="Click to upload vertical capsule art">
+      <div class="steam-grid-card-canvas-box">
+        <canvas id="canvas-vertical-capsule" width="600" height="900" aria-label={t.verticalCapsule}></canvas>
+        <div class="diegetic-overlay-hint">Click to Upload Vertical Art</div>
+        <div class="steam-safe-overlay" id="safe-vertical-capsule" style="left: 0; bottom: 0; width: 100%; height: 20%;">
+          {t.safeZone}
+        </div>
+        <div class="steam-grid-play-hover-overlay">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">
+            <path d="M8 5v14l11-7z"/>
+          </svg>
+        </div>
+      </div>
+      <div class="steam-grid-card-title" id="editable-grid-card-title" contenteditable="true" aria-label="Grid Game Title">Super Crunch Bros: GameBob Edition</div>
+    </div>
+
+    <div class="steam-grid-card placeholder-card">
+      <div class="steam-grid-card-canvas-box placeholder-box"></div>
+      <div class="steam-grid-card-title">Cyberpunk 2077</div>
+    </div>
+
+    <div class="steam-grid-card placeholder-card">
+      <div class="steam-grid-card-canvas-box placeholder-box"></div>
+      <div class="steam-grid-card-title">Hades II</div>
+    </div>
+
+    <div class="steam-grid-card placeholder-card">
+      <div class="steam-grid-card-canvas-box placeholder-box"></div>
+      <div class="steam-grid-card-title">Hollow Knight</div>
+    </div>
+  </div>
+</div>

package/src/tool/steamCapsuleGenerator/components/SteamLibraryMockup.astro

@@ -0,0 +1,64 @@
+---
+import type { SteamCapsuleGeneratorUI } from '../ui';
+
+interface Props {
+  ui: SteamCapsuleGeneratorUI;
+}
+
+const { ui: t } = Astro.props;
+---
+
+<div class="steam-library-mockup-frame">
+  <div class="steam-client-topbar">
+    <div class="steam-client-menu">
+      <span>Steam</span>
+      <span>View</span>
+      <span>Friends</span>
+      <span>Games</span>
+      <span>Help</span>
+    </div>
+    <div class="steam-client-window-controls">
+      <span>_</span>
+      <span>[ ]</span>
+      <span>X</span>
+    </div>
+  </div>
+
+  <div class="steam-library-hero-viewport diegetic-upload-trigger" id="library-hero-trigger" tabindex="0" role="button" aria-label="Click to upload library hero banner">
+    <canvas id="canvas-library-hero" width="3840" height="1240" aria-label={t.libraryHero}></canvas>
+    <div class="diegetic-overlay-hint">Click to Upload Library Hero Artwork</div>
+
+    <div class="steam-library-hero-gradient-overlay"></div>
+
+    <div class="steam-library-logo-container" id="library-logo-box">
+      <div class="steam-library-title-fallback" id="editable-library-title" contenteditable="true" aria-label="Library Title">Super Crunch Bros: GameBob Edition</div>
+      <div class="steam-safe-overlay" id="safe-library-hero" style="left: 0; top: 0; width: 100%; height: 100%;">
+        {t.safeZone}
+      </div>
+    </div>
+  </div>
+
+  <div class="steam-library-action-bar">
+    <button type="button" class="steam-play-button">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M8 5v14l11-7z"/>
+      </svg>
+      <span>PLAY</span>
+    </button>
+
+    <div class="steam-library-stat-item">
+      <span class="stat-label">LAST PLAYED</span>
+      <span class="stat-value">Today</span>
+    </div>
+
+    <div class="steam-library-stat-item">
+      <span class="stat-label">TIME PLAYED</span>
+      <span class="stat-value">99.9 hrs</span>
+    </div>
+
+    <div class="steam-library-stat-item">
+      <span class="stat-label">ACHIEVEMENTS</span>
+      <span class="stat-value">42 / 42</span>
+    </div>
+  </div>
+</div>

package/src/tool/steamCapsuleGenerator/components/SteamMasterControls.astro

@@ -0,0 +1,2 @@
+---
+---

package/src/tool/steamCapsuleGenerator/components/SteamStoreMockup.astro

@@ -0,0 +1,90 @@
+---
+import type { SteamCapsuleGeneratorUI } from '../ui';
+
+interface Props {
+  ui: SteamCapsuleGeneratorUI;
+}
+
+const { ui: t } = Astro.props;
+---
+
+<div class="steam-store-mockup-frame">
+  <div class="steam-store-header-nav">
+    <div class="steam-logo-text">
+      <span class="steam-logo-icon">STEAM</span>
+      <span>STORE</span>
+    </div>
+    <div class="steam-nav-links">
+      <span class="active">Your Store</span>
+      <span>New & Noteworthy</span>
+      <span>Categories</span>
+      <span>Points Shop</span>
+      <span>News</span>
+      <span>Labs</span>
+    </div>
+  </div>
+
+  <div class="steam-store-hero-row">
+    <div class="steam-main-capsule-container diegetic-upload-trigger" id="main-capsule-trigger" tabindex="0" role="button" aria-label="Click to upload main capsule art">
+      <div class="steam-main-capsule-canvas-box">
+        <canvas id="canvas-main-capsule" width="1232" height="706" aria-label={t.mainCapsule}></canvas>
+        <div class="diegetic-overlay-hint">Click to Upload Main Artwork</div>
+      </div>
+
+      <div class="steam-store-price-badge">
+        <div class="discount-tag">-50%</div>
+        <div class="price-box">
+          <span class="original-price">$29.99</span>
+          <span class="final-price">$14.99</span>
+        </div>
+      </div>
+
+      <div class="steam-safe-overlay" id="safe-main-capsule" style="right: 0; bottom: 0; width: 40%; height: 25%;">
+        {t.safeZone}
+      </div>
+    </div>
+
+    <div class="steam-store-sidebar-panel">
+      <div class="steam-game-title-input" id="editable-game-title" contenteditable="true" aria-label="Game Title">Super Crunch Bros: GameBob Edition</div>
+      <div class="steam-game-desc-input" id="editable-game-desc" contenteditable="true" aria-label="Game Description">
+        An epic high-octane indie platformer action adventure. Battle through procedural retro worlds and customize your capsules live for Steamworks publication.
+      </div>
+
+      <div class="steam-header-capsule-box diegetic-upload-trigger" id="header-capsule-trigger" tabindex="0" role="button" aria-label="Click to upload header capsule art">
+        <canvas id="canvas-header-capsule" width="920" height="430" aria-label={t.headerCapsule}></canvas>
+        <div class="diegetic-overlay-hint">Click to Upload Header Capsule</div>
+
+        <div class="steam-discount-badge" id="store-discount-overlay">
+          <div class="steam-discount-pct" id="editable-discount-pct" contenteditable="true">-50%</div>
+          <div class="steam-discount-prices">
+            <span style="text-decoration: line-through; opacity: 0.6;" id="editable-orig-price" contenteditable="true">$29.99</span>
+            <span class="final-price" id="editable-final-price" contenteditable="true">$14.99</span>
+          </div>
+        </div>
+
+        <div class="steam-safe-overlay" id="safe-header-capsule" style="right: 0; bottom: 0; width: 45%; height: 30%;">
+          {t.safeZone}
+        </div>
+      </div>
+
+      <div class="steam-store-meta-grid">
+        <div class="meta-row">
+          <span class="meta-label">REVIEWS:</span>
+          <span class="meta-value">Very Positive (1,337)</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">RELEASE DATE:</span>
+          <span class="meta-value">Available Now</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">DEVELOPER:</span>
+          <span class="meta-value" id="editable-developer" contenteditable="true">GameBob Studios</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">PUBLISHER:</span>
+          <span class="meta-value" id="editable-publisher" contenteditable="true">GameBob Publishing</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/steamCapsuleGenerator/entry.ts

@@ -0,0 +1,28 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { SteamCapsuleGeneratorUI } from './ui';
+
+export type { SteamCapsuleGeneratorUI };
+
+export type SteamCapsuleGeneratorLocaleContent = ToolLocaleContent<SteamCapsuleGeneratorUI>;
+
+export const steamCapsuleGenerator: GamesToolEntry<SteamCapsuleGeneratorUI> = {
+  id: 'steam-capsule-generator',
+  icons: { bg: 'mdi:gamepad-variant', fg: 'mdi:image-multiple' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

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

@@ -0,0 +1,144 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { SteamCapsuleGeneratorUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<SteamCapsuleGeneratorUI> = {
+  slug: 'steam-kapsel-generator',
+  title: 'Steam Kapsel und Grafik Vorschau Generator',
+  description: 'Erstellen, beschneiden und prüfen Sie offizielle Steam Shop Kapseln und Bibliothek Grafiken mit Live Vorschau und Sicherheitszonen.',
+  ui: {
+    uploadTitle: 'Spielgrafik Hochladen',
+    uploadHint: 'Laden Sie ein hochauflösendes Banner hoch (empfohlen 3840x1240 px oder größer).',
+    chooseFile: 'Datei Auswählen',
+    minimumSize: 'Empfohlene Mindestgröße: 1920x1080 px',
+    horizontalFocus: 'Horizontaler Fokus (X)',
+    verticalFocus: 'Vertikaler Fokus (Y)',
+    zoomLevel: 'Zoomstufe',
+    resetFocus: 'Fokus Zentrieren',
+    safeZone: 'Sicherheitszone',
+    downloadZip: 'Alle Assets Herunterladen (ZIP)',
+    headerCapsule: 'Header Kapsel (460x215 / HD 920x430)',
+    smallCapsule: 'Kleine Kapsel (231x87 / HD 462x174)',
+    mainCapsule: 'Haupt Kapsel (616x353 / HD 1232x706)',
+    verticalCapsule: 'Vertikale Bibliotheks Kapsel (300x450 / HD 600x900)',
+    libraryHero: 'Bibliotheks Banner (1920x620 / HD 3840x1240)',
+    communityIcon: 'Community App Icon (32x32 / HD 184x184)',
+    storePreviewTab: 'Steam Shop Vorschau',
+    libraryPreviewTab: 'Steam Bibliothek Vorschau',
+    allAssetsTab: 'Alle Asset Größen',
+    toggleSafeZones: 'Sicherheitszonen',
+    toggleSteamOverlay: 'Steam Oberfläche'
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Steam Grafik Kapsel Spezifikationen und Richtlinien'
+    },
+    {
+      type: 'paragraph',
+      html: 'Steam Shopseiten und Bibliotheksansichten nutzen standardisierte Grafik Kapseln für die optimale Darstellung auf verschiedenen Bildschirmen.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Shop Header HD Auflösung', value: '920 x 430 px' },
+        { label: 'Bibliothek Kapsel Verhältnis', value: '2:3 Vertikal' },
+        { label: 'Bibliothek Hero Maximale Res', value: '3840 x 1240 px' },
+        { label: 'Community Icon Größe', value: '184 x 184 px' }
+      ]
+    },
+    {
+      type: 'table',
+      headers: ['Asset Typ', 'Standardgröße (px)', 'HD Zielgröße (px)', 'Seitenverhältnis', 'Format'],
+      rows: [
+        ['Header Kapsel', '460 x 215', '920 x 430', '2.14:1', 'JPG / PNG'],
+        ['Kleine Kapsel', '231 x 87', '462 x 174', '2.65:1', 'JPG / PNG'],
+        ['Haupt Kapsel', '616 x 353', '1232 x 706', '1.74:1', 'JPG / PNG'],
+        ['Vertikale Kapsel', '300 x 450', '600 x 900', '2:3', 'JPG / PNG'],
+        ['Bibliotheks Banner', '1920 x 620', '3840 x 1240', '3.1:1', 'JPG / PNG'],
+        ['Bibliotheks Logo', '1280 x 720', '1280 x 720', '16:9', 'Transparentes PNG'],
+        ['Community Icon', '32 x 32', '184 x 184', '1:1', 'PNG']
+      ]
+    },
+    {
+      type: 'tip',
+      title: 'Strategie für Sicherheitszonen',
+      html: 'Halten Sie alle wichtigen Logos und Gesichter im oberen linken Drittel des Bildes.'
+    },
+    {
+      type: 'proscons',
+      title: 'Arbeitsablauf Bewertung',
+      items: [
+        {
+          pro: 'Sofortige Erstellung aller erforderlichen Steam Asset Größen',
+          con: 'Komplexe Motive benötigen eventuell getrennte Ebenen'
+        }
+      ]
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Kapsel',
+          definition: 'Standardbegriff von Valve für werbliche Bildcontainer.'
+        }
+      ]
+    }
+  ],
+  faqTitle: 'Häufig gestellte Fragen zu Steam Assets',
+  faq: [
+    {
+      question: 'Welches Dateiformat sollte ich für Steam Kapseln nutzen?',
+      answer: 'Steam akzeptiert JPG oder PNG für Hauptkapseln.'
+    }
+  ],
+  howTo: [
+    {
+      name: 'Hochauflösende Grafik Hochladen',
+      text: 'Wählen Sie eine hochauflösende Grafik mit dem Uploader aus.'
+    }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Steam Kapsel und Grafik Vorschau Generator',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'EUR'
+      }
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Welches Dateiformat sollte ich für Steam Kapseln nutzen?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Steam akzeptiert JPG oder PNG für Hauptkapseln.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'So erstellen Sie Steam Kapseln',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Hochauflösende Grafik Hochladen',
+          text: 'Wählen Sie eine hochauflösende Grafik aus.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};