🏠
· 1 year ago
0e231817bee1f565a181116d4f4b582363977d58
Parent:
d17831ce5
2 files changed +73 −1
- housing-comparison-data.json +30 −0
- housing-comparison.html +43 −1
Diff
--- a/housing-comparison-data.json +++ b/housing-comparison-data.json @@ -7,6 +7,8 @@ "scenario": "Shared bedroom in a house with multiple roommates", "sqft": "100-150 sq ft", "location": "Outskirts of low-cost cities", + "icon": "bi-door-open", + "ownershipType": "rent", "features": [ { "category": "Basic Shelter", @@ -44,6 +46,8 @@ "scenario": "Small studio apartment or efficiency unit", "sqft": "200-400 sq ft", "location": "Lower-income neighborhoods, small towns", + "icon": "bi-house-door", + "ownershipType": "rent", "features": [ { "category": "Living Space", @@ -81,6 +85,8 @@ "scenario": "One-bedroom apartment in average neighborhood", "sqft": "500-700 sq ft", "location": "Suburban areas, smaller cities", + "icon": "bi-house", + "ownershipType": "rent", "features": [ { "category": "Living Space", @@ -128,6 +134,9 @@ "scenario": "Two-bedroom apartment or small house", "sqft": "800-1200 sq ft", "location": "Good neighborhoods, suburban areas", + "icon": "bi-house-heart", + "ownershipType": "rent", + "homePrice": "$180K - $250K" "features": [ { "category": "Living Space", @@ -175,6 +184,9 @@ "scenario": "Luxury apartment or 3-bedroom house", "sqft": "1200-1800 sq ft", "location": "Desirable neighborhoods, good school districts", + "icon": "bi-houses", + "ownershipType": "own", + "homePrice": "$300K - $450K" "features": [ { "category": "Living Space", @@ -222,6 +234,9 @@ "scenario": "Luxury high-rise or executive home", "sqft": "1800-2500 sq ft", "location": "Prime locations, downtown luxury buildings", + "icon": "bi-building", + "ownershipType": "own", + "homePrice": "$650K - $1.2M" "features": [ { "category": "Premium Spaces", @@ -269,6 +284,9 @@ "scenario": "Luxury penthouse or high-end single family home", "sqft": "2500-4000 sq ft", "location": "Elite neighborhoods, luxury high-rises", + "icon": "bi-house-gear", + "ownershipType": "own", + "homePrice": "$1.5M - $3M" "features": [ { "category": "Designer Living", @@ -316,6 +334,9 @@ "scenario": "Penthouse or luxury estate", "sqft": "4000-6000 sq ft", "location": "Most prestigious addresses", + "icon": "bi-gem", + "ownershipType": "own", + "homePrice": "$3M - $8M" "features": [ { "category": "Luxury Living", @@ -363,6 +384,9 @@ "scenario": "Luxury estate or ultra-premium penthouse", "sqft": "6000-10000 sq ft", "location": "Exclusive enclaves, prestigious addresses", + "icon": "bi-crown", + "ownershipType": "own", + "homePrice": "$8M - $25M" "features": [ { "category": "Estate Features", @@ -410,6 +434,9 @@ "scenario": "Luxury estate with grounds and staff", "sqft": "10000+ sq ft", "location": "Most exclusive neighborhoods worldwide", + "icon": "bi-bank", + "ownershipType": "own", + "homePrice": "$25M - $100M" "features": [ { "category": "Estate Grounds", @@ -457,6 +484,9 @@ "scenario": "Multi-acre estate or trophy penthouse", "sqft": "15000+ sq ft", "location": "World's most prestigious addresses", + "icon": "bi-award", + "ownershipType": "own", + "homePrice": "$100M+" "features": [ { "category": "Unique Amenities", --- a/housing-comparison.html +++ b/housing-comparison.html @@ -172,6 +172,11 @@ transition: color 1.2s ease-in-out, letter-spacing 0.5s ease, text-transform 0.5s ease; } + #titleIcon { + transition: all 0.3s ease-in-out; + display: inline-block; + } + body.billionaire-theme-active .page-title { letter-spacing: 2px; text-transform: uppercase; @@ -515,7 +520,7 @@ <main class="container"> <div class="main-container"> <div class="text-center"> - <h1 class="page-title">🏠 Housing Comparison</h1> + <h1 class="page-title"><span id="titleIcon">🏠</span> 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> @@ -535,6 +540,10 @@ <span class="spec-value" id="locationDisplay">Suburban areas, smaller cities</span> Location Type </div> + <div class="spec-item" id="homePriceSpec" style="display: none;"> + <span class="spec-value" id="homePriceDisplay">$300K - $450K</span> + Total Home Price + </div> </div> <input class="slider" id="housingSlider" max="10" min="0" type="range" value="2" /> @@ -573,6 +582,9 @@ const housingScenarioEl = document.getElementById('housingScenario'); const sqftDisplayEl = document.getElementById('sqftDisplay'); const locationDisplayEl = document.getElementById('locationDisplay'); + const homePriceDisplayEl = document.getElementById('homePriceDisplay'); + const homePriceSpecEl = document.getElementById('homePriceSpec'); + const titleIconEl = document.getElementById('titleIcon'); const housingFeaturesContainer = document.getElementById('housing-features-container'); const bgLayer1 = document.getElementById('background-layer-1'); @@ -584,6 +596,23 @@ return `$${budget.toLocaleString()}`; } + function getIconEmoji(iconClass) { + const iconMap = { + 'bi-door-open': '🚪', + 'bi-house-door': '🏠', + 'bi-house': '🏡', + 'bi-house-heart': '🏘️', + 'bi-houses': '🏘️', + 'bi-building': '🏢', + 'bi-house-gear': '🏰', + 'bi-gem': '💎', + 'bi-crown': '👑', + 'bi-bank': '🏛️', + 'bi-award': '🏆' + }; + return iconMap[iconClass] || '🏠'; + } + function getRGBFromHex(hex) { if (!hex || typeof hex !== 'string') return '108, 117, 125'; let r = 0, g = 0, b = 0; @@ -693,6 +722,19 @@ housingScenarioEl.textContent = tier.scenario; sqftDisplayEl.textContent = tier.sqft; locationDisplayEl.textContent = tier.location; + + // Update title icon + if (tier.icon) { + titleIconEl.textContent = getIconEmoji(tier.icon); + } + + // Show/hide home price based on ownership type + if (tier.ownershipType === 'own' && tier.homePrice) { + homePriceDisplayEl.textContent = tier.homePrice; + homePriceSpecEl.style.display = 'block'; + } else { + homePriceSpecEl.style.display = 'none'; + } // Update features const oldHTML = housingFeaturesContainer.innerHTML;