Remove embedding and js widget

README.md

@@ -1,6 +1,6 @@
 # 🐕 Sundog Dog Food Calorie Calculator
 
-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.
+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)**
 
@@ -28,10 +28,9 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
 - **Lock Indicators**: Visual indicators showing which percentages are locked
 
 ### User Experience
-- **Scalable Widget**: Easily resize from 50% to 200% with data attributes
+- **Scalable UI**: Resize from 50% to 200% via query params
 - **Theme Support**: Light, dark, and system themes
 - **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
@@ -39,36 +38,16 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
 - **Professional Design**: Clean, veterinary-grade interface
 - **Brand Protection**: Complete iframe isolation option
 
-## 🚀 Quick Start
+## 🚀 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>
 ```
 
@@ -134,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%)
@@ -146,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
@@ -175,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
 ```
 
@@ -217,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
 
@@ -353,7 +285,6 @@ This calculator is provided for educational and professional use. The formulas a
 ## 🔗 Links
 
 - **Website**: [caninenutritionandwellness.com](https://caninenutritionandwellness.com)
-- **Widget Demo**: Open `test-widget.html` in your browser
 - **Standalone**: Open `iframe.html` in your browser
 
 ---

build.js

@@ -3,8 +3,8 @@
 /**
  * Dog Calculator Build System - ORGANIZED VERSION
  * 
- * This build script generates iframe.html and sundog-dog-food-calculator.js
+ * This build script generates iframe.html from organized source files
- * from organized source files in the src/ directory.
+ * in the src/ directory.
  * 
  * Source structure:
  * - src/index.html - HTML template
@@ -15,7 +15,6 @@
  * 
  * Output files:
  * - iframe.html - Standalone calculator page
- * - sundog-dog-food-calculator.js - Embeddable widget
  * 
  * Usage: node build.js
  */
@@ -85,7 +84,7 @@ function backupFiles() {
     }
     
     const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-    const filesToBackup = ['iframe.html', 'sundog-dog-food-calculator.js'];
+    const filesToBackup = ['iframe.html'];
     
     filesToBackup.forEach(file => {
         if (fs.existsSync(file)) {
@@ -299,10 +298,7 @@ function build() {
         fs.writeFileSync('iframe.html', iframeContent);
         console.log('   ✅ Generated iframe.html');
         
-        // Generate widget
+        // Embeddable widget generation removed (embedding no longer supported)
-        const widgetCode = createWidgetJS(css, html, js);
-        fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
-        console.log('   ✅ Generated sundog-dog-food-calculator.js');
         
         console.log('');
         console.log('🎉 Build completed successfully!');
@@ -317,12 +313,11 @@ function build() {
         console.log('');
         console.log('   Generated files:');
         console.log('   • iframe.html - Standalone calculator');
-        console.log('   • sundog-dog-food-calculator.js - Embeddable widget');
         console.log('');
         console.log('🔄 Your workflow:');
         console.log('   1. Edit organized files in src/');
         console.log('   2. Run: node build.js');
-        console.log('   3. Both output files are regenerated!');
+        console.log('   3. Output file is regenerated!');
         console.log('');
         console.log('💡 Clean, organized structure - easy to maintain!');
         

iframe.html

@@ -25,7 +25,7 @@
             margin: 0;
             padding: 0;
             background: transparent;
-            overflow-x: hidden;
+            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);
@@ -331,10 +331,7 @@
             color: #9f5999;
         }
 
-        .dog-calculator-btn-embed:hover {
+        /* Embed button removed */
-            border-color: var(--success-color);
-            color: var(--success-color);
-        }
 
         .dog-calculator-footer {
             text-align: center;
@@ -729,10 +726,7 @@
             color: #f19a5f;
         }
 
-        .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
+        /* Embed button removed */
-            border-color: var(--success-color);
-            color: var(--success-color);
-        }
 
         /* Dark theme feeding configuration styles */
         .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
@@ -935,10 +929,7 @@
                 color: #f19a5f;
             }
 
-            .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
+            /* Embed button removed */
-                border-color: var(--success-color);
-                color: var(--success-color);
-            }
 
             /* System theme feeding configuration styles in dark mode */
             .dog-calculator-container.theme-system .dog-calculator-feeding-config {
@@ -980,13 +971,18 @@
 
         /* Modal Styles */
         .dog-calculator-modal {
-            display: none;
+            display: none; /* set to flex via JS when opened */
             position: fixed;
             z-index: 10000;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            overflow: auto; /* allow modal content scroll if needed */
+            align-items: center;
+            justify-content: center;
             animation: fadeIn 0.3s ease;
         }
 
@@ -998,19 +994,19 @@
         .dog-calculator-modal-content {
             position: relative;
             background-color: var(--bg-secondary);
-            margin: 5% auto;
+            margin: 0;
             padding: 30px;
             border: 1px solid var(--border-color);
             border-radius: 12px;
             width: 90%;
             max-width: 500px;
+            max-height: 90vh; /* ensure it fits viewport */
+            overflow: auto;
             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
             animation: slideIn 0.3s ease;
         }
 
-        .dog-calculator-modal-embed {
+        /* Embed modal removed */
-            max-width: 700px;
-        }
 
         @keyframes slideIn {
             from { 
@@ -1096,74 +1092,7 @@
             color: var(--text-primary);
         }
 
-        /* Embed Modal */
+        /* Embed UI removed */
-        .dog-calculator-embed-options {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-
-        .dog-calculator-embed-option {
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 20px;
-            background: #fcfafd;
-        }
-
-        .dog-calculator-embed-option h4 {
-            margin: 0 0 8px 0;
-            color: var(--text-primary);
-            font-size: 1.1rem;
-        }
-
-        .dog-calculator-embed-option p {
-            margin: 0 0 16px 0;
-            color: var(--text-label);
-            font-size: 0.9rem;
-        }
-
-        /* Default (light theme) code containers */
-        .dog-calculator-code-container {
-            position: relative;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            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: var(--text-primary);
-            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: var(--success-color); }
-        .dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
 
         /* Dark theme modal styles */
         .dog-calculator-container.theme-dark .dog-calculator-modal-content {
@@ -1189,28 +1118,7 @@
             color: var(--text-primary);
         }
 
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option {
+        /* Embed UI removed for dark theme */
-            background: var(--bg-secondary);
-            border-color: var(--border-color);
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
-            color: var(--text-primary);
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option p {
-            color: var(--text-secondary)
-        }
-
-        /* 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: var(--text-primary);
-        }
 
         /* System theme modal styles */
         @media (prefers-color-scheme: dark) {
@@ -1237,28 +1145,7 @@
                 color: var(--text-primary);
             }
 
-            .dog-calculator-container.theme-system .dog-calculator-embed-option {
+            /* Embed UI removed for system theme */
-                background: var(--bg-secondary);
-                border-color: var(--border-color);
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
-                color: var(--text-primary);
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option p {
-                color: var(--text-secondary)
-            }
-
-            /* 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: var(--text-primary);
-            }
         }
 
         /* Multi-Food Source Styles */
@@ -2219,9 +2106,6 @@
             <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">
@@ -2257,35 +2141,7 @@
             </div>
         </div>
 
-        <!-- Embed Modal -->
-        <div id="embedModal" class="dog-calculator-modal" style="display: none;">
-            <div class="dog-calculator-modal-content dog-calculator-modal-embed">
-                <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
-                <h3>⚡ Embed the Calculator</h3>
         
-                <div class="dog-calculator-embed-options">
-                    <div class="dog-calculator-embed-option">
-                        <h4>⚡ JavaScript Widget</h4>
-                        <div class="dog-calculator-code-container">
-                            <pre><code id="widgetCode"></code></pre>
-                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
-                                Copy
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="dog-calculator-embed-option">
-                        <h4>🛡️ iframe Embed</h4>
-                        <div class="dog-calculator-code-container">
-                            <pre><code id="iframeCode"></code></pre>
-                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
-                                Copy
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
     <script>
         /**
@@ -2362,10 +2218,8 @@ const CALCULATOR_CONFIG = {
                     container.style.transform = `scale(${clampedScale})`;
                     container.style.transformOrigin = 'top center';
                     
-                    // Adjust container to account for scaling
+                    // Recalculate height for parent without adding artificial margins
                     setTimeout(() => {
-                        const actualHeight = container.offsetHeight * clampedScale;
-                        container.style.marginBottom = `${(clampedScale - 1) * container.offsetHeight}px`;
                         this.sendHeightToParent();
                     }, 100);
                 }
@@ -3201,14 +3055,10 @@ const CALCULATOR_CONFIG = {
 
                 // Modal event listeners
                 const shareBtn = document.getElementById('shareBtn');
-                const embedBtn = document.getElementById('embedBtn');
                 const shareModalClose = document.getElementById('shareModalClose');
-                const embedModalClose = document.getElementById('embedModalClose');
 
                 if (shareBtn) shareBtn.addEventListener('click', () => this.showShareModal());
-                if (embedBtn) embedBtn.addEventListener('click', () => this.showEmbedModal());
                 if (shareModalClose) shareModalClose.addEventListener('click', () => this.hideShareModal());
-                if (embedModalClose) embedModalClose.addEventListener('click', () => this.hideEmbedModal());
 
                 // Share buttons
                 const shareFacebook = document.getElementById('shareFacebook');
@@ -3223,16 +3073,10 @@ const CALCULATOR_CONFIG = {
                 if (shareEmail) shareEmail.addEventListener('click', () => this.shareViaEmail());
                 if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
 
-                // Copy buttons
+                // Embed copy buttons removed (embedding disabled)
-                const copyWidget = document.getElementById('copyWidget');
-                const copyIframe = document.getElementById('copyIframe');
-
-                if (copyWidget) copyWidget.addEventListener('click', () => this.copyEmbedCode('widget'));
-                if (copyIframe) copyIframe.addEventListener('click', () => this.copyEmbedCode('iframe'));
 
                 // Close modals on outside click
                 const shareModal = document.getElementById('shareModal');
-                const embedModal = document.getElementById('embedModal');
 
                 if (shareModal) {
                     shareModal.addEventListener('click', (e) => {
@@ -3240,11 +3084,7 @@ const CALCULATOR_CONFIG = {
                     });
                 }
 
-                if (embedModal) {
+                // Embed modal removed
-                    embedModal.addEventListener('click', (e) => {
-                        if (e.target === embedModal) this.hideEmbedModal();
-                    });
-                }
             }
 
             toggleUnits() {
@@ -3525,7 +3365,6 @@ const CALCULATOR_CONFIG = {
                 calorieResults.style.display = 'block';
                 
                 this.updateFoodCalculations();
-                this.sendHeightToParent();
             }
 
             updateCupsButtonState() {
@@ -3990,7 +3829,6 @@ const CALCULATOR_CONFIG = {
                 }
                 
                         foodAmountsSection.style.display = 'block';
-                
                         this.sendHeightToParent();
             }
 
@@ -4017,13 +3855,18 @@ const CALCULATOR_CONFIG = {
                 }
             }
 
+            // Iframe auto-resize for allowed embeddings
             setupIframeResize() {
-                // Send height to parent window for iframe auto-resize
+                // Only when embedded in an iframe
-                this.sendHeightToParent();
+                if (window.top === window.self) return;
                 
-                // Monitor for content changes that might affect height
+                // Initial send once UI is ready
+                setTimeout(() => this.sendHeightToParent(), 50);
+                
+                // Monitor for content/attribute changes
                 const observer = new MutationObserver(() => {
-                    setTimeout(() => this.sendHeightToParent(), 100);
+                    clearTimeout(this._resizeTimer);
+                    this._resizeTimer = setTimeout(() => this.sendHeightToParent(), 100);
                 });
                 
                 observer.observe(document.body, {
@@ -4032,19 +3875,26 @@ const CALCULATOR_CONFIG = {
                     attributes: true
                 });
                 
-                // Send height on window resize
+                // On viewport resize
                 window.addEventListener('resize', () => this.sendHeightToParent());
             }
 
             sendHeightToParent() {
-                const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+                if (!(window.parent && window.parent !== window)) return;
-                if (window.parent && window.parent !== window) {
+                const container = document.getElementById('dogCalculator');
+                // Prefer visual height including transform scaling
+                let height = 0;
+                if (container) {
+                    const rect = container.getBoundingClientRect();
+                    height = Math.ceil(rect.height);
+                } else {
+                    height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+                }
                 window.parent.postMessage({
                     type: 'dogCalculatorResize',
                     height: height
                 }, '*');
             }
-            }
 
             // Modal functionality
             showShareModal() {
@@ -4052,50 +3902,25 @@ const CALCULATOR_CONFIG = {
                 const shareUrl = document.getElementById('shareUrl');
                 if (modal && shareUrl) {
                     shareUrl.value = window.location.href;
-                    modal.style.display = 'block';
+                    // Use flex so content is centered within modal viewport
+                    modal.style.display = 'flex';
+                    // Sync modal scroll position with current page scroll so content is visible
+                    try { modal.scrollTop = window.scrollY || document.documentElement.scrollTop || 0; } catch (e) {}
+                    // Ensure the modal is visible even when the page is scrolled
+                    // by recalculating parent iframe height (defensive)
+                    this.sendHeightToParent();
                 }
             }
 
             hideShareModal() {
                 const modal = document.getElementById('shareModal');
                 if (modal) modal.style.display = 'none';
+                this.sendHeightToParent();
             }
 
-            showEmbedModal() {
+            // Embed modal removed (embedding disabled)
-                const modal = document.getElementById('embedModal');
-                const widgetCode = document.getElementById('widgetCode');
-                const iframeCode = document.getElementById('iframeCode');
 
-                if (modal && widgetCode && iframeCode) {
+            // Embed modal removed (embedding disabled)
-                    // Build embed URL
-                    const baseUrl = window.location.protocol + '//embed.' + window.location.hostname;
-                    
-                    // Create widget code using createElement to avoid quote issues
-                    const scriptTag = document.createElement('script');
-                    scriptTag.src = baseUrl + '/dog-calorie-calculator/dog-food-calculator-widget.js';
-                    const divTag = document.createElement('div');
-                    divTag.id = 'dog-calorie-calculator';
-                    
-                    const widgetHtml = scriptTag.outerHTML + '\n' + divTag.outerHTML;
-                    widgetCode.textContent = widgetHtml;
-                    
-                    // Create iframe code using createElement
-                    const iframe = document.createElement('iframe');
-                    iframe.src = baseUrl + '/dog-calorie-calculator/iframe.html';
-                    iframe.width = '100%';
-                    iframe.height = '600';
-                    iframe.frameBorder = '0';
-                    iframe.title = 'Dog Calorie Calculator';
-                    
-                    iframeCode.textContent = iframe.outerHTML;
-                    modal.style.display = 'block';
-                }
-            }
-
-            hideEmbedModal() {
-                const modal = document.getElementById('embedModal');
-                if (modal) modal.style.display = 'none';
-            }
 
             shareToFacebook() {
                 const url = encodeURIComponent(window.location.href);
@@ -4142,31 +3967,41 @@ const CALCULATOR_CONFIG = {
                 }
             }
 
-            async copyEmbedCode(type) {
+            // Embed code copy removed (embedding disabled)
-                const codeElement = document.getElementById(type === 'widget' ? 'widgetCode' : 'iframeCode');
-                const copyBtn = document.getElementById(type === 'widget' ? 'copyWidget' : 'copyIframe');
-                
-                if (codeElement && copyBtn) {
-                    try {
-                        await navigator.clipboard.writeText(codeElement.textContent);
-                        const originalText = copyBtn.textContent;
-                        copyBtn.textContent = 'Copied!';
-                        copyBtn.classList.add('copied');
-                        
-                        setTimeout(() => {
-                            copyBtn.textContent = originalText;
-                            copyBtn.classList.remove('copied');
-                        }, 2000);
-                    } catch (err) {
-                        // Fallback for older browsers
-                        console.log('Copy fallback needed');
-                    }
-                }
-            }
         }
 
         // Initialize calculator when DOM is ready
         document.addEventListener('DOMContentLoaded', function() {
+            // Allow embedding only from approved parent hosts
+            if (window.top !== window.self) {
+                const allowedHosts = ['caninenutritionandwellness.com', 'www.caninenutritionandwellness.com'];
+                let parentAllowed = false;
+
+                // Prefer document.referrer when available
+                try {
+                    if (document.referrer) {
+                        const r = new URL(document.referrer);
+                        parentAllowed = allowedHosts.includes(r.hostname);
+                    }
+                } catch (e) {}
+
+                // Fallback: Chrome's ancestorOrigins (may be empty or absent)
+                if (!parentAllowed && window.location.ancestorOrigins && window.location.ancestorOrigins.length) {
+                    parentAllowed = Array.from(window.location.ancestorOrigins).some((originStr) => {
+                        try {
+                            const o = new URL(originStr);
+                            return allowedHosts.includes(o.hostname);
+                        } catch (e) {
+                            return false;
+                        }
+                    });
+                }
+
+                if (!parentAllowed) {
+                    document.body.innerHTML = '<div style="max-width:720px;margin:40px auto;padding:16px;border:1px solid #ddd;border-radius:8px;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#333;line-height:1.5;text-align:center;">Embedding of this calculator is only allowed on caninenutritionandwellness.com.</div>';
+                    return;
+                }
+            }
             new DogCalorieCalculator();
         });
     </script>

src/css/main.css

@@ -15,7 +15,7 @@
             margin: 0;
             padding: 0;
             background: transparent;
-            overflow-x: hidden;
+            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);
@@ -321,10 +321,7 @@
             color: #9f5999;
         }
 
-        .dog-calculator-btn-embed:hover {
+        /* Embed button removed */
-            border-color: var(--success-color);
-            color: var(--success-color);
-        }
 
         .dog-calculator-footer {
             text-align: center;

src/css/themes.css

@@ -160,10 +160,7 @@
             color: #f19a5f;
         }
 
-        .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
+        /* Embed button removed */
-            border-color: var(--success-color);
-            color: var(--success-color);
-        }
 
         /* Dark theme feeding configuration styles */
         .dog-calculator-container.theme-dark .dog-calculator-feeding-config {
@@ -366,10 +363,7 @@
                 color: #f19a5f;
             }
 
-            .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
+            /* Embed button removed */
-                border-color: var(--success-color);
-                color: var(--success-color);
-            }
 
             /* System theme feeding configuration styles in dark mode */
             .dog-calculator-container.theme-system .dog-calculator-feeding-config {
@@ -411,13 +405,18 @@
 
         /* Modal Styles */
         .dog-calculator-modal {
-            display: none;
+            display: none; /* set to flex via JS when opened */
             position: fixed;
             z-index: 10000;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            overflow: auto; /* allow modal content scroll if needed */
+            align-items: center;
+            justify-content: center;
             animation: fadeIn 0.3s ease;
         }
 
@@ -429,19 +428,19 @@
         .dog-calculator-modal-content {
             position: relative;
             background-color: var(--bg-secondary);
-            margin: 5% auto;
+            margin: 0;
             padding: 30px;
             border: 1px solid var(--border-color);
             border-radius: 12px;
             width: 90%;
             max-width: 500px;
+            max-height: 90vh; /* ensure it fits viewport */
+            overflow: auto;
             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
             animation: slideIn 0.3s ease;
         }
 
-        .dog-calculator-modal-embed {
+        /* Embed modal removed */
-            max-width: 700px;
-        }
 
         @keyframes slideIn {
             from { 
@@ -527,74 +526,7 @@
             color: var(--text-primary);
         }
 
-        /* Embed Modal */
+        /* Embed UI removed */
-        .dog-calculator-embed-options {
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-
-        .dog-calculator-embed-option {
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 20px;
-            background: #fcfafd;
-        }
-
-        .dog-calculator-embed-option h4 {
-            margin: 0 0 8px 0;
-            color: var(--text-primary);
-            font-size: 1.1rem;
-        }
-
-        .dog-calculator-embed-option p {
-            margin: 0 0 16px 0;
-            color: var(--text-label);
-            font-size: 0.9rem;
-        }
-
-        /* Default (light theme) code containers */
-        .dog-calculator-code-container {
-            position: relative;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            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: var(--text-primary);
-            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: var(--success-color); }
-        .dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
 
         /* Dark theme modal styles */
         .dog-calculator-container.theme-dark .dog-calculator-modal-content {
@@ -620,28 +552,7 @@
             color: var(--text-primary);
         }
 
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option {
+        /* Embed UI removed for dark theme */
-            background: var(--bg-secondary);
-            border-color: var(--border-color);
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
-            color: var(--text-primary);
-        }
-
-        .dog-calculator-container.theme-dark .dog-calculator-embed-option p {
-            color: var(--text-secondary)
-        }
-
-        /* 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: var(--text-primary);
-        }
 
         /* System theme modal styles */
         @media (prefers-color-scheme: dark) {
@@ -668,28 +579,7 @@
                 color: var(--text-primary);
             }
 
-            .dog-calculator-container.theme-system .dog-calculator-embed-option {
+            /* Embed UI removed for system theme */
-                background: var(--bg-secondary);
-                border-color: var(--border-color);
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
-                color: var(--text-primary);
-            }
-
-            .dog-calculator-container.theme-system .dog-calculator-embed-option p {
-                color: var(--text-secondary)
-            }
-
-            /* 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: var(--text-primary);
-            }
         }
 
         /* Multi-Food Source Styles */

src/index.html

@@ -143,9 +143,6 @@
             <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">
@@ -181,33 +178,5 @@
             </div>
         </div>
 
-        <!-- Embed Modal -->
-        <div id="embedModal" class="dog-calculator-modal" style="display: none;">
-            <div class="dog-calculator-modal-content dog-calculator-modal-embed">
-                <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
-                <h3>⚡ Embed the Calculator</h3>
         
-                <div class="dog-calculator-embed-options">
-                    <div class="dog-calculator-embed-option">
-                        <h4>⚡ JavaScript Widget</h4>
-                        <div class="dog-calculator-code-container">
-                            <pre><code id="widgetCode"></code></pre>
-                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
-                                Copy
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="dog-calculator-embed-option">
-                        <h4>🛡️ iframe Embed</h4>
-                        <div class="dog-calculator-code-container">
-                            <pre><code id="iframeCode"></code></pre>
-                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
-                                Copy
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>

src/js/calculator.js

@@ -60,10 +60,8 @@
                     container.style.transform = `scale(${clampedScale})`;
                     container.style.transformOrigin = 'top center';
                     
-                    // Adjust container to account for scaling
+                    // Recalculate height for parent without adding artificial margins
                     setTimeout(() => {
-                        const actualHeight = container.offsetHeight * clampedScale;
-                        container.style.marginBottom = `${(clampedScale - 1) * container.offsetHeight}px`;
                         this.sendHeightToParent();
                     }, 100);
                 }
@@ -899,14 +897,10 @@
 
                 // Modal event listeners
                 const shareBtn = document.getElementById('shareBtn');
-                const embedBtn = document.getElementById('embedBtn');
                 const shareModalClose = document.getElementById('shareModalClose');
-                const embedModalClose = document.getElementById('embedModalClose');
 
                 if (shareBtn) shareBtn.addEventListener('click', () => this.showShareModal());
-                if (embedBtn) embedBtn.addEventListener('click', () => this.showEmbedModal());
                 if (shareModalClose) shareModalClose.addEventListener('click', () => this.hideShareModal());
-                if (embedModalClose) embedModalClose.addEventListener('click', () => this.hideEmbedModal());
 
                 // Share buttons
                 const shareFacebook = document.getElementById('shareFacebook');
@@ -921,16 +915,10 @@
                 if (shareEmail) shareEmail.addEventListener('click', () => this.shareViaEmail());
                 if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
 
-                // Copy buttons
+                // Embed copy buttons removed (embedding disabled)
-                const copyWidget = document.getElementById('copyWidget');
-                const copyIframe = document.getElementById('copyIframe');
-
-                if (copyWidget) copyWidget.addEventListener('click', () => this.copyEmbedCode('widget'));
-                if (copyIframe) copyIframe.addEventListener('click', () => this.copyEmbedCode('iframe'));
 
                 // Close modals on outside click
                 const shareModal = document.getElementById('shareModal');
-                const embedModal = document.getElementById('embedModal');
 
                 if (shareModal) {
                     shareModal.addEventListener('click', (e) => {
@@ -938,11 +926,7 @@
                     });
                 }
 
-                if (embedModal) {
+                // Embed modal removed
-                    embedModal.addEventListener('click', (e) => {
-                        if (e.target === embedModal) this.hideEmbedModal();
-                    });
-                }
             }
 
             toggleUnits() {
@@ -1223,7 +1207,6 @@
                 calorieResults.style.display = 'block';
                 
                 this.updateFoodCalculations();
-                this.sendHeightToParent();
             }
 
             updateCupsButtonState() {
@@ -1688,7 +1671,6 @@
                 }
                 
                         foodAmountsSection.style.display = 'block';
-                
                         this.sendHeightToParent();
             }
 
@@ -1715,13 +1697,18 @@
                 }
             }
 
+            // Iframe auto-resize for allowed embeddings
             setupIframeResize() {
-                // Send height to parent window for iframe auto-resize
+                // Only when embedded in an iframe
-                this.sendHeightToParent();
+                if (window.top === window.self) return;
                 
-                // Monitor for content changes that might affect height
+                // Initial send once UI is ready
+                setTimeout(() => this.sendHeightToParent(), 50);
+                
+                // Monitor for content/attribute changes
                 const observer = new MutationObserver(() => {
-                    setTimeout(() => this.sendHeightToParent(), 100);
+                    clearTimeout(this._resizeTimer);
+                    this._resizeTimer = setTimeout(() => this.sendHeightToParent(), 100);
                 });
                 
                 observer.observe(document.body, {
@@ -1730,19 +1717,26 @@
                     attributes: true
                 });
                 
-                // Send height on window resize
+                // On viewport resize
                 window.addEventListener('resize', () => this.sendHeightToParent());
             }
 
             sendHeightToParent() {
-                const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+                if (!(window.parent && window.parent !== window)) return;
-                if (window.parent && window.parent !== window) {
+                const container = document.getElementById('dogCalculator');
+                // Prefer visual height including transform scaling
+                let height = 0;
+                if (container) {
+                    const rect = container.getBoundingClientRect();
+                    height = Math.ceil(rect.height);
+                } else {
+                    height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+                }
                 window.parent.postMessage({
                     type: 'dogCalculatorResize',
                     height: height
                 }, '*');
             }
-            }
 
             // Modal functionality
             showShareModal() {
@@ -1750,50 +1744,25 @@
                 const shareUrl = document.getElementById('shareUrl');
                 if (modal && shareUrl) {
                     shareUrl.value = window.location.href;
-                    modal.style.display = 'block';
+                    // Use flex so content is centered within modal viewport
+                    modal.style.display = 'flex';
+                    // Sync modal scroll position with current page scroll so content is visible
+                    try { modal.scrollTop = window.scrollY || document.documentElement.scrollTop || 0; } catch (e) {}
+                    // Ensure the modal is visible even when the page is scrolled
+                    // by recalculating parent iframe height (defensive)
+                    this.sendHeightToParent();
                 }
             }
 
             hideShareModal() {
                 const modal = document.getElementById('shareModal');
                 if (modal) modal.style.display = 'none';
+                this.sendHeightToParent();
             }
 
-            showEmbedModal() {
+            // Embed modal removed (embedding disabled)
-                const modal = document.getElementById('embedModal');
-                const widgetCode = document.getElementById('widgetCode');
-                const iframeCode = document.getElementById('iframeCode');
 
-                if (modal && widgetCode && iframeCode) {
+            // Embed modal removed (embedding disabled)
-                    // Build embed URL
-                    const baseUrl = window.location.protocol + '//embed.' + window.location.hostname;
-                    
-                    // Create widget code using createElement to avoid quote issues
-                    const scriptTag = document.createElement('script');
-                    scriptTag.src = baseUrl + '/dog-calorie-calculator/dog-food-calculator-widget.js';
-                    const divTag = document.createElement('div');
-                    divTag.id = 'dog-calorie-calculator';
-                    
-                    const widgetHtml = scriptTag.outerHTML + '\n' + divTag.outerHTML;
-                    widgetCode.textContent = widgetHtml;
-                    
-                    // Create iframe code using createElement
-                    const iframe = document.createElement('iframe');
-                    iframe.src = baseUrl + '/dog-calorie-calculator/iframe.html';
-                    iframe.width = '100%';
-                    iframe.height = '600';
-                    iframe.frameBorder = '0';
-                    iframe.title = 'Dog Calorie Calculator';
-                    
-                    iframeCode.textContent = iframe.outerHTML;
-                    modal.style.display = 'block';
-                }
-            }
-
-            hideEmbedModal() {
-                const modal = document.getElementById('embedModal');
-                if (modal) modal.style.display = 'none';
-            }
 
             shareToFacebook() {
                 const url = encodeURIComponent(window.location.href);
@@ -1840,30 +1809,40 @@
                 }
             }
 
