housing-comparison-data
· 1 year ago
8450d4ca1de49bf3d87f5d988fe5931248c5bdde
Parent:
9a1999da1
2 files changed +1345 −0
- housing-comparison-data.json +557 −0
- housing-comparison.html +788 −0
Diff
--- /dev/null +++ b/housing-comparison-data.json @@ -0,0 +1,557 @@ +{ + "housingTiers": [ + { + "budget": 500, + "label": "Survival Housing", + "description": "Shared rooms, hostels, or the cheapest possible shelter. Focus on basic safety and legality.", + "scenario": "Shared bedroom in a house with multiple roommates", + "sqft": "100-150 sq ft", + "location": "Outskirts of low-cost cities", + "features": [ + { + "category": "Basic Shelter", + "icon": "bi-house", + "items": [ + { + "title": "Shared Room", + "description": "Bunk bed or single bed in a shared bedroom with 1-3 other people", + "brands": "Generic furniture from thrift stores, Facebook Marketplace" + }, + { + "title": "Communal Bathroom", + "description": "Shared bathroom with multiple people, basic fixtures", + "brands": "Standard builder-grade fixtures" + } + ] + }, + { + "category": "Utilities", + "icon": "bi-lightning-charge", + "items": [ + { + "title": "Basic Utilities", + "description": "Split electricity, water, sometimes included in rent", + "brands": "Local utility companies" + } + ] + } + ] + }, + { + "budget": 800, + "label": "Minimal Housing", + "description": "Studio apartments or small shared spaces. Very basic but private.", + "scenario": "Small studio apartment or efficiency unit", + "sqft": "200-400 sq ft", + "location": "Lower-income neighborhoods, small towns", + "features": [ + { + "category": "Living Space", + "icon": "bi-house", + "items": [ + { + "title": "Studio/Efficiency", + "description": "Small private space combining bedroom, living area, and kitchenette", + "brands": "IKEA furniture, Target basics" + }, + { + "title": "Galley Kitchen", + "description": "Compact kitchen with basic appliances", + "brands": "Frigidaire, GE basic models" + } + ] + }, + { + "category": "Amenities", + "icon": "bi-gear", + "items": [ + { + "title": "Window AC Unit", + "description": "Basic cooling, often wall-mounted or window unit", + "brands": "Frigidaire, LG basic models" + } + ] + } + ] + }, + { + "budget": 1200, + "label": "Basic Apartment", + "description": "One-bedroom apartment with standard amenities. Safe and functional.", + "scenario": "One-bedroom apartment in average neighborhood", + "sqft": "500-700 sq ft", + "location": "Suburban areas, smaller cities", + "features": [ + { + "category": "Living Space", + "icon": "bi-house-door", + "items": [ + { + "title": "Separate Bedroom", + "description": "Private bedroom with closet space", + "brands": "Ashley Furniture, Wayfair basics" + }, + { + "title": "Full Kitchen", + "description": "Complete kitchen with full-size appliances", + "brands": "Whirlpool, Frigidaire standard models" + }, + { + "title": "Living Room", + "description": "Dedicated living area separate from bedroom", + "brands": "Target, IKEA, HomeGoods" + } + ] + }, + { + "category": "Building Amenities", + "icon": "bi-building", + "items": [ + { + "title": "Laundry Facility", + "description": "On-site laundry room or in-unit washer/dryer hookups", + "brands": "Speed Queen, Maytag community machines" + }, + { + "title": "Parking", + "description": "Assigned parking spot or garage space", + "brands": "Standard parking facilities" + } + ] + } + ] + }, + { + "budget": 1800, + "label": "Comfortable Living", + "description": "Nice apartment or small house with good amenities. Pleasant lifestyle.", + "scenario": "Two-bedroom apartment or small house", + "sqft": "800-1200 sq ft", + "location": "Good neighborhoods, suburban areas", + "features": [ + { + "category": "Living Space", + "icon": "bi-house-heart", + "items": [ + { + "title": "Two Bedrooms", + "description": "Master bedroom plus office/guest room", + "brands": "West Elm, CB2, Pottery Barn basics" + }, + { + "title": "Updated Kitchen", + "description": "Modern appliances, good counter space, dishwasher", + "brands": "Samsung, LG mid-range appliances" + }, + { + "title": "Central Air/Heat", + "description": "HVAC system for comfortable climate control", + "brands": "Carrier, Trane standard models" + } + ] + }, + { + "category": "Amenities", + "icon": "bi-stars", + "items": [ + { + "title": "In-Unit Laundry", + "description": "Washer and dryer in apartment or house", + "brands": "Whirlpool, Samsung mid-range" + }, + { + "title": "Patio/Balcony", + "description": "Private outdoor space", + "brands": "Standard construction" + } + ] + } + ] + }, + { + "budget": 2800, + "label": "Upscale Living", + "description": "High-quality apartment or nice house with premium features.", + "scenario": "Luxury apartment or 3-bedroom house", + "sqft": "1200-1800 sq ft", + "location": "Desirable neighborhoods, good school districts", + "features": [ + { + "category": "Living Space", + "icon": "bi-gem", + "items": [ + { + "title": "Three Bedrooms", + "description": "Master suite plus additional bedrooms", + "brands": "Pottery Barn, Williams Sonoma Home" + }, + { + "title": "Gourmet Kitchen", + "description": "Granite counters, stainless appliances, island", + "brands": "KitchenAid, Bosch, Samsung premium lines" + }, + { + "title": "Hardwood Floors", + "description": "Quality flooring throughout main areas", + "brands": "Bruce, Mohawk, engineered hardwood" + } + ] + }, + { + "category": "Luxury Features", + "icon": "bi-award", + "items": [ + { + "title": "Fitness Center", + "description": "Building gym or community fitness facilities", + "brands": "Life Fitness, Precor equipment" + }, + { + "title": "Pool/Spa", + "description": "Community pool and hot tub", + "brands": "Standard pool construction" + } + ] + } + ] + }, + { + "budget": 4500, + "label": "Luxury Living", + "description": "Premium housing with high-end finishes and exclusive amenities.", + "scenario": "Luxury high-rise or executive home", + "sqft": "1800-2500 sq ft", + "location": "Prime locations, downtown luxury buildings", + "features": [ + { + "category": "Premium Spaces", + "icon": "bi-crown", + "items": [ + { + "title": "Master Suite", + "description": "Large bedroom with walk-in closet and luxury bath", + "brands": "Restoration Hardware, Room & Board" + }, + { + "title": "Chef's Kitchen", + "description": "Professional-grade appliances, custom cabinetry", + "brands": "Sub-Zero, Wolf, Miele appliances" + }, + { + "title": "Smart Home Features", + "description": "Automated lighting, climate, and security systems", + "brands": "Nest, Lutron, Ring Pro systems" + } + ] + }, + { + "category": "Exclusive Amenities", + "icon": "bi-building-check", + "items": [ + { + "title": "Concierge Service", + "description": "24/7 front desk and concierge assistance", + "brands": "Professional building management" + }, + { + "title": "Rooftop Deck", + "description": "Private or shared rooftop with city views", + "brands": "Luxury building amenities" + } + ] + } + ] + }, + { + "budget": 7500, + "label": "High-End Luxury", + "description": "Premium real estate with designer finishes and exclusive services.", + "scenario": "Luxury penthouse or high-end single family home", + "sqft": "2500-4000 sq ft", + "location": "Elite neighborhoods, luxury high-rises", + "features": [ + { + "category": "Designer Living", + "icon": "bi-palette", + "items": [ + { + "title": "Custom Interior Design", + "description": "Professional interior design and custom furniture", + "brands": "Custom pieces, high-end designers" + }, + { + "title": "Wine Cellar", + "description": "Climate-controlled wine storage", + "brands": "Sub-Zero wine preservation, custom wine storage" + }, + { + "title": "Home Theater", + "description": "Dedicated media room with premium audio/visual", + "brands": "Sony, Samsung premium displays, Bose audio" + } + ] + }, + { + "category": "Advanced Technology", + "icon": "bi-cpu", + "items": [ + { + "title": "Home Automation", + "description": "Integrated smart home ecosystem", + "brands": "Control4, Crestron, Savant systems" + }, + { + "title": "Security System", + "description": "Advanced security with cameras and monitoring", + "brands": "ADT premium, SimpliSafe Pro" + } + ] + } + ] + }, + { + "budget": 12000, + "label": "Ultra-Luxury", + "description": "Exceptional properties with world-class amenities and services.", + "scenario": "Penthouse or luxury estate", + "sqft": "4000-6000 sq ft", + "location": "Most prestigious addresses", + "features": [ + { + "category": "Luxury Living", + "icon": "bi-star-fill", + "items": [ + { + "title": "Multiple Master Suites", + "description": "Each with en-suite baths and luxury finishes", + "brands": "Custom millwork, Italian marble" + }, + { + "title": "Professional Kitchen", + "description": "Restaurant-quality appliances and prep areas", + "brands": "La Cornue, Viking, Gaggenau" + }, + { + "title": "Private Gym", + "description": "Fully equipped fitness center", + "brands": "Technogym, Life Fitness premium" + } + ] + }, + { + "category": "Wellness & Entertainment", + "icon": "bi-heart-pulse", + "items": [ + { + "title": "Spa Facilities", + "description": "Sauna, steam room, massage room", + "brands": "Finnleo saunas, Steamist steam systems" + }, + { + "title": "Private Pool", + "description": "Indoor/outdoor pool with spa features", + "brands": "Endless Pools, premium pool construction" + } + ] + } + ] + }, + { + "budget": 20000, + "label": "Elite Residential", + "description": "World-class properties with every conceivable luxury and service.", + "scenario": "Luxury estate or ultra-premium penthouse", + "sqft": "6000-10000 sq ft", + "location": "Exclusive enclaves, prestigious addresses", + "features": [ + { + "category": "Estate Features", + "icon": "bi-house-gear", + "items": [ + { + "title": "Multiple Entertainment Areas", + "description": "Formal and casual dining, multiple living spaces", + "brands": "Custom furniture from top designers" + }, + { + "title": "Professional Office", + "description": "Fully equipped home office with meeting capabilities", + "brands": "Herman Miller, high-end office furnishings" + }, + { + "title": "Guest Accommodations", + "description": "Separate guest suites with full amenities", + "brands": "Hotel-quality linens and amenities" + } + ] + }, + { + "category": "Advanced Amenities", + "icon": "bi-layers", + "items": [ + { + "title": "Climate Wine Storage", + "description": "Professional wine collection storage", + "brands": "EuroCave, Sub-Zero wine preservation" + }, + { + "title": "Smart Building Integration", + "description": "Building-wide smart systems and services", + "brands": "Building-integrated technology systems" + } + ] + } + ] + }, + { + "budget": 35000, + "label": "Ultra High Net Worth", + "description": "Extraordinary properties with private services and unique amenities.", + "scenario": "Luxury estate with grounds and staff", + "sqft": "10000+ sq ft", + "location": "Most exclusive neighborhoods worldwide", + "features": [ + { + "category": "Estate Grounds", + "icon": "bi-tree", + "items": [ + { + "title": "Landscaped Grounds", + "description": "Professional landscaping with gardens and outdoor spaces", + "brands": "Professional landscape architects" + }, + { + "title": "Staff Quarters", + "description": "Separate accommodations for household staff", + "brands": "Professional staff housing" + }, + { + "title": "Private Tennis Court", + "description": "Professional tennis court with lighting", + "brands": "Professional court construction" + } + ] + }, + { + "category": "Luxury Services", + "icon": "bi-person-check", + "items": [ + { + "title": "Household Staff", + "description": "Live-in or daily staff for property management", + "brands": "Professional domestic staffing services" + }, + { + "title": "Private Security", + "description": "24/7 security presence and monitoring", + "brands": "Professional security firms" + } + ] + } + ] + }, + { + "budget": 60000, + "label": "Billionaire Class", + "description": "The pinnacle of residential luxury with unlimited customization.", + "scenario": "Multi-acre estate or trophy penthouse", + "sqft": "15000+ sq ft", + "location": "World's most prestigious addresses", + "features": [ + { + "category": "Unique Amenities", + "icon": "bi-diamond", + "items": [ + { + "title": "Private Helipad", + "description": "Personal helicopter landing area", + "brands": "FAA-approved helipad construction" + }, + { + "title": "Art Gallery Spaces", + "description": "Museum-quality display areas for art collections", + "brands": "Professional gallery lighting and security" + }, + { + "title": "Private Spa Complex", + "description": "Full spa with multiple treatment rooms", + "brands": "Professional spa equipment and design" + } + ] + }, + { + "category": "Ultimate Luxury", + "icon": "bi-infinity", + "items": [ + { + "title": "Custom Architecture", + "description": "Completely custom design by world-renowned architects", + "brands": "Celebrity architects and designers" + }, + { + "title": "Private Chef Kitchen", + "description": "Professional chef facilities with staff dining", + "brands": "Commercial-grade restaurant equipment" + }, + { + "title": "Multi-Car Garage", + "description": "Climate-controlled garage for luxury vehicle collections", + "brands": "Custom car storage and display systems" + } + ] + } + ] + } + ], + "designThemes": [ + { + "tier": "basic", + "primaryColor": "#6c757d", + "backgroundColor": "#f8f9fa", + "accentColor": "#495057", + "description": "Simple, functional design focusing on affordability" + }, + { + "tier": "comfortable", + "primaryColor": "#0dcaf0", + "backgroundColor": "#e0fbfc", + "accentColor": "#0891b2", + "description": "Clean, modern aesthetic with comfort in mind" + }, + { + "tier": "upscale", + "primaryColor": "#198754", + "backgroundColor": "#d1e7dd", + "accentColor": "#146c43", + "description": "Sophisticated design with quality materials" + }, + { + "tier": "luxury", + "primaryColor": "#fd7e14", + "backgroundColor": "#fff3cd", + "accentColor": "#ca6510", + "description": "Premium design with designer touches" + }, + { + "tier": "ultra-luxury", + "primaryColor": "#6f42c1", + "backgroundColor": "#e2d9f3", + "accentColor": "#59359a", + "description": "High-end design with custom elements" + }, + { + "tier": "elite", + "primaryColor": "#d63384", + "backgroundColor": "#f7d6e6", + "accentColor": "#b02a5b", + "description": "Exclusive design with bespoke features" + }, + { + "tier": "billionaire", + "primaryColor": "#000000", + "backgroundColor": "#1a1a1a", + "accentColor": "#ffd700", + "description": "Ultimate luxury with unlimited customization" + } + ] +} \ No newline at end of file --- /dev/null +++ b/housing-comparison.html @@ -0,0 +1,788 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8" /> + <meta content="width=device-width, initial-scale=1.0" name="viewport" /> + <title>Housing Comparison: From Basic to Billionaire - What Your Budget Really Gets You</title> + <meta + content="Explore how different housing budgets translate to real living standards. From $500 shared rooms to $60K+ luxury estates, see what amenities, brands, and lifestyle your housing budget affords with this interactive comparison tool." + name="description" /> + <meta + content="housing comparison, real estate budget, luxury housing, apartment amenities, home features, housing calculator, luxury homes, high net worth housing, real estate lifestyle, housing market" + name="keywords" /> + <link href="https://cheatsheets.davidveksler.com/housing-comparison.html" rel="canonical" /> + + <!-- Open Graph / Facebook --> + <meta content="website" property="og:type" /> + <meta content="https://cheatsheets.davidveksler.com/housing-comparison.html" property="og:url" /> + <meta content="Housing Comparison: From Basic to Billionaire - What Your Budget Really Gets You" property="og:title" /> + <meta + content="Explore how different housing budgets translate to real living standards. From $500 shared rooms to $60K+ luxury estates, see what your housing budget affords." + property="og:description" /> + <meta content="images/housing-comparison.png" property="og:image" /> + <meta content="Interactive housing comparison tool showing budget to amenities 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/housing-comparison.html" name="twitter:url" /> + <meta content="Housing Comparison: From Basic to Billionaire - What Your Budget Really Gets You" name="twitter:title" /> + <meta + content="Explore how different housing budgets translate to real living standards. From $500 shared rooms to $60K+ luxury estates, see what your housing budget affords." + name="twitter:description" /> + <meta content="images/housing-comparison.png" name="twitter:image" /> + <meta content="@heroiclife" name="twitter:creator" /> + + <!-- SEO: JSON-LD Structured Data --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "WebApplication", + "name": "Housing Comparison: From Basic to Billionaire", + "description": "An interactive tool to explore how housing budgets from $500 to $60K+ translate to real-world living standards, amenities, and lifestyle features.", + "applicationCategory": "RealEstateApplication", + "operatingSystem": "All", + "browserRequirements": "Requires a modern web browser with JavaScript enabled.", + "url": "https://cheatsheets.davidveksler.com/housing-comparison.html", + "creator": { + "@type": "Person", + "name": "David Veksler (AI Generated)" + }, + "publisher": { + "@type": "Organization", + "name": "David Veksler Cheatsheets" + }, + "datePublished": "2025-01-07", + "dateModified": "2025-01-07", + "keywords": "housing comparison, real estate budget, luxury housing, apartment amenities, home features, housing calculator" + } + </script> + + <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" + rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" /> + <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: #6c757d; + --primary-color-rgb: 108, 117, 125; + --secondary-color: #495057; + --success-color: #198754; + --warning-color: #ffc107; + --danger-color: #dc3545; + --info-color: #0dcaf0; + --dark-color: #212529; + --light-color: #f8f9fa; + + --body-bg-color: #f8f9fa; + --main-container-bg: rgba(255, 255, 255, 0.98); + --main-container-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); + --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + --border-radius: 0.75rem; + + --page-title-font-family: 'Roboto Slab', serif; + --page-title-color: var(--primary-color); + --page-title-letter-spacing: normal; + --page-title-text-transform: none; + --page-title-font-weight: 700; + + --category-title-font-family: 'Roboto Slab', serif; + --category-title-letter-spacing: normal; + --category-title-text-transform: none; + --category-title-font-weight: 700; + + --category-icon-opacity: 0.8; + --item-title-font-weight: 600; + --item-description-color: #495057; + --category-item-border-color: #dee2e6; + + --slider-thumb-bg: var(--primary-color); + --slider-thumb-border: 5px solid white; + --slider-thumb-shadow-opacity: 0.5; + + --budget-note-bg: #fff3cd; + --budget-note-border: #ffeeba; + --budget-note-text: var(--dark-color); + + --housing-tier-desc-color: #495057; + } + + body { + font-family: 'Inter', sans-serif; + padding: 2rem 0; + color: var(--dark-color); + background-color: var(--body-bg-color); + transition: background-color 1.2s ease-in-out, color 1.2s ease-in-out; + } + + .background-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -2; + } + + #background-layer-1, + #background-layer-2 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity 1.2s ease-in-out, background 1.2s ease-in-out; + opacity: 0; + z-index: -1; + } + + .theme-basic { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } + .theme-comfortable { background: linear-gradient(135deg, #e0fbfc 0%, #c2f0fc 100%); } + .theme-upscale { background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%); } + .theme-luxury { background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%); } + .theme-ultra-luxury { background: linear-gradient(135deg, #e2d9f3 0%, #d1c4e9 100%); } + .theme-elite { background: linear-gradient(135deg, #f7d6e6 0%, #f3c5d4 100%); } + .theme-billionaire { background: linear-gradient(135deg, #1a1a1a 0%, #333333 70%, #ffd700 100%); } + + .main-container { + background: var(--main-container-bg); + backdrop-filter: blur(5px); + border-radius: var(--border-radius); + box-shadow: var(--main-container-shadow); + padding: 2.5rem; + margin-bottom: 2rem; + transition: background-color 1.2s ease-in-out, box-shadow 1.2s ease-in-out; + } + + .page-title { + font-family: var(--page-title-font-family); + font-size: 2.6rem; + font-weight: var(--page-title-font-weight); + color: var(--page-title-color); + margin-bottom: 0.25rem; + letter-spacing: var(--page-title-letter-spacing); + text-transform: var(--page-title-text-transform); + transition: color 1.2s ease-in-out, letter-spacing 0.5s ease, text-transform 0.5s ease; + } + + body.billionaire-theme-active .page-title { + letter-spacing: 2px; + text-transform: uppercase; + font-weight: 600; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); + } + + body.elite-theme-active .page-title { + text-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.6); + } + + .page-subtitle { + font-size: 1.0rem; + color: var(--secondary-color); + margin-bottom: 0.5rem; + transition: color 1.2s ease-in-out; + } + + .budget-note { + font-size: 0.9rem; + color: var(--budget-note-text); + font-style: normal; + font-weight: 500; + background-color: var(--budget-note-bg); + border: 1px solid var(--budget-note-border); + padding: 0.5rem 0.75rem; + border-radius: 0.375rem; + margin-bottom: 1.5rem; + text-align: center; + transition: background-color 1.2s ease-in-out, color 1.2s ease-in-out, border-color 1.2s ease-in-out; + } + + .controls-container { + background: var(--light-color); + border-radius: var(--border-radius); + padding: 1.5rem; + margin-bottom: 2rem; + border: 1px solid var(--category-item-border-color); + transition: background-color 1.2s ease-in-out, border-color 1.2s ease-in-out; + } + + .budget-display { + font-family: 'Roboto Slab', serif; + font-size: 2.3rem; + font-weight: 700; + color: var(--primary-color); + text-align: center; + margin-bottom: 0.1rem; + transition: color 1.2s ease-in-out; + } + + body.billionaire-theme-active .budget-display { + text-shadow: 0 0 12px rgba(255, 215, 0, 0.9); + } + + body.elite-theme-active .budget-display { + text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); + } + + .housing-tier-label { + font-size: 1.3rem; + color: var(--dark-color); + text-align: center; + font-weight: 600; + margin-bottom: 0.25rem; + transition: color 1.2s ease-in-out; + } + + .housing-tier-description { + font-size: 0.9rem; + color: var(--housing-tier-desc-color); + text-align: center; + font-weight: 400; + margin-bottom: 0.5rem; + min-height: 38px; + line-height: 1.4; + transition: color 1.2s ease-in-out; + } + + .housing-scenario { + font-size: 0.85rem; + color: var(--secondary-color); + text-align: center; + font-style: italic; + margin-bottom: 0.5rem; + transition: color 1.2s ease-in-out; + } + + .housing-specs { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; + } + + .spec-item { + text-align: center; + font-size: 0.8rem; + color: var(--secondary-color); + } + + .spec-value { + font-weight: 600; + color: var(--dark-color); + display: block; + font-size: 0.9rem; + } + + .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(--slider-thumb-bg); + cursor: pointer; + border: var(--slider-thumb-border); + box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), var(--slider-thumb-shadow-opacity)); + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; + } + + .slider::-moz-range-thumb { + width: 30px; + height: 30px; + border-radius: 50%; + background: var(--slider-thumb-bg); + cursor: pointer; + border: var(--slider-thumb-border); + box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), var(--slider-thumb-shadow-opacity)); + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; + } + + .slider-labels { + display: flex; + justify-content: space-between; + font-size: 0.85rem; + color: var(--secondary-color); + padding: 0 5px; + transition: color 1.2s ease-in-out; + } + + .housing-category { + background: #ffffff; + border-radius: var(--border-radius); + padding: 1.75rem; + margin-bottom: 1.75rem; + border-left: 6px solid var(--primary-color); + box-shadow: var(--card-shadow); + transition: all 0.3s ease; + } + + body.billionaire-theme-active .housing-category { + background: var(--light-color); + } + + .housing-category:hover { + transform: translateY(-4px) scale(1.015); + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); + } + + body.elite-theme-active .housing-category:hover, + body.billionaire-theme-active .housing-category:hover { + box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.3); + } + + .category-title { + font-family: var(--category-title-font-family); + font-size: 1.5rem; + font-weight: var(--category-title-font-weight); + color: var(--dark-color); + margin-bottom: 1.25rem; + display: flex; + align-items: center; + gap: 0.85rem; + letter-spacing: var(--category-title-letter-spacing); + text-transform: var(--category-title-text-transform); + transition: color 1.2s ease-in-out, letter-spacing 0.5s ease, text-transform 0.5s ease; + } + + body.billionaire-theme-active .category-title { + text-transform: uppercase; + letter-spacing: 1.5px; + font-weight: 600; + } + + .category-icon { + font-size: 2rem; + color: var(--primary-color); + opacity: var(--category-icon-opacity); + transition: color 1.2s ease-in-out, opacity 1.2s ease-in-out; + } + + .category-item-icon { + font-size: 1.6rem; + color: var(--primary-color); + opacity: 0.75; + margin-right: 1rem; + vertical-align: middle; + flex-shrink: 0; + width: 32px; + text-align: center; + transition: color 1.2s ease-in-out; + } + + .category-item { + background: var(--light-color); + border-radius: 10px; + padding: 1.25rem; + margin-bottom: 1rem; + border: 1px solid var(--category-item-border-color); + display: flex; + align-items: flex-start; + transition: background-color 0.2s ease, border-color 1.2s ease-in-out; + } + + .category-item:hover { + background-color: #e9ecef; + } + + body.elite-theme-active .category-item:hover { + background-color: #f8e6f0; + } + + body.billionaire-theme-active .category-item:hover { + background-color: #404040; + } + + .item-title { + font-weight: var(--item-title-font-weight); + font-size: 1.0rem; + color: var(--dark-color); + margin-bottom: 0.3rem; + display: flex; + align-items: center; + transition: color 1.2s ease-in-out, font-weight 0.5s ease; + } + + .item-description { + color: var(--item-description-color); + font-size: 0.85rem; + line-height: 1.5; + margin-bottom: 0.3rem; + transition: color 1.2s ease-in-out; + } + + .item-brands { + color: var(--secondary-color); + font-size: 0.8rem; + font-style: italic; + margin-top: 0.4rem; + opacity: 0.9; + transition: color 1.2s ease-in-out; + } + + .highlight-update { + animation: highlight-animation 1.2s ease-out; + } + + @keyframes highlight-animation { + 0% { + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); + transform: scale(1); + } + 30% { + box-shadow: 0 10px 40px rgba(255, 193, 7, 0.7); + transform: scale(1.02); + } + 100% { + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); + transform: scale(1); + } + } + + @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); + } + } + + @media print { + .controls-container, + .background-container { + display: none !important; + } + + .main-container { + box-shadow: none; + background: white; + } + + .housing-category { + break-inside: avoid; + page-break-inside: avoid; + } + } + </style> +</head> + +<body> + <div class="background-container"> + <div id="background-layer-1"></div> + <div id="background-layer-2"></div> + </div> + + <main class="container"> + <div class="main-container"> + <div class="text-center"> + <h1 class="page-title">🏠 Housing Comparison</h1> + <p class="page-subtitle">Slide to see what your housing budget really gets you!</p> + <p class="budget-note"><i class="bi bi-info-circle-fill"></i> This comparison shows **monthly housing costs** across different budget tiers. Costs are based on median US markets and vary by location.</p> + </div> + + <div class="controls-container"> + <div class="budget-display" id="budgetDisplay">$1,200</div> + <div class="housing-tier-label" id="housingTierLabel">Basic Apartment</div> + <div class="housing-tier-description" id="housingTierDescription">One-bedroom apartment with standard amenities. Safe and functional.</div> + <div class="housing-scenario" id="housingScenario">One-bedroom apartment in average neighborhood</div> + + <div class="housing-specs"> + <div class="spec-item"> + <span class="spec-value" id="sqftDisplay">500-700 sq ft</span> + Square Footage + </div> + <div class="spec-item"> + <span class="spec-value" id="locationDisplay">Suburban areas, smaller cities</span> + Location Type + </div> + </div> + + <input class="slider" id="housingSlider" max="10" min="0" type="range" value="2" /> + <div class="slider-labels"> + <span>$500</span> + <span>$20K</span> + <span>$60K</span> + </div> + </div> + + <div id="housing-features-container"></div> + </div> + </main> + + <footer class="container text-center py-3"> + <div> + <a class="mx-2 link-secondary" href="https://www.linkedin.com/in/davidveksler/" target="_blank" + title="David Veksler on LinkedIn"> + <i class="bi bi-linkedin"></i> LinkedIn + </a> + <a class="mx-2 link-secondary" href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets"> + <i class="bi bi-collection"></i> All Cheatsheets + </a> + </div> + </footer> + + <script> + let housingTiers = []; + let designThemes = []; + let lastSliderValue = -1; + + const slider = document.getElementById('housingSlider'); + const budgetDisplayEl = document.getElementById('budgetDisplay'); + const housingTierLabelEl = document.getElementById('housingTierLabel'); + const housingTierDescEl = document.getElementById('housingTierDescription'); + const housingScenarioEl = document.getElementById('housingScenario'); + const sqftDisplayEl = document.getElementById('sqftDisplay'); + const locationDisplayEl = document.getElementById('locationDisplay'); + const housingFeaturesContainer = document.getElementById('housing-features-container'); + + const bgLayer1 = document.getElementById('background-layer-1'); + const bgLayer2 = document.getElementById('background-layer-2'); + let activeBgLayer = 1; + + function formatBudget(budget) { + if (budget >= 1000) return `$${(budget / 1000).toFixed(budget % 1000 === 0 ? 0 : 1)}K`; + return `$${budget.toLocaleString()}`; + } + + function getRGBFromHex(hex) { + if (!hex || typeof hex !== 'string') return '108, 117, 125'; + let r = 0, g = 0, b = 0; + const hexColor = hex.startsWith('#') ? hex : `#${hex}`; + + if (hexColor.length === 4) { + r = parseInt(hexColor[1] + hexColor[1], 16); + g = parseInt(hexColor[2] + hexColor[2], 16); + b = parseInt(hexColor[3] + hexColor[3], 16); + } else if (hexColor.length === 7) { + r = parseInt(hexColor.substring(1, 3), 16); + g = parseInt(hexColor.substring(3, 5), 16); + b = parseInt(hexColor.substring(5, 7), 16); + } else { + return '108, 117, 125'; + } + if (isNaN(r) || isNaN(g) || isNaN(b)) return '108, 117, 125'; + return `${r}, ${g}, ${b}`; + } + + function updateThemeStyling(tierIndex) { + const body = document.body; + const rootStyle = document.documentElement.style; + + body.classList.remove('elite-theme-active', 'billionaire-theme-active'); + + if (tierIndex >= 10) { // Billionaire Class + body.classList.add('billionaire-theme-active'); + const theme = designThemes.find(t => t.tier === 'billionaire'); + if (theme) { + rootStyle.setProperty('--primary-color', theme.primaryColor); + rootStyle.setProperty('--primary-color-rgb', getRGBFromHex(theme.primaryColor)); + rootStyle.setProperty('--secondary-color', theme.accentColor); + rootStyle.setProperty('--dark-color', '#f5f5f5'); + rootStyle.setProperty('--light-color', '#2a2a2a'); + rootStyle.setProperty('--body-bg-color', theme.backgroundColor); + rootStyle.setProperty('--main-container-bg', 'rgba(42, 42, 42, 0.97)'); + rootStyle.setProperty('--category-icon-opacity', '1'); + rootStyle.setProperty('--item-title-font-weight', '700'); + rootStyle.setProperty('--item-description-color', '#d3d3d3'); + rootStyle.setProperty('--category-item-border-color', '#444444'); + rootStyle.setProperty('--budget-note-bg', '#303030'); + rootStyle.setProperty('--budget-note-border', '#505050'); + rootStyle.setProperty('--budget-note-text', '#e0e0e0'); + updateDynamicBackground('billionaire'); + } + } else if (tierIndex >= 8) { // Elite Residential + body.classList.add('elite-theme-active'); + const theme = designThemes.find(t => t.tier === 'elite'); + if (theme) { + rootStyle.setProperty('--primary-color', theme.primaryColor); + rootStyle.setProperty('--primary-color-rgb', getRGBFromHex(theme.primaryColor)); + rootStyle.setProperty('--secondary-color', theme.accentColor); + rootStyle.setProperty('--body-bg-color', theme.backgroundColor); + updateDynamicBackground('elite'); + } + } else { + // Reset to tier-appropriate theme + const themeMap = { + 0: 'basic', 1: 'basic', + 2: 'comfortable', 3: 'comfortable', + 4: 'upscale', 5: 'upscale', + 6: 'luxury', 7: 'ultra-luxury' + }; + const themeTier = themeMap[tierIndex] || 'basic'; + const theme = designThemes.find(t => t.tier === themeTier); + if (theme) { + rootStyle.setProperty('--primary-color', theme.primaryColor); + rootStyle.setProperty('--primary-color-rgb', getRGBFromHex(theme.primaryColor)); + rootStyle.setProperty('--secondary-color', theme.accentColor); + rootStyle.setProperty('--body-bg-color', theme.backgroundColor); + } + updateDynamicBackground(themeTier); + } + + body.style.backgroundColor = rootStyle.getPropertyValue('--body-bg-color').trim(); + } + + function updateDynamicBackground(themeType) { + const themeClass = `theme-${themeType}`; + + if (activeBgLayer === 1) { + bgLayer2.className = `background-layer ${themeClass}`; + bgLayer1.style.opacity = 0; + bgLayer2.style.opacity = 1; + activeBgLayer = 2; + } else { + bgLayer1.className = `background-layer ${themeClass}`; + bgLayer1.style.opacity = 1; + bgLayer2.style.opacity = 0; + activeBgLayer = 1; + } + } + + function updateHousingDisplay() { + if (!housingTiers || housingTiers.length === 0) return; + + const selectedTierIndex = parseInt(slider.value); + const tier = housingTiers[selectedTierIndex]; + if (!tier) return; + + updateThemeStyling(selectedTierIndex); + + budgetDisplayEl.textContent = formatBudget(tier.budget); + housingTierLabelEl.textContent = tier.label; + housingTierDescEl.textContent = tier.description; + housingScenarioEl.textContent = tier.scenario; + sqftDisplayEl.textContent = tier.sqft; + locationDisplayEl.textContent = tier.location; + + // Update features + const oldHTML = housingFeaturesContainer.innerHTML; + const featuresHTML = tier.features.map((category, categoryIdx) => { + const itemsHTML = category.items.map((item, itemIdx) => { + const brandsHTML = item.brands ? `<div class="item-brands">${item.brands}</div>` : ''; + return ` + <div class="category-item animate-item-entry" style="animation-delay: ${itemIdx * 50}ms;"> + <i class="bi ${category.icon} category-item-icon"></i> + <div class="item-content-wrapper"> + <div class="item-title">${item.title}</div> + <div class="item-description">${item.description}</div> + ${brandsHTML} + </div> + </div>`; + }).join(''); + + return ` + <div class="housing-category fade-in" style="animation-delay: ${categoryIdx * 100}ms;"> + <div class="category-title"> + <i class="bi ${category.icon} category-icon"></i> + ${category.category} + </div> + ${itemsHTML} + </div>`; + }).join(''); + + housingFeaturesContainer.innerHTML = featuresHTML; + + if (housingFeaturesContainer.innerHTML !== oldHTML) { + const categoryCards = housingFeaturesContainer.querySelectorAll('.housing-category'); + categoryCards.forEach(card => { + card.classList.remove('highlight-update'); + void card.offsetWidth; + card.classList.add('highlight-update'); + }); + } + + lastSliderValue = selectedTierIndex; + } + + function initializeApp() { + slider.max = housingTiers.length - 1; + lastSliderValue = parseInt(slider.value); + updateHousingDisplay(); + + slider.addEventListener('input', updateHousingDisplay); + + // Initial fade-in animation for categories + setTimeout(() => { + const categories = document.querySelectorAll('.housing-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); + }); + }, 100); + } + + document.addEventListener('DOMContentLoaded', () => { + fetch('https://cheatsheets.davidveksler.com/housing-comparison-data.json') + .then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + housingTiers = data.housingTiers; + designThemes = data.designThemes; + initializeApp(); + }) + .catch(error => { + console.error("Could not fetch or parse housing data:", error); + const mainContainer = document.querySelector('.main-container'); + if (mainContainer) { + mainContainer.innerHTML = ` + <div class="alert alert-danger" role="alert"> + <strong>Error:</strong> Could not load housing data. Please ensure 'housing-comparison-data.json' is accessible. + </div>`; + } + }); + }); + </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