Compare commits
5 Commits
master
...
4ec42fdbc0
| Author | SHA1 | Date | |
|---|---|---|---|
 Dayowe
|
4ec42fdbc0 | ||
|
Dayowe
|
8758ac1dbc | ||
|
Dayowe
|
c7a4aa01ba | ||
|
Dayowe
|
73793f43a1 | ||
|
Dayowe
|
ba3e0a6a6a |
+27
@@ -0,0 +1,27 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
|
|
||||||
|
# Personal files
|
||||||
|
theme.scss
|
||||||
|
_variables.scss
|
||||||
|
reference.png
|
||||||
|
better.png
|
||||||
|
START_PROMPT.md
|
||||||
|
CLAUDE.md
|
||||||
|
CLAUDE_V2.md
|
||||||
|
math.md
|
||||||
|
vetcalculators/
|
||||||
|
*.js.backup*
|
||||||
|
backup/
|
||||||
@@ -1,46 +1,74 @@
|
|||||||
#!/usr/bin/env node
|
#!/usr/bin/env node
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dog Calculator Build System - PRODUCTION VERSION
|
* Dog Calculator Build System - ORGANIZED VERSION
|
||||||
*
|
*
|
||||||
* This FIXED build script generates iframe.html and dog-calculator-widget.js
|
* This build script generates iframe.html and sundog-dog-food-calculator.js
|
||||||
* with EXACTLY the same functionality from iframe.html as the single source of truth.
|
* from organized source files in the src/ directory.
|
||||||
|
*
|
||||||
|
* Source structure:
|
||||||
|
* - src/index.html - HTML template
|
||||||
|
* - src/css/main.css - Main styles
|
||||||
|
* - src/css/themes.css - Theme-specific styles
|
||||||
|
* - src/js/config.js - Configuration constants
|
||||||
|
* - src/js/calculator.js - JavaScript functionality
|
||||||
|
*
|
||||||
|
* Output files:
|
||||||
|
* - iframe.html - Standalone calculator page
|
||||||
|
* - sundog-dog-food-calculator.js - Embeddable widget
|
||||||
*
|
*
|
||||||
* Usage: node build.js
|
* Usage: node build.js
|
||||||
*
|
|
||||||
* ✅ WORKS CORRECTLY - Fixed the previous broken implementation
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
console.log('🎯 Dog Calculator Build System - FIXED & WORKING');
|
console.log('🎯 Dog Calculator Build System - ORGANIZED VERSION');
|
||||||
console.log('');
|
console.log('');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Extract and parse components from the master iframe.html
|
* Read organized components from src directory
|
||||||
*/
|
*/
|
||||||
function parseIframeComponents() {
|
function readSourceComponents() {
|
||||||
if (!fs.existsSync('iframe.html')) {
|
const srcDir = 'src';
|
||||||
throw new Error('iframe.html not found - this is the master file that should exist');
|
|
||||||
|
// Check if src directory exists
|
||||||
|
if (!fs.existsSync(srcDir)) {
|
||||||
|
throw new Error('src directory not found');
|
||||||
}
|
}
|
||||||
|
|
||||||
const content = fs.readFileSync('iframe.html', 'utf8');
|
// Read CSS files
|
||||||
|
const mainCssPath = path.join(srcDir, 'css', 'main.css');
|
||||||
|
const themesCssPath = path.join(srcDir, 'css', 'themes.css');
|
||||||
|
if (!fs.existsSync(mainCssPath)) {
|
||||||
|
throw new Error('src/css/main.css not found');
|
||||||
|
}
|
||||||
|
if (!fs.existsSync(themesCssPath)) {
|
||||||
|
throw new Error('src/css/themes.css not found');
|
||||||
|
}
|
||||||
|
const mainCss = fs.readFileSync(mainCssPath, 'utf8').trim();
|
||||||
|
const themesCss = fs.readFileSync(themesCssPath, 'utf8').trim();
|
||||||
|
const css = mainCss + '\n\n' + themesCss;
|
||||||
|
|
||||||
// Extract CSS (everything between <style> and </style>)
|
// Read HTML template
|
||||||
const cssMatch = content.match(/<style>([\s\S]*?)<\/style>/);
|
const htmlPath = path.join(srcDir, 'index.html');
|
||||||
if (!cssMatch) throw new Error('Could not extract CSS from iframe.html');
|
if (!fs.existsSync(htmlPath)) {
|
||||||
const css = cssMatch[1].trim();
|
throw new Error('src/index.html not found');
|
||||||
|
}
|
||||||
|
const html = fs.readFileSync(htmlPath, 'utf8').trim();
|
||||||
|
|
||||||
// Extract HTML body (everything between <body> and <script>)
|
// Read JavaScript files
|
||||||
const htmlMatch = content.match(/<body>([\s\S]*?)<script>/);
|
const configPath = path.join(srcDir, 'js', 'config.js');
|
||||||
if (!htmlMatch) throw new Error('Could not extract HTML from iframe.html');
|
const calculatorPath = path.join(srcDir, 'js', 'calculator.js');
|
||||||
const html = htmlMatch[1].trim();
|
if (!fs.existsSync(configPath)) {
|
||||||
|
throw new Error('src/js/config.js not found');
|
||||||
// Extract JavaScript (everything between <script> and </script>)
|
}
|
||||||
const jsMatch = content.match(/<script>([\s\S]*?)<\/script>/);
|
if (!fs.existsSync(calculatorPath)) {
|
||||||
if (!jsMatch) throw new Error('Could not extract JavaScript from iframe.html');
|
throw new Error('src/js/calculator.js not found');
|
||||||
const js = jsMatch[1].trim();
|
}
|
||||||
|
const config = fs.readFileSync(configPath, 'utf8').trim();
|
||||||
|
const calculator = fs.readFileSync(calculatorPath, 'utf8').trim();
|
||||||
|
const js = config + '\n\n' + calculator;
|
||||||
|
|
||||||
return { css, html, js };
|
return { css, html, js };
|
||||||
}
|
}
|
||||||
@@ -49,17 +77,27 @@ function parseIframeComponents() {
|
|||||||
* Backup existing files
|
* Backup existing files
|
||||||
*/
|
*/
|
||||||
function backupFiles() {
|
function backupFiles() {
|
||||||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
const backupDir = 'backup';
|
||||||
|
|
||||||
if (fs.existsSync('sundog-dog-food-calculator.js')) {
|
// Create backup directory if it doesn't exist
|
||||||
const backupName = `sundog-dog-food-calculator.js.backup-${timestamp}`;
|
if (!fs.existsSync(backupDir)) {
|
||||||
fs.copyFileSync('sundog-dog-food-calculator.js', backupName);
|
fs.mkdirSync(backupDir);
|
||||||
console.log(`📦 Backed up existing widget to: ${backupName}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||||||
|
const filesToBackup = ['iframe.html', 'sundog-dog-food-calculator.js'];
|
||||||
|
|
||||||
|
filesToBackup.forEach(file => {
|
||||||
|
if (fs.existsSync(file)) {
|
||||||
|
const backupName = path.join(backupDir, `${file}.backup-${timestamp}`);
|
||||||
|
fs.copyFileSync(file, backupName);
|
||||||
|
console.log(` 📦 Backed up ${file}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Generate iframe.html (regenerate from components for consistency)
|
* Generate iframe.html from modular components
|
||||||
*/
|
*/
|
||||||
function generateIframe(css, html, js) {
|
function generateIframe(css, html, js) {
|
||||||
const content = `<!DOCTYPE html>
|
const content = `<!DOCTYPE html>
|
||||||
@@ -69,6 +107,9 @@ function generateIframe(css, html, js) {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
|
<title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
|
||||||
<style>
|
<style>
|
||||||
|
/* Sundog Dog Food Calorie Calculator Styles */
|
||||||
|
|
||||||
|
/* CSS Variables for theming */
|
||||||
${css}
|
${css}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -80,30 +121,14 @@ function generateIframe(css, html, js) {
|
|||||||
</body>
|
</body>
|
||||||
</html>`;
|
</html>`;
|
||||||
|
|
||||||
// Since iframe.html is our source, we don't overwrite it
|
|
||||||
// This function is here for consistency and testing
|
|
||||||
return content;
|
return content;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* No transformation needed - keep original class names for consistency
|
* Create production-ready widget JavaScript
|
||||||
*/
|
|
||||||
function transformCSSForWidget(css) {
|
|
||||||
return css;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* No transformation needed - keep original class names for consistency
|
|
||||||
*/
|
|
||||||
function transformHTMLForWidget(html) {
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create production-ready widget JavaScript that uses the ACTUAL extracted JS from iframe.html
|
|
||||||
*/
|
*/
|
||||||
function createWidgetJS(css, html, js) {
|
function createWidgetJS(css, html, js) {
|
||||||
// Transform the extracted JavaScript from iframe.html to work as a widget
|
// Transform the JavaScript from calculator.js to work as a widget
|
||||||
|
|
||||||
// Replace the iframe's DOMContentLoaded listener with widget initialization
|
// Replace the iframe's DOMContentLoaded listener with widget initialization
|
||||||
let transformedJS = js
|
let transformedJS = js
|
||||||
@@ -175,12 +200,18 @@ function createWidgetJS(css, html, js) {
|
|||||||
}
|
}
|
||||||
}$2`);
|
}$2`);
|
||||||
|
|
||||||
|
// Add CSS variables to widget CSS
|
||||||
|
const widgetCSS = `/* Sundog Dog Food Calorie Calculator Styles */
|
||||||
|
|
||||||
|
/* CSS Variables for theming */
|
||||||
|
${css}`;
|
||||||
|
|
||||||
const widgetCode = `/**
|
const widgetCode = `/**
|
||||||
* Dog Calorie Calculator Widget
|
* Dog Calorie Calculator Widget
|
||||||
* Embeddable JavaScript widget for websites
|
* Embeddable JavaScript widget for websites
|
||||||
*
|
*
|
||||||
* THIS CODE IS AUTO-GENERATED FROM iframe.html - DO NOT EDIT MANUALLY
|
* THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY
|
||||||
* Edit iframe.html and run 'node build.js' to update this file
|
* Edit files in src/ directory and run 'node build.js' to update
|
||||||
*
|
*
|
||||||
* Usage:
|
* Usage:
|
||||||
* <script src="sundog-dog-food-calculator.js"></script>
|
* <script src="sundog-dog-food-calculator.js"></script>
|
||||||
@@ -197,7 +228,7 @@ function createWidgetJS(css, html, js) {
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Inject widget styles
|
// Inject widget styles
|
||||||
const CSS_STYLES = \`${css}\`;
|
const CSS_STYLES = \`${widgetCSS}\`;
|
||||||
|
|
||||||
function injectStyles() {
|
function injectStyles() {
|
||||||
if (document.getElementById('dog-calculator-styles')) return;
|
if (document.getElementById('dog-calculator-styles')) return;
|
||||||
@@ -208,7 +239,7 @@ function createWidgetJS(css, html, js) {
|
|||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ACTUAL JavaScript from iframe.html (transformed for widget use)
|
// JavaScript from src/calculator.js (transformed for widget use)
|
||||||
${transformedJS}
|
${transformedJS}
|
||||||
|
|
||||||
// Auto-initialize widgets on page load
|
// Auto-initialize widgets on page load
|
||||||
@@ -249,37 +280,59 @@ function createWidgetJS(css, html, js) {
|
|||||||
*/
|
*/
|
||||||
function build() {
|
function build() {
|
||||||
try {
|
try {
|
||||||
console.log('📖 Reading components from iframe.html (master source)...');
|
console.log('📖 Reading organized components from src/ directory...');
|
||||||
const { css, html, js } = parseIframeComponents();
|
const { css, html, js } = readSourceComponents();
|
||||||
|
console.log(' ✅ src/index.html (' + html.split('\n').length + ' lines)');
|
||||||
|
console.log(' ✅ src/css/main.css + themes.css (' + css.split('\n').length + ' lines)');
|
||||||
|
console.log(' ✅ src/js/config.js + calculator.js (' + js.split('\n').length + ' lines)');
|
||||||
|
|
||||||
|
console.log('');
|
||||||
console.log('📦 Backing up existing files...');
|
console.log('📦 Backing up existing files...');
|
||||||
backupFiles();
|
backupFiles();
|
||||||
|
|
||||||
console.log('🏗️ Generating sundog-dog-food-calculator.js...');
|
console.log('');
|
||||||
|
console.log('🏗️ Building output files...');
|
||||||
|
|
||||||
|
// Generate iframe.html
|
||||||
|
const iframeContent = generateIframe(css, html, js);
|
||||||
|
fs.writeFileSync('iframe.html', iframeContent);
|
||||||
|
console.log(' ✅ Generated iframe.html');
|
||||||
|
|
||||||
|
// Generate widget
|
||||||
const widgetCode = createWidgetJS(css, html, js);
|
const widgetCode = createWidgetJS(css, html, js);
|
||||||
fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
|
fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
|
||||||
console.log('✅ Generated sundog-dog-food-calculator.js');
|
console.log(' ✅ Generated sundog-dog-food-calculator.js');
|
||||||
|
|
||||||
console.log('');
|
console.log('');
|
||||||
console.log('🎉 Build completed successfully!');
|
console.log('🎉 Build completed successfully!');
|
||||||
console.log('');
|
console.log('');
|
||||||
console.log('📋 Summary:');
|
console.log('📋 Summary:');
|
||||||
console.log(' ✅ iframe.html - Master source (no changes needed)');
|
console.log(' Source structure:');
|
||||||
console.log(' ✅ sundog-dog-food-calculator.js - Generated with identical functionality');
|
console.log(' • src/index.html - HTML structure');
|
||||||
|
console.log(' • src/css/main.css - Core styles');
|
||||||
|
console.log(' • src/css/themes.css - Theme variations');
|
||||||
|
console.log(' • src/js/config.js - Configuration');
|
||||||
|
console.log(' • src/js/calculator.js - Main logic');
|
||||||
console.log('');
|
console.log('');
|
||||||
console.log('🔄 Your new workflow:');
|
console.log(' Generated files:');
|
||||||
console.log(' 1. Edit iframe.html for any changes (calculations, design, layout)');
|
console.log(' • iframe.html - Standalone calculator');
|
||||||
|
console.log(' • sundog-dog-food-calculator.js - Embeddable widget');
|
||||||
|
console.log('');
|
||||||
|
console.log('🔄 Your workflow:');
|
||||||
|
console.log(' 1. Edit organized files in src/');
|
||||||
console.log(' 2. Run: node build.js');
|
console.log(' 2. Run: node build.js');
|
||||||
console.log(' 3. Both files now have the same functionality!');
|
console.log(' 3. Both output files are regenerated!');
|
||||||
console.log('');
|
console.log('');
|
||||||
console.log('💡 No more maintaining two separate files!');
|
console.log('💡 Clean, organized structure - easy to maintain!');
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Build failed:', error.message);
|
console.error('❌ Build failed:', error.message);
|
||||||
|
console.error(error.stack);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Run build if called directly
|
||||||
if (require.main === module) {
|
if (require.main === module) {
|
||||||
build();
|
build();
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
+610
-30
@@ -447,13 +447,116 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Dark theme - manual override */
|
/* Dark theme - manual override */
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -557,6 +660,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);
|
||||||
@@ -598,14 +714,55 @@
|
|||||||
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 */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -709,6 +866,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);
|
||||||
@@ -749,6 +919,43 @@
|
|||||||
border-color: var(--success-color);
|
border-color: var(--success-color);
|
||||||
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 */
|
||||||
@@ -1658,6 +1865,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;
|
||||||
@@ -1900,6 +2121,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">
|
||||||
@@ -1913,6 +2156,7 @@
|
|||||||
<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="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="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 -->
|
||||||
@@ -1929,13 +2173,14 @@
|
|||||||
<option value="kg">kilograms (kg)</option>
|
<option value="kg">kilograms (kg)</option>
|
||||||
<option value="oz">ounces (oz)</option>
|
<option value="oz">ounces (oz)</option>
|
||||||
<option value="lb">pounds (lb)</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;">
|
||||||
<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">
|
||||||
@@ -2022,11 +2267,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
|
* Configuration constants for Dog Calorie Calculator
|
||||||
|
*/
|
||||||
|
|
||||||
|
const CALCULATOR_CONFIG = {
|
||||||
|
defaultTheme: 'system',
|
||||||
|
defaultScale: 1.0,
|
||||||
|
maxFoodSources: 5,
|
||||||
|
minScale: 0.5,
|
||||||
|
maxScale: 2.0
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
* Dog Calorie Calculator - iframe version
|
* Dog Calorie Calculator - iframe version
|
||||||
* by Canine Nutrition and Wellness
|
* by Canine Nutrition and Wellness
|
||||||
*/
|
*/
|
||||||
@@ -2035,10 +2289,12 @@
|
|||||||
constructor() {
|
constructor() {
|
||||||
this.currentMER = 0;
|
this.currentMER = 0;
|
||||||
this.isImperial = false;
|
this.isImperial = false;
|
||||||
this.theme = this.getThemeFromURL() || 'system';
|
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
|
||||||
this.scale = this.getScaleFromURL() || 1.0;
|
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
|
||||||
this.foodSources = [];
|
this.foodSources = [];
|
||||||
this.maxFoodSources = 5;
|
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
|
||||||
|
this.mealsPerDay = 2;
|
||||||
|
this.showPerMeal = false;
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2064,7 +2320,7 @@
|
|||||||
getScaleFromURL() {
|
getScaleFromURL() {
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
const scale = parseFloat(urlParams.get('scale'));
|
const scale = parseFloat(urlParams.get('scale'));
|
||||||
return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : null;
|
return (!isNaN(scale) && scale >= CALCULATOR_CONFIG.minScale && scale <= CALCULATOR_CONFIG.maxScale) ? scale : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
applyTheme() {
|
applyTheme() {
|
||||||
@@ -2077,8 +2333,8 @@
|
|||||||
const container = document.getElementById('dogCalculator');
|
const container = document.getElementById('dogCalculator');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
// Clamp scale between 0.5 and 2.0 for usability
|
// Clamp scale between min and max for usability
|
||||||
const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
|
const clampedScale = Math.max(CALCULATOR_CONFIG.minScale, Math.min(CALCULATOR_CONFIG.maxScale, this.scale));
|
||||||
|
|
||||||
if (clampedScale !== 1.0) {
|
if (clampedScale !== 1.0) {
|
||||||
container.style.transform = `scale(${clampedScale})`;
|
container.style.transform = `scale(${clampedScale})`;
|
||||||
@@ -2615,7 +2871,36 @@
|
|||||||
if (energyInput) {
|
if (energyInput) {
|
||||||
energyInput.addEventListener('input', () => {
|
energyInput.addEventListener('input', () => {
|
||||||
this.updateFoodSourceData(id, 'energy', energyInput.value);
|
this.updateFoodSourceData(id, 'energy', energyInput.value);
|
||||||
this.updateFoodCalculations();
|
|
||||||
|
// Auto-select cups when entering energy for kcal/cup
|
||||||
|
const foodSource = this.foodSources.find(fs => fs.id === id);
|
||||||
|
if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
|
||||||
|
const unitSelect = document.getElementById('unit');
|
||||||
|
const cupsButton = document.getElementById('cupsButton');
|
||||||
|
|
||||||
|
// First check if cups button will be enabled after update
|
||||||
|
const willEnableCups = this.foodSources.some(fs =>
|
||||||
|
fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (willEnableCups && unitSelect) {
|
||||||
|
// Set cups BEFORE updating calculations
|
||||||
|
unitSelect.value = 'cups';
|
||||||
|
unitSelect.setAttribute('value', 'cups');
|
||||||
|
this.setActiveUnitButton('cups');
|
||||||
|
|
||||||
|
// Enable the cups button manually since we know it will be valid
|
||||||
|
if (cupsButton) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Now update calculations with cups already selected
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
} else {
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
|
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
|
||||||
}
|
}
|
||||||
@@ -2623,7 +2908,54 @@
|
|||||||
if (energyUnitSelect) {
|
if (energyUnitSelect) {
|
||||||
energyUnitSelect.addEventListener('change', () => {
|
energyUnitSelect.addEventListener('change', () => {
|
||||||
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
|
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
|
||||||
this.updateFoodCalculations();
|
|
||||||
|
// Auto-select the most appropriate unit based on energy unit
|
||||||
|
const unitSelect = document.getElementById('unit');
|
||||||
|
const energyInput = document.getElementById(`energy-${id}`);
|
||||||
|
|
||||||
|
if (unitSelect) {
|
||||||
|
switch(energyUnitSelect.value) {
|
||||||
|
case 'kcalcup':
|
||||||
|
// Check if we have energy value to enable cups
|
||||||
|
const foodSource = this.foodSources.find(fs => fs.id === id);
|
||||||
|
if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
|
||||||
|
// Set cups BEFORE updating calculations
|
||||||
|
unitSelect.value = 'cups';
|
||||||
|
unitSelect.setAttribute('value', 'cups');
|
||||||
|
this.setActiveUnitButton('cups');
|
||||||
|
|
||||||
|
// Enable the cups button manually
|
||||||
|
const cupsButton = document.getElementById('cupsButton');
|
||||||
|
if (cupsButton) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcal100g':
|
||||||
|
// For kcal/100g, select grams
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcalkg':
|
||||||
|
// For kcal/kg, also select grams (or could be kg)
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcalcan':
|
||||||
|
// For kcal/can, use grams as default (or ounces in imperial)
|
||||||
|
unitSelect.value = this.isImperial ? 'oz' : 'g';
|
||||||
|
this.setActiveUnitButton(unitSelect.value);
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// No unit select, just update calculations
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2793,6 +3125,58 @@
|
|||||||
|
|
||||||
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
||||||
|
|
||||||
|
// Feeding configuration event listeners
|
||||||
|
const showDaily = document.getElementById('showDaily');
|
||||||
|
const showPerMeal = document.getElementById('showPerMeal');
|
||||||
|
const mealsPerDayInput = document.getElementById('mealsPerDay');
|
||||||
|
const mealInputGroup = document.getElementById('mealInputGroup');
|
||||||
|
|
||||||
|
if (showDaily) {
|
||||||
|
showDaily.addEventListener('change', () => {
|
||||||
|
if (showDaily.checked) {
|
||||||
|
this.showPerMeal = false;
|
||||||
|
if (mealInputGroup) mealInputGroup.style.display = 'none';
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showPerMeal) {
|
||||||
|
showPerMeal.addEventListener('change', () => {
|
||||||
|
if (showPerMeal.checked) {
|
||||||
|
this.showPerMeal = true;
|
||||||
|
if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mealsPerDayInput) {
|
||||||
|
mealsPerDayInput.addEventListener('input', () => {
|
||||||
|
const meals = parseInt(mealsPerDayInput.value);
|
||||||
|
if (meals && meals >= 1 && meals <= 10) {
|
||||||
|
this.mealsPerDay = meals;
|
||||||
|
if (this.showPerMeal) {
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mealsPerDayInput.addEventListener('blur', () => {
|
||||||
|
if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
|
||||||
|
mealsPerDayInput.value = 2;
|
||||||
|
this.mealsPerDay = 2;
|
||||||
|
if (this.showPerMeal) {
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Modal event listeners
|
// Modal event listeners
|
||||||
const shareBtn = document.getElementById('shareBtn');
|
const shareBtn = document.getElementById('shareBtn');
|
||||||
const embedBtn = document.getElementById('embedBtn');
|
const embedBtn = document.getElementById('embedBtn');
|
||||||
@@ -2969,7 +3353,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
convertUnits(grams, unit) {
|
convertUnits(grams, unit, foodSource = null) {
|
||||||
switch (unit) {
|
switch (unit) {
|
||||||
case 'kg':
|
case 'kg':
|
||||||
return grams / 1000;
|
return grams / 1000;
|
||||||
@@ -2977,6 +3361,18 @@
|
|||||||
return grams / 28.3495;
|
return grams / 28.3495;
|
||||||
case 'lb':
|
case 'lb':
|
||||||
return grams / 453.592;
|
return grams / 453.592;
|
||||||
|
case 'cups':
|
||||||
|
// For cups, we need to convert from grams worth of calories to cups
|
||||||
|
if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
|
||||||
|
// Get calories per 100g for this food
|
||||||
|
const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
|
||||||
|
// Calculate total calories represented by these grams
|
||||||
|
const totalCalories = grams * caloriesPerGram;
|
||||||
|
// Divide by calories per cup to get number of cups
|
||||||
|
const caloriesPerCup = parseFloat(foodSource.energy);
|
||||||
|
return totalCalories / caloriesPerCup;
|
||||||
|
}
|
||||||
|
return null; // Cannot convert to cups without kcal/cup
|
||||||
default:
|
default:
|
||||||
return grams;
|
return grams;
|
||||||
}
|
}
|
||||||
@@ -3011,10 +3407,21 @@
|
|||||||
updateDayLabel() {
|
updateDayLabel() {
|
||||||
const days = document.getElementById('days')?.value;
|
const days = document.getElementById('days')?.value;
|
||||||
const dayLabel = document.getElementById('dayLabel');
|
const dayLabel = document.getElementById('dayLabel');
|
||||||
|
const mealNote = document.getElementById('mealNote');
|
||||||
if (dayLabel && days) {
|
if (dayLabel && days) {
|
||||||
const numDays = parseInt(days);
|
const numDays = parseInt(days);
|
||||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||||
}
|
}
|
||||||
|
if (mealNote) {
|
||||||
|
if (this.showPerMeal && days) {
|
||||||
|
const numDays = parseInt(days);
|
||||||
|
const totalMeals = numDays * this.mealsPerDay;
|
||||||
|
mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
|
||||||
|
mealNote.style.display = 'inline';
|
||||||
|
} else {
|
||||||
|
mealNote.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveUnitButton(unit) {
|
setActiveUnitButton(unit) {
|
||||||
@@ -3069,6 +3476,31 @@
|
|||||||
this.sendHeightToParent();
|
this.sendHeightToParent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateCupsButtonState() {
|
||||||
|
const cupsButton = document.getElementById('cupsButton');
|
||||||
|
if (!cupsButton) return;
|
||||||
|
|
||||||
|
// Check if any food source has kcal/cup selected
|
||||||
|
const hasKcalCup = this.foodSources.some(fs =>
|
||||||
|
fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasKcalCup) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
} else {
|
||||||
|
cupsButton.disabled = true;
|
||||||
|
cupsButton.title = 'Available when using kcal/cup measurement';
|
||||||
|
|
||||||
|
// If cups was selected, switch back to grams
|
||||||
|
const unitSelect = document.getElementById('unit');
|
||||||
|
if (unitSelect && unitSelect.value === 'cups') {
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
updateFoodCalculations() {
|
updateFoodCalculations() {
|
||||||
if (this.currentMER === 0) return;
|
if (this.currentMER === 0) return;
|
||||||
|
|
||||||
@@ -3081,15 +3513,36 @@
|
|||||||
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
|
const totalAmountDisplay = document.getElementById('totalAmountDisplay');
|
||||||
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
|
const foodBreakdownResults = document.getElementById('foodBreakdownResults');
|
||||||
const foodBreakdownList = document.getElementById('foodBreakdownList');
|
const foodBreakdownList = document.getElementById('foodBreakdownList');
|
||||||
|
const feedingConfig = document.getElementById('feedingConfig');
|
||||||
|
|
||||||
|
// Update cups button state
|
||||||
|
this.updateCupsButtonState();
|
||||||
|
|
||||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const days = daysInput.value;
|
const days = daysInput.value;
|
||||||
const unit = unitSelect.value;
|
let unit = unitSelect.value;
|
||||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
|
||||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
// Failsafe: if unit is empty string but cups button is active, use 'cups'
|
||||||
|
if (!unit || unit === '') {
|
||||||
|
const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
|
||||||
|
if (activeButton) {
|
||||||
|
unit = activeButton.dataset.unit || 'g';
|
||||||
|
} else {
|
||||||
|
unit = 'g'; // Default fallback
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
|
||||||
|
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
|
||||||
|
|
||||||
|
// Debug: log what unit is being used
|
||||||
|
console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
|
||||||
|
|
||||||
|
// Determine frequency suffix for display
|
||||||
|
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
|
||||||
|
|
||||||
// Clear all food source errors first
|
// Clear all food source errors first
|
||||||
this.foodSources.forEach(fs => {
|
this.foodSources.forEach(fs => {
|
||||||
@@ -3103,6 +3556,7 @@
|
|||||||
foodAmountsSection.style.display = 'none';
|
foodAmountsSection.style.display = 'none';
|
||||||
dailyFoodResults.style.display = 'none';
|
dailyFoodResults.style.display = 'none';
|
||||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||||
|
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||||
|
|
||||||
// Hide unit buttons when validation fails
|
// Hide unit buttons when validation fails
|
||||||
const unitButtons = document.getElementById('unitButtons');
|
const unitButtons = document.getElementById('unitButtons');
|
||||||
@@ -3122,15 +3576,44 @@
|
|||||||
|
|
||||||
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
|
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
|
||||||
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
||||||
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
let dailyGramsForThisFood;
|
||||||
|
let dailyCupsForThisFood = null;
|
||||||
|
|
||||||
|
// For kcal/cup, calculate cups directly from calories
|
||||||
|
if (fs.energyUnit === 'kcalcup' && fs.energy) {
|
||||||
|
const caloriesPerCup = parseFloat(fs.energy);
|
||||||
|
dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
|
||||||
|
// We still need grams for total calculation, use approximation
|
||||||
|
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||||
|
console.log('Cups calculation:', {
|
||||||
|
caloriesPerCup,
|
||||||
|
dailyCaloriesForThisFood,
|
||||||
|
dailyCupsForThisFood,
|
||||||
|
dailyGramsForThisFood
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// For other units, calculate grams normally
|
||||||
|
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate per-meal amounts if needed
|
||||||
|
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
|
||||||
|
const displayCups = dailyCupsForThisFood !== null ?
|
||||||
|
(this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
|
||||||
|
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
|
||||||
|
|
||||||
foodBreakdowns.push({
|
foodBreakdowns.push({
|
||||||
name: fs.name,
|
name: fs.name,
|
||||||
percentage: fs.percentage,
|
percentage: fs.percentage,
|
||||||
dailyGrams: dailyGramsForThisFood,
|
dailyGrams: dailyGramsForThisFood,
|
||||||
|
displayGrams: displayGrams,
|
||||||
|
dailyCups: dailyCupsForThisFood,
|
||||||
|
displayCups: displayCups,
|
||||||
calories: dailyCaloriesForThisFood,
|
calories: dailyCaloriesForThisFood,
|
||||||
|
displayCalories: displayCalories,
|
||||||
isLocked: fs.isLocked,
|
isLocked: fs.isLocked,
|
||||||
hasEnergyContent: true
|
hasEnergyContent: true,
|
||||||
|
foodSource: fs // Store reference for cups conversion
|
||||||
});
|
});
|
||||||
|
|
||||||
totalDailyGrams += dailyGramsForThisFood;
|
totalDailyGrams += dailyGramsForThisFood;
|
||||||
@@ -3141,9 +3624,14 @@
|
|||||||
name: fs.name,
|
name: fs.name,
|
||||||
percentage: fs.percentage,
|
percentage: fs.percentage,
|
||||||
dailyGrams: 0,
|
dailyGrams: 0,
|
||||||
|
displayGrams: 0,
|
||||||
|
dailyCups: null,
|
||||||
|
displayCups: null,
|
||||||
calories: 0,
|
calories: 0,
|
||||||
|
displayCalories: 0,
|
||||||
isLocked: fs.isLocked,
|
isLocked: fs.isLocked,
|
||||||
hasEnergyContent: false
|
hasEnergyContent: false,
|
||||||
|
foodSource: fs // Store reference for cups conversion
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -3159,6 +3647,7 @@
|
|||||||
|
|
||||||
dailyFoodResults.style.display = 'none';
|
dailyFoodResults.style.display = 'none';
|
||||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||||
|
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||||
|
|
||||||
// Hide unit buttons when no valid foods
|
// Hide unit buttons when no valid foods
|
||||||
const unitButtons = document.getElementById('unitButtons');
|
const unitButtons = document.getElementById('unitButtons');
|
||||||
@@ -3205,6 +3694,17 @@
|
|||||||
// Update daily food results (total) - will be updated with proper units later
|
// Update daily food results (total) - will be updated with proper units later
|
||||||
dailyFoodResults.style.display = 'block';
|
dailyFoodResults.style.display = 'block';
|
||||||
|
|
||||||
|
// Show feeding configuration when we have valid foods
|
||||||
|
if (feedingConfig) {
|
||||||
|
feedingConfig.style.display = 'block';
|
||||||
|
|
||||||
|
// Ensure "Per day" is checked when feeding config becomes visible
|
||||||
|
const showDaily = document.getElementById('showDaily');
|
||||||
|
if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
|
||||||
|
showDaily.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Show unit buttons when daily results are shown
|
// Show unit buttons when daily results are shown
|
||||||
const unitButtons = document.getElementById('unitButtons');
|
const unitButtons = document.getElementById('unitButtons');
|
||||||
if (unitButtons) unitButtons.style.display = 'flex';
|
if (unitButtons) unitButtons.style.display = 'flex';
|
||||||
@@ -3212,9 +3712,21 @@
|
|||||||
// Update per-food breakdown
|
// Update per-food breakdown
|
||||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||||
const valueContent = breakdown.hasEnergyContent
|
let valueContent;
|
||||||
? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
|
if (breakdown.hasEnergyContent) {
|
||||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
if (unit === 'cups') {
|
||||||
|
// For cups, use the pre-calculated cups value if available
|
||||||
|
if (breakdown.displayCups !== null) {
|
||||||
|
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
|
||||||
|
} else {
|
||||||
|
valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="dog-calculator-food-result-item">
|
<div class="dog-calculator-food-result-item">
|
||||||
@@ -3233,8 +3745,41 @@
|
|||||||
// Generate individual food amount breakdown
|
// Generate individual food amount breakdown
|
||||||
|
|
||||||
// Update daily food value with correct units
|
// Update daily food value with correct units
|
||||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
|
||||||
dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
|
let convertedTotal;
|
||||||
|
let totalDisplayText;
|
||||||
|
|
||||||
|
if (unit === 'cups') {
|
||||||
|
console.log('Unit is cups, checking validity...');
|
||||||
|
// For cups, we can only show total if all foods with percentage > 0 have kcal/cup
|
||||||
|
const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
|
||||||
|
.every(b => b.displayCups !== null && b.displayCups !== undefined);
|
||||||
|
|
||||||
|
console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
|
||||||
|
|
||||||
|
if (validForCups) {
|
||||||
|
// Calculate total cups using pre-calculated values
|
||||||
|
let totalCups = 0;
|
||||||
|
foodBreakdowns.forEach(breakdown => {
|
||||||
|
if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
|
||||||
|
totalCups += breakdown.displayCups;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Total cups display:', {
|
||||||
|
totalCups,
|
||||||
|
displayTotal,
|
||||||
|
foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
|
||||||
|
});
|
||||||
|
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||||
|
} else {
|
||||||
|
totalDisplayText = 'Mixed units - see breakdown';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
convertedTotal = this.convertUnits(displayTotal, unit);
|
||||||
|
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
dailyFoodValue.textContent = totalDisplayText;
|
||||||
|
|
||||||
// Build HTML for individual food amounts
|
// Build HTML for individual food amounts
|
||||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||||
@@ -3255,8 +3800,24 @@
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
// For multi-day calculations: show total amount for all days
|
||||||
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
let amountDisplay;
|
||||||
|
if (unit === 'cups') {
|
||||||
|
// For cups, use pre-calculated cups value
|
||||||
|
if (breakdown.dailyCups !== null) {
|
||||||
|
const totalCupsForDays = breakdown.dailyCups * numDays;
|
||||||
|
amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
|
||||||
|
} else {
|
||||||
|
amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// For other units, calculate from grams
|
||||||
|
const totalGramsForDays = this.showPerMeal
|
||||||
|
? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
|
||||||
|
: breakdown.dailyGrams * numDays;
|
||||||
|
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
||||||
|
amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="dog-calculator-food-amount-item">
|
<div class="dog-calculator-food-amount-item">
|
||||||
@@ -3266,7 +3827,7 @@
|
|||||||
${lockIndicator}
|
${lockIndicator}
|
||||||
</div>
|
</div>
|
||||||
<div class="dog-calculator-food-amount-value">
|
<div class="dog-calculator-food-amount-value">
|
||||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
${amountDisplay}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -3275,7 +3836,6 @@
|
|||||||
|
|
||||||
// Calculate and display total
|
// Calculate and display total
|
||||||
const totalFoodGrams = totalDailyGrams * numDays;
|
const totalFoodGrams = totalDailyGrams * numDays;
|
||||||
const totalConverted = this.convertUnits(totalFoodGrams, unit);
|
|
||||||
|
|
||||||
// Update the display
|
// Update the display
|
||||||
if (foodAmountsList) {
|
if (foodAmountsList) {
|
||||||
@@ -3283,7 +3843,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (totalAmountDisplay) {
|
if (totalAmountDisplay) {
|
||||||
totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
|
if (unit === 'cups') {
|
||||||
|
// For cups total, check if all foods can be converted
|
||||||
|
const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
|
||||||
|
.every(b => b.dailyCups !== null && b.dailyCups !== undefined);
|
||||||
|
|
||||||
|
if (validForCups) {
|
||||||
|
// Calculate total cups using pre-calculated values
|
||||||
|
let totalCups = 0;
|
||||||
|
foodBreakdowns.forEach(breakdown => {
|
||||||
|
if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
|
||||||
|
totalCups += breakdown.dailyCups * numDays;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
|
||||||
|
} else {
|
||||||
|
totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const totalConverted = this.convertUnits(totalFoodGrams, unit);
|
||||||
|
totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
foodAmountsSection.style.display = 'block';
|
foodAmountsSection.style.display = 'block';
|
||||||
|
|||||||
@@ -0,0 +1,538 @@
|
|||||||
|
:root {
|
||||||
|
--bg-primary: #fdfcfe;
|
||||||
|
--bg-secondary: #ffffff;
|
||||||
|
--border-color: #e8e3ed;
|
||||||
|
--text-primary: #6f3f6d;
|
||||||
|
--text-secondary: #8f7a8e;
|
||||||
|
--accent-color: #f19a5f;
|
||||||
|
--text-label: #635870; /* For form labels, secondary UI text */
|
||||||
|
--success-color: #7fa464; /* Green for success states */
|
||||||
|
--bg-tertiary: #f8f5fa; /* Light background variant */
|
||||||
|
--error-color: #e87159; /* Error states and messages */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container.loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container *,
|
||||||
|
.dog-calculator-container *::before,
|
||||||
|
.dog-calculator-container *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unit Switch */
|
||||||
|
.dog-calculator-unit-switch {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-unit-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-label);
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-unit-label.active {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 48px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--border-color);
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: white;
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-switch input:checked + .dog-calculator-slider {
|
||||||
|
background-color: #f19a5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-switch input:checked + .dog-calculator-slider:before {
|
||||||
|
transform: translateX(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group select,
|
||||||
|
.dog-calculator-form-group input[type="number"],
|
||||||
|
.dog-calculator-form-group input[type="text"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 12px center;
|
||||||
|
background-size: 20px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group select option {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group input[type="number"],
|
||||||
|
.dog-calculator-form-group input[type="text"] {
|
||||||
|
background-image: none;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group select:focus,
|
||||||
|
.dog-calculator-form-group input[type="number"]:focus,
|
||||||
|
.dog-calculator-form-group input[type="text"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #f19a5f;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-form-group input[readonly] {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: var(--text-label);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-results {
|
||||||
|
background: linear-gradient(135deg, rgba(241, 154, 95, 0.08) 0%, rgba(241, 154, 95, 0.04) 100%);
|
||||||
|
border: 1px solid rgba(241, 154, 95, 0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-result-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-result-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-result-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-result-value {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 4px 12px;
|
||||||
|
background: rgba(241, 154, 95, 0.15);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-top: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible-header {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible-inner {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-input-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-input-group .dog-calculator-form-group {
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-unit-select {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-error {
|
||||||
|
color: var(--error-color);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-top: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
|
.dog-calculator-action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-left: 1px solid var(--border-color);
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
margin-top: -1px;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
background: white;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-btn-share:hover {
|
||||||
|
border-color: #9f5999;
|
||||||
|
color: #9f5999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-btn-embed:hover {
|
||||||
|
border-color: var(--success-color);
|
||||||
|
color: var(--success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
border-top: none;
|
||||||
|
margin-top: -1px;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-footer a {
|
||||||
|
color: #9f5999;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-footer a:hover {
|
||||||
|
color: #f19a5f;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive Design */
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.dog-calculator-container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section,
|
||||||
|
.dog-calculator-collapsible-inner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section h2,
|
||||||
|
.dog-calculator-collapsible-header h3 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-section h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-unit-switch {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-action-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-input-group {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-input-group .dog-calculator-form-group {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* First form group takes 55%, second takes 40% with some flex */
|
||||||
|
.dog-calculator-input-group .dog-calculator-form-group:first-child {
|
||||||
|
flex: 0 0 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-input-group .dog-calculator-form-group:last-child {
|
||||||
|
flex: 1 1 40%;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure number inputs don't get too wide */
|
||||||
|
.dog-calculator-input-group input[type="number"] {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure dropdowns don't overflow their containers */
|
||||||
|
.dog-calculator-input-group select {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dog-calculator-result-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-result-value {
|
||||||
|
align-self: stretch;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-collapsible-header {
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feeding Configuration Styles */
|
||||||
|
.dog-calculator-container .dog-calculator-feeding-config {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-frequency-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-frequency-row > label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-label);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-radio-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-radio-group label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-radio-group input[type="radio"] {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-meal-input {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-meal-input span {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-meal-input input[type="number"] {
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Update meal note styling */
|
||||||
|
.dog-calculator-container #mealNote {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive adjustments for feeding config */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.dog-calculator-meal-input {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dog-calculator-frequency-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme - manual override */
|
||||||
+1504
File diff suppressed because it is too large
Load Diff
+213
@@ -0,0 +1,213 @@
|
|||||||
|
<div class="dog-calculator-container" id="dogCalculator">
|
||||||
|
<div class="dog-calculator-section">
|
||||||
|
<div class="dog-calculator-section-header">
|
||||||
|
<h2>Dog's Characteristics</h2>
|
||||||
|
<div class="dog-calculator-unit-switch">
|
||||||
|
<span class="dog-calculator-unit-label active" id="metricLabel">Metric</span>
|
||||||
|
<label class="dog-calculator-switch">
|
||||||
|
<input type="checkbox" id="unitToggle">
|
||||||
|
<span class="dog-calculator-slider"></span>
|
||||||
|
</label>
|
||||||
|
<span class="dog-calculator-unit-label" id="imperialLabel">Imperial</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-form-group">
|
||||||
|
<label for="dogType">Dog Type / Activity Level:</label>
|
||||||
|
<select id="dogType" aria-describedby="dogTypeHelp">
|
||||||
|
<option value="">Select dog type...</option>
|
||||||
|
<option value="3.0">Puppy (0-4 months)</option>
|
||||||
|
<option value="2.0">Puppy (4 months - adult)</option>
|
||||||
|
<option value="1.2">Adult - inactive/obese</option>
|
||||||
|
<option value="1.6">Adult (neutered/spayed) - average activity</option>
|
||||||
|
<option value="1.8">Adult (intact) - average activity</option>
|
||||||
|
<option value="1.0">Adult - weight loss</option>
|
||||||
|
<option value="1.7">Adult - weight gain</option>
|
||||||
|
<option value="2.0">Working dog - light work</option>
|
||||||
|
<option value="3.0">Working dog - moderate work</option>
|
||||||
|
<option value="5.0">Working dog - heavy work</option>
|
||||||
|
<option value="1.1">Senior dog</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-form-group">
|
||||||
|
<label for="weight" id="weightLabel">Dog's Weight (kg):</label>
|
||||||
|
<input type="number" id="weight" min="0.1" step="0.1" placeholder="Enter weight in kg" aria-describedby="weightHelp">
|
||||||
|
<div id="weightError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid weight (minimum 0.1 kg)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-results" id="calorieResults" style="display: none;">
|
||||||
|
<div class="dog-calculator-result-item">
|
||||||
|
<span class="dog-calculator-result-label">Resting Energy Requirement (RER):</span>
|
||||||
|
<span class="dog-calculator-result-value" id="rerValue">- cal/day</span>
|
||||||
|
</div>
|
||||||
|
<div class="dog-calculator-result-item">
|
||||||
|
<span class="dog-calculator-result-label">Maintenance Energy Requirement (MER):</span>
|
||||||
|
<span class="dog-calculator-result-value" id="merValue">- cal/day</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-collapsible active" id="foodCalculator">
|
||||||
|
<div class="dog-calculator-collapsible-header">
|
||||||
|
<h3>How much should I feed?</h3>
|
||||||
|
</div>
|
||||||
|
<div class="dog-calculator-collapsible-content">
|
||||||
|
<div class="dog-calculator-collapsible-inner">
|
||||||
|
<!-- Food Sources Container -->
|
||||||
|
<div class="dog-calculator-food-sources" id="foodSources">
|
||||||
|
<!-- Initial food source will be added by JavaScript -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Food Source Button -->
|
||||||
|
<button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button">
|
||||||
|
<span>+</span>
|
||||||
|
<span>Add another food source</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Feeding Configuration -->
|
||||||
|
<div class="dog-calculator-feeding-config" id="feedingConfig" style="display: none;">
|
||||||
|
<div class="dog-calculator-frequency-row">
|
||||||
|
<label>Show amounts:</label>
|
||||||
|
<div class="dog-calculator-radio-group">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="showAs" value="daily" id="showDaily" checked>
|
||||||
|
<span>Per day</span>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="showAs" value="meal" id="showPerMeal">
|
||||||
|
<span>Per meal</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="dog-calculator-meal-input" id="mealInputGroup" style="display: none;">
|
||||||
|
<span>×</span>
|
||||||
|
<input type="number" id="mealsPerDay" value="2" min="1" max="10">
|
||||||
|
<span>meals/day</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Per-Food Results -->
|
||||||
|
<div class="dog-calculator-food-results" id="foodBreakdownResults" style="display: none;">
|
||||||
|
<div id="foodBreakdownList">
|
||||||
|
<!-- Individual food breakdowns will be populated by JavaScript -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Unit Selection Buttons -->
|
||||||
|
<div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;">
|
||||||
|
<button type="button" class="dog-calculator-unit-btn active" data-unit="g">g</button>
|
||||||
|
<button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
|
||||||
|
<button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
|
||||||
|
<button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
|
||||||
|
<button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Daily Total Results -->
|
||||||
|
<div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
|
||||||
|
<div class="dog-calculator-result-item">
|
||||||
|
<span class="dog-calculator-result-label">Total Daily Amount:</span>
|
||||||
|
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hidden select for compatibility -->
|
||||||
|
<select id="unit" class="dog-calculator-unit-select-hidden" aria-describedby="unitHelp">
|
||||||
|
<option value="g">grams (g)</option>
|
||||||
|
<option value="kg">kilograms (kg)</option>
|
||||||
|
<option value="oz">ounces (oz)</option>
|
||||||
|
<option value="lb">pounds (lb)</option>
|
||||||
|
<option value="cups">cups</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||||
|
<h4 class="dog-calculator-section-title">
|
||||||
|
Calculate amounts for
|
||||||
|
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
|
||||||
|
<span id="dayLabel">day</span><span id="mealNote" style="display: none;"></span>:
|
||||||
|
</h4>
|
||||||
|
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||||
|
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||||
|
<!-- Individual food amounts will be populated here -->
|
||||||
|
</div>
|
||||||
|
<div class="dog-calculator-total-row" id="totalAmountRow">
|
||||||
|
<span class="dog-calculator-total-label">Total Amount:</span>
|
||||||
|
<span class="dog-calculator-total-value" id="totalAmountDisplay"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-action-buttons">
|
||||||
|
<button class="dog-calculator-btn dog-calculator-btn-share" id="shareBtn">
|
||||||
|
Share
|
||||||
|
</button>
|
||||||
|
<button class="dog-calculator-btn dog-calculator-btn-embed" id="embedBtn">
|
||||||
|
Embed
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dog-calculator-footer">
|
||||||
|
<a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
|
||||||
|
by caninenutritionandwellness.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- Share Modal -->
|
||||||
|
<div id="shareModal" class="dog-calculator-modal" style="display: none;">
|
||||||
|
<div class="dog-calculator-modal-content">
|
||||||
|
<span class="dog-calculator-modal-close" id="shareModalClose">×</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>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* Configuration constants for Dog Calorie Calculator
|
||||||
|
*/
|
||||||
|
|
||||||
|
const CALCULATOR_CONFIG = {
|
||||||
|
defaultTheme: 'system',
|
||||||
|
defaultScale: 1.0,
|
||||||
|
maxFoodSources: 5,
|
||||||
|
minScale: 0.5,
|
||||||
|
maxScale: 2.0
|
||||||
|
};
|
||||||
+613
-29
@@ -2,8 +2,8 @@
|
|||||||
* Dog Calorie Calculator Widget
|
* Dog Calorie Calculator Widget
|
||||||
* Embeddable JavaScript widget for websites
|
* Embeddable JavaScript widget for websites
|
||||||
*
|
*
|
||||||
* THIS CODE IS AUTO-GENERATED FROM iframe.html - DO NOT EDIT MANUALLY
|
* THIS CODE IS AUTO-GENERATED FROM src/ FILES - DO NOT EDIT MANUALLY
|
||||||
* Edit iframe.html and run 'node build.js' to update this file
|
* Edit files in src/ directory and run 'node build.js' to update
|
||||||
*
|
*
|
||||||
* Usage:
|
* Usage:
|
||||||
* <script src="sundog-dog-food-calculator.js"></script>
|
* <script src="sundog-dog-food-calculator.js"></script>
|
||||||
@@ -462,13 +462,116 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Dark theme - manual override */
|
/* Dark theme - manual override */
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -572,6 +675,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);
|
||||||
@@ -613,14 +729,55 @@
|
|||||||
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 */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -724,6 +881,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);
|
||||||
@@ -764,6 +934,43 @@
|
|||||||
border-color: var(--success-color);
|
border-color: var(--success-color);
|
||||||
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 */
|
||||||
@@ -1673,6 +1880,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;
|
||||||
@@ -1855,8 +2076,20 @@
|
|||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ACTUAL JavaScript from iframe.html (transformed for widget use)
|
// JavaScript from src/calculator.js (transformed for widget use)
|
||||||
/**
|
/**
|
||||||
|
* Configuration constants for Dog Calorie Calculator
|
||||||
|
*/
|
||||||
|
|
||||||
|
const CALCULATOR_CONFIG = {
|
||||||
|
defaultTheme: 'system',
|
||||||
|
defaultScale: 1.0,
|
||||||
|
maxFoodSources: 5,
|
||||||
|
minScale: 0.5,
|
||||||
|
maxScale: 2.0
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
* Dog Calorie Calculator - iframe version
|
* Dog Calorie Calculator - iframe version
|
||||||
* by Canine Nutrition and Wellness
|
* by Canine Nutrition and Wellness
|
||||||
*/
|
*/
|
||||||
@@ -1873,9 +2106,12 @@
|
|||||||
this.scale = this.options.scale;
|
this.scale = this.options.scale;
|
||||||
this.currentMER = 0;
|
this.currentMER = 0;
|
||||||
this.isImperial = false;
|
this.isImperial = false;
|
||||||
|
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
|
||||||
|
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
|
||||||
this.foodSources = [];
|
this.foodSources = [];
|
||||||
this.maxFoodSources = 5;
|
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
|
||||||
|
this.mealsPerDay = 2;
|
||||||
|
this.showPerMeal = false;
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1948,6 +2184,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">
|
||||||
@@ -1961,6 +2219,7 @@
|
|||||||
<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="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="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 -->
|
||||||
@@ -1977,13 +2236,14 @@
|
|||||||
<option value="kg">kilograms (kg)</option>
|
<option value="kg">kilograms (kg)</option>
|
||||||
<option value="oz">ounces (oz)</option>
|
<option value="oz">ounces (oz)</option>
|
||||||
<option value="lb">pounds (lb)</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;">
|
||||||
<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">
|
||||||
@@ -2097,7 +2357,7 @@
|
|||||||
getScaleFromURL() {
|
getScaleFromURL() {
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
const scale = parseFloat(urlParams.get('scale'));
|
const scale = parseFloat(urlParams.get('scale'));
|
||||||
return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : null;
|
return (!isNaN(scale) && scale >= CALCULATOR_CONFIG.minScale && scale <= CALCULATOR_CONFIG.maxScale) ? scale : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
applyTheme() {
|
applyTheme() {
|
||||||
@@ -2110,8 +2370,8 @@
|
|||||||
const container = this.container.querySelector('#dogCalculator');
|
const container = this.container.querySelector('#dogCalculator');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
// Clamp scale between 0.5 and 2.0 for usability
|
// Clamp scale between min and max for usability
|
||||||
const clampedScale = Math.max(0.5, Math.min(2.0, this.scale));
|
const clampedScale = Math.max(CALCULATOR_CONFIG.minScale, Math.min(CALCULATOR_CONFIG.maxScale, this.scale));
|
||||||
|
|
||||||
if (clampedScale !== 1.0) {
|
if (clampedScale !== 1.0) {
|
||||||
container.style.transform = `scale(${clampedScale})`;
|
container.style.transform = `scale(${clampedScale})`;
|
||||||
@@ -2648,7 +2908,36 @@
|
|||||||
if (energyInput) {
|
if (energyInput) {
|
||||||
energyInput.addEventListener('input', () => {
|
energyInput.addEventListener('input', () => {
|
||||||
this.updateFoodSourceData(id, 'energy', energyInput.value);
|
this.updateFoodSourceData(id, 'energy', energyInput.value);
|
||||||
this.updateFoodCalculations();
|
|
||||||
|
// Auto-select cups when entering energy for kcal/cup
|
||||||
|
const foodSource = this.foodSources.find(fs => fs.id === id);
|
||||||
|
if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
|
||||||
|
const unitSelect = this.container.querySelector('#unit');
|
||||||
|
const cupsButton = this.container.querySelector('#cupsButton');
|
||||||
|
|
||||||
|
// First check if cups button will be enabled after update
|
||||||
|
const willEnableCups = this.foodSources.some(fs =>
|
||||||
|
fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (willEnableCups && unitSelect) {
|
||||||
|
// Set cups BEFORE updating calculations
|
||||||
|
unitSelect.value = 'cups';
|
||||||
|
unitSelect.setAttribute('value', 'cups');
|
||||||
|
this.setActiveUnitButton('cups');
|
||||||
|
|
||||||
|
// Enable the cups button manually since we know it will be valid
|
||||||
|
if (cupsButton) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Now update calculations with cups already selected
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
} else {
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
|
energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
|
||||||
}
|
}
|
||||||
@@ -2656,7 +2945,54 @@
|
|||||||
if (energyUnitSelect) {
|
if (energyUnitSelect) {
|
||||||
energyUnitSelect.addEventListener('change', () => {
|
energyUnitSelect.addEventListener('change', () => {
|
||||||
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
|
this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
|
||||||
this.updateFoodCalculations();
|
|
||||||
|
// Auto-select the most appropriate unit based on energy unit
|
||||||
|
const unitSelect = this.container.querySelector('#unit');
|
||||||
|
const energyInput = document.getElementById(`energy-${id}`);
|
||||||
|
|
||||||
|
if (unitSelect) {
|
||||||
|
switch(energyUnitSelect.value) {
|
||||||
|
case 'kcalcup':
|
||||||
|
// Check if we have energy value to enable cups
|
||||||
|
const foodSource = this.foodSources.find(fs => fs.id === id);
|
||||||
|
if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
|
||||||
|
// Set cups BEFORE updating calculations
|
||||||
|
unitSelect.value = 'cups';
|
||||||
|
unitSelect.setAttribute('value', 'cups');
|
||||||
|
this.setActiveUnitButton('cups');
|
||||||
|
|
||||||
|
// Enable the cups button manually
|
||||||
|
const cupsButton = this.container.querySelector('#cupsButton');
|
||||||
|
if (cupsButton) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcal100g':
|
||||||
|
// For kcal/100g, select grams
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcalkg':
|
||||||
|
// For kcal/kg, also select grams (or could be kg)
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
case 'kcalcan':
|
||||||
|
// For kcal/can, use grams as default (or ounces in imperial)
|
||||||
|
unitSelect.value = this.isImperial ? 'oz' : 'g';
|
||||||
|
this.setActiveUnitButton(unitSelect.value);
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// No unit select, just update calculations
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2826,6 +3162,58 @@
|
|||||||
|
|
||||||
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
|
||||||
|
|
||||||
|
// Feeding configuration event listeners
|
||||||
|
const showDaily = this.container.querySelector('#showDaily');
|
||||||
|
const showPerMeal = this.container.querySelector('#showPerMeal');
|
||||||
|
const mealsPerDayInput = this.container.querySelector('#mealsPerDay');
|
||||||
|
const mealInputGroup = this.container.querySelector('#mealInputGroup');
|
||||||
|
|
||||||
|
if (showDaily) {
|
||||||
|
showDaily.addEventListener('change', () => {
|
||||||
|
if (showDaily.checked) {
|
||||||
|
this.showPerMeal = false;
|
||||||
|
if (mealInputGroup) mealInputGroup.style.display = 'none';
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showPerMeal) {
|
||||||
|
showPerMeal.addEventListener('change', () => {
|
||||||
|
if (showPerMeal.checked) {
|
||||||
|
this.showPerMeal = true;
|
||||||
|
if (mealInputGroup) mealInputGroup.style.display = 'inline-flex';
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mealsPerDayInput) {
|
||||||
|
mealsPerDayInput.addEventListener('input', () => {
|
||||||
|
const meals = parseInt(mealsPerDayInput.value);
|
||||||
|
if (meals && meals >= 1 && meals <= 10) {
|
||||||
|
this.mealsPerDay = meals;
|
||||||
|
if (this.showPerMeal) {
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mealsPerDayInput.addEventListener('blur', () => {
|
||||||
|
if (!mealsPerDayInput.value || parseInt(mealsPerDayInput.value) < 1) {
|
||||||
|
mealsPerDayInput.value = 2;
|
||||||
|
this.mealsPerDay = 2;
|
||||||
|
if (this.showPerMeal) {
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Modal event listeners
|
// Modal event listeners
|
||||||
const shareBtn = this.container.querySelector('#shareBtn');
|
const shareBtn = this.container.querySelector('#shareBtn');
|
||||||
const embedBtn = this.container.querySelector('#embedBtn');
|
const embedBtn = this.container.querySelector('#embedBtn');
|
||||||
@@ -3002,7 +3390,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
convertUnits(grams, unit) {
|
convertUnits(grams, unit, foodSource = null) {
|
||||||
switch (unit) {
|
switch (unit) {
|
||||||
case 'kg':
|
case 'kg':
|
||||||
return grams / 1000;
|
return grams / 1000;
|
||||||
@@ -3010,6 +3398,18 @@
|
|||||||
return grams / 28.3495;
|
return grams / 28.3495;
|
||||||
case 'lb':
|
case 'lb':
|
||||||
return grams / 453.592;
|
return grams / 453.592;
|
||||||
|
case 'cups':
|
||||||
|
// For cups, we need to convert from grams worth of calories to cups
|
||||||
|
if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
|
||||||
|
// Get calories per 100g for this food
|
||||||
|
const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
|
||||||
|
// Calculate total calories represented by these grams
|
||||||
|
const totalCalories = grams * caloriesPerGram;
|
||||||
|
// Divide by calories per cup to get number of cups
|
||||||
|
const caloriesPerCup = parseFloat(foodSource.energy);
|
||||||
|
return totalCalories / caloriesPerCup;
|
||||||
|
}
|
||||||
|
return null; // Cannot convert to cups without kcal/cup
|
||||||
default:
|
default:
|
||||||
return grams;
|
return grams;
|
||||||
}
|
}
|
||||||
@@ -3044,10 +3444,21 @@
|
|||||||
updateDayLabel() {
|
updateDayLabel() {
|
||||||
const days = this.container.querySelector('#days')?.value;
|
const days = this.container.querySelector('#days')?.value;
|
||||||
const dayLabel = this.container.querySelector('#dayLabel');
|
const dayLabel = this.container.querySelector('#dayLabel');
|
||||||
|
const mealNote = this.container.querySelector('#mealNote');
|
||||||
if (dayLabel && days) {
|
if (dayLabel && days) {
|
||||||
const numDays = parseInt(days);
|
const numDays = parseInt(days);
|
||||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||||
}
|
}
|
||||||
|
if (mealNote) {
|
||||||
|
if (this.showPerMeal && days) {
|
||||||
|
const numDays = parseInt(days);
|
||||||
|
const totalMeals = numDays * this.mealsPerDay;
|
||||||
|
mealNote.textContent = ` (${totalMeals} meal${totalMeals === 1 ? '' : 's'} total)`;
|
||||||
|
mealNote.style.display = 'inline';
|
||||||
|
} else {
|
||||||
|
mealNote.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveUnitButton(unit) {
|
setActiveUnitButton(unit) {
|
||||||
@@ -3102,6 +3513,31 @@
|
|||||||
this.sendHeightToParent();
|
this.sendHeightToParent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateCupsButtonState() {
|
||||||
|
const cupsButton = this.container.querySelector('#cupsButton');
|
||||||
|
if (!cupsButton) return;
|
||||||
|
|
||||||
|
// Check if any food source has kcal/cup selected
|
||||||
|
const hasKcalCup = this.foodSources.some(fs =>
|
||||||
|
fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasKcalCup) {
|
||||||
|
cupsButton.disabled = false;
|
||||||
|
cupsButton.title = 'Show amounts in cups';
|
||||||
|
} else {
|
||||||
|
cupsButton.disabled = true;
|
||||||
|
cupsButton.title = 'Available when using kcal/cup measurement';
|
||||||
|
|
||||||
|
// If cups was selected, switch back to grams
|
||||||
|
const unitSelect = this.container.querySelector('#unit');
|
||||||
|
if (unitSelect && unitSelect.value === 'cups') {
|
||||||
|
unitSelect.value = 'g';
|
||||||
|
this.setActiveUnitButton('g');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
updateFoodCalculations() {
|
updateFoodCalculations() {
|
||||||
if (this.currentMER === 0) return;
|
if (this.currentMER === 0) return;
|
||||||
|
|
||||||
@@ -3114,15 +3550,36 @@
|
|||||||
const totalAmountDisplay = this.container.querySelector('#totalAmountDisplay');
|
const totalAmountDisplay = this.container.querySelector('#totalAmountDisplay');
|
||||||
const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
|
const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
|
||||||
const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
|
const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
|
||||||
|
const feedingConfig = this.container.querySelector('#feedingConfig');
|
||||||
|
|
||||||
|
// Update cups button state
|
||||||
|
this.updateCupsButtonState();
|
||||||
|
|
||||||
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const days = daysInput.value;
|
const days = daysInput.value;
|
||||||
const unit = unitSelect.value;
|
let unit = unitSelect.value;
|
||||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
|
||||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
// Failsafe: if unit is empty string but cups button is active, use 'cups'
|
||||||
|
if (!unit || unit === '') {
|
||||||
|
const activeButton = this.container.querySelector('.dog-calculator-unit-btn.active');
|
||||||
|
if (activeButton) {
|
||||||
|
unit = activeButton.dataset.unit || 'g';
|
||||||
|
} else {
|
||||||
|
unit = 'g'; // Default fallback
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
|
||||||
|
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
|
||||||
|
|
||||||
|
// Debug: log what unit is being used
|
||||||
|
console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
|
||||||
|
|
||||||
|
// Determine frequency suffix for display
|
||||||
|
const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
|
||||||
|
|
||||||
// Clear all food source errors first
|
// Clear all food source errors first
|
||||||
this.foodSources.forEach(fs => {
|
this.foodSources.forEach(fs => {
|
||||||
@@ -3136,6 +3593,7 @@
|
|||||||
foodAmountsSection.style.display = 'none';
|
foodAmountsSection.style.display = 'none';
|
||||||
dailyFoodResults.style.display = 'none';
|
dailyFoodResults.style.display = 'none';
|
||||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||||
|
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||||
|
|
||||||
// Hide unit buttons when validation fails
|
// Hide unit buttons when validation fails
|
||||||
const unitButtons = this.container.querySelector('#unitButtons');
|
const unitButtons = this.container.querySelector('#unitButtons');
|
||||||
@@ -3155,15 +3613,44 @@
|
|||||||
|
|
||||||
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
|
if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
|
||||||
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
|
||||||
const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
let dailyGramsForThisFood;
|
||||||
|
let dailyCupsForThisFood = null;
|
||||||
|
|
||||||
|
// For kcal/cup, calculate cups directly from calories
|
||||||
|
if (fs.energyUnit === 'kcalcup' && fs.energy) {
|
||||||
|
const caloriesPerCup = parseFloat(fs.energy);
|
||||||
|
dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
|
||||||
|
// We still need grams for total calculation, use approximation
|
||||||
|
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||||
|
console.log('Cups calculation:', {
|
||||||
|
caloriesPerCup,
|
||||||
|
dailyCaloriesForThisFood,
|
||||||
|
dailyCupsForThisFood,
|
||||||
|
dailyGramsForThisFood
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// For other units, calculate grams normally
|
||||||
|
dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate per-meal amounts if needed
|
||||||
|
const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
|
||||||
|
const displayCups = dailyCupsForThisFood !== null ?
|
||||||
|
(this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
|
||||||
|
const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
|
||||||
|
|
||||||
foodBreakdowns.push({
|
foodBreakdowns.push({
|
||||||
name: fs.name,
|
name: fs.name,
|
||||||
percentage: fs.percentage,
|
percentage: fs.percentage,
|
||||||
dailyGrams: dailyGramsForThisFood,
|
dailyGrams: dailyGramsForThisFood,
|
||||||
|
displayGrams: displayGrams,
|
||||||
|
dailyCups: dailyCupsForThisFood,
|
||||||
|
displayCups: displayCups,
|
||||||
calories: dailyCaloriesForThisFood,
|
calories: dailyCaloriesForThisFood,
|
||||||
|
displayCalories: displayCalories,
|
||||||
isLocked: fs.isLocked,
|
isLocked: fs.isLocked,
|
||||||
hasEnergyContent: true
|
hasEnergyContent: true,
|
||||||
|
foodSource: fs // Store reference for cups conversion
|
||||||
});
|
});
|
||||||
|
|
||||||
totalDailyGrams += dailyGramsForThisFood;
|
totalDailyGrams += dailyGramsForThisFood;
|
||||||
@@ -3174,9 +3661,14 @@
|
|||||||
name: fs.name,
|
name: fs.name,
|
||||||
percentage: fs.percentage,
|
percentage: fs.percentage,
|
||||||
dailyGrams: 0,
|
dailyGrams: 0,
|
||||||
|
displayGrams: 0,
|
||||||
|
dailyCups: null,
|
||||||
|
displayCups: null,
|
||||||
calories: 0,
|
calories: 0,
|
||||||
|
displayCalories: 0,
|
||||||
isLocked: fs.isLocked,
|
isLocked: fs.isLocked,
|
||||||
hasEnergyContent: false
|
hasEnergyContent: false,
|
||||||
|
foodSource: fs // Store reference for cups conversion
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -3192,6 +3684,7 @@
|
|||||||
|
|
||||||
dailyFoodResults.style.display = 'none';
|
dailyFoodResults.style.display = 'none';
|
||||||
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
|
||||||
|
if (feedingConfig) feedingConfig.style.display = 'none';
|
||||||
|
|
||||||
// Hide unit buttons when no valid foods
|
// Hide unit buttons when no valid foods
|
||||||
const unitButtons = this.container.querySelector('#unitButtons');
|
const unitButtons = this.container.querySelector('#unitButtons');
|
||||||
@@ -3238,6 +3731,17 @@
|
|||||||
// Update daily food results (total) - will be updated with proper units later
|
// Update daily food results (total) - will be updated with proper units later
|
||||||
dailyFoodResults.style.display = 'block';
|
dailyFoodResults.style.display = 'block';
|
||||||
|
|
||||||
|
// Show feeding configuration when we have valid foods
|
||||||
|
if (feedingConfig) {
|
||||||
|
feedingConfig.style.display = 'block';
|
||||||
|
|
||||||
|
// Ensure "Per day" is checked when feeding config becomes visible
|
||||||
|
const showDaily = this.container.querySelector('#showDaily');
|
||||||
|
if (showDaily && !showDaily.checked && !this.container.querySelector('#showPerMeal').checked) {
|
||||||
|
showDaily.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Show unit buttons when daily results are shown
|
// Show unit buttons when daily results are shown
|
||||||
const unitButtons = this.container.querySelector('#unitButtons');
|
const unitButtons = this.container.querySelector('#unitButtons');
|
||||||
if (unitButtons) unitButtons.style.display = 'flex';
|
if (unitButtons) unitButtons.style.display = 'flex';
|
||||||
@@ -3245,9 +3749,21 @@
|
|||||||
// Update per-food breakdown
|
// Update per-food breakdown
|
||||||
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
if (foodBreakdownList && foodBreakdowns.length > 1) {
|
||||||
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
const breakdownHTML = foodBreakdowns.map(breakdown => {
|
||||||
const valueContent = breakdown.hasEnergyContent
|
let valueContent;
|
||||||
? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
|
if (breakdown.hasEnergyContent) {
|
||||||
: `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
if (unit === 'cups') {
|
||||||
|
// For cups, use the pre-calculated cups value if available
|
||||||
|
if (breakdown.displayCups !== null) {
|
||||||
|
valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
|
||||||
|
} else {
|
||||||
|
valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="dog-calculator-food-result-item">
|
<div class="dog-calculator-food-result-item">
|
||||||
@@ -3266,8 +3782,41 @@
|
|||||||
// Generate individual food amount breakdown
|
// Generate individual food amount breakdown
|
||||||
|
|
||||||
// Update daily food value with correct units
|
// Update daily food value with correct units
|
||||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
|
||||||
dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
|
let convertedTotal;
|
||||||
|
let totalDisplayText;
|
||||||
|
|
||||||
|
if (unit === 'cups') {
|
||||||
|
console.log('Unit is cups, checking validity...');
|
||||||
|
// For cups, we can only show total if all foods with percentage > 0 have kcal/cup
|
||||||
|
const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
|
||||||
|
.every(b => b.displayCups !== null && b.displayCups !== undefined);
|
||||||
|
|
||||||
|
console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
|
||||||
|
|
||||||
|
if (validForCups) {
|
||||||
|
// Calculate total cups using pre-calculated values
|
||||||
|
let totalCups = 0;
|
||||||
|
foodBreakdowns.forEach(breakdown => {
|
||||||
|
if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
|
||||||
|
totalCups += breakdown.displayCups;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('Total cups display:', {
|
||||||
|
totalCups,
|
||||||
|
displayTotal,
|
||||||
|
foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
|
||||||
|
});
|
||||||
|
totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||||
|
} else {
|
||||||
|
totalDisplayText = 'Mixed units - see breakdown';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
convertedTotal = this.convertUnits(displayTotal, unit);
|
||||||
|
totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
dailyFoodValue.textContent = totalDisplayText;
|
||||||
|
|
||||||
// Build HTML for individual food amounts
|
// Build HTML for individual food amounts
|
||||||
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
const foodAmountsHTML = foodBreakdowns.map(breakdown => {
|
||||||
@@ -3288,8 +3837,24 @@
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
const totalGramsForDays = breakdown.dailyGrams * numDays;
|
// For multi-day calculations: show total amount for all days
|
||||||
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
let amountDisplay;
|
||||||
|
if (unit === 'cups') {
|
||||||
|
// For cups, use pre-calculated cups value
|
||||||
|
if (breakdown.dailyCups !== null) {
|
||||||
|
const totalCupsForDays = breakdown.dailyCups * numDays;
|
||||||
|
amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
|
||||||
|
} else {
|
||||||
|
amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// For other units, calculate from grams
|
||||||
|
const totalGramsForDays = this.showPerMeal
|
||||||
|
? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
|
||||||
|
: breakdown.dailyGrams * numDays;
|
||||||
|
const convertedAmount = this.convertUnits(totalGramsForDays, unit);
|
||||||
|
amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
|
||||||
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="dog-calculator-food-amount-item">
|
<div class="dog-calculator-food-amount-item">
|
||||||
@@ -3299,7 +3864,7 @@
|
|||||||
${lockIndicator}
|
${lockIndicator}
|
||||||
</div>
|
</div>
|
||||||
<div class="dog-calculator-food-amount-value">
|
<div class="dog-calculator-food-amount-value">
|
||||||
${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
|
${amountDisplay}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -3308,7 +3873,6 @@
|
|||||||
|
|
||||||
// Calculate and display total
|
// Calculate and display total
|
||||||
const totalFoodGrams = totalDailyGrams * numDays;
|
const totalFoodGrams = totalDailyGrams * numDays;
|
||||||
const totalConverted = this.convertUnits(totalFoodGrams, unit);
|
|
||||||
|
|
||||||
// Update the display
|
// Update the display
|
||||||
if (foodAmountsList) {
|
if (foodAmountsList) {
|
||||||
@@ -3316,7 +3880,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (totalAmountDisplay) {
|
if (totalAmountDisplay) {
|
||||||
totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
|
if (unit === 'cups') {
|
||||||
|
// For cups total, check if all foods can be converted
|
||||||
|
const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
|
||||||
|
.every(b => b.dailyCups !== null && b.dailyCups !== undefined);
|
||||||
|
|
||||||
|
if (validForCups) {
|
||||||
|
// Calculate total cups using pre-calculated values
|
||||||
|
let totalCups = 0;
|
||||||
|
foodBreakdowns.forEach(breakdown => {
|
||||||
|
if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
|
||||||
|
totalCups += breakdown.dailyCups * numDays;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
|
||||||
|
} else {
|
||||||
|
totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const totalConverted = this.convertUnits(totalFoodGrams, unit);
|
||||||
|
totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
foodAmountsSection.style.display = 'block';
|
foodAmountsSection.style.display = 'block';
|
||||||
|
|||||||
Reference in New Issue
Block a user