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 = `