better colors
· 1 year ago
f6644ba290654b6f5f4f76445ca8cc5c31cec532
Parent:
214cb317e
1 file changed +54 −49
- lifestyle-calculator.html +54 −49
Diff
--- a/lifestyle-calculator.html +++ b/lifestyle-calculator.html @@ -30,7 +30,6 @@ <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 */ @@ -44,25 +43,26 @@ --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 */ - + + /* Refined Badge Colors */ --badge-budgetSmart-bg: #e0f2f1; /* Teal light */ --badge-budgetSmart-text: #00796b; /* Teal dark */ --badge-milestone-bg: #e3f2fd; /* Blue light */ --badge-milestone-text: #1565c0; /* Blue dark */ - --badge-essential-bg: #fce4ec; /* Pink light */ - --badge-essential-text: #ad1457; /* Pink dark */ + --badge-essential-bg: #e8eaed; /* Muted Grey-Blue light */ + --badge-essential-text: #5f6368; /* Muted Grey-Blue dark */ --badge-premium-bg: #fff8e1; /* Yellow light */ - --badge-premium-text: #f57f17; /* Yellow dark */ + --badge-premium-text: #f57f17; /* Yellow/Orange dark */ --badge-ultraPremium-bg: #f3e5f5; /* Purple light */ --badge-ultraPremium-text: #6a1b9a;/* Purple dark */ --badge-aspirational-bg: #e8f5e9; /* Green light */ --badge-aspirational-text: #2e7d32;/* Green dark */ --badge-convenience-bg: #f1f8e9; /* Light Green light */ --badge-convenience-text: #558b2f; /* Light Green dark */ - --badge-statusSymbol-bg: #ede7f6; /* Deep Purple light */ - --badge-statusSymbol-text: #4527a0;/* Deep Purple dark */ + --badge-statusSymbol-bg: #311b92; /* Deep rich purple */ + --badge-statusSymbol-text: #ffca28;/* Amber/Gold */ } - + body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); @@ -71,15 +71,15 @@ 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); @@ -101,19 +101,18 @@ margin-bottom: 0.5rem; } .calculator-note { - font-size: 0.9rem; /* Made slightly larger for visibility */ - color: var(--dark-color); /* Darker for better readability */ - font-style: normal; /* Normal style */ - font-weight: 500; /* Slightly bolder */ - background-color: #fff3cd; /* Light yellow background for emphasis */ - border: 1px solid #ffeeba; /* Yellow border */ + font-size: 0.9rem; + color: var(--dark-color); + font-style: normal; + font-weight: 500; + background-color: #fff3cd; + border: 1px solid #ffeeba; padding: 0.5rem 0.75rem; - border-radius: 0.375rem; /* Bootstrap's default border-radius */ + border-radius: 0.375rem; margin-bottom: 1.5rem; text-align: center; } - - + .controls-container { background: var(--light-color); border-radius: var(--border-radius); @@ -125,8 +124,7 @@ .cola-container { margin-bottom: 1.5rem; } .cola-container label { font-weight: 500; margin-bottom: 0.3rem; font-size: 0.9rem;} .form-select-sm { font-size: 0.875rem; padding-top: 0.4rem; padding-bottom: 0.4rem;} - - + .income-display { font-family: 'Roboto Slab', serif; font-size: 2.3rem; @@ -143,7 +141,7 @@ font-style: italic; min-height: 20px; } - + .income-bracket-label { font-size: 1.3rem; color: var(--dark-color); @@ -157,24 +155,23 @@ text-align: center; font-weight: 400; margin-bottom: 1.5rem; - min-height: 38px; /* Adjust if descriptions become longer */ + 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 1.5rem; 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.6rem; color: var(--primary-color); /* Will be overridden by category specific color */ @@ -188,23 +185,32 @@ .category-item { background: var(--light-color); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; border: 1px solid #dee2e6; display: flex; align-items: flex-start; 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.0rem; color: var(--dark-color); margin-bottom: 0.3rem; display: flex; align-items: center; } .item-description { color: #495057; font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.3rem; } .item-financial-note { color: #555; font-size: 0.8rem; font-style: italic; margin-top: 0.4rem; opacity: 0.9; } .item-budget-percent { color: var(--success-color); font-size: 0.8rem; font-weight: 500; margin-top: 0.4rem; display: block; } - - - .badges-container { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } + + .badges-container { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Increased gap and top margin slightly */ .badge-custom { - padding: 0.3rem 0.75rem; + padding: 0.35rem 0.85rem; /* Slightly increased padding */ border-radius: 50px; - font-size: 0.7rem; + font-size: 0.7rem; /* Kept small for subtlety */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; - border: 1px solid transparent; + border-width: 1px; /* Ensure border is consistently applied */ + border-style: solid; /* Ensure border is consistently applied */ + display: inline-flex; /* Helps if you add icons inside later */ + align-items: center; /* Helps if you add icons inside later */ + box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Subtle shadow for pop */ + transition: all 0.2s ease-in-out; } + .badge-custom:hover { + transform: translateY(-1px); + box-shadow: 0 2px 5px rgba(0,0,0,0.12); + } + /* Individual Badge Styles using CSS Variables */ .badge-budgetSmart { background-color: var(--badge-budgetSmart-bg); color: var(--badge-budgetSmart-text); border-color: var(--badge-budgetSmart-text); } .badge-milestone { background-color: var(--badge-milestone-bg); color: var(--badge-milestone-text); border-color: var(--badge-milestone-text); } .badge-essential { background-color: var(--badge-essential-bg); color: var(--badge-essential-text); border-color: var(--badge-essential-text); } @@ -212,24 +218,23 @@ .badge-ultraPremium { background-color: var(--badge-ultraPremium-bg); color: var(--badge-ultraPremium-text); border-color: var(--badge-ultraPremium-text); } .badge-aspirational { background-color: var(--badge-aspirational-bg); color: var(--badge-aspirational-text); border-color: var(--badge-aspirational-text); } .badge-convenience { background-color: var(--badge-convenience-bg); color: var(--badge-convenience-text); border-color: var(--badge-convenience-text); } - .badge-statusSymbol { background-color: var(--badge-statusSymbol-bg); color: var(--badge-statusSymbol-text); border-color: var(--badge-statusSymbol-text); } - - - .dining { border-left-color: #fd7e14; } .dining .category-icon { color: #fd7e14; } .dining .category-item-icon { color: #fd7e14 !important; } - .travel { border-left-color: #0dcaf0; } .travel .category-icon { color: #0dcaf0; } .travel .category-item-icon { color: #0dcaf0 !important; } - .housing { border-left-color: #198754; } .housing .category-icon { color: #198754; } .housing .category-item-icon { color: #198754 !important; } - .transportation { border-left-color: #6f42c1; } .transportation .category-icon { color: #6f42c1; } .transportation .category-item-icon { color: #6f42c1 !important; } - .entertainment { border-left-color: #d63384; } .entertainment .category-icon { color: #d63384; } .entertainment .category-item-icon { color: #d63384 !important; } - .education { border-left-color: #ffc107; } .education .category-icon { color: #ffc107; } .education .category-item-icon { color: #ffc107 !important; } - .services { border-left-color: #6c757d; } .services .category-icon { color: #6c757d; } .services .category-item-icon { color: #6c757d !important; } + .badge-statusSymbol { background-color: var(--badge-statusSymbol-bg); color: var(--badge-statusSymbol-text); border-color: var(--badge-statusSymbol-text); } + + .dining { border-left-color: #fd7e14; } .dining .category-icon { color: #fd7e14; } .dining .category-item-icon { color: #fd7e14 !important; } + .travel { border-left-color: #0dcaf0; } .travel .category-icon { color: #0dcaf0; } .travel .category-item-icon { color: #0dcaf0 !important; } + .housing { border-left-color: #198754; } .housing .category-icon { color: #198754; } .housing .category-item-icon { color: #198754 !important; } + .transportation { border-left-color: #6f42c1; } .transportation .category-icon { color: #6f42c1; } .transportation .category-item-icon { color: #6f42c1 !important; } + .entertainment { border-left-color: #d63384; } .entertainment .category-icon { color: #d63384; } .entertainment .category-item-icon { color: #d63384 !important; } + .education { border-left-color: #ffc107; } .education .category-icon { color: #ffc107; } .education .category-item-icon { color: #ffc107 !important; } + .services { border-left-color: #6c757d; } .services .category-icon { color: #6c757d; } .services .category-item-icon { color: #6c757d !important; } .financial-planning { border-left-color: #20c997; } .financial-planning .category-icon { color: #20c997; } .financial-planning .category-item-icon { color: #20c997 !important; } - - + @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"> @@ -299,7 +304,7 @@ </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="financialServices-content"></div> + <div id="financial-services-content"></div> </div> </div> </div>