Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tomáš's FIRE Mission Control</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02); | |
| transition: all 0.2s ease; | |
| } | |
| .card:hover { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03); | |
| transform: translateY(-2px); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| } | |
| .chart-container { | |
| height: 200px; | |
| position: relative; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item.active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #0ea5e9; | |
| } | |
| .notification-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #ef4444; | |
| position: absolute; | |
| top: 3px; | |
| right: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Main Container --> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Top Navigation --> | |
| <nav class="bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-8"> | |
| <div class="flex items-center"> | |
| <div class="gradient-bg w-8 h-8 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-rocket text-white text-sm"></i> | |
| </div> | |
| <span class="ml-2 text-xl font-bold text-gray-800">FIRE<span class="text-primary-600">Control</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="nav-item active font-medium text-primary-600">Dashboard</a> | |
| <a href="#" class="nav-item font-medium text-gray-500 hover:text-primary-600">Portfolio</a> | |
| <a href="#" class="nav-item font-medium text-gray-500 hover:text-primary-600">Planning</a> | |
| <a href="#" class="nav-item font-medium text-gray-500 hover:text-primary-600">Insights</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-dot"></span> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-9 h-9 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 font-medium">T</div> | |
| <span class="ml-2 hidden md:block font-medium">Tomáš</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="flex-1 px-6 py-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Welcome back, Tomáš</h1> | |
| <p class="text-gray-500 mt-1">Here's your financial independence dashboard</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="flex items-center space-x-2 bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-plus text-sm"></i> | |
| <span>Add Transaction</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Net Worth --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Net Worth</p> | |
| <p class="text-2xl font-bold mt-1">$315,000</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-sm font-medium text-green-500">+5.2k</span> | |
| <span class="text-sm text-gray-500 ml-2">this month</span> | |
| </div> | |
| </div> | |
| <!-- FI Progress --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">FI Progress</p> | |
| <p class="text-2xl font-bold mt-1">26.3%</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center"> | |
| <i class="fas fa-flag text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>$315k</span> | |
| <span>$1.2M</span> | |
| </div> | |
| <div class="progress-bar bg-gray-100"> | |
| <div class="progress-bar bg-blue-500 rounded-full" style="width: 26.3%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Savings Rate --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Savings Rate</p> | |
| <p class="text-2xl font-bold mt-1">48%</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center"> | |
| <i class="fas fa-piggy-bank text-purple-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Current</span> | |
| <span>Target: 50%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-100"> | |
| <div class="progress-bar bg-purple-500 rounded-full" style="width: 96%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Time to FI --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Time to FI</p> | |
| <p class="text-2xl font-bold mt-1">~11 Years</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center"> | |
| <i class="fas fa-hourglass-half text-amber-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-sm text-gray-500">At current rate & 6% growth</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="space-y-6"> | |
| <!-- Income & Savings --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Income & Savings</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">Details</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Monthly Gross Income</p> | |
| <p class="font-medium">$7,800 <span class="text-gray-500">(Main)</span> + $450 <span class="text-gray-500">(Side)</span></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Monthly Net Income</p> | |
| <p class="font-medium">$5,850</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Automated Savings</p> | |
| <p class="font-medium text-green-500">$2,800</p> | |
| <div class="mt-2 space-y-1"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| <span>401k (inc. match)</span> | |
| </div> | |
| <span>$1,600</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| <span>Roth IRA</span> | |
| </div> | |
| <span>$541</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| <span>Taxable Brokerage</span> | |
| </div> | |
| <span>$659</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full border border-primary-100 bg-primary-50 text-primary-600 hover:bg-primary-100 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Adjust Savings Allocation | |
| </button> | |
| </div> | |
| <!-- Expenses --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Monthly Expenses</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">Details</button> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-500">Total Monthly Expenses</p> | |
| <p class="font-medium text-red-500">$3,050</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-amber-500 mr-3"></div> | |
| <span class="text-sm">Housing</span> | |
| </div> | |
| <span class="text-sm font-medium">$1,450</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div> | |
| <span class="text-sm">Food</span> | |
| </div> | |
| <span class="text-sm font-medium">$550</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-3"></div> | |
| <span class="text-sm">Transportation</span> | |
| </div> | |
| <span class="text-sm font-medium">$300</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-3"></div> | |
| <span class="text-sm">Utilities</span> | |
| </div> | |
| <span class="text-sm font-medium">$250</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div> | |
| <span class="text-sm">Discretionary</span> | |
| </div> | |
| <span class="text-sm font-medium">$350</span> | |
| </div> | |
| </div> | |
| <div class="chart-container mt-6 bg-gray-50 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">Spending breakdown chart</p> | |
| </div> | |
| <button class="mt-6 w-full border border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-100 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Review Spending Opportunities | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Middle Column --> | |
| <div class="space-y-6"> | |
| <!-- Investments --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Investment Portfolio</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">Details</button> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-500">Total Invested Assets</p> | |
| <p class="font-medium">$295,000</p> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500"></div> | |
| <span class="text-sm">Stocks (Index Funds)</span> | |
| </div> | |
| <span class="text-sm font-medium">85%</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="text-sm">Bonds</span> | |
| </div> | |
| <span class="text-sm font-medium">10%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-gray-400"></div> | |
| <span class="text-sm">Cash</span> | |
| </div> | |
| <span class="text-sm font-medium">5%</span> | |
| </div> | |
| <div class="chart-container mt-6 bg-gray-50 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">Portfolio performance YTD (+8.2%)</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3 mt-6"> | |
| <button class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| View Holdings | |
| </button> | |
| <button class="w-full border border-primary-200 text-primary-600 hover:bg-primary-50 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Rebalance | |
| </button> | |
| </div> | |
| </div> | |
| <!-- FI Plan --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">FI / Retirement Plan</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">Details</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Target FI Number</p> | |
| <p class="font-medium">$1,200,000</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Desired Annual Retirement Income</p> | |
| <p class="font-medium">$48,000 <span class="text-gray-500">(4% SWR)</span></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Current Projected Retirement Age</p> | |
| <p class="font-medium">49</p> | |
| </div> | |
| </div> | |
| <div class="chart-container mt-6 bg-gray-50 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">FI projection timeline</p> | |
| </div> | |
| <button class="mt-6 w-full border border-purple-100 bg-purple-50 text-purple-600 hover:bg-purple-100 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Run Scenarios | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Notifications --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Notifications</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-green-50 rounded-lg border border-green-100"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-trophy text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-green-800">Milestone Achieved!</p> | |
| <p class="text-sm text-green-600 mt-1">Net worth crossed $300k this month. Keep it up!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-amber-50 rounded-lg border border-amber-100"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-3"> | |
| <i class="fas fa-exclamation-circle text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-amber-800">IRA Contribution</p> | |
| <p class="text-sm text-amber-600 mt-1">You've contributed $3,250 of $7,000 limit for 2024.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg border border-blue-100"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3"> | |
| <i class="fas fa-lightbulb text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-blue-800">Savings Opportunity</p> | |
| <p class="text-sm text-blue-600 mt-1">Consider increasing taxable brokerage investment by $100/month.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Maximize IRA Contribution | |
| </button> | |
| </div> | |
| <!-- Learning --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">FIRE Insights</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <p class="font-medium">The Power of Compounding</p> | |
| <p class="text-sm text-gray-500 mt-1">How your money grows exponentially over time.</p> | |
| </div> | |
| <div class="p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <p class="font-medium">Understanding Market Volatility</p> | |
| <p class="text-sm text-gray-500 mt-1">Why staying the course during downturns is key.</p> | |
| </div> | |
| <div class="p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer"> | |
| <p class="font-medium">Tax Optimization Strategies</p> | |
| <p class="text-sm text-gray-500 mt-1">Learn about Roth conversion ladders for early retirees.</p> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Explore More Topics | |
| </button> | |
| </div> | |
| <!-- Debt --> | |
| <div class="card p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Debt Overview</h2> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">Details</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Mortgage</p> | |
| <p class="font-medium">$185,000 <span class="text-gray-500">@ 3.25%</span></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Student Loans</p> | |
| <p class="font-medium">$12,000 <span class="text-gray-500">@ 4.5%</span></p> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full border border-red-100 bg-red-50 text-red-600 hover:bg-red-100 font-medium py-2 px-4 rounded-lg transition duration-150"> | |
| Debt Paydown Simulator | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="mt-12 pt-6 border-t border-gray-100 text-center text-sm text-gray-500"> | |
| <p>FIREControl Dashboard • Last updated: Today at 2:45 PM</p> | |
| <p class="mt-1">This is a prototype. Data is illustrative.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple animation for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach((card, index) => { | |
| // Add slight staggered animation | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(10px)'; | |
| card.style.transition = 'all 0.3s ease ' + (index * 0.05) + 's'; | |
| setTimeout(() => { | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/firecontrol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |