dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Dayowe
2025-06-08 20:31:11 +02:00
parent b14c4dbee8
commit 5afb3a8c5a
4 changed files with 2156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
iframe.html
+179
View File
@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
<link rel="stylesheet" href="styles.css">
<style>
/* iframe-specific optimizations */
body {
margin: 0;
padding: 0;
background: transparent;
overflow-x: hidden;
}
.dog-calculator-container {
margin: 0;
max-width: none;
padding: 16px;
}
/* Ensure proper sizing for iframe */
html, body {
height: auto;
min-height: 100%;
}
/* iframe communication styles */
.dog-calculator-container {
opacity: 0;
transition: opacity 0.3s ease;
}
.dog-calculator-container.loaded {
opacity: 1;
}
</style>
</head>
<body>
<div class="dog-calculator-container" id="dogCalculator">
<div class="dog-calculator-section">
<h2>Dog's Characteristics</h2>
<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">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" id="foodCalculator">
<div class="dog-calculator-collapsible-header" onclick="toggleCollapsible('foodCalculator')">
<h3>How much food is that?</h3>
<span class="dog-calculator-collapsible-arrow">▼</span>
</div>
<div class="dog-calculator-collapsible-content">
<div class="dog-calculator-collapsible-inner">
<div class="dog-calculator-form-group">
<label for="foodEnergy">Food Energy Content (kcal/100g):</label>
<input type="number" id="foodEnergy" min="1" step="1" placeholder="Enter kcal per 100g" aria-describedby="foodEnergyHelp">
<div id="foodEnergyError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content (minimum 1 kcal/100g)</div>
</div>
<div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
<div class="dog-calculator-result-item">
<span class="dog-calculator-result-label">Daily Food Amount:</span>
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
</div>
</div>
<div class="dog-calculator-form-group" style="margin-top: 20px;">
<label for="days">Number of Days:</label>
<input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
</div>
<div class="dog-calculator-input-group">
<div class="dog-calculator-form-group">
<label for="totalFoodDisplay">Total Food Amount:</label>
<input type="text" id="totalFoodDisplay" readonly>
</div>
<div class="dog-calculator-form-group">
<label for="unit">Unit:</label>
<select id="unit" class="dog-calculator-unit-select" 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>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="dog-calculator-footer">
<a href="https://caninenutritionandwellness.com" target="_blank" rel="noopener noreferrer">
by caninenutritionandwellness.com
</a>
</div>
</div>
<script src="calculator.js"></script>
<script>
// iframe auto-resize functionality
function sendHeightToParent() {
const height = document.body.scrollHeight;
if (window.parent && window.parent !== window) {
window.parent.postMessage({
type: 'dogCalculatorResize',
height: height
}, '*');
}
}
// Send initial height
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('dogCalculator');
container.classList.add('loaded');
// Send height after animations complete
setTimeout(() => {
sendHeightToParent();
}, 100);
// Monitor for content changes that might affect height
const observer = new MutationObserver(() => {
setTimeout(sendHeightToParent, 100);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
// Send height on window resize
window.addEventListener('resize', sendHeightToParent);
});
// Override the toggleCollapsible function to handle resize
const originalToggleCollapsible = window.toggleCollapsible;
window.toggleCollapsible = function(id) {
originalToggleCollapsible(id);
setTimeout(sendHeightToParent, 350); // Wait for animation
};
</script>
</body>
</html>