Remove embedding and js widget

- Implement range multipliers for different life stages (e.g., 1.6-1.8x for intact adults)
- Display MER and food amounts as ranges (e.g., '2042-2298 cal/day')
- Add CSS to prevent value wrapping with white-space: nowrap
- Increase calculator max-width from 600px to 640px for better text layout
- Based on veterinary RER multiplier ranges for more accurate feeding recommendations

.gitignore

@@ -0,0 +1,27 @@
+# Dependencies
+node_modules/
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+
+# Personal files
+theme.scss
+_variables.scss
+reference.png
+better.png
+START_PROMPT.md
+CLAUDE.md
+CLAUDE_V2.md
+math.md
+vetcalculators/
+*.js.backup*
+backup/

README.md

@@ -1,55 +1,109 @@
 # 🐕 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. Distributed as a standalone page; third‑party embedding is no longer supported.
 
 **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
-- **Scalable Widget**: Easily resize from 50% to 200% with data attributes
+- **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 UI**: Resize from 50% to 200% via query params
 - **Theme Support**: Light, dark, and system themes
-- **Responsive Design**: Mobile-first, works on all devices
+- **Responsive Design**: Mobile-first, optimized layouts for all devices
-- **Brand Integration**: Uses Canine Nutrition and Wellness color scheme
-- **Two Embedding Options**: JavaScript widget and iframe
 - **Accessibility**: Full keyboard navigation and screen reader support
 
-## 🚀 Quick Start
+### Brand & Integration
+- **Brand Integration**: Uses Canine Nutrition and Wellness color scheme
+- **Professional Design**: Clean, veterinary-grade interface
+- **Brand Protection**: Complete iframe isolation option
+
+## 🚀 Usage
+
+- Open `iframe.html` locally, or host it as a standalone page on your site.
+- Embedding is allowed only on these domains: `caninenutritionandwellness.com`, `www.caninenutritionandwellness.com`.
+- Use an iframe to embed on your site, for example:
 
-### Option 1: JavaScript Widget (Recommended)
 ```html
-<!-- Basic usage -->
-<script src="https://yourdomain.com/sundog-dog-food-calculator.js"></script>
-<div id="dog-calorie-calculator"></div>
-
-<!-- With theme and scale options -->
-<div id="dog-calorie-calculator" data-theme="dark" data-scale="0.8"></div>
-```
-
-### Option 2: iframe Embed
-```html
-<!-- Basic iframe -->
 <iframe 
-    src="https://yourdomain.com/iframe.html"
+  src="https://embed.caninenutritionandwellness.com/dog-calorie-calculator/iframe.html?theme=light&scale=0.8"
-    width="100%" 
+  width="100%" height="640" frameborder="0" title="Dog Calorie Calculator">
-    height="600"
-    frameborder="0"
-    title="Dog Calorie Calculator">
-</iframe>
-
-<!-- With theme and scale parameters -->
-<iframe 
-    src="https://yourdomain.com/iframe.html?theme=dark&scale=1.2"
-    width="100%" 
-    height="600"
-    frameborder="0"
-    title="Dog Calorie Calculator">
 </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
@@ -59,7 +113,7 @@ Choose from three themes:
 - `system` - Follows user's OS preference (default)
 
 ### Scale Options
-Resize the widget from 50% to 200%:
+Resize the interface from 50% to 200%:
 - Range: `0.5` to `2.0`
 - Default: `1.0` (100% size)
 - Examples: `0.8` (80%), `1.2` (120%), `1.5` (150%)
@@ -71,27 +125,21 @@ Support for regional differences:
 - `kcal/cup` - US/Canada dry food
 - `kcal/can` - US/Canada wet food
 
-### Advanced JavaScript Usage
+<!-- Embedding and external widget initialization are no longer supported. -->
-```javascript
-new DogCalorieCalculatorWidget(container, {
-    theme: 'dark',    // 'light', 'dark', 'system'
-    scale: 1.2        // 0.5 to 2.0
-});
-```
 
 ## 🛠️ Development
 
 ### Build System
-This project uses a single source of truth approach:
+This project uses an organized source layout compiled into a single page:
 
-- **Master Source**: `iframe.html` - Contains all functionality, styles, and calculations
+- **Sources**: `src/` (HTML, CSS, JS modules)
-- **Build Script**: `build.js` - Generates the widget from iframe.html 
+- **Build Script**: `build.js` - Generates `iframe.html` from `src/`
-- **Generated Output**: `sundog-dog-food-calculator.js` - Embeddable widget
+- **Output**: `iframe.html` - Standalone calculator page
 
 ### Development Workflow
-1. **Make changes to `iframe.html`** - Edit calculations, design, layout, or functionality
+1. **Make changes in `src/`** - Edit calculations, design, layout, or functionality
 2. **Run the build script**: `node build.js` 
-3. **Done!** - Both iframe and widget now have identical functionality
+3. **Done!** - `iframe.html` is regenerated
 
 ### Why This Approach?
 - ✅ **Single Source of Truth** - No need to maintain two separate files
@@ -100,18 +148,16 @@ This project uses a single source of truth approach:
 - ✅ **No Sync Issues** - Build script ensures consistency
 
 ### Build Script Features
-- Extracts CSS, HTML, and JavaScript from iframe.html
+- Compiles CSS, HTML, and JavaScript from `src/`
-- Transforms CSS classes for widget namespacing (`dog-calculator-` → `dog-calc-`)
 - Preserves all functionality including unit switching and calculations
-- Maintains theme and scale support via data attributes
+- Maintains theme and scale support via URL query parameters
 
 ## 📁 Project Structure
 
 ```
