Add cups unit option for kcal/cup measurements

Features: - Add cups as a unit option that only works with kcal/cup energy measurements - Cups button is disabled with tooltip when kcal/cup is not selected - Auto-select cups when user selects kcal/cup as energy unit - Auto-switch to appropriate units when changing energy measurement types - Calculate cup amounts directly from calories without density assumptions Fixes: - Ensure cups display correct values immediately upon auto-selection - Fix "Per day" radio button to be pre-selected when feeding config becomes visible - Handle empty unit values with failsafe fallback to active button Technical details: - Direct calorie-to-cups conversion bypassing gram conversions - Pre-calculate cups values in food breakdown for efficient display - Set unit before updating calculations to avoid timing issues - Added CSS styling for disabled button state across all themes
Add per-meal feeding frequency feature
2025-08-18 14:36:25 +02:00 · 2025-08-18 12:45:44 +02:00 · 2025-08-18 09:21:54 +02:00 · 2025-08-18 09:05:00 +02:00 · 2025-08-17 21:20:05 +02:00
10 changed files with 5397 additions and 1850 deletions
@@ -0,0 +1,27 @@
+# Dependencies
+node_modules/
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+
+# Personal files
+theme.scss
+_variables.scss
+reference.png
+better.png
+START_PROMPT.md
+CLAUDE.md
+CLAUDE_V2.md
+math.md
+vetcalculators/
+*.js.backup*
+backup/
@@ -1,46 +1,74 @@
 #!/usr/bin/env node

 /**
- * Dog Calculator Build System - PRODUCTION VERSION
+ * Dog Calculator Build System - ORGANIZED VERSION
 * 
- * This FIXED build script generates iframe.html and dog-calculator-widget.js
- * with EXACTLY the same functionality from iframe.html as the single source of truth.
+ * This build script generates iframe.html and sundog-dog-food-calculator.js
+ * from organized source files in the src/ directory.
+ * 
+ * Source structure:
+ * - src/index.html - HTML template
+ * - src/css/main.css - Main styles
+ * - src/css/themes.css - Theme-specific styles
+ * - src/js/config.js - Configuration constants
+ * - src/js/calculator.js - JavaScript functionality
+ * 
+ * Output files:
+ * - iframe.html - Standalone calculator page
+ * - sundog-dog-food-calculator.js - Embeddable widget
 * 
 * Usage: node build.js
- * 
- * ✅ WORKS CORRECTLY - Fixed the previous broken implementation
 */

 const fs = require('fs');
 const path = require('path');

-console.log('🎯 Dog Calculator Build System - FIXED & WORKING');
+console.log('🎯 Dog Calculator Build System - ORGANIZED VERSION');
 console.log('');

 /**
- * Extract and parse components from the master iframe.html
+ * Read organized components from src directory
 */
-function parseIframeComponents() {
-    if (!fs.existsSync('iframe.html')) {
-        throw new Error('iframe.html not found - this is the master file that should exist');
+function readSourceComponents() {
+    const srcDir = 'src';
+    
+    // Check if src directory exists
+    if (!fs.existsSync(srcDir)) {
+        throw new Error('src directory not found');
    }
    
-    const content = fs.readFileSync('iframe.html', 'utf8');
+    // Read CSS files
+    const mainCssPath = path.join(srcDir, 'css', 'main.css');
+    const themesCssPath = path.join(srcDir, 'css', 'themes.css');
+    if (!fs.existsSync(mainCssPath)) {
+        throw new Error('src/css/main.css not found');
+    }
+    if (!fs.existsSync(themesCssPath)) {
+        throw new Error('src/css/themes.css not found');
+    }
+    const mainCss = fs.readFileSync(mainCssPath, 'utf8').trim();
+    const themesCss = fs.readFileSync(themesCssPath, 'utf8').trim();
+    const css = mainCss + '\n\n' + themesCss;
    
-    // Extract CSS (everything between <style> and </style>)
-    const cssMatch = content.match(/<style>([\s\S]*?)<\/style>/);
-    if (!cssMatch) throw new Error('Could not extract CSS from iframe.html');
-    const css = cssMatch[1].trim();
+    // Read HTML template
+    const htmlPath = path.join(srcDir, 'index.html');
+    if (!fs.existsSync(htmlPath)) {
+        throw new Error('src/index.html not found');
+    }
+    const html = fs.readFileSync(htmlPath, 'utf8').trim();
    
-    // Extract HTML body (everything between <body> and <script>)
-    const htmlMatch = content.match(/<body>([\s\S]*?)<script>/);
-    if (!htmlMatch) throw new Error('Could not extract HTML from iframe.html');
-    const html = htmlMatch[1].trim();
-    
-    // Extract JavaScript (everything between <script> and </script>)
-    const jsMatch = content.match(/<script>([\s\S]*?)<\/script>/);
-    if (!jsMatch) throw new Error('Could not extract JavaScript from iframe.html');
-    const js = jsMatch[1].trim();
+    // Read JavaScript files
+    const configPath = path.join(srcDir, 'js', 'config.js');
+    const calculatorPath = path.join(srcDir, 'js', 'calculator.js');
+    if (!fs.existsSync(configPath)) {
+        throw new Error('src/js/config.js not found');
+    }
+    if (!fs.existsSync(calculatorPath)) {
+        throw new Error('src/js/calculator.js not found');
+    }
+    const config = fs.readFileSync(configPath, 'utf8').trim();
+    const calculator = fs.readFileSync(calculatorPath, 'utf8').trim();
+    const js = config + '\n\n' + calculator;
    
    return { css, html, js };
 }
@@ -49,17 +77,27 @@ function parseIframeComponents() {
 * Backup existing files
 */
 function backupFiles() {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupDir = 'backup';
    
-    if (fs.existsSync('sundog-dog-food-calculator.js')) {
-        const backupName = `sundog-dog-food-calculator.js.backup-${timestamp}`;
-        fs.copyFileSync('sundog-dog-food-calculator.js', backupName);
-        console.log(`📦 Backed up existing widget to: ${backupName}`);
+    // Create backup directory if it doesn't exist
+    if (!fs.existsSync(backupDir)) {
+        fs.mkdirSync(backupDir);
    }
+    
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const filesToBackup = ['iframe.html', 'sundog-dog-food-calculator.js'];
+    
+    filesToBackup.forEach(file => {
+        if (fs.existsSync(file)) {
+            const backupName = path.join(backupDir, `${file}.backup-${timestamp}`);
+            fs.copyFileSync(file, backupName);
+            console.log(`   📦 Backed up ${file}`);
+        }
+    });
 }

 /**
- * Generate iframe.html (regenerate from components for consistency)
+ * Generate iframe.html from modular components
 */
 function generateIframe(css, html, js) {
    const content = `<!DOCTYPE html>
@@ -69,6 +107,9 @@ function generateIframe(css, html, js) {
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
    <style>
+        /* Sundog Dog Food Calorie Calculator Styles */
+        
+        /* CSS Variables for theming */
        ${css}
    </style>
 </head>
@@ -80,30 +121,14 @@ function generateIframe(css, html, js) {
 </body>
 </html>`;

-    // Since iframe.html is our source, we don't overwrite it
-    // This function is here for consistency and testing
    return content;
 }

 /**
- * No transformation needed - keep original class names for consistency
- */
-function transformCSSForWidget(css) {
-    return css;
-}
-
-/**
- * No transformation needed - keep original class names for consistency
- */
-function transformHTMLForWidget(html) {
-    return html;
-}
-
-/**
- * Create production-ready widget JavaScript that uses the ACTUAL extracted JS from iframe.html
+ * Create production-ready widget JavaScript
 */
 function createWidgetJS(css, html, js) {
-    // Transform the extracted JavaScript from iframe.html to work as a widget
+    // Transform the JavaScript from calculator.js to work as a widget
    
    // Replace the iframe's DOMContentLoaded listener with widget initialization
    let transformedJS = js
@@ -175,12 +200,18 @@ function createWidgetJS(css, html, js) {
            }
        }$2`);

+    // Add CSS variables to widget CSS
+    const widgetCSS = `/* Sundog Dog Food Calorie Calculator Styles */
+        
+        /* CSS Variables for theming */
+        ${css}`;
+
    const widgetCode = `/**
 * Dog Calorie Calculator Widget
 * Embeddable JavaScript widget for websites
 * 
- * THIS CODE IS AUTO-GENERATED FROM iframe.html - DO NOT EDIT MANUALLY
- * Edit iframe.html and run 'node build.js' to update this file
+ * THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY
+ * Edit files in src/ directory and run 'node build.js' to update
 * 
 * Usage:
 * <script src="sundog-dog-food-calculator.js"></script>
@@ -197,7 +228,7 @@ function createWidgetJS(css, html, js) {
    'use strict';
    
    // Inject widget styles
-    const CSS_STYLES = \`${css}\`;
+    const CSS_STYLES = \`${widgetCSS}\`;
    
    function injectStyles() {
        if (document.getElementById('dog-calculator-styles')) return;
@@ -208,7 +239,7 @@ function createWidgetJS(css, html, js) {
        document.head.appendChild(style);
    }
    
-    // ACTUAL JavaScript from iframe.html (transformed for widget use)
+    // JavaScript from src/calculator.js (transformed for widget use)
    ${transformedJS}
    
    // Auto-initialize widgets on page load
@@ -249,37 +280,59 @@ function createWidgetJS(css, html, js) {
 */
 function build() {
    try {
-        console.log('📖 Reading components from iframe.html (master source)...');
-        const { css, html, js } = parseIframeComponents();
+        console.log('📖 Reading organized components from src/ directory...');
+        const { css, html, js } = readSourceComponents();
+        console.log('   ✅ src/index.html (' + html.split('\n').length + ' lines)');
+        console.log('   ✅ src/css/main.css + themes.css (' + css.split('\n').length + ' lines)');
+        console.log('   ✅ src/js/config.js + calculator.js (' + js.split('\n').length + ' lines)');
        
+        console.log('');
        console.log('📦 Backing up existing files...');
        backupFiles();
        
-        console.log('🏗️ Generating sundog-dog-food-calculator.js...');
+        console.log('');
+        console.log('🏗️ Building output files...');
+        
+        // Generate iframe.html
+        const iframeContent = generateIframe(css, html, js);
+        fs.writeFileSync('iframe.html', iframeContent);
+        console.log('   ✅ Generated iframe.html');
+        
+        // Generate widget
        const widgetCode = createWidgetJS(css, html, js);
        fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
-        console.log('✅ Generated sundog-dog-food-calculator.js');
+        console.log('   ✅ Generated sundog-dog-food-calculator.js');
        
        console.log('');
        console.log('🎉 Build completed successfully!');
        console.log('');
        console.log('📋 Summary:');
-        console.log('   ✅ iframe.html - Master source (no changes needed)');
-        console.log('   ✅ sundog-dog-food-calculator.js - Generated with identical functionality');
+        console.log('   Source structure:');
+        console.log('   • src/index.html - HTML structure');
+        console.log('   • src/css/main.css - Core styles');
+        console.log('   • src/css/themes.css - Theme variations');
+        console.log('   • src/js/config.js - Configuration');
+        console.log('   • src/js/calculator.js - Main logic');
        console.log('');
-        console.log('🔄 Your new workflow:');
-        console.log('   1. Edit iframe.html for any changes (calculations, design, layout)');
+        console.log('   Generated files:');
+        console.log('   • iframe.html - Standalone calculator');
+        console.log('   • sundog-dog-food-calculator.js - Embeddable widget');
+        console.log('');
+        console.log('🔄 Your workflow:');
+        console.log('   1. Edit organized files in src/');
        console.log('   2. Run: node build.js');
-        console.log('   3. Both files now have the same functionality!');
+        console.log('   3. Both output files are regenerated!');
        console.log('');
-        console.log('💡 No more maintaining two separate files!');
+        console.log('💡 Clean, organized structure - easy to maintain!');
        
    } catch (error) {
        console.error('❌ Build failed:', error.message);
+        console.error(error.stack);
        process.exit(1);
    }
 }

+// Run build if called directly
 if (require.main === module) {
    build();
 }
@@ -447,13 +447,116 @@
            }
        }

+        /* Feeding Configuration Styles */
+        .dog-calculator-container .dog-calculator-feeding-config {
+            margin-top: 20px;
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row > label {
+            font-weight: 500;
+            color: var(--text-label);
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+            cursor: pointer;
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+            font-weight: 600;
+            color: var(--accent-color);
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin: 0 auto;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+            width: 50px;
+            padding: 4px 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 0.95rem;
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+            text-align: center;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+        }
+
+        /* Update meal note styling */
+        .dog-calculator-container #mealNote {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: normal;
+            margin-left: 4px;
+        }
+
+        /* Mobile responsive adjustments for feeding config */
+        @media (max-width: 480px) {
+            .dog-calculator-meal-input {
+                margin-left: 0;
+                width: 100%;
+                margin-top: 8px;
+            }
+            
+            .dog-calculator-frequency-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
        /* Dark theme - manual override */
-        .dog-calculator-container.theme-dark {
+
+.dog-calculator-container.theme-dark {
            --bg-primary: #24202d;
            --bg-secondary: #312b3b;
+            --bg-tertiary: #1f1b26;
            --border-color: #433c4f;
            --text-primary: #f5f3f7;
            --text-secondary: #b8b0c2;
+            --text-label: #9f94ae;
+            --success-color: #7fa464;
+            --error-color: #e87159;
            color: var(--text-primary);
        }
            
@@ -557,6 +660,19 @@
            color: white;
        }

+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+        }
+            
        .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%);
            border-color: rgba(241, 154, 95, 0.3);
@@ -598,14 +714,55 @@
            color: var(--success-color);
        }

