13 Commits

Author SHA1 Message Date
Dayowe 68d5527a89 fix(kaya): lock Fred & Felia kcal/100g (always 115) 2026-02-06 12:52:13 +01:00
Dayowe 19592f2230 • feat(kaya): use current weight for Fred & Felia MER grams
- Add current weight input + validation to Kaya UI
  - Persist/restore weight in local storage
  - Compute Fred & Felia grams/day from MER using entered weight and age factor
  - Keep kibble chart-based; allow editing Fred energy density
  - Rebuild iframe.html from src/
2026-01-28 15:51:28 +01:00
Dayowe d0a30a8f8d Add local stoarge 2025-11-12 18:39:10 +01:00
Dayowe 374d067cf4 Fixes and improvements 2025-11-12 18:34:26 +01:00
Dayowe 73c4648978 Updates 2025-11-12 18:00:36 +01:00
Dayowe da9fd20ffb Remve oz, cups, lb 2025-11-12 17:00:45 +01:00
Dayowe d489a87722 Add doc 2025-11-12 16:48:43 +01:00
Dayowe 7fd139b321 Kaya transition v1 2025-11-12 16:44:43 +01:00
Dayowe 90657f9aa4 Remove embedding and js widget 2025-10-28 09:58:20 +01:00
Dayowe 99b516d087 Add range calculations for dog food amounts based on life stage
- 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
2025-08-18 15:33:44 +02:00
Dayowe c4770d5ee6 Fix data-theme and data-scale widget attributes not being applied
- Remove theme/scale assignments that override widget options in build process
- Widget now properly uses data-theme and data-scale attributes from HTML
- Both light and dark themes work correctly when multiple widgets on same page
- Scale attribute properly applies to each widget independently
2025-08-18 14:54:25 +02:00
Dayowe 4ec42fdbc0 Add cups unit option for kcal/cup measurements
Features:
- Add cups as a unit option that only works with kcal/cup energy measurements
- Cups button is disabled with tooltip when kcal/cup is not selected
- Auto-select cups when user selects kcal/cup as energy unit
- Auto-switch to appropriate units when changing energy measurement types
- Calculate cup amounts directly from calories without density assumptions

Fixes:
- Ensure cups display correct values immediately upon auto-selection
- Fix "Per day" radio button to be pre-selected when feeding config becomes visible
- Handle empty unit values with failsafe fallback to active button

Technical details:
- Direct calorie-to-cups conversion bypassing gram conversions
- Pre-calculate cups values in food breakdown for efficient display
- Set unit before updating calculations to avoid timing issues
- Added CSS styling for disabled button state across all themes
2025-08-18 14:36:25 +02:00
Dayowe 8758ac1dbc Add per-meal feeding frequency feature
- Added feeding configuration section with daily/per-meal toggle
- Implemented meals per day selector (1-10 meals)
- Updated all calculations to support per-meal division
- Dynamic unit labels change from "/day" to "/meal"
- Added helpful meal count display for multi-day calculations
- Proper dark theme support for new UI elements
- Mobile responsive design for feeding controls
- Centered meal input group for better UX

