.

2 files changed +19 −19

Diff

diff --git a/housing-comparison.html b/housing-comparison.html
index 24b3997..1592ace 100644
--- a/housing-comparison.html
+++ b/housing-comparison.html
@@ -12,7 +12,7 @@
         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" />
@@ -24,7 +24,7 @@
     <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" />
@@ -80,7 +80,7 @@
             --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);
@@ -97,7 +97,7 @@
             --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;
@@ -344,7 +344,7 @@
             box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
         }
 
-        body.elite-theme-active .housing-category:hover, 
+        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);
         }
@@ -403,12 +403,12 @@
             background-color: #e9ecef;
         }
 
-        body.elite-theme-active .category-item:hover { 
-            background-color: #f8e6f0; 
+        body.elite-theme-active .category-item:hover {
+            background-color: #f8e6f0;
         }
 
-        body.billionaire-theme-active .category-item:hover { 
-            background-color: #404040; 
+        body.billionaire-theme-active .category-item:hover {
+            background-color: #404040;
         }
 
         .item-title {
@@ -438,8 +438,8 @@
             transition: color 1.2s ease-in-out;
         }
 
-        .highlight-update { 
-            animation: highlight-animation 1.2s ease-out; 
+        .highlight-update {
+            animation: highlight-animation 1.2s ease-out;
         }
 
         @keyframes highlight-animation {
@@ -492,12 +492,12 @@
             .background-container {
                 display: none !important;
             }
-            
+
             .main-container {
                 box-shadow: none;
                 background: white;
             }
-            
+
             .housing-category {
                 break-inside: avoid;
                 page-break-inside: avoid;
@@ -525,7 +525,7 @@
                 <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>
@@ -574,7 +574,7 @@
         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;
@@ -607,7 +607,7 @@
         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
@@ -658,13 +658,13 @@
                 }
                 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;
@@ -713,7 +713,7 @@
                 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> 
+                        <i class="bi ${category.icon} category-icon"></i>
                         ${category.category}
                     </div>
                     ${itemsHTML}
diff --git a/images/housing-comparison.png b/images/housing-comparison.png
new file mode 100644
index 0000000..a7a644e
Binary files /dev/null and b/images/housing-comparison.png differ