@jjlmoya/utils-finance 1.16.0 → 1.18.0

package/src/tool/financialFreedom/financial-freedom-calculator.css

@@ -0,0 +1,346 @@
+.ff-root {
+  --ff-brand: #6366f1;
+  --ff-brand-light: #818cf8;
+  --ff-brand-dark: #4f46e5;
+  --ff-success: #10b981;
+  --ff-warning: #f59e0b;
+  --ff-danger: #ef4444;
+  --ff-bg: var(--surface-1);
+  --ff-card-bg: var(--surface-2);
+  --ff-input-bg: var(--surface-3);
+  --ff-text: var(--text-1);
+  --ff-text-muted: var(--text-2);
+  --ff-border: var(--border-color);
+  
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.theme-dark .ff-root {
+  --ff-input-bg: #1e293b;
+  --ff-card-bg: #0f172a;
+  --ff-border: #334155;
+}
+
+.ff-card {
+  background: var(--ff-card-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--ff-border);
+  border-radius: 2rem;
+  padding: 3rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.ff-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--ff-brand), var(--ff-brand-light));
+}
+
+.ff-calculator-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 4rem;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .ff-calculator-grid {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+}
+
+.ff-input-group {
+  margin-bottom: 2.5rem;
+}
+
+.ff-input-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--ff-text);
+  letter-spacing: -0.01em;
+}
+
+.ff-input-field {
+  width: 100%;
+  background: var(--ff-input-bg);
+  border: 2px solid var(--ff-border);
+  border-radius: 1rem;
+  padding: 1rem 1.25rem;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--ff-text);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 0.5rem;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.ff-input-field:hover {
+  border-color: var(--ff-brand-light);
+}
+
+.ff-input-field:focus {
+  border-color: var(--ff-brand);
+  background: var(--ff-card-bg);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
+  outline: none;
+}
+
+.ff-slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 12px;
+  border-radius: 6px;
+  background: var(--ff-input-bg);
+  border: 1px solid var(--ff-border);
+  outline: none;
+  margin: 1.5rem 0;
+  cursor: pointer;
+}
+
+.ff-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--ff-brand);
+  cursor: pointer;
+  border: 4px solid #fff;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.theme-dark .ff-slider::-webkit-slider-thumb {
+  border-color: #0f172a;
+}
+
+.ff-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  background: var(--ff-brand-light);
+  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
+}
+
+.ff-switch {
+  display: inline-flex;
+  background: var(--ff-input-bg);
+  padding: 0.4rem;
+  border-radius: 0.75rem;
+  gap: 0.25rem;
+  border: 1px solid var(--ff-border);
+}
+
+.ff-switch-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--ff-text-muted);
+  font-size: 0.85rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ff-switch-btn.active {
+  background: var(--ff-brand);
+  color: white;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.ff-results-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  background: var(--ff-input-bg);
+  padding: 2.5rem;
+  border-radius: 2rem;
+  border: 1px solid var(--ff-border);
+}
+
+.ff-time-hero {
+  text-align: center;
+}
+
+.ff-time-label {
+  font-size: 0.85rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--ff-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.ff-time-display {
+  font-size: 4.5rem;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  background: linear-gradient(135deg, var(--ff-brand), var(--ff-brand-light));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 1rem 0;
+}
+
+.ff-time-units {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.ff-unit-card {
+  background: var(--ff-card-bg);
+  padding: 1.25rem;
+  border-radius: 1.25rem;
+  text-align: center;
+  border: 1px solid var(--ff-border);
+}
+
+.ff-unit-val {
+  display: block;
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--ff-text);
+}
+
+.ff-unit-name {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--ff-text-muted);
+  text-transform: uppercase;
+}
+
+.ff-status-indicator {
+  padding: 1.5rem;
+  border-radius: 1.5rem;
+  font-weight: 800;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.status-red {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+.status-yellow {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+.status-green {
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.ff-burn-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.ff-burn-card {
+  padding: 1.5rem;
+}
+
+.ff-burn-val {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--ff-brand);
+}
+
+.ff-what-if-card {
+  margin-top: 1.5rem;
+  padding: 2.5rem;
+  background: linear-gradient(135deg, var(--ff-brand), var(--ff-brand-dark));
+  border-radius: 2rem;
+  color: white;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
+}
+
+.ff-what-if-title {
+  font-size: 1.5rem;
+  font-weight: 900;
+  margin-bottom: 0.5rem;
+}
+
+.ff-what-if-desc {
+  font-size: 1rem;
+  opacity: 0.9;
+  margin-bottom: 1.5rem;
+}
+
+.ff-gain-display {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 1rem 1.5rem;
+  border-radius: 1.25rem;
+  display: inline-block;
+  backdrop-filter: blur(5px);
+}
+
+.ff-currency-select {
+  appearance: none;
+  background-color: var(--ff-input-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1' stroke-width='3' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1.25rem;
+  border: 2px solid var(--ff-border);
+  border-radius: 1rem;
+  color: var(--ff-text);
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 800;
+  padding: 0.8rem 3rem 0.8rem 1.25rem;
+  transition: all 0.2s;
+  width: auto;
+  min-width: 120px;
+}
+
+.ff-currency-select:hover {
+  border-color: var(--ff-brand);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.ff-currency-select:focus {
+  outline: none;
+  border-color: var(--ff-brand);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
+}
+
+.ff-currency-select option {
+  background-color: var(--ff-card-bg);
+  color: var(--ff-text);
+  padding: 1rem;
+}
+
+:global(.theme-dark) .ff-currency-select {
+  background-color: #1e293b;
+  color: #f8fafc;
+  border-color: #334155;
+}
+
+:global(.theme-dark) .ff-currency-select option {
+  background-color: #1e293b;
+  color: #f8fafc;
+}

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

@@ -0,0 +1,123 @@
+import type { FinancialFreedomUI } from '../ui';
+import type { ToolLocaleContent } from '../../../types';
+
+export const ui: FinancialFreedomUI = {
+  labelSavings: 'Gesamte Ersparnisse',
+  labelExpenses: 'Aktuelle Ausgaben',
+  labelMonthly: 'Monatlich',
+  labelYearly: 'Jährlich',
+  labelTimeRemaining: 'Ihre Überlebensdauer',
+  labelYears: 'Jahre',
+  labelMonths: 'Monate',
+  labelDays: 'Tage',
+  labelYearsShort: 'j',
+  labelMonthsShort: 'm',
+  labelDaysShort: 't',
+  labelStatus: 'Finanzieller Sicherheitsstatus',
+  labelRedZone: 'Rote Zone: Hohes Risiko',
+  labelYellowZone: 'Gelbe Zone: Stabil',
+  labelGreenZone: 'Grüne Zone: Finanzielle Freiheit',
+  labelBurnRateDaily: 'Tägliche Ausgabenrate',
+  labelBurnRateMonthly: 'Monatliche Ausgabenrate',
+  labelWhatIf: 'Die 10%-Strategie',
+  labelWhatIfDescription: 'Durch die Reduzierung Ihrer Ausgaben um nur 10% könnten Sie Ihre Überlebensdauer erheblich verlängern.',
+  labelGainTime: 'Zusätzliche Überlebenszeit',
+  labelCopyResult: 'Zusammenfassung kopieren',
+  labelCopied: 'Kopiert!',
+};
+
+const slug = 'finanzielle-freiheit-rechner-uberlebensdauer';
+const title = 'Rechner für Finanzielle Freiheit & Überlebensdauer';
+const description = 'Berechnen Sie genau, wie lange Ihre Ersparnisse reichen werden. Unser Tool hilft Ihnen, Ihre finanzielle Unabhängigkeit zu visualisieren.';
+
+const faq = [
+  {
+    question: 'Was ist eine gute Überlebensdauer?',
+    answer: 'Experten empfehlen mindestens 3 bis 6 Monate. Für echte Freiheit sind 2 Jahre oder mehr ideal.',
+  },
+  {
+    question: 'Beinhaltet dieser Rechner die Inflation?',
+    answer: 'Dieses Tool ist für die sofortige Berechnung der aktuellen liquiden Mittel gegenüber den aktuellen Ausgaben konzipiert.',
+  },
+  {
+    question: 'Was ist die "Burn Rate" in den persönlichen Finanzen?',
+    answer: 'Die Burn Rate ist die Rate, mit der Sie Ihre Ersparnisse verbrauchen, um Ihre Lebenshaltungskosten zu decken.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Ersparnisse eingeben',
+    text: 'Geben Sie Ihr gesamtes verfügbares Bargeld ein.',
+  },
+  {
+    name: 'Ausgaben festlegen',
+    text: 'Geben Sie an, wie viel Sie pro Monat oder Jahr ausgeben.',
+  },
+  {
+    name: 'Sicherheitszone analysieren',
+    text: 'Prüfen Sie, ob Sie sich in der roten, gelben oder grünen Zone befinden.',
+  },
+];
+
+export const content: ToolLocaleContent<FinancialFreedomUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  seo: [
+    {
+      type: 'title',
+      text: 'Was ist die finanzielle Überlebensdauer?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die <strong>Überlebensdauer</strong> (Runway) ist die Zeitspanne, in der Sie ohne neues Einkommen leben können. Es ist die ultimative Kennzahl für finanzielle Freiheit. Im Gegensatz zum Kontostand zeigt sie Ihnen, wie viel "menschliche Zeit" Sie gekauft haben.',
+    },
+  ],
+  faq,
+  bibliography: [
+    {
+      name: 'FIRE-Bewegung Prinzipien',
+      url: 'https://de.wikipedia.org/wiki/FIRE-Bewegung',
+    },
+  ],
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FinancialProduct',
+      name: title,
+      description,
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((f) => ({
+        '@type': 'Question',
+        name: f.question,
+        acceptedAnswer: { '@type': 'Answer', text: f.answer },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((h, i) => ({
+        '@type': 'HowToStep',
+        position: i + 1,
+        name: h.name,
+        text: h.text,
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      applicationCategory: 'FinanceApplication',
+      operatingSystem: 'All',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+  ],
+};

package/src/tool/financialFreedom/i18n/en.ts

@@ -0,0 +1,182 @@
+import type { FinancialFreedomUI } from '../ui';
+import type { ToolLocaleContent } from '../../../types';
+
+export const ui: FinancialFreedomUI = {
+  labelSavings: 'Total Savings',
+  labelExpenses: 'Current Expenses',
+  labelMonthly: 'Monthly',
+  labelYearly: 'Yearly',
+  labelTimeRemaining: 'Your Survival Runway',
+  labelYears: 'Years',
+  labelMonths: 'Months',
+  labelDays: 'Days',
+  labelYearsShort: 'y',
+  labelMonthsShort: 'm',
+  labelDaysShort: 'd',
+  labelStatus: 'Financial Security Status',
+  labelRedZone: 'Red Zone: High Risk',
+  labelYellowZone: 'Yellow Zone: Stable',
+  labelGreenZone: 'Green Zone: Financial Freedom',
+  labelBurnRateDaily: 'Daily Burn Rate',
+  labelBurnRateMonthly: 'Monthly Burn Rate',
+  labelWhatIf: 'The 10% Power Move',
+  labelWhatIfDescription: 'By reducing your expenses by just 10%, you could extend your runway significantly.',
+  labelGainTime: 'Extra Survival Time',
+  labelCopyResult: 'Copy Summary',
+  labelCopied: 'Copied!',
+};
+
+const slug = 'financial-freedom-calculator';
+const title = 'Financial Freedom & Survival Runway Calculator';
+const description = 'Calculate exactly how long your savings will last. Our survival runway tool helps you visualize your financial independence and plan your exit strategy or emergency fund.';
+
+const faq = [
+  {
+    question: 'What is a good survival runway?',
+    answer: 'Financial experts generally recommend a minimum of 3 to 6 months of expenses in an emergency fund. However, for true financial independence, a runway of 2 years or more is considered the "Freedom Zone".',
+  },
+  {
+    question: 'Does this calculator include inflation?',
+    answer: 'This tool is designed for immediate "physics" calculation of current liquid assets against current spending. For multi-decade retirement planning, you should also consult a compound interest calculator.',
+  },
+  {
+    question: 'What is "Burn Rate" in personal finance?',
+    answer: 'Burn rate is the rate at which you spend your savings to cover life expenses. Knowing your daily burn rate helps you internalize the cost of your lifestyle choices.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Enter your total liquid savings',
+    text: 'Input the total amount of cash or easily accessible assets you have available.',
+  },
+  {
+    name: 'Set your recurring expenses',
+    text: 'Enter how much you spend per month or per year to cover your lifestyle.',
+  },
+  {
+    name: 'Analyze your security zone',
+    text: 'Check if you are in the Red, Yellow, or Green zone and see your daily burn rate.',
+  },
+];
+
+export const content: ToolLocaleContent<FinancialFreedomUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  seo: [
+    {
+      type: 'title',
+      text: 'What is a Financial Freedom Runway?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The <strong>survival runway</strong> is the amount of time you can live without any new income. It is the ultimate metric of financial freedom. Unlike a simple bank balance, the runway tells you how much "human time" you have purchased with your savings. Knowing your runway allows you to make bold career moves, start businesses, or simply sleep better at night knowing your safety net.',
+    },
+    {
+      type: 'title',
+      text: 'How to Calculate Your Survival Time',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'To find your runway, we divide your total liquid savings by your periodic expenses. Our calculator goes further by breaking this down into years, months, and days, giving you a tangible sense of your financial weight. We also calculate your <strong>Burn Rate</strong>—the precise amount of money that leaves your pocket every single day.',
+    },
+    {
+      type: 'comparative',
+      columns: 3,
+      items: [
+        {
+          title: 'Red Zone',
+          description: '0-6 months of runway.',
+          points: [
+            'High financial fragility',
+            'Focus on saving',
+            'Avoid new debt',
+            'Emergency mode',
+          ],
+        },
+        {
+          title: 'Yellow Zone',
+          description: '6-24 months of runway.',
+          points: [
+            'Peace of mind',
+            'Weather most storms',
+            'Plan next moves',
+            'Stable safety net',
+          ],
+        },
+        {
+          title: 'Green Zone',
+          description: '24+ months of runway.',
+          highlight: true,
+          points: [
+            'Financial independence',
+            'Total leverage',
+            'Negotiate your life',
+            'The Freedom Zone',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Extending Your Runway: The 10% Rule',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Small changes in spending have an exponential impact on your runway. A 10% reduction in expenses doesn\'t just save 10% of your money; it reduces your daily burn rate, making every dollar you already have last longer. This double-win effect is the secret to reaching financial independence years ahead of schedule.',
+    },
+  ],
+  faq,
+  bibliography: [
+    {
+      name: 'FIRE Movement Principles',
+      url: 'https://en.wikipedia.org/wiki/FIRE_movement',
+    },
+    {
+      name: 'The Emergency Fund Guide',
+      url: 'https://www.investopedia.com/terms/e/emergency_fund.asp',
+    },
+  ],
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FinancialProduct',
+      name: title,
+      description,
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((f) => ({
+        '@type': 'Question',
+        name: f.question,
+        acceptedAnswer: { '@type': 'Answer', text: f.answer },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((h, i) => ({
+        '@type': 'HowToStep',
+        position: i + 1,
+        name: h.name,
+        text: h.text,
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      applicationCategory: 'FinanceApplication',
+      operatingSystem: 'All',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+  ],
+};