+        /* Dark theme feeding configuration styles */
+        .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
+            background: var(--bg-tertiary);
+            border-color: var(--border-color);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
+            color: var(--text-label);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-radio-group label {
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
+            color: #f19a5f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
+            border-color: #f19a5f;
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+        }
+
+        .dog-calculator-container.theme-dark #mealNote {
+            color: var(--text-secondary);
+        }
+
        /* System theme - follows user's OS preference */
        @media (prefers-color-scheme: dark) {
            .dog-calculator-container.theme-system {
                --bg-primary: #24202d;
                --bg-secondary: #312b3b;
+                --bg-tertiary: #1f1b26;
                --border-color: #433c4f;
                --text-primary: #f5f3f7;
                --text-secondary: #b8b0c2;
+                --text-label: #9f94ae;
+                --success-color: #7fa464;
+                --error-color: #e87159;
                color: var(--text-primary);
            }
            
@@ -709,6 +866,19 @@
                color: white;
            }

+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+            }
+            
            .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%);
                border-color: rgba(241, 154, 95, 0.3);
@@ -749,6 +919,43 @@
                border-color: var(--success-color);
                color: var(--success-color);
            }
+
+            /* System theme feeding configuration styles in dark mode */
+            .dog-calculator-container.theme-system .dog-calculator-feeding-config {
+                background: var(--bg-tertiary);
+                border-color: var(--border-color);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
+                color: var(--text-label);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-radio-group label {
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
+                color: #f19a5f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input span {
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
+                border-color: #f19a5f;
+                box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+            }
+
+            .dog-calculator-container.theme-system #mealNote {
+                color: var(--text-secondary);
+            }
        }

        /* Modal Styles */
@@ -1658,6 +1865,20 @@
            color: white;
        }

