diff --git a/build-system.js b/build-system.js deleted file mode 100644 index 99f86b3..0000000 --- a/build-system.js +++ /dev/null @@ -1,307 +0,0 @@ -#!/usr/bin/env node - -/** - * Dog Calculator Build System - * - * This solves ALL duplication between iframe.html and dog-food-calculator-widget.js: - * - Shared calculation logic - * - Shared CSS styling - * - Shared HTML structure - * - * Usage: node build-system.js - */ - -const fs = require('fs'); - -console.log('🎨 Building Dog Calculator with shared styling and structure...'); - -// Read source files -function readSourceFiles() { - const sharedLogic = fs.readFileSync('dog-calculator-shared.js', 'utf8'); - const sharedCSS = fs.readFileSync('shared-styles.css', 'utf8'); - const sharedHTML = fs.readFileSync('shared-template.html', 'utf8'); - - return { sharedLogic, sharedCSS, sharedHTML }; -} - -// Generate iframe.html -function generateIframe(sharedLogic, sharedCSS, sharedHTML) { - const iframeJS = ` - ${sharedLogic} - - // iframe-specific calculator class - class DogCalorieCalculator { - constructor() { - this.currentMER = 0; - this.isImperial = false; - this.theme = DogCalculatorCore.getThemeFromURL(); - this.scale = DogCalculatorCore.getScaleFromURL(); - this.init(); - } - - init() { - this.applyTheme(); - this.applyScale(); - this.bindEvents(); - this.updateUnitLabels(); - this.setupIframeResize(); - - const container = document.getElementById('dogCalculator'); - container.classList.add('loaded'); - } - - // Use shared core for all calculations - getWeightInKg() { - const weightInput = document.getElementById('weight'); - if (!weightInput || !weightInput.value) return null; - const weight = parseFloat(weightInput.value); - return isNaN(weight) ? null : DogCalculatorCore.convertWeightToKg(weight, this.isImperial); - } - - calculateRER(weightKg) { return DogCalculatorCore.calculateRER(weightKg); } - calculateMER(rer, factor) { return DogCalculatorCore.calculateMER(rer, factor); } - convertUnits(grams, unit) { return DogCalculatorCore.convertUnits(grams, unit); } - formatNumber(num, decimals = 0) { return DogCalculatorCore.formatNumber(num, decimals); } - validateInput(value, min = 0, isInteger = false) { return DogCalculatorCore.validateInput(value, min, isInteger); } - - // iframe-specific methods (theme, scale, resize, etc.) - applyTheme() { - const container = document.getElementById('dogCalculator'); - container.classList.remove('theme-light', 'theme-dark', 'theme-system'); - container.classList.add('theme-' + this.theme); - } - - applyScale() { - const container = document.getElementById('dogCalculator'); - if (!container) return; - const clampedScale = Math.max(0.5, Math.min(2.0, this.scale)); - if (clampedScale !== 1.0) { - container.style.transform = \`scale(\${clampedScale})\`; - container.style.transformOrigin = 'top center'; - setTimeout(() => this.sendHeightToParent(), 100); - } - } - - setupIframeResize() { - this.sendHeightToParent(); - const observer = new MutationObserver(() => { - setTimeout(() => this.sendHeightToParent(), 100); - }); - observer.observe(document.body, { - childList: true, subtree: true, attributes: true - }); - window.addEventListener('resize', () => this.sendHeightToParent()); - } - - sendHeightToParent() { - const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); - if (window.parent && window.parent !== window) { - window.parent.postMessage({ - type: 'dogCalculatorResize', - height: height - }, '*'); - } - } - - // All the other iframe-specific methods (toggleUnits, updateUnitLabels, etc.) - // These would be the full implementations from the original iframe.html - } - - // Initialize when DOM ready - document.addEventListener('DOMContentLoaded', function() { - new DogCalorieCalculator(); - });`; - - const iframeContent = ` - - - - - Dog Calorie Calculator - Canine Nutrition and Wellness - - - - ${sharedHTML} - - -`; - - fs.writeFileSync('iframe.html', iframeContent); - console.log('✓ Generated iframe.html'); -} - -// Generate dog-food-calculator-widget.js -function generateWidget(sharedLogic, sharedCSS, sharedHTML) { - // Convert CSS classes for widget isolation - const widgetCSS = sharedCSS.replace(/dog-calculator-/g, 'dog-calc-'); - const widgetHTML = sharedHTML.replace(/dog-calculator-/g, 'dog-calc-'); - - const widgetContent = `/** - * Dog Calorie Calculator Widget - * Self-contained embeddable widget - * - * By Canine Nutrition and Wellness - * https://caninenutritionandwellness.com - */ - -(function() { - 'use strict'; - - // Embed shared core logic - ${sharedLogic} - - // Embed styles with widget prefixing - const CSS_STYLES = \`${widgetCSS}\`; - - function injectStyles() { - if (document.getElementById('dog-calc-styles')) return; - const style = document.createElement('style'); - style.id = 'dog-calc-styles'; - style.textContent = CSS_STYLES; - document.head.appendChild(style); - } - - // Widget-specific calculator class - class DogCalorieCalculator { - constructor(container, options = {}) { - this.container = container; - this.options = { - theme: options.theme || DogCalculatorCore.getThemeFromURL(), - scale: options.scale || DogCalculatorCore.getScaleFromURL(), - ...options - }; - this.currentMER = 0; - this.isImperial = false; - this.init(); - } - - init() { - this.setupHTML(); - this.applyTheme(); - this.applyScale(); - this.bindEvents(); - this.updateUnitLabels(); - } - - setupHTML() { - this.container.innerHTML = \`${widgetHTML}\`; - } - - // Use shared core for all calculations - calculateRER(weightKg) { return DogCalculatorCore.calculateRER(weightKg); } - calculateMER(rer, factor) { return DogCalculatorCore.calculateMER(rer, factor); } - convertUnits(grams, unit) { return DogCalculatorCore.convertUnits(grams, unit); } - formatNumber(num, decimals = 0) { return DogCalculatorCore.formatNumber(num, decimals); } - validateInput(value, min = 0, isInteger = false) { return DogCalculatorCore.validateInput(value, min, isInteger); } - - // Widget-specific methods (theme, scale, modal handling, etc.) - applyTheme() { - if (this.options.theme === 'light' || this.options.theme === 'dark') { - this.container.setAttribute('data-theme', this.options.theme); - } - } - - applyScale() { - const scale = Math.max(0.5, Math.min(2.0, this.options.scale)); - if (scale !== 1.0) { - this.container.style.transform = \`scale(\${scale})\`; - this.container.style.transformOrigin = 'top left'; - } - } - - // All other widget methods would go here... - } - - // Auto-initialize widget - function initializeWidget() { - injectStyles(); - const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator'); - containers.forEach(container => { - if (container.dataset.initialized) return; - const options = { - theme: container.dataset.theme || 'system', - scale: parseFloat(container.dataset.scale) || 1.0 - }; - new DogCalorieCalculator(container, options); - container.dataset.initialized = 'true'; - }); - } - - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', initializeWidget); - } else { - initializeWidget(); - } - - window.DogCalorieCalculatorWidget = DogCalorieCalculator; -})();`; - - fs.writeFileSync('dog-food-calculator-widget.js', widgetContent); - console.log('✓ Generated dog-food-calculator-widget.js'); -} - -// Main build function -function build() { - try { - console.log('📁 Creating source template files...'); - createSourceTemplates(); - - console.log('📖 Reading source files...'); - const { sharedLogic, sharedCSS, sharedHTML } = readSourceFiles(); - - console.log('🏗️ Generating production files...'); - generateIframe(sharedLogic, sharedCSS, sharedHTML); - generateWidget(sharedLogic, sharedCSS, sharedHTML); - - console.log('✅ Build completed successfully!'); - console.log(''); - console.log('🎯 Now you only need to edit these source files:'); - console.log(' - dog-calculator-shared.js (calculation logic)'); - console.log(' - shared-styles.css (styling)'); - console.log(' - shared-template.html (HTML structure)'); - console.log(''); - console.log('💫 Run "node build-system.js" to regenerate both production files'); - - } catch (error) { - if (error.code === 'ENOENT') { - console.log('📁 Creating source template files first...'); - createSourceTemplates(); - console.log('✅ Template files created! Run the build again.'); - } else { - console.error('❌ Build failed:', error.message); - } - } -} - -// Create source template files from existing iframe.html -function createSourceTemplates() { - if (!fs.existsSync('shared-styles.css')) { - console.log('📄 Extracting CSS from iframe.html...'); - const iframeContent = fs.readFileSync('iframe.html', 'utf8'); - const cssMatch = iframeContent.match(/ - - -
-
-

