diff --git a/iframe.html b/iframe.html index 841f0e3..49c6d15 100644 --- a/iframe.html +++ b/iframe.html @@ -1036,19 +1036,19 @@ ×

Share Calculator

- - - - -
@@ -1069,7 +1069,7 @@

⚡ JavaScript Widget

-
@@ -1079,7 +1079,7 @@

🛡️ iframe Embed

-
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js index 4b6b6e1..7f9e8aa 100644 --- a/sundog-dog-food-calculator.js +++ b/sundog-dog-food-calculator.js @@ -29,7 +29,7 @@ color: #6f3f6d; } - .dog-calc-container { + .dog-calculator-container { max-width: 600px; margin: 0 auto; padding: 24px; @@ -38,17 +38,17 @@ transition: opacity 0.3s ease; } - .dog-calc-container.loaded { + .dog-calculator-container.loaded { opacity: 1; } - .dog-calc-container *, - .dog-calc-container *::before, - .dog-calc-container *::after { + .dog-calculator-container *, + .dog-calculator-container *::before, + .dog-calculator-container *::after { box-sizing: border-box; } - .dog-calc-section { + .dog-calculator-section { background: #fdfcfe; border: 1px solid #e8e3ed; border-radius: 8px 8px 0 0; @@ -57,7 +57,7 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } - .dog-calc-section-header { + .dog-calculator-section-header { display: flex; justify-content: space-between; align-items: center; @@ -66,7 +66,7 @@ gap: 16px; } - .dog-calc-section h2 { + .dog-calculator-section h2 { margin: 0; color: #6f3f6d; font-size: 1.5rem; @@ -74,38 +74,38 @@ } /* Unit Switch */ - .dog-calc-unit-switch { + .dog-calculator-unit-switch { display: flex; align-items: center; gap: 12px; } - .dog-calc-unit-label { + .dog-calculator-unit-label { font-size: 0.9rem; font-weight: 500; color: #635870; transition: color 0.2s ease; } - .dog-calc-unit-label.active { + .dog-calculator-unit-label.active { color: #6f3f6d; font-weight: 600; } - .dog-calc-switch { + .dog-calculator-switch { position: relative; display: inline-block; width: 48px; height: 24px; } - .dog-calc-switch input { + .dog-calculator-switch input { opacity: 0; width: 0; height: 0; } - .dog-calc-slider { + .dog-calculator-slider { position: absolute; cursor: pointer; top: 0; @@ -117,7 +117,7 @@ border-radius: 24px; } - .dog-calc-slider:before { + .dog-calculator-slider:before { position: absolute; content: ""; height: 18px; @@ -130,19 +130,19 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } - .dog-calc-switch input:checked + .dog-calc-slider { + .dog-calculator-switch input:checked + .dog-calculator-slider { background-color: #f19a5f; } - .dog-calc-switch input:checked + .dog-calc-slider:before { + .dog-calculator-switch input:checked + .dog-calculator-slider:before { transform: translateX(24px); } - .dog-calc-form-group { + .dog-calculator-form-group { margin-bottom: 20px; } - .dog-calc-form-group label { + .dog-calculator-form-group label { display: block; margin-bottom: 8px; font-weight: 500; @@ -150,9 +150,9 @@ font-size: 1rem; } - .dog-calc-form-group select, - .dog-calc-form-group input[type="number"], - .dog-calc-form-group input[type="text"] { + .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; @@ -172,33 +172,33 @@ padding-right: 40px; } - .dog-calc-form-group select option { + .dog-calculator-form-group select option { background-color: #ffffff; color: #6f3f6d; } - .dog-calc-form-group input[type="number"], - .dog-calc-form-group input[type="text"] { + .dog-calculator-form-group input[type="number"], + .dog-calculator-form-group input[type="text"] { background-image: none; padding-right: 16px; } - .dog-calc-form-group select:focus, - .dog-calc-form-group input[type="number"]:focus, - .dog-calc-form-group input[type="text"]:focus { + .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-calc-form-group input[readonly] { + .dog-calculator-form-group input[readonly] { background-color: #f8f5fa; cursor: not-allowed; color: #635870; } - .dog-calc-results { + .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; @@ -206,24 +206,24 @@ margin-top: 24px; } - .dog-calc-result-item { + .dog-calculator-result-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } - .dog-calc-result-item:last-child { + .dog-calculator-result-item:last-child { margin-bottom: 0; } - .dog-calc-result-label { + .dog-calculator-result-label { font-weight: 500; color: #6f3f6d; font-size: 0.95rem; } - .dog-calc-result-value { + .dog-calculator-result-value { font-weight: 600; color: #6f3f6d; font-size: 1.1rem; @@ -232,7 +232,7 @@ border-radius: 4px; } - .dog-calc-collapsible { + .dog-calculator-collapsible { background: #ffffff; border: 1px solid #e8e3ed; border-top: none; @@ -241,55 +241,55 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } - .dog-calc-collapsible-header { + .dog-calculator-collapsible-header { background: #f8f5fa; padding: 20px 24px; border-bottom: 1px solid #e8e3ed; } - .dog-calc-collapsible-header h3 { + .dog-calculator-collapsible-header h3 { margin: 0; font-size: 1.25rem; color: #6f3f6d; font-weight: 600; } - .dog-calc-collapsible-content { + .dog-calculator-collapsible-content { display: block; } - .dog-calc-collapsible-inner { + .dog-calculator-collapsible-inner { padding: 24px; } - .dog-calc-input-group { + .dog-calculator-input-group { display: flex; gap: 16px; align-items: flex-end; } - .dog-calc-input-group .dog-calc-form-group { + .dog-calculator-input-group .dog-calculator-form-group { flex: 1; margin-bottom: 0; } - .dog-calc-unit-select { + .dog-calculator-unit-select { min-width: 120px; } - .dog-calc-error { + .dog-calculator-error { color: #e87159; font-size: 0.875rem; margin-top: 6px; font-weight: 500; } - .dog-calc-hidden { + .dog-calculator-hidden { display: none; } /* Action Buttons */ - .dog-calc-action-buttons { + .dog-calculator-action-buttons { display: flex; justify-content: center; gap: 16px; @@ -301,7 +301,7 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } - .dog-calc-btn { + .dog-calculator-btn { padding: 8px 16px; border: 1px solid #e8e3ed; border-radius: 6px; @@ -317,22 +317,22 @@ color: #6f3f6d; } - .dog-calc-btn:hover { + .dog-calculator-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } - .dog-calc-btn-share:hover { + .dog-calculator-btn-share:hover { border-color: #9f5999; color: #9f5999; } - .dog-calc-btn-embed:hover { + .dog-calculator-btn-embed:hover { border-color: #7fa464; color: #7fa464; } - .dog-calc-footer { + .dog-calculator-footer { text-align: center; padding: 20px; background: #fdfcfe; @@ -343,7 +343,7 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } - .dog-calc-footer a { + .dog-calculator-footer a { color: #9f5999; text-decoration: none; font-size: 0.9rem; @@ -351,292 +351,292 @@ transition: color 0.2s ease; } - .dog-calc-footer a:hover { + .dog-calculator-footer a:hover { color: #f19a5f; text-decoration: underline; } /* Mobile Responsive Design */ @media (max-width: 576px) { - .dog-calc-container { + .dog-calculator-container { padding: 16px; } - .dog-calc-section, - .dog-calc-collapsible-inner { + .dog-calculator-section, + .dog-calculator-collapsible-inner { padding: 20px; } - .dog-calc-section h2, - .dog-calc-collapsible-header h3 { + .dog-calculator-section h2, + .dog-calculator-collapsible-header h3 { font-size: 1.3rem; } - .dog-calc-section-header { + .dog-calculator-section-header { flex-direction: column; align-items: stretch; gap: 12px; } - .dog-calc-section h2 { + .dog-calculator-section h2 { text-align: center; } - .dog-calc-unit-switch { + .dog-calculator-unit-switch { justify-content: center; } - .dog-calc-action-buttons { + .dog-calculator-action-buttons { flex-direction: column; padding: 16px; } - .dog-calc-btn { + .dog-calculator-btn { width: 100%; justify-content: center; } - .dog-calc-input-group { + .dog-calculator-input-group { flex-direction: column; gap: 20px; } - .dog-calc-input-group .dog-calc-form-group { + .dog-calculator-input-group .dog-calculator-form-group { margin-bottom: 20px; } - .dog-calc-result-item { + .dog-calculator-result-item { flex-direction: column; align-items: flex-start; gap: 8px; } - .dog-calc-result-value { + .dog-calculator-result-value { align-self: stretch; text-align: center; } - .dog-calc-collapsible-header { + .dog-calculator-collapsible-header { padding: 16px 20px; } } /* Dark theme - manual override */ - .dog-calc-container.theme-dark { + .dog-calculator-container.theme-dark { color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-section, - .dog-calc-container.theme-dark .dog-calc-collapsible { + .dog-calculator-container.theme-dark .dog-calculator-section, + .dog-calculator-container.theme-dark .dog-calculator-collapsible { background: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-collapsible-header { + .dog-calculator-container.theme-dark .dog-calculator-collapsible-header { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-collapsible-header:hover { + .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover { background: #3a3446; } - .dog-calc-container.theme-dark .dog-calc-section h2, - .dog-calc-container.theme-dark .dog-calc-collapsible-header h3, - .dog-calc-container.theme-dark .dog-calc-form-group label, - .dog-calc-container.theme-dark .dog-calc-result-label { + .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-calc-container.theme-dark .dog-calc-unit-label { + .dog-calculator-container.theme-dark .dog-calculator-unit-label { color: #b8b0c2; } - .dog-calc-container.theme-dark .dog-calc-unit-label.active { + .dog-calculator-container.theme-dark .dog-calculator-unit-label.active { color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-slider { + .dog-calculator-container.theme-dark .dog-calculator-slider { background-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-form-group select, - .dog-calc-container.theme-dark .dog-calc-form-group input[type="number"], - .dog-calc-container.theme-dark .dog-calc-form-group input[type="text"] { + .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-calc-container.theme-dark .dog-calc-form-group select option { + .dog-calculator-container.theme-dark .dog-calculator-form-group select option { background-color: #312b3b; color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-form-group select:focus, - .dog-calc-container.theme-dark .dog-calc-form-group input[type="number"]:focus, - .dog-calc-container.theme-dark .dog-calc-form-group input[type="text"]:focus { + .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-calc-container.theme-dark .dog-calc-form-group input[readonly] { + .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] { background-color: #433c4f; color: #b8b0c2; } - .dog-calc-container.theme-dark .dog-calc-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%); border-color: rgba(241, 154, 95, 0.3); } - .dog-calc-container.theme-dark .dog-calc-result-value { + .dog-calculator-container.theme-dark .dog-calculator-result-value { color: #f5f3f7; background: rgba(241, 154, 95, 0.2); } - .dog-calc-container.theme-dark .dog-calc-footer { + .dog-calculator-container.theme-dark .dog-calculator-footer { background: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-action-buttons { + .dog-calculator-container.theme-dark .dog-calculator-action-buttons { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-btn { + .dog-calculator-container.theme-dark .dog-calculator-btn { background: #433c4f; border-color: #433c4f; color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-btn:hover { + .dog-calculator-container.theme-dark .dog-calculator-btn:hover { background: #524a5f; border-color: #524a5f; } - .dog-calc-container.theme-dark .dog-calc-btn-share:hover { + .dog-calculator-container.theme-dark .dog-calculator-btn-share:hover { border-color: #9f5999; color: #f19a5f; } - .dog-calc-container.theme-dark .dog-calc-btn-embed:hover { + .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-calc-container.theme-system { + .dog-calculator-container.theme-system { color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-section, - .dog-calc-container.theme-system .dog-calc-collapsible { + .dog-calculator-container.theme-system .dog-calculator-section, + .dog-calculator-container.theme-system .dog-calculator-collapsible { background: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-collapsible-header { + .dog-calculator-container.theme-system .dog-calculator-collapsible-header { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-collapsible-header:hover { + .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover { background: #3a3446; } - .dog-calc-container.theme-system .dog-calc-section h2, - .dog-calc-container.theme-system .dog-calc-collapsible-header h3, - .dog-calc-container.theme-system .dog-calc-form-group label, - .dog-calc-container.theme-system .dog-calc-result-label { + .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-calc-container.theme-system .dog-calc-unit-label { + .dog-calculator-container.theme-system .dog-calculator-unit-label { color: #b8b0c2; } - .dog-calc-container.theme-system .dog-calc-unit-label.active { + .dog-calculator-container.theme-system .dog-calculator-unit-label.active { color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-slider { + .dog-calculator-container.theme-system .dog-calculator-slider { background-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-form-group select, - .dog-calc-container.theme-system .dog-calc-form-group input[type="number"], - .dog-calc-container.theme-system .dog-calc-form-group input[type="text"] { + .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-calc-container.theme-system .dog-calc-form-group select option { + .dog-calculator-container.theme-system .dog-calculator-form-group select option { background-color: #312b3b; color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-form-group select:focus, - .dog-calc-container.theme-system .dog-calc-form-group input[type="number"]:focus, - .dog-calc-container.theme-system .dog-calc-form-group input[type="text"]:focus { + .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-calc-container.theme-system .dog-calc-form-group input[readonly] { + .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] { background-color: #433c4f; color: #b8b0c2; } - .dog-calc-container.theme-system .dog-calc-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%); border-color: rgba(241, 154, 95, 0.3); } - .dog-calc-container.theme-system .dog-calc-result-value { + .dog-calculator-container.theme-system .dog-calculator-result-value { color: #f5f3f7; background: rgba(241, 154, 95, 0.2); } - .dog-calc-container.theme-system .dog-calc-footer { + .dog-calculator-container.theme-system .dog-calculator-footer { background: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-action-buttons { + .dog-calculator-container.theme-system .dog-calculator-action-buttons { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-btn { + .dog-calculator-container.theme-system .dog-calculator-btn { background: #433c4f; border-color: #433c4f; color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-btn:hover { + .dog-calculator-container.theme-system .dog-calculator-btn:hover { background: #524a5f; border-color: #524a5f; } - .dog-calc-container.theme-system .dog-calc-btn-share:hover { + .dog-calculator-container.theme-system .dog-calculator-btn-share:hover { border-color: #9f5999; color: #f19a5f; } - .dog-calc-container.theme-system .dog-calc-btn-embed:hover { + .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover { border-color: #7fa464; color: #7fa464; } } /* Modal Styles */ - .dog-calc-modal { + .dog-calculator-modal { display: none; position: fixed; z-index: 10000; @@ -653,7 +653,7 @@ to { opacity: 1; } } - .dog-calc-modal-content { + .dog-calculator-modal-content { position: relative; background-color: #ffffff; margin: 5% auto; @@ -666,7 +666,7 @@ animation: slideIn 0.3s ease; } - .dog-calc-modal-embed { + .dog-calculator-modal-embed { max-width: 700px; } @@ -681,7 +681,7 @@ } } - .dog-calc-modal-close { + .dog-calculator-modal-close { position: absolute; right: 20px; top: 20px; @@ -692,25 +692,25 @@ transition: color 0.2s ease; } - .dog-calc-modal-close:hover { + .dog-calculator-modal-close:hover { color: #f19a5f; } - .dog-calc-modal h3 { + .dog-calculator-modal h3 { margin: 0 0 24px 0; color: #6f3f6d; font-size: 1.5rem; } /* Share Modal */ - .dog-calc-share-buttons { + .dog-calculator-share-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; } - .dog-calc-share-btn { + .dog-calculator-share-btn { padding: 12px 16px; border: none; border-radius: 6px; @@ -726,23 +726,23 @@ font-family: inherit; } - .dog-calc-share-facebook { background: #1877f2; } - .dog-calc-share-facebook:hover { background: #1664d1; transform: translateY(-1px); } - .dog-calc-share-twitter { background: #1da1f2; } - .dog-calc-share-twitter:hover { background: #1991da; transform: translateY(-1px); } - .dog-calc-share-linkedin { background: #0a66c2; } - .dog-calc-share-linkedin:hover { background: #084d95; transform: translateY(-1px); } - .dog-calc-share-email { background: #6f3f6d; } - .dog-calc-share-email:hover { background: #5a3357; transform: translateY(-1px); } - .dog-calc-share-copy { background: #f19a5f; } - .dog-calc-share-copy:hover { background: #e87741; transform: translateY(-1px); } + .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-calc-share-url { + .dog-calculator-share-url { display: flex; width: 100%; } - .dog-calc-share-url input { + .dog-calculator-share-url input { flex: 1; width: 100%; padding: 10px 16px; @@ -755,33 +755,33 @@ } /* Embed Modal */ - .dog-calc-embed-options { + .dog-calculator-embed-options { display: flex; flex-direction: column; gap: 24px; } - .dog-calc-embed-option { + .dog-calculator-embed-option { border: 1px solid #e8e3ed; border-radius: 8px; padding: 20px; background: #fcfafd; } - .dog-calc-embed-option h4 { + .dog-calculator-embed-option h4 { margin: 0 0 8px 0; color: #6f3f6d; font-size: 1.1rem; } - .dog-calc-embed-option p { + .dog-calculator-embed-option p { margin: 0 0 16px 0; color: #635870; font-size: 0.9rem; } /* Default (light theme) code containers */ - .dog-calc-code-container { + .dog-calculator-code-container { position: relative; background: #ffffff; border: 1px solid #e8e3ed; @@ -789,20 +789,20 @@ overflow: hidden; } - .dog-calc-code-container pre { + .dog-calculator-code-container pre { margin: 0; padding: 16px 60px 16px 16px; overflow-x: auto; } - .dog-calc-code-container code { + .dog-calculator-code-container code { color: #312b3b; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.85rem; line-height: 1.4; } - .dog-calc-copy-btn { + .dog-calculator-copy-btn { position: absolute; top: 8px; right: 8px; @@ -819,111 +819,111 @@ z-index: 1; } - .dog-calc-copy-btn:hover { background: #e87741; } - .dog-calc-copy-btn.copied { background: #7fa464; } - .dog-calc-copy-btn.copied:hover { background: #7fa464; } + .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-calc-container.theme-dark .dog-calc-modal-content { + .dog-calculator-container.theme-dark .dog-calculator-modal-content { background-color: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-modal h3 { + .dog-calculator-container.theme-dark .dog-calculator-modal h3 { color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-modal-close { + .dog-calculator-container.theme-dark .dog-calculator-modal-close { color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-modal-close:hover { + .dog-calculator-container.theme-dark .dog-calculator-modal-close:hover { color: #f19a5f; } - .dog-calc-container.theme-dark .dog-calc-share-url input { + .dog-calculator-container.theme-dark .dog-calculator-share-url input { background: #312b3b; border-color: #433c4f; color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-embed-option { + .dog-calculator-container.theme-dark .dog-calculator-embed-option { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-dark .dog-calc-embed-option h4 { + .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 { color: #f5f3f7; } - .dog-calc-container.theme-dark .dog-calc-embed-option p { + .dog-calculator-container.theme-dark .dog-calculator-embed-option p { color: #b8b0c2; } /* Dark theme code containers - different from embed option background */ - .dog-calc-container.theme-dark .dog-calc-code-container { + .dog-calculator-container.theme-dark .dog-calculator-code-container { background: #1a1621; border-color: #2a2330; } - .dog-calc-container.theme-dark .dog-calc-code-container code { + .dog-calculator-container.theme-dark .dog-calculator-code-container code { color: #f5f3f7; } /* System theme modal styles */ @media (prefers-color-scheme: dark) { - .dog-calc-container.theme-system .dog-calc-modal-content { + .dog-calculator-container.theme-system .dog-calculator-modal-content { background-color: #24202d; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-modal h3 { + .dog-calculator-container.theme-system .dog-calculator-modal h3 { color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-modal-close { + .dog-calculator-container.theme-system .dog-calculator-modal-close { color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-modal-close:hover { + .dog-calculator-container.theme-system .dog-calculator-modal-close:hover { color: #f19a5f; } - .dog-calc-container.theme-system .dog-calc-share-url input { + .dog-calculator-container.theme-system .dog-calculator-share-url input { background: #312b3b; border-color: #433c4f; color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-embed-option { + .dog-calculator-container.theme-system .dog-calculator-embed-option { background: #312b3b; border-color: #433c4f; } - .dog-calc-container.theme-system .dog-calc-embed-option h4 { + .dog-calculator-container.theme-system .dog-calculator-embed-option h4 { color: #f5f3f7; } - .dog-calc-container.theme-system .dog-calc-embed-option p { + .dog-calculator-container.theme-system .dog-calculator-embed-option p { color: #b8b0c2; } /* System theme code containers - different from embed option background */ - .dog-calc-container.theme-system .dog-calc-code-container { + .dog-calculator-container.theme-system .dog-calculator-code-container { background: #1a1621; border-color: #2a2330; } - .dog-calc-container.theme-system .dog-calc-code-container code { + .dog-calculator-container.theme-system .dog-calculator-code-container code { color: #f5f3f7; } }`; function injectStyles() { - if (document.getElementById('dog-calc-styles')) return; + if (document.getElementById('dog-calculator-styles')) return; const style = document.createElement('style'); - style.id = 'dog-calc-styles'; + style.id = 'dog-calculator-styles'; style.textContent = CSS_STYLES; document.head.appendChild(style); } @@ -942,21 +942,21 @@ init() { // Insert the transformed calculator HTML - this.container.innerHTML = `
-
-
+ this.container.innerHTML = `
+
+

Dog's Characteristics

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