+        .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            transform: none;
+        }
+
        /* Hidden unit select for compatibility */
        .dog-calculator-unit-select-hidden {
            display: none;
@@ -1900,6 +2121,28 @@
                        <span>Add another food source</span>
                    </button>

+                    <!-- Feeding Configuration -->
+                    <div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
+                        <div class="dog-calculator-frequency-row">
+                            <label>Show amounts:</label>
+                            <div class="dog-calculator-radio-group">
+                                <label>
+                                    <input type="radio" name="showAs" value="daily" id="showDaily" checked>
+                                    <span>Per day</span>
+                                </label>
+                                <label>
+                                    <input type="radio" name="showAs" value="meal" id="showPerMeal">
+                                    <span>Per meal</span>
+                                </label>
+                            </div>
+                            <div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
+                                <span>×</span>
+                                <input type="number" id="mealsPerDay" value="2" min="1" max="10">
+                                <span>meals/day</span>
+                            </div>
+                        </div>
+                    </div>
+
                    <!-- Per-Food Results -->
                    <div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
                        <div id="foodBreakdownList">
@@ -1913,6 +2156,7 @@
                        <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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
                    </div>

                    <!-- Daily Total Results -->
@@ -1929,13 +2173,14 @@
                        <option value="kg">kilograms (kg)</option>
                        <option value="oz">ounces (oz)</option>
                        <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
                    </select>

                    <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
                        <h4 class="dog-calculator-section-title">
                            Calculate amounts for 
                            <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> 
-                            <span id="dayLabel">day</span>:
+                            <span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
                        </h4>
                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
                        <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
@@ -2022,11 +2267,20 @@
            </div>
        </div>
    </div>
-
-
-
    <script>
        /**
+ * Configuration constants for Dog Calorie Calculator
+ */
+
+const CALCULATOR_CONFIG = {
+    defaultTheme: 'system',
+    defaultScale: 1.0,
+    maxFoodSources: 5,
+    minScale: 0.5,
+    maxScale: 2.0
+};
+
+/**
         * Dog Calorie Calculator - iframe version
         * by Canine Nutrition and Wellness
         */
@@ -2035,10 +2289,12 @@
            constructor() {
                this.currentMER = 0;
                this.isImperial = false;
-                this.theme = this.getThemeFromURL() || 'system';
-                this.scale = this.getScaleFromURL() || 1.0;
+                this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
+                this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
                this.foodSources = [];
-                this.maxFoodSources = 5;
+                this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
+                this.mealsPerDay = 2;
+                this.showPerMeal = false;
                this.init();
            }

@@ -2064,7 +2320,7 @@
            getScaleFromURL() {
                const urlParams = new URLSearchParams(window.location.search);
                const scale = parseFloat(urlParams.get('scale'));
-                return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : null;
+                return (!isNaN(scale) && scale >= CALCULATOR_CONFIG.minScale && scale <= CALCULATOR_CONFIG.maxScale) ? scale : null;
            }

            applyTheme() {
@@ -2077,8 +2333,8 @@
                const container = document.getElementById('dogCalculator');
                if (!container) return;

-                // Clamp scale between 0.5 and 2.0 for usability
-                const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
+                // Clamp scale between min and max for usability
+                const clampedScale = Math.max(CALCULATOR_CONFIG.minScale, Math.min(CALCULATOR_CONFIG.maxScale, this.scale));
                
                if (clampedScale !== 1.0) {
                    container.style.transform = `scale(${clampedScale})`;
@@ -2615,7 +2871,36 @@
                if (energyInput) {
                    energyInput.addEventListener('input', () => {
                        this.updateFoodSourceData(id, 'energy', energyInput.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select cups when entering energy for kcal/cup
+                        const foodSource = this.foodSources.find(fs => fs.id === id);
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+                            const unitSelect = document.getElementById('unit');
+                            const cupsButton = document.getElementById('cupsButton');
+                            
+                            // First check if cups button will be enabled after update
+                            const willEnableCups = this.foodSources.some(fs => 
+                                fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                            );
+                            
+                            if (willEnableCups && unitSelect) {
+                                // Set cups BEFORE updating calculations
+                                unitSelect.value = 'cups';
+                                unitSelect.setAttribute('value', 'cups');
+                                this.setActiveUnitButton('cups');
+                                
+                                // Enable the cups button manually since we know it will be valid
+                                if (cupsButton) {
+                                    cupsButton.disabled = false;
+                                    cupsButton.title = 'Show amounts in cups';
+                                }
+                            }
+                            
+                            // Now update calculations with cups already selected
+                            this.updateFoodCalculations();
+                        } else {
+                            this.updateFoodCalculations();
+                        }
                    });
                    energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
                }
@@ -2623,7 +2908,54 @@
                if (energyUnitSelect) {
                    energyUnitSelect.addEventListener('change', () => {
                        this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select the most appropriate unit based on energy unit
+                        const unitSelect = document.getElementById('unit');
+                        const energyInput = document.getElementById(`energy-${id}`);
+                        
+                        if (unitSelect) {
+                            switch(energyUnitSelect.value) {
+                                case 'kcalcup':
+                                    // Check if we have energy value to enable cups
+                                    const foodSource = this.foodSources.find(fs => fs.id === id);
+                                    if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+                                        // Set cups BEFORE updating calculations
+                                        unitSelect.value = 'cups';
+                                        unitSelect.setAttribute('value', 'cups');
+                                        this.setActiveUnitButton('cups');
+                                        
+                                        // Enable the cups button manually
+                                        const cupsButton = document.getElementById('cupsButton');
+                                        if (cupsButton) {
+                                            cupsButton.disabled = false;
+                                            cupsButton.title = 'Show amounts in cups';
+                                        }
+                                    }
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcal100g':
+                                    // For kcal/100g, select grams
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalkg':
+                                    // For kcal/kg, also select grams (or could be kg)
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalcan':
+                                    // For kcal/can, use grams as default (or ounces in imperial)
+                                    unitSelect.value = this.isImperial ? 'oz' : 'g';
+                                    this.setActiveUnitButton(unitSelect.value);
+                                    this.updateFoodCalculations();
+                                    break;
+                            }
+                        } else {
+                            // No unit select, just update calculations
+                            this.updateFoodCalculations();
+                        }
                    });
                }

@@ -2793,6 +3125,58 @@

                if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());

+                // Feeding configuration event listeners
+                const showDaily = document.getElementById('showDaily');
+                const showPerMeal = document.getElementById('showPerMeal');
+                const mealsPerDayInput = document.getElementById('mealsPerDay');
+                const mealInputGroup = document.getElementById('mealInputGroup');
+
+                if (showDaily) {
+                    showDaily.addEventListener('change', () => {
+                        if (showDaily.checked) {
+                            this.showPerMeal = false;
+                            if (mealInputGroup) mealInputGroup.style.display = 'none';
+                            this.updateDayLabel();
+                            this.updateFoodCalculations();
+                        }
+                    });
+                }
+
+                if (showPerMeal) {
+                    showPerMeal.addEventListener('change', () => {
+                        if (showPerMeal.checked) {
+                            this.showPerMeal = true;
+                            if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
+                            this.updateDayLabel();
+                            this.updateFoodCalculations();
+                        }
+                    });
+                }
+
+                if (mealsPerDayInput) {
+                    mealsPerDayInput.addEventListener('input', () => {
+                        const meals = parseInt(mealsPerDayInput.value);
+                        if (meals && meals >= 1 && meals <= 10) {
+                            this.mealsPerDay = meals;
+                            if (this.showPerMeal) {
+                                this.updateDayLabel();
+                                this.updateFoodCalculations();
+                            }
+                        }
+                    });
+
+                    mealsPerDayInput.addEventListener('blur', () => {
+                        if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
+                            mealsPerDayInput.value = 2;
+                            this.mealsPerDay = 2;
+                            if (this.showPerMeal) {
+                                this.updateDayLabel();
+                                this.updateFoodCalculations();
+                            }
+                        }
+                    });
+                }
+
                // Modal event listeners
                const shareBtn = document.getElementById('shareBtn');
                const embedBtn = document.getElementById('embedBtn');
@@ -2969,7 +3353,7 @@
                }
            }

-            convertUnits(grams, unit) {
+            convertUnits(grams, unit, foodSource = null) {
                switch (unit) {
                    case 'kg':
                        return grams / 1000;
@@ -2977,6 +3361,18 @@
                        return grams / 28.3495;
                    case 'lb':
                        return grams / 453.592;
+                    case 'cups':
+                        // For cups, we need to convert from grams worth of calories to cups
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+                            // Get calories per 100g for this food
+                            const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+                            // Calculate total calories represented by these grams
+                            const totalCalories = grams * caloriesPerGram;
+                            // Divide by calories per cup to get number of cups
+                            const caloriesPerCup = parseFloat(foodSource.energy);
+                            return totalCalories / caloriesPerCup;
+                        }
+                        return null; // Cannot convert to cups without kcal/cup
                    default:
                        return grams;
                }
@@ -3011,10 +3407,21 @@
            updateDayLabel() {
                const days = document.getElementById('days')?.value;
                const dayLabel = document.getElementById('dayLabel');
+                const mealNote = document.getElementById('mealNote');
                if (dayLabel && days) {
                    const numDays = parseInt(days);
                    dayLabel.textContent = numDays === 1 ? 'day' : 'days';
                }
+                if (mealNote) {
+                    if (this.showPerMeal && days) {
+                        const numDays = parseInt(days);
+                        const totalMeals = numDays * this.mealsPerDay;
+                        mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
+                        mealNote.style.display = 'inline';
+                    } else {
+                        mealNote.style.display = 'none';
+                    }
+                }
            }

            setActiveUnitButton(unit) {
@@ -3069,6 +3476,31 @@
                this.sendHeightToParent();
            }

+            updateCupsButtonState() {
+                const cupsButton = document.getElementById('cupsButton');
+                if (!cupsButton) return;
+                
+                // Check if any food source has kcal/cup selected
+                const hasKcalCup = this.foodSources.some(fs => 
+                    fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                );
+                
+                if (hasKcalCup) {
+                    cupsButton.disabled = false;
+                    cupsButton.title = 'Show amounts in cups';
+                } else {
+                    cupsButton.disabled = true;
+                    cupsButton.title = 'Available when using kcal/cup measurement';
+                    
+                    // If cups was selected, switch back to grams
+                    const unitSelect = document.getElementById('unit');
+                    if (unitSelect && unitSelect.value === 'cups') {
+                        unitSelect.value = 'g';
+                        this.setActiveUnitButton('g');
+                    }
+                }
+            }
+
            updateFoodCalculations() {
                if (this.currentMER === 0) return;
                
@@ -3081,15 +3513,36 @@
                const totalAmountDisplay = document.getElementById('totalAmountDisplay');
                const foodBreakdownResults = document.getElementById('foodBreakdownResults');
                const foodBreakdownList = document.getElementById('foodBreakdownList');
+                const feedingConfig = document.getElementById('feedingConfig');
+                
+                // Update cups button state
+                this.updateCupsButtonState();

                if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
                    return;
                }

                const days = daysInput.value;
-                const unit = unitSelect.value;
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                let unit = unitSelect.value;
+                
+                // Failsafe: if unit is empty string but cups button is active, use 'cups'
+                if (!unit || unit === '') {
+                    const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
+                    if (activeButton) {
+                        unit = activeButton.dataset.unit || 'g';
+                    } else {
+                        unit = 'g'; // Default fallback
+                    }
+                }
+                
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+                
+                // Debug: log what unit is being used
+                console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
+                
+                // Determine frequency suffix for display
+                const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
                
                // Clear all food source errors first
                this.foodSources.forEach(fs => {
@@ -3103,6 +3556,7 @@
                    foodAmountsSection.style.display = 'none';
                    dailyFoodResults.style.display = 'none';
                    if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    if (feedingConfig) feedingConfig.style.display = 'none';
                    
                    // Hide unit buttons when validation fails
                    const unitButtons = document.getElementById('unitButtons');
@@ -3122,15 +3576,44 @@
                    
                    if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
                        const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
-                        const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        let dailyGramsForThisFood;
+                        let dailyCupsForThisFood = null;
+                        
+                        // For kcal/cup, calculate cups directly from calories
+                        if (fs.energyUnit === 'kcalcup' && fs.energy) {
+                            const caloriesPerCup = parseFloat(fs.energy);
+                            dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+                            // We still need grams for total calculation, use approximation
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                            console.log('Cups calculation:', {
+                                caloriesPerCup,
+                                dailyCaloriesForThisFood,
+                                dailyCupsForThisFood,
+                                dailyGramsForThisFood
+                            });
+                        } else {
+                            // For other units, calculate grams normally
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        }
+                        
+                        // Calculate per-meal amounts if needed
+                        const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+                        const displayCups = dailyCupsForThisFood !== null ? 
+                            (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
+                        const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
                        
                        foodBreakdowns.push({
                            name: fs.name,
                            percentage: fs.percentage,
                            dailyGrams: dailyGramsForThisFood,
+                            displayGrams: displayGrams,
+                            dailyCups: dailyCupsForThisFood,
+                            displayCups: displayCups,
                            calories: dailyCaloriesForThisFood,
+                            displayCalories: displayCalories,
                            isLocked: fs.isLocked,
-                            hasEnergyContent: true
+                            hasEnergyContent: true,
+                            foodSource: fs  // Store reference for cups conversion
                        });
                        
                        totalDailyGrams += dailyGramsForThisFood;
@@ -3141,9 +3624,14 @@
                            name: fs.name,
                            percentage: fs.percentage,
                            dailyGrams: 0,
+                            displayGrams: 0,
+                            dailyCups: null,
+                            displayCups: null,
                            calories: 0,
+                            displayCalories: 0,
                            isLocked: fs.isLocked,
-                            hasEnergyContent: false
+                            hasEnergyContent: false,
+                            foodSource: fs  // Store reference for cups conversion
                        });
                    }
                });
