Scale option

dog-food-calculator-widget.js

@@ -7,12 +7,12 @@
  * <script src="https://embedcaninenutritionandwellness.com/dog-calorie-calculator/dog-food-calculator-widget.js"></script>
  * <div id="dog-calorie-calculator"></div>
  * 
- * Advanced Usage with theme option:
+ * Advanced Usage with theme and scale options:
  * <script src="https://embed/caninenutritionandwellness.com/dog-calorie-calculator/dog-food-calculator-widget.js"></script>
- * <div id="dog-calorie-calculator" data-theme="dark"></div>
+ * <div id="dog-calorie-calculator" data-theme="dark" data-scale="0.8"></div>
  * 
  * Or with JavaScript:
- * new DogCalorieCalculatorWidget(container, { theme: 'light' }); // 'light', 'dark', 'system'
+ * new DogCalorieCalculatorWidget(container, { theme: 'light', scale: 1.2 }); // theme: 'light', 'dark', 'system' | scale: 0.5-2.0
  */
 
 (function() {
@@ -1111,6 +1111,7 @@
             this.currentMER = 0;
             this.isImperial = false;
             this.theme = options.theme || 'system'; // 'light', 'dark', 'system'
+            this.scale = options.scale || 1.0; // 0.5 to 2.0
             this.init();
         }
 
@@ -1118,6 +1119,7 @@
             this.injectStyles();
             this.injectHTML();
             this.applyTheme();
+            this.applyScale();
             this.bindEvents();
             this.updateUnitLabels();
         }
@@ -1182,6 +1184,23 @@
             }
         }
 
+        applyScale() {
+            const widget = this.container.querySelector('.dog-calc-widget');
+            if (!widget) return;
+
+            // Clamp scale between 0.5 and 2.0 for usability
+            const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
+            
+            if (clampedScale !== 1.0) {
+                widget.style.transform = `scale(${clampedScale})`;
+                widget.style.transformOrigin = 'top center';
+                
+                // Adjust container to account for scaling
+                const actualHeight = widget.offsetHeight * clampedScale;
+                widget.style.marginBottom = `${(clampedScale - 1) * widget.offsetHeight}px`;
+            }
+        }
+
         bindEvents() {
             const weightInput = this.container.querySelector('#weight');
             const dogTypeSelect = this.container.querySelector('#dogType');
@@ -1675,7 +1694,8 @@
         containers.forEach(container => {
             if (!container.dataset.initialized) {
                 const theme = container.dataset.theme || 'system';
-                new DogCalorieCalculatorWidget(container, { theme });
+                const scale = parseFloat(container.dataset.scale) || 1.0;
+                new DogCalorieCalculatorWidget(container, { theme, scale });
                 container.dataset.initialized = 'true';
             }
         });

iframe.html

@@ -1094,11 +1094,13 @@
                 this.currentMER = 0;
                 this.isImperial = false;
                 this.theme = this.getThemeFromURL() || 'system';
+                this.scale = this.getScaleFromURL() || 1.0;
                 this.init();
             }
 
             init() {
                 this.applyTheme();
+                this.applyScale();
                 this.bindEvents();
                 this.updateUnitLabels();
                 this.setupIframeResize();
@@ -1114,12 +1116,38 @@
                 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 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;
+
+                // Clamp scale between 0.5 and 2.0 for usability
+                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';
+                    
+                    // Adjust container to account for scaling
+                    setTimeout(() => {
+                        const actualHeight = container.offsetHeight * clampedScale;
+                        container.style.marginBottom = `${(clampedScale - 1) * container.offsetHeight}px`;
+                        this.sendHeightToParent();
+                    }, 100);
+                }
+            }
+
             bindEvents() {
                 const weightInput = document.getElementById('weight');
                 const dogTypeSelect = document.getElementById('dogType');