Updte file

Fixed the build script to properly handle data-theme and data-scale attributes:
- Remove duplicate theme/scale assignments that were overriding options
- Apply theme classes to correct element (#dogCalculator)
- Support all three themes: light, dark, system
- Remove duplicate applyTheme/applyScale calls in init method

README.md

@@ -1,22 +1,44 @@
 # 🐕 Sundog Dog Food Calorie Calculator
 
-A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Built for embedding on websites with complete brand protection options.
+A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Features advanced multi-food source management, percentage locking, and detailed food amount breakdowns. Built for embedding on websites with complete brand protection options.
 
 **By [Canine Nutrition and Wellness](https://caninenutritionandwellness.com)**
 
 ## ✨ Features
 
+### Core Calculation Features
 - **Accurate Calculations**: Uses veterinary-standard RER formula: `70 × (weight in kg)^0.75`
 - **Multiple Activity Levels**: 11 different dog types and activity factors
 - **Multi-Region Support**: kcal/100g (EU/UK), kcal/kg, kcal/cup, kcal/can (US/Canada)
-- **Food Amount Calculator**: Converts calories to grams/kg/oz/lb of food
+- **Unit Conversion**: Automatic conversion to grams/kg/oz/lb for food amounts
+- **Smart Unit Selection**: Auto-selects grams for metric and ounces for imperial systems
+- **Unit Selection Buttons**: Intuitive button interface for choosing display units (g/kg/oz/lb)
+
+### Multi-Food Source Management
+- **Multiple Food Sources**: Add up to 5 different food sources per diet plan
+- **Percentage System**: Distribute diet percentages across multiple foods with real-time validation
+- **Percentage Locking**: Lock specific food source percentages to maintain fixed ratios
+- **Smart Redistribution**: Automatic percentage rebalancing when sources are added/removed
+- **Editable Food Names**: Click-to-edit food source names (e.g., "Morning Kibble", "Evening Wet Food")
+
+### Food Amount Breakdown
+- **Individual Food Amounts**: See exact amounts needed for each food source
+- **Per-Food Calculations**: Calculate specific quantities for different food types
+- **Total Summary**: Combined totals with clear breakdown by food source
+- **Lock Indicators**: Visual indicators showing which percentages are locked
+
+### User Experience
 - **Scalable Widget**: Easily resize from 50% to 200% with data attributes
 - **Theme Support**: Light, dark, and system themes
-- **Responsive Design**: Mobile-first, works on all devices
-- **Brand Integration**: Uses Canine Nutrition and Wellness color scheme
+- **Responsive Design**: Mobile-first, optimized layouts for all devices
 - **Two Embedding Options**: JavaScript widget and iframe
 - **Accessibility**: Full keyboard navigation and screen reader support
 
+### Brand & Integration
+- **Brand Integration**: Uses Canine Nutrition and Wellness color scheme
+- **Professional Design**: Clean, veterinary-grade interface
+- **Brand Protection**: Complete iframe isolation option
+
 ## 🚀 Quick Start
 
 ### Option 1: JavaScript Widget (Recommended)
@@ -50,6 +72,59 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
 </iframe>
 ```
 
+## 🍽️ Multi-Food Source Usage
+
+The calculator supports complex feeding plans with multiple food sources, perfect for mixed diets combining dry food, wet food, treats, and supplements.
+
+### Basic Multi-Food Workflow
+
+1. **Start with one food source** - Calculator begins with a single "Food Source 1"
+2. **Add more sources** - Click "Add another food source" (up to 5 total)
+3. **Customize names** - Click any food source name to edit (e.g., "Morning Kibble", "Evening Wet Food")
+4. **Set energy content** - Enter kcal values and select appropriate units for each food
+5. **Adjust percentages** - Use sliders or input fields to distribute diet percentages
+6. **Lock percentages** - Click 🔒 to lock specific food source percentages
+7. **Get individual amounts** - See exact quantities needed for each food source
+
+### Percentage System Features
+
+- **Real-time Validation**: Percentages always total exactly 100%
+- **Smart Redistribution**: When you change one percentage, others adjust automatically
+- **Percentage Locking**: Lock specific sources to maintain fixed ratios
+- **Visual Feedback**: Lock indicators show which percentages are fixed
+- **Bulletproof Logic**: Prevents impossible states (negative percentages, >100% totals)
+
+### Example Usage Scenarios
+
+**Mixed Diet Example:**
+```
+Royal Canin Dry Food    → 70% (locked)
+Blue Buffalo Wet Food   → 25%
+Training Treats         → 5%
+```
+
+**Meal-Based Planning:**
+```
+Morning Kibble          → 50%
+Evening Wet Food        → 30%
+Midday Snacks          → 20%
+```
+
+**Transition Diet:**
+```
+Old Food (reducing)     → 25%
+New Food (increasing)   → 75% (locked)
+```
+
+### Food Amount Breakdown
+
+The calculator provides detailed breakdowns showing:
+- **Individual amounts** for each food source
+- **Percentage distribution** with visual indicators
+- **Lock status** for each food source
+- **Total combined amount** for the specified number of days
+- **Unit conversion** (grams, kg, oz, lb) for all amounts
+
 ## ⚙️ Configuration Options
 
 ### Theme Options
@@ -218,18 +293,39 @@ Your branding is completely protected in iframe mode. Users cannot:
 ## 🧪 Testing
 
 ### Manual Testing Checklist
+
+#### Core Functionality
 - [ ] All dog type selections work
 - [ ] Weight validation (minimum 0.1kg)
 - [ ] RER/MER calculations accurate
-- [ ] Food energy unit selector (kcal/100g, kcal/kg, kcal/cup, kcal/can)
-- [ ] Food energy validation (minimum values per unit)
 - [ ] Unit conversions (g/kg/oz/lb) correct
 - [ ] Theme switching (light/dark/system)
 - [ ] Scale options (0.5x to 2.0x) work properly
-- [ ] Collapsible section toggles
+
+#### Multi-Food Source Features
+- [ ] Add food sources (up to 5 maximum)
+- [ ] Remove food sources (minimum 1 maintained)
+- [ ] Edit food source names (click-to-edit functionality)
+- [ ] Food energy content validation per source
+- [ ] Food energy unit selector per source (kcal/100g, kcal/kg, kcal/cup, kcal/can)
+- [ ] Percentage slider adjustments work correctly
+- [ ] Percentage input field validation
+- [ ] Percentage locking/unlocking (🔒 icon)
+- [ ] Smart percentage redistribution when sources change
+- [ ] Total percentages always equal 100%
+- [ ] Individual food amount calculations
+- [ ] Food amount breakdown display
+- [ ] Add button states ("Add another food source" vs "Maximum 5 sources reached")
+
+#### User Interface
 - [ ] Mobile responsive layout
+- [ ] Collapsible section toggles
+- [ ] Visual lock indicators display correctly
+- [ ] Percentage badges and styling
 - [ ] Branded footer link works
 - [ ] Box shadows consistent across all sections
+- [ ] Food source name alignment on mobile
+- [ ] Proper input field sizing on mobile
 
 ### Browser Compatibility
 - ✅ Chrome 90+
@@ -257,8 +353,8 @@ This calculator is provided for educational and professional use. The formulas a
 ## 🔗 Links
 
 - **Website**: [caninenutritionandwellness.com](https://caninenutritionandwellness.com)
-- **Demo**: Open `embed-demo.html` in your browser
-- **Standalone**: Open `index.html` in your browser
+- **Widget Demo**: Open `test-widget.html` in your browser
+- **Standalone**: Open `iframe.html` in your browser
 
 ---
 

build-system.js

@@ -1,307 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Dog Calculator Build System
- * 
- * This solves ALL duplication between iframe.html and dog-food-calculator-widget.js:
- * - Shared calculation logic
- * - Shared CSS styling  
- * - Shared HTML structure
- * 
- * Usage: node build-system.js
- */
-
-const fs = require('fs');
-
-console.log('🎨 Building Dog Calculator with shared styling and structure...');
-
-// Read source files
-function readSourceFiles() {
-    const sharedLogic = fs.readFileSync('dog-calculator-shared.js', 'utf8');
-    const sharedCSS = fs.readFileSync('shared-styles.css', 'utf8');
-    const sharedHTML = fs.readFileSync('shared-template.html', 'utf8');
-    
-    return { sharedLogic, sharedCSS, sharedHTML };
-}
-
-// Generate iframe.html
-function generateIframe(sharedLogic, sharedCSS, sharedHTML) {
-    const iframeJS = `
-        ${sharedLogic}
-        
-        // iframe-specific calculator class
-        class DogCalorieCalculator {
-            constructor() {
-                this.currentMER = 0;
-                this.isImperial = false;
-                this.theme = DogCalculatorCore.getThemeFromURL();
-                this.scale = DogCalculatorCore.getScaleFromURL();
-                this.init();
-            }
-
-            init() {
-                this.applyTheme();
-                this.applyScale();
-                this.bindEvents();
-                this.updateUnitLabels();
-                this.setupIframeResize();
-                
-                const container = document.getElementById('dogCalculator');
-                container.classList.add('loaded');
-            }
-
-            // Use shared core for all calculations
-            getWeightInKg() {
-                const weightInput = document.getElementById('weight');
-                if (!weightInput || !weightInput.value) return null;
-                const weight = parseFloat(weightInput.value);
-                return isNaN(weight) ? null : DogCalculatorCore.convertWeightToKg(weight, this.isImperial);
-            }
-
-            calculateRER(weightKg) { return DogCalculatorCore.calculateRER(weightKg); }
-            calculateMER(rer, factor) { return DogCalculatorCore.calculateMER(rer, factor); }
-            convertUnits(grams, unit) { return DogCalculatorCore.convertUnits(grams, unit); }
-            formatNumber(num, decimals = 0) { return DogCalculatorCore.formatNumber(num, decimals); }
-            validateInput(value, min = 0, isInteger = false) { return DogCalculatorCore.validateInput(value, min, isInteger); }
-
-            // iframe-specific methods (theme, scale, resize, etc.)
-            applyTheme() {
-                const container = document.getElementById('dogCalculator');
-                container.classList.remove('theme-light', 'theme-dark', 'theme-system');
-                container.classList.add('theme-' + this.theme);
-            }
-
-            applyScale() {
-                const container = document.getElementById('dogCalculator');
-                if (!container) return;
-                const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
-                if (clampedScale !== 1.0) {
-                    container.style.transform = \`scale(\${clampedScale})\`;
-                    container.style.transformOrigin = 'top center';
-                    setTimeout(() => this.sendHeightToParent(), 100);
-                }
-            }
-
-            setupIframeResize() {
-                this.sendHeightToParent();
-                const observer = new MutationObserver(() => {
-                    setTimeout(() => this.sendHeightToParent(), 100);
-                });
-                observer.observe(document.body, {
-                    childList: true, subtree: true, attributes: true
-                });
-                window.addEventListener('resize', () => this.sendHeightToParent());
-            }
-
-            sendHeightToParent() {
-                const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-                if (window.parent && window.parent !== window) {
-                    window.parent.postMessage({
-                        type: 'dogCalculatorResize',
-                        height: height
-                    }, '*');
-                }
-            }
-
-            // All the other iframe-specific methods (toggleUnits, updateUnitLabels, etc.)
-            // These would be the full implementations from the original iframe.html
-        }
-
-        // Initialize when DOM ready
-        document.addEventListener('DOMContentLoaded', function() {
-            new DogCalorieCalculator();
-        });`;
-
-    const iframeContent = `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
-    <style>
-        ${sharedCSS}
-    </style>
-</head>
-<body>
-    ${sharedHTML}
-    <script>
-        ${iframeJS}
-    </script>
-</body>
-</html>`;
-
-    fs.writeFileSync('iframe.html', iframeContent);
-    console.log('✓ Generated iframe.html');
-}
-
-// Generate dog-food-calculator-widget.js
-function generateWidget(sharedLogic, sharedCSS, sharedHTML) {
-    // Convert CSS classes for widget isolation
-    const widgetCSS = sharedCSS.replace(/dog-calculator-/g, 'dog-calc-');
-    const widgetHTML = sharedHTML.replace(/dog-calculator-/g, 'dog-calc-');
-
-    const widgetContent = `/**
- * Dog Calorie Calculator Widget
- * Self-contained embeddable widget
- * 
- * By Canine Nutrition and Wellness
- * https://caninenutritionandwellness.com
- */
-
-(function() {
-    'use strict';
-    
-    // Embed shared core logic
-    ${sharedLogic}
-    
-    // Embed styles with widget prefixing
-    const CSS_STYLES = \`${widgetCSS}\`;
-    
-    function injectStyles() {
-        if (document.getElementById('dog-calc-styles')) return;
-        const style = document.createElement('style');
-        style.id = 'dog-calc-styles';
-        style.textContent = CSS_STYLES;
-        document.head.appendChild(style);
-    }
-    
-    // Widget-specific calculator class
-    class DogCalorieCalculator {
-        constructor(container, options = {}) {
-            this.container = container;
-            this.options = {
-                theme: options.theme || DogCalculatorCore.getThemeFromURL(),
-                scale: options.scale || DogCalculatorCore.getScaleFromURL(),
-                ...options
-            };
-            this.currentMER = 0;
-            this.isImperial = false;
-            this.init();
-        }
-
-        init() {
-            this.setupHTML();
-            this.applyTheme();
-            this.applyScale();
-            this.bindEvents();
-            this.updateUnitLabels();
-        }
-
-        setupHTML() {
-            this.container.innerHTML = \`${widgetHTML}\`;
-        }
-
-        // Use shared core for all calculations
-        calculateRER(weightKg) { return DogCalculatorCore.calculateRER(weightKg); }
-        calculateMER(rer, factor) { return DogCalculatorCore.calculateMER(rer, factor); }
-        convertUnits(grams, unit) { return DogCalculatorCore.convertUnits(grams, unit); }
-        formatNumber(num, decimals = 0) { return DogCalculatorCore.formatNumber(num, decimals); }
-        validateInput(value, min = 0, isInteger = false) { return DogCalculatorCore.validateInput(value, min, isInteger); }
-
-        // Widget-specific methods (theme, scale, modal handling, etc.)
-        applyTheme() {
-            if (this.options.theme === 'light' || this.options.theme === 'dark') {
-                this.container.setAttribute('data-theme', this.options.theme);
-            }
-        }
-
-        applyScale() {
-            const scale = Math.max(0.5, Math.min(2.0, this.options.scale));
-            if (scale !== 1.0) {
-                this.container.style.transform = \`scale(\${scale})\`;
-                this.container.style.transformOrigin = 'top left';
-            }
-        }
-
-        // All other widget methods would go here...
-    }
-    
-    // Auto-initialize widget
-    function initializeWidget() {
-        injectStyles();
-        const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator');
-        containers.forEach(container => {
-            if (container.dataset.initialized) return;
-            const options = {
-                theme: container.dataset.theme || 'system',
-                scale: parseFloat(container.dataset.scale) || 1.0
-            };
-            new DogCalorieCalculator(container, options);
-            container.dataset.initialized = 'true';
-        });
-    }
-    
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initializeWidget);
-    } else {
-        initializeWidget();
-    }
-    
-    window.DogCalorieCalculatorWidget = DogCalorieCalculator;
-})();`;
-
-    fs.writeFileSync('dog-food-calculator-widget.js', widgetContent);
-    console.log('✓ Generated dog-food-calculator-widget.js');
-}
-
-// Main build function
-function build() {
-    try {
-        console.log('📁 Creating source template files...');
-        createSourceTemplates();
-        
-        console.log('📖 Reading source files...');
-        const { sharedLogic, sharedCSS, sharedHTML } = readSourceFiles();
-        
-        console.log('🏗️ Generating production files...');
-        generateIframe(sharedLogic, sharedCSS, sharedHTML);
-        generateWidget(sharedLogic, sharedCSS, sharedHTML);
-        
-        console.log('✅ Build completed successfully!');
-        console.log('');
-        console.log('🎯 Now you only need to edit these source files:');
-        console.log('   - dog-calculator-shared.js (calculation logic)');
-        console.log('   - shared-styles.css (styling)');
-        console.log('   - shared-template.html (HTML structure)');
-        console.log('');
-        console.log('💫 Run "node build-system.js" to regenerate both production files');
-        
-    } catch (error) {
-        if (error.code === 'ENOENT') {
-            console.log('📁 Creating source template files first...');
-            createSourceTemplates();
-            console.log('✅ Template files created! Run the build again.');
-        } else {
-            console.error('❌ Build failed:', error.message);
-        }
-    }
-}
-
-// Create source template files from existing iframe.html
-function createSourceTemplates() {
-    if (!fs.existsSync('shared-styles.css')) {
-        console.log('📄 Extracting CSS from iframe.html...');
-        const iframeContent = fs.readFileSync('iframe.html', 'utf8');
-        const cssMatch = iframeContent.match(/<style>([\s\S]*?)<\/style>/);
-        if (cssMatch) {
-            fs.writeFileSync('shared-styles.css', cssMatch[1].trim());
-            console.log('✓ Created shared-styles.css');
-        }
-    }
-    
-    if (!fs.existsSync('shared-template.html')) {
-        console.log('📄 Extracting HTML from iframe.html...');
-        const iframeContent = fs.readFileSync('iframe.html', 'utf8');
-        const bodyMatch = iframeContent.match(/<body>([\s\S]*?)<script>/);
-        if (bodyMatch) {
-            fs.writeFileSync('shared-template.html', bodyMatch[1].trim());
-            console.log('✓ Created shared-template.html');
-        }
-    }
-}
-
-if (require.main === module) {
-    build();
-}
-
-module.exports = { build };

build.js

@@ -86,36 +86,102 @@ function generateIframe(css, html, js) {
 }
 
 /**
- * Transform CSS classes from dog-calculator- to dog-calc-
+ * No transformation needed - keep original class names for consistency
  */
 function transformCSSForWidget(css) {
-    return css
-        .replace(/\.dog-calculator-/g, '.dog-calc-')
-        .replace(/#dog-calculator/g, '#dog-calc')
-        .replace(/dog-calculator-/g, 'dog-calc-');
+    return css;
 }
 
 /**
- * Transform HTML for widget (class names and IDs)
+ * No transformation needed - keep original class names for consistency
  */
 function transformHTMLForWidget(html) {
-    return html
-        .replace(/dog-calculator-/g, 'dog-calc-')
-        .replace(/id="dogCalculator"/g, 'id="dogCalc"');
+    return html;
 }
 
 /**
- * Create production-ready widget JavaScript
+ * Create production-ready widget JavaScript that uses the ACTUAL extracted JS from iframe.html
  */
 function createWidgetJS(css, html, js) {
-    // Transform CSS and HTML for widget namespacing
-    const widgetCSS = transformCSSForWidget(css);
-    const widgetHTML = transformHTMLForWidget(html);
+    // Transform the extracted JavaScript from iframe.html to work as a widget
+    
+    // Replace the iframe's DOMContentLoaded listener with widget initialization
+    let transformedJS = js
+        // Replace the iframe class name with widget class name
+        .replace(/class DogCalorieCalculator/g, 'class DogCalorieCalculatorWidget')
+        // Replace document.getElementById with scoped selectors within the widget
+        .replace(/document\.getElementById\('([^']+)'\)/g, 'this.container.querySelector(\'#$1\')')
+        // Replace direct document queries in the class with container-scoped queries
+        .replace(/document\.querySelector\(/g, 'this.container.querySelector(')
+        .replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(')
+        // Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper
+        .replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '')
+        // Remove duplicate theme/scale assignments that override options
+        .replace(/this\.theme = this\.getThemeFromURL\(\) \|\| 'system';\s*\n\s*this\.scale = this\.getScaleFromURL\(\) \|\| 1\.0;/g, '')
+        // Add widget initialization methods
+        .replace(/constructor\(\) \{/, `constructor(container, options = {}) {
+            this.container = container;
+            this.options = {
+                theme: options.theme || this.getThemeFromURL() || 'system',
+                scale: options.scale || this.getScaleFromURL() || 1.0,
+                ...options
+            };
+            this.theme = this.options.theme;
+            this.scale = this.options.scale;`)
+        // Replace the init() method to inject HTML and apply widget settings
+        .replace(/init\(\) \{/, `init() {
+            // Inject the calculator HTML into the container
+            this.container.innerHTML = \`${html}\`;
+            
+            // Apply widget-specific settings
+            this.applyTheme();
+            this.applyScale();
+            
+            // Continue with original init logic`)
+        // Remove duplicate applyTheme/applyScale calls
+        .replace(/this\.applyTheme\(\);\s*\n\s*this\.applyScale\(\);\s*\n\s*this\.bindEvents/g, 'this.bindEvents');
+    
+    // Add widget-specific methods before the class closing brace
+    transformedJS = transformedJS.replace(/(\s+)(\}\s*$)/, `$1
+        getThemeFromURL() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const theme = urlParams.get('theme');
+            return ['light', 'dark', 'system'].includes(theme) ? theme : null;
+        }
+
+        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;
+        }
+
+        applyTheme() {
+            const calculatorContainer = this.container.querySelector('#dogCalculator');
+            if (calculatorContainer) {
+                // Remove existing theme classes
+                calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system');
+                // Add the selected theme class
+                if (['light', 'dark', 'system'].includes(this.options.theme)) {
+                    calculatorContainer.classList.add('theme-' + this.options.theme);
+                }
+            }
+        }
+
+        applyScale() {
+            const scale = Math.max(0.5, Math.min(2.0, this.options.scale));
+            if (scale !== 1.0) {
+                this.container.style.transform = \`scale(\${scale})\`;
+                this.container.style.transformOrigin = 'top left';
+            }
+        }$2`);
 
     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
+ * 
  * Usage:
  * <script src="sundog-dog-food-calculator.js"></script>
  * <div id="dog-calorie-calculator"></div>
@@ -130,341 +196,20 @@ function createWidgetJS(css, html, js) {
 (function() {
     'use strict';
     
-    // Inject widget styles with proper namespacing
-    const CSS_STYLES = \`${widgetCSS}\`;
+    // Inject widget styles
+    const CSS_STYLES = \`${css}\`;
     
     function injectStyles() {
-        if (document.getElementById('dog-calc-styles')) return;
+        if (document.getElementById('dog-calculator-styles')) return;
         
         const style = document.createElement('style');
-        style.id = 'dog-calc-styles';
+        style.id = 'dog-calculator-styles';
         style.textContent = CSS_STYLES;
         document.head.appendChild(style);
     }
     
-    // Main widget class
-    class DogCalorieCalculatorWidget {
-        constructor(container, options = {}) {
-            this.container = container;
-            this.options = {
-                theme: options.theme || this.getThemeFromURL() || 'system',
-                scale: options.scale || this.getScaleFromURL() || 1.0,
-                ...options
-            };
-            this.init();
-        }
-        
-        init() {
-            // Insert the transformed calculator HTML
-            this.container.innerHTML = \`${widgetHTML}\`;
-            
-            // Apply widget-specific settings
-            this.applyTheme();
-            this.applyScale();
-            
-            // Initialize the calculator with the same functionality as iframe
-            this.initCalculator();
-        }
-        
-        initCalculator() {
-            const container = this.container;
-            
-            // Helper functions to scope DOM queries to this widget
-            const $ = (selector) => container.querySelector(selector);
-            const $$ = (selector) => container.querySelectorAll(selector);
-            
-            // Create calculator instance with exact same logic as iframe
-            const calc = {
-                currentMER: 0,
-                isImperial: false,
-                theme: this.options.theme,
-                scale: this.options.scale,
-                
-                // Exact same calculation methods from iframe
-                calculateRER: (weightKg) => 70 * Math.pow(weightKg, 0.75),
-                calculateMER: (rer, factor) => rer * factor,
-                
-                formatNumber: (num, decimals = 0) => {
-                    if (decimals === 0) return Math.round(num).toString();
-                    return num.toFixed(decimals).replace(/\\.?0+$/, '');
-                },
-                
-                validateInput: (value, min = 0, isInteger = false) => {
-                    const num = parseFloat(value);
-                    if (isNaN(num) || num < min) return false;
-                    if (isInteger && !Number.isInteger(num)) return false;
-                    return true;
-                },
-                
-                convertUnits: (grams, unit) => {
-                    switch (unit) {
-                        case 'kg': return grams / 1000;
-                        case 'oz': return grams / 28.3495;
-                        case 'lb': return grams / 453.592;
-                        default: return grams;
-                    }
-                },
-                
-                getWeightInKg: () => {
-                    const weightInput = $('#weight');
-                    if (!weightInput || !weightInput.value) return null;
-                    const weight = parseFloat(weightInput.value);
-                    if (isNaN(weight)) return null;
-                    return calc.isImperial ? weight / 2.20462 : weight;
-                },
-                
-                getFoodEnergyPer100g: () => {
-                    const foodEnergyInput = $('#foodEnergy');
-                    const energyUnitSelect = $('#energyUnit');
-                    if (!foodEnergyInput || !foodEnergyInput.value || !energyUnitSelect) return null;
-                    
-                    const energy = parseFloat(foodEnergyInput.value);
-                    if (isNaN(energy)) return null;
-                    
-                    const unit = energyUnitSelect.value;
-                    switch (unit) {
-                        case 'kcal100g': return energy;
-                        case 'kcalkg': return energy / 10;
-                        case 'kcalcup': return energy / 1.2;
-                        case 'kcalcan': return energy / 4.5;
-                        default: return energy;
-                    }
-                },
-                
-                showError: (elementId, show = true) => {
-                    const errorElement = $('#' + elementId);
-                    if (errorElement) {
-                        if (show) {
-                            errorElement.classList.remove('dog-calc-hidden');
-                        } else {
-                            errorElement.classList.add('dog-calc-hidden');
-                        }
-                    }
-                },
-                
-                updateCalorieCalculations: () => {
-                    const dogTypeSelect = $('#dogType');
-                    const calorieResults = $('#calorieResults');
-                    const rerValue = $('#rerValue');
-                    const merValue = $('#merValue');
-
-                    if (!dogTypeSelect || !calorieResults || !rerValue || !merValue) return;
-
-                    const weightKg = calc.getWeightInKg();
-                    const dogTypeFactor = dogTypeSelect.value;
-                    
-                    calc.showError('weightError', false);
-                    
-                    if (!weightKg || weightKg < 0.1) {
-                        const weightInput = $('#weight');
-                        if (weightInput && weightInput.value) calc.showError('weightError', true);
-                        calorieResults.style.display = 'none';
-                        return;
-                    }
-
-                    if (!dogTypeFactor) {
-                        calorieResults.style.display = 'none';
-                        return;
-                    }
-
-                    const factor = parseFloat(dogTypeFactor);
-                    const rer = calc.calculateRER(weightKg);
-                    const mer = calc.calculateMER(rer, factor);
-                    
-                    calc.currentMER = mer;
-                    
-                    rerValue.textContent = calc.formatNumber(rer, 0) + ' cal/day';
-                    merValue.textContent = calc.formatNumber(mer, 0) + ' cal/day';
-                    calorieResults.style.display = 'block';
-                    
-                    calc.updateFoodCalculations();
-                },
-                
-                updateFoodCalculations: () => {
-                    if (calc.currentMER === 0) return;
-                    
-                    const daysInput = $('#days');
-                    const unitSelect = $('#unit');
-                    const dailyFoodResults = $('#dailyFoodResults');
-                    const dailyFoodValue = $('#dailyFoodValue');
-                    const totalFoodDisplay = $('#totalFoodDisplay');
-
-                    if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) return;
-
-                    const energyPer100g = calc.getFoodEnergyPer100g();
-                    const days = daysInput.value;
-                    const unit = unitSelect.value;
-                    
-                    calc.showError('foodEnergyError', false);
-                    calc.showError('daysError', false);
-                    
-                    if (!energyPer100g || energyPer100g < 0.1) {
-                        const foodEnergyInput = $('#foodEnergy');
-                        if (foodEnergyInput && foodEnergyInput.value) calc.showError('foodEnergyError', true);
-                        dailyFoodResults.style.display = 'none';
-                        totalFoodDisplay.value = '';
-                        return;
-                    }
-
-                    if (!days || !calc.validateInput(days, 1, true)) {
-                        if (days) calc.showError('daysError', true);
-                        totalFoodDisplay.value = '';
-                        return;
-                    }
-
-                    const numDays = parseInt(days);
-                    const dailyFoodGrams = (calc.currentMER / energyPer100g) * 100;
-                    const totalFoodGrams = dailyFoodGrams * numDays;
-                    
-                    dailyFoodValue.textContent = calc.formatNumber(dailyFoodGrams, 1) + ' g/day';
-                    dailyFoodResults.style.display = 'block';
-                    
-                    const convertedAmount = calc.convertUnits(totalFoodGrams, unit);
-                    const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                    const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
-                    
-                    totalFoodDisplay.value = calc.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
-                },
-                
-                // Unit switching methods (missing from previous version!)
-                toggleUnits: () => {
-                    const toggle = $('#unitToggle');
-                    calc.isImperial = toggle.checked;
-                    
-                    calc.updateUnitLabels();
-                    calc.convertExistingValues();
-                    calc.updateCalorieCalculations();
-                },
-
-                updateUnitLabels: () => {
-                    const metricLabel = $('#metricLabel');
-                    const imperialLabel = $('#imperialLabel');
-                    const weightLabel = $('#weightLabel');
-                    const weightInput = $('#weight');
-                    const unitSelect = $('#unit');
-                    const energyUnitSelect = $('#energyUnit');
-
-                    if (metricLabel && imperialLabel) {
-                        metricLabel.classList.toggle('active', !calc.isImperial);
-                        imperialLabel.classList.toggle('active', calc.isImperial);
-                    }
-
-                    if (calc.isImperial) {
-                        if (weightLabel) weightLabel.textContent = "Dog's Weight (lbs):";
-                        if (weightInput) {
-                            weightInput.placeholder = "Enter weight in lbs";
-                            weightInput.min = "0.2";
-                            weightInput.step = "0.1";
-                        }
-                        if (unitSelect) {
-                            unitSelect.innerHTML = '<option value="oz">ounces (oz)</option>' +
-                                '<option value="lb">pounds (lb)</option>' +
-                                '<option value="g">grams (g)</option>' +
-                                '<option value="kg">kilograms (kg)</option>';
-                        }
-                        // Set energy unit to kcal/cup for imperial
-                        if (energyUnitSelect && energyUnitSelect.value === 'kcal100g') {
-                            energyUnitSelect.value = 'kcalcup';
-                        }
-                    } else {
-                        if (weightLabel) weightLabel.textContent = "Dog's Weight (kg):";
-                        if (weightInput) {
-                            weightInput.placeholder = "Enter weight in kg";
-                            weightInput.min = "0.1";
-                            weightInput.step = "0.1";
-                        }
-                        if (unitSelect) {
-                            unitSelect.innerHTML = '<option value="g">grams (g)</option>' +
-                                '<option value="kg">kilograms (kg)</option>' +
-                                '<option value="oz">ounces (oz)</option>' +
-                                '<option value="lb">pounds (lb)</option>';
-                        }
-                        // Set energy unit to kcal/100g for metric
-                        if (energyUnitSelect && energyUnitSelect.value === 'kcalcup') {
-                            energyUnitSelect.value = 'kcal100g';
-                        }
-                    }
-                },
-
-                convertExistingValues: () => {
-                    const weightInput = $('#weight');
-
-                    if (weightInput && weightInput.value) {
-                        const currentWeight = parseFloat(weightInput.value);
-                        if (!isNaN(currentWeight)) {
-                            if (calc.isImperial) {
-                                weightInput.value = calc.formatNumber(currentWeight * 2.20462, 1);
-                            } else {
-                                weightInput.value = calc.formatNumber(currentWeight / 2.20462, 1);
-                            }
-                        }
-                    }
-                },
-
-                bindEvents: () => {
-                    const weightInput = $('#weight');
-                    const dogTypeSelect = $('#dogType');
-                    const foodEnergyInput = $('#foodEnergy');
-                    const daysInput = $('#days');
-                    const unitSelect = $('#unit');
-                    const energyUnitSelect = $('#energyUnit');
-                    const unitToggle = $('#unitToggle');
-
-                    if (weightInput) {
-                        weightInput.addEventListener('input', () => calc.updateCalorieCalculations());
-                    }
-                    if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => calc.updateCalorieCalculations());
-                    if (foodEnergyInput) {
-                        foodEnergyInput.addEventListener('input', () => calc.updateFoodCalculations());
-                    }
-                    if (energyUnitSelect) energyUnitSelect.addEventListener('change', () => calc.updateFoodCalculations());
-                    if (daysInput) {
-                        daysInput.addEventListener('input', () => calc.updateFoodCalculations());
-                    }
-                    if (unitSelect) unitSelect.addEventListener('change', () => calc.updateFoodCalculations());
-                    if (unitToggle) unitToggle.addEventListener('change', () => calc.toggleUnits());
-                },
-                
-                init: () => {
-                    calc.bindEvents();
-                    calc.updateUnitLabels(); // Initialize unit labels
-                    const calcContainer = $('#dogCalc');
-                    if (calcContainer) {
-                        calcContainer.classList.add('loaded');
-                    }
-                }
-            };
-            
-            calc.init();
-            return calc;
-        }
-        
-        getThemeFromURL() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const theme = urlParams.get('theme');
-            return ['light', 'dark', 'system'].includes(theme) ? theme : null;
-        }
-
-        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;
-        }
-
-        applyTheme() {
-            if (this.options.theme === 'light' || this.options.theme === 'dark') {
-                this.container.classList.add('theme-' + this.options.theme);
-            }
-        }
-
-        applyScale() {
-            const scale = Math.max(0.5, Math.min(2.0, this.options.scale));
-            if (scale !== 1.0) {
-                this.container.style.transform = \`scale(\${scale})\`;
-                this.container.style.transformOrigin = 'top left';
-            }
-        }
-    }
+    // ACTUAL JavaScript from iframe.html (transformed for widget use)
+    ${transformedJS}
     
     // Auto-initialize widgets on page load
     function initializeWidget() {

calculator.js

@@ -1,495 +0,0 @@
-/**
- * Dog Calorie Calculator
- * Calculates dog's daily calorie requirements and food amounts
- * by Canine Nutrition and Wellness
- */
-
-class DogCalorieCalculator {
-    constructor() {
-        this.currentMER = 0;
-        this.isImperial = false;
-        this.init();
-    }
-
-    init() {
-        this.bindEvents();
-        this.updateUnitLabels();
-    }
-
-    bindEvents() {
-        const weightInput = document.getElementById('weight');
-        const dogTypeSelect = document.getElementById('dogType');
-        const foodEnergyInput = document.getElementById('foodEnergy');
-        const daysInput = document.getElementById('days');
-        const unitSelect = document.getElementById('unit');
-        const unitToggle = document.getElementById('unitToggle');
-
-        if (weightInput) weightInput.addEventListener('input', () => this.updateCalorieCalculations());
-        if (weightInput) weightInput.addEventListener('blur', () => this.validateWeight());
-        
-        if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
-        
-        if (foodEnergyInput) foodEnergyInput.addEventListener('input', () => this.updateFoodCalculations());
-        if (foodEnergyInput) foodEnergyInput.addEventListener('blur', () => this.validateFoodEnergy());
-        
-        if (daysInput) daysInput.addEventListener('input', () => this.updateFoodCalculations());
-        if (daysInput) daysInput.addEventListener('blur', () => this.validateDays());
-        
-        if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
-        
-        if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
-    }
-
-    calculateRER(weightKg) {
-        return 70 * Math.pow(weightKg, 0.75);
-    }
-
-    calculateMER(rer, factor) {
-        return rer * factor;
-    }
-
-    validateInput(value, min = 0, isInteger = false) {
-        const num = parseFloat(value);
-        if (isNaN(num) || num < min) return false;
-        if (isInteger && !Number.isInteger(num)) return false;
-        return true;
-    }
-
-    showError(elementId, show = true) {
-        const errorElement = document.getElementById(elementId);
-        if (errorElement) {
-            if (show) {
-                errorElement.classList.remove('dog-calculator-hidden');
-            } else {
-                errorElement.classList.add('dog-calculator-hidden');
-            }
-        }
-    }
-
-    convertUnits(grams, unit) {
-        switch (unit) {
-            case 'kg':
-                return grams / 1000;
-            case 'oz':
-                return grams / 28.3495;
-            case 'lb':
-                return grams / 453.592;
-            default:
-                return grams;
-        }
-    }
-
-    formatNumber(num, decimals = 0) {
-        return num.toFixed(decimals).replace(/\.?0+$/, '');
-    }
-
-    toggleUnits() {
-        const toggle = document.getElementById('unitToggle');
-        this.isImperial = toggle.checked;
-        
-        this.updateUnitLabels();
-        this.convertExistingValues();
-        this.updateCalorieCalculations();
-    }
-
-    updateUnitLabels() {
-        const metricLabel = document.getElementById('metricLabel');
-        const imperialLabel = document.getElementById('imperialLabel');
-        const weightLabel = document.getElementById('weightLabel');
-        const foodEnergyLabel = document.getElementById('foodEnergyLabel');
-        const weightInput = document.getElementById('weight');
-        const foodEnergyInput = document.getElementById('foodEnergy');
-        const unitSelect = document.getElementById('unit');
-
-        if (metricLabel && imperialLabel) {
-            metricLabel.classList.toggle('active', !this.isImperial);
-            imperialLabel.classList.toggle('active', this.isImperial);
-        }
-
-        if (this.isImperial) {
-            if (weightLabel) weightLabel.textContent = "Dog's Weight (lbs):";
-            if (weightInput) {
-                weightInput.placeholder = "Enter weight in lbs";
-                weightInput.min = "0.2"; // ~0.1kg in lbs
-                weightInput.step = "0.1";
-            }
-            if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/oz):";
-            if (foodEnergyInput) {
-                foodEnergyInput.placeholder = "Enter kcal per oz";
-                foodEnergyInput.min = "0.03"; // ~1 kcal/100g in kcal/oz
-                foodEnergyInput.step = "0.01";
-            }
-            if (unitSelect) {
-                unitSelect.innerHTML = `
-                    <option value="oz">ounces (oz)</option>
-                    <option value="lb">pounds (lb)</option>
-                    <option value="g">grams (g)</option>
-                    <option value="kg">kilograms (kg)</option>
-                `;
-            }
-        } else {
-            if (weightLabel) weightLabel.textContent = "Dog's Weight (kg):";
-            if (weightInput) {
-                weightInput.placeholder = "Enter weight in kg";
-                weightInput.min = "0.1";
-                weightInput.step = "0.1";
-            }
-            if (foodEnergyLabel) foodEnergyLabel.textContent = "Food Energy Content (kcal/100g):";
-            if (foodEnergyInput) {
-                foodEnergyInput.placeholder = "Enter kcal per 100g";
-                foodEnergyInput.min = "1";
-                foodEnergyInput.step = "1";
-            }
-            if (unitSelect) {
-                unitSelect.innerHTML = `
-                    <option value="g">grams (g)</option>
-                    <option value="kg">kilograms (kg)</option>
-                    <option value="oz">ounces (oz)</option>
-                    <option value="lb">pounds (lb)</option>
-                `;
-            }
-        }
-    }
-
-    convertExistingValues() {
-        const weightInput = document.getElementById('weight');
-        const foodEnergyInput = document.getElementById('foodEnergy');
-
-        if (weightInput && weightInput.value) {
-            const currentWeight = parseFloat(weightInput.value);
-            if (!isNaN(currentWeight)) {
-                if (this.isImperial) {
-                    // Convert kg to lbs
-                    weightInput.value = this.formatNumber(currentWeight * 2.20462, 1);
-                } else {
-                    // Convert lbs to kg
-                    weightInput.value = this.formatNumber(currentWeight / 2.20462, 1);
-                }
-            }
-        }
-
-        if (foodEnergyInput && foodEnergyInput.value) {
-            const currentEnergy = parseFloat(foodEnergyInput.value);
-            if (!isNaN(currentEnergy)) {
-                if (this.isImperial) {
-                    // Convert kcal/100g to kcal/oz
-                    foodEnergyInput.value = this.formatNumber(currentEnergy / 3.52739, 2);
-                } else {
-                    // Convert kcal/oz to kcal/100g
-                    foodEnergyInput.value = this.formatNumber(currentEnergy * 3.52739, 0);
-                }
-            }
-        }
-    }
-
-    getWeightInKg() {
-        const weightInput = document.getElementById('weight');
-        if (!weightInput || !weightInput.value) return null;
-        
-        const weight = parseFloat(weightInput.value);
-        if (isNaN(weight)) return null;
-        
-        return this.isImperial ? weight / 2.20462 : weight;
-    }
-
-    getFoodEnergyPer100g() {
-        const foodEnergyInput = document.getElementById('foodEnergy');
-        if (!foodEnergyInput || !foodEnergyInput.value) return null;
-        
-        const energy = parseFloat(foodEnergyInput.value);
-        if (isNaN(energy)) return null;
-        
-        return this.isImperial ? energy * 3.52739 : energy;
-    }
-
-    validateWeight() {
-        const weight = document.getElementById('weight')?.value;
-        if (weight && !this.validateInput(weight, 0.1)) {
-            this.showError('weightError', true);
-        } else {
-            this.showError('weightError', false);
-        }
-    }
-
-    validateFoodEnergy() {
-        const energy = document.getElementById('foodEnergy')?.value;
-        if (energy && !this.validateInput(energy, 1)) {
-            this.showError('foodEnergyError', true);
-        } else {
-            this.showError('foodEnergyError', false);
-        }
-    }
-
-    validateDays() {
-        const days = document.getElementById('days')?.value;
-        if (days && !this.validateInput(days, 1, true)) {
-            this.showError('daysError', true);
-        } else {
-            this.showError('daysError', false);
-        }
-    }
-
-    updateCalorieCalculations() {
-        const dogTypeSelect = document.getElementById('dogType');
-        const calorieResults = document.getElementById('calorieResults');
-        const rerValue = document.getElementById('rerValue');
-        const merValue = document.getElementById('merValue');
-
-        if (!dogTypeSelect || !calorieResults || !rerValue || !merValue) {
-            return;
-        }
-
-        const weightKg = this.getWeightInKg();
-        const dogTypeFactor = dogTypeSelect.value;
-        
-        this.showError('weightError', false);
-        
-        if (!weightKg || weightKg < 0.1) {
-            if (weightKg !== null) this.showError('weightError', true);
-            calorieResults.style.display = 'none';
-            return;
-        }
-
-        if (!dogTypeFactor) {
-            calorieResults.style.display = 'none';
-            return;
-        }
-
-        const factor = parseFloat(dogTypeFactor);
-        
-        const rer = this.calculateRER(weightKg);
-        const mer = this.calculateMER(rer, factor);
-        
-        this.currentMER = mer;
-        
-        rerValue.textContent = this.formatNumber(rer, 0) + ' cal/day';
-        merValue.textContent = this.formatNumber(mer, 0) + ' cal/day';
-        calorieResults.style.display = 'block';
-        
-        this.updateFoodCalculations();
-    }
-
-    updateFoodCalculations() {
-        if (this.currentMER === 0) return;
-        
-        const daysInput = document.getElementById('days');
-        const unitSelect = document.getElementById('unit');
-        const dailyFoodResults = document.getElementById('dailyFoodResults');
-        const dailyFoodValue = document.getElementById('dailyFoodValue');
-        const totalFoodDisplay = document.getElementById('totalFoodDisplay');
-
-        if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) {
-            return;
-        }
-
-        const energyPer100g = this.getFoodEnergyPer100g();
-        const days = daysInput.value;
-        const unit = unitSelect.value;
-        
-        this.showError('foodEnergyError', false);
-        this.showError('daysError', false);
-        
-        const minEnergy = this.isImperial ? 0.03 : 1;
-        if (!energyPer100g || energyPer100g < minEnergy) {
-            if (energyPer100g !== null) this.showError('foodEnergyError', true);
-            dailyFoodResults.style.display = 'none';
-            totalFoodDisplay.value = '';
-            return;
-        }
-
-        if (!days || !this.validateInput(days, 1, true)) {
-            if (days) this.showError('daysError', true);
-            totalFoodDisplay.value = '';
-            return;
-        }
-
-        const numDays = parseInt(days);
-        
-        const dailyFoodGrams = (this.currentMER / energyPer100g) * 100;
-        const totalFoodGrams = dailyFoodGrams * numDays;
-        
-        dailyFoodValue.textContent = this.formatNumber(dailyFoodGrams, 1) + ' g/day';
-        dailyFoodResults.style.display = 'block';
-        
-        const convertedAmount = this.convertUnits(totalFoodGrams, unit);
-        const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-        const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
-        
-        totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
-    }
-}
-
-// Global function for collapsible functionality (no longer used)
-function toggleCollapsible(id) {
-    // Food section is now always expanded
-}
-
-// Initialize calculator when DOM is ready
-document.addEventListener('DOMContentLoaded', function() {
-    new DogCalorieCalculator();
-    
-    // Initialize share URL
-    const shareUrlInput = document.getElementById('shareUrl');
-    if (shareUrlInput) {
-        shareUrlInput.value = window.location.href;
-    }
-    
-    // Update embed codes with current domain
-    updateEmbedCodes();
-});
-
-// Share and Embed Functions
-function showShareOptions() {
-    const modal = document.getElementById('shareModal');
-    if (modal) {
-        modal.style.display = 'block';
-        document.body.style.overflow = 'hidden';
-    }
-}
-
-function closeShareModal() {
-    const modal = document.getElementById('shareModal');
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.style.overflow = 'auto';
-    }
-}
-
-function showEmbedModal() {
-    const modal = document.getElementById('embedModal');
-    if (modal) {
-        modal.style.display = 'block';
-        document.body.style.overflow = 'hidden';
-    }
-}
-
-function closeEmbedModal() {
-    const modal = document.getElementById('embedModal');
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.style.overflow = 'auto';
-    }
-}
-
-// Share functions
-function shareToFacebook() {
-    const url = encodeURIComponent(window.location.href);
-    const text = encodeURIComponent('Check out this Dog Calorie Calculator!');
-    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${text}`, '_blank');
-}
-
-function shareToTwitter() {
-    const url = encodeURIComponent(window.location.href);
-    const text = encodeURIComponent('Calculate your dog\'s daily calorie needs with this helpful tool!');
-    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank');
-}
-
-function shareToLinkedIn() {
-    const url = encodeURIComponent(window.location.href);
-    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank');
-}
-
-function shareViaEmail() {
-    const subject = encodeURIComponent('Dog Calorie Calculator');
-    const body = encodeURIComponent(`Check out this helpful Dog Calorie Calculator:\n\n${window.location.href}\n\nIt helps calculate your dog's daily calorie needs based on their weight and activity level.`);
-    window.location.href = `mailto:?subject=${subject}&body=${body}`;
-}
-
-function copyShareLink() {
-    const shareUrlInput = document.getElementById('shareUrl');
-    if (shareUrlInput) {
-        shareUrlInput.select();
-        shareUrlInput.setSelectionRange(0, 99999); // For mobile devices
-        
-        try {
-            document.execCommand('copy');
-            
-            // Update button to show success
-            const copyBtn = document.querySelector('.dog-calculator-share-copy');
-            if (copyBtn) {
-                const originalHTML = copyBtn.innerHTML;
-                copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
-                copyBtn.style.background = '#7fa464';
-                
-                setTimeout(() => {
-                    copyBtn.innerHTML = originalHTML;
-                    copyBtn.style.background = '';
-                }, 2000);
-            }
-        } catch (err) {
-            console.error('Failed to copy text: ', err);
-        }
-    }
-}
-
-// Embed functions
-function updateEmbedCodes() {
-    const currentDomain = window.location.origin;
-    const currentPath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
-    const baseUrl = currentDomain + currentPath;
-    
-    const widgetCode = document.getElementById('widgetCode');
-    const iframeCode = document.getElementById('iframeCode');
-    
-    if (widgetCode) {
-        widgetCode.textContent = `<script src="${baseUrl}/dog-calculator-widget.js"></script>\n<div id="dog-calorie-calculator"></div>`;
-    }
-    
-    if (iframeCode) {
-        iframeCode.textContent = `<iframe src="${baseUrl}/iframe.html" \n        width="100%" height="600" \n        frameborder="0" \n        title="Dog Calorie Calculator">\n</iframe>`;
-    }
-}
-
-function copyEmbedCode(type) {
-    const codeElement = type === 'widget' ? document.getElementById('widgetCode') : document.getElementById('iframeCode');
-    const button = event.target.closest('.dog-calculator-copy-btn');
-    
-    if (codeElement && button) {
-        const textArea = document.createElement('textarea');
-        textArea.value = codeElement.textContent;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        
-        try {
-            document.execCommand('copy');
-            textArea.remove();
-            
-            // Update button to show success
-            const originalHTML = button.innerHTML;
-            button.innerHTML = '<i class="fas fa-check"></i> Copied';
-            button.classList.add('copied');
-            
-            setTimeout(() => {
-                button.innerHTML = originalHTML;
-                button.classList.remove('copied');
-            }, 2000);
-        } catch (err) {
-            console.error('Failed to copy text: ', err);
-            textArea.remove();
-        }
-    }
-}
-
-// Close modals when clicking outside
-window.addEventListener('click', function(event) {
-    const shareModal = document.getElementById('shareModal');
-    const embedModal = document.getElementById('embedModal');
-    
-    if (event.target === shareModal) {
-        closeShareModal();
-    } else if (event.target === embedModal) {
-        closeEmbedModal();
-    }
-});
-
-// Close modals with Escape key
-window.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-        closeShareModal();
-        closeEmbedModal();
-    }
-});

dog-calculator-shared.js

@@ -1,271 +0,0 @@
-/**
- * Dog Calorie Calculator - Shared Core Logic
- * This file contains all the business logic, calculations, and configurations
- * that are shared between the iframe and widget versions.
- * 
- * By Canine Nutrition and Wellness
- * https://caninenutritionandwellness.com
- */
-
-// Core configuration and constants
-const DOG_CALCULATOR_CONFIG = {
-    // Dog type factors and labels
-    dogTypes: [
-        { value: "3.0", label: "Puppy (0-4 months)" },
-        { value: "2.0", label: "Puppy (4 months - adult)" },
-        { value: "1.2", label: "Adult - inactive/obese" },
-        { value: "1.6", label: "Adult (neutered/spayed) - average activity" },
-        { value: "1.8", label: "Adult (intact) - average activity" },
-        { value: "1.0", label: "Adult - weight loss" },
-        { value: "1.7", label: "Adult - weight gain" },
-        { value: "2.0", label: "Working dog - light work" },
-        { value: "3.0", label: "Working dog - moderate work" },
-        { value: "5.0", label: "Working dog - heavy work" },
-        { value: "1.1", label: "Senior dog" }
-    ],
-    
-    // Energy unit configurations
-    energyUnits: [
-        { value: "kcal100g", label: "kcal/100g" },
-        { value: "kcalkg", label: "kcal/kg" },
-        { value: "kcalcup", label: "kcal/cup" },
-        { value: "kcalcan", label: "kcal/can" }
-    ],
-    
-    // Unit options for different measurement systems
-    units: {
-        metric: [
-            { value: "g", label: "grams (g)" },
-            { value: "kg", label: "kilograms (kg)" },
-            { value: "oz", label: "ounces (oz)" },
-            { value: "lb", label: "pounds (lb)" }
-        ],
-        imperial: [
-            { value: "oz", label: "ounces (oz)" },
-            { value: "lb", label: "pounds (lb)" },
-            { value: "g", label: "grams (g)" },
-            { value: "kg", label: "kilograms (kg)" }
-        ]
-    },
-    
-    // Conversion factors
-    conversions: {
-        lbToKg: 2.20462,
-        gToOz: 28.3495,
-        gToLb: 453.592,
-        gToKg: 1000
-    },
-    
-    // Energy unit conversion factors to kcal/100g
-    energyConversions: {
-        kcal100g: 1,
-        kcalkg: 0.1, // 1 kg = 10 × 100g
-        kcalcup: 0.833, // Assume 1 cup ≈ 120g for dry dog food
-        kcalcan: 0.222 // Assume 1 can ≈ 450g for wet dog food
-    },
-    
-    // Validation limits for energy units
-    energyLimits: {
-        kcal100g: { min: 1, max: 1000 },
-        kcalkg: { min: 10, max: 10000 },
-        kcalcup: { min: 50, max: 1000 },
-        kcalcan: { min: 100, max: 2000 }
-    }
-};
-
-// Core calculator functions
-const DogCalculatorCore = {
-    /**
-     * Calculate Resting Energy Requirement (RER)
-     * Formula: 70 × (weight in kg)^0.75
-     */
-    calculateRER(weightKg) {
-        if (!weightKg || weightKg <= 0) return 0;
-        return 70 * Math.pow(weightKg, 0.75);
-    },
-
-    /**
-     * Calculate Maintenance Energy Requirement (MER)
-     * Formula: RER × activity factor
-     */
-    calculateMER(rer, factor) {
-        if (!rer || !factor || factor <= 0) return 0;
-        return rer * factor;
-    },
-
-    /**
-     * Convert weight to kg regardless of input unit
-     */
-    convertWeightToKg(weight, isImperial) {
-        if (!weight || weight <= 0) return null;
-        return isImperial ? weight / DOG_CALCULATOR_CONFIG.conversions.lbToKg : weight;
-    },
-
-    /**
-     * Convert weight from kg to display unit
-     */
-    convertWeightFromKg(weightKg, isImperial) {
-        if (!weightKg || weightKg <= 0) return null;
-        return isImperial ? weightKg * DOG_CALCULATOR_CONFIG.conversions.lbToKg : weightKg;
-    },
-
-    /**
-     * Convert food energy to kcal/100g for calculations
-     */
-    convertFoodEnergyTo100g(energy, unit) {
-        if (!energy || energy <= 0) return null;
-        const factor = DOG_CALCULATOR_CONFIG.energyConversions[unit];
-        return factor ? energy * factor : energy;
-    },
-
-    /**
-     * Convert food amounts between units
-     */
-    convertUnits(grams, targetUnit) {
-        if (!grams || grams <= 0) return 0;
-        
-        switch (targetUnit) {
-            case 'kg':
-                return grams / DOG_CALCULATOR_CONFIG.conversions.gToKg;
-            case 'oz':
-                return grams / DOG_CALCULATOR_CONFIG.conversions.gToOz;
-            case 'lb':
-                return grams / DOG_CALCULATOR_CONFIG.conversions.gToLb;
-            default:
-                return grams;
-        }
-    },
-
-    /**
-     * Calculate daily food amount in grams
-     */
-    calculateDailyFoodGrams(merCalories, energyPer100g) {
-        if (!merCalories || !energyPer100g || energyPer100g <= 0) return 0;
-        return (merCalories / energyPer100g) * 100;
-    },
-
-    /**
-     * Validate input values
-     */
-    validateInput(value, min = 0, isInteger = false) {
-        const num = parseFloat(value);
-        if (isNaN(num) || num < min) return false;
-        if (isInteger && !Number.isInteger(num)) return false;
-        return true;
-    },
-
-    /**
-     * Validate energy input based on unit
-     */
-    validateEnergyInput(energy, unit) {
-        if (!energy || !unit) return false;
-        const limits = DOG_CALCULATOR_CONFIG.energyLimits[unit];
-        if (!limits) return false;
-        
-        const num = parseFloat(energy);
-        return !isNaN(num) && num >= limits.min && num <= limits.max;
-    },
-
-    /**
-     * Format number for display
-     */
-    formatNumber(num, decimals = 0) {
-        if (typeof num !== 'number' || isNaN(num)) return '0';
-        
-        if (decimals === 0) {
-            return Math.round(num).toString();
-        }
-        return num.toFixed(decimals).replace(/\.?0+$/, '');
-    },
-
-    /**
-     * Get theme from URL parameters
-     */
-    getThemeFromURL() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const theme = urlParams.get('theme');
-        return ['light', 'dark', 'system'].includes(theme) ? theme : 'system';
-    },
-
-    /**
-     * Get scale from URL parameters
-     */
-    getScaleFromURL() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const scale = parseFloat(urlParams.get('scale'));
-        return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : 1.0;
-    },
-
-    /**
-     * Generate embed codes
-     */
-    generateEmbedCodes(baseUrl) {
-        const scriptTag = `<script src="${baseUrl}/dog-food-calculator-widget.js"></script>`;
-        const divTag = `<div id="dog-calorie-calculator"></div>`;
-        const widgetCode = scriptTag + '\n' + divTag;
-        
-        const iframeCode = `<iframe src="${baseUrl}/iframe.html" width="100%" height="600" frameborder="0" title="Dog Calorie Calculator"></iframe>`;
-        
-        return { widgetCode, iframeCode };
-    },
-
-    /**
-     * Share URLs for different platforms
-     */
-    generateShareUrls(currentUrl) {
-        const encodedUrl = encodeURIComponent(currentUrl);
-        const text = encodeURIComponent('Check out this useful dog calorie calculator!');
-        
-        return {
-            facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
-            twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${text}`,
-            linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
-            email: `mailto:?subject=${encodeURIComponent('Dog Calorie Calculator')}&body=${encodeURIComponent('Check out this useful dog calorie calculator: ' + currentUrl)}`
-        };
-    },
-
-    /**
-     * Copy text to clipboard with fallback
-     */
-    async copyToClipboard(text, button) {
-        if (!text || !button) return false;
-        
-        try {
-            await navigator.clipboard.writeText(text);
-            const originalText = button.textContent;
-            button.textContent = 'Copied!';
-            button.classList.add('copied');
-            
-            setTimeout(() => {
-                button.textContent = originalText;
-                button.classList.remove('copied');
-            }, 2000);
-            
-            return true;
-        } catch (err) {
-            // Fallback for older browsers
-            try {
-                const textArea = document.createElement('textarea');
-                textArea.value = text;
-                textArea.style.position = 'fixed';
-                textArea.style.opacity = '0';
-                document.body.appendChild(textArea);
-                textArea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textArea);
-                return true;
-            } catch (fallbackErr) {
-                console.error('Copy to clipboard failed:', fallbackErr);
-                return false;
-            }
-        }
-    }
-};
-
-// Export for different module systems
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { DOG_CALCULATOR_CONFIG, DogCalculatorCore };
-} else if (typeof window !== 'undefined') {
-    window.DOG_CALCULATOR_CONFIG = DOG_CALCULATOR_CONFIG;
-    window.DogCalculatorCore = DogCalculatorCore;
-}

dog-calorie-calculator.html

@@ -1,437 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dog Calorie Calculator</title>
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-
-        .calculator-container {
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 20px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            line-height: 1.6;
-            color: #333;
-        }
-
-        .section {
-            background: #f8f9fa;
-            border: 1px solid #e9ecef;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 20px;
-        }
-
-        .section h2 {
-            margin-top: 0;
-            margin-bottom: 20px;
-            color: #2c3e50;
-            font-size: 1.4em;
-            font-weight: 600;
-        }
-
-        .form-group {
-            margin-bottom: 15px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: 500;
-            color: #495057;
-        }
-
-        select,
-        input[type="number"] {
-            width: 100%;
-            padding: 8px 12px;
-            border: 1px solid #ced4da;
-            border-radius: 4px;
-            font-size: 14px;
-            background-color: white;
-            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-        }
-
-        select:focus,
-        input[type="number"]:focus {
-            outline: none;
-            border-color: #80bdff;
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-        }
-
-        .results {
-            background: #e8f5e8;
-            border: 1px solid #c3e6c3;
-            border-radius: 4px;
-            padding: 15px;
-            margin-top: 20px;
-        }
-
-        .result-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-
-        .result-item:last-child {
-            margin-bottom: 0;
-        }
-
-        .result-label {
-            font-weight: 500;
-            color: #2d5a2d;
-        }
-
-        .result-value {
-            font-weight: 600;
-            color: #1e3a1e;
-            font-size: 1.1em;
-        }
-
-        .collapsible {
-            background: #fff;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            overflow: hidden;
-        }
-
-        .collapsible-header {
-            background: #f1f3f4;
-            padding: 15px 20px;
-            cursor: pointer;
-            user-select: none;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #dee2e6;
-            transition: background-color 0.2s ease;
-        }
-
-        .collapsible-header:hover {
-            background: #e9ecef;
-        }
-
-        .collapsible-header h3 {
-            margin: 0;
-            font-size: 1.2em;
-            color: #2c3e50;
-            font-weight: 600;
-        }
-
-        .collapsible-arrow {
-            transition: transform 0.2s ease;
-            font-size: 1.2em;
-            color: #6c757d;
-        }
-
-        .collapsible.active .collapsible-arrow {
-            transform: rotate(180deg);
-        }
-
-        .collapsible-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease;
-        }
-
-        .collapsible.active .collapsible-content {
-            max-height: 1000px;
-        }
-
-        .collapsible-inner {
-            padding: 20px;
-        }
-
-        .input-group {
-            display: flex;
-            gap: 10px;
-            align-items: flex-end;
-        }
-
-        .input-group .form-group {
-            flex: 1;
-            margin-bottom: 0;
-        }
-
-        .unit-select {
-            min-width: 80px;
-        }
-
-        .error {
-            color: #dc3545;
-            font-size: 0.875em;
-            margin-top: 5px;
-        }
-
-        @media (max-width: 480px) {
-            .calculator-container {
-                padding: 15px;
-            }
-
-            .section {
-                padding: 15px;
-            }
-
-            .input-group {
-                flex-direction: column;
-                gap: 15px;
-            }
-
-            .input-group .form-group {
-                margin-bottom: 15px;
-            }
-
-            .result-item {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 5px;
-            }
-        }
-
-        .hidden {
-            display: none;
-        }
-    </style>
-</head>
-<body>
-    <div class="calculator-container">
-        <div class="section">
-            <h2>Dog's Characteristics</h2>
-            
-            <div class="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="form-group">
-                <label for="weight">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="error hidden">Please enter a valid weight (minimum 0.1 kg)</div>
-            </div>
-
-            <div class="results" id="calorieResults" style="display: none;">
-                <div class="result-item">
-                    <span class="result-label">Resting Energy Requirement (RER):</span>
-                    <span class="result-value" id="rerValue">- cal/day</span>
-                </div>
-                <div class="result-item">
-                    <span class="result-label">Maintenance Energy Requirement (MER):</span>
-                    <span class="result-value" id="merValue">- cal/day</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="collapsible" id="foodCalculator">
-            <div class="collapsible-header" onclick="toggleCollapsible('foodCalculator')">
-                <h3>How much food is that?</h3>
-                <span class="collapsible-arrow">▼</span>
-            </div>
-            <div class="collapsible-content">
-                <div class="collapsible-inner">
-                    <div class="form-group">
-                        <label for="foodEnergy">Food Energy Content (kcal/100g):</label>
-                        <input type="number" id="foodEnergy" min="1" step="1" placeholder="Enter kcal per 100g" aria-describedby="foodEnergyHelp">
-                        <div id="foodEnergyError" class="error hidden">Please enter a valid energy content (minimum 1 kcal/100g)</div>
-                    </div>
-
-                    <div class="results" id="dailyFoodResults" style="display: none;">
-                        <div class="result-item">
-                            <span class="result-label">Daily Food Amount:</span>
-                            <span class="result-value" id="dailyFoodValue">- g/day</span>
-                        </div>
-                    </div>
-
-                    <div class="form-group" style="margin-top: 20px;">
-                        <label for="days">Number of Days:</label>
-                        <input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
-                        <div id="daysError" class="error hidden">Please enter a valid number of days (minimum 1)</div>
-                    </div>
-
-                    <div class="input-group">
-                        <div class="form-group">
-                            <label for="totalFoodDisplay">Total Food Amount:</label>
-                            <input type="text" id="totalFoodDisplay" readonly style="background-color: #f8f9fa; cursor: not-allowed;">
-                        </div>
-                        <div class="form-group">
-                            <label for="unit">Unit:</label>
-                            <select id="unit" class="unit-select" aria-describedby="unitHelp">
-                                <option value="g">grams (g)</option>
-                                <option value="kg">kilograms (kg)</option>
-                                <option value="oz">ounces (oz)</option>
-                                <option value="lb">pounds (lb)</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let currentMER = 0;
-
-        function toggleCollapsible(id) {
-            const element = document.getElementById(id);
-            element.classList.toggle('active');
-        }
-
-        function calculateRER(weightKg) {
-            return 70 * Math.pow(weightKg, 0.75);
-        }
-
-        function calculateMER(rer, factor) {
-            return rer * factor;
-        }
-
-        function validateInput(value, min = 0, isInteger = false) {
-            const num = parseFloat(value);
-            if (isNaN(num) || num < min) return false;
-            if (isInteger && !Number.isInteger(num)) return false;
-            return true;
-        }
-
-        function showError(elementId, show = true) {
-            const errorElement = document.getElementById(elementId);
-            if (show) {
-                errorElement.classList.remove('hidden');
-            } else {
-                errorElement.classList.add('hidden');
-            }
-        }
-
-        function convertUnits(grams, unit) {
-            switch (unit) {
-                case 'kg':
-                    return grams / 1000;
-                case 'oz':
-                    return grams / 28.3495;
-                case 'lb':
-                    return grams / 453.592;
-                default:
-                    return grams;
-            }
-        }
-
-        function formatNumber(num, decimals = 0) {
-            return num.toFixed(decimals).replace(/\.?0+$/, '');
-        }
-
-        function updateCalorieCalculations() {
-            const weight = document.getElementById('weight').value;
-            const dogTypeFactor = document.getElementById('dogType').value;
-            
-            showError('weightError', false);
-            
-            if (!weight || !validateInput(weight, 0.1)) {
-                showError('weightError', true);
-                document.getElementById('calorieResults').style.display = 'none';
-                return;
-            }
-
-            if (!dogTypeFactor) {
-                document.getElementById('calorieResults').style.display = 'none';
-                return;
-            }
-
-            const weightKg = parseFloat(weight);
-            const factor = parseFloat(dogTypeFactor);
-            
-            const rer = calculateRER(weightKg);
-            const mer = calculateMER(rer, factor);
-            
-            currentMER = mer;
-            
-            document.getElementById('rerValue').textContent = formatNumber(rer, 0) + ' cal/day';
-            document.getElementById('merValue').textContent = formatNumber(mer, 0) + ' cal/day';
-            document.getElementById('calorieResults').style.display = 'block';
-            
-            updateFoodCalculations();
-        }
-
-        function updateFoodCalculations() {
-            if (currentMER === 0) return;
-            
-            const foodEnergy = document.getElementById('foodEnergy').value;
-            const days = document.getElementById('days').value;
-            const unit = document.getElementById('unit').value;
-            
-            showError('foodEnergyError', false);
-            showError('daysError', false);
-            
-            if (!foodEnergy || !validateInput(foodEnergy, 1)) {
-                if (foodEnergy) showError('foodEnergyError', true);
-                document.getElementById('dailyFoodResults').style.display = 'none';
-                document.getElementById('totalFoodDisplay').value = '';
-                return;
-            }
-
-            if (!days || !validateInput(days, 1, true)) {
-                if (days) showError('daysError', true);
-                document.getElementById('totalFoodDisplay').value = '';
-                return;
-            }
-
-            const energyPer100g = parseFloat(foodEnergy);
-            const numDays = parseInt(days);
-            
-            const dailyFoodGrams = (currentMER / energyPer100g) * 100;
-            const totalFoodGrams = dailyFoodGrams * numDays;
-            
-            document.getElementById('dailyFoodValue').textContent = formatNumber(dailyFoodGrams, 1) + ' g/day';
-            document.getElementById('dailyFoodResults').style.display = 'block';
-            
-            const convertedAmount = convertUnits(totalFoodGrams, unit);
-            const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-            const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
-            
-            document.getElementById('totalFoodDisplay').value = formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
-        }
-
-        document.getElementById('weight').addEventListener('input', updateCalorieCalculations);
-        document.getElementById('dogType').addEventListener('change', updateCalorieCalculations);
-        document.getElementById('foodEnergy').addEventListener('input', updateFoodCalculations);
-        document.getElementById('days').addEventListener('input', updateFoodCalculations);
-        document.getElementById('unit').addEventListener('change', updateFoodCalculations);
-
-        document.getElementById('weight').addEventListener('blur', function() {
-            const weight = this.value;
-            if (weight && !validateInput(weight, 0.1)) {
-                showError('weightError', true);
-            }
-        });
-
-        document.getElementById('foodEnergy').addEventListener('blur', function() {
-            const energy = this.value;
-            if (energy && !validateInput(energy, 1)) {
-                showError('foodEnergyError', true);
-            }
-        });
-
-        document.getElementById('days').addEventListener('blur', function() {
-            const days = this.value;
-            if (days && !validateInput(days, 1, true)) {
-                showError('daysError', true);
-            }
-        });
-    </script>
-</body>
-</html>

index.html

@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dog Calorie Calculator</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <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" 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">
-                    <div class="dog-calculator-form-group">
-                        <label for="foodEnergy" id="foodEnergyLabel">Food Energy Content (kcal/100g):</label>
-                        <input type="number" id="foodEnergy" min="1" step="1" placeholder="Enter kcal per 100g" aria-describedby="foodEnergyHelp">
-                        <div id="foodEnergyError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content (minimum 1 kcal/100g)</div>
-                    </div>
-
-                    <div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
-                        <div class="dog-calculator-result-item">
-                            <span class="dog-calculator-result-label">Daily Food Amount:</span>
-                            <span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
-                        </div>
-                    </div>
-
-                    <div class="dog-calculator-form-group" style="margin-top: 20px;">
-                        <label for="days">Number of Days:</label>
-                        <input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
-                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
-                    </div>
-
-                    <div class="dog-calculator-input-group">
-                        <div class="dog-calculator-form-group">
-                            <label for="totalFoodDisplay">Total Food Amount:</label>
-                            <input type="text" id="totalFoodDisplay" readonly>
-                        </div>
-                        <div class="dog-calculator-form-group">
-                            <label for="unit">Unit:</label>
-                            <select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
-                                <option value="g">grams (g)</option>
-                                <option value="kg">kilograms (kg)</option>
-                                <option value="oz">ounces (oz)</option>
-                                <option value="lb">pounds (lb)</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="dog-calculator-action-buttons">
-            <button class="dog-calculator-btn dog-calculator-btn-share" onclick="showShareOptions()">
-                <i class="fas fa-share-alt"></i> Share
-            </button>
-            <button class="dog-calculator-btn dog-calculator-btn-embed" onclick="showEmbedModal()">
-                <i class="fas fa-code"></i> Embed
-            </button>
-        </div>
-
-        <div class="dog-calculator-footer">
-            <a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
-                by caninenutritionandwellness.com
-            </a>
-        </div>
-    </div>
-
-    <!-- Share Modal -->
-    <div id="shareModal" class="dog-calculator-modal">
-        <div class="dog-calculator-modal-content">
-            <span class="dog-calculator-modal-close" onclick="closeShareModal()">&times;</span>
-            <h3><i class="fas fa-share-alt"></i> Share Calculator</h3>
-            <div class="dog-calculator-share-buttons">
-                <button class="dog-calculator-share-btn dog-calculator-share-facebook" onclick="shareToFacebook()">
-                    <i class="fab fa-facebook-f"></i> Facebook
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-twitter" onclick="shareToTwitter()">
-                    <i class="fab fa-twitter"></i> Twitter
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-linkedin" onclick="shareToLinkedIn()">
-                    <i class="fab fa-linkedin-in"></i> LinkedIn
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-email" onclick="shareViaEmail()">
-                    <i class="fas fa-envelope"></i> Email
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-copy" onclick="copyShareLink()">
-                    <i class="fas fa-link"></i> 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">
-        <div class="dog-calculator-modal-content dog-calculator-modal-embed">
-            <span class="dog-calculator-modal-close" onclick="closeEmbedModal()">&times;</span>
-            <h3><i class="fas fa-code"></i> Embed Calculator</h3>
-            
-            <div class="dog-calculator-embed-options">
-                <div class="dog-calculator-embed-option">
-                    <h4><i class="fas fa-bolt"></i> JavaScript Widget (Recommended)</h4>
-                    <p>SEO-friendly, responsive, integrates with your site's design</p>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="widgetCode">&lt;script src="https://yourdomain.com/dog-calculator-widget.js"&gt;&lt;/script&gt;
-&lt;div id="dog-calorie-calculator"&gt;&lt;/div&gt;</code></pre>
-                        <button class="dog-calculator-copy-btn" onclick="copyEmbedCode('widget')">
-                            <i class="fas fa-copy"></i> Copy
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="dog-calculator-embed-option">
-                    <h4><i class="fas fa-shield-alt"></i> iframe Embed (Brand Protected)</h4>
-                    <p>Complete style isolation, your branding stays intact</p>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="iframeCode">&lt;iframe src="https://yourdomain.com/iframe.html" 
-        width="100%" height="600" 
-        frameborder="0" 
-        title="Dog Calorie Calculator"&gt;
-&lt;/iframe&gt;</code></pre>
-                        <button class="dog-calculator-copy-btn" onclick="copyEmbedCode('iframe')">
-                            <i class="fas fa-copy"></i> Copy
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script src="calculator.js"></script>
-</body>
-</html>

shared-styles.css

@@ -1,902 +0,0 @@
-/* Dog Calorie Calculator Styles */
-        /* Using Canine Nutrition and Wellness brand colors and design system */
-
-        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: #6f3f6d;
-        }
-
-        .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: #fdfcfe;
-            border: 1px solid #e8e3ed;
-            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: #6f3f6d;
-            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: #635870;
-            transition: color 0.2s ease;
-        }
-
-        .dog-calculator-unit-label.active {
-            color: #6f3f6d;
-            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: #e8e3ed;
-            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: #6f3f6d;
-            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 #e8e3ed;
-            border-radius: 6px;
-            font-size: 1rem;
-            font-family: inherit;
-            background-color: #ffffff;
-            color: #6f3f6d;
-            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: #ffffff;
-            color: #6f3f6d;
-        }
-
-        .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: #ffffff;
-            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
-        }
-
-        .dog-calculator-form-group input[readonly] {
-            background-color: #f8f5fa;
-            cursor: not-allowed;
-            color: #635870;
-        }
-
-        .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: #6f3f6d;
-            font-size: 0.95rem;
-        }
-
-        .dog-calculator-result-value {
-            font-weight: 600;
-            color: #6f3f6d;
-            font-size: 1.1rem;
-            padding: 4px 12px;
-            background: rgba(241, 154, 95, 0.15);
-            border-radius: 4px;
-        }
-
-        .dog-calculator-collapsible {
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
-            border-top: none;
-            margin-bottom: 0;
-            overflow: hidden;
-            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
-        }
-
-        .dog-calculator-collapsible-header {
-            background: #f8f5fa;
-            padding: 20px 24px;
-            border-bottom: 1px solid #e8e3ed;
-        }
-
-        .dog-calculator-collapsible-header h3 {
-            margin: 0;
-            font-size: 1.25rem;
-            color: #6f3f6d;
-            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: #e87159;
-            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: #f8f5fa;
-            border-left: 1px solid #e8e3ed;
-            border-right: 1px solid #e8e3ed;
-            margin-top: -1px;
-            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
-        }
-
-        .dog-calculator-btn {
-            padding: 8px 16px;
-            border: 1px solid #e8e3ed;
-            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: #6f3f6d;
-        }
-
-        .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: #7fa464;
-            color: #7fa464;
-        }
-
-        .dog-calculator-footer {
-            text-align: center;
-            padding: 20px;
-            background: #fdfcfe;
-            border: 1px solid #e8e3ed;
-            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: column;
-                gap: 20px;
-            }
-
-            .dog-calculator-input-group .dog-calculator-form-group {
-                margin-bottom: 20px;
-            }
-
-            .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;
-            }
-        }
-
-        /* Dark theme - manual override */
-        .dog-calculator-container.theme-dark {
-            color: #f5f3f7;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-section,
-        .dog-calculator-container.theme-dark .dog-calculator-collapsible {
-            background: #24202d;
-            border-color: #433c4f;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header {
-            background: #312b3b;
-            border-color: #433c4f;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover {
-            background: #3a3446;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-section h2,
-        .dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3,
-        .dog-calculator-container.theme-dark .dog-calculator-form-group label,
-        .dog-calculator-container.theme-dark .dog-calculator-result-label {
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-unit-label {
-            color: #b8b0c2;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-unit-label.active {
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-slider {
-            background-color: #433c4f;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-form-group select,
-        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"],
-        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] {
-            background-color: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
-            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='%23f5f3f7' 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");
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-form-group select option {
-            background-color: #312b3b;
-            color: #f5f3f7;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-form-group select:focus,
-        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus,
-        .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus {
-            background-color: #312b3b;
-            border-color: #f19a5f;
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] {
-            background-color: #433c4f;
-            color: #b8b0c2;
-        }
-            
-        .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);
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-result-value {
-            color: #f5f3f7;
-            background: rgba(241, 154, 95, 0.2);
-        }
-            
-        .dog-calculator-container.theme-dark .dog-calculator-footer {
-            background: #24202d;
-            border-color: #433c4f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-action-buttons {
-            background: #312b3b;
-            border-color: #433c4f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-btn {
-            background: #433c4f;
-            border-color: #433c4f;
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-btn:hover {
-            background: #524a5f;
-            border-color: #524a5f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-btn-share:hover {
-            border-color: #9f5999;
-            color: #f19a5f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
-            border-color: #7fa464;
-            color: #7fa464;
-        }
-
-        /* System theme - follows user's OS preference */
-        @media (prefers-color-scheme: dark) {
-            .dog-calculator-container.theme-system {
-                color: #f5f3f7;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-section,
-            .dog-calculator-container.theme-system .dog-calculator-collapsible {
-                background: #24202d;
-                border-color: #433c4f;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-collapsible-header {
-                background: #312b3b;
-                border-color: #433c4f;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover {
-                background: #3a3446;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-section h2,
-            .dog-calculator-container.theme-system .dog-calculator-collapsible-header h3,
-            .dog-calculator-container.theme-system .dog-calculator-form-group label,
-            .dog-calculator-container.theme-system .dog-calculator-result-label {
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-unit-label {
-                color: #b8b0c2;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-unit-label.active {
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-slider {
-                background-color: #433c4f;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-form-group select,
-            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"],
-            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] {
-                background-color: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
-                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='%23f5f3f7' 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");
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-form-group select option {
-                background-color: #312b3b;
-                color: #f5f3f7;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-form-group select:focus,
-            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus,
-            .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus {
-                background-color: #312b3b;
-                border-color: #f19a5f;
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] {
-                background-color: #433c4f;
-                color: #b8b0c2;
-            }
-            
-            .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);
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-result-value {
-                color: #f5f3f7;
-                background: rgba(241, 154, 95, 0.2);
-            }
-            
-            .dog-calculator-container.theme-system .dog-calculator-footer {
-                background: #24202d;
-                border-color: #433c4f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-action-buttons {
-                background: #312b3b;
-                border-color: #433c4f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-btn {
-                background: #433c4f;
-                border-color: #433c4f;
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-btn:hover {
-                background: #524a5f;
-                border-color: #524a5f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-btn-share:hover {
-                border-color: #9f5999;
-                color: #f19a5f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
-                border-color: #7fa464;
-                color: #7fa464;
-            }
-        }
-
-        /* Modal Styles */
-        .dog-calculator-modal {
-            display: none;
-            position: fixed;
-            z-index: 10000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            animation: fadeIn 0.3s ease;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
-        .dog-calculator-modal-content {
-            position: relative;
-            background-color: #ffffff;
-            margin: 5% auto;
-            padding: 30px;
-            border: 1px solid #e8e3ed;
-            border-radius: 12px;
-            width: 90%;
-            max-width: 500px;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-            animation: slideIn 0.3s ease;
-        }
-
-        .dog-calculator-modal-embed {
-            max-width: 700px;
-        }
-
-        @keyframes slideIn {
-            from { 
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to { 
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .dog-calculator-modal-close {
-            position: absolute;
-            right: 20px;
-            top: 20px;
-            font-size: 28px;
-            font-weight: 300;
-            color: #6f3f6d;
-            cursor: pointer;
-            transition: color 0.2s ease;
-        }
-
-        .dog-calculator-modal-close:hover {
-            color: #f19a5f;
-        }
-
-        .dog-calculator-modal h3 {
-            margin: 0 0 24px 0;
-            color: #6f3f6d;
-            font-size: 1.5rem;
-        }
-
-        /* Share Modal */
-        .dog-calculator-share-buttons {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 12px;
-            margin-bottom: 20px;
-        }
-
-        .dog-calculator-share-btn {
-            padding: 12px 16px;
-            border: none;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: white;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-family: inherit;
-        }
-
-        .dog-calculator-share-facebook { background: #1877f2; }
-        .dog-calculator-share-facebook:hover { background: #1664d1; transform: translateY(-1px); }
-        .dog-calculator-share-twitter { background: #1da1f2; }
-        .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
-        .dog-calculator-share-linkedin { background: #0a66c2; }
-        .dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
-        .dog-calculator-share-email { background: #6f3f6d; }
-        .dog-calculator-share-email:hover { background: #5a3357; transform: translateY(-1px); }
-        .dog-calculator-share-copy { background: #f19a5f; }
-        .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
-
-        .dog-calculator-share-url {
-            display: flex;
-            width: 100%;
-        }
-
-        .dog-calculator-share-url input {
-            flex: 1;
-            width: 100%;
-            padding: 10px 16px;
-            border: 1px solid #e8e3ed;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            font-family: monospace;
-            background: #f8f5fa;
-            color: #6f3f6d;
-        }
-
-        /* Embed Modal */
-        .dog-calculator-embed-options {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-
-        .dog-calculator-embed-option {
-            border: 1px solid #e8e3ed;
-            border-radius: 8px;
-            padding: 20px;
-            background: #fcfafd;
-        }
-
-        .dog-calculator-embed-option h4 {
-            margin: 0 0 8px 0;
-            color: #6f3f6d;
-            font-size: 1.1rem;
-        }
-
-        .dog-calculator-embed-option p {
-            margin: 0 0 16px 0;
-            color: #635870;
-            font-size: 0.9rem;
-        }
-
-        /* Default (light theme) code containers */
-        .dog-calculator-code-container {
-            position: relative;
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
-            border-radius: 6px;
-            overflow: hidden;
-        }
-
-        .dog-calculator-code-container pre {
-            margin: 0;
-            padding: 16px 60px 16px 16px;
-            overflow-x: auto;
-        }
-
-        .dog-calculator-code-container code {
-            color: #312b3b;
-            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-            font-size: 0.85rem;
-            line-height: 1.4;
-        }
-
-        .dog-calculator-copy-btn {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            padding: 6px 10px;
-            background: #f19a5f;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-family: inherit;
-            z-index: 1;
-        }
-
-        .dog-calculator-copy-btn:hover { background: #e87741; }
-        .dog-calculator-copy-btn.copied { background: #7fa464; }
-        .dog-calculator-copy-btn.copied:hover { background: #7fa464; }
-
-        /* Dark theme modal styles */
-        .dog-calculator-container.theme-dark .dog-calculator-modal-content {
-            background-color: #24202d;
-            border-color: #433c4f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-modal h3 {
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-modal-close {
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-modal-close:hover {
-            color: #f19a5f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-share-url input {
-            background: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option {
-            background: #312b3b;
-            border-color: #433c4f;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
-            color: #f5f3f7;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option p {
-            color: #b8b0c2;
-        }
-
-        /* Dark theme code containers - different from embed option background */
-        .dog-calculator-container.theme-dark .dog-calculator-code-container {
-            background: #1a1621;
-            border-color: #2a2330;
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-code-container code {
-            color: #f5f3f7;
-        }
-
-        /* System theme modal styles */
-        @media (prefers-color-scheme: dark) {
-            .dog-calculator-container.theme-system .dog-calculator-modal-content {
-                background-color: #24202d;
-                border-color: #433c4f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-modal h3 {
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-modal-close {
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-modal-close:hover {
-                color: #f19a5f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-share-url input {
-                background: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option {
-                background: #312b3b;
-                border-color: #433c4f;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
-                color: #f5f3f7;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option p {
-                color: #b8b0c2;
-            }
-
-            /* System theme code containers - different from embed option background */
-            .dog-calculator-container.theme-system .dog-calculator-code-container {
-                background: #1a1621;
-                border-color: #2a2330;
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-code-container code {
-                color: #f5f3f7;
-            }
-        }

shared-template.html

@@ -1,178 +0,0 @@
-<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">
-                    <div class="dog-calculator-input-group">
-                        <div class="dog-calculator-form-group">
-                            <label for="foodEnergy" id="foodEnergyLabel">Food Energy Content:</label>
-                            <input type="number" id="foodEnergy" min="1" step="1" placeholder="Enter energy content" aria-describedby="foodEnergyHelp">
-                            <div id="foodEnergyError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
-                        </div>
-                        <div class="dog-calculator-form-group">
-                            <label for="energyUnit">Unit:</label>
-                            <select id="energyUnit" class="dog-calculator-unit-select" aria-describedby="energyUnitHelp">
-                                <option value="kcal100g">kcal/100g</option>
-                                <option value="kcalkg">kcal/kg</option>
-                                <option value="kcalcup">kcal/cup</option>
-                                <option value="kcalcan">kcal/can</option>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
-                        <div class="dog-calculator-result-item">
-                            <span class="dog-calculator-result-label">Daily Food Amount:</span>
-                            <span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
-                        </div>
-                    </div>
-
-                    <div class="dog-calculator-form-group" style="margin-top: 20px;">
-                        <label for="days">Number of Days:</label>
-                        <input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
-                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
-                    </div>
-
-                    <div class="dog-calculator-input-group">
-                        <div class="dog-calculator-form-group">
-                            <label for="totalFoodDisplay">Total Food Amount:</label>
-                            <input type="text" id="totalFoodDisplay" readonly>
-                        </div>
-                        <div class="dog-calculator-form-group">
-                            <label for="unit">Unit:</label>
-                            <select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
-                                <option value="g">grams (g)</option>
-                                <option value="kg">kilograms (kg)</option>
-                                <option value="oz">ounces (oz)</option>
-                                <option value="lb">pounds (lb)</option>
-                            </select>
-                        </div>
-                    </div>
-                </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>
-    </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" id="shareFacebook">
-                    Facebook
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-twitter" id="shareTwitter">
-                    Twitter
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-linkedin" id="shareLinkedIn">
-                    LinkedIn
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-email" id="shareEmail">
-                    Email
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-copy" 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" 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" id="copyIframe">
-                            Copy
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>

styles.css

@@ -1,787 +0,0 @@
-/* Dog Calorie Calculator Styles */
-/* Using Canine Nutrition and Wellness brand colors and design system */
-
-.dog-calculator-container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 24px;
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    line-height: 1.5;
-    color: #6f3f6d;
-    box-sizing: border-box;
-}
-
-.dog-calculator-container *,
-.dog-calculator-container *::before,
-.dog-calculator-container *::after {
-    box-sizing: border-box;
-}
-
-.dog-calculator-section {
-    background: #fdfcfe;
-    border: 1px solid #e8e3ed;
-    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: #6f3f6d;
-    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: #635870;
-    transition: color 0.2s ease;
-}
-
-.dog-calculator-unit-label.active {
-    color: #6f3f6d;
-    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: #e8e3ed;
-    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: #6f3f6d;
-    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 #e8e3ed;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-family: inherit;
-    background-color: #ffffff;
-    color: #6f3f6d;
-    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: #ffffff;
-    color: #6f3f6d;
-}
-
-.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: #ffffff;
-    box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
-}
-
-.dog-calculator-form-group input[readonly] {
-    background-color: #f8f5fa;
-    cursor: not-allowed;
-    color: #635870;
-}
-
-.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: #6f3f6d;
-    font-size: 0.95rem;
-}
-
-.dog-calculator-result-value {
-    font-weight: 600;
-    color: #6f3f6d;
-    font-size: 1.1rem;
-    padding: 4px 12px;
-    background: rgba(241, 154, 95, 0.15);
-    border-radius: 4px;
-}
-
-.dog-calculator-collapsible {
-    background: #ffffff;
-    border: 1px solid #e8e3ed;
-    border-top: none;
-    margin-bottom: 0;
-    overflow: hidden;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
-}
-
-.dog-calculator-collapsible-header {
-    background: #f8f5fa;
-    padding: 20px 24px;
-    border-bottom: 1px solid #e8e3ed;
-}
-
-.dog-calculator-collapsible-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    color: #6f3f6d;
-    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: #e87159;
-    font-size: 0.875rem;
-    margin-top: 6px;
-    font-weight: 500;
-}
-
-.dog-calculator-hidden {
-    display: none;
-}
-
-.dog-calculator-footer {
-    text-align: center;
-    padding: 20px;
-    background: #fdfcfe;
-    border: 1px solid #e8e3ed;
-    border-radius: 0 0 8px 8px;
-    border-top: none;
-    margin-top: -1px;
-}
-
-.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;
-}
-
-/* Action Buttons */
-.dog-calculator-action-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    padding: 20px;
-    background: #f8f5fa;
-    border-left: 1px solid #e8e3ed;
-    border-right: 1px solid #e8e3ed;
-    margin-top: -1px;
-}
-
-.dog-calculator-btn {
-    padding: 8px 16px;
-    border: 1px solid #e8e3ed;
-    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: #6f3f6d;
-}
-
-.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: #7fa464;
-    color: #7fa464;
-}
-
-/* Modal Styles */
-.dog-calculator-modal {
-    display: none;
-    position: fixed;
-    z-index: 10000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.dog-calculator-modal-content {
-    position: relative;
-    background-color: #ffffff;
-    margin: 5% auto;
-    padding: 30px;
-    border: 1px solid #e8e3ed;
-    border-radius: 12px;
-    width: 90%;
-    max-width: 500px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-    animation: slideIn 0.3s ease;
-}
-
-.dog-calculator-modal-embed {
-    max-width: 700px;
-}
-
-@keyframes slideIn {
-    from { 
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to { 
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.dog-calculator-modal-close {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    font-size: 28px;
-    font-weight: 300;
-    color: #6f3f6d;
-    cursor: pointer;
-    transition: color 0.2s ease;
-}
-
-.dog-calculator-modal-close:hover {
-    color: #f19a5f;
-}
-
-.dog-calculator-modal h3 {
-    margin: 0 0 24px 0;
-    color: #6f3f6d;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-/* Share Modal */
-.dog-calculator-share-buttons {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 12px;
-    margin-bottom: 20px;
-}
-
-.dog-calculator-share-btn {
-    padding: 12px 16px;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: white;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font-family: inherit;
-}
-
-.dog-calculator-share-facebook {
-    background: #1877f2;
-}
-
-.dog-calculator-share-facebook:hover {
-    background: #1664d1;
-    transform: translateY(-1px);
-}
-
-.dog-calculator-share-twitter {
-    background: #1da1f2;
-}
-
-.dog-calculator-share-twitter:hover {
-    background: #1991da;
-    transform: translateY(-1px);
-}
-
-.dog-calculator-share-linkedin {
-    background: #0a66c2;
-}
-
-.dog-calculator-share-linkedin:hover {
-    background: #084d95;
-    transform: translateY(-1px);
-}
-
-.dog-calculator-share-email {
-    background: #6f3f6d;
-}
-
-.dog-calculator-share-email:hover {
-    background: #5a3357;
-    transform: translateY(-1px);
-}
-
-.dog-calculator-share-copy {
-    background: #f19a5f;
-}
-
-.dog-calculator-share-copy:hover {
-    background: #e87741;
-    transform: translateY(-1px);
-}
-
-.dog-calculator-share-url {
-    display: flex;
-    gap: 12px;
-}
-
-.dog-calculator-share-url input {
-    flex: 1;
-    padding: 10px 16px;
-    border: 1px solid #e8e3ed;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    font-family: monospace;
-    background: #f8f5fa;
-    color: #6f3f6d;
-}
-
-/* Embed Modal */
-.dog-calculator-embed-options {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.dog-calculator-embed-option {
-    border: 1px solid #e8e3ed;
-    border-radius: 8px;
-    padding: 20px;
-    background: #fcfafd;
-}
-
-.dog-calculator-embed-option h4 {
-    margin: 0 0 8px 0;
-    color: #6f3f6d;
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.dog-calculator-embed-option p {
-    margin: 0 0 16px 0;
-    color: #635870;
-    font-size: 0.9rem;
-}
-
-.dog-calculator-code-container {
-    position: relative;
-    background: #312b3b;
-    border-radius: 6px;
-    overflow: hidden;
-}
-
-.dog-calculator-code-container pre {
-    margin: 0;
-    padding: 16px;
-    overflow-x: auto;
-}
-
-.dog-calculator-code-container code {
-    color: #f5f3f7;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 0.85rem;
-    line-height: 1.4;
-}
-
-.dog-calculator-copy-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 6px 12px;
-    background: #f19a5f;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-family: inherit;
-}
-
-.dog-calculator-copy-btn:hover {
-    background: #e87741;
-}
-
-.dog-calculator-copy-btn.copied {
-    background: #7fa464;
-}
-
-.dog-calculator-copy-btn.copied:hover {
-    background: #7fa464;
-}
-
-/* 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: column;
-        gap: 20px;
-    }
-
-    .dog-calculator-input-group .dog-calculator-form-group {
-        margin-bottom: 20px;
-    }
-
-    .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;
-    }
-
-    .dog-calculator-modal-content {
-        margin: 10% auto;
-        padding: 20px;
-        width: 95%;
-    }
-
-    .dog-calculator-share-buttons {
-        grid-template-columns: 1fr;
-    }
-
-    .dog-calculator-embed-option {
-        padding: 16px;
-    }
-
-    .dog-calculator-code-container pre {
-        padding: 12px;
-        font-size: 0.75rem;
-    }
-}
-
-/* Dark theme support */
-@media (prefers-color-scheme: dark) {
-    .dog-calculator-container {
-        color: #f5f3f7;
-    }
-    
-    .dog-calculator-section,
-    .dog-calculator-collapsible {
-        background: #24202d;
-        border-color: #433c4f;
-    }
-    
-    .dog-calculator-collapsible-header {
-        background: #312b3b;
-        border-color: #433c4f;
-    }
-    
-    .dog-calculator-collapsible-header:hover {
-        background: #3a3446;
-    }
-    
-    .dog-calculator-section h2,
-    .dog-calculator-collapsible-header h3,
-    .dog-calculator-form-group label,
-    .dog-calculator-result-label {
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-unit-label {
-        color: #b8b0c2;
-    }
-
-    .dog-calculator-unit-label.active {
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-slider {
-        background-color: #433c4f;
-    }
-    
-    .dog-calculator-form-group select,
-    .dog-calculator-form-group input[type="number"],
-    .dog-calculator-form-group input[type="text"] {
-        background-color: #312b3b;
-        border-color: #433c4f;
-        color: #f5f3f7;
-        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='%23f5f3f7' 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");
-    }
-    
-    .dog-calculator-form-group select option {
-        background-color: #312b3b;
-        color: #f5f3f7;
-    }
-    
-    .dog-calculator-form-group select:focus,
-    .dog-calculator-form-group input[type="number"]:focus,
-    .dog-calculator-form-group input[type="text"]:focus {
-        background-color: #312b3b;
-        border-color: #f19a5f;
-    }
-    
-    .dog-calculator-form-group input[readonly] {
-        background-color: #433c4f;
-        color: #b8b0c2;
-    }
-    
-    .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);
-    }
-    
-    .dog-calculator-result-value {
-        color: #f5f3f7;
-        background: rgba(241, 154, 95, 0.2);
-    }
-    
-    .dog-calculator-footer {
-        background: #24202d;
-        border-color: #433c4f;
-    }
-
-    .dog-calculator-action-buttons {
-        background: #312b3b;
-        border-color: #433c4f;
-    }
-
-    .dog-calculator-btn {
-        background: #433c4f;
-        border-color: #433c4f;
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-btn:hover {
-        background: #524a5f;
-        border-color: #524a5f;
-    }
-
-    .dog-calculator-btn-share:hover {
-        border-color: #9f5999;
-        color: #f19a5f;
-    }
-
-    .dog-calculator-btn-embed:hover {
-        border-color: #7fa464;
-        color: #7fa464;
-    }
-
-    .dog-calculator-modal-content {
-        background-color: #24202d;
-        border-color: #433c4f;
-    }
-
-    .dog-calculator-modal h3 {
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-modal-close {
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-modal-close:hover {
-        color: #f19a5f;
-    }
-
-    .dog-calculator-share-url input {
-        background: #312b3b;
-        border-color: #433c4f;
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-embed-option {
-        background: #312b3b;
-        border-color: #433c4f;
-    }
-
-    .dog-calculator-embed-option h4 {
-        color: #f5f3f7;
-    }
-
-    .dog-calculator-embed-option p {
-        color: #b8b0c2;
-    }
-}

test-widget.html

@@ -24,14 +24,14 @@
     
     <div class="test-container">
         <h2>Test 1: Basic Widget</h2>
-        <div id="dog-calorie-calculator"></div>
+        <div class="dog-calorie-calculator" data-theme="light" data-scale="0.9"></div>
     </div>
     
     <div class="test-container">
         <h2>Test 2: Dark Theme Widget</h2>
-        <div id="dog-calorie-calculator" data-theme="dark" data-scale="0.5"></div>
+        <div class="dog-calorie-calculator" data-theme="dark" data-scale="0.5"></div>
     </div>
     
-    <script src="dog-calculator-widget.js"></script>
+    <script src="sundog-dog-food-calculator.js"></script>
 </body>
 </html>