@jjlmoya/utils-chrono 1.2.0

package/src/tool/watch-savings-planner/client.ts

@@ -0,0 +1,271 @@
+interface Goal {
+  id: string;
+  name: string;
+  price: number;
+  saved: number;
+  monthly: number;
+  _celebrated?: boolean;
+}
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+let goals: Goal[] = [];
+let editingId: string | null = null;
+
+const totalSavedEl = document.getElementById('total-saved') as HTMLElement;
+const totalGoalsEl = document.getElementById('total-goals') as HTMLElement;
+const goalsList = document.getElementById('goals-list') as HTMLElement;
+const triggerBtn = document.getElementById('add-goal-trigger') as HTMLButtonElement;
+const form = document.getElementById('add-goal-form') as HTMLElement;
+const formClose = document.getElementById('form-close') as HTMLButtonElement;
+const formSubmit = document.getElementById('form-submit') as HTMLButtonElement;
+const nameInput = document.getElementById('goal-name') as HTMLInputElement;
+const priceInput = document.getElementById('goal-price') as HTMLInputElement;
+const savedInput = document.getElementById('goal-saved') as HTMLInputElement;
+const monthlySlider = document.getElementById('goal-monthly') as HTMLInputElement;
+const monthlyDisplay = document.getElementById('monthly-display') as HTMLElement;
+const template = document.getElementById('goal-card-template') as HTMLTemplateElement;
+
+const STORAGE_KEY = 'watch-savings-goals';
+const TIMESTAMP_KEY = 'watch-savings-timestamp';
+const CURRENCY_CODE = ui.currency || 'USD';
+const FMT = (n: number) => n.toLocaleString(undefined, { style: 'currency', currency: CURRENCY_CODE, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+const confettiColors = ['#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#3b82f6', '#ec4899'];
+
+function autoSimulate() {
+  const last = parseInt(localStorage.getItem(TIMESTAMP_KEY) || '0', 10);
+  const now = Date.now();
+  if (!last || goals.length === 0) { localStorage.setItem(TIMESTAMP_KEY, String(now)); return; }
+  const msPerMonth = 30.44 * 24 * 60 * 60 * 1000;
+  const monthsPassed = Math.floor((now - last) / msPerMonth);
+  if (monthsPassed < 1) return;
+  for (const g of goals) {
+    if (g.saved < g.price) {
+      g.saved = Math.min(g.saved + g.monthly * monthsPassed, g.price);
+    }
+  }
+  localStorage.setItem(TIMESTAMP_KEY, String(now));
+  saveGoals();
+}
+
+function loadGoals() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    goals = raw ? JSON.parse(raw) : [];
+  } catch {
+    goals = [];
+  }
+}
+
+function saveGoals() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(goals));
+}
+
+function fmt(amount: number): string {
+  if (amount >= 1000) return FMT(amount);
+  return FMT(amount);
+}
+
+function fmtFull(amount: number): string {
+  return FMT(amount);
+}
+
+function calcMonths(g: Goal): number {
+  const remaining = g.price - g.saved;
+  if (remaining <= 0) return 0;
+  if (g.monthly <= 0) return Infinity;
+  return Math.ceil(remaining / g.monthly);
+}
+
+function calcDate(months: number): string {
+  if (months === 0) return ui.now || 'Now';
+  if (!isFinite(months)) return '\u2014';
+  const d = new Date();
+  d.setMonth(d.getMonth() + months);
+  return d.toLocaleDateString(undefined, { month: 'short', year: 'numeric' });
+}
+
+function updateSummary() {
+  const total = goals.reduce((sum, g) => sum + g.saved, 0);
+  totalSavedEl.textContent = fmt(total);
+  totalGoalsEl.textContent = String(goals.length);
+}
+
+function renderEmptyState() {
+  goalsList.innerHTML = `
+    <div class="goals-empty">
+      <svg viewBox="0 0 24 24" width="48" height="48" opacity="0.3">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
+      </svg>
+      <p class="empty-title">${ui.goalsEmpty || 'No savings goals yet'}</p>
+      <p class="empty-sub">${ui.goalsEmptySub || 'Set your first watch goal and start saving!'}</p>
+    </div>`;
+}
+
+function setCardText(clone: DocumentFragment, sel: string, text: string) {
+  (clone.querySelector(sel) as HTMLElement).textContent = text;
+}
+
+function renderGoalCard(goal: Goal) {
+  const clone = template.content.cloneNode(true) as DocumentFragment;
+  const card = clone.querySelector('.goal-card') as HTMLElement;
+  card.dataset.id = goal.id;
+
+  const achieved = goal.saved >= goal.price;
+  const percent = Math.min(100, Math.round((goal.saved / goal.price) * 100));
+
+  setCardText(clone, '.goal-name', goal.name);
+  setCardText(clone, '.goal-price', fmtFull(goal.price));
+  setCardText(clone, '.goal-saved', fmtFull(Math.min(goal.saved, goal.price)));
+  setCardText(clone, '.goal-monthly', fmtFull(goal.monthly));
+  setCardText(clone, '.goal-date', achieved ? (ui.now || 'Now') : calcDate(calcMonths(goal)));
+
+  (clone.querySelector('.goal-ring-fill') as SVGElement).setAttribute('stroke-dashoffset', String(326.73 * (1 - percent / 100)));
+  setCardText(clone, '.goal-percent', `${percent}%`);
+
+  if (achieved) {
+    card.classList.add('goal-achieved');
+    const badge = clone.querySelector('.goal-achieved-badge') as HTMLElement;
+    badge.style.display = 'inline-flex';
+    setCardText(clone, '.goal-ring-label', ui.goalAchieved || 'Achieved!');
+  }
+
+  const slider = clone.querySelector('.goal-slider') as HTMLInputElement;
+  slider.value = String(goal.monthly);
+
+  (clone.querySelector('.goal-delete') as HTMLButtonElement).addEventListener('click', () => deleteGoal(goal.id));
+  slider.addEventListener('input', () => {
+    goal.monthly = parseInt(slider.value, 10);
+    saveGoals();
+    renderGoals();
+  });
+
+  goalsList.appendChild(clone);
+}
+
+function renderGoals() {
+  goalsList.innerHTML = '';
+  if (goals.length === 0) { renderEmptyState(); return; }
+  for (const goal of goals) renderGoalCard(goal);
+  checkAchievements();
+}
+
+function checkAchievements() {
+  for (const g of goals) {
+    if (g.saved >= g.price && !g._celebrated) {
+      celebrate();
+      g._celebrated = true;
+      saveGoals();
+    }
+  }
+}
+
+function celebrate() {
+  const rect = goalsList.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2, cy = rect.top + rect.height / 2;
+  const parts = [];
+  for (let i = 0; i < 60; i++) {
+    const a = Math.random() * Math.PI * 2, s = Math.random() * 8 + 4;
+    parts.push({ x: cx, y: cy, vx: Math.cos(a) * s, vy: Math.sin(a) * s - 3, color: confettiColors[Math.floor(Math.random() * confettiColors.length)], life: 0, maxLife: Math.random() * 80 + 60, size: Math.random() * 6 + 3 });
+  }
+  const canvas = document.createElement('canvas');
+  Object.assign(canvas.style, { position: 'fixed', inset: '0', width: '100%', height: '100%', pointerEvents: 'none', zIndex: '9999' });
+  canvas.width = innerWidth; canvas.height = innerHeight;
+  document.body.appendChild(canvas);
+  const ctx = canvas.getContext('2d')!;
+  (function frame() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const p of parts) { p.x += p.vx; p.y += p.vy; p.vy += 0.15; p.life++; const a = 1 - p.life / p.maxLife; if (a <= 0) continue; ctx.save(); ctx.globalAlpha = a; ctx.fillStyle = p.color; ctx.translate(p.x, p.y); ctx.rotate(p.life * 0.1); ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6); ctx.restore(); }
+    if (parts.some(p => p.life < p.maxLife)) requestAnimationFrame(frame); else canvas.remove();
+  })();
+}
+
+function deleteGoal(id: string) {
+  goals = goals.filter((g) => g.id !== id);
+  saveGoals();
+  renderGoals();
+  updateSummary();
+}
+
+function getGoalDefaults(goal?: Goal) {
+  const g = goal;
+  return {
+    name: g ? g.name : '',
+    price: g ? g.price : 5000,
+    saved: g ? g.saved : 0,
+    monthly: g ? g.monthly : 200,
+    id: g ? g.id : null,
+  };
+}
+
+function openForm(goal?: Goal) {
+  const d = getGoalDefaults(goal);
+  editingId = d.id;
+  nameInput.value = d.name;
+  priceInput.value = String(d.price);
+  savedInput.value = String(d.saved);
+  monthlySlider.value = String(d.monthly);
+  monthlyDisplay.textContent = FMT(parseInt(monthlySlider.value, 10));
+  formSubmit.textContent = editingId ? ui.saveGoal || 'Save' : ui.addButton || 'Add Goal';
+  form.style.display = 'block';
+  triggerBtn.style.display = 'none';
+  nameInput.focus();
+}
+
+function closeForm() {
+  form.style.display = 'none';
+  triggerBtn.style.display = 'flex';
+  editingId = null;
+}
+
+function getFormValues() {
+  return {
+    name: nameInput.value.trim() || 'Watch',
+    price: Math.max(1, parseInt(priceInput.value, 10) || 5000),
+    saved: Math.max(0, parseInt(savedInput.value, 10) || 0),
+    monthly: Math.max(10, parseInt(monthlySlider.value, 10) || 200),
+  };
+}
+
+monthlySlider.addEventListener('input', () => {
+  monthlyDisplay.textContent = FMT(parseInt(monthlySlider.value, 10));
+});
+
+triggerBtn.addEventListener('click', () => openForm());
+
+formClose.addEventListener('click', closeForm);
+
+formSubmit.addEventListener('click', () => {
+  const { name, price, saved, monthly } = getFormValues();
+
+  if (editingId) {
+    const goal = goals.find((g) => g.id === editingId);
+    if (goal) { goal.name = name; goal.price = price; goal.saved = saved; goal.monthly = monthly; }
+  } else {
+    goals.push({
+      id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      name, price, saved, monthly, _celebrated: false,
+    });
+  }
+
+  saveGoals();
+  closeForm();
+  renderGoals();
+  updateSummary();
+});
+
+const simBtn = document.getElementById('sim-month-btn') as HTMLButtonElement;
+if (simBtn) {
+  simBtn.addEventListener('click', () => {
+    for (const g of goals) {
+      if (g.saved < g.price) g.saved = Math.min(g.saved + g.monthly, g.price);
+    }
+    localStorage.setItem(TIMESTAMP_KEY, String(Date.now()));
+    saveGoals();
+    renderGoals();
+    updateSummary();
+  });
+}
+
+loadGoals(); autoSimulate(); renderGoals(); updateSummary();