@@ -3159,6 +3647,7 @@
                    
                    dailyFoodResults.style.display = 'none';
                    if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    if (feedingConfig) feedingConfig.style.display = 'none';
                    
                    // Hide unit buttons when no valid foods
                    const unitButtons = document.getElementById('unitButtons');
@@ -3205,6 +3694,17 @@
                // Update daily food results (total) - will be updated with proper units later
                dailyFoodResults.style.display = 'block';
                
+                // Show feeding configuration when we have valid foods
+                if (feedingConfig) {
+                    feedingConfig.style.display = 'block';
+                    
+                    // Ensure "Per day" is checked when feeding config becomes visible
+                    const showDaily = document.getElementById('showDaily');
+                    if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
+                        showDaily.checked = true;
+                    }
+                }
+                
                // Show unit buttons when daily results are shown
                const unitButtons = document.getElementById('unitButtons');
                if (unitButtons) unitButtons.style.display = 'flex';
@@ -3212,9 +3712,21 @@
                // Update per-food breakdown
                if (foodBreakdownList && foodBreakdowns.length > 1) {
                    const breakdownHTML = foodBreakdowns.map(breakdown => {
-                        const valueContent = breakdown.hasEnergyContent 
-                            ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
-                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        let valueContent;
+                        if (breakdown.hasEnergyContent) {
+                            if (unit === 'cups') {
+                                // For cups, use the pre-calculated cups value if available
+                                if (breakdown.displayCups !== null) {
+                                    valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+                                } else {
+                                    valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                                }
+                            } else {
+                                valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+                            }
+                        } else {
+                            valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        }
                        
                        return `
                            <div class="dog-calculator-food-result-item">
@@ -3233,8 +3745,41 @@
                // Generate individual food amount breakdown
                
                // Update daily food value with correct units
-                const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
-                dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
+                const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
+                let convertedTotal;
+                let totalDisplayText;
+                
+                if (unit === 'cups') {
+                    console.log('Unit is cups, checking validity...');
+                    // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+                    const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                        .every(b => b.displayCups !== null && b.displayCups !== undefined);
+                    
+                    console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+                    
+                    if (validForCups) {
+                        // Calculate total cups using pre-calculated values
+                        let totalCups = 0;
+                        foodBreakdowns.forEach(breakdown => {
+                            if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+                                totalCups += breakdown.displayCups;
+                            }
+                        });
+                        console.log('Total cups display:', {
+                            totalCups,
+                            displayTotal,
+                            foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+                        });
+                        totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                    } else {
+                        totalDisplayText = 'Mixed units - see breakdown';
+                    }
+                } else {
+                    convertedTotal = this.convertUnits(displayTotal, unit);
+                    totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                }
+                
+                dailyFoodValue.textContent = totalDisplayText;
                
                // Build HTML for individual food amounts
                const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3255,8 +3800,24 @@
                            </div>
                        `;
                    } else {
-                        const totalGramsForDays = breakdown.dailyGrams * numDays;
-                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        // For multi-day calculations: show total amount for all days
+                        let amountDisplay;
+                        if (unit === 'cups') {
+                            // For cups, use pre-calculated cups value
+                            if (breakdown.dailyCups !== null) {
+                                const totalCupsForDays = breakdown.dailyCups * numDays;
+                                amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+                            } else {
+                                amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                            }
+                        } else {
+                            // For other units, calculate from grams
+                            const totalGramsForDays = this.showPerMeal 
+                                ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+                                : breakdown.dailyGrams * numDays;
+                            const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                            amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+                        }
                        
                        return `
                            <div class="dog-calculator-food-amount-item">
@@ -3266,7 +3827,7 @@
                                    ${lockIndicator}
                                </div>
                                <div class="dog-calculator-food-amount-value">
-                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                    ${amountDisplay}
                                </div>
                            </div>
                        `;
@@ -3275,7 +3836,6 @@
                
                // Calculate and display total
                const totalFoodGrams = totalDailyGrams * numDays;
-                const totalConverted = this.convertUnits(totalFoodGrams, unit);
                
                // Update the display
                if (foodAmountsList) {
@@ -3283,7 +3843,27 @@
                }
                
                if (totalAmountDisplay) {
-                    totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    if (unit === 'cups') {
+                        // For cups total, check if all foods can be converted
+                        const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                            .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+                        
+                        if (validForCups) {
+                            // Calculate total cups using pre-calculated values
+                            let totalCups = 0;
+                            foodBreakdowns.forEach(breakdown => {
+                                if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+                                    totalCups += breakdown.dailyCups * numDays;
+                                }
+                            });
+                            totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+                        } else {
+                            totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+                        }
+                    } else {
+                        const totalConverted = this.convertUnits(totalFoodGrams, unit);
+                        totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    }
                }
                
                foodAmountsSection.style.display = 'block';
@@ -0,0 +1,538 @@
+        :root {
+            --bg-primary: #fdfcfe;
+            --bg-secondary: #ffffff;
+            --border-color: #e8e3ed;
+            --text-primary: #6f3f6d;
+            --text-secondary: #8f7a8e;
+            --accent-color: #f19a5f;
+            --text-label: #635870;      /* For form labels, secondary UI text */
+            --success-color: #7fa464;   /* Green for success states */
+            --bg-tertiary: #f8f5fa;     /* Light background variant */
+            --error-color: #e87159;     /* Error states and messages */
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            background: transparent;
+            overflow-x: hidden;
+            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 24px;
+            box-sizing: border-box;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .dog-calculator-container.loaded {
+            opacity: 1;
+        }
+
+        .dog-calculator-container *,
+        .dog-calculator-container *::before,
+        .dog-calculator-container *::after {
+            box-sizing: border-box;
+        }
+
+        .dog-calculator-section {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px 8px 0 0;
+            padding: 24px;
+            margin-bottom: 0;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+
+        .dog-calculator-section h2 {
+            margin: 0;
+            color: var(--text-primary);
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        /* Unit Switch */
+        .dog-calculator-unit-switch {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .dog-calculator-unit-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-label);
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-unit-label.active {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .dog-calculator-switch {
+            position: relative;
+            display: inline-block;
+            width: 48px;
+            height: 24px;
+        }
+
+        .dog-calculator-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .dog-calculator-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--border-color);
+            transition: 0.3s;
+            border-radius: 24px;
+        }
+
+        .dog-calculator-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider {
+            background-color: #f19a5f;
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider:before {
+            transform: translateX(24px);
+        }
+
+        .dog-calculator-form-group {
+            margin-bottom: 20px;
+        }
+
+        .dog-calculator-form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: var(--text-primary);
+            font-size: 1rem;
+        }
+
+        .dog-calculator-form-group select,
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            width: 100%;
+            padding: 12px 16px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 1rem;
+            font-family: inherit;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            transition: all 0.2s ease;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            background-size: 20px;
+            padding-right: 40px;
+        }
+
+        .dog-calculator-form-group select option {
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            background-image: none;
+            padding-right: 16px;
+        }
+
+        .dog-calculator-form-group select:focus,
+        .dog-calculator-form-group input[type="number"]:focus,
+        .dog-calculator-form-group input[type="text"]:focus {
+            outline: none;
+            border-color: #f19a5f;
+            background-color: var(--bg-secondary);
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-form-group input[readonly] {
+            background-color: var(--bg-tertiary);
+            cursor: not-allowed;
+            color: var(--text-label);
+        }
+
+        .dog-calculator-results {
+            background: linear-gradient(135deg, rgba(241, 154, 95, 0.08) 0%, rgba(241, 154, 95, 0.04) 100%);
+            border: 1px solid rgba(241, 154, 95, 0.2);
+            border-radius: 6px;
+            padding: 20px;
+            margin-top: 24px;
+        }
+
+        .dog-calculator-result-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .dog-calculator-result-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-result-label {
+            font-weight: 500;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-result-value {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            padding: 4px 12px;
+            background: rgba(241, 154, 95, 0.15);
+            border-radius: 4px;
+        }
+
+        .dog-calculator-collapsible {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-top: none;
+            margin-bottom: 0;
+            overflow: hidden;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-collapsible-header {
+            background: var(--bg-tertiary);
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .dog-calculator-collapsible-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .dog-calculator-collapsible-content {
+            display: block;
+        }
+
+        .dog-calculator-collapsible-inner {
+            padding: 24px;
+        }
+
+        .dog-calculator-input-group {
+            display: flex;
+            gap: 16px;
+            align-items: flex-end;
+        }
+
+        .dog-calculator-input-group .dog-calculator-form-group {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-unit-select {
+            min-width: 120px;
+        }
+
+        .dog-calculator-error {
+            color: var(--error-color);
+            font-size: 0.875rem;
+            margin-top: 6px;
+            font-weight: 500;
+        }
+
+        .dog-calculator-hidden {
+            display: none;
+        }
+
+        /* Action Buttons */
+        .dog-calculator-action-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            padding: 20px;
+            background: var(--bg-tertiary);
+            border-left: 1px solid var(--border-color);
+            border-right: 1px solid var(--border-color);
+            margin-top: -1px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-btn {
+            padding: 8px 16px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            font-family: inherit;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: white;
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .dog-calculator-btn-share:hover {
+            border-color: #9f5999;
+            color: #9f5999;
+        }
+
+        .dog-calculator-btn-embed:hover {
+            border-color: var(--success-color);
+            color: var(--success-color);
+        }
+
+        .dog-calculator-footer {
+            text-align: center;
+            padding: 20px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 0 0 8px 8px;
+            border-top: none;
+            margin-top: -1px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-footer a {
+            color: #9f5999;
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-footer a:hover {
+            color: #f19a5f;
+            text-decoration: underline;
+        }
+
+        /* Mobile Responsive Design */
+        @media (max-width: 576px) {
+            .dog-calculator-container {
+                padding: 16px;
+            }
+
+            .dog-calculator-section,
+            .dog-calculator-collapsible-inner {
+                padding: 20px;
+            }
+
+            .dog-calculator-section h2,
+            .dog-calculator-collapsible-header h3 {
+                font-size: 1.3rem;
+            }
+
+            .dog-calculator-section-header {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+            }
+
+            .dog-calculator-section h2 {
+                text-align: center;
+            }
+
+            .dog-calculator-unit-switch {
+                justify-content: center;
+            }
+
+            .dog-calculator-action-buttons {
+                flex-direction: column;
+                padding: 16px;
+            }
+
+            .dog-calculator-btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .dog-calculator-input-group {
+                flex-direction: row;
+                gap: 12px;
+                align-items: flex-end;
+            }
+
+            .dog-calculator-input-group .dog-calculator-form-group {
+                margin-bottom: 0;
+            }
+
+            /* First form group takes 55%, second takes 40% with some flex */
+            .dog-calculator-input-group .dog-calculator-form-group:first-child {
+                flex: 0 0 55%;
+            }
+
+            .dog-calculator-input-group .dog-calculator-form-group:last-child {
+                flex: 1 1 40%;
+                min-width: 100px;
+            }
+
+            /* Make sure number inputs don't get too wide */
+            .dog-calculator-input-group input[type="number"] {
+                max-width: 100%;
+            }
+
+            /* Ensure dropdowns don't overflow their containers */
+            .dog-calculator-input-group select {
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+
+            .dog-calculator-result-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+
+            .dog-calculator-result-value {
+                align-self: stretch;
+                text-align: center;
+            }
+
+            .dog-calculator-collapsible-header {
+                padding: 16px 20px;
+            }
+        }
+
+        /* Feeding Configuration Styles */
+        .dog-calculator-container .dog-calculator-feeding-config {
+            margin-top: 20px;
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row > label {
+            font-weight: 500;
+            color: var(--text-label);
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+            cursor: pointer;
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+            font-weight: 600;
+            color: var(--accent-color);
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin: 0 auto;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+            width: 50px;
+            padding: 4px 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 0.95rem;
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+            text-align: center;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+        }
+
+        /* Update meal note styling */
+        .dog-calculator-container #mealNote {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: normal;
+            margin-left: 4px;
+        }
+
+        /* Mobile responsive adjustments for feeding config */
+        @media (max-width: 480px) {
+            .dog-calculator-meal-input {
+                margin-left: 0;
+                width: 100%;
+                margin-top: 8px;
+            }
+            
+            .dog-calculator-frequency-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
+        /* Dark theme - manual override */
@@ -0,0 +1,213 @@
+    <div class="dog-calculator-container" id="dogCalculator">
+        <div class="dog-calculator-section">
+            <div class="dog-calculator-section-header">
+                <h2>Dog's Characteristics</h2>
+                <div class="dog-calculator-unit-switch">
+                    <span class="dog-calculator-unit-label active" id="metricLabel">Metric</span>
+                    <label class="dog-calculator-switch">
+                        <input type="checkbox" id="unitToggle">
+                        <span class="dog-calculator-slider"></span>
+                    </label>
+                    <span class="dog-calculator-unit-label" id="imperialLabel">Imperial</span>
+                </div>
+            </div>
+            
+            <div class="dog-calculator-form-group">
+                <label for="dogType">Dog Type / Activity Level:</label>
+                <select id="dogType" aria-describedby="dogTypeHelp">
+                    <option value="">Select dog type...</option>
+                    <option value="3.0">Puppy (0-4 months)</option>
+                    <option value="2.0">Puppy (4 months - adult)</option>
+                    <option value="1.2">Adult - inactive/obese</option>
+                    <option value="1.6">Adult (neutered/spayed) - average activity</option>
+                    <option value="1.8">Adult (intact) - average activity</option>
+                    <option value="1.0">Adult - weight loss</option>
+                    <option value="1.7">Adult - weight gain</option>
+                    <option value="2.0">Working dog - light work</option>
+                    <option value="3.0">Working dog - moderate work</option>
+                    <option value="5.0">Working dog - heavy work</option>
+                    <option value="1.1">Senior dog</option>
+                </select>
+            </div>
+
+            <div class="dog-calculator-form-group">
+                <label for="weight" id="weightLabel">Dog's Weight (kg):</label>
+                <input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter weight in kg" aria-describedby="weightHelp">
+                <div id="weightError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid weight (minimum 0.1 kg)</div>
+            </div>
+
+            <div class="dog-calculator-results" id="calorieResults" style="display: none;">
+                <div class="dog-calculator-result-item">
+                    <span class="dog-calculator-result-label">Resting Energy Requirement (RER):</span>
+                    <span class="dog-calculator-result-value" id="rerValue">- cal/day</span>
+                </div>
+                <div class="dog-calculator-result-item">
+                    <span class="dog-calculator-result-label">Maintenance Energy Requirement (MER):</span>
+                    <span class="dog-calculator-result-value" id="merValue">- cal/day</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="dog-calculator-collapsible active" id="foodCalculator">
+            <div class="dog-calculator-collapsible-header">
+                <h3>How much should I feed?</h3>
+            </div>
+            <div class="dog-calculator-collapsible-content">
+                <div class="dog-calculator-collapsible-inner">
+                    <!-- Food Sources Container -->
+                    <div class="dog-calculator-food-sources" id="foodSources">
+                        <!-- Initial food source will be added by JavaScript -->
+                    </div>
+
+                    <!-- Add Food Source Button -->
+                    <button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button">
+                        <span>+</span>
+                        <span>Add another food source</span>
+                    </button>
+
+                    <!-- Feeding Configuration -->
+                    <div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
+                        <div class="dog-calculator-frequency-row">
+                            <label>Show amounts:</label>
+                            <div class="dog-calculator-radio-group">
+                                <label>
+                                    <input type="radio" name="showAs" value="daily" id="showDaily" checked>
+                                    <span>Per day</span>
+                                </label>
+                                <label>
+                                    <input type="radio" name="showAs" value="meal" id="showPerMeal">
+                                    <span>Per meal</span>
+                                </label>
+                            </div>
+                            <div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
+                                <span>×</span>
+                                <input type="number" id="mealsPerDay" value="2" min="1" max="10">
+                                <span>meals/day</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Per-Food Results -->
+                    <div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
+                        <div id="foodBreakdownList">
+                            <!-- Individual food breakdowns will be populated by JavaScript -->
+                        </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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</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>
+                        </div>
+                    </div>
+
+                    <!-- Hidden select for compatibility -->
+                    <select id="unit" class="dog-calculator-unit-select-hidden" 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>
+                        <option value="cups">cups</option>
+                    </select>
+
+                    <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
+                        <h4 class="dog-calculator-section-title">
+                            Calculate amounts for 
+                            <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> 
+                            <span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
+                        </h4>
+                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
+                        <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
+                            <!-- Individual food amounts will be populated here -->
+                        </div>
+                        <div class="dog-calculator-total-row" id="totalAmountRow">
+                            <span class="dog-calculator-total-label">Total Amount:</span>
+                            <span class="dog-calculator-total-value" id="totalAmountDisplay"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="dog-calculator-action-buttons">
+            <button class="dog-calculator-btn dog-calculator-btn-share" id="shareBtn">
+                Share
+            </button>
+            <button class="dog-calculator-btn dog-calculator-btn-embed" id="embedBtn">
+                Embed
+            </button>
+        </div>
+
+        <div class="dog-calculator-footer">
+            <a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
+                by caninenutritionandwellness.com
+            </a>
+        </div>
+        <!-- Share Modal -->
+        <div id="shareModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content">
+                <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
+                <h3>Share Calculator</h3>
+                <div class="dog-calculator-share-buttons">
+                    <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
+                        Facebook
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
+                        Twitter
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
+                        LinkedIn
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
+                        Email
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
+                        Copy Link
+                    </button>
+                </div>
+                <div class="dog-calculator-share-url">
+                    <input type="text" id="shareUrl" readonly>
+                </div>
+            </div>
+        </div>
+
+        <!-- Embed Modal -->
+        <div id="embedModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content dog-calculator-modal-embed">
+                <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
+                <h3>⚡ Embed the Calculator</h3>
+                
+                <div class="dog-calculator-embed-options">
+                    <div class="dog-calculator-embed-option">
+                        <h4>⚡ JavaScript Widget</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="widgetCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="dog-calculator-embed-option">
+                        <h4>🛡️ iframe Embed</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="iframeCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
@@ -0,0 +1,11 @@
+/**
+ * Configuration constants for Dog Calorie Calculator
+ */
+
+const CALCULATOR_CONFIG = {
+    defaultTheme: 'system',
+    defaultScale: 1.0,
+    maxFoodSources: 5,
+    minScale: 0.5,
+    maxScale: 2.0
+};
@@ -2,8 +2,8 @@
 * Dog Calorie Calculator Widget
 * Embeddable JavaScript widget for websites
 * 
- * THIS CODE IS AUTO-GENERATED FROM iframe.html - DO NOT EDIT MANUALLY
- * Edit iframe.html and run 'node build.js' to update this file
+ * THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY
+ * Edit files in src/ directory and run 'node build.js' to update
 * 
 * Usage:
 * <script src="sundog-dog-food-calculator.js"></script>
@@ -462,13 +462,116 @@
            }
        }

+        /* Feeding Configuration Styles */
+        .dog-calculator-container .dog-calculator-feeding-config {
+            margin-top: 20px;
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row > label {
+            font-weight: 500;
+            color: var(--text-label);
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+            cursor: pointer;
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+            font-weight: 600;
+            color: var(--accent-color);
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin: 0 auto;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+            width: 50px;
+            padding: 4px 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 0.95rem;
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+            text-align: center;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+        }
+
+        /* Update meal note styling */
+        .dog-calculator-container #mealNote {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: normal;
+            margin-left: 4px;
+        }
+
+        /* Mobile responsive adjustments for feeding config */
+        @media (max-width: 480px) {
+            .dog-calculator-meal-input {
+                margin-left: 0;
+                width: 100%;
+                margin-top: 8px;
+            }
+            
+            .dog-calculator-frequency-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
        /* Dark theme - manual override */
-        .dog-calculator-container.theme-dark {
+
+.dog-calculator-container.theme-dark {
            --bg-primary: #24202d;
            --bg-secondary: #312b3b;
+            --bg-tertiary: #1f1b26;
            --border-color: #433c4f;
            --text-primary: #f5f3f7;
            --text-secondary: #b8b0c2;
+            --text-label: #9f94ae;
+            --success-color: #7fa464;
+            --error-color: #e87159;
            color: var(--text-primary);
        }
            
@@ -572,6 +675,19 @@
            color: white;
        }

+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+        }
+            
        .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%);
            border-color: rgba(241, 154, 95, 0.3);
@@ -613,14 +729,55 @@
            color: var(--success-color);
        }

+        /* Dark theme feeding configuration styles */
+        .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
+            background: var(--bg-tertiary);
+            border-color: var(--border-color);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
+            color: var(--text-label);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-radio-group label {
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
+            color: #f19a5f;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
+            border-color: #f19a5f;
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+        }
+
+        .dog-calculator-container.theme-dark #mealNote {
+            color: var(--text-secondary);
+        }
+
        /* System theme - follows user's OS preference */
        @media (prefers-color-scheme: dark) {
            .dog-calculator-container.theme-system {
                --bg-primary: #24202d;
                --bg-secondary: #312b3b;
+                --bg-tertiary: #1f1b26;
                --border-color: #433c4f;
                --text-primary: #f5f3f7;
                --text-secondary: #b8b0c2;
+                --text-label: #9f94ae;
+                --success-color: #7fa464;
+                --error-color: #e87159;
                color: var(--text-primary);
            }
            
@@ -724,6 +881,19 @@
                color: white;
            }

+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+            }
+            
            .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%);
                border-color: rgba(241, 154, 95, 0.3);
@@ -764,6 +934,43 @@
                border-color: var(--success-color);
                color: var(--success-color);
            }
+
+            /* System theme feeding configuration styles in dark mode */
+            .dog-calculator-container.theme-system .dog-calculator-feeding-config {
+                background: var(--bg-tertiary);
+                border-color: var(--border-color);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
+                color: var(--text-label);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-radio-group label {
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
+                color: #f19a5f;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input span {
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
+                border-color: #f19a5f;
+                box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
+            }
+
+            .dog-calculator-container.theme-system #mealNote {
+                color: var(--text-secondary);
+            }
        }

        /* Modal Styles */
@@ -1673,6 +1880,20 @@
            color: white;
        }

+        .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            transform: none;
+        }
+
        /* Hidden unit select for compatibility */
        .dog-calculator-unit-select-hidden {
            display: none;
@@ -1855,8 +2076,20 @@
        document.head.appendChild(style);
    }
    
-    // ACTUAL JavaScript from iframe.html (transformed for widget use)
+    // JavaScript from src/calculator.js (transformed for widget use)
    /**
+ * Configuration constants for Dog Calorie Calculator
+ */
+
+const CALCULATOR_CONFIG = {
+    defaultTheme: 'system',
+    defaultScale: 1.0,
+    maxFoodSources: 5,
+    minScale: 0.5,
+    maxScale: 2.0
+};
+
+/**
         * Dog Calorie Calculator - iframe version
         * by Canine Nutrition and Wellness
         */
@@ -1873,9 +2106,12 @@
            this.scale = this.options.scale;
                this.currentMER = 0;
                this.isImperial = false;
-                
+                this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
+                this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
                this.foodSources = [];
-                this.maxFoodSources = 5;
+                this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
+                this.mealsPerDay = 2;
+                this.showPerMeal = false;
                this.init();
            }

@@ -1948,6 +2184,28 @@
                        <span>Add another food source</span>
                    </button>

+                    <!-- Feeding Configuration -->
+                    <div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
+                        <div class="dog-calculator-frequency-row">
+                            <label>Show amounts:</label>
+                            <div class="dog-calculator-radio-group">
+                                <label>
+                                    <input type="radio" name="showAs" value="daily" id="showDaily" checked>
+                                    <span>Per day</span>
+                                </label>
+                                <label>
+                                    <input type="radio" name="showAs" value="meal" id="showPerMeal">
+                                    <span>Per meal</span>
+                                </label>
+                            </div>
+                            <div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
+                                <span>×</span>
+                                <input type="number" id="mealsPerDay" value="2" min="1" max="10">
+                                <span>meals/day</span>
+                            </div>
+                        </div>
+                    </div>
+
                    <!-- Per-Food Results -->
                    <div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
                        <div id="foodBreakdownList">
@@ -1961,6 +2219,7 @@
                        <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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
                    </div>

                    <!-- Daily Total Results -->
@@ -1977,13 +2236,14 @@
                        <option value="kg">kilograms (kg)</option>
                        <option value="oz">ounces (oz)</option>
                        <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
                    </select>

                    <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
                        <h4 class="dog-calculator-section-title">
                            Calculate amounts for 
                            <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> 
-                            <span id="dayLabel">day</span>:
+                            <span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
                        </h4>
                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
                        <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
@@ -2097,7 +2357,7 @@
            getScaleFromURL() {
                const urlParams = new URLSearchParams(window.location.search);
                const scale = parseFloat(urlParams.get('scale'));
-                return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : null;
+                return (!isNaN(scale) && scale >= CALCULATOR_CONFIG.minScale && scale <= CALCULATOR_CONFIG.maxScale) ? scale : null;
            }

            applyTheme() {
@@ -2110,8 +2370,8 @@
                const container = this.container.querySelector('#dogCalculator');
                if (!container) return;

-                // Clamp scale between 0.5 and 2.0 for usability
-                const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
+                // Clamp scale between min and max for usability
+                const clampedScale = Math.max(CALCULATOR_CONFIG.minScale, Math.min(CALCULATOR_CONFIG.maxScale, this.scale));
                
                if (clampedScale !== 1.0) {
                    container.style.transform = `scale(${clampedScale})`;
@@ -2648,7 +2908,36 @@
                if (energyInput) {
                    energyInput.addEventListener('input', () => {
                        this.updateFoodSourceData(id, 'energy', energyInput.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select cups when entering energy for kcal/cup
+                        const foodSource = this.foodSources.find(fs => fs.id === id);
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+                            const unitSelect = this.container.querySelector('#unit');
+                            const cupsButton = this.container.querySelector('#cupsButton');
+                            
+                            // First check if cups button will be enabled after update
+                            const willEnableCups = this.foodSources.some(fs => 
+                                fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                            );
+                            
+                            if (willEnableCups && unitSelect) {
+                                // Set cups BEFORE updating calculations
+                                unitSelect.value = 'cups';
+                                unitSelect.setAttribute('value', 'cups');
+                                this.setActiveUnitButton('cups');
+                                
+                                // Enable the cups button manually since we know it will be valid
+                                if (cupsButton) {
+                                    cupsButton.disabled = false;
+                                    cupsButton.title = 'Show amounts in cups';
+                                }
+                            }
+                            
+                            // Now update calculations with cups already selected
+                            this.updateFoodCalculations();
+                        } else {
+                            this.updateFoodCalculations();
+                        }
                    });
                    energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
                }
@@ -2656,7 +2945,54 @@
                if (energyUnitSelect) {
                    energyUnitSelect.addEventListener('change', () => {
                        this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select the most appropriate unit based on energy unit
+                        const unitSelect = this.container.querySelector('#unit');
+                        const energyInput = document.getElementById(`energy-${id}`);
+                        
+                        if (unitSelect) {
+                            switch(energyUnitSelect.value) {
+                                case 'kcalcup':
+                                    // Check if we have energy value to enable cups
+                                    const foodSource = this.foodSources.find(fs => fs.id === id);
+                                    if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+                                        // Set cups BEFORE updating calculations
+                                        unitSelect.value = 'cups';
+                                        unitSelect.setAttribute('value', 'cups');
+                                        this.setActiveUnitButton('cups');
+                                        
+                                        // Enable the cups button manually
+                                        const cupsButton = this.container.querySelector('#cupsButton');
+                                        if (cupsButton) {
+                                            cupsButton.disabled = false;
+                                            cupsButton.title = 'Show amounts in cups';
+                                        }
+                                    }
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcal100g':
+                                    // For kcal/100g, select grams
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalkg':
+                                    // For kcal/kg, also select grams (or could be kg)
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalcan':
+                                    // For kcal/can, use grams as default (or ounces in imperial)
+                                    unitSelect.value = this.isImperial ? 'oz' : 'g';
+                                    this.setActiveUnitButton(unitSelect.value);
+                                    this.updateFoodCalculations();
+                                    break;
+                            }
+                        } else {
+                            // No unit select, just update calculations
+                            this.updateFoodCalculations();
+                        }
                    });
                }

@@ -2826,6 +3162,58 @@

                if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());

+                // Feeding configuration event listeners
+                const showDaily = this.container.querySelector('#showDaily');
+                const showPerMeal = this.container.querySelector('#showPerMeal');
+                const mealsPerDayInput = this.container.querySelector('#mealsPerDay');
+                const mealInputGroup = this.container.querySelector('#mealInputGroup');
+
+                if (showDaily) {
+                    showDaily.addEventListener('change', () => {
+                        if (showDaily.checked) {
+                            this.showPerMeal = false;
+                            if (mealInputGroup) mealInputGroup.style.display = 'none';
+                            this.updateDayLabel();
+                            this.updateFoodCalculations();
+                        }
+                    });
+                }
+
+                if (showPerMeal) {
+                    showPerMeal.addEventListener('change', () => {
+                        if (showPerMeal.checked) {
+                            this.showPerMeal = true;
+                            if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
+                            this.updateDayLabel();
+                            this.updateFoodCalculations();
+                        }
+                    });
+                }
+
+                if (mealsPerDayInput) {
+                    mealsPerDayInput.addEventListener('input', () => {
+                        const meals = parseInt(mealsPerDayInput.value);
+                        if (meals && meals >= 1 && meals <= 10) {
+                            this.mealsPerDay = meals;
+                            if (this.showPerMeal) {
+                                this.updateDayLabel();
+                                this.updateFoodCalculations();
+                            }
+                        }
+                    });
+
+                    mealsPerDayInput.addEventListener('blur', () => {
+                        if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
+                            mealsPerDayInput.value = 2;
+                            this.mealsPerDay = 2;
+                            if (this.showPerMeal) {
+                                this.updateDayLabel();
+                                this.updateFoodCalculations();
+                            }
+                        }
+                    });
+                }
+
                // Modal event listeners
                const shareBtn = this.container.querySelector('#shareBtn');
                const embedBtn = this.container.querySelector('#embedBtn');
