Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 68d5527a89 | |||
| 19592f2230 | |||
| d0a30a8f8d | |||
| 374d067cf4 | |||
| 73c4648978 | |||
| da9fd20ffb | |||
| d489a87722 | |||
| 7fd139b321 | |||
| 90657f9aa4 |
@@ -0,0 +1,43 @@
|
|||||||
|
Kaya’s 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 Kaya’s 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 (as‑fed) for accuracy.
|
||||||
|
- Monitor body condition and stool; adjust if needed.
|
||||||
|
|
||||||
|
|
||||||
|
What you’ll see
|
||||||
|
---------------
|
||||||
|
- Exact amounts for each food based on your percentages and energy labels.
|
||||||
|
- Totals per day (or per meal), and optional multi‑day batches.
|
||||||
|
- Everything updates instantly as you change inputs.
|
||||||
|
|
||||||
|
Good to know
|
||||||
|
------------
|
||||||
|
- Gently cooked is less calorie‑dense 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, double‑check 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.
|
||||||
@@ -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 Kaya’s 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 Kaya’s age in months (2.0–12.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 per‑day or per‑meal, 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 Kaya’s exact age (month‑level interpolation), not from generic MER.
|
||||||
|
- That daily kcal target is split across your foods by percentage and converted into amounts using each food’s energy density.
|
||||||
|
- Results include per‑food amounts and totals, per‑day or per‑meal, 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)
|
||||||
|
- Per‑food kcal = daily_kcal × (food_percentage ÷ 100)
|
||||||
|
- Per‑food grams (kcal/100 g) = per‑food_kcal ÷ (kcal_per_100g ÷ 100)
|
||||||
|
- Per‑food grams (kcal/kg) = per‑food_kcal ÷ (kcal_per_kg ÷ 1000)
|
||||||
|
- Cups (when kcal/cup provided) = per‑food_kcal ÷ kcal_per_cup
|
||||||
|
- Internal assumptions for conversions: 1 cup ≈ 120 g (dry), 1 can ≈ 450 g (wet)
|
||||||
|
|
||||||
|
Notes
|
||||||
|
-----
|
||||||
|
- Age input is limited to 2–12 months; values are rounded for display (per‑meal 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 fine‑tune based on Kaya’s body condition and response.
|
||||||
@@ -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; third‑party 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
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -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)) {
|
||||||
@@ -299,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!');
|
||||||
@@ -317,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!');
|
||||||
|
|
||||||
|
|||||||
@@ -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 chart’s month-level precision**; externally it **communicates in GC phases** (<5 mo, 5–6 mo, 7–12 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.0–4.999… mo): **950–1350**
|
||||||
|
|
||||||
|
- **5–6 months** (covers 5.0–6.999… mo): **1250–1550**
|
||||||
|
|
||||||
|
- **7–12 months** (covers 7.0–12.0 mo): **1300–1500**
|
||||||
|
|
||||||
|
|
||||||
|
**Boundary rule:** exact 5.0 and 7.0 belong to the **later** bucket (5.0 → “5–6”, 7.0 → “7–12”).
|
||||||
|
|
||||||
|
* * *
|
||||||
|
|
||||||
|
## 4) How to calculate results (conceptual, no code)
|
||||||
|
|
||||||
|
### A) Kibble grams/day at any age (2.0–12.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 bucket’s **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 GC’s 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 bucket’s **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 day’s 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., “7–12 months: 1300–1500 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 5–7 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 2–12 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 “5–6 months” (1,250–1,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 “7–12 months” (1,300–1,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” (950–1,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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
+551
-623
File diff suppressed because it is too large
Load Diff
+10
-5
@@ -15,7 +15,7 @@
|
|||||||
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);
|
||||||
@@ -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);
|
||||||
@@ -321,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;
|
||||||
|
|||||||
+15
-125
@@ -160,10 +160,7 @@
|
|||||||
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 */
|
/* Dark theme feeding configuration styles */
|
||||||
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
||||||
@@ -366,10 +363,7 @@
|
|||||||
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 */
|
/* System theme feeding configuration styles in dark mode */
|
||||||
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
||||||
@@ -411,13 +405,18 @@
|
|||||||
|
|
||||||
/* 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -429,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 {
|
||||||
@@ -527,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 {
|
||||||
@@ -620,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) {
|
||||||
@@ -668,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 */
|
||||||
|
|||||||
+11
-106
@@ -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>Kaya’s 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">Kaya’s 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 2–12 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">Kaya’s 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">Kaya’s end‑weight:</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>
|
||||||
|
|
||||||
@@ -98,9 +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>
|
|
||||||
<button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Daily Total Results -->
|
<!-- Daily Total Results -->
|
||||||
@@ -115,9 +88,6 @@
|
|||||||
<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>
|
|
||||||
<option value="cups">cups</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;">
|
||||||
@@ -139,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">×</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">×</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>
|
||||||
|
|||||||
+508
-386
File diff suppressed because it is too large
Load Diff
+7
-1
@@ -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
@@ -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>
|
|
||||||
Reference in New Issue
Block a user