Fix share/embed modals
This commit is contained in:
parent
c4a15a95b3
commit
650b469202
101
iframe.html
101
iframe.html
@ -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">×</span>
|
||||||
<div class="dog-calculator-modal-content">
|
<h3>Share Calculator</h3>
|
||||||
<span class="dog-calculator-modal-close" id="shareModalClose">×</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">×</span>
|
<span class="dog-calculator-modal-close" id="embedModalClose">×</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
|
||||||
|
|||||||
@ -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">×</span>
|
||||||
<div class="dog-calculator-modal-content">
|
<h3>Share Calculator</h3>
|
||||||
<span class="dog-calculator-modal-close" id="shareModalClose">×</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">×</span>
|
<span class="dog-calculator-modal-close" id="embedModalClose">×</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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user