@@ -3002,7 +3390,7 @@
                }
            }

-            convertUnits(grams, unit) {
+            convertUnits(grams, unit, foodSource = null) {
                switch (unit) {
                    case 'kg':
                        return grams / 1000;
@@ -3010,6 +3398,18 @@
                        return grams / 28.3495;
                    case 'lb':
                        return grams / 453.592;
+                    case 'cups':
+                        // For cups, we need to convert from grams worth of calories to cups
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+                            // Get calories per 100g for this food
+                            const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+                            // Calculate total calories represented by these grams
+                            const totalCalories = grams * caloriesPerGram;
+                            // Divide by calories per cup to get number of cups
+                            const caloriesPerCup = parseFloat(foodSource.energy);
+                            return totalCalories / caloriesPerCup;
+                        }
+                        return null; // Cannot convert to cups without kcal/cup
                    default:
                        return grams;
                }
@@ -3044,10 +3444,21 @@
            updateDayLabel() {
                const days = this.container.querySelector('#days')?.value;
                const dayLabel = this.container.querySelector('#dayLabel');
+                const mealNote = this.container.querySelector('#mealNote');
                if (dayLabel && days) {
                    const numDays = parseInt(days);
                    dayLabel.textContent = numDays === 1 ? 'day' : 'days';
                }
+                if (mealNote) {
+                    if (this.showPerMeal && days) {
+                        const numDays = parseInt(days);
+                        const totalMeals = numDays * this.mealsPerDay;
+                        mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
+                        mealNote.style.display = 'inline';
+                    } else {
+                        mealNote.style.display = 'none';
+                    }
+                }
            }

            setActiveUnitButton(unit) {
@@ -3102,6 +3513,31 @@
                this.sendHeightToParent();
            }

+            updateCupsButtonState() {
+                const cupsButton = this.container.querySelector('#cupsButton');
+                if (!cupsButton) return;
+                
+                // Check if any food source has kcal/cup selected
+                const hasKcalCup = this.foodSources.some(fs => 
+                    fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                );
+                
+                if (hasKcalCup) {
+                    cupsButton.disabled = false;
+                    cupsButton.title = 'Show amounts in cups';
+                } else {
+                    cupsButton.disabled = true;
+                    cupsButton.title = 'Available when using kcal/cup measurement';
+                    
+                    // If cups was selected, switch back to grams
+                    const unitSelect = this.container.querySelector('#unit');
+                    if (unitSelect && unitSelect.value === 'cups') {
+                        unitSelect.value = 'g';
+                        this.setActiveUnitButton('g');
+                    }
+                }
+            }
+
            updateFoodCalculations() {
                if (this.currentMER === 0) return;
                
@@ -3114,15 +3550,36 @@
                const totalAmountDisplay = this.container.querySelector('#totalAmountDisplay');
                const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
                const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
+                const feedingConfig = this.container.querySelector('#feedingConfig');
+                
+                // Update cups button state
+                this.updateCupsButtonState();

                if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
                    return;
                }

                const days = daysInput.value;
-                const unit = unitSelect.value;
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                let unit = unitSelect.value;
+                
+                // Failsafe: if unit is empty string but cups button is active, use 'cups'
+                if (!unit || unit === '') {
+                    const activeButton = this.container.querySelector('.dog-calculator-unit-btn.active');
+                    if (activeButton) {
+                        unit = activeButton.dataset.unit || 'g';
+                    } else {
+                        unit = 'g'; // Default fallback
+                    }
+                }
+                
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+                
+                // Debug: log what unit is being used
+                console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
+                
+                // Determine frequency suffix for display
+                const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
                
                // Clear all food source errors first
                this.foodSources.forEach(fs => {
@@ -3136,6 +3593,7 @@
                    foodAmountsSection.style.display = 'none';
                    dailyFoodResults.style.display = 'none';
                    if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    if (feedingConfig) feedingConfig.style.display = 'none';
                    
                    // Hide unit buttons when validation fails
                    const unitButtons = this.container.querySelector('#unitButtons');
@@ -3155,15 +3613,44 @@
                    
                    if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
                        const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
-                        const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        let dailyGramsForThisFood;
+                        let dailyCupsForThisFood = null;
+                        
+                        // For kcal/cup, calculate cups directly from calories
+                        if (fs.energyUnit === 'kcalcup' && fs.energy) {
+                            const caloriesPerCup = parseFloat(fs.energy);
+                            dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+                            // We still need grams for total calculation, use approximation
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                            console.log('Cups calculation:', {
+                                caloriesPerCup,
+                                dailyCaloriesForThisFood,
+                                dailyCupsForThisFood,
+                                dailyGramsForThisFood
+                            });
+                        } else {
+                            // For other units, calculate grams normally
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        }
+                        
+                        // Calculate per-meal amounts if needed
+                        const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+                        const displayCups = dailyCupsForThisFood !== null ? 
+                            (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
+                        const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
                        
                        foodBreakdowns.push({
                            name: fs.name,
                            percentage: fs.percentage,
                            dailyGrams: dailyGramsForThisFood,
+                            displayGrams: displayGrams,
+                            dailyCups: dailyCupsForThisFood,
+                            displayCups: displayCups,
                            calories: dailyCaloriesForThisFood,
+                            displayCalories: displayCalories,
                            isLocked: fs.isLocked,
-                            hasEnergyContent: true
+                            hasEnergyContent: true,
+                            foodSource: fs  // Store reference for cups conversion
                        });
                        
                        totalDailyGrams += dailyGramsForThisFood;
@@ -3174,9 +3661,14 @@
                            name: fs.name,
                            percentage: fs.percentage,
                            dailyGrams: 0,
+                            displayGrams: 0,
+                            dailyCups: null,
+                            displayCups: null,
                            calories: 0,
+                            displayCalories: 0,
                            isLocked: fs.isLocked,
-                            hasEnergyContent: false
+                            hasEnergyContent: false,
+                            foodSource: fs  // Store reference for cups conversion
                        });
                    }
                });