package/src/tool/watch-savings-planner/component.astro

@@ -0,0 +1,33 @@
+---
+import AddGoalForm from './components/AddGoalForm.astro';
+import GoalCard from './components/GoalCard.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <div class="savings-summary" id="savings-summary">
+    <div class="summary-stat">
+      <span class="summary-value" id="total-saved">0</span>
+      <span class="summary-label">{ui.totalSaved || "Total Saved"}</span>
+    </div>
+    <div class="summary-stat">
+      <span class="summary-value" id="total-goals">0</span>
+      <span class="summary-label">{ui.totalGoals || "Goals"}</span>
+    </div>
+  </div>
+
+  <AddGoalForm labels={ui} />
+  <GoalCard labels={ui} />
+  <button type="button" class="sim-month-btn" id="sim-month-btn">
+    <svg viewBox="0 0 24 24" width="14" height="14"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z" fill="currentColor"/></svg>
+    {ui.simMonth || "+1 month"}
+  </button>
+  <div class="goals-list" id="goals-list"></div>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/watch-savings-planner/components/AddGoalForm.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="add-goal-form" id="add-goal-form" style="display: none;">
+  <div class="form-header">
+    <h3>{labels.addGoalTitle || "New Savings Goal"}</h3>
+    <button type="button" class="form-close" id="form-close">
+      <svg viewBox="0 0 24 24" width="20" height="20">
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor" />
+      </svg>
+    </button>
+  </div>
+  <div class="form-body">
+    <div class="form-group">
+      <label class="form-label" for="goal-name">{labels.goalNameLabel || "Watch"}</label>
+      <input type="text" id="goal-name" class="form-input" placeholder={labels.goalNamePlaceholder || "e.g. Rolex Submariner"} maxlength="40" />
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label" for="goal-price">{labels.targetPriceLabel || "Target Price"}</label>
+        <input type="number" id="goal-price" class="form-input" min="1" step="100" value="5000" />
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="goal-saved">{labels.currentSavingsLabel || "Saved So Far"}</label>
+        <input type="number" id="goal-saved" class="form-input" min="0" step="100" value="0" />
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="goal-monthly">{labels.monthlyLabel || "Per Month"}</label>
+      <div class="range-group">
+        <input type="range" id="goal-monthly" class="form-range" min="10" max="5000" step="10" value="200" />
+        <span class="range-value" id="monthly-display">$200</span>
+      </div>
+    </div>
+    <button type="button" class="form-submit" id="form-submit">{labels.addButton || "Add Goal"}</button>
+  </div>
+</div>
+
+<button type="button" class="add-goal-trigger" id="add-goal-trigger">
+  <svg viewBox="0 0 24 24" width="22" height="22">
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor" />
+  </svg>
+  {labels.addGoalTitle || "New Savings Goal"}
+</button>

