From 3f0662c49ae6e3d6cdd75523f29f42dd67c5817d Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 13:15:58 +0000 Subject: [PATCH] feat: Add Turkish/Swedish translations and 6 photography simulation tools - Added Turkish (TR) and Swedish (SV) language support to i18n system - Added simulation tool i18n keys to all 8 languages - New simulation section with 6 interactive canvas-based tools: Bokeh, Long Exposure, White Balance, ISO Noise, Perspective, Histogram - Updated hero stats counter from 6 to 12 tools - Added simulation nav link and footer link https://claude.ai/code/session_016BnRMtz5yhf7n5ZPQCMfmN --- photography-tools/css/style.css | 136 +++++++ photography-tools/index.html | 177 ++++++++- photography-tools/js/app.js | 669 ++++++++++++++++++++++++++++++++ photography-tools/js/i18n.js | 140 ++++++- 4 files changed, 1115 insertions(+), 7 deletions(-) diff --git a/photography-tools/css/style.css b/photography-tools/css/style.css index e3edb42..d9ec1f7 100644 --- a/photography-tools/css/style.css +++ b/photography-tools/css/style.css @@ -1607,6 +1607,138 @@ body { } } +/* ==================== SIMULATION TOOLS ==================== */ +.sim-tabs { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; + margin-bottom: 2rem; +} + +.sim-tab { + padding: 0.6rem 1.2rem; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + font-size: 0.9rem; + font-weight: 500; + transition: all 0.3s ease; +} + +.sim-tab:hover { + border-color: var(--accent); + color: var(--text-primary); +} + +.sim-tab.active { + background: var(--accent); + border-color: var(--accent); + color: #fff; +} + +.sim-panel { + display: none; + animation: fadeIn 0.3s ease; +} + +.sim-panel.active { + display: block; +} + +.sim-grid { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: 2rem; + align-items: start; +} + +.sim-controls { + background: var(--bg-card); + padding: 1.5rem; + border-radius: 12px; + border: 1px solid var(--border-color); +} + +.sim-controls h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.sim-info { + color: var(--text-secondary); + font-size: 0.9rem; + margin-bottom: 1.5rem; + line-height: 1.5; +} + +.sim-controls .input-group { + margin-bottom: 1.2rem; +} + +.sim-controls .input-group label { + display: block; + font-size: 0.85rem; + color: var(--text-secondary); + margin-bottom: 0.4rem; +} + +.sim-controls .input-group input[type="range"] { + width: 100%; +} + +.sim-controls .range-value { + display: inline-block; + margin-top: 0.3rem; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + color: var(--accent); + font-weight: 500; +} + +.sim-controls .input-group select { + width: 100%; + padding: 0.5rem; + background: var(--bg-input); + border: 1px solid var(--border-color); + border-radius: 6px; + color: var(--text-primary); + font-size: 0.9rem; +} + +.sim-canvas-wrap { + background: var(--bg-card); + border-radius: 12px; + border: 1px solid var(--border-color); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; +} + +.sim-canvas-wrap canvas { + width: 100%; + height: auto; + border-radius: 8px; +} + +@media (max-width: 768px) { + .sim-grid { + grid-template-columns: 1fr; + } + .sim-tabs { + gap: 0.3rem; + } + .sim-tab { + padding: 0.5rem 0.8rem; + font-size: 0.8rem; + } +} + @media (max-width: 480px) { .calc-tabs { gap: 0.3rem; @@ -1618,4 +1750,8 @@ body { .param-scale { display: none; } + .sim-tab { + padding: 0.4rem 0.6rem; + font-size: 0.75rem; + } } diff --git a/photography-tools/index.html b/photography-tools/index.html index c67fd58..49e349b 100644 --- a/photography-tools/index.html +++ b/photography-tools/index.html @@ -28,6 +28,8 @@ + + + + + + + + + + +
+
+
+

Bokeh-Simulator

+

Sieh wie sich Bokeh mit verschiedenen Blenden und Brennweiten verändert.

+
+ + + f/2.8 +
+
+ + + 7 +
+
+ + + 70% +
+
+
+ +
+
+
+ + +
+
+
+

Langzeitbelichtungs-Simulator

+

Sieh den Effekt verschiedener Belichtungszeiten auf Bewegung.

+
+ + + 1/4s +
+
+ + + 5 +
+
+
+ +
+
+
+ + +
+
+
+

Weißabgleich-Simulator

+

Sieh wie die Farbtemperatur dein Bild beeinflusst.

+
+ + + 5500K +
+
+ + + 0 +
+
+
+ +
+
+
+ + +
+
+
+

ISO-Rausch-Simulator

+

Sieh wie digitales Rauschen mit höheren ISO-Werten zunimmt.

+
+ + + ISO 400 +
+
+ + + 50% +
+
+
+ +
+
+
+ + +
+
+
+

Perspektiv-Simulator

+

Sieh wie die Brennweite die Perspektive beeinflusst.

+
+ + + 50mm +
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+

Histogramm-Simulator

+

Sieh das Histogramm basierend auf Belichtungseinstellungen.

+
+ + + f/5.6 +
+
+ + + 1/125s +
+
+ + + ISO 400 +
+
+
+ +
+
+
+ + +