From 650b469202338c5d96279bd8325e536a7faa7d11 Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Thu, 26 Jun 2025 18:03:39 +0200
Subject: [PATCH] Fix share/embed modals

---
 iframe.html                   | 105 +++++++++++++++++-----------------
 sundog-dog-food-calculator.js | 103 +++++++++++++++++----------------
 2 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/iframe.html b/iframe.html
index 0cef0e3..e1e674b 100644
--- a/iframe.html
+++ b/iframe.html
@@ -848,7 +848,7 @@
         .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: var(--text-primary); }
+        .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); }
@@ -912,7 +912,7 @@
         }
 
         .dog-calculator-code-container code {
-            color: var(--bg-secondary);
+            color: var(--text-primary);
             font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
             font-size: 0.85rem;
             line-height: 1.4;
@@ -1965,66 +1965,67 @@
                 by caninenutritionandwellness.com
             </a>
         </div>
-    </div>
-
-    <!-- Share Modal -->
-    <div id="shareModal" class="dog-calculator-modal" style="display: none;">
-        <div class="dog-calculator-modal-content">
-            <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
-            <h3>Share Calculator</h3>
-            <div class="dog-calculator-share-buttons">
-                <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
-                    Facebook
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
-                    Twitter
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
-                    LinkedIn
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
-                    Email
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
-                    Copy Link
-                </button>
-            </div>
-            <div class="dog-calculator-share-url">
-                <input type="text" id="shareUrl" readonly>
+        <!-- Share Modal -->
+        <div id="shareModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content">
+                <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
+                <h3>Share Calculator</h3>
+                <div class="dog-calculator-share-buttons">
+                    <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
+                        Facebook
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
+                        Twitter
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
+                        LinkedIn
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
+                        Email
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
+                        Copy Link
+                    </button>
+                </div>
+                <div class="dog-calculator-share-url">
+                    <input type="text" id="shareUrl" readonly>
+                </div>
             </div>
         </div>
-    </div>
 
-    <!-- Embed Modal -->
-    <div id="embedModal" class="dog-calculator-modal" style="display: none;">
-        <div class="dog-calculator-modal-content dog-calculator-modal-embed">
-            <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
-            <h3>⚡ Embed the Calculator</h3>
-            
-            <div class="dog-calculator-embed-options">
-                <div class="dog-calculator-embed-option">
-                    <h4>⚡ JavaScript Widget</h4>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="widgetCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
-                            Copy
-                        </button>
-                    </div>
-                </div>
+        <!-- Embed Modal -->
+        <div id="embedModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content dog-calculator-modal-embed">
+                <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
+                <h3>⚡ Embed the Calculator</h3>
                 
-                <div class="dog-calculator-embed-option">
-                    <h4>🛡️ iframe Embed</h4>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="iframeCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
-                            Copy
-                        </button>
+                <div class="dog-calculator-embed-options">
+                    <div class="dog-calculator-embed-option">
+                        <h4>⚡ JavaScript Widget</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="widgetCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="dog-calculator-embed-option">
+                        <h4>🛡️ iframe Embed</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="iframeCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
+                                Copy
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
+
+
     <script>
         /**
          * Dog Calorie Calculator - iframe version
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index d3056b4..99f65af 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -863,7 +863,7 @@
         .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: var(--text-primary); }
+        .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); }
@@ -927,7 +927,7 @@
         }
 
         .dog-calculator-code-container code {
-            color: var(--bg-secondary);
+            color: var(--text-primary);
             font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
             font-size: 0.85rem;
             line-height: 1.4;
@@ -2013,60 +2013,59 @@
                 by caninenutritionandwellness.com
             </a>
         </div>
-    </div>
-
-    <!-- Share Modal -->
-    <div id="shareModal" class="dog-calculator-modal" style="display: none;">
-        <div class="dog-calculator-modal-content">
-            <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
-            <h3>Share Calculator</h3>
-            <div class="dog-calculator-share-buttons">
-                <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
-                    Facebook
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
-                    Twitter
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
-                    LinkedIn
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
-                    Email
-                </button>
-                <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
-                    Copy Link
-                </button>
-            </div>
-            <div class="dog-calculator-share-url">
-                <input type="text" id="shareUrl" readonly>
+        <!-- Share Modal -->
+        <div id="shareModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content">
+                <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
+                <h3>Share Calculator</h3>
+                <div class="dog-calculator-share-buttons">
+                    <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
+                        Facebook
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
+                        Twitter
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
+                        LinkedIn
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
+                        Email
+                    </button>
+                    <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
+                        Copy Link
+                    </button>
+                </div>
+                <div class="dog-calculator-share-url">
+                    <input type="text" id="shareUrl" readonly>
+                </div>
             </div>
         </div>
-    </div>
 
-    <!-- Embed Modal -->
-    <div id="embedModal" class="dog-calculator-modal" style="display: none;">
-        <div class="dog-calculator-modal-content dog-calculator-modal-embed">
-            <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
-            <h3>⚡ Embed the Calculator</h3>
-            
-            <div class="dog-calculator-embed-options">
-                <div class="dog-calculator-embed-option">
-                    <h4>⚡ JavaScript Widget</h4>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="widgetCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
-                            Copy
-                        </button>
-                    </div>
-                </div>
+        <!-- Embed Modal -->
+        <div id="embedModal" class="dog-calculator-modal" style="display: none;">
+            <div class="dog-calculator-modal-content dog-calculator-modal-embed">
+                <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
+                <h3>⚡ Embed the Calculator</h3>
                 
-                <div class="dog-calculator-embed-option">
-                    <h4>🛡️ iframe Embed</h4>
-                    <div class="dog-calculator-code-container">
-                        <pre><code id="iframeCode"></code></pre>
-                        <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
-                            Copy
-                        </button>
+                <div class="dog-calculator-embed-options">
+                    <div class="dog-calculator-embed-option">
+                        <h4>⚡ JavaScript Widget</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="widgetCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="dog-calculator-embed-option">
+                        <h4>🛡️ iframe Embed</h4>
+                        <div class="dog-calculator-code-container">
+                            <pre><code id="iframeCode"></code></pre>
+                            <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
+                                Copy
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>