diff --git a/iframe.html b/iframe.html index 9f2010a..c7eec7d 100644 --- a/iframe.html +++ b/iframe.html @@ -1379,6 +1379,105 @@ color: #8a8a8a; } } + + /* Food Amount Breakdown Styling */ + .dog-calculator-food-amounts-section { + margin-top: 1.5rem; + padding: 1rem; + background: var(--bg-secondary); + border-radius: 8px; + border: 1px solid var(--border-color); + } + + .dog-calculator-section-title { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + } + + .dog-calculator-food-amounts-list { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 1rem; + } + + .dog-calculator-food-amount-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem; + background: var(--bg-primary); + border-radius: 6px; + border: 1px solid var(--border-color); + } + + .dog-calculator-food-amount-label { + font-weight: 500; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + } + + .dog-calculator-food-percentage { + background: var(--primary-color); + color: white; + padding: 0.2rem 0.5rem; + border-radius: 12px; + font-size: 0.8rem; + font-weight: 500; + } + + .dog-calculator-lock-indicator { + font-size: 0.8rem; + opacity: 0.7; + } + + .dog-calculator-food-amount-value { + font-weight: 600; + color: var(--text-primary); + font-size: 1rem; + } + + .dog-calculator-total-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + background: var(--primary-color); + color: white; + border-radius: 6px; + font-weight: 600; + margin-top: 0.5rem; + } + + .dog-calculator-total-label { + font-size: 1rem; + } + + .dog-calculator-total-value { + font-size: 1.1rem; + font-weight: 700; + } + + .dog-calculator-full-width { + flex: 1; + } + + /* Responsive adjustments */ + @media (max-width: 576px) { + .dog-calculator-food-amount-item { + flex-direction: column; + gap: 0.5rem; + text-align: center; + } + + .dog-calculator-food-amount-label { + justify-content: center; + } + } @@ -1472,12 +1571,8 @@
-
- - -
-
- +
+
+ +
@@ -2532,11 +2638,13 @@ const unitSelect = document.getElementById('unit'); const dailyFoodResults = document.getElementById('dailyFoodResults'); const dailyFoodValue = document.getElementById('dailyFoodValue'); - const totalFoodDisplay = document.getElementById('totalFoodDisplay'); + const foodAmountsSection = document.getElementById('foodAmountsSection'); + const foodAmountsList = document.getElementById('foodAmountsList'); + const totalAmountDisplay = document.getElementById('totalAmountDisplay'); const foodBreakdownResults = document.getElementById('foodBreakdownResults'); const foodBreakdownList = document.getElementById('foodBreakdownList'); - if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) { + if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) { return; } @@ -2552,7 +2660,7 @@ // Validate days input if (!days || !this.validateInput(days, 1, true)) { if (days) this.showError('daysError', true); - totalFoodDisplay.value = ''; + foodAmountsSection.style.display = 'none'; dailyFoodResults.style.display = 'none'; if (foodBreakdownResults) foodBreakdownResults.style.display = 'none'; return; @@ -2595,8 +2703,8 @@ }); dailyFoodResults.style.display = 'none'; + foodAmountsSection.style.display = 'none'; if (foodBreakdownResults) foodBreakdownResults.style.display = 'none'; - totalFoodDisplay.value = ''; return; } @@ -2619,13 +2727,44 @@ if (foodBreakdownResults) foodBreakdownResults.style.display = 'none'; } - // Calculate total food amount for the specified days - const totalFoodGrams = totalDailyGrams * numDays; - const convertedAmount = this.convertUnits(totalFoodGrams, unit); + // Generate individual food amount breakdown const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb'; const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1; - totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel; + // Build HTML for individual food amounts + const foodAmountsHTML = foodBreakdowns.map(breakdown => { + const totalGramsForDays = breakdown.dailyGrams * numDays; + const convertedAmount = this.convertUnits(totalGramsForDays, unit); + const lockIndicator = breakdown.isLocked ? '🔒' : ''; + + return ` +
+
+ ${breakdown.name} + ${breakdown.percentage}% + ${lockIndicator} +
+
+ ${this.formatNumber(convertedAmount, decimals)} ${unitLabel} +
+
+ `; + }).join(''); + + // Calculate and display total + const totalFoodGrams = totalDailyGrams * numDays; + const totalConverted = this.convertUnits(totalFoodGrams, unit); + + // Update the display + if (foodAmountsList) { + foodAmountsList.innerHTML = foodAmountsHTML; + } + + if (totalAmountDisplay) { + totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`; + } + + foodAmountsSection.style.display = 'block'; this.sendHeightToParent(); }