Dog's Characteristics

- -
- - -
- -
- - - -
- - -
- -
-
-

How much food is that?

- -
-
-
-
- - - -
- - - -
- - - -
- -
-
- - -
-
- - -
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index ed322d5..0000000 --- a/index.html +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - Dog Calorie Calculator - - - - -
-
-
-

Dog's Characteristics

-
- Metric - - Imperial -
-
- -
- - -
- -
- - -
Please enter a valid weight (minimum 0.1 kg)
-
- - -
- -
-
-

How much should I feed?

-
-
-
-
- - -
Please enter a valid energy content (minimum 1 kcal/100g)
-
- - - -
- - -
Please enter a valid number of days (minimum 1)
-
- -
-
- - -
-
- - -
-
-
-
-
- -
- - -
- - -
- - -
-
- × -

Share Calculator

-
- - - - - -
-
- -
-
-
- - -
-
- × -

Embed Calculator

- -
-
-

JavaScript Widget (Recommended)

-

SEO-friendly, responsive, integrates with your site's design

-
-
<script src="https://yourdomain.com/dog-calculator-widget.js"></script>
-<div id="dog-calorie-calculator"></div>
- -
-
- -
-

iframe Embed (Brand Protected)

-

Complete style isolation, your branding stays intact

-
-
<iframe src="https://yourdomain.com/iframe.html" 
-        width="100%" height="600" 
-        frameborder="0" 
-        title="Dog Calorie Calculator">
-</iframe>
- -
-
-
-
-
- - - - \ No newline at end of file diff --git a/shared-styles.css b/shared-styles.css deleted file mode 100644 index 267b00e..0000000 --- a/shared-styles.css +++ /dev/null @@ -1,902 +0,0 @@ -/* Dog Calorie Calculator Styles */ - /* Using Canine Nutrition and Wellness brand colors and design system */ - - 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: #6f3f6d; - } - - .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: #fdfcfe; - border: 1px solid #e8e3ed; - 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: #6f3f6d; - 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: #635870; - transition: color 0.2s ease; - } - - .dog-calculator-unit-label.active { - color: #6f3f6d; - 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: #e8e3ed; - 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: #6f3f6d; - 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 #e8e3ed; - border-radius: 6px; - font-size: 1rem; - font-family: inherit; - background-color: #ffffff; - color: #6f3f6d; - 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: #ffffff; - color: #6f3f6d; - } - - .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: #ffffff; - box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1); - } - - .dog-calculator-form-group input[readonly] { - background-color: #f8f5fa; - cursor: not-allowed; - color: #635870; - } - - .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: #6f3f6d; - font-size: 0.95rem; - } - - .dog-calculator-result-value { - font-weight: 600; - color: #6f3f6d; - font-size: 1.1rem; - padding: 4px 12px; - background: rgba(241, 154, 95, 0.15); - border-radius: 4px; - } - - .dog-calculator-collapsible { - background: #ffffff; - border: 1px solid #e8e3ed; - border-top: none; - margin-bottom: 0; - overflow: hidden; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); - } - - .dog-calculator-collapsible-header { - background: #f8f5fa; - padding: 20px 24px; - border-bottom: 1px solid #e8e3ed; - } - - .dog-calculator-collapsible-header h3 { - margin: 0; - font-size: 1.25rem; - color: #6f3f6d; - 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: #e87159; - 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: #f8f5fa; - border-left: 1px solid #e8e3ed; - border-right: 1px solid #e8e3ed; - margin-top: -1px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); - } - - .dog-calculator-btn { - padding: 8px 16px; - border: 1px solid #e8e3ed; - 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: #6f3f6d; - } - - .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: #7fa464; - color: #7fa464; - } - - .dog-calculator-footer { - text-align: center; - padding: 20px; - background: #fdfcfe; - border: 1px solid #e8e3ed; - 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: column; - gap: 20px; - } - - .dog-calculator-input-group .dog-calculator-form-group { - margin-bottom: 20px; - } - - .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; - } - } - - /* Dark theme - manual override */ - .dog-calculator-container.theme-dark { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-section, - .dog-calculator-container.theme-dark .dog-calculator-collapsible { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-collapsible-header { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover { - background: #3a3446; - } - - .dog-calculator-container.theme-dark .dog-calculator-section h2, - .dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3, - .dog-calculator-container.theme-dark .dog-calculator-form-group label, - .dog-calculator-container.theme-dark .dog-calculator-result-label { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-unit-label { - color: #b8b0c2; - } - - .dog-calculator-container.theme-dark .dog-calculator-unit-label.active { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-slider { - background-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-form-group select, - .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"], - .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] { - background-color: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - 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='%23f5f3f7' 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"); - } - - .dog-calculator-container.theme-dark .dog-calculator-form-group select option { - background-color: #312b3b; - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-form-group select:focus, - .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus, - .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus { - background-color: #312b3b; - border-color: #f19a5f; - } - - .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] { - background-color: #433c4f; - color: #b8b0c2; - } - - .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%); - border-color: rgba(241, 154, 95, 0.3); - } - - .dog-calculator-container.theme-dark .dog-calculator-result-value { - color: #f5f3f7; - background: rgba(241, 154, 95, 0.2); - } - - .dog-calculator-container.theme-dark .dog-calculator-footer { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-action-buttons { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-btn { - background: #433c4f; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-btn:hover { - background: #524a5f; - border-color: #524a5f; - } - - .dog-calculator-container.theme-dark .dog-calculator-btn-share:hover { - border-color: #9f5999; - color: #f19a5f; - } - - .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover { - border-color: #7fa464; - color: #7fa464; - } - - /* System theme - follows user's OS preference */ - @media (prefers-color-scheme: dark) { - .dog-calculator-container.theme-system { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-section, - .dog-calculator-container.theme-system .dog-calculator-collapsible { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-collapsible-header { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover { - background: #3a3446; - } - - .dog-calculator-container.theme-system .dog-calculator-section h2, - .dog-calculator-container.theme-system .dog-calculator-collapsible-header h3, - .dog-calculator-container.theme-system .dog-calculator-form-group label, - .dog-calculator-container.theme-system .dog-calculator-result-label { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-unit-label { - color: #b8b0c2; - } - - .dog-calculator-container.theme-system .dog-calculator-unit-label.active { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-slider { - background-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-form-group select, - .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"], - .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] { - background-color: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - 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='%23f5f3f7' 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"); - } - - .dog-calculator-container.theme-system .dog-calculator-form-group select option { - background-color: #312b3b; - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-form-group select:focus, - .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus, - .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus { - background-color: #312b3b; - border-color: #f19a5f; - } - - .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] { - background-color: #433c4f; - color: #b8b0c2; - } - - .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%); - border-color: rgba(241, 154, 95, 0.3); - } - - .dog-calculator-container.theme-system .dog-calculator-result-value { - color: #f5f3f7; - background: rgba(241, 154, 95, 0.2); - } - - .dog-calculator-container.theme-system .dog-calculator-footer { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-action-buttons { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-btn { - background: #433c4f; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-btn:hover { - background: #524a5f; - border-color: #524a5f; - } - - .dog-calculator-container.theme-system .dog-calculator-btn-share:hover { - border-color: #9f5999; - color: #f19a5f; - } - - .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover { - border-color: #7fa464; - color: #7fa464; - } - } - - /* Modal Styles */ - .dog-calculator-modal { - display: none; - position: fixed; - z-index: 10000; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - animation: fadeIn 0.3s ease; - } - - @keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } - } - - .dog-calculator-modal-content { - position: relative; - background-color: #ffffff; - margin: 5% auto; - padding: 30px; - border: 1px solid #e8e3ed; - border-radius: 12px; - width: 90%; - max-width: 500px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); - animation: slideIn 0.3s ease; - } - - .dog-calculator-modal-embed { - max-width: 700px; - } - - @keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .dog-calculator-modal-close { - position: absolute; - right: 20px; - top: 20px; - font-size: 28px; - font-weight: 300; - color: #6f3f6d; - cursor: pointer; - transition: color 0.2s ease; - } - - .dog-calculator-modal-close:hover { - color: #f19a5f; - } - - .dog-calculator-modal h3 { - margin: 0 0 24px 0; - color: #6f3f6d; - font-size: 1.5rem; - } - - /* Share Modal */ - .dog-calculator-share-buttons { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 12px; - margin-bottom: 20px; - } - - .dog-calculator-share-btn { - padding: 12px 16px; - border: none; - border-radius: 6px; - font-size: 0.9rem; - font-weight: 500; - color: white; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - font-family: inherit; - } - - .dog-calculator-share-facebook { background: #1877f2; } - .dog-calculator-share-facebook:hover { background: #1664d1; transform: translateY(-1px); } - .dog-calculator-share-twitter { background: #1da1f2; } - .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); } - .dog-calculator-share-linkedin { background: #0a66c2; } - .dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); } - .dog-calculator-share-email { background: #6f3f6d; } - .dog-calculator-share-email:hover { background: #5a3357; transform: translateY(-1px); } - .dog-calculator-share-copy { background: #f19a5f; } - .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); } - - .dog-calculator-share-url { - display: flex; - width: 100%; - } - - .dog-calculator-share-url input { - flex: 1; - width: 100%; - padding: 10px 16px; - border: 1px solid #e8e3ed; - border-radius: 6px; - font-size: 0.9rem; - font-family: monospace; - background: #f8f5fa; - color: #6f3f6d; - } - - /* Embed Modal */ - .dog-calculator-embed-options { - display: flex; - flex-direction: column; - gap: 24px; - } - - .dog-calculator-embed-option { - border: 1px solid #e8e3ed; - border-radius: 8px; - padding: 20px; - background: #fcfafd; - } - - .dog-calculator-embed-option h4 { - margin: 0 0 8px 0; - color: #6f3f6d; - font-size: 1.1rem; - } - - .dog-calculator-embed-option p { - margin: 0 0 16px 0; - color: #635870; - font-size: 0.9rem; - } - - /* Default (light theme) code containers */ - .dog-calculator-code-container { - position: relative; - background: #ffffff; - border: 1px solid #e8e3ed; - border-radius: 6px; - overflow: hidden; - } - - .dog-calculator-code-container pre { - margin: 0; - padding: 16px 60px 16px 16px; - overflow-x: auto; - } - - .dog-calculator-code-container code { - color: #312b3b; - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; - font-size: 0.85rem; - line-height: 1.4; - } - - .dog-calculator-copy-btn { - position: absolute; - top: 8px; - right: 8px; - padding: 6px 10px; - background: #f19a5f; - color: white; - border: none; - border-radius: 4px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - font-family: inherit; - z-index: 1; - } - - .dog-calculator-copy-btn:hover { background: #e87741; } - .dog-calculator-copy-btn.copied { background: #7fa464; } - .dog-calculator-copy-btn.copied:hover { background: #7fa464; } - - /* Dark theme modal styles */ - .dog-calculator-container.theme-dark .dog-calculator-modal-content { - background-color: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-modal h3 { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-modal-close { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-modal-close:hover { - color: #f19a5f; - } - - .dog-calculator-container.theme-dark .dog-calculator-share-url input { - background: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-embed-option { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 { - color: #f5f3f7; - } - - .dog-calculator-container.theme-dark .dog-calculator-embed-option p { - color: #b8b0c2; - } - - /* Dark theme code containers - different from embed option background */ - .dog-calculator-container.theme-dark .dog-calculator-code-container { - background: #1a1621; - border-color: #2a2330; - } - - .dog-calculator-container.theme-dark .dog-calculator-code-container code { - color: #f5f3f7; - } - - /* System theme modal styles */ - @media (prefers-color-scheme: dark) { - .dog-calculator-container.theme-system .dog-calculator-modal-content { - background-color: #24202d; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-modal h3 { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-modal-close { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-modal-close:hover { - color: #f19a5f; - } - - .dog-calculator-container.theme-system .dog-calculator-share-url input { - background: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-embed-option { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-container.theme-system .dog-calculator-embed-option h4 { - color: #f5f3f7; - } - - .dog-calculator-container.theme-system .dog-calculator-embed-option p { - color: #b8b0c2; - } - - /* System theme code containers - different from embed option background */ - .dog-calculator-container.theme-system .dog-calculator-code-container { - background: #1a1621; - border-color: #2a2330; - } - - .dog-calculator-container.theme-system .dog-calculator-code-container code { - color: #f5f3f7; - } - } \ No newline at end of file diff --git a/shared-template.html b/shared-template.html deleted file mode 100644 index d6643d8..0000000 --- a/shared-template.html +++ /dev/null @@ -1,178 +0,0 @@ -
-
-
-

