Hugging Face's logo

Spaces:
LukasBe
/
fire-mission-control
Running

App Files Community
fire-mission-control / index.html
LukasBe's picture
LukasBe
Add 3 files
f029fd1 verified
raw
history blame contribute delete
67.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <style>
 .gauge {
 --percentage: 0;
 --fill: #4ade80;
 width: 150px;
 height: 75px;
 position: relative;
 overflow: hidden;
 }
.gauge::before {
 content: "";
 position: absolute;
 width: 150px;
 height: 75px;
 border: 15px solid #e5e7eb;
 border-bottom: none;
 border-radius: 75px 75px 0 0;
 box-sizing: border-box;
 }
.gauge::after {
 content: "";
 position: absolute;
 width: 150px;
 height: 75px;
 border: 15px solid var(--fill);
 border-bottom: none;
 border-radius: 75px 75px 0 0;
 box-sizing: border-box;
 left: 0;
 top: 100%;
 transform-origin: 50% 0;
 transform: rotate(0.5turn);
 animation: fill-gauge 1.5s ease-out forwards;
 animation-delay: 0.5s;
 }
@keyframes fill-gauge {
 to { transform: rotate(calc(0.5turn + (1turn * var(--percentage) / 100))); }
 }
.progress-ring {
 --percentage: 0;
 --primary: #3b82f6;
 --secondary: #e5e7eb;
 --size: 120px;
 width: var(--size);
 height: var(--size);
 border-radius: 50%;
 display: grid;
 place-items: center;
 background:
radial-gradient(closest-side, white 85%, transparent 86% 100%),
 conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
 }
.progress-ring::before {
 content: attr(data-progress) "%";
 font-weight: bold;
 font-size: 1.2rem;
 }
.flip-card {
 perspective: 1000px;
 }
.flip-card-inner {
 transition: transform 0.6s;
 transform-style: preserve-3d;
 }
.flip-card:hover .flip-card-inner {
 transform: rotateY(180deg);
 }
.flip-card-front, .flip-card-back {
 backface-visibility: hidden;
 }
.flip-card-back {
 transform: rotateY(180deg);
 }
