Fix share/embed modals
This commit is contained in:
Dayowe
parent
c4a15a95b3
commit
650b469202
105
iframe.html
105
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">×</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">×</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">×</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">×</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
|
||||
|
||||
@ -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">×</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">×</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">×</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">×</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user