AI update: תיקון פופ-אפ תשלום — שרית הספרית. חפש בכל קבצי העמוד (HTML/JS) כל קוד תשלום קיים: iframe לכתובת SmartPay/pay.smartpay.co

This commit is contained in:
2026-08-20 22:15:30 +00:00
parent 9e369c0b1a
commit 449cdb5722
+1 -484
View File
@@ -361,490 +361,7 @@
</div>
</footer>
<!-- Pricing FAB and Modal -->
<button class="pricing-fab" id="pricing-fab" aria-label="פתיחת חלון בחירת חבילה">
<span class="pricing-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
</button>
<div class="pricing-modal-overlay" id="pricing-modal-overlay" aria-hidden="true">
<div class="pricing-modal" role="dialog" aria-modal="true" aria-labelledby="pricing-modal-title">
<button class="pricing-modal-close" id="pricing-modal-close" aria-label="סגירת חלון">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
<div class="pricing-modal-content">
<h2 id="pricing-modal-title" class="pricing-modal-title">בחרו את החבילה המתאימה לכם</h2>
<div class="pricing-cards">
<div class="pricing-card">
<div class="pricing-card-header">
<h3>קוד האתר בלבד</h3>
<div class="pricing-card-price">
<span class="pricing-currency"></span>
<span class="pricing-amount">1,490</span>
</div>
</div>
<ul class="pricing-card-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>קבצי האתר המלאים</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>קוד נקי ומתועד</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>ללא אחסון — תארחו בעצמכם</span>
</li>
</ul>
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=sarit&plan=code" target="_blank" rel="noopener" class="pricing-card-btn">
המשך לתשלום
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<div class="pricing-card pricing-card-featured">
<div class="pricing-card-badge">מומלץ</div>
<div class="pricing-card-header">
<h3>חבילה מלאה</h3>
<div class="pricing-card-price">
<span class="pricing-currency"></span>
<span class="pricing-amount">2,390</span>
</div>
</div>
<ul class="pricing-card-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>קוד + אחסון לשנה</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>דומיין בהתאמה אישית</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/>
</svg>
<span>תיבת מייל עסקית</span>
</li>
</ul>
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=sarit&plan=full" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-featured">
המשך לתשלום
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Pricing FAB */
.pricing-fab {
position: fixed;
bottom: var(--space-lg);
inset-inline-end: var(--space-md);
z-index: 85;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
color: var(--color-white);
border: none;
border-radius: var(--radius-full);
box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.95rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: pricing-fab-pulse 2s ease-in-out infinite;
}
.pricing-fab:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 30px rgba(139, 105, 20, 0.5);
}
.pricing-fab:focus-visible {
outline: 3px solid var(--color-warm);
outline-offset: 3px;
}
.pricing-fab-text {
white-space: nowrap;
}
@keyframes pricing-fab-pulse {
0%, 100% {
box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
}
50% {
box-shadow: 0 4px 30px rgba(139, 105, 20, 0.6);
}
}
/* Pricing Modal Overlay */
.pricing-modal-overlay {
position: fixed;
inset: 0;
z-index: 160;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
background: rgba(61, 50, 41, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.pricing-modal-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* Pricing Modal */
.pricing-modal {
position: relative;
width: 100%;
max-width: 720px;
max-height: 90vh;
overflow-y: auto;
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(61, 50, 41, 0.3);
transform: scale(0.95) translateY(20px);
transition: transform 0.4s ease;
}
.pricing-modal-overlay.is-visible .pricing-modal {
transform: scale(1) translateY(0);
}
.pricing-modal-close {
position: absolute;
top: var(--space-sm);
inset-inline-end: var(--space-sm);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
border: none;
border-radius: 50%;
color: var(--color-text-light);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
z-index: 10;
}
.pricing-modal-close:hover {
background: var(--color-cream);
color: var(--color-text);
}
.pricing-modal-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.pricing-modal-close svg {
width: 20px;
height: 20px;
}
.pricing-modal-content {
padding: var(--space-xl);
}
.pricing-modal-title {
text-align: center;
font-size: clamp(1.25rem, 4vw, 1.5rem);
font-weight: 600;
color: var(--color-text);
margin-block-end: var(--space-lg);
}
/* Pricing Cards */
.pricing-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 600px) {
.pricing-cards {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
}
.pricing-card {
position: relative;
padding: var(--space-lg);
background: var(--color-bg);
border-radius: var(--radius-lg);
border: 2px solid transparent;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.pricing-card:hover {
border-color: var(--color-warm);
transform: translateY(-4px);
}
.pricing-card-featured {
background: linear-gradient(135deg, rgba(201, 168, 124, 0.1) 0%, rgba(168, 181, 160, 0.1) 100%);
border-color: var(--color-accent);
}
.pricing-card-featured:hover {
border-color: var(--color-accent);
}
.pricing-card-badge {
position: absolute;
top: -12px;
inset-inline-start: 50%;
transform: translateX(50%);
padding: 4px 16px;
background: var(--color-accent);
color: var(--color-white);
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-full);
}
.pricing-card-header {
text-align: center;
margin-block-end: var(--space-md);
padding-block-end: var(--space-md);
border-block-end: 1px solid rgba(201, 168, 124, 0.3);
}
.pricing-card-header h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
margin-block-end: var(--space-sm);
}
.pricing-card-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.pricing-currency {
font-size: 1.25rem;
font-weight: 500;
color: var(--color-text-light);
}
.pricing-amount {
font-size: 2.25rem;
font-weight: 600;
color: var(--color-accent);
line-height: 1;
}
.pricing-card-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.pricing-card-features li {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.9rem;
color: var(--color-text-light);
}
.pricing-card-features svg {
width: 18px;
height: 18px;
color: var(--color-accent);
flex-shrink: 0;
}
.pricing-card-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
width: 100%;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text);
background: var(--color-white);
border: 2px solid var(--color-warm);
border-radius: var(--radius-md);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pricing-card-btn:hover {
background: var(--color-warm);
color: var(--color-white);
border-color: var(--color-warm);
}
.pricing-card-btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.pricing-card-btn svg {
width: 18px;
height: 18px;
transform: scaleX(-1);
}
.pricing-card-btn-featured {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
color: var(--color-white);
border-color: transparent;
}
.pricing-card-btn-featured:hover {
background: linear-gradient(135deg, var(--color-text) 0%, #5a4d40 100%);
border-color: transparent;
}
/* Body scroll lock when pricing modal is open */
body.pricing-modal-open {
overflow: hidden;
}
/* Mobile adjustments */
@media (max-width: 599px) {
.pricing-fab {
padding: var(--space-xs) var(--space-sm);
font-size: 0.85rem;
bottom: var(--space-md);
}
.pricing-modal-content {
padding: var(--space-lg);
}
.pricing-card {
padding: var(--space-md);
}
.pricing-amount {
font-size: 1.75rem;
}
}
</style>
<script>
(function() {
'use strict';
var pricingFab = document.getElementById('pricing-fab');
var pricingModalOverlay = document.getElementById('pricing-modal-overlay');
var pricingModalClose = document.getElementById('pricing-modal-close');
var pricingModal = pricingModalOverlay ? pricingModalOverlay.querySelector('.pricing-modal') : null;
function openPricingModal() {
if (!pricingModalOverlay) return;
pricingModalOverlay.classList.add('is-visible');
pricingModalOverlay.setAttribute('aria-hidden', 'false');
document.body.classList.add('pricing-modal-open');
if (pricingModalClose) {
setTimeout(function() {
pricingModalClose.focus();
}, 100);
}
}
function closePricingModal() {
if (!pricingModalOverlay) return;
pricingModalOverlay.classList.remove('is-visible');
pricingModalOverlay.setAttribute('aria-hidden', 'true');
document.body.classList.remove('pricing-modal-open');
if (pricingFab) {
pricingFab.focus();
}
}
if (pricingFab) {
pricingFab.addEventListener('click', openPricingModal);
}
if (pricingModalClose) {
pricingModalClose.addEventListener('click', closePricingModal);
}
if (pricingModalOverlay) {
pricingModalOverlay.addEventListener('click', function(e) {
if (e.target === pricingModalOverlay) {
closePricingModal();
}
});
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && pricingModalOverlay && pricingModalOverlay.classList.contains('is-visible')) {
closePricingModal();
}
});
if (pricingModal) {
pricingModal.addEventListener('keydown', function(e) {
if (e.key !== 'Tab') return;
var focusableElements = pricingModal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
var firstElement = focusableElements[0];
var lastElement = focusableElements[focusableElements.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastElement) {
firstElement.focus();
e.preventDefault();
}
}
});
}
})();
</script>
<script src="script.js"></script>
<script src="https://emilio.clientscenter.co.il/pay/popup.js" data-src="cmt03bpih001fpa01eiwlycit" data-name="שרית הספרית" data-origin="https://emilio.clientscenter.co.il"></script>
</body>
</html>