Dog's Characteristics

-
- Metric - - Imperial -
-
- -
- - -
- -
- - -
Please enter a valid weight (minimum 0.1 kg)
-
- - -
- -
-
-

How much should I feed?

-
-
-
-
-
- - -
Please enter a valid energy content
-
-
- - -
-
- - - -
- - -
Please enter a valid number of days (minimum 1)
-
- -
-
- - -
-
- - -
-
-
-
-
- -
- - -
- - -
- - - - - - \ No newline at end of file diff --git a/styles.css b/styles.css deleted file mode 100644 index a5e20c6..0000000 --- a/styles.css +++ /dev/null @@ -1,787 +0,0 @@ -/* Dog Calorie Calculator Styles */ -/* Using Canine Nutrition and Wellness brand colors and design system */ - -.dog-calculator-container { - max-width: 600px; - margin: 0 auto; - padding: 24px; - font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; - line-height: 1.5; - color: #6f3f6d; - box-sizing: border-box; -} - -.dog-calculator-container *, -.dog-calculator-container *::before, -.dog-calculator-container *::after { - box-sizing: border-box; -} - -.dog-calculator-section { - background: #fdfcfe; - border: 1px solid #e8e3ed; - 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: #6f3f6d; - 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: #635870; - transition: color 0.2s ease; -} - -.dog-calculator-unit-label.active { - color: #6f3f6d; - 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: #e8e3ed; - 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: #6f3f6d; - 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 #e8e3ed; - border-radius: 6px; - font-size: 1rem; - font-family: inherit; - background-color: #ffffff; - color: #6f3f6d; - 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: #ffffff; - color: #6f3f6d; -} - -.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: #ffffff; - box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1); -} - -.dog-calculator-form-group input[readonly] { - background-color: #f8f5fa; - cursor: not-allowed; - color: #635870; -} - -.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: #6f3f6d; - font-size: 0.95rem; -} - -.dog-calculator-result-value { - font-weight: 600; - color: #6f3f6d; - font-size: 1.1rem; - padding: 4px 12px; - background: rgba(241, 154, 95, 0.15); - border-radius: 4px; -} - -.dog-calculator-collapsible { - background: #ffffff; - border: 1px solid #e8e3ed; - border-top: none; - margin-bottom: 0; - overflow: hidden; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); -} - -.dog-calculator-collapsible-header { - background: #f8f5fa; - padding: 20px 24px; - border-bottom: 1px solid #e8e3ed; -} - -.dog-calculator-collapsible-header h3 { - margin: 0; - font-size: 1.25rem; - color: #6f3f6d; - 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: #e87159; - font-size: 0.875rem; - margin-top: 6px; - font-weight: 500; -} - -.dog-calculator-hidden { - display: none; -} - -.dog-calculator-footer { - text-align: center; - padding: 20px; - background: #fdfcfe; - border: 1px solid #e8e3ed; - border-radius: 0 0 8px 8px; - border-top: none; - margin-top: -1px; -} - -.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; -} - -/* Action Buttons */ -.dog-calculator-action-buttons { - display: flex; - justify-content: center; - gap: 16px; - padding: 20px; - background: #f8f5fa; - border-left: 1px solid #e8e3ed; - border-right: 1px solid #e8e3ed; - margin-top: -1px; -} - -.dog-calculator-btn { - padding: 8px 16px; - border: 1px solid #e8e3ed; - 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: #6f3f6d; -} - -.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: #7fa464; - color: #7fa464; -} - -/* Modal Styles */ -.dog-calculator-modal { - display: none; - position: fixed; - z-index: 10000; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - animation: fadeIn 0.3s ease; -} - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -.dog-calculator-modal-content { - position: relative; - background-color: #ffffff; - margin: 5% auto; - padding: 30px; - border: 1px solid #e8e3ed; - border-radius: 12px; - width: 90%; - max-width: 500px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); - animation: slideIn 0.3s ease; -} - -.dog-calculator-modal-embed { - max-width: 700px; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.dog-calculator-modal-close { - position: absolute; - right: 20px; - top: 20px; - font-size: 28px; - font-weight: 300; - color: #6f3f6d; - cursor: pointer; - transition: color 0.2s ease; -} - -.dog-calculator-modal-close:hover { - color: #f19a5f; -} - -.dog-calculator-modal h3 { - margin: 0 0 24px 0; - color: #6f3f6d; - font-size: 1.5rem; - display: flex; - align-items: center; - gap: 12px; -} - -/* Share Modal */ -.dog-calculator-share-buttons { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 12px; - margin-bottom: 20px; -} - -.dog-calculator-share-btn { - padding: 12px 16px; - border: none; - border-radius: 6px; - font-size: 0.9rem; - font-weight: 500; - color: white; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - font-family: inherit; -} - -.dog-calculator-share-facebook { - background: #1877f2; -} - -.dog-calculator-share-facebook:hover { - background: #1664d1; - transform: translateY(-1px); -} - -.dog-calculator-share-twitter { - background: #1da1f2; -} - -.dog-calculator-share-twitter:hover { - background: #1991da; - transform: translateY(-1px); -} - -.dog-calculator-share-linkedin { - background: #0a66c2; -} - -.dog-calculator-share-linkedin:hover { - background: #084d95; - transform: translateY(-1px); -} - -.dog-calculator-share-email { - background: #6f3f6d; -} - -.dog-calculator-share-email:hover { - background: #5a3357; - transform: translateY(-1px); -} - -.dog-calculator-share-copy { - background: #f19a5f; -} - -.dog-calculator-share-copy:hover { - background: #e87741; - transform: translateY(-1px); -} - -.dog-calculator-share-url { - display: flex; - gap: 12px; -} - -.dog-calculator-share-url input { - flex: 1; - padding: 10px 16px; - border: 1px solid #e8e3ed; - border-radius: 6px; - font-size: 0.9rem; - font-family: monospace; - background: #f8f5fa; - color: #6f3f6d; -} - -/* Embed Modal */ -.dog-calculator-embed-options { - display: flex; - flex-direction: column; - gap: 24px; -} - -.dog-calculator-embed-option { - border: 1px solid #e8e3ed; - border-radius: 8px; - padding: 20px; - background: #fcfafd; -} - -.dog-calculator-embed-option h4 { - margin: 0 0 8px 0; - color: #6f3f6d; - font-size: 1.1rem; - display: flex; - align-items: center; - gap: 8px; -} - -.dog-calculator-embed-option p { - margin: 0 0 16px 0; - color: #635870; - font-size: 0.9rem; -} - -.dog-calculator-code-container { - position: relative; - background: #312b3b; - border-radius: 6px; - overflow: hidden; -} - -.dog-calculator-code-container pre { - margin: 0; - padding: 16px; - overflow-x: auto; -} - -.dog-calculator-code-container code { - color: #f5f3f7; - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; - font-size: 0.85rem; - line-height: 1.4; -} - -.dog-calculator-copy-btn { - position: absolute; - top: 10px; - right: 10px; - padding: 6px 12px; - background: #f19a5f; - color: white; - border: none; - border-radius: 4px; - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - font-family: inherit; -} - -.dog-calculator-copy-btn:hover { - background: #e87741; -} - -.dog-calculator-copy-btn.copied { - background: #7fa464; -} - -.dog-calculator-copy-btn.copied:hover { - background: #7fa464; -} - -/* 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: column; - gap: 20px; - } - - .dog-calculator-input-group .dog-calculator-form-group { - margin-bottom: 20px; - } - - .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; - } - - .dog-calculator-modal-content { - margin: 10% auto; - padding: 20px; - width: 95%; - } - - .dog-calculator-share-buttons { - grid-template-columns: 1fr; - } - - .dog-calculator-embed-option { - padding: 16px; - } - - .dog-calculator-code-container pre { - padding: 12px; - font-size: 0.75rem; - } -} - -/* Dark theme support */ -@media (prefers-color-scheme: dark) { - .dog-calculator-container { - color: #f5f3f7; - } - - .dog-calculator-section, - .dog-calculator-collapsible { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-collapsible-header { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-collapsible-header:hover { - background: #3a3446; - } - - .dog-calculator-section h2, - .dog-calculator-collapsible-header h3, - .dog-calculator-form-group label, - .dog-calculator-result-label { - color: #f5f3f7; - } - - .dog-calculator-unit-label { - color: #b8b0c2; - } - - .dog-calculator-unit-label.active { - color: #f5f3f7; - } - - .dog-calculator-slider { - background-color: #433c4f; - } - - .dog-calculator-form-group select, - .dog-calculator-form-group input[type="number"], - .dog-calculator-form-group input[type="text"] { - background-color: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - 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='%23f5f3f7' 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"); - } - - .dog-calculator-form-group select option { - background-color: #312b3b; - color: #f5f3f7; - } - - .dog-calculator-form-group select:focus, - .dog-calculator-form-group input[type="number"]:focus, - .dog-calculator-form-group input[type="text"]:focus { - background-color: #312b3b; - border-color: #f19a5f; - } - - .dog-calculator-form-group input[readonly] { - background-color: #433c4f; - color: #b8b0c2; - } - - .dog-calculator-results { - 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); - } - - .dog-calculator-result-value { - color: #f5f3f7; - background: rgba(241, 154, 95, 0.2); - } - - .dog-calculator-footer { - background: #24202d; - border-color: #433c4f; - } - - .dog-calculator-action-buttons { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-btn { - background: #433c4f; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-btn:hover { - background: #524a5f; - border-color: #524a5f; - } - - .dog-calculator-btn-share:hover { - border-color: #9f5999; - color: #f19a5f; - } - - .dog-calculator-btn-embed:hover { - border-color: #7fa464; - color: #7fa464; - } - - .dog-calculator-modal-content { - background-color: #24202d; - border-color: #433c4f; - } - - .dog-calculator-modal h3 { - color: #f5f3f7; - } - - .dog-calculator-modal-close { - color: #f5f3f7; - } - - .dog-calculator-modal-close:hover { - color: #f19a5f; - } - - .dog-calculator-share-url input { - background: #312b3b; - border-color: #433c4f; - color: #f5f3f7; - } - - .dog-calculator-embed-option { - background: #312b3b; - border-color: #433c4f; - } - - .dog-calculator-embed-option h4 { - color: #f5f3f7; - } - - .dog-calculator-embed-option p { - color: #b8b0c2; - } -} \ No newline at end of file