@@ -3192,6 +3684,7 @@
                    
                    dailyFoodResults.style.display = 'none';
                    if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    if (feedingConfig) feedingConfig.style.display = 'none';
                    
                    // Hide unit buttons when no valid foods
                    const unitButtons = this.container.querySelector('#unitButtons');
@@ -3238,6 +3731,17 @@
                // Update daily food results (total) - will be updated with proper units later
                dailyFoodResults.style.display = 'block';
                
+                // Show feeding configuration when we have valid foods
+                if (feedingConfig) {
+                    feedingConfig.style.display = 'block';
+                    
+                    // Ensure "Per day" is checked when feeding config becomes visible
+                    const showDaily = this.container.querySelector('#showDaily');
+                    if (showDaily && !showDaily.checked && !this.container.querySelector('#showPerMeal').checked) {
+                        showDaily.checked = true;
+                    }
+                }
+                
                // Show unit buttons when daily results are shown
                const unitButtons = this.container.querySelector('#unitButtons');
                if (unitButtons) unitButtons.style.display = 'flex';
@@ -3245,9 +3749,21 @@
                // Update per-food breakdown
                if (foodBreakdownList && foodBreakdowns.length > 1) {
                    const breakdownHTML = foodBreakdowns.map(breakdown => {
-                        const valueContent = breakdown.hasEnergyContent 
-                            ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
-                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        let valueContent;
+                        if (breakdown.hasEnergyContent) {
+                            if (unit === 'cups') {
+                                // For cups, use the pre-calculated cups value if available
+                                if (breakdown.displayCups !== null) {
+                                    valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+                                } else {
+                                    valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                                }
+                            } else {
+                                valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+                            }
+                        } else {
+                            valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        }
                        
                        return `
                            <div class="dog-calculator-food-result-item">
@@ -3266,8 +3782,41 @@
                // Generate individual food amount breakdown
                
                // Update daily food value with correct units
-                const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
-                dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
+                const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
+                let convertedTotal;
+                let totalDisplayText;
+                
+                if (unit === 'cups') {
+                    console.log('Unit is cups, checking validity...');
+                    // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+                    const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                        .every(b => b.displayCups !== null && b.displayCups !== undefined);
+                    
+                    console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+                    
+                    if (validForCups) {
+                        // Calculate total cups using pre-calculated values
+                        let totalCups = 0;
+                        foodBreakdowns.forEach(breakdown => {
+                            if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+                                totalCups += breakdown.displayCups;
+                            }
+                        });
+                        console.log('Total cups display:', {
+                            totalCups,
+                            displayTotal,
+                            foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+                        });
+                        totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                    } else {
+                        totalDisplayText = 'Mixed units - see breakdown';
+                    }
+                } else {
+                    convertedTotal = this.convertUnits(displayTotal, unit);
+                    totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                }
+                
+                dailyFoodValue.textContent = totalDisplayText;
                
                // Build HTML for individual food amounts
                const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3288,8 +3837,24 @@
                            </div>
                        `;
                    } else {
-                        const totalGramsForDays = breakdown.dailyGrams * numDays;
-                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        // For multi-day calculations: show total amount for all days
+                        let amountDisplay;
+                        if (unit === 'cups') {
+                            // For cups, use pre-calculated cups value
+                            if (breakdown.dailyCups !== null) {
+                                const totalCupsForDays = breakdown.dailyCups * numDays;
+                                amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+                            } else {
+                                amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                            }
+                        } else {
+                            // For other units, calculate from grams
+                            const totalGramsForDays = this.showPerMeal 
+                                ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+                                : breakdown.dailyGrams * numDays;
+                            const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                            amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+                        }
                        
                        return `
                            <div class="dog-calculator-food-amount-item">
@@ -3299,7 +3864,7 @@
                                    ${lockIndicator}
                                </div>
                                <div class="dog-calculator-food-amount-value">
-                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                    ${amountDisplay}
                                </div>
                            </div>
                        `;
@@ -3308,7 +3873,6 @@
                
                // Calculate and display total
                const totalFoodGrams = totalDailyGrams * numDays;
-                const totalConverted = this.convertUnits(totalFoodGrams, unit);
                
                // Update the display
                if (foodAmountsList) {
@@ -3316,7 +3880,27 @@
                }
                
                if (totalAmountDisplay) {
-                    totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    if (unit === 'cups') {
+                        // For cups total, check if all foods can be converted
+                        const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                            .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+                        
+                        if (validForCups) {
+                            // Calculate total cups using pre-calculated values
+                            let totalCups = 0;
+                            foodBreakdowns.forEach(breakdown => {
+                                if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+                                    totalCups += breakdown.dailyCups * numDays;
+                                }
+                            });
+                            totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+                        } else {
+                            totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+                        }
+                    } else {
+                        const totalConverted = this.convertUnits(totalFoodGrams, unit);
+                        totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    }
                }
                
                foodAmountsSection.style.display = 'block';
Author	SHA1	Message	Date
Dayowe	4ec42fdbc0	Add cups unit option for kcal/cup measurements Features: - Add cups as a unit option that only works with kcal/cup energy measurements - Cups button is disabled with tooltip when kcal/cup is not selected - Auto-select cups when user selects kcal/cup as energy unit - Auto-switch to appropriate units when changing energy measurement types - Calculate cup amounts directly from calories without density assumptions Fixes: - Ensure cups display correct values immediately upon auto-selection - Fix "Per day" radio button to be pre-selected when feeding config becomes visible - Handle empty unit values with failsafe fallback to active button Technical details: - Direct calorie-to-cups conversion bypassing gram conversions - Pre-calculate cups values in food breakdown for efficient display - Set unit before updating calculations to avoid timing issues - Added CSS styling for disabled button state across all themes	2025-08-18 14:36:25 +02:00
Dayowe	8758ac1dbc	Add per-meal feeding frequency feature - Added feeding configuration section with daily/per-meal toggle - Implemented meals per day selector (1-10 meals) - Updated all calculations to support per-meal division - Dynamic unit labels change from "/day" to "/meal" - Added helpful meal count display for multi-day calculations - Proper dark theme support for new UI elements - Mobile responsive design for feeding controls - Centered meal input group for better UX This feature allows users to easily switch between viewing daily food amounts and per-meal portions, making feeding schedules more practical to follow.	2025-08-18 12:45:44 +02:00
Dayowe	c7a4aa01ba	Improve build system and clean up project structure - Configure build script to create backups in backup/ directory - Add backup/ directory to .gitignore to keep repo clean - Add .gitignore file with common exclusions - Remove obsolete dog-food-calculator-widget.js file - Move all temporary and reference files to sundog-calculator-meta/ This keeps the project root clean and organized while maintaining automatic backups during builds.	2025-08-18 09:21:54 +02:00
Dayowe	73793f43a1	Reorganize source structure for better maintainability - Move from 3-file structure to organized 5-file structure - Create css/ and js/ subdirectories for better organization - Split styles into main.css and themes.css for clarity - Extract configuration constants to separate config.js file - Rename template.html to index.html for clarity - Update build.js to handle new organized structure - Replace magic numbers with CALCULATOR_CONFIG constants New structure: src/ ├── index.html (HTML template) ├── css/ │ ├── main.css (Core styles) │ └── themes.css (Theme variations) └── js/ ├── config.js (Configuration constants) └── calculator.js (Main logic) This provides a good balance between organization and simplicity, making the codebase easier to maintain without over-modularization.	2025-08-18 09:05:00 +02:00
Dayowe	ba3e0a6a6a	Modularize calculator into separate source files - Split 3470-line iframe.html into manageable components - Created src/ directory with styles.css, template.html, calculator.js - Updated build.js to assemble from modular source files - Maintains identical functionality with improved maintainability - Single source of truth: edit in src/, run build.js to generate both outputs	2025-08-17 21:20:05 +02:00