@jjlmoya/utils-finance 1.12.0 → 1.13.0

package/src/tool/fireCalculator/component.astro

@@ -184,340 +184,6 @@ const { ui } = Astro.props;
     </div>
 </div>
 
-<style>
-:root {
-    --fire-primary: #10b981;
-    --fire-primary-hover: #059669;
-    --fire-secondary: #3b82f6;
-    --fire-accent: #f59e0b;
-    --fire-bg: rgba(255, 255, 255, 0.7);
-    --fire-card-bg: rgba(255, 255, 255, 0.8);
-    --fire-text: #1f2937;
-    --fire-text-muted: #6b7280;
-    --fire-border: rgba(16, 185, 129, 0.2);
-    --fire-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
-}
-
-:global(.theme-dark) {
-    --fire-bg: rgba(17, 24, 39, 0.7);
-    --fire-card-bg: rgba(31, 41, 55, 0.8);
-    --fire-text: #f3f4f6;
-    --fire-text-muted: #9ca3af;
-    --fire-border: rgba(16, 185, 129, 0.3);
-}
-
-:global([data-theme='dark']) {
-    --fire-bg: rgba(17, 24, 39, 0.7);
-    --fire-card-bg: rgba(31, 41, 55, 0.8);
-    --fire-text: #f3f4f6;
-    --fire-text-muted: #9ca3af;
-    --fire-border: rgba(16, 185, 129, 0.3);
-}
-
-.fire-container {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 2rem;
-    border-radius: 24px;
-    background: var(--fire-bg);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid var(--fire-border);
-    box-shadow: var(--fire-shadow);
-    color: var(--fire-text);
-}
-
-.fire-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-}
-
-.fire-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.fire-input-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.fire-label-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.fire-label {
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-
-.fire-value-display {
-    font-weight: 700;
-    color: var(--fire-primary);
-    background: var(--fire-card-bg);
-    padding: 2px 8px;
-    border-radius: 6px;
-    font-size: 1.1rem;
-}
-
-.fire-range {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 6px;
-    background: var(--fire-border);
-    border-radius: 5px;
-    outline: none;
-}
-
-.fire-range::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    background: var(--fire-primary);
-    cursor: pointer;
-    border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
-}
-
-.fire-range::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: var(--fire-primary);
-    cursor: pointer;
-    border-radius: 50%;
-    border: none;
-    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
-}
-
-.fire-help {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    cursor: help;
-    color: var(--fire-secondary);
-    position: relative;
-}
-
-.fire-tooltip {
-    display: none;
-    position: absolute;
-    bottom: 125%;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--fire-card-bg);
-    border: 1px solid var(--fire-border);
-    color: var(--fire-text-muted);
-    padding: 8px 12px;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    white-space: nowrap;
-    z-index: 10;
-    box-shadow: var(--fire-shadow);
-}
-
-.fire-help:hover .fire-tooltip {
-    display: block;
-}
-
-.fire-checklist {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.fire-checklist h3 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 700;
-}
-
-.fire-milestones {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.milestone-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.milestone-header {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.9rem;
-    font-weight: 600;
-}
-
-.milestone-item.lean .milestone-bar-fill {
-    background: linear-gradient(90deg, #ef4444, #f97316);
-}
-
-.milestone-item.barista .milestone-bar-fill {
-    background: linear-gradient(90deg, #f59e0b, #f59e0b);
-}
-
-.milestone-item.fat .milestone-bar-fill {
-    background: linear-gradient(90deg, #10b981, #14b8a6);
-}
-
-.milestone-bar-bg {
-    width: 100%;
-    height: 10px;
-    background: var(--fire-border);
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.milestone-bar-fill {
-    height: 100%;
-    transition: width 0.3s ease;
-    border-radius: 5px;
-}
-
-.fire-result-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.fire-main-result {
-    text-align: center;
-    padding: 1.5rem;
-    background: var(--fire-card-bg);
-    border-radius: 12px;
-    border: 1px solid var(--fire-border);
-}
-
-.fire-magic-number-label {
-    display: block;
-    font-size: 0.9rem;
-    color: var(--fire-text-muted);
-    margin-bottom: 0.5rem;
-}
-
-.fire-magic-number {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: var(--fire-primary);
-    margin-bottom: 0.5rem;
-}
-
-.fire-countdown {
-    font-size: 0.95rem;
-    color: var(--fire-text-muted);
-}
-
-.fire-chart-container {
-    width: 100%;
-    height: 200px;
-    background: var(--fire-card-bg);
-    border-radius: 12px;
-    border: 1px solid var(--fire-border);
-    padding: 1rem;
-    box-sizing: border-box;
-}
-
-.fire-line-svg {
-    width: 100%;
-    height: 100%;
-}
-
-.fire-path {
-    fill: none;
-    stroke: var(--fire-primary);
-    stroke-width: 2;
-}
-
-.fire-path-savings {
-    fill: rgba(16, 185, 129, 0.1);
-}
-
-.checklist-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.checklist-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-}
-
-.checklist-item input[type="checkbox"] {
-    cursor: pointer;
-    accent-color: var(--fire-primary);
-}
-
-.checklist-feedback {
-    display: none;
-    padding: 0.75rem;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.3);
-    border-radius: 8px;
-    color: var(--fire-primary);
-    font-size: 0.85rem;
-    font-weight: 600;
-}
-
-.checklist-feedback.visible {
-    display: block;
-}
-
-.fire-actions {
-    display: flex;
-    gap: 1rem;
-}
-
-.fire-btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    transition: all 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.fire-btn-primary {
-    background: var(--fire-primary);
-    color: white;
-}
-
-.fire-btn-primary:hover {
-    background: var(--fire-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
-}
-
-@media (max-width: 768px) {
-    .fire-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .fire-container {
-        padding: 1rem;
-    }
-
-    .checklist-grid {
-        grid-template-columns: 1fr;
-    }
-}
-</style>
 
 <script>
     import { FIRELogic } from './logic';

package/src/tool/fireCalculator/four-percent-rule-fire-calculator.css

@@ -0,0 +1,332 @@
+:root {
+    --fire-primary: #10b981;
+    --fire-primary-hover: #059669;
+    --fire-secondary: #3b82f6;
+    --fire-accent: #f59e0b;
+    --fire-bg: rgba(255, 255, 255, 0.7);
+    --fire-card-bg: rgba(255, 255, 255, 0.8);
+    --fire-text: #1f2937;
+    --fire-text-muted: #6b7280;
+    --fire-border: rgba(16, 185, 129, 0.2);
+    --fire-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+}
+
+:global(.theme-dark) {
+    --fire-bg: rgba(17, 24, 39, 0.7);
+    --fire-card-bg: rgba(31, 41, 55, 0.8);
+    --fire-text: #f3f4f6;
+    --fire-text-muted: #9ca3af;
+    --fire-border: rgba(16, 185, 129, 0.3);
+}
+
+:global([data-theme='dark']) {
+    --fire-bg: rgba(17, 24, 39, 0.7);
+    --fire-card-bg: rgba(31, 41, 55, 0.8);
+    --fire-text: #f3f4f6;
+    --fire-text-muted: #9ca3af;
+    --fire-border: rgba(16, 185, 129, 0.3);
+}
+
+.fire-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 2rem;
+    border-radius: 24px;
+    background: var(--fire-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--fire-border);
+    box-shadow: var(--fire-shadow);
+    color: var(--fire-text);
+}
+
+.fire-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.fire-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.fire-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.fire-label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.fire-label {
+    font-weight: 600;
+    font-size: 0.95rem;
+}
+
+.fire-value-display {
+    font-weight: 700;
+    color: var(--fire-primary);
+    background: var(--fire-card-bg);
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: 1.1rem;
+}
+
+.fire-range {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 6px;
+    background: var(--fire-border);
+    border-radius: 5px;
+    outline: none;
+}
+
+.fire-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: var(--fire-primary);
+    cursor: pointer;
+    border-radius: 50%;
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
+}
+
+.fire-range::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: var(--fire-primary);
+    cursor: pointer;
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
+}
+
+.fire-help {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: help;
+    color: var(--fire-secondary);
+    position: relative;
+}
+
+.fire-tooltip {
+    display: none;
+    position: absolute;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--fire-card-bg);
+    border: 1px solid var(--fire-border);
+    color: var(--fire-text-muted);
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    z-index: 10;
+    box-shadow: var(--fire-shadow);
+}
+
+.fire-help:hover .fire-tooltip {
+    display: block;
+}
+
+.fire-checklist {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.fire-checklist h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+.fire-milestones {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.milestone-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.milestone-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.milestone-item.lean .milestone-bar-fill {
+    background: linear-gradient(90deg, #ef4444, #f97316);
+}
+
+.milestone-item.barista .milestone-bar-fill {
+    background: linear-gradient(90deg, #f59e0b, #f59e0b);
+}
+
+.milestone-item.fat .milestone-bar-fill {
+    background: linear-gradient(90deg, #10b981, #14b8a6);
+}
+
+.milestone-bar-bg {
+    width: 100%;
+    height: 10px;
+    background: var(--fire-border);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.milestone-bar-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+    border-radius: 5px;
+}
+
+.fire-result-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.fire-main-result {
+    text-align: center;
+    padding: 1.5rem;
+    background: var(--fire-card-bg);
+    border-radius: 12px;
+    border: 1px solid var(--fire-border);
+}
+
+.fire-magic-number-label {
+    display: block;
+    font-size: 0.9rem;
+    color: var(--fire-text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.fire-magic-number {
+    font-size: 2.5rem;
+    font-weight: 900;
+    color: var(--fire-primary);
+    margin-bottom: 0.5rem;
+}
+
+.fire-countdown {
+    font-size: 0.95rem;
+    color: var(--fire-text-muted);
+}
+
+.fire-chart-container {
+    width: 100%;
+    height: 200px;
+    background: var(--fire-card-bg);
+    border-radius: 12px;
+    border: 1px solid var(--fire-border);
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
+.fire-line-svg {
+    width: 100%;
+    height: 100%;
+}
+
+.fire-path {
+    fill: none;
+    stroke: var(--fire-primary);
+    stroke-width: 2;
+}
+
+.fire-path-savings {
+    fill: rgba(16, 185, 129, 0.1);
+}
+
+.checklist-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.checklist-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.checklist-item input[type="checkbox"] {
+    cursor: pointer;
+    accent-color: var(--fire-primary);
+}
+
+.checklist-feedback {
+    display: none;
+    padding: 0.75rem;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: 8px;
+    color: var(--fire-primary);
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.checklist-feedback.visible {
+    display: block;
+}
+
+.fire-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.fire-btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.fire-btn-primary {
+    background: var(--fire-primary);
+    color: white;
+}
+
+.fire-btn-primary:hover {
+    background: var(--fire-primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+@media (max-width: 768px) {
+    .fire-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .fire-container {
+        padding: 1rem;
+    }
+
+    .checklist-grid {
+        grid-template-columns: 1fr;
+    }
+}