-            async copyEmbedCode(type) {
+            // Embed code copy removed (embedding disabled)
-                const codeElement = document.getElementById(type === 'widget' ? 'widgetCode' : 'iframeCode');
-                const copyBtn = document.getElementById(type === 'widget' ? 'copyWidget' : 'copyIframe');
-                
-                if (codeElement && copyBtn) {
-                    try {
-                        await navigator.clipboard.writeText(codeElement.textContent);
-                        const originalText = copyBtn.textContent;
-                        copyBtn.textContent = 'Copied!';
-                        copyBtn.classList.add('copied');
-                        
-                        setTimeout(() => {
-                            copyBtn.textContent = originalText;
-                            copyBtn.classList.remove('copied');
-                        }, 2000);
-                    } catch (err) {
-                        // Fallback for older browsers
-                        console.log('Copy fallback needed');
-                    }
-                }
-            }
         }
 
         // Initialize calculator when DOM is ready
         document.addEventListener('DOMContentLoaded', function() {
+            // Allow embedding only from approved parent hosts
+            if (window.top !== window.self) {
+                const allowedHosts = ['caninenutritionandwellness.com', 'www.caninenutritionandwellness.com'];
+                let parentAllowed = false;
+
+                // Prefer document.referrer when available
+                try {
+                    if (document.referrer) {
+                        const r = new URL(document.referrer);
+                        parentAllowed = allowedHosts.includes(r.hostname);
+                    }
+                } catch (e) {}
+
+                // Fallback: Chrome's ancestorOrigins (may be empty or absent)
+                if (!parentAllowed && window.location.ancestorOrigins && window.location.ancestorOrigins.length) {
+                    parentAllowed = Array.from(window.location.ancestorOrigins).some((originStr) => {
+                        try {
+                            const o = new URL(originStr);
+                            return allowedHosts.includes(o.hostname);
+                        } catch (e) {
+                            return false;
+                        }
+                    });
+                }
+
+                if (!parentAllowed) {
+                    document.body.innerHTML = '<div style="max-width:720px;margin:40px auto;padding:16px;border:1px solid #ddd;border-radius:8px;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#333;line-height:1.5;text-align:center;">Embedding of this calculator is only allowed on caninenutritionandwellness.com.</div>';
+                    return;
+                }
+            }
             new DogCalorieCalculator();
         });

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 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 class="dog-calorie-calculator" data-theme="dark" data-scale="0.5"></div>
-    </div>
-    
-    <script src="sundog-dog-food-calculator.js"></script>
-</body>
-</html>