Create lifestyle-calculator.html
· 1 year ago
83641e23af0589990ed2427f1eee16854f284f89
Parent:
897e7a50e
1 file changed +538 −0
- lifestyle-calculator.html +538 −0
Diff
--- /dev/null +++ b/lifestyle-calculator.html @@ -0,0 +1,538 @@ +<!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 Denver Income Really Buys You</title> + <meta content="Explore how different income levels translate to real lifestyle choices in Denver. From $20K to $10M+, see what you can afford: dining, travel, housing, entertainment, education, and luxury services with this interactive tool." name="description"/> + <meta content="lifestyle calculator, income lifestyle, Denver lifestyle, what can I afford Denver, salary lifestyle Denver, income comparison Denver, lifestyle expenses Denver, luxury calculator Denver, income brackets Denver, wealth lifestyle Denver, Denver finance, Denver cost of living" 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 Denver Income Really Buys You" property="og:title"/> + <meta content="Explore how different income levels translate to real lifestyle choices in Denver. From $20K to $10M+, see what you can afford in dining, travel, housing, entertainment, and luxury services." 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 in Denver" property="og:image:alt"/> + <meta content="1200" property="og:image:width"/> + <meta content="630" property="og:image:height"/> + <meta content="David Vekslers Cheatsheets" property="og:site_name"/> + + <!-- Twitter Card --> + <meta content="summary_large_image" name="twitter:card"/> + <meta content="@heroiclife" name="twitter:site"/> + <meta content="@heroiclife" name="twitter:creator"/> + <meta content="https://cheatsheets.davidveksler.com/lifestyle-calculator.html" name="twitter:url"/> + <meta content="Lifestyle Calculator: What Your Denver Income Really Buys You" name="twitter:title"/> + <meta content="Explore how different income levels translate to real lifestyle choices in Denver. From $20K to $10M+, see what you can afford in dining, travel, housing, entertainment, and luxury services." 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> + :root { + --primary-color: #0d6efd; /* Bootstrap Blue */ + --secondary-color: #6c757d; /* Bootstrap Gray */ + --success-color: #198754; /* Bootstrap Green */ + --warning-color: #ffc107; /* Bootstrap Yellow */ + --danger-color: #dc3545; /* Bootstrap Red */ + --info-color: #0dcaf0; /* Bootstrap Cyan */ + --dark-color: #212529; /* Bootstrap Dark */ + --light-color: #f8f9fa; /* Bootstrap Light */ + --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + --border-radius: 0.75rem; /* 12px */ + --primary-color-rgb: 13, 110, 253; /* For box-shadow transparency */ + } + + body { + font-family: 'Inter', sans-serif; + background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); + min-height: 100vh; + padding: 2rem 0; + transition: background 0.8s ease-in-out; + color: var(--dark-color); + } + + .theme-basic { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } + .theme-comfortable { background: linear-gradient(135deg, #e0fbfc 0%, #c2f0fc 100%); } + .theme-affluent { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); } + .theme-luxury { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); } + .theme-ultra { background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); } + .theme-elite { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); } + + + .main-container { + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(5px); + border-radius: var(--border-radius); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); + padding: 2.5rem; + margin-bottom: 2rem; + } + .page-title { + font-family: 'Roboto Slab', serif; + font-size: 2.8rem; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 0.5rem; + } + .page-subtitle { + font-size: 1.1rem; + color: var(--secondary-color); + margin-bottom: 2rem; + } + + .income-slider-container { + background: var(--light-color); + border-radius: var(--border-radius); + padding: 2rem; + margin-bottom: 1rem; + border: 1px solid #ced4da; + } + + .income-display { + font-family: 'Roboto Slab', serif; + font-size: 2.5rem; + font-weight: 700; + color: var(--primary-color); + text-align: center; + margin-bottom: 0.25rem; + } + + .income-bracket-label { + font-size: 1.4rem; + color: var(--dark-color); + text-align: center; + font-weight: 600; + margin-bottom: 0.25rem; + } + .income-bracket-description { + font-size: 0.95rem; + color: #495057; + text-align: center; + font-weight: 400; + margin-bottom: 1.5rem; + min-height: 38px; + line-height: 1.4; + } + + + .slider { width: 100%; height: 12px; border-radius: 6px; background: #dee2e6; outline: none; -webkit-appearance: none; appearance: none; margin-bottom: 0.5rem; } + .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: 5px solid white; box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.5); } + .slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: 5px solid white; box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.5); } + .slider-labels { display: flex; justify-content: space-between; font-size: 0.85rem; color: #6c757d; padding: 0 5px; } + + .visual-income-bar-container { display: flex; width: 100%; height: 14px; background-color: #e9ecef; border-radius: 7px; overflow: hidden; margin: 1.25rem auto 2rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); } + .income-bar-segment { height: 100%; background: var(--primary-color); transition: width 0.5s ease-in-out; } + + .lifestyle-category { background: #ffffff; border-radius: var(--border-radius); padding: 1.75rem; margin-bottom: 1.75rem; border-left: 6px solid var(--primary-color); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } + .lifestyle-category:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); } + .category-title { font-family: 'Roboto Slab', serif; font-size: 1.5rem; font-weight: 700; color: var(--dark-color); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.85rem; } + .category-icon { font-size: 2rem; color: var(--primary-color); opacity: 0.8; } + + .category-item-icon { + font-size: 1.5rem; + color: var(--primary-color); + opacity: 0.7; + margin-right: 0.85rem; + vertical-align: middle; + flex-shrink: 0; + width: 30px; + text-align: center; + } + .category-item { background: var(--light-color); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; border: 1px solid #dee2e6; display: flex; align-items: center; transition: background-color 0.2s ease; } + .category-item:hover { background-color: #e9ecef; } + .category-item .item-content-wrapper { flex-grow: 1; } + + .item-title { font-weight: 600; font-size: 1.05rem; color: var(--dark-color); margin-bottom: 0.3rem; display: flex; align-items: center; } + .item-description { color: #495057; font-size: 0.9rem; line-height: 1.5; } + .item-financial-note { color: var(--success-color); font-size: 0.8rem; font-style: italic; margin-top: 0.4rem; opacity: 0.9; } + + + .luxury-badge, .ultra-luxury-badge { padding: 0.35rem 0.9rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; white-space: nowrap; border: 1px solid transparent;} + .luxury-badge { background: var(--warning-color); color: var(--dark-color); border-color: rgba(0,0,0,0.1); } + .ultra-luxury-badge { background: var(--danger-color); color: white; } + + .dining { border-left-color: #fd7e14; } .dining .category-icon { color: #fd7e14; } + .travel { border-left-color: #0dcaf0; } .travel .category-icon { color: #0dcaf0; } + .housing { border-left-color: #198754; } .housing .category-icon { color: #198754; } + .transportation { border-left-color: #6f42c1; } .transportation .category-icon { color: #6f42c1; } + .entertainment { border-left-color: #d63384; } .entertainment .category-icon { color: #d63384; } + .education { border-left-color: #ffc107; } .education .category-icon { color: #ffc107; } + .services { border-left-color: #6c757d; } .services .category-icon { color: #6c757d; } + + @keyframes itemEntryAnimation { from { opacity: 0; transform: translateX(-20px) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } } + .animate-item-entry { animation: itemEntryAnimation 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } + .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> +<body> + <div class="container"> + <div class="main-container"> + <div class="text-center"> + <h1 class="page-title">💰 Denver Lifestyle Calculator</h1> + <p class="page-subtitle">Slide to see what your income *really* affords in the Mile High City! (Icons illustrate, details describe)</p> + </div> + + <div class="income-slider-container"> + <div class="income-display" id="incomeDisplay">$50,000</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>$10M+</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> + <div class="col-lg-6"> + <div class="lifestyle-category transportation fade-in"> + <div class="category-title"><i class="bi bi-car-front category-icon"></i> Transportation</div> + <div id="transportation-content"></div> + </div> + <div class="lifestyle-category entertainment fade-in"> + <div class="category-title"><i class="bi bi-dice-5 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 category-icon"></i> Personal Services</div> + <div id="services-content"></div> + </div> + </div> + </div> + </div> + </div> + + <!-- Data Script: Contains incomeBrackets and lifestyleData --> + <script id="calculatorData"> + const incomeBrackets = [ + { income: 20000, label: "Working Poor", description: "It's a grind. Every dollar is stretched. Ramen is practically a currency." }, + { income: 30000, label: "Low Income", description: "Budgeting is an art form. A night out is a rare, celebrated event." }, + { income: 50000, label: "Lower Middle Class", description: "Essentials are covered, maybe a concert. Saving is tough but not impossible." }, + { income: 75000, label: "Middle Class", description: "Comfortable, but mindful of spending. Starting to build that nest egg." }, + { income: 100000, label: "Upper Middle Class", description: "Life's pretty good! More treats, less stress. Investments are growing." }, + { income: 150000, label: "Affluent", description: "Enjoying the finer things. Mountain getaways are a regular occurrence." }, + { income: 200000, label: "High Income", description: "Luxury choices become normal. Hello, Cherry Creek North without wincing!" }, + { income: 300000, label: "Wealthy", description: "Premium experiences are the standard. Your financial advisor is a good friend." }, + { income: 500000, label: "Very Wealthy", description: "Elite living. 'Fly commercial or private?' is a genuine dilemma." }, + { income: 750000, label: "Ultra High Net Worth", description: "Exclusive access. Your hobbies sound like movie plots." }, + { income: 1000000, label: "Millionaire", description: "Congrats, you made it! Now, the fun part: smart allocation." }, + { income: 2000000, label: "Multi-Millionaire", description: "Private jet to Aspen for a quick bite? Sure, why not." }, + { income: 5000000, label: "Ultra Wealthy", description: "The world is your playground. You might own the playground manufacturer." }, + { income: 10000000, label: "Ultra Elite", description: "Your biggest worry? Which continent for the summer. Philanthropy is a passion." }, + { income: 25000000, label: "Billionaire Class", description: "Price tags are suggestions. Next stop: influencing global change (or Mars)." } + ]; + + const lifestyleData = { + dining: [ + { min: 0, items: [ + { title: "Home Cook Hero (by necessity!)", desc: "Pasta, rice, beans are staples. King Soopers' generic brands are gold. A rare splurge: a $5 Little Caesars pizza.", itemIcon: "bi-cart4", financialNote: "Savings are aspirational." }, + { title: "Grocery Ninja", desc: "$150-200/month. Couponing isn't just a hobby, it's a lifestyle. Eating out is a dream.", itemIcon: "bi-scissors" } + ]}, + { min: 2, items: [ + { title: "Casual Eats & Local Haunts", desc: "Hitting up Old Chicago or Santiago's for that green chili fix a few times a month. You're a happy hour connoisseur.", itemIcon: "bi-cup-straw"}, + { title: "Smart Grocery Runs", desc: "$400/month at King Soopers or Safeway. Maybe some organic produce if it's on sale.", itemIcon: "bi-basket3-fill", financialNote: "Slowly building an emergency fund."} + ]}, + { min: 4, items: [ + { title: "Denver Foodie Adventures", desc: "Weekly dinners in RiNo (Denver Central Market is a fave) or Tennyson St. Craft brews at Ratio or Odell are a weekend ritual.", itemIcon: "bi-emoji-sunglasses-fill"}, + { title: "Premium Pantry Stocking", desc: "$600+/month. Regular Whole Foods or Trader Joe's trips. You invest in the good olive oil and artisanal bread.", itemIcon: "bi-shop", financialNote: "Maxing out that 401k feels good." } + ]}, + { min: 7, items: [ + { title: "Fine Dining Connoisseur", desc: "Regular reservations at Frasca, Beckon, or a power steak at Guard and Grace. Wine pairings are non-negotiable.", itemIcon: "bi-award"}, + { title: "Gourmet Home Experience", desc: "$1500+/month on food & wine. Marczyk Fine Foods is your second home. Perhaps a fancy Gaggenau oven.", itemIcon: "bi-gem", financialNote: "Diversified investments managed by a pro."} + ]}, + { min: 10, items: [ + { title: "Private Chef & Exclusive Tables", desc: "Personal chef for special occasions or weekly meal prep. Access to private dining rooms at top establishments.", itemIcon: "bi-person-badge", luxury: true}, + { title: "Curated Wine Cellar", desc: "Investing in rare and fine wines, possibly with a consultant. Trips to Napa or Bordeaux for 'research'.", itemIcon: "bi-slack", luxury: true, financialNote: "Estate planning and philanthropic strategies are key."} + ]}, + ], + housing: [ + { min: 0, items: [ + { title: "Roommate Shuffle", desc: "Renting a room in an older building, maybe Aurora or Commerce City. Fingers crossed for compatible roommates!", itemIcon: "bi-person-plus-fill" }, + { title: "Furniture Finds", desc: "Mostly thrift store treasures (ARC, Goodwill) or generous hand-me-downs. You're a DIY wizard.", itemIcon: "bi-magic", financialNote: "Rent eats up a significant portion of income." } + ]}, + { min: 2, items: [ + { title: "Your Own Cozy Corner", desc: "Studio or 1BR in Cap Hill, Baker, or Englewood for ~$1800-$2200/month. Small, but all yours!", itemIcon: "bi-key-fill" }, + { title: "IKEA & Target Style", desc: "Assembling flat-pack furniture is a rite of passage. That KALLAX shelf is a modern marvel.", itemIcon: "bi-box-seam", financialNote: "A down payment seems like a distant mountain." } + ]}, + { min: 4, items: [ + { title: "Homeownership Horizons", desc: "Eyeing a $450k-$550k townhome or starter home in Sloans Lake, or Arvada for more square footage.", itemIcon: "bi-house-add-fill" }, + { title: "West Elm & CB2 Aspirations", desc: "Upgrading furniture. Maybe a brand-new couch that doesn't smell like someone else's dog!", itemIcon: "bi-display", financialNote: "Mortgage, property taxes, and HOA fees are real." } + ]}, + { min: 7, items: [ + { title: "Luxury Denver Living", desc: "$1.2M+ home in Wash Park, Bonnie Brae, or a sleek modern build in LoHi. Heated bathroom floors? Yes, please.", itemIcon: "bi-house-heart-fill" }, + { title: "Designer Touches & Renovations", desc: "Working with an interior designer. Custom cabinetry and art investments. That dream kitchen is happening.", itemIcon: "bi-palette2", financialNote: "Real estate as a significant asset class."} + ]}, + { min: 10, items: [ + { title: "Multiple Luxury Properties", desc: "Primary residence in Cherry Creek North, a ski chalet in Vail or Aspen, maybe a beach house somewhere warm.", itemIcon: "bi-houses-fill", luxury: true}, + { title: "Custom Architecture & Staff", desc: "Commissioning an architect for a bespoke home. Full-time household staff including a house manager.", itemIcon: "bi-people-fill", ultraLuxury: true, financialNote: "Complex property management and tax considerations."} + ]}, + ], + transportation: [ + { min: 0, items: [ + { title: "RTD All-Star", desc: "You've mastered the bus and light rail. Walking and a trusty (if rusty) bike are your companions. You know the Cherry Creek trail detours.", itemIcon: "bi-bus-front-fill" }, + { title: "The 'Character' Car", desc: "If you own a car, it's a late 90s classic that cost <$3k and has its own unique soundtrack. You're a YouTube mechanic.", itemIcon: "bi-cone", financialNote: "Gas and insurance are major budget items." } + ]}, + { min: 2, items: [ + { title: "Reliable Used Wheels", desc: "$15-20K for a dependable used Honda Civic, Toyota Corolla, or an older Subaru to chase those mountain dreams.", itemIcon: "bi-car-front" }, + { title: "Ride-Share Regular", desc: "Uber/Lyft for those nights out when parking is a beast or you've sampled Denver's craft beer scene.", itemIcon: "bi-phone-fill", financialNote: "Car payments are a line item, but manageable." } + ]}, + { min: 4, items: [ + { title: "That New(ish) Car Scent", desc: "$35-45K for a new Subaru Outback/Forester (hello I-70!), a Honda CR-V, or a zippy Mazda CX-5.", itemIcon: "bi-stars" }, + { title: "Worry-Free Maintenance", desc: "Regular dealer services, comprehensive insurance. That check engine light causes less panic.", itemIcon: "bi-shield-lock-fill", financialNote: "Leasing vs. buying is a dinner table debate." } + ]}, + { min: 7, items: [ + { title: "Luxury Commuting", desc: "$80K+ vehicles. Tesla Model Y/S, BMW X5, Audi Q7, or a Porsche Macan for navigating Cherry Creek with style.", itemIcon: "bi-speedometer" }, + { title: "The Two-Car (or more) Household", desc: "A practical daily driver plus a 'fun' weekend car – perhaps a convertible or a classic Bronco for mountain adventures.", itemIcon: "bi-ev-station-fill", luxury: true, financialNote: "Vehicle depreciation is factored into financial planning."} + ]}, + { min: 10, items: [ + { title: "Exotic Car Collection", desc: "Ferraris, Lamborghinis, McLarens. Maybe a bespoke Rolls-Royce or Bentley for comfortable cruising.", itemIcon: "bi-trophy-fill", ultraLuxury: true}, + { title: "Private Driver / Chauffeur", desc: "Full-time chauffeur for daily transport and errands. Never worry about parking again.", itemIcon: "bi-person-vcard", ultraLuxury: true, financialNote: "Managing a fleet and staff requires expertise."} + ]}, + ], + travel: [ + { min: 0, items: [ + { title: "Staycation Pro", desc: "Denver's parks (Wash Park, City Park), free museum days. Camping at Chatfield or Cherry Creek State Park is the annual big adventure.", itemIcon: "bi-geo-alt-fill" }, + { title: "Roadtrip Co-Pilot", desc: "Chipping in for gas if a friend with a car is heading to the mountains or a nearby state. You bring the snacks!", itemIcon: "bi-pin-map-fill", financialNote: "A 'vacation fund' is more like a 'maybe someday' jar." } + ]}, + { min: 2, items: [ + { title: "Budget Domestic Explorer", desc: "Annual flight on Southwest or Frontier. Weekend trips to Vegas, Phoenix, or visiting family. Budget-friendly Airbnbs.", itemIcon: "bi-airplane-engines-fill" }, + { title: "Colorado Mountain Escapes", desc: "Driving to Estes Park, Breckenridge (hello mud season deals!), or Salida for a weekend. Camping is still a favorite.", itemIcon: "bi-image-alt", financialNote: "Saving for trips involves careful planning."} + ]}, + { min: 4, items: [ + { title: "International Adventures Begin", desc: "First trips to Mexico, Canada, or maybe even a well-planned week in Europe (think hostels or budget hotels).", itemIcon: "bi-globe-americas"}, + { title: "Comfortable Domestic Travel", desc: "Flying major airlines (not basic economy!), staying in mid-tier hotels like Hilton or Marriott. Maybe a ski trip with friends.", itemIcon: "bi-suitcase-lg-fill", financialNote: "Dedicated travel savings account." } + ]}, + { min: 7, items: [ + { title: "Business Class & Luxury Resorts", desc: "Flying business class internationally. Staying at 5-star resorts in Hawaii, the Caribbean, or Europe. Maybe a luxury cruise.", itemIcon: "bi-passport-fill", luxury: true}, + { title: "Adventure & Experiential Travel", desc: "Safaris in Africa, exploring Patagonia, or a cultural immersion trip to Southeast Asia. Unique experiences are prioritized.", itemIcon: "bi-compass-fill", luxury: true, financialNote: "Travel agent or concierge service for planning."} + ]}, + { min: 10, items: [ + { title: "First Class & Private Aviation", desc: "Flying first class on premier airlines. Fractional ownership of a private jet (NetJets, Flexjet) or chartering for convenience.", itemIcon: "bi-send-check-fill", ultraLuxury: true}, + { title: "World-Circling Itineraries", desc: "Extended trips to multiple continents. Owning a vacation home abroad. Exclusive access to remote destinations.", itemIcon: "bi-globe-europe-africa", ultraLuxury: true, financialNote: "Global travel logistics and currency management."} + ]}, + ], + entertainment: [ + { min: 0, items: [ + { title: "Free Fun Seeker", desc: "Denver Public Library for everything. Free concerts at Levitt Pavilion. Hiking Table Mesa in Golden. Netflix via a 'borrowed' account?", itemIcon: "bi-headphones" }, + { title: "DIY Entertainment", desc: "Drawing, writing, learning an instrument from YouTube tutorials. Imagination is your biggest budget item.", itemIcon: "bi-brush-fill", financialNote: "Cable TV is a forgotten luxury." } + ]}, + { min: 2, items: [ + { title: "Local Gigs & Games", desc: "Catching a band at the Bluebird or Ogden. A Rockies game (the Rockpile still counts!). Movies at Alamo Drafthouse. A couple of streaming services.", itemIcon: "bi-ticket-detailed-fill" }, + { title: "Happy Hour Hero", desc: "Meeting friends for drinks and apps is your social life. You're a connoisseur of $5 margarita deals and half-price wing nights.", itemIcon: "bi-megaphone-fill", financialNote: "Entertainment budget: $100-$200/month."} + ]}, + { min: 4, items: [ + { title: "Red Rocks & Major League Action", desc: "Scoring tickets to a Red Rocks show (even if it means constant refreshing). Regular Avs or Nuggets games. Maybe a ski pass (Epic or Ikon).", itemIcon: "bi-boombox-fill"}, + { title: "Quality Home Entertainment", desc: "A decent sound system, a new gaming console (PS5/Xbox Series X). Subscribing to ALL the streaming services.", itemIcon: "bi-controller", financialNote: "Hobbies start getting dedicated budget lines." } + ]}, + { min: 7, items: [ + { title: "VIP & Season Tickets", desc: "VIP packages for concerts. Season tickets for your favorite Denver sports team. Maybe a membership at a private social club.", itemIcon: "bi-patch-check-fill", luxury: true}, + { title: "High-End Hobbies", desc: "Collecting art, fine wines, or vintage guitars. Golf memberships at exclusive clubs like Cherry Hills or Castle Pines.", itemIcon: "bi-easel3-fill", luxury: true, financialNote: "Discretionary spending is significant."} + ]}, + { min: 10, items: [ + { title: "Courtside & Backstage Access", desc: "Courtside seats at Ball Arena. Backstage passes to meet your favorite artists. Attending exclusive events like the Telluride Film Festival.", itemIcon: "bi-star-fill", ultraLuxury: true}, + { title: "Funding the Arts / Owning a Team", desc: "Becoming a patron of the Denver Art Museum or DCPA. Investing in Broadway shows. Maybe even part-ownership of a minor league team.", itemIcon: "bi-film", ultraLuxury: true, financialNote: "Legacy building through cultural contributions."} + ]}, + ], + education: [ + { min: 0, items: [ + { title: "Public Library University", desc: "Denver Public Library is your campus. Free online courses (Coursera, edX) for skill-building. Khan Academy is your tutor.", itemIcon: "bi-lightbulb-fill"}, + { title: "Self-Taught & Resourceful", desc: "Learning through podcasts, documentaries, and extensive internet research. Mentorship from experienced friends or colleagues.", itemIcon: "bi-search-heart", financialNote: "Formal education costs are prohibitive."} + ]}, + { min: 2, items: [ + { title: "Community College / In-State Public Uni", desc: "Community College of Denver or Metro State for affordable degrees/certs. CU Denver or CSU (in-state tuition) with student loans.", itemIcon: "bi-mortarboard-fill"}, + { title: "Trade Schools & Certifications", desc: "Focusing on practical skills for specific careers through programs like Emily Griffith Technical College.", itemIcon: "bi-tools", financialNote: "Managing student loan debt is a priority."} + ]}, + { min: 4, items: [ + { title: "Choice of Public or Private University", desc: "Attending University of Denver (DU) or Colorado College with scholarships/loans. Out-of-state public universities become an option.", itemIcon: "bi-building-fill-check"}, + { title: "Continuing Education & Workshops", desc: "Investing in professional development courses, industry conferences, and specialized workshops to advance career.", itemIcon: "bi-graph-up-arrow", financialNote: "Paying down student loans aggressively."} + ]}, + { min: 7, items: [ + { title: "Elite Universities & Grad School", desc: "Ivy League or other top-tier universities for undergrad or graduate programs (MBA, Law, Medicine) without crippling debt.", itemIcon: "bi-bank2", luxury: true}, + { title: "Private Tutors & Specialized Coaching", desc: "Hiring tutors for children's challenging subjects. Executive coaching for career advancement. Language immersion programs.", itemIcon: "bi-person-video3", luxury: true, financialNote: "Setting up 529 plans for children's education."} + ]}, + { min: 10, items: [ + { title: "Global Education & Bespoke Learning", desc: "Sending children to elite international boarding schools (Switzerland, UK). Custom-designed educational programs and experiences.", itemIcon: "bi-globe2", ultraLuxury: true}, + { title: "University Donations & Endowments", desc: "Significant philanthropic contributions to alma mater or other institutions. Funding research or scholarships. Maybe a building named after you.", itemIcon: "bi-capslock-fill", ultraLuxury: true, financialNote: "Establishing educational foundations or trusts."} + ]}, + ], + services: [ + { min: 0, items: [ + { title: "The Ultimate DIY-er", desc: "You cut your own hair (YouTube tutorials are a lifesaver!), clean your own everything, and are a pro at assembling IKEA furniture solo.", itemIcon: "bi-wrench-adjustable-circle-fill"}, + { title: "Community Support System", desc: "Relying on friends for help with moves or pet-sitting. Bartering skills with neighbors.", itemIcon: "bi-people", financialNote: "Paid personal services are a rare luxury."} + ]}, + { min: 2, items: [ + { title: "Basic Maintenance Services", desc: "Haircuts at Great Clips or Supercuts. Maybe a TaskRabbit for help with a heavy lifting job once a year.", itemIcon: "bi-scissors"}, + { title: "Occasional House Cleaner", desc: "Treating yourself to a house cleaning service (e.g., Molly Maid) before a big party or once every few months.", itemIcon: "bi-bucket-fill", financialNote: "Budgeting for small service conveniences."} + ]}, + { min: 4, items: [ + { title: "Regular Pampering & Assistance", desc: "Monthly haircuts at a decent salon (e.g., Floyd's 99). Bi-weekly house cleaning. Lawn care service during summer.", itemIcon: "bi-person-arms-up"}, + { title: "Personal Trainer & Wellness", desc: "Gym membership with access to personal trainers (e.g., Chuze Fitness, Vasa). Maybe a ClassPass subscription for variety.", itemIcon: "bi-heart-pulse-fill", financialNote: "Investing in personal well-being."} + ]}, + { min: 7, items: [ + { title: "Concierge Lifestyle", desc: "Personal assistant (part-time) for errands and scheduling. Premium spa treatments (e.g., The Woodhouse Day Spa). Personal shopper for wardrobe updates.", itemIcon: "bi-person-rolodex", luxury: true}, + { title: "Household Support Staff", desc: "Full-time nanny if you have children. Regular landscaping and pool maintenance. Dog walker and pet groomer.", itemIcon: "bi-house-gear-fill", luxury: true, financialNote: "Managing payroll for domestic staff."} + ]}, + { min: 10, items: [ + { title: "Full Estate Management", desc: "Butler, private chef, full-time housekeeping staff, groundskeepers, personal security detail. A dedicated estate manager oversees operations.", itemIcon: "bi-shield-shaded", ultraLuxury: true}, + { title: "Bespoke Global Services", desc: "Access to world-class service professionals on demand, anywhere in the world. 24/7 concierge for any request imaginable.", itemIcon: "bi-headset", ultraLuxury: true, financialNote: "Services budget is a significant portion of overall expenses."} + ]}, + ] + }; + </script> + + <!-- Main Application Script --> + <script> + // Ensure data is loaded before this script runs + if (typeof incomeBrackets === 'undefined' || typeof lifestyleData === 'undefined') { + console.error("Calculator data not found. Make sure the data script is loaded before the main script."); + // You could display an error message to the user here as well + } + + const slider = document.getElementById('incomeSlider'); + const incomeDisplayEl = document.getElementById('incomeDisplay'); + const incomeBracketLabelEl = document.getElementById('incomeBracketLabel'); + const incomeBracketDescEl = document.getElementById('incomeBracketDescription'); + const incomeBarSegmentEl = document.getElementById('incomeBarSegment'); + const bodyEl = document.body; + + function formatIncome(income) { + if (income >= 1000000) return `$${(income / 1000000).toFixed(income % 1000000 === 0 ? 0 : 1)}M`; + if (income >= 1000) return `$${(income / 1000).toFixed(income % 1000 === 0 ? 0 : 0)}K`; + return `$${income.toLocaleString()}`; + } + + function updateDynamicBackground(bracketIndex) { + bodyEl.className = ''; + if (bracketIndex <= 1) bodyEl.classList.add('theme-basic'); + else if (bracketIndex <= 3) bodyEl.classList.add('theme-comfortable'); + else if (bracketIndex <= 6) bodyEl.classList.add('theme-affluent'); + else if (bracketIndex <= 9) bodyEl.classList.add('theme-luxury'); + else if (bracketIndex <= 12) bodyEl.classList.add('theme-ultra'); + else bodyEl.classList.add('theme-elite'); + } + + function updateVisualIncomeBar(bracketIndex) { + const maxVal = parseInt(slider.max); + const percentage = ((bracketIndex / maxVal) * 100); + incomeBarSegmentEl.style.width = `${percentage}%`; + } + + function updateLifestyle(bracketIndex) { + const bracket = incomeBrackets[bracketIndex]; + + incomeDisplayEl.textContent = formatIncome(bracket.income); + incomeBracketLabelEl.textContent = bracket.label; + incomeBracketDescEl.textContent = bracket.description; + + updateDynamicBackground(bracketIndex); + updateVisualIncomeBar(bracketIndex); + + Object.keys(lifestyleData).forEach(category => { + const categoryData = lifestyleData[category]; + const contentDiv = document.getElementById(`${category}-content`); + if (!contentDiv) return; + + let itemsToDisplay = []; + for (let i = categoryData.length - 1; i >= 0; i--) { + if (bracketIndex >= categoryData[i].min) { + itemsToDisplay = categoryData[i].items; + break; + } + } + + const itemsHTML = itemsToDisplay.map((item, idx) => { + let badgeHTML = ''; + if (item.ultraLuxury) badgeHTML = `<span class="ultra-luxury-badge">👑 Ultra Lux</span>`; + else if (item.luxury) badgeHTML = `<span class="luxury-badge">💎 Lux</span>`; + + let itemIconHTML = item.itemIcon ? `<i class="bi ${item.itemIcon} category-item-icon"></i>` : '<i class="bi bi-record-circle category-item-icon"></i>'; + let financialNoteHTML = item.financialNote ? `<div class="item-financial-note">${item.financialNote}</div>` : ''; + + return ` + <div class="category-item animate-item-entry" style="animation-delay: ${idx * 50}ms;"> + ${itemIconHTML} + <div class="item-content-wrapper"> + <div class="d-flex justify-content-between align-items-center"> + <div class="flex-grow-1 me-2"> + <div class="item-title">${item.title}</div> + <div class="item-description">${item.desc}</div> + ${financialNoteHTML} + </div> + ${badgeHTML} + </div> + </div> + </div> + `; + }).join(''); + contentDiv.innerHTML = itemsHTML; + }); + } + + // Set the :root --primary-color-rgb CSS variable for box-shadow transparency + const primaryColorHex = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); + if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(primaryColorHex)) { + let r = 0, g = 0, b = 0; + if (primaryColorHex.length === 4) { + r = parseInt(primaryColorHex[1] + primaryColorHex[1], 16); + g = parseInt(primaryColorHex[2] + primaryColorHex[2], 16); + b = parseInt(primaryColorHex[3] + primaryColorHex[3], 16); + } else if (primaryColorHex.length === 7) { + r = parseInt(primaryColorHex.substring(1, 3), 16); + g = parseInt(primaryColorHex.substring(3, 5), 16); + b = parseInt(primaryColorHex.substring(5, 7), 16); + } + document.documentElement.style.setProperty('--primary-color-rgb', `${r}, ${g}, ${b}`); + } + + + updateLifestyle(parseInt(slider.value)); + slider.addEventListener('input', function() { updateLifestyle(parseInt(this.value)); }); + + document.addEventListener('DOMContentLoaded', function() { + const categories = document.querySelectorAll('.lifestyle-category.fade-in'); + categories.forEach((category, index) => { + category.style.opacity = '0'; + category.style.transform = 'translateY(20px)'; + setTimeout(() => { + category.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out'; + category.style.opacity = '1'; + category.style.transform = 'translateY(0)'; + }, index * 100 + 50); + }); + }); + </script> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> +</body> +</html> \ No newline at end of file