AI update: הוסף לפני תג הסגירה </body> קטע קוד (HTML+CSS+JS וניל, ללא ספריות חיצוניות) שיוצר כפתור פעולה צף (floating action button
This commit is contained in:
+469
-61
@@ -361,82 +361,490 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Floating CTA Button -->
|
||||
<button class="floating-cta" id="floating-cta" aria-label="פתיחת חלון רכישה">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||
<path d="M2 17l10 5 10-5"/>
|
||||
<path d="M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
<span>האתר שלך מוכן!</span>
|
||||
<!-- Pricing FAB and Modal -->
|
||||
<button class="pricing-fab" id="pricing-fab" aria-label="פתיחת חלון בחירת חבילה">
|
||||
<span class="pricing-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
|
||||
</button>
|
||||
|
||||
<!-- Sales Popup -->
|
||||
<div class="popup-overlay" id="popup-overlay" aria-hidden="true">
|
||||
<div class="popup" role="dialog" aria-modal="true" aria-labelledby="popup-title">
|
||||
<button class="popup-close" id="popup-close" aria-label="סגירת חלון">
|
||||
<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="popup-content">
|
||||
<div class="popup-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="24" cy="24" r="20"/>
|
||||
<path d="M16 24l5 5 11-11"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 id="popup-title" class="popup-title">האתר שלך מוכן ומחכה לך</h2>
|
||||
<div class="pricing-modal-content">
|
||||
<h2 id="pricing-modal-title" class="pricing-modal-title">בחרו את החבילה המתאימה לכם</h2>
|
||||
|
||||
<div class="popup-options">
|
||||
<a href="#" class="popup-option popup-option-code">
|
||||
<div class="popup-option-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M16 18l6-6-6-6"/>
|
||||
<path d="M8 6l-6 6 6 6"/>
|
||||
<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>
|
||||
<div class="popup-option-content">
|
||||
<h3>הורדת קוד המקור</h3>
|
||||
<p>קבלת כל קבצי האתר לשימושך</p>
|
||||
</div>
|
||||
<svg class="popup-option-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="popup-option popup-option-full">
|
||||
<div class="popup-option-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||
<path d="M8 21h8M12 17v4"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="popup-option-content">
|
||||
<h3>אחסון מלא + קוד</h3>
|
||||
<p>כולל דומיין, אחסון וניהול שוטף</p>
|
||||
</div>
|
||||
<svg class="popup-option-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="popup-warning">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
<p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
|
||||
</div>
|
||||
|
||||
<div class="popup-extras">
|
||||
<p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד — <a href="tel:0504001413">צרו קשר</a> ונתאים לכם הצעה.</p>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -116,97 +116,4 @@
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// Sales Popup
|
||||
const popupOverlay = document.getElementById('popup-overlay');
|
||||
const popupClose = document.getElementById('popup-close');
|
||||
const floatingCta = document.getElementById('floating-cta');
|
||||
const popup = popupOverlay ? popupOverlay.querySelector('.popup') : null;
|
||||
|
||||
function openPopup() {
|
||||
if (!popupOverlay) return;
|
||||
popupOverlay.classList.add('is-visible');
|
||||
popupOverlay.setAttribute('aria-hidden', 'false');
|
||||
document.body.classList.add('popup-open');
|
||||
// Focus the close button for accessibility
|
||||
if (popupClose) {
|
||||
setTimeout(function() {
|
||||
popupClose.focus();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
if (!popupOverlay) return;
|
||||
popupOverlay.classList.remove('is-visible');
|
||||
popupOverlay.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('popup-open');
|
||||
}
|
||||
|
||||
// Auto-open popup after 5 seconds
|
||||
let popupShown = false;
|
||||
setTimeout(function() {
|
||||
if (!popupShown) {
|
||||
popupShown = true;
|
||||
openPopup();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// Floating CTA click
|
||||
if (floatingCta) {
|
||||
floatingCta.addEventListener('click', function() {
|
||||
openPopup();
|
||||
});
|
||||
}
|
||||
|
||||
// Close button click
|
||||
if (popupClose) {
|
||||
popupClose.addEventListener('click', function() {
|
||||
closePopup();
|
||||
});
|
||||
}
|
||||
|
||||
// Click outside popup to close
|
||||
if (popupOverlay) {
|
||||
popupOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === popupOverlay) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Escape key to close popup
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && popupOverlay && popupOverlay.classList.contains('is-visible')) {
|
||||
closePopup();
|
||||
if (floatingCta) {
|
||||
floatingCta.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Trap focus inside popup when open
|
||||
if (popup) {
|
||||
popup.addEventListener('keydown', function(e) {
|
||||
if (e.key !== 'Tab') return;
|
||||
|
||||
const focusableElements = popup.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
const firstElement = focusableElements[0];
|
||||
const 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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -1062,276 +1062,6 @@ button {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Floating CTA Button */
|
||||
.floating-cta {
|
||||
position: fixed;
|
||||
bottom: var(--space-lg);
|
||||
inset-inline-end: var(--space-md);
|
||||
z-index: 80;
|
||||
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-radius: var(--radius-full);
|
||||
box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-cta:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 30px rgba(139, 105, 20, 0.5);
|
||||
}
|
||||
|
||||
.floating-cta:focus-visible {
|
||||
outline: 3px solid var(--color-warm);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.floating-cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 150;
|
||||
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 var(--transition-fast), visibility var(--transition-fast);
|
||||
}
|
||||
|
||||
.popup-overlay.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
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 var(--transition-medium);
|
||||
}
|
||||
|
||||
.popup-overlay.is-visible .popup {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.popup-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-radius: 50%;
|
||||
color: var(--color-text-light);
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.popup-close:hover {
|
||||
background: var(--color-cream);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.popup-close:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.popup-close svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.popup-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto var(--space-md);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.popup-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-block-end: var(--space-lg);
|
||||
}
|
||||
|
||||
.popup-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
margin-block-end: var(--space-lg);
|
||||
}
|
||||
|
||||
.popup-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-md);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.popup-option:hover {
|
||||
border-color: var(--color-warm);
|
||||
background: var(--color-cream);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.popup-option:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.popup-option-code:hover {
|
||||
border-color: var(--color-sage);
|
||||
}
|
||||
|
||||
.popup-option-full:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.popup-option-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-option-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.popup-option-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.popup-option-content h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-block-end: 2px;
|
||||
}
|
||||
|
||||
.popup-option-content p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.popup-option-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-warm);
|
||||
flex-shrink: 0;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.popup-option:hover .popup-option-arrow {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.popup-warning {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md);
|
||||
background: rgba(197, 48, 48, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: 4px solid var(--color-danger);
|
||||
margin-block-end: var(--space-md);
|
||||
}
|
||||
|
||||
.popup-warning svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--color-danger);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-warning p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popup-warning strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popup-extras {
|
||||
text-align: center;
|
||||
padding: var(--space-md);
|
||||
background: var(--color-cream);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.popup-extras p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.popup-extras a {
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.popup-extras a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Reveal Animation */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
|
||||
Reference in New Issue
Block a user