Unit as buttons and othe rimprovements
This commit is contained in:
Dayowe
parent
7b66f395bb
commit
271c8baafd
150
iframe.html
150
iframe.html
@ -6,6 +6,15 @@
|
||||
<title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
|
||||
<style>
|
||||
/* Sundog Dog Food Calorie Calculator Styles */
|
||||
|
||||
/* CSS Variables for theming */
|
||||
:root {
|
||||
--bg-primary: #fdfcfe;
|
||||
--bg-secondary: #ffffff;
|
||||
--border-color: #e8e3ed;
|
||||
--text-primary: #6f3f6d;
|
||||
--text-secondary: #8f7a8e;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@ -435,6 +444,11 @@
|
||||
|
||||
/* Dark theme - manual override */
|
||||
.dog-calculator-container.theme-dark {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
@ -520,6 +534,23 @@
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-btn {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-btn:hover {
|
||||
border-color: #f19a5f;
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-unit-btn.active {
|
||||
border-color: #f19a5f;
|
||||
background: #f19a5f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-results {
|
||||
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||
@ -565,6 +596,11 @@
|
||||
/* System theme - follows user's OS preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dog-calculator-container.theme-system {
|
||||
--bg-primary: #24202d;
|
||||
--bg-secondary: #312b3b;
|
||||
--border-color: #433c4f;
|
||||
--text-primary: #f5f3f7;
|
||||
--text-secondary: #b8b0c2;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
@ -650,6 +686,23 @@
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-btn {
|
||||
background-color: #312b3b;
|
||||
border-color: #433c4f;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-btn:hover {
|
||||
border-color: #f19a5f;
|
||||
background: rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-unit-btn.active {
|
||||
border-color: #f19a5f;
|
||||
background: #f19a5f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-results {
|
||||
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||
@ -1566,6 +1619,41 @@
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* Unit selection buttons */
|
||||
.dog-calculator-unit-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin: 24px auto;
|
||||
flex-wrap: wrap;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dog-calculator-unit-btn {
|
||||
padding: 8px 14px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dog-calculator-unit-btn:hover {
|
||||
border-color: #f19a5f;
|
||||
background: rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
.dog-calculator-unit-btn.active {
|
||||
border-color: #f19a5f;
|
||||
background: #f19a5f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments for inline unit selector */
|
||||
@media (max-width: 576px) {
|
||||
.dog-calculator-result-item {
|
||||
@ -1810,20 +1898,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unit Selection Buttons -->
|
||||
<div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;">
|
||||
<button type="button" class="dog-calculator-unit-btn active" data-unit="g">g</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
|
||||
<button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
|
||||
</div>
|
||||
|
||||
<!-- Daily Total Results -->
|
||||
<div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
|
||||
<div class="dog-calculator-result-item">
|
||||
<span class="dog-calculator-result-label">Total Daily Amount:</span>
|
||||
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
|
||||
<select id="unit" class="dog-calculator-unit-select dog-calculator-inline-unit" aria-describedby="unitHelp">
|
||||
<option value="g">grams (g)</option>
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
<option value="lb">pounds (lb)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden select for compatibility -->
|
||||
<select id="unit" style="display: none;" aria-describedby="unitHelp">
|
||||
<option value="g">grams (g)</option>
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
<option value="lb">pounds (lb)</option>
|
||||
</select>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
<h4 class="dog-calculator-section-title">
|
||||
Calculate amounts for
|
||||
@ -2666,6 +2764,20 @@
|
||||
}
|
||||
|
||||
if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
|
||||
|
||||
// Unit button event listeners
|
||||
const unitButtons = document.querySelectorAll('.dog-calculator-unit-btn');
|
||||
unitButtons.forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
const selectedUnit = e.target.dataset.unit;
|
||||
this.setActiveUnitButton(selectedUnit);
|
||||
// Update hidden select to trigger existing logic
|
||||
if (unitSelect) {
|
||||
unitSelect.value = selectedUnit;
|
||||
this.updateFoodCalculations();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
|
||||
|
||||
@ -2752,6 +2864,8 @@
|
||||
'<option value="lb">pounds (lb)</option>' +
|
||||
'<option value="g">grams (g)</option>' +
|
||||
'<option value="kg">kilograms (kg)</option>';
|
||||
unitSelect.value = 'oz'; // Auto-select ounces for imperial
|
||||
this.setActiveUnitButton('oz'); // Sync unit buttons
|
||||
}
|
||||
|
||||
// Update energy units for all food sources to kcal/cup for imperial
|
||||
@ -2776,6 +2890,8 @@
|
||||
'<option value="kg">kilograms (kg)</option>' +
|
||||
'<option value="oz">ounces (oz)</option>' +
|
||||
'<option value="lb">pounds (lb)</option>';
|
||||
unitSelect.value = 'g'; // Auto-select grams for metric
|
||||
this.setActiveUnitButton('g'); // Sync unit buttons
|
||||
}
|
||||
|
||||
// Update energy units for all food sources to kcal/100g for metric
|
||||
@ -2891,6 +3007,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
setActiveUnitButton(unit) {
|
||||
const unitButtons = document.querySelectorAll('.dog-calculator-unit-btn');
|
||||
unitButtons.forEach(button => {
|
||||
button.classList.remove('active');
|
||||
if (button.dataset.unit === unit) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateCalorieCalculations() {
|
||||
const dogTypeSelect = document.getElementById('dogType');
|
||||
const calorieResults = document.getElementById('calorieResults');
|
||||
@ -2967,6 +3093,10 @@
|
||||
foodAmountsSection.style.display = 'none';
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when validation fails
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -3020,6 +3150,10 @@
|
||||
dailyFoodResults.style.display = 'none';
|
||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||
|
||||
// Hide unit buttons when no valid foods
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'none';
|
||||
|
||||
// If we have any food sources without energy content, still show the breakdown section
|
||||
if (foodBreakdowns.length > 0) {
|
||||
// Show food amounts section with warnings for missing energy content
|
||||
@ -3060,6 +3194,10 @@
|
||||
|
||||
// Update daily food results (total) - will be updated with proper units later
|
||||
dailyFoodResults.style.display = 'block';
|
||||
|
||||
// Show unit buttons when daily results are shown
|
||||
const unitButtons = document.getElementById('unitButtons');
|
||||
if (unitButtons) unitButtons.style.display = 'flex';
|
||||
|
||||
// Update per-food breakdown
|
||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user