package/src/tool/watch-savings-planner/components/GoalCard.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<template id="goal-card-template">
+  <div class="goal-card" data-id="">
+    <div class="goal-header">
+      <div class="goal-name-wrap">
+        <span class="goal-name"></span>
+        <span class="goal-achieved-badge" style="display: none;">{labels.achieved || "Achieved!"}</span>
+      </div>
+      <button type="button" class="goal-delete" title={labels.deleteGoal || "Delete"}>
+        <svg viewBox="0 0 24 24" width="18" height="18">
+          <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+    <div class="goal-ring-section">
+      <div class="goal-ring">
+        <svg viewBox="0 0 120 120">
+          <circle class="goal-ring-bg" cx="60" cy="60" r="52" />
+          <circle class="goal-ring-fill" cx="60" cy="60" r="52"
+            stroke-dasharray="326.73" stroke-dashoffset="326.73" />
+        </svg>
+        <div class="goal-ring-text">
+          <span class="goal-percent">0%</span>
+          <span class="goal-ring-label">{labels.percentLabel || "Saved"}</span>
+        </div>
+      </div>
+      <div class="goal-meta">
+        <div class="meta-row">
+          <span class="meta-label">{labels.targetPriceLabel || "Target"}</span>
+          <span class="meta-value goal-price"></span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">{labels.currentSavingsLabel || "Saved"}</span>
+          <span class="meta-value goal-saved"></span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">{labels.monthlyLabel || "Monthly"}</span>
+          <span class="meta-value goal-monthly"></span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">{labels.targetDate || "Target Date"}</span>
+          <span class="meta-value goal-date"></span>
+        </div>
+      </div>
+    </div>
+    <div class="goal-monthly-adjust">
+      <span class="adjust-label">{labels.adjustMonthly || "Adjust monthly"}</span>
+      <input type="range" class="goal-slider" min="10" max="5000" step="10" />
+    </div>
+  </div>
+</template>

