<!-- PDF BUTTONS --> <div class="btn-group"> <button class="btn-pdf btn-reset" id="resetAllBtn">⟳ Reset Example Data</button> <button class="btn-pdf" id="downloadPdfBtn">📄 Download as PDF</button> </div> </div>
.btn-reset background: #eef2f5; color: #2c4b3a; border: 1px solid #cbdbe0;
.rule-list list-style: none; padding-left: 0; !-- PDF BUTTONS -->
.footer-note margin-top: 2rem; background: #f0f6fa; padding: 1rem 1.5rem; border-radius: 20px; text-align: center; font-size: 0.85rem; color: #2c4b3a; border: 1px solid #dde9f0;
.btn-pdf background: #1f5437; border: none; padding: 0.8rem 1.8rem; border-radius: 40px; font-weight: 600; color: white; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 3px 8px rgba(0,0,0,0.1); button class="btn-pdf btn-reset" id="resetAllBtn">
.track-label font-weight: 600; font-size: 0.9rem;
<div class="finance-card"> <h3><span class="badge-icon">🎯</span> Top 3 Money Priorities</h3> <ul class="rule-list"> <li><strong>Emergency cushion:</strong> Build $10k – $15k (3–6 months expenses)</li> <li><strong>Kill high-interest debt</strong> (credit cards / personal loans)</li> <li><strong>Automate 15%+ to retirement</strong> (401k, Roth IRA, or index funds)</li> </ul> </div> </div> ⟳ Reset Example Data<
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>One-Page Financial Plan | Simple & Smart Money Guide</title> <!-- html2pdf library for direct PDF generation --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> * margin: 0; padding: 0; box-sizing: border-box;
<!-- core financial snapshot: 2 columns --> <div class="grid-2col"> <!-- LEFT COL: NUMBERS & TRACKING --> <div class="col"> <div class="finance-card"> <h3><span class="badge-icon">📊</span> Your Quick Numbers</h3> <div class="track-row"> <span class="track-label">Monthly Take-Home</span> <span class="track-percent" id="monthlyIncomeDisplay">$4,250</span> </div> <div class="track-row"> <span class="track-label">Essential Expenses (50%)</span> <span class="track-percent" id="essentialsDisplay">$2,125</span> </div> <div class="track-row"> <span class="track-label">Savings & Debt (20%)</span> <span class="track-percent" id="savingsDebtDisplay">$850</span> </div> <div class="track-row"> <span class="track-label">Guilt-Free Spending (30%)</span> <span class="track-percent" id="wantsDisplay">$1,275</span> </div> <div class="progress-bg"><div class="progress-fill" id="savingsProgressFill" style="width: 20%;"></div></div> <div class="note-text">⚡ Based on the 50/30/20 rule: Needs · Wants · Financial goals</div> </div>
.progress-bg background: #e2e9f0; border-radius: 20px; height: 8px; width: 100%; margin-top: 6px; overflow: hidden;
.value-large font-size: 1.9rem; font-weight: 800; color: #1e4620; letter-spacing: -0.5px; line-height: 1.2;