-├── iframe.html                    # 🎯 MASTER SOURCE - Edit this file
+├── src/                          # ✏️ Source (HTML/CSS/JS)
 ├── build.js                      # 🔧 Build script - Run after changes
-├── sundog-dog-food-calculator.js  # 📦 Generated widget (don't edit)
+├── iframe.html                   # 📦 Generated standalone page
-├── test-widget.html              # 🧪 Test file for widget
 └── README.md                     # 📖 This file
 ```
 
@@ -142,71 +188,32 @@ Colors automatically adapt to light/dark themes via CSS custom properties.
 | Working dog - heavy work | 5.0 | Intensive work |
 | Senior dog | 1.1 | Reduced activity |
 
-## 🔧 Technical Implementation
+## 🔧 Technical Notes
+- Standalone page with theme and scale controls via URL params.
+- Embedding is allowlisted at runtime to your domains and should be enforced with server headers.
 
-### JavaScript Widget Features
+### Server Headers (required for robust enforcement)
-- **Auto-initialization**: Detects `#dog-calorie-calculator` containers
+Configure your server or CDN to send this header on `iframe.html`:
-- **CSS Namespacing**: All classes prefixed with `dog-calc-`
-- **Shadow DOM Ready**: Prepared for better style isolation
-- **Real-time Validation**: Input validation with error messages
-- **Mobile Optimized**: Responsive breakpoints and touch-friendly
 
-### iframe Features
+```
-- **Auto-resize**: Communicates height changes to parent
+Content-Security-Policy: frame-ancestors https://caninenutritionandwellness.com https://www.caninenutritionandwellness.com;
-- **Style Isolation**: Complete protection from host site CSS
+```
-- **Loading Animation**: Smooth fade-in when ready
+
-- **Cross-origin Ready**: PostMessage communication for integration
+Optional legacy header (deprecated but harmless as a supplement):
+
+```
+X-Frame-Options: SAMEORIGIN
+```
+
+If you serve the calculator from a subdomain (e.g., `embed.caninenutritionandwellness.com`) and embed it on the root domain, prefer the CSP `frame-ancestors` directive above.
 
 ## 🚀 Deployment Guide
 
-### 1. Host the Files
+### Deployment
-Upload these files to your web server:
+Host `iframe.html` (e.g., on `embed.caninenutritionandwellness.com`) and embed via iframe on your approved domains.
-- `sundog-dog-food-calculator.js` (for widget embedding)
-- `iframe.html` (for iframe embedding)
-
-### 2. Update URLs
-Replace `https://yourdomain.com` in:
-- `test-widget.html` examples
-- `sundog-dog-food-calculator.js` comments
-- This README
-
-### 3. CDN Distribution (Optional)
-For better performance, serve the widget script via CDN:
-- Use CloudFlare, AWS CloudFront, or similar
-- Enable CORS headers for cross-origin requests
-- Set appropriate cache headers (1 day for updates)
-
-### 4. Analytics Integration
-Add tracking to understand usage:
-
-```javascript
-// Track widget interactions
-document.addEventListener('DOMContentLoaded', function() {
-    // Track when calculator is used
-    document.addEventListener('change', function(e) {
-        if (e.target.closest('.dog-calc-widget')) {
-            gtag('event', 'calculator_interaction', {
-                'event_category': 'dog_calculator',
-                'event_label': e.target.id
-            });
-        }
-    });
-});
-```
 
 ## 🔒 Brand Protection
