AI update: הוסף לפני תג הסגירה </body> קטע קוד (HTML+CSS+JS וניל, ללא ספריות חיצוניות) שיוצר כפתור פעולה צף (floating action button
This commit is contained in:
+471
@@ -321,6 +321,477 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button & Pricing Modal -->
|
||||
<style>
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 8000;
|
||||
}
|
||||
|
||||
.fab-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 22px;
|
||||
background: linear-gradient(135deg, #D4AF37 0%, #8B7355 100%);
|
||||
color: #0a0a0a;
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 2px 8px rgba(0,0,0,0.3);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: fab-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.fab-button:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 6px 28px rgba(212, 175, 55, 0.5), 0 4px 12px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.fab-button:focus {
|
||||
outline: 2px solid #f5f5f5;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.fab-emoji {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@keyframes fab-pulse {
|
||||
0%, 100% { box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 2px 8px rgba(0,0,0,0.3); }
|
||||
50% { box-shadow: 0 4px 30px rgba(212, 175, 55, 0.6), 0 2px 12px rgba(0,0,0,0.4); }
|
||||
}
|
||||
|
||||
/* Pricing Modal */
|
||||
.pricing-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.35s ease, visibility 0.35s ease;
|
||||
}
|
||||
|
||||
.pricing-modal.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pricing-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.pricing-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
|
||||
border: 1px solid #D4AF37;
|
||||
border-radius: 16px;
|
||||
transform: translateY(25px) scale(0.96);
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.pricing-modal.active .pricing-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.pricing-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 50%;
|
||||
color: #a0a0a0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.pricing-close:hover,
|
||||
.pricing-close:focus {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #f5f5f5;
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.pricing-close svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.pricing-content {
|
||||
padding: 48px 32px 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pricing-header-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 20px;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), transparent);
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-header-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
stroke: #D4AF37;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.pricing-title {
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 1.625rem;
|
||||
font-weight: 600;
|
||||
color: #f5f5f5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pricing-subtitle {
|
||||
font-size: 1rem;
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.pricing-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
position: relative;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 12px;
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
border-color: rgba(212, 175, 55, 0.4);
|
||||
background: rgba(212, 175, 55, 0.03);
|
||||
}
|
||||
|
||||
.pricing-card.featured {
|
||||
border-color: #D4AF37;
|
||||
background: rgba(212, 175, 55, 0.06);
|
||||
}
|
||||
|
||||
.pricing-card.featured::before {
|
||||
content: 'מומלץ';
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
background: #D4AF37;
|
||||
color: #0a0a0a;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.pricing-card-title {
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 500;
|
||||
color: #f5f5f5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pricing-card-price {
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #D4AF37;
|
||||
margin-bottom: 4px;
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pricing-card-currency {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.pricing-card-period {
|
||||
font-size: 0.8125rem;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pricing-features li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 0.8125rem;
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pricing-features li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pricing-features svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
stroke: #D4AF37;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.pricing-cta {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.pricing-cta-secondary {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: #f5f5f5;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.pricing-cta-secondary:hover,
|
||||
.pricing-cta-secondary:focus {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.pricing-cta-primary {
|
||||
background: #D4AF37;
|
||||
color: #0a0a0a;
|
||||
border: 1px solid #D4AF37;
|
||||
}
|
||||
|
||||
.pricing-cta-primary:hover,
|
||||
.pricing-cta-primary:focus {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 600px) {
|
||||
.fab-container {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.fab-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 12px 18px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.pricing-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.pricing-content {
|
||||
padding: 44px 20px 24px;
|
||||
}
|
||||
|
||||
.pricing-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.pricing-card.featured::before {
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduce motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fab-button {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.pricing-modal,
|
||||
.pricing-container {
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
}
|
||||
|
||||
/* Body scroll lock */
|
||||
body.pricing-modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="fab-container">
|
||||
<button class="fab-button" id="fabButton" aria-label="רוצים אתר כזה? לחצו כאן">
|
||||
<span>רוצים אתר כזה? לחצו כאן</span>
|
||||
<span class="fab-emoji" aria-hidden="true">????</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pricing-modal" id="pricingModal" role="dialog" aria-modal="true" aria-labelledby="pricingModalTitle">
|
||||
<div class="pricing-backdrop" id="pricingBackdrop"></div>
|
||||
<div class="pricing-container">
|
||||
<button class="pricing-close" id="pricingClose" aria-label="סגירת חלון">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="pricing-content">
|
||||
<div class="pricing-header-icon">
|
||||
<svg viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 id="pricingModalTitle" class="pricing-title">בחרו את החבילה המתאימה לכם</h2>
|
||||
<p class="pricing-subtitle">קבלו אתר מקצועי כמו זה לעסק שלכם</p>
|
||||
|
||||
<div class="pricing-cards">
|
||||
<div class="pricing-card">
|
||||
<h3 class="pricing-card-title">קוד האתר בלבד</h3>
|
||||
<div class="pricing-card-price">
|
||||
<span class="pricing-card-currency">₪</span>1,490
|
||||
</div>
|
||||
<p class="pricing-card-period">תשלום חד פעמי</p>
|
||||
<ul class="pricing-features">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>קבצי האתר המלאים (HTML, CSS, JS)</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>קוד נקי ומותאם לעסק שלכם</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>ללא אחסון — להעלאה עצמאית</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=orly&plan=code" target="_blank" rel="noopener" class="pricing-cta pricing-cta-secondary">המשך לתשלום</a>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card featured">
|
||||
<h3 class="pricing-card-title">חבילה מלאה</h3>
|
||||
<div class="pricing-card-price">
|
||||
<span class="pricing-card-currency">₪</span>2,390
|
||||
</div>
|
||||
<p class="pricing-card-period">תשלום חד פעמי</p>
|
||||
<ul class="pricing-features">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>קוד האתר + אחסון לשנה</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>דומיין בהתאמה אישית</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>תיבת מייל עסקית מותאמת</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=orly&plan=full" target="_blank" rel="noopener" class="pricing-cta pricing-cta-primary">המשך לתשלום</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var fabBtn = document.getElementById('fabButton');
|
||||
var pricingModal = document.getElementById('pricingModal');
|
||||
var pricingClose = document.getElementById('pricingClose');
|
||||
var pricingBackdrop = document.getElementById('pricingBackdrop');
|
||||
|
||||
function openPricingModal() {
|
||||
pricingModal.classList.add('active');
|
||||
document.body.classList.add('pricing-modal-open');
|
||||
pricingClose.focus();
|
||||
}
|
||||
|
||||
function closePricingModal() {
|
||||
pricingModal.classList.remove('active');
|
||||
document.body.classList.remove('pricing-modal-open');
|
||||
fabBtn.focus();
|
||||
}
|
||||
|
||||
fabBtn.addEventListener('click', openPricingModal);
|
||||
pricingClose.addEventListener('click', closePricingModal);
|
||||
pricingBackdrop.addEventListener('click', closePricingModal);
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && pricingModal.classList.contains('active')) {
|
||||
closePricingModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Focus trap for pricing modal
|
||||
pricingModal.addEventListener('keydown', function(e) {
|
||||
if (e.key !== 'Tab') return;
|
||||
var focusable = pricingModal.querySelectorAll('button, a[href], [tabindex]:not([tabindex="-1"])');
|
||||
var first = focusable[0];
|
||||
var last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
last.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
first.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user