.badge {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.glow {
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <div class="container mx-auto px-4 py-6">
 <!-- Header -->
 <header class="bg-white rounded-xl shadow-md p-6 mb-6 flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center mb-4 md:mb-0">
 <div class="bg-blue-500 text-white p-3 rounded-lg mr-4">
 <i class="fas fa-rocket text-2xl"></i>
 </div>
 <div>
 <h1 class="text-2xl font-bold text-gray-800">FIRE Mission Control</h1>
 <p class="text-gray-600">Your dashboard to financial independence</p>
 </div>
 </div>
 <div class="flex items-center">
 <div class="mr-4">
 <div class="text-sm text-gray-500">Today is</div>
 <div class="font-semibold" id="current-date">June 15, 2023</div>
 </div>
 <div class="relative">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full border-2 border-blue-500">
 <span class="absolute bottom-0 right-0 bg-green-500 text-white text-xs font-bold px-1 rounded-full">✓</span>
 </div>
 </div>
 </header>
<!-- Welcome Section -->
 <section class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-xl shadow-md p-6 mb-6 text-white">
 <h2 class="text-2xl font-bold mb-2">Good Morning, <span id="user-name">Alex</span>!</h2>
 <p class="mb-4">You are <span class="font-bold text-yellow-300" id="fi-percentage">42%</span> of the way to Financial Independence</p>
 <div class="flex flex-wrap items-center justify-between">
 <div class="flex items-center mb-4 md:mb-0">
 <div class="progress-ring mr-4" data-progress="42" style="--percentage:42; --primary:#fbbf24; --size:80px;"></div>
 <div>
 <div class="text-sm">FI Progress</div>
 <div class="text-xl font-bold">$425,000 / $1,000,000</div>
 <div class="text-xs">Target based on 4% SWR</div>
 </div>
 </div>
 <div class="bg-white bg-opacity-20 rounded-lg p-3 text-center">
 <div class="text-sm">Days of Freedom Earned</div>
 <div class="text-2xl font-bold">1,325</div>
 <div class="text-xs">Based on $40/day spending</div>
 </div>
 <div class="bg-white bg-opacity-20 rounded-lg p-3 text-center">
 <div class="text-sm">Time to FI</div>
 <div class="text-2xl font-bold">8.5 years</div>
 <div class="text-xs">At current savings rate</div>
 </div>
 <div class="bg-white bg-opacity-20 rounded-lg p-3 text-center">
 <div class="text-sm">Savings Rate</div>
 <div class="text-2xl font-bold">45%</div>
 <div class="text-xs">Target: 50%</div>
 </div>
 </div>
 </section>
<!-- Alerts Section -->
 <section class="bg-white rounded-xl shadow-md p-6 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-xl font-bold text-gray-800">Alerts & Notifications</h2>
 <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">3 New</span>
 </div>
 <div class="space-y-3">
 <div class="flex items-start p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
 <div class="mr-3 text-yellow-500">
 <i class="fas fa-exclamation-circle"></i>
 </div>
 <div>
 <div class="font-medium text-yellow-800">Market down 2.5% this week</div>
 <div class="text-sm text-yellow-700">Historical data suggests staying the course. Consider tax-loss harvesting opportunities.</div>
 </div>
 </div>
 <div class="flex items-start p-3 bg-green-50 rounded-lg border-l-4 border-green-400">
 <div class="mr-3 text-green-500">
 <i class="fas fa-check-circle"></i>
 </div>
 <div>
 <div class="font-medium text-green-800">$100k invested milestone reached!</div>
 <div class="text-sm text-green-700">Compound interest is now working harder for you. Keep it up!</div>
 </div>
 </div>
 <div class="flex items-start p-3 bg-blue-50 rounded-lg border-l-4 border-blue-400">
 <div class="mr-3 text-blue-500">
 <i class="fas fa-info-circle"></i>
 </div>
 <div>
 <div class="font-medium text-blue-800">IRA contribution limit reminder</div>
 <div class="text-sm text-blue-700">You've contributed $3,000 of $6,500 limit for 2023.</div>
 </div>
 </div>
 </div>
 </section>
<!-- Main Dashboard Tabs -->
 <div class="mb-6">
 <ul class="flex flex-wrap text-sm font-medium text-center border-b border-gray-200" id="dashboard-tabs">
 <li class="mr-2">
 <button class="inline-block p-4 rounded-t-lg border-b-2 border-blue-600 text-blue-600 active" data-tab="income">Income & Savings</button>
 </li>
 <li class="mr-2">
 <button class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" data-tab="expenses">Expenses</button>
 </li>
 <li class="mr-2">
 <button class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" data-tab="investments">Investments</button>
 </li>
 <li class="mr-2">
 <button class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" data-tab="retirement">Retirement</button>
 </li>
 <li class="mr-2">
 <button class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" data-tab="automation">Automation</button>
 </li>
 </ul>
 </div>
<!-- Tab Content -->
 <div id="tab-content">
 <!-- Income & Savings Tab -->
 <div class="tab-content active" id="income-tab">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- Income Streams -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Income Streams</h3>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-gray-700">Primary Job</span>
 <span class="text-sm font-medium">$85,000</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>
 </div>
 </div>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-gray-700">Side Hustle</span>
 <span class="text-sm font-medium">$12,000</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-green-500 h-2.5 rounded-full" style="width: 12%"></div>
 </div>
 </div>
 <div class="mb-4">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-gray-700">Investment Income</span>
 <span class="text-sm font-medium">$3,000</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-purple-500 h-2.5 rounded-full" style="width: 3%"></div>
 </div>
 </div>
 <div class="mt-6">
 <h4 class="text-md font-semibold mb-2">What-if Scenarios</h4>
 <div class="flex space-x-2">
 <button class="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200">+5% Salary</button>
 <button class="px-3 py-1 text-sm bg-green-100 text-green-800 rounded-full hover:bg-green-200">New Side Hustle</button>
 <button class="px-3 py-1 text-sm bg-purple-100 text-purple-800 rounded-full hover:bg-purple-200">Dividend Growth</button>
 </div>
 </div>
 </div>
<!-- Savings Optimization -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Savings Optimization</h3>
 <div class="mb-6">
 <div class="flex justify-between items-center mb-2">
 <span class="font-medium">Employer Match</span>
 <span class="text-sm bg-green-100 text-green-800 px-2 py-0.5 rounded-full">Maximized</span>
 </div>
 <p class="text-sm text-gray-600 mb-2">You're contributing 6% to get the full 3% match.</p>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
 </div>
 </div>
 <div class="mb-6">
 <h4 class="font-medium mb-2">Automated Savings</h4>
 <div class="space-y-3">
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-piggy-bank text-blue-600"></i>
 </div>
 <span class="text-sm">401(k)</span>
 </div>
 <span class="text-sm font-medium">$1,062/mo</span>
 </div>
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-landmark text-green-600"></i>
 </div>
 <span class="text-sm">Roth IRA</span>
 </div>
 <span class="text-sm font-medium">$541/mo</span>
 </div>
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-chart-line text-purple-600"></i>
 </div>
 <span class="text-sm">Taxable Brokerage</span>
 </div>
 <span class="text-sm font-medium">$750/mo</span>
 </div>
 </div>
 </div>
 <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
 <i class="fas fa-arrow-up mr-2"></i> Increase Savings Rate to 50%
 </button>
 </div>
 </div>
<div class="bg-white rounded-xl shadow-md p-6 mb-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Pay Yourself First Efficiency</h3>
 <div class="flex flex-col md:flex-row items-center">
 <div class="gauge mb-4 md:mb-0 md:mr-6" style="--percentage:90; --fill:#3b82f6;"></div>
 <div class="flex-1">
 <div class="mb-2">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-gray-700">Automated Savings</span>
 <span class="text-sm font-medium">$2,353/mo</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 90%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-gray-700">Manual Savings</span>
 <span class="text-sm font-medium">$250/mo</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-gray-400 h-2.5 rounded-full" style="width: 10%"></div>
 </div>
 </div>
 <p class="text-sm text-gray-600 mt-2">90% of your savings are automated - excellent! Try to reach 100%.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Expenses Tab -->
 <div class="tab-content" id="expenses-tab">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- Spending Analysis -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Spending Analysis</h3>
 <div class="h-64">
 <canvas id="spendingChart"></canvas>
 </div>
 <div class="mt-4 grid grid-cols-2 gap-2">
 <div class="bg-blue-50 p-3 rounded-lg">
 <div class="text-sm text-blue-800">Biggest Category</div>
 <div class="font-bold">Housing</div>
 <div class="text-xs">$1,500/mo (30%)</div>
 </div>
 <div class="bg-green-50 p-3 rounded-lg">
 <div class="text-sm text-green-800">Most Improved</div>
 <div class="font-bold">Dining Out</div>
 <div class="text-xs">↓15% from last month</div>
 </div>
 </div>
 </div>
<!-- Latte Factor -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Latte Factor</h3>
 <div class="mb-4">
 <div class="flex justify-between items-center mb-2">
 <div class="flex items-center">
 <i class="fas fa-coffee text-brown-500 mr-2"></i>
 <span>Daily Coffee</span>
 </div>
 <span class="font-medium">$5/day</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">Invested instead, this could grow to <span class="font-bold">$42,000</span> in 20 years</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 60%"></div>
 </div>
 </div>
 <div class="mb-4">
 <div class="flex justify-between items-center mb-2">
 <div class="flex items-center">
 <i class="fas fa-utensils text-red-500 mr-2"></i>
 <span>Lunch Out</span>
 </div>
 <span class="font-medium">$12/day</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">Invested instead, this could grow to <span class="font-bold">$101,000</span> in 20 years</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-red-500 h-2.5 rounded-full" style="width: 75%"></div>
 </div>
 </div>
 <div class="mb-4">
 <div class="flex justify-between items-center mb-2">
 <div class="flex items-center">
 <i class="fas fa-tv text-purple-500 mr-2"></i>
 <span>Streaming Services</span>
 </div>
 <span class="font-medium">$45/mo</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">Invested instead, this could grow to <span class="font-bold">$23,000</span> in 20 years</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-purple-500 h-2.5 rounded-full" style="width: 40%"></div>
 </div>
 </div>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
 <i class="fas fa-lightbulb mr-2"></i> Show Me More Opportunities
 </button>
 </div>
 </div>
<!-- Debt Management -->
 <div class="bg-white rounded-xl shadow-md p-6 mb-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Debt Management</h3>
 <div class="overflow-x-auto">
 <table class="w-full text-sm text-left text-gray-500">
 <thead class="text-xs text-gray-700 uppercase bg-gray-50">
 <tr>
 <th class="px-6 py-3">Debt Type</th>
 <th class="px-6 py-3">Balance</th>
 <th class="px-6 py-3">Interest Rate</th>
 <th class="px-6 py-3">Minimum Payment</th>
 <th class="px-6 py-3">Payoff Date</th>
 <th class="px-6 py-3">Action</th>
 </tr>
 </thead>
 <tbody>
 <tr class="bg-white border-b">
 <td class="px-6 py-4 font-medium text-gray-900">Mortgage</td>
 <td class="px-6 py-4">$245,000</td>
 <td class="px-6 py-4">3.25%</td>
 <td class="px-6 py-4">$1,350</td>
 <td class="px-6 py-4">2043</td>
 <td class="px-6 py-4">
 <button class="text-blue-600 hover:text-blue-800">Refi Check</button>
 </td>
 </tr>
 <tr class="bg-white border-b">
 <td class="px-6 py-4 font-medium text-gray-900">Student Loan</td>
 <td class="px-6 py-4">$22,500</td>
 <td class="px-6 py-4">5.8%</td>
 <td class="px-6 py-4">$250</td>
 <td class="px-6 py-4">2030</td>
 <td class="px-6 py-4">
 <button class="text-blue-600 hover:text-blue-800">Pay Extra</button>
 </td>
 </tr>
 <tr class="bg-white border-b">
 <td class="px-6 py-4 font-medium text-gray-900">Auto Loan</td>
 <td class="px-6 py-4">$8,750</td>
 <td class="px-6 py-4">4.5%</td>
 <td class="px-6 py-4">$275</td>
 <td class="px-6 py-4">2027</td>
 <td class="px-6 py-4">
 <button class="text-blue-600 hover:text-blue-800">Payoff Plan</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="mt-4 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
 <button class="flex-1 bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded-lg">
 <i class="fas fa-snowflake mr-2"></i> Snowball Method
 </button>
 <button class="flex-1 bg-green-100 hover:bg-green-200 text-green-800 py-2 px-4 rounded-lg">
 <i class="fas fa-mountain mr-2"></i> Avalanche Method
 </button>
 <button class="flex-1 bg-purple-100 hover:bg-purple-200 text-purple-800 py-2 px-4 rounded-lg">
 <i class="fas fa-calculator mr-2"></i> Compare Strategies
 </button>
 </div>
 </div>
 </div>
<!-- Investments Tab -->
 <div class="tab-content" id="investments-tab">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- Portfolio Overview -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Portfolio Overview</h3>
 <div class="h-64 mb-4">
 <canvas id="allocationChart"></canvas>
 </div>
 <div class="grid grid-cols-2 gap-2">
 <div class="bg-blue-50 p-3 rounded-lg">
 <div class="text-sm text-blue-800">Total Invested</div>
 <div class="font-bold">$425,000</div>
 </div>
 <div class="bg-green-50 p-3 rounded-lg">
 <div class="text-sm text-green-800">YTD Return</div>
 <div class="font-bold">8.2%</div>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg">
 <div class="text-sm text-purple-800">Dividends</div>
 <div class="font-bold">$3,200/yr</div>
 </div>
 <div class="bg-yellow-50 p-3 rounded-lg">
 <div class="text-sm text-yellow-800">Expense Ratio</div>
 <div class="font-bold">0.12%</div>
 </div>
 </div>
 </div>
<!-- Performance -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Investment Performance</h3>
 <div class="h-64 mb-4">
 <canvas id="performanceChart"></canvas>
 </div>
 <div class="overflow-x-auto">
 <table class="w-full text-sm text-left text-gray-500">
 <thead class="text-xs text-gray-700 uppercase bg-gray-50">
 <tr>
 <th class="px-6 py-3">Period</th>
 <th class="px-6 py-3">Your Return</th>
 <th class="px-6 py-3">S&P 500</th>
 <th class="px-6 py-3">Difference</th>
 </tr>
 </thead>
 <tbody>
 <tr class="bg-white border-b">
 <td class="px-6 py-4">YTD</td>
 <td class="px-6 py-4">8.2%</td>
 <td class="px-6 py-4">9.5%</td>
 <td class="px-6 py-4 text-red-500">-1.3%</td>
 </tr>
 <tr class="bg-white border-b">
 <td class="px-6 py-4">1 Year</td>
 <td class="px-6 py-4">12.1%</td>
 <td class="px-6 py-4">14.2%</td>
 <td class="px-6 py-4 text-red-500">-2.1%</td>
 </tr>
 <tr class="bg-white border-b">
 <td class="px-6 py-4">3 Year</td>
 <td class="px-6 py-4">7.8%</td>
 <td class="px-6 py-4">8.3%</td>
 <td class="px-6 py-4 text-red-500">-0.5%</td>
 </tr>
 <tr class="bg-white border-b">
 <td class="px-6 py-4">5 Year</td>
 <td class="px-6 py-4">9.2%</td>
 <td class="px-6 py-4">9.7%</td>
 <td class="px-6 py-4 text-red-500">-0.5%</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
<!-- Tax Optimization -->
 <div class="bg-white rounded-xl shadow-md p-6 mb-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Tax Optimization</h3>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
 <div class="bg-blue-50 p-4 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <div class="font-medium">401(k) Contributions</div>
 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">$12,500</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">$20,500 limit for 2023</div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-blue-600 h-2 rounded-full" style="width: 61%"></div>
 </div>
 </div>
 <div class="bg-green-50 p-4 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <div class="font-medium">Roth IRA Contributions</div>
 <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">$3,000</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">$6,500 limit for 2023</div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-green-600 h-2 rounded-full" style="width: 46%"></div>
 </div>
 </div>
 <div class="bg-purple-50 p-4 rounded-lg">
 <div class="flex justify-between items-start mb-2">
 <div class="font-medium">HSA Contributions</div>
 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">$1,200</span>
 </div>
 <div class="text-sm text-gray-600 mb-2">$3,650 limit for 2023</div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-purple-600 h-2 rounded-full" style="width: 33%"></div>
 </div>
 </div>
 </div>
 <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
 <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg">
 <i class="fas fa-search-dollar mr-2"></i> Tax-Loss Harvesting
 </button>
 <button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg">
 <i class="fas fa-balance-scale mr-2"></i> Roth vs Traditional
 </button>
 <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg">
 <i class="fas fa-project-diagram mr-2"></i> Withdrawal Strategy
 </button>
 </div>
 </div>
 </div>
<!-- Retirement Tab -->
 <div class="tab-content" id="retirement-tab">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- FI Number Calculator -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">FI Number Calculator</h3>
 <div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Annual Retirement Spending</label>
 <div class="relative">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <span class="text-gray-500">$</span>
 </div>
 <input type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-7 p-2.5" value="40000">
 </div>
 </div>
 <div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Safe Withdrawal Rate</label>
 <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
 <option selected>4% (Traditional)</option>
 <option>3.5% (Conservative)</option>
 <option>3% (Very Conservative)</option>
 <option>5% (Aggressive)</option>
 </select>
 </div>
 <div class="bg-blue-50 p-4 rounded-lg mb-4">
 <div class="text-sm text-blue-800 mb-1">Your FI Number</div>
 <div class="text-2xl font-bold">$1,000,000</div>
 <div class="text-xs text-blue-700">Based on $40k spending at 4% SWR</div>
 </div>
 <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg">
 <i class="fas fa-calculator mr-2"></i> Recalculate
 </button>
 </div>
<!-- SWR Modeler -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Safe Withdrawal Rate Modeler</h3>
 <div class="h-64 mb-4">
 <canvas id="swrChart"></canvas>
 </div>
 <div class="grid grid-cols-2 gap-2">
 <div class="bg-green-50 p-3 rounded-lg">
 <div class="text-sm text-green-800">4% SWR Success</div>
 <div class="font-bold">95%</div>
 <div class="text-xs">Historical 30-year periods</div>
 </div>
 <div class="bg-yellow-50 p-3 rounded-lg">
 <div class="text-sm text-yellow-800">3.5% SWR Success</div>
 <div class="font-bold">98%</div>
 <div class="text-xs">Historical 30-year periods</div>
 </div>
 <div class="bg-blue-50 p-3 rounded-lg">
 <div class="text-sm text-blue-800">Your Current SWR</div>
 <div class="font-bold">3.8%</div>
 <div class="text-xs">$40k / $1.05M</div>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg">
 <div class="text-sm text-purple-800">Variable SWR</div>
 <div class="font-bold">3-5%</div>
 <div class="text-xs">Flexible spending</div>
 </div>
 </div>
 </div>
 </div>
<!-- Healthcare & One More Year -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- Healthcare Estimator -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Healthcare Cost Estimator</h3>
 <div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Retirement Age</label>
 <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
 <option selected>50</option>
 <option>55</option>
 <option>60</option>
 <option>65</option>
 </select>
 </div>
 <div class="bg-red-50 p-4 rounded-lg mb-4">
 <div class="text-sm text-red-800 mb-1">Estimated Annual Cost</div>
 <div class="text-2xl font-bold">$8,400 - $12,000</div>
 <div class="text-xs text-red-700">ACA Marketplace Plan (Silver)</div>
 </div>
 <div class="bg-green-50 p-4 rounded-lg">
 <div class="text-sm text-green-800 mb-1">HSA Balance</div>
 <div class="text-2xl font-bold">$18,500</div>
 <div class="text-xs text-green-700">$3,650 annual contribution limit</div>
 </div>
 </div>
<!-- One More Year -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">"One More Year" Syndrome Analyzer</h3>
 <div class="mb-4">
 <label class="block text-sm font-medium text-gray-700 mb-1">Additional Years Worked</label>
 <input type="range" min="1" max="5" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 <div class="flex justify-between text-xs text-gray-500">
 <span>1 year</span>
 <span>2 years</span>
 <span>3 years</span>
 <span>4 years</span>
 <span>5 years</span>
 </div>
 </div>
 <div class="bg-blue-50 p-4 rounded-lg mb-4">
 <div class="text-sm text-blue-800 mb-1">Portfolio Growth</div>
 <div class="text-2xl font-bold">+$84,000</div>
 <div class="text-xs text-blue-700">7% annual growth + contributions</div>
 </div>
 <div class="bg-purple-50 p-4 rounded-lg">
 <div class="text-sm text-purple-800 mb-1">SWR Improvement</div>
 <div class="text-2xl font-bold">3.5% → 3.2%</div>
 <div class="text-xs text-purple-700">Increased safety margin</div>
 </div>
 </div>
 </div>
 </div>
<!-- Automation Tab -->
 <div class="tab-content" id="automation-tab">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 <!-- Automation Status -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Automation Status</h3>
 <div class="mb-6">
 <div class="flex items-center justify-between mb-2">
 <span class="font-medium">Automation Score</span>
 <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">85/100</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
 </div>
 <p class="text-sm text-gray-600 mt-2">You're doing great! Just a few more automations to reach "set and forget" status.</p>
 </div>
 <div class="space-y-4">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <div class="font-medium">Paycheck Savings</div>
 <div class="text-sm text-gray-600">Automated transfers to investment accounts</div>
 </div>
 </div>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <div class="font-medium">Bill Payments</div>
 <div class="text-sm text-gray-600">All recurring bills on autopay</div>
 </div>
 </div>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
 <i class="fas fa-exclamation text-yellow-600"></i>
 </div>
 <div>
 <div class="font-medium">Rebalancing</div>
 <div class="text-sm text-gray-600">Semi-automated - needs annual review</div>
 </div>
 </div>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
 <i class="fas fa-times text-red-600"></i>
 </div>
 <div>
 <div class="font-medium">Tax Optimization</div>
 <div class="text-sm text-gray-600">Manual process - consider automation</div>
 </div>
 </div>
 </div>
 </div>
<!-- Behavioral Nudges -->
 <div class="bg-white rounded-xl shadow-md p-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Behavioral Nudges</h3>
 <div class="mb-6">
 <div class="flex items-center justify-between mb-2">
 <span class="font-medium">Consistency Streak</span>
 <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">18 months</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
 </div>
 <p class="text-sm text-gray-600 mt-2">Longest streak: 24 months. You're getting close!</p>
 </div>
 <div class="grid grid-cols-2 gap-2 mb-4">
 <div class="bg-blue-50 p-3 rounded-lg text-center">
 <div class="text-sm text-blue-800">Badges Earned</div>
 <div class="text-2xl font-bold">12</div>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg text-center">
 <div class="text-sm text-purple-800">Current Level</div>
 <div class="text-2xl font-bold">Gold</div>
 </div>
 </div>
 <div class="flex flex-wrap gap-2">
 <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center">
 <i class="fas fa-medal mr-1"></i> Saver
 </span>
 <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center">
 <i class="fas fa-bolt mr-1"></i> Fast Starter
 </span>
 <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center">
 <i class="fas fa-robot mr-1"></i> Automator
 </span>
 <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center">
 <i class="fas fa-chart-line mr-1"></i> Growth Seeker
 </span>
 </div>
 </div>
 </div>
<!-- Knowledge Base -->
 <div class="bg-white rounded-xl shadow-md p-6 mb-6">
 <h3 class="text-lg font-bold text-gray-800 mb-4">Knowledge Base</h3>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="flip-card cursor-pointer h-48">
 <div class="flip-card-inner h-full">
 <div class="flip-card-front bg-blue-50 rounded-lg p-4 flex flex-col h-full">
 <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mb-3">
 <i class="fas fa-book"></i>
 </div>
 <h4 class="font-bold text-blue-800 mb-2">The Automatic Millionaire</h4>
 <p class="text-sm text-gray-600 flex-grow">Key takeaways: Pay yourself first, make it automatic, own your home...</p>
 <div class="text-xs text-blue-600 mt-2">Click to flip for summary</div>
 </div>
 <div class="flip-card-back bg-blue-100 rounded-lg p-4 h-full">
 <h4 class="font-bold text-blue-800 mb-2">Key Principles</h4>
 <ul class="text-sm space-y-1 list-disc list-inside">
 <li>Automate your savings and investments</li>
 <li>Own your home outright</li>
 <li>Pay yourself first (10-15% of income)</li>
 <li>Automatic 401(k) contributions</li>
 </ul>
 <div class="text-xs text-blue-600 mt-2">Click to return</div>
 </div>
 </div>
 </div>
 <div class="flip-card cursor-pointer h-48">
 <div class="flip-card-inner h-full">
 <div class="flip-card-front bg-green-50 rounded-lg p-4 flex flex-col h-full">
 <div class="bg-green-100 text-green-800 w-10 h-10 rounded-full flex items-center justify-center mb-3">
 <i class="fas fa-video"></i>
 </div>
 <h4 class="font-bold text-green-800 mb-2">The Shockingly Simple Math</h4>
 <p class="text-sm text-gray-600 flex-grow">Mr. Money Mustache's famous post on savings rate vs. time to retirement...</p>
 <div class="text-xs text-green-600 mt-2">Click to flip for chart</div>
 </div>
 <div class="flip-card-back bg-green-100 rounded-lg p-4 h-full">
 <h4 class="font-bold text-green-800 mb-1">Savings Rate vs. Years to FI</h4>
 <div class="text-xs mb-1">10% → 51 years</div>
 <div class="text-xs mb-1">30% → 28 years</div>
 <div class="text-xs mb-1">50% → 17 years</div>
 <div class="text-xs mb-1">70% → 8.5 years</div>
 <div class="text-xs">90% → <3 years</div>
 <div class="text-xs text-green-600 mt-2">Click to return</div>
 </div>
 </div>
 </div>
 <div class="flip-card cursor-pointer h-48">
 <div class="flip-card-inner h-full">
 <div class="flip-card-front bg-purple-50 rounded-lg p-4 flex flex-col h-full">
 <div class="bg-purple-100 text-purple-800 w-10 h-10 rounded-full flex items-center justify-center mb-3">
 <i class="fas fa-link"></i>
 </div>
 <h4 class="font-bold text-purple-800 mb-2">FIRE Resources</h4>
 <p class="text-sm text-gray-600 flex-grow">Curated list of blogs, forums, calculators and communities to help your journey...</p>
 <div class="text-xs text-purple-600 mt-2">Click to flip for links</div>
 </div>
 <div class="flip-card-back bg-purple-100 rounded-lg p-4 h-full">
 <h4 class="font-bold text-purple-800 mb-2">Top Resources</h4>
 <ul class="text-sm space-y-1">
 <li><a href="#" class="hover:underline">Mr. Money Mustache</a></li>
 <li><a href="#" class="hover:underline">Early Retirement Now</a></li>
 <li><a href="#" class="hover:underline">Bogleheads Forum</a></li>
 <li><a href="#" class="hover:underline">FIRE Calculator</a></li>
 </ul>
 <div class="text-xs text-purple-600 mt-2">Click to return</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Net Worth Trend -->
 <section class="bg-white rounded-xl shadow-md p-6 mb-6">
 <h2 class="text-xl font-bold text-gray-800 mb-4">Net Worth Trend</h2>
 <div class="h-80">
 <canvas id="netWorthChart"></canvas>
 </div>
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
 <div class="bg-blue-50 p-3 rounded-lg">
 <div class="text-sm text-blue-800">Current Net Worth</div>
 <div class="font-bold">$512,000</div>
 </div>
 <div class="bg-green-50 p-3 rounded-lg">
 <div class="text-sm text-green-800">YTD Change</div>
 <div class="font-bold text-green-600">+$42,500</div>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg">
 <div class="text-sm text-purple-800">1 Year Growth</div>
 <div class="font-bold text-purple-600">+$85,200</div>
 </div>
 <div class="bg-yellow-50 p-3 rounded-lg">
 <div class="text-sm text-yellow-800">5 Year Growth</div>
 <div class="font-bold text-yellow-600">+$312,000</div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white rounded-xl shadow-md p-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center">
 <div class="bg-blue-500 text-white p-2 rounded-lg mr-2">
 <i class="fas fa-rocket"></i>
 </div>
 <span class="font-bold">FIRE Mission Control</span>
 </div>
 <p class="text-sm text-gray-400 mt-1">Your dashboard to financial independence</p>
 </div>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-github"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-discord"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-reddit"></i>
 </a>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400">
 <div class="flex flex-col md:flex-row justify-between">
 <div class="mb-4 md:mb-0">
 © 2023 FIRE Mission Control. All rights reserved.
 </div>
 <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
 <a href="#" class="hover:text-white">Privacy Policy</a>
 <a href="#" class="hover:text-white">Terms of Service</a>
 <a href="#" class="hover:text-white">Contact Us</a>
 </div>
 </div>
 <div class="mt-4 text-xs">
 Disclaimer: This dashboard is for informational purposes only and should not be considered financial advice. Please consult with a qualified professional for financial advice.
 </div>
 </div>
 </footer>
 </div>
<script>
 // Set current date
 const now = new Date();
 const options = { year: 'numeric', month: 'long', day: 'numeric' };
 document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', options);
 // Tab functionality
 const tabs = document.querySelectorAll('[data-tab]');
 tabs.forEach(tab => {
 tab.addEventListener('click', () => {
 // Remove active class from all tabs and content
 document.querySelectorAll('[data-tab]').forEach(t => {
 t.classList.remove('border-blue-600', 'text-blue-600');
 t.classList.add('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
 });
document.querySelectorAll('.tab-content').forEach(c => {
 c.classList.remove('active');
 });
// Add active class to clicked tab and corresponding content
 tab.classList.remove('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
 tab.classList.add('border-blue-600', 'text-blue-600');
const tabId = tab.getAttribute('data-tab');
 document.getElementById(`${tabId}-tab`).classList.add('active');
 });
 });
 // Charts
 // Spending Chart
 const spendingCtx = document.getElementById('spendingChart').getContext('2d');
 const spendingChart = new Chart(spendingCtx, {
 type: 'doughnut',
 data: {
 labels: ['Housing', 'Transportation', 'Food', 'Utilities', 'Entertainment', 'Healthcare', 'Other'],
 datasets: [{
 data: [1500, 450, 600, 200, 300, 150, 400],
 backgroundColor: [
 '#3b82f6',
 '#10b981',
 '#f59e0b',
 '#6366f1',
 '#ec4899',
 '#ef4444',
 '#6b7280'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'right',
 }
 }
 }
 });
 // Allocation Chart
 const allocationCtx = document.getElementById('allocationChart').getContext('2d');
 const allocationChart = new Chart(allocationCtx, {
 type: 'pie',
 data: {
 labels: ['US Stocks', 'International Stocks', 'Bonds', 'Real Estate', 'Cash'],
 datasets: [{
 data: [55, 25, 10, 5, 5],
 backgroundColor: [
 '#3b82f6',
 '#10b981',
 '#f59e0b',
 '#6366f1',
 '#6b7280'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'right',
 }
 }
 }
 });
 // Performance Chart
 const performanceCtx = document.getElementById('performanceChart').getContext('2d');
 const performanceChart = new Chart(performanceCtx, {
 type: 'line',
 data: {
 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 datasets: [
 {
 label: 'Your Portfolio',
 data: [400, 410, 415, 420, 425, 430, 420, 425, 430, 435, 440, 445],
 borderColor: '#3b82f6',
 backgroundColor: 'rgba(59, 130, 246, 0.1)',
 tension: 0.4,
 fill: true
 },
 {
 label: 'S&P 500',
 data: [400, 405, 410, 415, 420, 425, 415, 420, 425, 430, 435, 440],
 borderColor: '#10b981',
 backgroundColor: 'rgba(16, 185, 129, 0.1)',
 tension: 0.4,
 fill: true
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'top',
 }
 },
 scales: {
 y: {
 beginAtZero: false
 }
 }
 }
 });
 // SWR Chart
 const swrCtx = document.getElementById('swrChart').getContext('2d');
 const swrChart = new Chart(swrCtx, {
 type: 'bar',
 data: {
 labels: ['3%', '3.5%', '4%', '4.5%', '5%'],
 datasets: [{
 label: 'Success Rate',
 data: [99, 98, 95, 85, 70],
 backgroundColor: [
 '#10b981',
 '#10b981',
 '#f59e0b',
 '#ef4444',
 '#ef4444'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 max: 100,
 title: {
 display: true,
 text: 'Success Rate (%)'
 }
 }
 }
 }
 });
 // Net Worth Chart
 const netWorthCtx = document.getElementById('netWorthChart').getContext('2d');
 const netWorthChart = new Chart(netWorthCtx, {
 type: 'line',
 data: {
 labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
 datasets: [{
 label: 'Net Worth',
 data: [200, 250, 300, 380, 425, 512],
 borderColor: '#3b82f6',
 backgroundColor: 'rgba(59, 130, 246, 0.1)',
 tension: 0.4,
 fill: true
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 display: false
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 return '$' + context.parsed.y + 'k';
 }
 }
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 ticks: {
 callback: function(value) {
 return '$' + value + 'k';
 }
 }
 }
 }
 }
 });
 // Flip cards
 document.querySelectorAll('.flip-card').forEach(card => {
 card.addEventListener('click', function() {
 this.querySelector('.flip-card-inner').classList.toggle('rotate-y-180');
 });
 });
 </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/fire-mission-control" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>