AI update: תיקון פופ-אפ תשלום — Hair On Top. חפש בכל קבצי העמוד (HTML/JS) כל קוד תשלום קיים: iframe לכתובת SmartPay/pay.smartpay.co
This commit is contained in:
+4
-321
@@ -321,7 +321,7 @@
|
||||
<h3 class="popup-option-title">הורדת קוד בלבד</h3>
|
||||
<p class="popup-option-desc">קבלו את כל קבצי האתר ותעלו אותם לשרת שלכם</p>
|
||||
</div>
|
||||
<button class="popup-option-btn popup-option-btn-secondary">הורדה</button>
|
||||
<button class="popup-option-btn popup-option-btn-secondary" data-plan="code">הורדה</button>
|
||||
</div>
|
||||
<div class="popup-option popup-option-featured">
|
||||
<div class="popup-option-badge">מומלץ</div>
|
||||
@@ -336,7 +336,7 @@
|
||||
<h3 class="popup-option-title">חבילה מלאה</h3>
|
||||
<p class="popup-option-desc">אחסון + דומיין + תמיכה — האתר עולה לאוויר מיד</p>
|
||||
</div>
|
||||
<button class="popup-option-btn popup-option-btn-primary">לפרטים</button>
|
||||
<button class="popup-option-btn popup-option-btn-primary" data-plan="full">לפרטים</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-warning">
|
||||
@@ -353,7 +353,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button & Pricing Modal -->
|
||||
<!-- Floating Action Button -->
|
||||
<style>
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
@@ -402,216 +402,6 @@
|
||||
50% { box-shadow: 0 8px 40px rgba(212, 175, 55, 0.6), 0 4px 16px rgba(0,0,0,0.4); }
|
||||
}
|
||||
|
||||
.pricing-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 9500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.pricing-modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pricing-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
background: linear-gradient(180deg, #222222, #0a0a0a);
|
||||
border: 1px solid #B8960C;
|
||||
border-radius: 20px;
|
||||
padding: 40px 32px 32px;
|
||||
transform: scale(0.92) translateY(20px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pricing-modal-overlay.active .pricing-modal {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.pricing-modal-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #141414;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d0d0d0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pricing-modal-close:hover,
|
||||
.pricing-modal-close:focus {
|
||||
background: #D4AF37;
|
||||
color: #0a0a0a;
|
||||
border-color: #D4AF37;
|
||||
}
|
||||
|
||||
.pricing-modal-close svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.pricing-modal-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.pricing-modal-title {
|
||||
font-family: 'Secular One', sans-serif;
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 400;
|
||||
color: #fafafa;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.pricing-modal-subtitle {
|
||||
color: #888888;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pricing-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
position: relative;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
border-color: #B8960C;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.pricing-card-featured {
|
||||
border-color: #D4AF37;
|
||||
background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent);
|
||||
}
|
||||
|
||||
.pricing-card-badge {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 20px;
|
||||
padding: 4px 14px;
|
||||
background: linear-gradient(135deg, #D4AF37, #B8960C);
|
||||
color: #0a0a0a;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.pricing-card-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
color: #fafafa;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.pricing-card-price {
|
||||
font-family: 'Secular One', sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 400;
|
||||
color: #D4AF37;
|
||||
margin: 0 0 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pricing-card-price span {
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.pricing-card-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.pricing-card-features li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
color: #d0d0d0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.pricing-card-features li svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #D4AF37;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.pricing-card-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pricing-card-btn-secondary {
|
||||
background: transparent;
|
||||
color: #fafafa;
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.pricing-card-btn-secondary:hover,
|
||||
.pricing-card-btn-secondary:focus {
|
||||
border-color: #D4AF37;
|
||||
color: #D4AF37;
|
||||
}
|
||||
|
||||
.pricing-card-btn-primary {
|
||||
background: linear-gradient(135deg, #D4AF37, #B8960C);
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.pricing-card-btn-primary:hover,
|
||||
.pricing-card-btn-primary:focus {
|
||||
background: linear-gradient(135deg, #E5C76B, #D4AF37);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.fab-container {
|
||||
bottom: 16px;
|
||||
@@ -625,23 +415,6 @@
|
||||
padding: 14px 20px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.pricing-modal {
|
||||
padding: 32px 20px 24px;
|
||||
}
|
||||
|
||||
.pricing-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.pricing-card-price {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -658,97 +431,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pricing-modal-overlay" id="pricingModal" role="dialog" aria-modal="true" aria-labelledby="pricingModalTitle">
|
||||
<div class="pricing-modal">
|
||||
<button class="pricing-modal-close" id="pricingModalClose" aria-label="סגור חלון">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="pricing-modal-header">
|
||||
<h2 class="pricing-modal-title" id="pricingModalTitle">בחרו את החבילה המתאימה לכם</h2>
|
||||
<p class="pricing-modal-subtitle">שתי אפשרויות להתחיל עם האתר החדש שלכם</p>
|
||||
</div>
|
||||
<div class="pricing-cards">
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-card-name">קוד האתר בלבד</h3>
|
||||
<p class="pricing-card-price">₪1,490 <span>תשלום חד פעמי</span></p>
|
||||
<ul class="pricing-card-features">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>קבצי האתר המלאים (HTML, CSS, JS)</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>קוד נקי ומותאם לכל דפדפן</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>ללא אחסון — תעלו לשרת שלכם</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=hairontop&plan=code" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-secondary">המשך לתשלום</a>
|
||||
</div>
|
||||
<div class="pricing-card pricing-card-featured">
|
||||
<div class="pricing-card-badge">מומלץ</div>
|
||||
<h3 class="pricing-card-name">חבילה מלאה</h3>
|
||||
<p class="pricing-card-price">₪2,390 <span>תשלום חד פעמי</span></p>
|
||||
<ul class="pricing-card-features">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>קוד + אחסון מהיר לשנה</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>דומיין בהתאמה אישית</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>תיבת מייל עסקית + תמיכה</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=hairontop&plan=full" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-primary">המשך לתשלום</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var fabBtn = document.getElementById('fabBtn');
|
||||
var pricingModal = document.getElementById('pricingModal');
|
||||
var pricingModalClose = document.getElementById('pricingModalClose');
|
||||
|
||||
function openPricingModal() {
|
||||
pricingModal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
pricingModalClose.focus();
|
||||
}
|
||||
|
||||
function closePricingModal() {
|
||||
pricingModal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
fabBtn.focus();
|
||||
}
|
||||
|
||||
fabBtn.addEventListener('click', openPricingModal);
|
||||
pricingModalClose.addEventListener('click', closePricingModal);
|
||||
|
||||
pricingModal.addEventListener('click', function(e) {
|
||||
if (e.target === pricingModal) {
|
||||
closePricingModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && pricingModal.classList.contains('active')) {
|
||||
closePricingModal();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="https://emilio.clientscenter.co.il/pay/popup.js" data-src="cmt03bpiu001ppa01litf8kdn" data-name="Hair On Top" data-origin="https://emilio.clientscenter.co.il"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user