package/src/tool/watch-savings-planner/entry.ts

@@ -0,0 +1,62 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type WatchSavingsPlannerUI = {
+  title: string;
+  addGoalTitle: string;
+  goalNameLabel: string;
+  goalNamePlaceholder: string;
+  targetPriceLabel: string;
+  currentSavingsLabel: string;
+  monthlyLabel: string;
+  addButton: string;
+  cancelButton: string;
+  goalsEmpty: string;
+  goalsEmptySub: string;
+  monthsToGoal: string;
+  yearsToGoal: string;
+  month: string;
+  months: string;
+  year: string;
+  totalSaved: string;
+  totalGoals: string;
+  achieved: string;
+  percentLabel: string;
+  deleteGoal: string;
+  editGoal: string;
+  saveGoal: string;
+  currency: string;
+  summaryTitle: string;
+  goalAchieved: string;
+  goalProgress: string;
+  congratsTitle: string;
+  congratsDesc: string;
+  monthlyContribution: string;
+  targetDate: string;
+  adjustMonthly: string;
+  simMonth: string;
+  now: string;
+};
+
+export type WatchSavingsPlannerLocaleContent = ToolLocaleContent<WatchSavingsPlannerUI>;
+
+export const watchSavingsPlanner: ChronoToolEntry<WatchSavingsPlannerUI> = {
+  id: 'watch-savings-planner',
+  icons: { bg: 'mdi:wallet-outline', fg: 'mdi:watch-variant' },
+  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/watch-savings-planner/i18n/de.ts

@@ -0,0 +1,153 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WatchSavingsPlannerUI } from '../entry';
+import { bibliography } from '../bibliography';
+
+export const content: ToolLocaleContent<WatchSavingsPlannerUI> = {
+  slug: 'uhren-sparplaner',
+  title: 'Sparzielplaner für Uhren',
+  description: 'Lege Sparziele für deinen nächsten Uhrenkauf fest und verfolge sie. Visualisiere Fortschritte, berechne Zeitpläne und bleib motiviert.',
+  ui: {
+    title: 'Sparzieleinstellungen',
+    addGoalTitle: 'Neues Sparziel',
+    goalNameLabel: 'Uhr',
+    goalNamePlaceholder: 'z.B. Rolex Submariner',
+    targetPriceLabel: 'Zielpreis',
+    currentSavingsLabel: 'Gespart',
+    monthlyLabel: 'Pro Monat',
+    addButton: 'Ziel hinzufügen',
+    cancelButton: 'Abbrechen',
+    goalsEmpty: 'Noch keine Sparziele',
+    goalsEmptySub: 'Setz dein erstes Uhrenziel und leg los!',
+    monthsToGoal: 'Zeit bis zum Ziel',
+    yearsToGoal: 'Jahre bis zum Ziel',
+    month: 'Mo',
+    months: 'Mte',
+    year: 'J',
+    totalSaved: 'Gesamt gespart',
+    totalGoals: 'Ziele',
+    achieved: 'Erreicht',
+    percentLabel: 'Gespart',
+    deleteGoal: 'Löschen',
+    editGoal: 'Bearbeiten',
+    saveGoal: 'Speichern',
+    currency: 'EUR',
+    summaryTitle: 'Zusammenfassung',
+    goalAchieved: 'Erreicht!',
+    goalProgress: 'Fortschritt',
+    congratsTitle: 'Glückwunsch!',
+    congratsDesc: 'Du hast dein Sparziel erreicht!',
+    monthlyContribution: 'Monatlich',
+    targetDate: 'Zieldatum',
+    adjustMonthly: 'Monatsrate anpassen',
+  },
+  seo: [
+    { type: 'title', text: 'Sparzielplaner für Uhren \u2014 Verfolge deinen nächsten Uhrenkauf', level: 2 },
+    { type: 'paragraph', html: 'F\u00fcr eine Uhr zu sparen ist eine Reise. Ob es eine <strong>Vintage Speedmaster</strong>, eine <strong>Submariner</strong> oder eine <strong>Grand Seiko</strong> ist \u2014 ein klarer Sparplan verwandelt den Traum in einen Zeitplan. Dieses Tool hilft dir, deinen Fortschritt zu visualisieren, deine monatlichen Beitr\u00e4ge anzupassen und genau zu sehen, wann du mit deinem heiligen Gral aus dem Laden gehen wirst.' },
+    { type: 'title', text: 'Warum ein Sparplan f\u00fcr Uhrensammler wichtig ist', level: 3 },
+    { type: 'paragraph', html: 'Uhren sammeln ist ein Geduldsspiel. Die Preise begehrter Modelle steigen stetig, und Impulsk\u00e4ufe f\u00fchren oft zu Reue. Ein strukturierter Sparansatz h\u00e4lt dich diszipliniert, verhindert finanzielle Belastung und l\u00e4sst den endg\u00fcltigen Kauf wie eine Belohnung wirken. Au\u00dferdem steigert die t\u00e4gliche Verfolgung deines Fortschritts die Vorfreude und macht das Auspacken noch s\u00fc\u00dfer.' },
+    { type: 'title', text: 'Wie du realistische Sparziele f\u00fcr Uhren setzt', level: 3 },
+    { type: 'paragraph', html: 'Beginne mit dem Gesamtpreis inklusive Steuern und Versand. Teile ihn dann durch den Betrag, den du bequem pro Monat zur\u00fccklegen kannst. Als Faustregel gilt: Widme nicht mehr als <strong>10\u201315 % deines verf\u00fcgbaren Einkommens</strong> dem Uhrensparen. Falls der Zeitraum zu lang erscheint, unterteile ihn in kleinere Meilensteine \u2014 oder erkunde g\u00fcnstigere Alternativen in derselben Stilrichtung.' },
+    { type: 'title', text: 'Die Psychologie der Zielverfolgung', level: 3 },
+    { type: 'paragraph', html: 'Visuelle Fortschrittsanzeigen l\u00f6sen Dopaminaussch\u00fcttung aus \u2014 denselben Nervenbotenstoff, der das Sammeln so befriedigend macht. Jedes Mal, wenn du einen neuen Beitrag erfasst und den Fortschrittsring sich f\u00fcllen siehst, verst\u00e4rkst du die Gewohnheit. Deshalb wirken regelm\u00e4\u00dfige kleine Sparbetr\u00e4ge oft besser als unregelm\u00e4\u00dfige Gro\u00dfeinzahlungen \u2014 das Ritual selbst wird Teil des Sammelerlebnisses.' },
+  ],
+  faq: [
+    {
+      question: 'Wie viel sollte ich pro Monat f\u00fcr eine Uhr sparen?',
+      answer: 'Strebe 10\u201315 % deines verf\u00fcgbaren monatlichen Einkommens an. Der Schl\u00fcssel ist Best\u00e4ndigkeit \u2014 selbst 100 $ pro Monat ergeben 1.200 $ pro Jahr. Passe den Betrag an deinen Zeitplan an: k\u00fcrzere Ziele erfordern h\u00f6here monatliche Beitr\u00e4ge.',
+    },
+    {
+      question: 'Sollte ich f\u00fcr eine Uhr auf einmal sparen oder f\u00fcr mehrere?',
+      answer: 'Eine nach der anderen ist meist effektiver. Konzentration schafft Schwung. Sobald du dein erstes Ziel erreichst, \u00fcbertr\u00e4gst du die Disziplin auf das n\u00e4chste. Dieser Planer unterst\u00fctzt jedoch mehrere Ziele, damit du Zeitpl\u00e4ne vergleichen kannst.',
+    },
+    {
+      question: 'Was ist, wenn der Uhrenpreis steigt, w\u00e4hrend ich spare?',
+      answer: 'Gute Frage. \u00dcberpr\u00fcfe den aktuellen Marktpreis alle paar Monate und aktualisiere dein Ziel. Wenn die Preise schnell steigen, erw\u00e4ge, deinen monatlichen Betrag zu erh\u00f6hen oder den Zeitplan zu verk\u00fcrzen, um den aktuellen Preis zu sichern.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Ziel setzen',
+      text: 'Gib den Namen der Uhr und den Gesamtpreis inklusive Steuern und Versand ein.',
+    },
+    {
+      name: 'Sparen verfolgen',
+      text: 'Erfasse, wie viel du bereits gespart hast und wie viel du monatlich zur Seite legen kannst.',
+    },
+    {
+      name: 'Fortschritt \u00fcberwachen',
+      text: 'Beobachte, wie sich der Fortschrittsring f\u00fcllt, w\u00e4hrend du deine Ersparnisse aktualisierst. Passe die monatlichen Betr\u00e4ge jederzeit an.',
+    },
+    {
+      name: 'Feiern',
+      text: 'Wenn der Ring 100 % erreicht, hast du dein Ziel geschafft. Zeit, diese Uhr zu kaufen!',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': 'Wie viel sollte ich pro Monat f\u00fcr eine Uhr sparen?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Strebe 10\u201315 % deines verf\u00fcgbaren monatlichen Einkommens an. Der Schl\u00fcssel ist Best\u00e4ndigkeit \u2014 selbst 100 $ pro Monat ergeben 1.200 $ pro Jahr.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Sollte ich f\u00fcr eine Uhr auf einmal sparen oder f\u00fcr mehrere?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Eine nach der anderen ist meist effektiver. Konzentration schafft Schwung. Sobald du dein erstes Ziel erreichst, \u00fcbertr\u00e4gst du diese Disziplin auf das n\u00e4chste.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Was ist, wenn der Uhrenpreis steigt, w\u00e4hrend ich spare?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': '\u00dcberpr\u00fcfe den aktuellen Marktpreis alle paar Monate und aktualisiere dein Ziel. Erw\u00e4ge, deinen monatlichen Betrag zu erh\u00f6hen, wenn die Preise schnell steigen.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Sparzielplaner f\u00fcr Uhren',
+      'operatingSystem': 'Alle',
+      'applicationCategory': 'FinanceApplication',
+      'browserRequirements': 'Erfordert HTML5. Erfordert JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'Wie man f\u00fcr einen Uhrenkauf spart',
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': 'Ziel setzen',
+          'text': 'Gib den Namen der Uhr und den Gesamtpreis inklusive Steuern und Versand ein.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Sparen verfolgen',
+          'text': 'Erfasse, wie viel du bereits gespart hast und wie viel du monatlich zur Seite legen kannst.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Fortschritt \u00fcberwachen',
+          'text': 'Beobachte, wie sich der Fortschrittsring f\u00fcllt, w\u00e4hrend du deine Ersparnisse aktualisierst.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Feiern',
+          'text': 'Wenn der Ring 100 % erreicht, hast du dein Ziel geschafft. Zeit, diese Uhr zu kaufen!',
+        },
+      ],
+    },
+  ],
+};