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

Fix share/embed modals

Browse Source
This commit is contained in:
Dayowe 2025-06-26 18:03:39 +02:00
parent c4a15a95b3
commit 650b469202
2 changed files with 104 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
iframe.html
View File

@ -848,7 +848,7 @@
.dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); } .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
.dog-calculator-share-linkedin { background: #0a66c2; } .dog-calculator-share-linkedin { background: #0a66c2; }
.dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); } .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-email:hover { background: #5a3357; transform: translateY(-1px); }
.dog-calculator-share-copy { background: #f19a5f; } .dog-calculator-share-copy { background: #f19a5f; }
.dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); } .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
@ -912,7 +912,7 @@
} }
.dog-calculator-code-container code { .dog-calculator-code-container code {
color: var(--bg-secondary); color: var(--text-primary);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4; line-height: 1.4;
@ -1965,66 +1965,67 @@
by caninenutritionandwellness.com by caninenutritionandwellness.com
</a> </a>
</div> </div>
</div> <!-- Share Modal -->
<div id="shareModal" class="dog-calculator-modal" style="display: none;">
<!-- Share Modal --> <div class="dog-calculator-modal-content">
<div id="shareModal" class="dog-calculator-modal" style="display: none;"> <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
<div class="dog-calculator-modal-content"> <h3>Share Calculator</h3>
<span class="dog-calculator-modal-close" id="shareModalClose">&times;</span> <div class="dog-calculator-share-buttons">
<h3>Share Calculator</h3> <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
<div class="dog-calculator-share-buttons"> Facebook
<button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook"> </button>
Facebook <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
</button> Twitter
<button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter"> </button>
Twitter <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
</button> LinkedIn
<button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn"> </button>
LinkedIn <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
</button> Email
<button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail"> </button>
Email <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
</button> Copy Link
<button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy"> </button>
Copy Link </div>
</button> <div class="dog-calculator-share-url">
</div> <input type="text" id="shareUrl" readonly>
<div class="dog-calculator-share-url"> </div>
<input type="text" id="shareUrl" readonly>
</div> </div>
</div> </div>
</div>
<!-- Embed Modal --> <!-- Embed Modal -->
<div id="embedModal" class="dog-calculator-modal" style="display: none;"> <div id="embedModal" class="dog-calculator-modal" style="display: none;">
<div class="dog-calculator-modal-content dog-calculator-modal-embed"> <div class="dog-calculator-modal-content dog-calculator-modal-embed">
<span class="dog-calculator-modal-close" id="embedModalClose">&times;</span> <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
<h3>⚡ Embed the Calculator</h3> <h3>⚡ Embed the Calculator</h3>
<div class="dog-calculator-embed-options"> <div class="dog-calculator-embed-options">
<div class="dog-calculator-embed-option"> <div class="dog-calculator-embed-option">
<h4>⚡ JavaScript Widget</h4> <h4>⚡ JavaScript Widget</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="widgetCode"></code></pre> <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"> <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
Copy Copy
</button> </button>
</div>
</div> </div>
</div>
<div class="dog-calculator-embed-option"> <div class="dog-calculator-embed-option">
<h4>🛡️ iframe Embed</h4> <h4>🛡️ iframe Embed</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="iframeCode"></code></pre> <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"> <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
Copy Copy
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
/** /**
* Dog Calorie Calculator - iframe version * Dog Calorie Calculator - iframe version

99
sundog-dog-food-calculator.js
View File

@ -863,7 +863,7 @@
.dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); } .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
.dog-calculator-share-linkedin { background: #0a66c2; } .dog-calculator-share-linkedin { background: #0a66c2; }
.dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); } .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-email:hover { background: #5a3357; transform: translateY(-1px); }
.dog-calculator-share-copy { background: #f19a5f; } .dog-calculator-share-copy { background: #f19a5f; }
.dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); } .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
@ -927,7 +927,7 @@
} }
.dog-calculator-code-container code { .dog-calculator-code-container code {
color: var(--bg-secondary); color: var(--text-primary);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4; line-height: 1.4;
@ -2013,60 +2013,59 @@
by caninenutritionandwellness.com by caninenutritionandwellness.com
</a> </a>
</div> </div>
</div> <!-- Share Modal -->
<div id="shareModal" class="dog-calculator-modal" style="display: none;">
<!-- Share Modal --> <div class="dog-calculator-modal-content">
<div id="shareModal" class="dog-calculator-modal" style="display: none;"> <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
<div class="dog-calculator-modal-content"> <h3>Share Calculator</h3>
<span class="dog-calculator-modal-close" id="shareModalClose">&times;</span> <div class="dog-calculator-share-buttons">
<h3>Share Calculator</h3> <button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook">
<div class="dog-calculator-share-buttons"> Facebook
<button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook"> </button>
Facebook <button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter">
</button> Twitter
<button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter"> </button>
Twitter <button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn">
</button> LinkedIn
<button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn"> </button>
LinkedIn <button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail">
</button> Email
<button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail"> </button>
Email <button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy">
</button> Copy Link
<button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy"> </button>
Copy Link </div>
</button> <div class="dog-calculator-share-url">
</div> <input type="text" id="shareUrl" readonly>
<div class="dog-calculator-share-url"> </div>
<input type="text" id="shareUrl" readonly>
</div> </div>
</div> </div>
</div>
<!-- Embed Modal --> <!-- Embed Modal -->
<div id="embedModal" class="dog-calculator-modal" style="display: none;"> <div id="embedModal" class="dog-calculator-modal" style="display: none;">
<div class="dog-calculator-modal-content dog-calculator-modal-embed"> <div class="dog-calculator-modal-content dog-calculator-modal-embed">
<span class="dog-calculator-modal-close" id="embedModalClose">&times;</span> <span class="dog-calculator-modal-close" id="embedModalClose">&times;</span>
<h3>⚡ Embed the Calculator</h3> <h3>⚡ Embed the Calculator</h3>
<div class="dog-calculator-embed-options"> <div class="dog-calculator-embed-options">
<div class="dog-calculator-embed-option"> <div class="dog-calculator-embed-option">
<h4>⚡ JavaScript Widget</h4> <h4>⚡ JavaScript Widget</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="widgetCode"></code></pre> <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"> <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
Copy Copy
</button> </button>
</div>
</div> </div>
</div>
<div class="dog-calculator-embed-option"> <div class="dog-calculator-embed-option">
<h4>🛡️ iframe Embed</h4> <h4>🛡️ iframe Embed</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="iframeCode"></code></pre> <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"> <button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
Copy Copy
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>