og image
· 1 year ago
82d3369a6f77600949be1ac7a221b3ca15fa4a57
Parent:
27ebb8092
2 files changed +99 −109
- images/lifestyle-calculator.png binary
- lifestyle-calculator.html +99 −109
Diff
Binary files a/images/lifestyle-calculator.png and b/images/lifestyle-calculator.png differ --- a/lifestyle-calculator.html +++ b/lifestyle-calculator.html @@ -1,36 +1,32 @@ <!DOCTYPE html> + <html lang="en"> <head> - <meta charset="utf-8"/> - <meta content="width=device-width, initial-scale=1.0" name="viewport"/> - <title>Lifestyle Calculator: What Your Family's Income Really Buys</title> - <meta content="Explore how different family income levels translate to real lifestyle choices. From $20K to $25M+, see what your household can afford: dining, travel, housing, entertainment, education, financial planning, and luxury services with this interactive tool. Includes a basic Cost of Living Adjustment." name="description"/> - <meta content="lifestyle calculator, income lifestyle, family budget, what can I afford, salary lifestyle, income comparison, lifestyle expenses, luxury calculator, income brackets, wealth lifestyle, finance, cost of living, financial planning, investments, family finance" name="keywords"/> - <link href="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" rel="canonical"/> - - <!-- Open Graph / Facebook --> - <meta content="website" property="og:type"/> - <meta content="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" property="og:url"/> - <meta content="Lifestyle Calculator: What Your Family's Income Really Buys" property="og:title"/> - <meta content="Explore how different family income levels translate to real lifestyle choices, with a basic Cost of Living Adjustment. See what your household can afford from $20K to $25M+." property="og:description"/> - <meta content="https://cheatsheets.davidveksler.com/images/lifestyle-calculator-og.png" property="og:image"/> - <meta content="Interactive lifestyle calculator showing income to lifestyle progression " property="og:image:alt"/> - <meta content="1200" property="og:image:width"/> - <meta content="630" property="og:image:height"/> - - <!-- Twitter Card --> - <meta content="summary_large_image" name="twitter:card"/> - <meta content="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" name="twitter:url"/> - <meta content="Lifestyle Calculator: What Your Family's Income Really Buys" name="twitter:title"/> - <meta content="Explore how different family income levels translate to real lifestyle choices, with a basic Cost of Living Adjustment. See what your household can afford from $20K to $25M+." name="twitter:description"/> - <meta content="https://cheatsheets.davidveksler.com/images/lifestyle-calculator-twitter.png" name="twitter:image"/> - - <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet"/> - <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/> - <link href="https://fonts.googleapis.com" rel="preconnect"/> - <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin/> - <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"/> - <style> +<meta charset="utf-8"/> +<meta content="width=device-width, initial-scale=1.0" name="viewport"/> +<title>Lifestyle Calculator: What Your Family's Income Really Buys</title> +<meta content="Explore how different family income levels translate to real lifestyle choices. From $20K to $25M+, see what your household can afford: dining, travel, housing, entertainment, education, financial planning, and luxury services with this interactive tool. Includes a basic Cost of Living Adjustment." name="description"/> +<meta content="lifestyle calculator, income lifestyle, family budget, what can I afford, salary lifestyle, income comparison, lifestyle expenses, luxury calculator, income brackets, wealth lifestyle, finance, cost of living, financial planning, investments, family finance" name="keywords"/> +<link href="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" rel="canonical"/> +<!-- Open Graph / Facebook --> +<meta content="website" property="og:type"/> +<meta content="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" property="og:url"/> +<meta content="Lifestyle Calculator: What Your Family's Income Really Buys" property="og:title"/> +<meta content="Explore how different family income levels translate to real lifestyle choices, with a basic Cost of Living Adjustment. See what your household can afford from $20K to $25M+." property="og:description"/> +<meta content="Interactive lifestyle calculator showing income to lifestyle progression " property="og:image:alt"/> +<meta content="1200" property="og:image:width"/> +<meta content="630" property="og:image:height"/> +<!-- Twitter Card --> +<meta content="summary_large_image" name="twitter:card"/> +<meta content="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" name="twitter:url"/> +<meta content="Lifestyle Calculator: What Your Family's Income Really Buys" name="twitter:title"/> +<meta content="Explore how different family income levels translate to real lifestyle choices, with a basic Cost of Living Adjustment. See what your household can afford from $20K to $25M+." name="twitter:description"/> +<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet"/> +<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/> +<link href="https://fonts.googleapis.com" rel="preconnect"/> +<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> +<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"/> +<style> :root { --primary-color: #0d6efd; /* Bootstrap Blue */ --secondary-color: #6c757d; /* Bootstrap Gray */ @@ -234,85 +230,79 @@ .fade-in { animation: fadeIn 0.6s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } </style> - -</head> +<meta content="images/lifestyle-calculator.png" property="og:image"/><meta content="images/lifestyle-calculator.png" name="twitter:image"/></head> <body> - <div class="container"> - <div class="main-container"> - <div class="text-center"> - <h1 class="page-title">💰 Lifestyle Calculator</h1> - <p class="page-subtitle">Slide to see what your income *really* affords for your family!</p> - <p class="calculator-note"><i class="bi bi-info-circle-fill"></i> This calculator estimates lifestyle based on **annual family budget**, not net worth. Cost of Living (COLA) adjustment provides regional context.</p> - </div> - - <div class="controls-container"> - <div class="row"> - <div class="col-md-6 cola-container"> - <label for="colaSelector" class="form-label">Cost of Living Adjustment (COLA):</label> - <select id="colaSelector" class="form-select form-select-sm"> - <!-- Options will be populated by JavaScript --> - </select> - </div> - </div> - <div class="income-display" id="incomeDisplay">$50,000</div> - <div class="effective-income-display" id="effectiveIncomeDisplay"></div> - <div class="income-bracket-label" id="incomeBracketLabel">Lower Middle Class</div> - <div class="income-bracket-description" id="incomeBracketDescription">Making ends meet, with a little extra for fun.</div> - - <input type="range" min="0" max="14" value="2" class="slider" id="incomeSlider"> - <div class="slider-labels"> - <span>$20K</span> - <span>$1M</span> - <span>$25M</span> - </div> - <div class="visual-income-bar-container" id="visualIncomeBarContainer"> - <div class="income-bar-segment" id="incomeBarSegment"></div> - </div> - </div> - - <div class="row"> - <div class="col-lg-6"> - <div class="lifestyle-category dining fade-in"> - <div class="category-title"><i class="bi bi-egg-fried category-icon"></i> Dining & Food</div> - <div id="dining-content"></div> - </div> - <div class="lifestyle-category travel fade-in"> - <div class="category-title"><i class="bi bi-airplane category-icon"></i> Travel & Vacations</div> - <div id="travel-content"></div> - </div> - <div class="lifestyle-category housing fade-in"> - <div class="category-title"><i class="bi bi-house-door category-icon"></i> Housing & Living</div> - <div id="housing-content"></div> - </div> - <div class="lifestyle-category transportation fade-in"> - <div class="category-title"><i class="bi bi-car-front-fill category-icon"></i> Transportation</div> - <div id="transportation-content"></div> - </div> - </div> - <div class="col-lg-6"> - <div class="lifestyle-category entertainment fade-in"> - <div class="category-title"><i class="bi bi-dice-5-fill category-icon"></i> Entertainment & Hobbies</div> - <div id="entertainment-content"></div> - </div> - <div class="lifestyle-category education fade-in"> - <div class="category-title"><i class="bi bi-book-half category-icon"></i> Education & Growth</div> - <div id="education-content"></div> - </div> - <div class="lifestyle-category services fade-in"> - <div class="category-title"><i class="bi bi-person-check-fill category-icon"></i> Personal Services</div> - <div id="services-content"></div> - </div> - <div class="lifestyle-category financial-planning fade-in"> - <div class="category-title"><i class="bi bi-piggy-bank category-icon"></i> Financial Planning & Investments</div> - <div id="financial-services-content"></div> - </div> - </div> - </div> - </div> - </div> - - - <!-- Main Application Script --> +<div class="container"> +<div class="main-container"> +<div class="text-center"> +<h1 class="page-title">💰 Lifestyle Calculator</h1> +<p class="page-subtitle">Slide to see what your income *really* affords for your family!</p> +<p class="calculator-note"><i class="bi bi-info-circle-fill"></i> This calculator estimates lifestyle based on **annual family budget**, not net worth. Cost of Living (COLA) adjustment provides regional context.</p> +</div> +<div class="controls-container"> +<div class="row"> +<div class="col-md-6 cola-container"> +<label class="form-label" for="colaSelector">Cost of Living Adjustment (COLA):</label> +<select class="form-select form-select-sm" id="colaSelector"> +<!-- Options will be populated by JavaScript --> +</select> +</div> +</div> +<div class="income-display" id="incomeDisplay">$50,000</div> +<div class="effective-income-display" id="effectiveIncomeDisplay"></div> +<div class="income-bracket-label" id="incomeBracketLabel">Lower Middle Class</div> +<div class="income-bracket-description" id="incomeBracketDescription">Making ends meet, with a little extra for fun.</div> +<input class="slider" id="incomeSlider" max="14" min="0" type="range" value="2"/> +<div class="slider-labels"> +<span>$20K</span> +<span>$1M</span> +<span>$25M</span> +</div> +<div class="visual-income-bar-container" id="visualIncomeBarContainer"> +<div class="income-bar-segment" id="incomeBarSegment"></div> +</div> +</div> +<div class="row"> +<div class="col-lg-6"> +<div class="lifestyle-category dining fade-in"> +<div class="category-title"><i class="bi bi-egg-fried category-icon"></i> Dining & Food</div> +<div id="dining-content"></div> +</div> +<div class="lifestyle-category travel fade-in"> +<div class="category-title"><i class="bi bi-airplane category-icon"></i> Travel & Vacations</div> +<div id="travel-content"></div> +</div> +<div class="lifestyle-category housing fade-in"> +<div class="category-title"><i class="bi bi-house-door category-icon"></i> Housing & Living</div> +<div id="housing-content"></div> +</div> +<div class="lifestyle-category transportation fade-in"> +<div class="category-title"><i class="bi bi-car-front-fill category-icon"></i> Transportation</div> +<div id="transportation-content"></div> +</div> +</div> +<div class="col-lg-6"> +<div class="lifestyle-category entertainment fade-in"> +<div class="category-title"><i class="bi bi-dice-5-fill category-icon"></i> Entertainment & Hobbies</div> +<div id="entertainment-content"></div> +</div> +<div class="lifestyle-category education fade-in"> +<div class="category-title"><i class="bi bi-book-half category-icon"></i> Education & Growth</div> +<div id="education-content"></div> +</div> +<div class="lifestyle-category services fade-in"> +<div class="category-title"><i class="bi bi-person-check-fill category-icon"></i> Personal Services</div> +<div id="services-content"></div> +</div> +<div class="lifestyle-category financial-planning fade-in"> +<div class="category-title"><i class="bi bi-piggy-bank category-icon"></i> Financial Planning & Investments</div> +<div id="financial-services-content"></div> +</div> +</div> +</div> +</div> +</div> +<!-- Main Application Script --> <script> let incomeBrackets = []; let lifestyleData = {}; @@ -525,6 +515,6 @@ document.addEventListener('DOMContentLoaded', () => { }); </script> - <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> +<script crossorigin="anonymous" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html> \ No newline at end of file