client-sites/site-8f83e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI update: הוסף לפני תג הסגירה </body> קטע קוד (HTML+CSS+JS וניל, ללא ספריות חיצוניות) שיוצר כפתור פעולה צף (floating action button

Browse Source
This commit is contained in:
ccadmingit1
2026-08-20 17:52:48 +00:00
parent 19d81c0ca9
commit 86723775ab
1 changed files with 373 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+373 -62
View File
@@ -560,82 +560,393 @@
<span>052-855-5502</span>
</a>
<!-- Floating offer button -->
<button class="floating-offer-btn" id="openOfferBtn" aria-label="הצעה מיוחדת">
<svg viewBox="0 0 24 24" aria-hidden="true">
<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>
<!-- Want a site like this FAB + Modal -->
<button class="want-site-fab" id="wantSiteFab" aria-label="רוצים אתר כזה?">
<span class="want-site-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
</button>
<!-- Sales Popup -->
<div class="popup-overlay" id="popupOverlay" aria-hidden="true">
<div class="popup-modal" role="dialog" aria-labelledby="popupTitle" aria-modal="true">
<button class="popup-close" id="closePopupBtn" aria-label="סגור">
<div class="package-modal-overlay" id="packageModalOverlay" aria-hidden="true">
<div class="package-modal" role="dialog" aria-labelledby="packageModalTitle" aria-modal="true">
<button class="package-modal-close" id="packageModalClose" aria-label="סגור">
<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"/>
</svg>
</button>
<div class="popup-header">
<div class="popup-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<circle cx="30" cy="30" r="28" fill="var(--orange)"/>
<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"/>
</svg>
</div>
<h2 id="popupTitle">האתר שלך מוכן ומחכה לך</h2>
</div>
<h2 id="packageModalTitle" class="package-modal-title">בחרו את החבילה המתאימה לכם</h2>
<div class="popup-content">
<p class="popup-intro">בחרו את האפשרות המתאימה לכם:</p>
<div class="popup-options">
<a href="#" class="popup-option popup-option-basic">
<div class="option-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<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"/>
</svg>
<div class="package-cards">
<div class="package-card">
<div class="package-card-header">
<h3>קוד האתר בלבד</h3>
<div class="package-price">₪1,490</div>
</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>
<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>
<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 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 class="package-card package-card-featured">
<div class="package-badge">מומלץ</div>
<div class="package-card-header">
<h3>חבילה מלאה</h3>
<div class="package-price">₪2,390</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>
קוד האתר + אחסון לשנה
</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=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>
</div>
</div>
</div>
</div>
<div class="popup-extras">
<p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד. <a href="#contact" class="popup-link" id="popupContactLink">צרו קשר</a> ונתאים לכם הצעה.</p>
</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>
</body>