This feature allows users to easily switch between viewing daily food amounts
and per-meal portions, making feeding schedules more practical to follow.
2025-08-18 12:45:44 +02:00
13 changed files with 2505 additions and 4645 deletions
+43
View File
@@ -0,0 +1,43 @@
Kayas Transition Calculator — Friendly Guide
============================================
This quick guide shows you how to use the calculator to move Kaya from kibble to gently cooked food at a steady, safe pace.
How to use it
-------------
1) Enter Kayas age in months (e.g. "5.5")
2) Check the energy numbers for your foods:
- Eukanuba (kibble) defaults to 372 kcal/100g (replace if your bag shows a different number)
- Fred & Felia (gently cooked) defaults to 115 kcal/100g (replace if your bag shows a different number)
- Add or rename the foods (e.g., “Treats”) and enter their energy values from the label (kcal/100 g, kcal/kg, kcal/cup, or kcal/can).
3) Set your percentages. We will start small (e.g., GC 5%, kibble 95%), lock any values you want fixed.
4) Choose how to view amounts:
- Per day or per meal; set meals/day if needed.
- Pick your preferred units (grams, kg).
- Use “days” to see totals for meal prep.
Regarding treats
-----
- Keep treats ≤10% (your plan is good). Larger shares can dilute the balanced portion of the diet.
- Enter treat kcal from the package (asfed) for accuracy.
- Monitor body condition and stool; adjust if needed.
What youll see
---------------
- Exact amounts for each food based on your percentages and energy labels.
- Totals per day (or per meal), and optional multiday batches.
- Everything updates instantly as you change inputs.
Good to know
------------
- Gently cooked is less caloriedense than kibble. As you add more GC, total grams may go up. This is normal.
- Treats count. I added a “Treats” source with its kcal so the plan stays balanced.
- When in doubt, doublecheck kcal values on the package (kcal/100 g or kcal/kg are most common).
Remember
-----------------
Every dog is unique. Monitor body condition, stool quality, and appetite. We will adjust percentages and amounts as Kaya grows and responds to the new plan.
+38
View File
@@ -0,0 +1,38 @@
Kaya Transition Calculator — Quick Guide
=======================================
This tool helps transition Kaya (30 kg adult) from kibble to gently cooked while keeping daily energy intake continuous. Enter Kayas age, set food sources and their energy values, then adjust percentages to see exactly how much to feed of each food.
How to use
----------
- Enter Kayas age in months (2.012.0). If outside this range, the tool adjusts to the nearest valid value.
- Confirm energy values for each food source:
- “Eukanuba, kibble” defaults to 372 kcal/100 g — change if your bag shows a different value.
- “Fred & Felia, gently cooked” defaults to 115 kcal/100 g.
- Add/rename sources (e.g., “Treats”) and enter their energy (kcal/100 g, kcal/kg, kcal/cup, or kcal/can).
- Set percentages for each food; lock any you want fixed. The total always equals 100%.
- Optional: switch units (g/kg/oz/lb; cups enabled only when kcal/cup is entered), choose perday or permeal, set meals/day, and use “days” to see batch totals.
What it calculates
------------------
- Daily energy target is derived from the 30 kg kibble feeding curve using Kayas exact age (monthlevel interpolation), not from generic MER.
- That daily kcal target is split across your foods by percentage and converted into amounts using each foods energy density.
- Results include perfood amounts and totals, perday or permeal, in your selected units.
Formulas (at a glance)
----------------------
- Kibble grams/day (30 kg) by month (g/day):
2: 250, 3: 330, 4: 365, 5: 382, 6: 400, 7: 405, 8: 410, 9: 410, 10: 410, 11: 408, 12: 405.
Linear interpolation is applied between months (e.g., 5.5 months is halfway between 5 and 6).
- Daily kcal target = kibble_g/day × (kibble_kcal_per_100g ÷ 100)
- Perfood kcal = daily_kcal × (food_percentage ÷ 100)
- Perfood grams (kcal/100 g) = perfood_kcal ÷ (kcal_per_100g ÷ 100)
- Perfood grams (kcal/kg) = perfood_kcal ÷ (kcal_per_kg ÷ 1000)
- Cups (when kcal/cup provided) = perfood_kcal ÷ kcal_per_cup
- Internal assumptions for conversions: 1 cup ≈ 120 g (dry), 1 can ≈ 450 g (wet)
Notes
-----
- Age input is limited to 212 months; values are rounded for display (permeal amounts round after splitting).
- Accuracy depends on correct energy values on your foods labels. When in doubt, confirm the kcal numbers on the packaging.
- This guide supports professional planning; your nutritionist may finetune based on Kayas body condition and response.
+40 -109
View File
@@ -1,6 +1,6 @@
# 🐕 Sundog Dog Food Calorie Calculator # 🐕 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; thirdparty embedding is no longer supported.
**By [Canine Nutrition and Wellness](https://caninenutritionandwellness.com)** **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 - **Lock Indicators**: Visual indicators showing which percentages are locked
### User Experience ### 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 - **Theme Support**: Light, dark, and system themes
- **Responsive Design**: Mobile-first, optimized layouts for all devices - **Responsive Design**: Mobile-first, optimized layouts for all devices
- **Two Embedding Options**: JavaScript widget and iframe
- **Accessibility**: Full keyboard navigation and screen reader support - **Accessibility**: Full keyboard navigation and screen reader support
### Brand & Integration ### Brand & Integration
@@ -39,36 +38,16 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
- **Professional Design**: Clean, veterinary-grade interface - **Professional Design**: Clean, veterinary-grade interface
- **Brand Protection**: Complete iframe isolation option - **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 ```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 <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> </iframe>
``` ```
@@ -134,7 +113,7 @@ Choose from three themes:
- `system` - Follows user's OS preference (default) - `system` - Follows user's OS preference (default)
### Scale Options ### Scale Options
Resize the widget from 50% to 200%: Resize the interface from 50% to 200%:
- Range: `0.5` to `2.0` - Range: `0.5` to `2.0`
- Default: `1.0` (100% size) - Default: `1.0` (100% size)
- Examples: `0.8` (80%), `1.2` (120%), `1.5` (150%) - 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/cup` - US/Canada dry food
- `kcal/can` - US/Canada wet 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 ## 🛠️ Development
### Build System ### 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 ### 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` 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? ### Why This Approach?
-**Single Source of Truth** - No need to maintain two separate files -**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 -**No Sync Issues** - Build script ensures consistency
### Build Script Features ### 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 - 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 ## 📁 Project Structure
``` ```
├── iframe.html # 🎯 MASTER SOURCE - Edit this file ├── src/ # ✏️ Source (HTML/CSS/JS)
├── build.js # 🔧 Build script - Run after changes ├── 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 └── 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 | | Working dog - heavy work | 5.0 | Intensive work |
| Senior dog | 1.1 | Reduced activity | | 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 ## 🚀 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 ## 🔒 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 ## 📱 Mobile Optimization
@@ -353,7 +285,6 @@ This calculator is provided for educational and professional use. The formulas a
## 🔗 Links ## 🔗 Links
- **Website**: [caninenutritionandwellness.com](https://caninenutritionandwellness.com) - **Website**: [caninenutritionandwellness.com](https://caninenutritionandwellness.com)
- **Widget Demo**: Open `test-widget.html` in your browser
- **Standalone**: Open `iframe.html` in your browser - **Standalone**: Open `iframe.html` in your browser
--- ---
+11 -15
View File
@@ -3,8 +3,8 @@
/** /**
* Dog Calculator Build System - ORGANIZED VERSION * 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: * Source structure:
* - src/index.html - HTML template * - src/index.html - HTML template
@@ -15,7 +15,6 @@
* *
* Output files: * Output files:
* - iframe.html - Standalone calculator page * - iframe.html - Standalone calculator page
* - sundog-dog-food-calculator.js - Embeddable widget
* *
* Usage: node build.js * Usage: node build.js
*/ */
@@ -85,7 +84,7 @@ function backupFiles() {
} }
const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const filesToBackup = ['iframe.html', 'sundog-dog-food-calculator.js']; const filesToBackup = ['iframe.html'];
filesToBackup.forEach(file => { filesToBackup.forEach(file => {
if (fs.existsSync(file)) { if (fs.existsSync(file)) {
@@ -141,8 +140,9 @@ function createWidgetJS(css, html, js) {
.replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(') .replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(')
// Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper // Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper
.replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '') .replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '')
// Remove duplicate theme/scale assignments that override options // Remove theme/scale assignments that would override widget options
.replace(/this\.theme = this\.getThemeFromURL\(\) \|\| 'system';\s*\n\s*this\.scale = this\.getScaleFromURL\(\) \|\| 1\.0;/g, '') .replace(/this\.theme = this\.getThemeFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultTheme;/g, '')
.replace(/this\.scale = this\.getScaleFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultScale;/g, '')
// Add widget initialization methods // Add widget initialization methods
.replace(/constructor\(\) \{/, `constructor(container, options = {}) { .replace(/constructor\(\) \{/, `constructor(container, options = {}) {
this.container = container; this.container = container;
@@ -186,14 +186,14 @@ function createWidgetJS(css, html, js) {
// Remove existing theme classes // Remove existing theme classes
calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system'); calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system');
// Add the selected theme class // Add the selected theme class
if (['light', 'dark', 'system'].includes(this.options.theme)) { if (['light', 'dark', 'system'].includes(this.theme)) {
calculatorContainer.classList.add('theme-' + this.options.theme); calculatorContainer.classList.add('theme-' + this.theme);
} }
} }
} }
applyScale() { applyScale() {
const scale = Math.max(0.5, Math.min(2.0, this.options.scale)); const scale = Math.max(0.5, Math.min(2.0, this.scale));
if (scale !== 1.0) { if (scale !== 1.0) {
this.container.style.transform = \`scale(\${scale})\`; this.container.style.transform = \`scale(\${scale})\`;
this.container.style.transformOrigin = 'top left'; this.container.style.transformOrigin = 'top left';
@@ -298,10 +298,7 @@ function build() {
fs.writeFileSync('iframe.html', iframeContent); fs.writeFileSync('iframe.html', iframeContent);
console.log(' ✅ Generated iframe.html'); 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('');
console.log('🎉 Build completed successfully!'); console.log('🎉 Build completed successfully!');
@@ -316,12 +313,11 @@ function build() {
console.log(''); console.log('');
console.log(' Generated files:'); console.log(' Generated files:');
console.log(' • iframe.html - Standalone calculator'); console.log(' • iframe.html - Standalone calculator');
console.log(' • sundog-dog-food-calculator.js - Embeddable widget');
console.log(''); console.log('');
console.log('🔄 Your workflow:'); console.log('🔄 Your workflow:');
console.log(' 1. Edit organized files in src/'); console.log(' 1. Edit organized files in src/');
console.log(' 2. Run: node build.js'); 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('');
console.log('💡 Clean, organized structure - easy to maintain!'); console.log('💡 Clean, organized structure - easy to maintain!');
+190
View File
@@ -0,0 +1,190 @@
# Feeding Transition Calculator — Implementation Guide (30 kg adult)
## 1) Purpose & principle
- The calculator **keeps energy intake continuous** while transitioning from kibble (current) to gently cooked (GC, target).
- Internally it uses the **kibble charts month-level precision**; externally it **communicates in GC phases** (<5 mo, 56 mo, 712 mo).
* * *
## 2) Fixed scope
- Dog profile: **30 kg adult** only.
- Supported ages: **2.0 to 12.0 months** inclusive.
If the user enters a value outside this range, **clamp** to the nearest bound and show a subtle note.
- Required configuration at runtime: **kibble energy density (kcal per 100 g)**.
If missing, show an error and do not compute.
* * *
## 3) Data you must hard-code
1. **Kibble reference points (grams/day, 30 kg column):**
(2→250), (3→330), (4→365), (6→400), (8→410), (10→410), (12→405).
2. **Interpolated monthly kibble (round to whole grams):**
- 2 mo: 250
- 3 mo: 330
- 4 mo: 365
- 5 mo: 382
- 6 mo: 400
- 7 mo: 405
- 8 mo: 410
- 9 mo: 410
- 10 mo: 410
- 11 mo: 408
- 12 mo: 405
3. **GC communication buckets and ranges (g/day):**
- **< 5 months** (covers 2.04.999… mo): **9501350**
- **56 months** (covers 5.06.999… mo): **12501550**
- **712 months** (covers 7.012.0 mo): **13001500**
**Boundary rule:** exact 5.0 and 7.0 belong to the **later** bucket (5.0 → “56”, 7.0 → “712”).
* * *
## 4) How to calculate results (conceptual, no code)
### A) Kibble grams/day at any age (2.012.0)
- Use **linear interpolation** between the nearest kibble reference points listed above.
- Round the resulting kibble grams/day to **whole grams** (or to the nearest **5 g** if the user enables a rounding toggle).
### B) GC bucket assignment
- Based on the **age**, assign the corresponding GC bucket and attach that buckets **low/high range** (g/day).
### C) Energy-matched GC grams/day (the backbone)
- Convert kibble grams/day to **kcal/day** using the **user-provided** kibble energy density (kcal/100 g).
- Convert kcal/day to **GC grams/day** using GCs energy density **115 kcal per 100 g**.
(Equivalently, GC provides **1.15 kcal per gram**.)
- Round to **whole grams** (or to **nearest 5 g** if the user toggled it).
### D) Range status
- Compare the **energy-matched GC grams/day** to the GC buckets **low/high**:
- “within” if inside \[low, high\]
- “below” if under the low
- “above” if over the high
(Do **not** alter the energy-matched amount; just flag it.)
### E) Transition schedule (blended days)
- Default to **7 days** (configurable).
- Linearly ramp daily fractions from **100% kibble / 0% GC** on Day 1 to **0% kibble / 100% GC** on the last day, in equal steps.
- Each days grams = (kibble grams/day × kibble fraction) + (GC grams/day × GC fraction).
Round after multiplying (whole grams or nearest 5 g per the user setting).
* * *
## 5) What to display (UX rules)
1. **Primary number:** “Gently cooked (energy-matched): **X g/day**”.
Directly below, show the GC bucket label and its range (e.g., “712 months: 13001500 g/day”) plus a small **status chip** (within/below/above).
2. **Context line:** “Based on your kibble energy density: **Y kcal / 100 g**” with an edit control.
3. **Age input:** accept decimals (e.g., 5.5 months).
Add tick marks at 2, 3, 4, 6, 8, 10, 12 (the original kibble points).
4. **Transition widget:** a simple 57 day table or bar chart that shows **kibble g** and **GC g** per day, plus the day total.
(Totals will typically increase during the transition because GC is less energy-dense; this is expected.)
5. **Rounding toggle:** whole grams vs nearest 5 g.
6. **Download/export:** CSV with columns:
age_months, kibble_g_per_day, kibble_kcal_per_100g, kcal_per_day, gc_energy_matched_g_per_day, gc_bucket_name, gc_low_g, gc_high_g, range_status, and per-day transition grams.
* * *
## 6) Validation & edge cases
- **Missing kibble kcal density:** block calculation and display a clear prompt to enter kcal/100 g.
- **Age outside 212 months:** clamp to the nearest bound; show a subtle informational note.
- **Energy-matched GC outside bucket range:** keep the energy-matched number; display the status chip and a short educational tooltip (growth varies; this tool prioritizes energy continuity).
- **Rounding:** perform all math in floating point; **round only for display** (and for the per-day plan after multiplying by fractions).
* * *
## 7) Acceptance checks (use these to verify)
- At **5.5 months** with **380 kcal/100 g** kibble:
- Interpolated kibble ≈ **391 g/day**.
- Kcal/day ≈ **1,486 kcal**.
- Energy-matched GC ≈ **1,292 g/day**.
- GC bucket “56 months” (1,2501,550) → **within**.
- At **8.0 months** with **380 kcal/100 g** kibble:
- Kibble ≈ **410 g/day** → ≈ **1,558 kcal/day** → GC ≈ **1,355 g/day**.
- GC bucket “712 months” (1,3001,500) → **within**.
- At **2.0 months** with **380 kcal/100 g** kibble:
- Kibble **250 g/day****950 kcal/day** → GC **≈ 826 g/day**.
- GC bucket “<5 months” (9501,350) → **below** (expected for some formulas).
* * *
## 8) Deliverables checklist
- Precise monthly interpolation (ready values above).
- Age-aware GC bucket labelling and ranges.
- Energy-matched GC grams/day with status flag.
- Configurable transition length; per-day blend table.
- Rounding control.
+1062 -441
View File
File diff suppressed because it is too large Load Diff
+129 -6
View File
@@ -15,14 +15,14 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
background: transparent; 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; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.5; line-height: 1.5;
color: var(--text-primary); color: var(--text-primary);
} }
.dog-calculator-container { .dog-calculator-container {
max-width: 600px; max-width: 640px;
margin: 0 auto; margin: 0 auto;
padding: 24px; padding: 24px;
box-sizing: border-box; box-sizing: border-box;
@@ -190,6 +190,14 @@
color: var(--text-label); color: var(--text-label);
} }
/* Kaya end-weight readonly field: compact, non-editable */
#kayaEndWeight {
width: 120px;
display: inline-block;
}
.dog-calculator-results { .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.08) 0%, rgba(241, 154, 95, 0.04) 100%); 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: 1px solid rgba(241, 154, 95, 0.2);
@@ -203,6 +211,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 12px;
gap: 10px; /* Add gap between label and value */
} }
.dog-calculator-result-item:last-child { .dog-calculator-result-item:last-child {
@@ -222,6 +231,7 @@
padding: 4px 12px; padding: 4px 12px;
background: rgba(241, 154, 95, 0.15); background: rgba(241, 154, 95, 0.15);
border-radius: 4px; border-radius: 4px;
white-space: nowrap; /* Prevent text from wrapping to multiple lines */
} }
.dog-calculator-collapsible { .dog-calculator-collapsible {
@@ -319,10 +329,7 @@
color: #9f5999; color: #9f5999;
} }
.dog-calculator-btn-embed:hover { /* Embed button removed */
border-color: var(--success-color);
color: var(--success-color);
}
.dog-calculator-footer { .dog-calculator-footer {
text-align: center; text-align: center;
@@ -437,4 +444,120 @@
} }
} }
/* 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 */ /* Dark theme - manual override */
+135 -123
View File
@@ -1,9 +1,13 @@
.dog-calculator-container.theme-dark { .dog-calculator-container.theme-dark {
--bg-primary: #24202d; --bg-primary: #24202d;
--bg-secondary: #312b3b; --bg-secondary: #312b3b;
--bg-tertiary: #1f1b26;
--border-color: #433c4f; --border-color: #433c4f;
--text-primary: #f5f3f7; --text-primary: #f5f3f7;
--text-secondary: #b8b0c2; --text-secondary: #b8b0c2;
--text-label: #9f94ae;
--success-color: #7fa464;
--error-color: #e87159;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -107,6 +111,19 @@
color: white; color: white;
} }
.dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: var(--border-color);
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
border-color: var(--border-color);
background: var(--bg-tertiary);
}
.dog-calculator-container.theme-dark .dog-calculator-results { .dog-calculator-container.theme-dark .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%); background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
border-color: rgba(241, 154, 95, 0.3); border-color: rgba(241, 154, 95, 0.3);
@@ -143,9 +160,43 @@
color: #f19a5f; 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 {
background: var(--bg-tertiary);
border-color: var(--border-color);
}
.dog-calculator-container.theme-dark .dog-calculator-frequency-row > label {
color: var(--text-label);
}
.dog-calculator-container.theme-dark .dog-calculator-radio-group label {
color: var(--text-primary);
}
.dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span {
color: #f19a5f;
}
.dog-calculator-container.theme-dark .dog-calculator-meal-input span {
color: var(--text-secondary);
}
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
.dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus {
border-color: #f19a5f;
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
}
.dog-calculator-container.theme-dark #mealNote {
color: var(--text-secondary);
} }
/* System theme - follows user's OS preference */ /* System theme - follows user's OS preference */
@@ -153,9 +204,13 @@
.dog-calculator-container.theme-system { .dog-calculator-container.theme-system {
--bg-primary: #24202d; --bg-primary: #24202d;
--bg-secondary: #312b3b; --bg-secondary: #312b3b;
--bg-tertiary: #1f1b26;
--border-color: #433c4f; --border-color: #433c4f;
--text-primary: #f5f3f7; --text-primary: #f5f3f7;
--text-secondary: #b8b0c2; --text-secondary: #b8b0c2;
--text-label: #9f94ae;
--success-color: #7fa464;
--error-color: #e87159;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -259,6 +314,19 @@
color: white; color: white;
} }
.dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: var(--border-color);
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
border-color: var(--border-color);
background: var(--bg-tertiary);
}
.dog-calculator-container.theme-system .dog-calculator-results { .dog-calculator-container.theme-system .dog-calculator-results {
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%); background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
border-color: rgba(241, 154, 95, 0.3); border-color: rgba(241, 154, 95, 0.3);
@@ -295,21 +363,60 @@
color: #f19a5f; 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 {
background: var(--bg-tertiary);
border-color: var(--border-color);
}
.dog-calculator-container.theme-system .dog-calculator-frequency-row > label {
color: var(--text-label);
}
.dog-calculator-container.theme-system .dog-calculator-radio-group label {
color: var(--text-primary);
}
.dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span {
color: #f19a5f;
}
.dog-calculator-container.theme-system .dog-calculator-meal-input span {
color: var(--text-secondary);
}
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
.dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus {
border-color: #f19a5f;
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15);
}
.dog-calculator-container.theme-system #mealNote {
color: var(--text-secondary);
} }
} }
/* Modal Styles */ /* Modal Styles */
.dog-calculator-modal { .dog-calculator-modal {
display: none; display: none; /* set to flex via JS when opened */
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 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; animation: fadeIn 0.3s ease;
} }
@@ -321,19 +428,19 @@
.dog-calculator-modal-content { .dog-calculator-modal-content {
position: relative; position: relative;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
margin: 5% auto; margin: 0;
padding: 30px; padding: 30px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; border-radius: 12px;
width: 90%; width: 90%;
max-width: 500px; max-width: 500px;
max-height: 90vh; /* ensure it fits viewport */
overflow: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
animation: slideIn 0.3s ease; animation: slideIn 0.3s ease;
} }
.dog-calculator-modal-embed { /* Embed modal removed */
max-width: 700px;
}
@keyframes slideIn { @keyframes slideIn {
from { from {
@@ -419,74 +526,7 @@
color: var(--text-primary); 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 */ /* Dark theme modal styles */
.dog-calculator-container.theme-dark .dog-calculator-modal-content { .dog-calculator-container.theme-dark .dog-calculator-modal-content {
@@ -512,28 +552,7 @@
color: var(--text-primary); 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 */ /* System theme modal styles */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -560,28 +579,7 @@
color: var(--text-primary); 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 */ /* Multi-Food Source Styles */
@@ -1208,6 +1206,20 @@
color: white; color: white;
} }
.dog-calculator-unit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: var(--border-color);
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.dog-calculator-unit-btn:disabled:hover {
border-color: var(--border-color);
background: var(--bg-tertiary);
transform: none;
}
/* Hidden unit select for compatibility */ /* Hidden unit select for compatibility */
.dog-calculator-unit-select-hidden { .dog-calculator-unit-select-hidden {
display: none; display: none;
+34 -105
View File
@@ -1,50 +1,26 @@
<div class="dog-calculator-container" id="dogCalculator"> <div class="dog-calculator-container" id="dogCalculator">
<div class="dog-calculator-section"> <div class="dog-calculator-section">
<div class="dog-calculator-section-header"> <div class="dog-calculator-section-header">
<h2>Dog's Characteristics</h2> <h2>Kayas Transition</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>
<div class="dog-calculator-form-group"> <div class="dog-calculator-form-group">
<label for="dogType">Dog Type / Activity Level:</label> <label for="ageMonths">Kayas age (months):</label>
<select id="dogType" aria-describedby="dogTypeHelp"> <input type="number" id="ageMonths" min="2" max="12" step="0.1" placeholder="Enter age in months" aria-describedby="ageHelp">
<option value="">Select dog type...</option> <div id="ageClampNote" class="dog-calculator-error dog-calculator-hidden">Age adjusted to the supported 212 month range.</div>
<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>
<div class="dog-calculator-form-group"> <div class="dog-calculator-form-group">
<label for="weight" id="weightLabel">Dog's Weight (kg):</label> <label for="weight" id="weightLabel">Kayas current weight (kg):</label>
<input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter weight in kg" aria-describedby="weightHelp"> <input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter current 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 id="weightError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid weight (minimum 0.1 kg)</div>
</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> <div class="dog-calculator-form-group">
<span class="dog-calculator-result-value" id="rerValue">- cal/day</span> <label for="kayaEndWeight">Kayas endweight:</label>
</div> <input type="text" id="kayaEndWeight" value="30 kg" readonly>
<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> </div>
@@ -65,6 +41,28 @@
<span>Add another food source</span> <span>Add another food source</span>
</button> </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 --> <!-- Per-Food Results -->
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;"> <div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
<div id="foodBreakdownList"> <div id="foodBreakdownList">
@@ -76,8 +74,6 @@
<div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;"> <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 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="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>
</div> </div>
<!-- Daily Total Results --> <!-- Daily Total Results -->
@@ -92,15 +88,13 @@
<select id="unit" class="dog-calculator-unit-select-hidden" aria-describedby="unitHelp"> <select id="unit" class="dog-calculator-unit-select-hidden" aria-describedby="unitHelp">
<option value="g">grams (g)</option> <option value="g">grams (g)</option>
<option value="kg">kilograms (kg)</option> <option value="kg">kilograms (kg)</option>
<option value="oz">ounces (oz)</option>
<option value="lb">pounds (lb)</option>
</select> </select>
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;"> <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
<h4 class="dog-calculator-section-title"> <h4 class="dog-calculator-section-title">
Calculate amounts for Calculate amounts for
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
<span id="dayLabel">day</span>: <span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
</h4> </h4>
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div> <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"> <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
@@ -115,75 +109,10 @@
</div> </div>
</div> </div>
<div class="dog-calculator-action-buttons">
<button class="dog-calculator-btn dog-calculator-btn-share" id="shareBtn">
Share
</button>
<button class="dog-calculator-btn dog-calculator-btn-embed" id="embedBtn">
Embed
</button>
</div>
<div class="dog-calculator-footer"> <div class="dog-calculator-footer">
<a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer"> <a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
by caninenutritionandwellness.com by caninenutritionandwellness.com
</a> </a>
</div> </div>
<!-- Share Modal -->
<div id="shareModal" class="dog-calculator-modal" style="display: none;">
<div class="dog-calculator-modal-content">
<span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
<h3>Share Calculator</h3>
<div class="dog-calculator-share-buttons">
<button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
Facebook
</button>
<button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
Twitter
</button>
<button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
LinkedIn
</button>
<button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
Email
</button>
<button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
Copy Link
</button>
</div>
<div class="dog-calculator-share-url">
<input type="text" id="shareUrl" readonly>
</div>
</div>
</div>
<!-- Embed Modal -->
<div id="embedModal" class="dog-calculator-modal" style="display: none;">
<div class="dog-calculator-modal-content dog-calculator-modal-embed">
<span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
<h3>⚡ Embed the Calculator</h3>
<div class="dog-calculator-embed-options">
<div class="dog-calculator-embed-option">
<h4>⚡ JavaScript Widget</h4>
<div class="dog-calculator-code-container">
<pre><code id="widgetCode"></code></pre>
<button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
Copy
</button>
</div>
</div>
<div class="dog-calculator-embed-option">
<h4>🛡️ iframe Embed</h4>
<div class="dog-calculator-code-container">
<pre><code id="iframeCode"></code></pre>
<button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
Copy
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
+757 -206
View File
File diff suppressed because it is too large Load Diff
+7 -1
View File
@@ -7,5 +7,11 @@ const CALCULATOR_CONFIG = {
defaultScale: 1.0, defaultScale: 1.0,
maxFoodSources: 5, maxFoodSources: 5,
minScale: 0.5, minScale: 0.5,
maxScale: 2.0 maxScale: 2.0,
// Kaya fork: Fred & Felia uses MER; kibble stays chart-based (30 kg column).
// Used only when weight input is not present (back-compat).
kayaMerDefaultWeightKg: 30,
kayaMerFactorUnder4Months: 3.0,
kayaMerFactorFrom4Months: 2.0
}; };
File diff suppressed because it is too large Load Diff
-37
View File
@@ -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>