-
+Embedding is disabled to protect branding and ensure consistent presentation.
-### JavaScript Widget Risks
-Users can override your styling with:
-```css
-.dog-calc-footer { display: none !important; }
-```
-
-### iframe Protection
-Your branding is completely protected in iframe mode. Users cannot:
-- Remove your footer link
-- Modify your styling
-- Access your content with JavaScript
 
 ## 📱 Mobile Optimization
 
@@ -218,18 +225,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 +285,7 @@ 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 `iframe.html` in your browser
-- **Standalone**: Open `index.html` in your browser
 
 ---
 

build.js

@@ -1,46 +1,73 @@
 #!/usr/bin/env node
 
 /**
- * Dog Calculator Build System - PRODUCTION VERSION
+ * Dog Calculator Build System - ORGANIZED VERSION
  * 
- * This FIXED build script generates iframe.html and dog-calculator-widget.js
+ * This build script generates iframe.html from organized source files
- * with EXACTLY the same functionality from iframe.html as the single source of truth.
+ * in the src/ directory.
+ * 
+ * Source structure:
+ * - src/index.html - HTML template
+ * - src/css/main.css - Main styles
+ * - src/css/themes.css - Theme-specific styles
+ * - src/js/config.js - Configuration constants
+ * - src/js/calculator.js - JavaScript functionality
+ * 
+ * Output files:
+ * - iframe.html - Standalone calculator page
  * 
  * Usage: node build.js
- * 
- * ✅ WORKS CORRECTLY - Fixed the previous broken implementation
  */
 
 const fs = require('fs');
 const path = require('path');
 
-console.log('🎯 Dog Calculator Build System - FIXED & WORKING');
+console.log('🎯 Dog Calculator Build System - ORGANIZED VERSION');
 console.log('');
 
 /**
- * Extract and parse components from the master iframe.html
+ * Read organized components from src directory
  */
