AI update: הוסף לפני תג הסגירה </body> קטע קוד (HTML+CSS+JS וניל, ללא ספריות חיצוניות) שיוצר כפתור פעולה צף (floating action button
This commit is contained in:
+373
-62
@@ -560,83 +560,394 @@
|
|||||||
<span>052-855-5502</span>
|
<span>052-855-5502</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Floating offer button -->
|
<!-- Want a site like this FAB + Modal -->
|
||||||
<button class="floating-offer-btn" id="openOfferBtn" aria-label="הצעה מיוחדת">
|
<button class="want-site-fab" id="wantSiteFab" aria-label="רוצים אתר כזה?">
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
<span class="want-site-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
|
||||||
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm3.5 12.09l-1.41 1.41L12 13.41 9.91 15.5 8.5 14.09 10.59 12 8.5 9.91 9.91 8.5 12 10.59l2.09-2.09 1.41 1.41L13.41 12l2.09 2.09z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
<span>הצעה</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Sales Popup -->
|
<div class="package-modal-overlay" id="packageModalOverlay" aria-hidden="true">
|
||||||
<div class="popup-overlay" id="popupOverlay" aria-hidden="true">
|
<div class="package-modal" role="dialog" aria-labelledby="packageModalTitle" aria-modal="true">
|
||||||
<div class="popup-modal" role="dialog" aria-labelledby="popupTitle" aria-modal="true">
|
<button class="package-modal-close" id="packageModalClose" aria-label="סגור">
|
||||||
<button class="popup-close" id="closePopupBtn" aria-label="סגור">
|
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
|
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="popup-header">
|
<h2 id="packageModalTitle" class="package-modal-title">בחרו את החבילה המתאימה לכם</h2>
|
||||||
<div class="popup-icon">
|
|
||||||
<svg viewBox="0 0 60 60" aria-hidden="true">
|
<div class="package-cards">
|
||||||
<circle cx="30" cy="30" r="28" fill="var(--orange)"/>
|
<div class="package-card">
|
||||||
<path d="M22 18 L22 42 L28 42 L28 32 L32 32 L32 42 L38 42 L38 18 L32 18 L32 28 L28 28 L28 18 Z" fill="white"/>
|
<div class="package-card-header">
|
||||||
</svg>
|
<h3>קוד האתר בלבד</h3>
|
||||||
|
<div class="package-price">₪1,490</div>
|
||||||
|
</div>
|
||||||
|
<ul class="package-features">
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
|
קבצי האתר המלאים (HTML, CSS, JS)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
|
עיצוב מותאם אישית לעסק שלכם
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
|
ללא אחסון — תעלו בעצמכם
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=itzik&plan=code" target="_blank" rel="noopener" class="package-btn package-btn-secondary">
|
||||||
|
המשך לתשלום
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<h2 id="popupTitle">האתר שלך מוכן ומחכה לך</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popup-content">
|
|
||||||
<p class="popup-intro">בחרו את האפשרות המתאימה לכם:</p>
|
|
||||||
|
|
||||||
<div class="popup-options">
|
<div class="package-card package-card-featured">
|
||||||
<a href="#" class="popup-option popup-option-basic">
|
<div class="package-badge">מומלץ</div>
|
||||||
<div class="option-icon">
|
<div class="package-card-header">
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
<h3>חבילה מלאה</h3>
|
||||||
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" fill="currentColor"/>
|
<div class="package-price">₪2,390</div>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
<ul class="package-features">
|
||||||
<div class="option-text">
|
<li>
|
||||||
<strong>הורדת קוד המקור</strong>
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
<span>קבלו את כל קבצי האתר להתקנה עצמאית</span>
|
קוד האתר + אחסון לשנה
|
||||||
</div>
|
</li>
|
||||||
<svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
|
<li>
|
||||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
</svg>
|
דומיין בהתאמה אישית
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
|
תיבת מייל עסקית
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=itzik&plan=full" target="_blank" rel="noopener" class="package-btn package-btn-primary">
|
||||||
|
המשך לתשלום
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/></svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="#" class="popup-option popup-option-premium">
|
|
||||||
<div class="option-badge">מומלץ</div>
|
|
||||||
<div class="option-icon">
|
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
||||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="option-text">
|
|
||||||
<strong>אחסון מלא + קוד</strong>
|
|
||||||
<span>כולל דומיין, אחסון וניהול מלא</span>
|
|
||||||
</div>
|
|
||||||
<svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
|
|
||||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popup-warning">
|
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
||||||
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
<p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popup-extras">
|
|
||||||
<p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד. <a href="#contact" class="popup-link" id="popupContactLink">צרו קשר</a> ונתאים לכם הצעה.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Want a site like this - FAB */
|
||||||
|
.want-site-fab {
|
||||||
|
position: fixed;
|
||||||
|
inset-block-end: calc(var(--space-md) + 60px);
|
||||||
|
inset-inline-start: var(--space-md);
|
||||||
|
z-index: 95;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
|
||||||
|
color: var(--cream);
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 2px solid var(--orange);
|
||||||
|
border-radius: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.want-site-fab:hover,
|
||||||
|
.want-site-fab:focus {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4);
|
||||||
|
background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.want-site-fab-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.want-site-fab {
|
||||||
|
inset-inline-start: var(--space-sm);
|
||||||
|
inset-block-end: calc(var(--space-sm) + 55px);
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Package Modal Overlay */
|
||||||
|
.package-modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 200;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-md);
|
||||||
|
background: rgba(21, 42, 69, 0.85);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.3s, visibility 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Package Modal */
|
||||||
|
.package-modal {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background: var(--cream);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transform: scale(0.9) translateY(20px);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-overlay.active .package-modal {
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-close {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: var(--space-md);
|
||||||
|
inset-inline-end: var(--space-md);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--gray-light);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-close svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-close:hover,
|
||||||
|
.package-modal-close:focus {
|
||||||
|
background: var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-close:hover svg,
|
||||||
|
.package-modal-close:focus svg {
|
||||||
|
color: var(--cream);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: clamp(1.25rem, 4vw, 1.75rem);
|
||||||
|
color: var(--navy);
|
||||||
|
margin-block-end: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Package Cards */
|
||||||
|
.package-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.package-cards {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-modal {
|
||||||
|
padding: var(--space-lg) var(--space-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--gray-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card:hover {
|
||||||
|
border-color: var(--light-blue);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card-featured {
|
||||||
|
border-color: var(--orange);
|
||||||
|
background: linear-gradient(180deg, rgba(255, 107, 53, 0.05) 0%, white 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card-featured:hover {
|
||||||
|
border-color: var(--orange);
|
||||||
|
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-badge {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: -12px;
|
||||||
|
inset-inline-start: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
background: var(--orange);
|
||||||
|
color: white;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 50px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-block-end: var(--space-md);
|
||||||
|
padding-block-end: var(--space-md);
|
||||||
|
border-block-end: 1px solid var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card-header h3 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--navy);
|
||||||
|
margin-block-end: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-price {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
margin-block-end: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-features li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--gray);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-features svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-block-start: 2px;
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-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-display);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition: all 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn:hover svg {
|
||||||
|
transform: translateX(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn-secondary {
|
||||||
|
background: var(--navy);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn-secondary:hover,
|
||||||
|
.package-btn-secondary:focus {
|
||||||
|
background: var(--navy-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn-primary {
|
||||||
|
background: var(--orange);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-btn-primary:hover,
|
||||||
|
.package-btn-primary:focus {
|
||||||
|
background: var(--orange-dark);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.package-modal-overlay,
|
||||||
|
.package-modal,
|
||||||
|
.want-site-fab {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const fab = document.getElementById('wantSiteFab');
|
||||||
|
const overlay = document.getElementById('packageModalOverlay');
|
||||||
|
const closeBtn = document.getElementById('packageModalClose');
|
||||||
|
const modal = overlay.querySelector('.package-modal');
|
||||||
|
|
||||||
|
function openModal() {
|
||||||
|
overlay.classList.add('active');
|
||||||
|
overlay.setAttribute('aria-hidden', 'false');
|
||||||
|
closeBtn.focus();
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
overlay.classList.remove('active');
|
||||||
|
overlay.setAttribute('aria-hidden', 'true');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
fab.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
fab.addEventListener('click', openModal);
|
||||||
|
closeBtn.addEventListener('click', closeModal);
|
||||||
|
|
||||||
|
overlay.addEventListener('click', function(e) {
|
||||||
|
if (e.target === overlay) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && overlay.classList.contains('active')) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user