-function parseIframeComponents() {
+function readSourceComponents() {
-    if (!fs.existsSync('iframe.html')) {
+    const srcDir = 'src';
-        throw new Error('iframe.html not found - this is the master file that should exist');
+    
+    // Check if src directory exists
+    if (!fs.existsSync(srcDir)) {
+        throw new Error('src directory not found');
     }
     
-    const content = fs.readFileSync('iframe.html', 'utf8');
+    // Read CSS files
+    const mainCssPath = path.join(srcDir, 'css', 'main.css');
+    const themesCssPath = path.join(srcDir, 'css', 'themes.css');
+    if (!fs.existsSync(mainCssPath)) {
+        throw new Error('src/css/main.css not found');
+    }
+    if (!fs.existsSync(themesCssPath)) {
+        throw new Error('src/css/themes.css not found');
+    }
+    const mainCss = fs.readFileSync(mainCssPath, 'utf8').trim();
+    const themesCss = fs.readFileSync(themesCssPath, 'utf8').trim();
+    const css = mainCss + '\n\n' + themesCss;
     
-    // Extract CSS (everything between <style> and </style>)
+    // Read HTML template
-    const cssMatch = content.match(/<style>([\s\S]*?)<\/style>/);
+    const htmlPath = path.join(srcDir, 'index.html');
-    if (!cssMatch) throw new Error('Could not extract CSS from iframe.html');
+    if (!fs.existsSync(htmlPath)) {
-    const css = cssMatch[1].trim();
+        throw new Error('src/index.html not found');
+    }
+    const html = fs.readFileSync(htmlPath, 'utf8').trim();
     
-    // Extract HTML body (everything between <body> and <script>)
+    // Read JavaScript files
-    const htmlMatch = content.match(/<body>([\s\S]*?)<script>/);
+    const configPath = path.join(srcDir, 'js', 'config.js');
-    if (!htmlMatch) throw new Error('Could not extract HTML from iframe.html');
+    const calculatorPath = path.join(srcDir, 'js', 'calculator.js');
-    const html = htmlMatch[1].trim();
+    if (!fs.existsSync(configPath)) {
-    
+        throw new Error('src/js/config.js not found');
-    // Extract JavaScript (everything between <script> and </script>)
+    }
-    const jsMatch = content.match(/<script>([\s\S]*?)<\/script>/);
+    if (!fs.existsSync(calculatorPath)) {
-    if (!jsMatch) throw new Error('Could not extract JavaScript from iframe.html');
+        throw new Error('src/js/calculator.js not found');
-    const js = jsMatch[1].trim();
+    }
+    const config = fs.readFileSync(configPath, 'utf8').trim();
+    const calculator = fs.readFileSync(calculatorPath, 'utf8').trim();
+    const js = config + '\n\n' + calculator;
     
     return { css, html, js };
 }
@@ -49,17 +76,27 @@ function parseIframeComponents() {
  * Backup existing files
  */
 function backupFiles() {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backupDir = 'backup';
     
-    if (fs.existsSync('sundog-dog-food-calculator.js')) {
+    // Create backup directory if it doesn't exist
-        const backupName = `sundog-dog-food-calculator.js.backup-${timestamp}`;
+    if (!fs.existsSync(backupDir)) {
-        fs.copyFileSync('sundog-dog-food-calculator.js', backupName);
+        fs.mkdirSync(backupDir);
-        console.log(`📦 Backed up existing widget to: ${backupName}`);
     }
+    
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const filesToBackup = ['iframe.html'];
+    
+    filesToBackup.forEach(file => {
+        if (fs.existsSync(file)) {
+            const backupName = path.join(backupDir, `${file}.backup-${timestamp}`);
+            fs.copyFileSync(file, backupName);
+            console.log(`   📦 Backed up ${file}`);
+        }
+    });
 }
 
 /**
- * Generate iframe.html (regenerate from components for consistency)
+ * Generate iframe.html from modular components
  */
 function generateIframe(css, html, js) {
     const content = `<!DOCTYPE html>
@@ -69,6 +106,9 @@ function generateIframe(css, html, js) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
     <style>
+        /* Sundog Dog Food Calorie Calculator Styles */
+        
+        /* CSS Variables for theming */
         ${css}
     </style>
 </head>
@@ -80,37 +120,99 @@ function generateIframe(css, html, js) {
 </body>
 </html>`;
 
-    // Since iframe.html is our source, we don't overwrite it
-    // This function is here for consistency and testing
     return content;
 }
 
-/**
- * No transformation needed - keep original class names for consistency
- */
-function transformCSSForWidget(css) {
-    return css;
-}
-
-/**
- * No transformation needed - keep original class names for consistency
- */
-function transformHTMLForWidget(html) {
-    return html;
-}
-
 /**
  * Create production-ready widget JavaScript
  */
 function createWidgetJS(css, html, js) {
-    // Use original CSS and HTML without transformation for consistency
+    // Transform the JavaScript from calculator.js to work as a widget
-    const widgetCSS = css;
+    
-    const widgetHTML = html;
+    // 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 theme/scale assignments that would override widget options
+        .replace(/this\.theme = this\.getThemeFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultTheme;/g, '')
+        .replace(/this\.scale = this\.getScaleFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultScale;/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.theme)) {
+                    calculatorContainer.classList.add('theme-' + this.theme);
+                }
+            }
+        }
+
+        applyScale() {
+            const scale = Math.max(0.5, Math.min(2.0, this.scale));
+            if (scale !== 1.0) {
+                this.container.style.transform = \`scale(\${scale})\`;
+                this.container.style.transformOrigin = 'top left';
+            }
+        }$2`);
+
+    // Add CSS variables to widget CSS
+    const widgetCSS = `/* Sundog Dog Food Calorie Calculator Styles */
+        
+        /* CSS Variables for theming */
+        ${css}`;
 
     const widgetCode = `/**
  * Dog Calorie Calculator Widget
  * Embeddable JavaScript widget for websites
  * 
+ * THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY
+ * Edit files in src/ directory and run 'node build.js' to update
+ * 
  * Usage:
  * <script src="sundog-dog-food-calculator.js"></script>
  * <div id="dog-calorie-calculator"></div>
@@ -125,7 +227,7 @@ function createWidgetJS(css, html, js) {
 (function() {
     'use strict';
     
-    // Inject widget styles with proper namespacing
+    // Inject widget styles
     const CSS_STYLES = \`${widgetCSS}\`;
     
     function injectStyles() {
@@ -137,329 +239,8 @@ function createWidgetJS(css, html, js) {
         document.head.appendChild(style);
     }
     
-    // Main widget class
+    // JavaScript from src/calculator.js (transformed for widget use)
-    class DogCalorieCalculatorWidget {
+    ${transformedJS}
-        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-calculator-hidden');
-                        } else {
-                            errorElement.classList.add('dog-calculator-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 = $('#dogCalculator');
-                    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';
-            }
-        }
-    }
     
     // Auto-initialize widgets on page load
     function initializeWidget() {
@@ -499,37 +280,55 @@ function createWidgetJS(css, html, js) {
  */
 function build() {
     try {
-        console.log('📖 Reading components from iframe.html (master source)...');
+        console.log('📖 Reading organized components from src/ directory...');
-        const { css, html, js } = parseIframeComponents();
+        const { css, html, js } = readSourceComponents();
+        console.log('   ✅ src/index.html (' + html.split('\n').length + ' lines)');
+        console.log('   ✅ src/css/main.css + themes.css (' + css.split('\n').length + ' lines)');
+        console.log('   ✅ src/js/config.js + calculator.js (' + js.split('\n').length + ' lines)');
         
+        console.log('');
         console.log('📦 Backing up existing files...');
         backupFiles();
         
-        console.log('🏗️ Generating sundog-dog-food-calculator.js...');
+        console.log('');
-        const widgetCode = createWidgetJS(css, html, js);
+        console.log('🏗️ Building output files...');
-        fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
+        
-        console.log('✅ Generated sundog-dog-food-calculator.js');
+        // Generate iframe.html
+        const iframeContent = generateIframe(css, html, js);
+        fs.writeFileSync('iframe.html', iframeContent);
+        console.log('   ✅ Generated iframe.html');
+        
+        // Embeddable widget generation removed (embedding no longer supported)
         
         console.log('');
         console.log('🎉 Build completed successfully!');
         console.log('');
         console.log('📋 Summary:');
-        console.log('   ✅ iframe.html - Master source (no changes needed)');
+        console.log('   Source structure:');
-        console.log('   ✅ sundog-dog-food-calculator.js - Generated with identical functionality');
+        console.log('   • src/index.html - HTML structure');
+        console.log('   • src/css/main.css - Core styles');
+        console.log('   • src/css/themes.css - Theme variations');
+        console.log('   • src/js/config.js - Configuration');
+        console.log('   • src/js/calculator.js - Main logic');
         console.log('');
-        console.log('🔄 Your new workflow:');
+        console.log('   Generated files:');
-        console.log('   1. Edit iframe.html for any changes (calculations, design, layout)');
+        console.log('   • iframe.html - Standalone calculator');
+        console.log('');
+        console.log('🔄 Your workflow:');
+        console.log('   1. Edit organized files in src/');
         console.log('   2. Run: node build.js');
-        console.log('   3. Both files now have the same functionality!');
+        console.log('   3. Output file is regenerated!');
         console.log('');
-        console.log('💡 No more maintaining two separate files!');
+        console.log('💡 Clean, organized structure - easy to maintain!');
         
     } catch (error) {
         console.error('❌ Build failed:', error.message);
+        console.error(error.stack);
         process.exit(1);
     }
 }
 
+// Run build if called directly
 if (require.main === module) {
     build();
 }

src/css/main.css

@@ -0,0 +1,555 @@
+        :root {
+            --bg-primary: #fdfcfe;
+            --bg-secondary: #ffffff;
+            --border-color: #e8e3ed;
+            --text-primary: #6f3f6d;
+            --text-secondary: #8f7a8e;
+            --accent-color: #f19a5f;
+            --text-label: #635870;      /* For form labels, secondary UI text */
+            --success-color: #7fa464;   /* Green for success states */
+            --bg-tertiary: #f8f5fa;     /* Light background variant */
+            --error-color: #e87159;     /* Error states and messages */
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            background: transparent;
+            overflow: hidden; /* hide internal scrollbars; parent resizes iframe */
+            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.5;
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container {
+            max-width: 640px;
+            margin: 0 auto;
+            padding: 24px;
+            box-sizing: border-box;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .dog-calculator-container.loaded {
+            opacity: 1;
+        }
+
+        .dog-calculator-container *,
+        .dog-calculator-container *::before,
+        .dog-calculator-container *::after {
+            box-sizing: border-box;
+        }
+
+        .dog-calculator-section {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px 8px 0 0;
+            padding: 24px;
+            margin-bottom: 0;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+
+        .dog-calculator-section h2 {
+            margin: 0;
+            color: var(--text-primary);
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        /* Unit Switch */
+        .dog-calculator-unit-switch {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .dog-calculator-unit-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-label);
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-unit-label.active {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .dog-calculator-switch {
+            position: relative;
+            display: inline-block;
+            width: 48px;
+            height: 24px;
+        }
+
+        .dog-calculator-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .dog-calculator-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--border-color);
+            transition: 0.3s;
+            border-radius: 24px;
+        }
+
+        .dog-calculator-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider {
+            background-color: #f19a5f;
+        }
+
+        .dog-calculator-switch input:checked + .dog-calculator-slider:before {
+            transform: translateX(24px);
+        }
+
+        .dog-calculator-form-group {
+            margin-bottom: 20px;
+        }
+
+        .dog-calculator-form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: var(--text-primary);
+            font-size: 1rem;
+        }
+
+        .dog-calculator-form-group select,
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            width: 100%;
+            padding: 12px 16px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 1rem;
+            font-family: inherit;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            transition: all 0.2s ease;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            background-size: 20px;
+            padding-right: 40px;
+        }
+
+        .dog-calculator-form-group select option {
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-form-group input[type="number"],
+        .dog-calculator-form-group input[type="text"] {
+            background-image: none;
+            padding-right: 16px;
+        }
+
+        .dog-calculator-form-group select:focus,
+        .dog-calculator-form-group input[type="number"]:focus,
+        .dog-calculator-form-group input[type="text"]:focus {
+            outline: none;
+            border-color: #f19a5f;
+            background-color: var(--bg-secondary);
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-form-group input[readonly] {
+            background-color: var(--bg-tertiary);
+            cursor: not-allowed;
+            color: var(--text-label);
+        }
+
+        .dog-calculator-results {
+            background: linear-gradient(135deg, rgba(241, 154, 95, 0.08) 0%, rgba(241, 154, 95, 0.04) 100%);
+            border: 1px solid rgba(241, 154, 95, 0.2);
+            border-radius: 6px;
+            padding: 20px;
+            margin-top: 24px;
+        }
+
+        .dog-calculator-result-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            gap: 10px;  /* Add gap between label and value */
+        }
+
+        .dog-calculator-result-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-result-label {
+            font-weight: 500;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-result-value {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            padding: 4px 12px;
+            background: rgba(241, 154, 95, 0.15);
+            border-radius: 4px;
+            white-space: nowrap;  /* Prevent text from wrapping to multiple lines */
+        }
+
+        .dog-calculator-collapsible {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-top: none;
+            margin-bottom: 0;
+            overflow: hidden;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-collapsible-header {
+            background: var(--bg-tertiary);
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .dog-calculator-collapsible-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+
+        .dog-calculator-collapsible-content {
+            display: block;
+        }
+
+        .dog-calculator-collapsible-inner {
+            padding: 24px;
+        }
+
+        .dog-calculator-input-group {
+            display: flex;
+            gap: 16px;
+            align-items: flex-end;
+        }
+
+        .dog-calculator-input-group .dog-calculator-form-group {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .dog-calculator-unit-select {
+            min-width: 120px;
+        }
+
+        .dog-calculator-error {
+            color: var(--error-color);
+            font-size: 0.875rem;
+            margin-top: 6px;
+            font-weight: 500;
+        }
+
+        .dog-calculator-hidden {
+            display: none;
+        }
+
+        /* Action Buttons */
+        .dog-calculator-action-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            padding: 20px;
+            background: var(--bg-tertiary);
+            border-left: 1px solid var(--border-color);
+            border-right: 1px solid var(--border-color);
+            margin-top: -1px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-btn {
+            padding: 8px 16px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            font-family: inherit;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: white;
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .dog-calculator-btn-share:hover {
+            border-color: #9f5999;
+            color: #9f5999;
+        }
+
+        /* Embed button removed */
+
+        .dog-calculator-footer {
+            text-align: center;
+            padding: 20px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 0 0 8px 8px;
+            border-top: none;
+            margin-top: -1px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .dog-calculator-footer a {
+            color: #9f5999;
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+
+        .dog-calculator-footer a:hover {
+            color: #f19a5f;
+            text-decoration: underline;
+        }
+
+        /* Mobile Responsive Design */
+        @media (max-width: 576px) {
+            .dog-calculator-container {
+                padding: 16px;
+            }
+
+            .dog-calculator-section,
+            .dog-calculator-collapsible-inner {
+                padding: 20px;
+            }
+
+            .dog-calculator-section h2,
+            .dog-calculator-collapsible-header h3 {
+                font-size: 1.3rem;
+            }
+
+            .dog-calculator-section-header {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+            }
+
+            .dog-calculator-section h2 {
+                text-align: center;
+            }
+
+            .dog-calculator-unit-switch {
+                justify-content: center;
+            }
+
+            .dog-calculator-action-buttons {
+                flex-direction: column;
+                padding: 16px;
+            }
+
+            .dog-calculator-btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .dog-calculator-input-group {
+                flex-direction: row;
+                gap: 12px;
+                align-items: flex-end;
+            }
+
+            .dog-calculator-input-group .dog-calculator-form-group {
+                margin-bottom: 0;
+            }
+
+            /* First form group takes 55%, second takes 40% with some flex */
+            .dog-calculator-input-group .dog-calculator-form-group:first-child {
+                flex: 0 0 55%;
+            }
+
+            .dog-calculator-input-group .dog-calculator-form-group:last-child {
+                flex: 1 1 40%;
+                min-width: 100px;
+            }
+
+            /* Make sure number inputs don't get too wide */
+            .dog-calculator-input-group input[type="number"] {
+                max-width: 100%;
+            }
+
+            /* Ensure dropdowns don't overflow their containers */
+            .dog-calculator-input-group select {
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+
+            .dog-calculator-result-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+
+            .dog-calculator-result-value {
+                align-self: stretch;
+                text-align: center;
+            }
+
+            .dog-calculator-collapsible-header {
+                padding: 16px 20px;
+            }
+        }
+
+        /* Feeding Configuration Styles */
+        .dog-calculator-container .dog-calculator-feeding-config {
+            margin-top: 20px;
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+
+        .dog-calculator-container .dog-calculator-frequency-row > label {
+            font-weight: 500;
+            color: var(--text-label);
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
+            cursor: pointer;
+            margin: 0;
+        }
+
+        .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
+            font-weight: 600;
+            color: var(--accent-color);
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin: 0 auto;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input span {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"] {
+            width: 50px;
+            padding: 4px 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 0.95rem;
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+            text-align: center;
+        }
+
+        .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
+        }
+
+        /* Update meal note styling */
+        .dog-calculator-container #mealNote {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: normal;
+            margin-left: 4px;
+        }
+
+        /* Mobile responsive adjustments for feeding config */
+        @media (max-width: 480px) {
+            .dog-calculator-meal-input {
+                margin-left: 0;
+                width: 100%;
+                margin-top: 8px;
+            }
+            
+            .dog-calculator-frequency-row {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            
+            /* Stack result items vertically on small screens */
+            .dog-calculator-result-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+            
+            .dog-calculator-result-label {
+                margin-right: 0;
+                font-size: 0.9rem;
+            }
+            
+            .dog-calculator-result-value {
+                font-size: 1rem;
+                align-self: stretch;
+                text-align: center;
+            }
+        }
+
+        /* Dark theme - manual override */

src/index.html

@@ -0,0 +1,182 @@
+    <div class="dog-calculator-container" id="dogCalculator">
+        <div class="dog-calculator-section">
+            <div class="dog-calculator-section-header">
+                <h2>Dog's Characteristics</h2>
+                <div class="dog-calculator-unit-switch">
+                    <span class="dog-calculator-unit-label active" id="metricLabel">Metric</span>
+                    <label class="dog-calculator-switch">
+                        <input type="checkbox" id="unitToggle">
+                        <span class="dog-calculator-slider"></span>
+                    </label>
+                    <span class="dog-calculator-unit-label" id="imperialLabel">Imperial</span>
+                </div>
+            </div>
+            
+            <div class="dog-calculator-form-group">
+                <label for="dogType">Dog Type / Activity Level:</label>
+                <select id="dogType" aria-describedby="dogTypeHelp">
+                    <option value="">Select dog type...</option>
+                    <option value="3.0">Puppy (0-4 months)</option>
+                    <option value="2.0">Puppy (4 months - adult)</option>
+                    <option value="1.2">Adult - inactive/obese</option>
+                    <option value="1.6">Adult (neutered/spayed) - average activity</option>
+                    <option value="1.8">Adult (intact) - average activity</option>
+                    <option value="1.0">Adult - weight loss</option>
+                    <option value="1.7">Adult - weight gain</option>
+                    <option value="2.0">Working dog - light work</option>
+                    <option value="3.0">Working dog - moderate work</option>
+                    <option value="5.0">Working dog - heavy work</option>
+                    <option value="1.1">Senior dog</option>
+                </select>
+            </div>
+
+            <div class="dog-calculator-form-group">
+                <label for="weight" id="weightLabel">Dog's Weight (kg):</label>
+                <input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter weight in kg" aria-describedby="weightHelp">
+                <div id="weightError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid weight (minimum 0.1 kg)</div>
+            </div>
+
+            <div class="dog-calculator-results" id="calorieResults" style="display: none;">
+                <div class="dog-calculator-result-item">
+                    <span class="dog-calculator-result-label">Resting Energy Requirement (RER):</span>
+                    <span class="dog-calculator-result-value" id="rerValue">- cal/day</span>
+                </div>
+                <div class="dog-calculator-result-item">
+                    <span class="dog-calculator-result-label">Maintenance Energy Requirement (MER):</span>
+                    <span class="dog-calculator-result-value" id="merValue">- cal/day</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="dog-calculator-collapsible active" id="foodCalculator">
+            <div class="dog-calculator-collapsible-header">
+                <h3>How much should I feed?</h3>
+            </div>
+            <div class="dog-calculator-collapsible-content">
+                <div class="dog-calculator-collapsible-inner">
+                    <!-- Food Sources Container -->
+                    <div class="dog-calculator-food-sources" id="foodSources">
+                        <!-- Initial food source will be added by JavaScript -->
+                    </div>
+
+                    <!-- Add Food Source Button -->
+                    <button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button">
+                        <span>+</span>
+                        <span>Add another food source</span>
+                    </button>
+
+                    <!-- Feeding Configuration -->
+                    <div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
+                        <div class="dog-calculator-frequency-row">
+                            <label>Show amounts:</label>
+                            <div class="dog-calculator-radio-group">
+                                <label>
+                                    <input type="radio" name="showAs" value="daily" id="showDaily" checked>
+                                    <span>Per day</span>
+                                </label>
+                                <label>
+                                    <input type="radio" name="showAs" value="meal" id="showPerMeal">
+                                    <span>Per meal</span>
+                                </label>
+                            </div>
+                            <div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
+                                <span>×</span>
+                                <input type="number" id="mealsPerDay" value="2" min="1" max="10">
+                                <span>meals/day</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Per-Food Results -->
+                    <div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
+                        <div id="foodBreakdownList">
+                            <!-- Individual food breakdowns will be populated by JavaScript -->
+                        </div>
+                    </div>
+
+                    <!-- Unit Selection Buttons -->
+                    <div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;">
+                        <button type="button" class="dog-calculator-unit-btn active" data-unit="g">g</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
+                    </div>
+
+                    <!-- Daily Total Results -->
+                    <div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
+                        <div class="dog-calculator-result-item">
+                            <span class="dog-calculator-result-label">Total Daily Amount:</span>
+                            <span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
+                        </div>
+                    </div>
+
+                    <!-- Hidden select for compatibility -->
+                    <select id="unit" class="dog-calculator-unit-select-hidden" aria-describedby="unitHelp">
+                        <option value="g">grams (g)</option>
+                        <option value="kg">kilograms (kg)</option>
+                        <option value="oz">ounces (oz)</option>
+                        <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
+                    </select>
+
+                    <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
+                        <h4 class="dog-calculator-section-title">
+                            Calculate amounts for 
+                            <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> 
+                            <span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
+                        </h4>
+                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
+                        <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
+                            <!-- Individual food amounts will be populated here -->
+                        </div>
+                        <div class="dog-calculator-total-row" id="totalAmountRow">
+                            <span class="dog-calculator-total-label">Total Amount:</span>
+                            <span class="dog-calculator-total-value" id="totalAmountDisplay"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="dog-calculator-action-buttons">
+            <button class="dog-calculator-btn dog-calculator-btn-share" id="shareBtn">
+                Share
+            </button>
+        </div>
+
+        <div class="dog-calculator-footer">
+            <a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
+                by caninenutritionandwellness.com
+            </a>
+        </div>
+        <!-- Share Modal -->
+        <div id="shareModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content">
+                <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
+                <h3>Share Calculator</h3>
+                <div class="dog-calculator-share-buttons">
+                    <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
+                        Facebook
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
+                        Twitter
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
+                        LinkedIn
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
+                        Email
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
+                        Copy Link
+                    </button>
+                </div>
+                <div class="dog-calculator-share-url">
+                    <input type="text" id="shareUrl" readonly>
+                </div>
+            </div>
+        </div>
+
+        
+    </div>

src/js/config.js

@@ -0,0 +1,11 @@
+/**
+ * Configuration constants for Dog Calorie Calculator
+ */
+
+const CALCULATOR_CONFIG = {
+    defaultTheme: 'system',
+    defaultScale: 1.0,
+    maxFoodSources: 5,
+    minScale: 0.5,
+    maxScale: 2.0
+};

test-widget.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Widget Test</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            padding: 20px;
-            background: #f5f5f5;
-        }
-        .test-container {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 20px 0;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-    </style>
-</head>
-<body>
-    <h1>Dog Calculator Widget Test</h1>
-    
-    <div class="test-container">
-        <h2>Test 1: Basic Widget</h2>
-        <div id="dog-calorie-calculator"></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>
-    
-    <script src="sundog-dog-food-calculator.js"></script>
-</body>
-</html>