160 lines
12 KiB
JavaScript
160 lines
12 KiB
JavaScript
/* eazy mobile chrome: hamburger + fullscreen menu + bottom action bar (mobile only) */
|
|
(function () {
|
|
if (customElements.get('ez-mobile-chrome')) return;
|
|
const HOME = 'index.html';
|
|
const LINKS = [
|
|
['אמירנט', 'amirnet.html'],
|
|
['הקורסים', 'compare.html'],
|
|
['מתחילים בחינם', 'free.html'],
|
|
['ללמוד אנגלית', 'learn.html'],
|
|
['מחשבון פטור מאנגלית', 'technion.html'],
|
|
['עלינו', 'about.html'],
|
|
];
|
|
class EzMobileChrome extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<style>
|
|
ez-mobile-chrome .ezc { display: none; }
|
|
@media (max-width: 820px) {
|
|
ez-mobile-chrome .ezc { display: block; font-family: var(--font-body); }
|
|
ez-mobile-chrome .ezc-burger { position: fixed; top: 14px; left: 14px; z-index: 90; width: 42px; height: 42px; border: none; border-radius: 0; background: transparent; color: var(--ez-ink); font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
|
|
ez-mobile-chrome .ezc-bar { position: fixed; bottom: 0; right: 0; left: 0; z-index: 80; background: #fff; border-top: 1px solid var(--ez-line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
|
|
ez-mobile-chrome .ezc-bar a { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; padding: 13px 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; border-bottom: none; min-height: 48px; box-sizing: border-box; }
|
|
ez-mobile-chrome .ezc-menu { position: fixed; inset: 0; z-index: 100; background: #fff; display: none; flex-direction: column; padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
|
|
ez-mobile-chrome .ezc-menu.open { display: flex; }
|
|
ez-mobile-chrome .ezc-menu a.ezc-nav { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ez-ink); padding: 16px 0; border-bottom: 1px solid var(--ez-line); }
|
|
ez-mobile-chrome .ezc-menu a.ezc-nav.active { color: var(--ez-orange); }
|
|
}
|
|
</style>
|
|
<div class="ezc">
|
|
<button class="ezc-burger" aria-label="תפריט"><i class="ph ph-list"></i></button>
|
|
<div class="ezc-menu" dir="rtl">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
|
|
<a href="${HOME}" style="border-bottom:none"><img src="assets/logo-mark-orange.png" alt="eazy" style="width:44px;height:44px"></a>
|
|
<button class="ezc-close" aria-label="סגירה" style="width:42px;height:42px;border:1px solid var(--ez-line);border-radius:10px;background:#fff;font-size:20px;cursor:pointer"><i class="ph ph-x"></i></button>
|
|
</div>
|
|
${LINKS.map(([t, h]) => `<a class="ezc-nav${decodeURIComponent(location.pathname).endsWith('/' + h) ? ' active' : ''}" href="${h}">${t}</a>`).join('')}
|
|
<div style="margin-top:auto;display:grid;gap:10px;padding-bottom:10px">
|
|
<a href="contact.html" style="background:var(--ez-orange);color:#fff;border-radius:999px;padding:14px 0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:16px;border-bottom:none">שיחת ייעוץ חינם</a>
|
|
<span dir="ltr" style="text-align:center;font-family:var(--font-mono);font-size:14px;color:var(--ez-fg-2)">1-700-70-70-07</span>
|
|
</div>
|
|
</div>
|
|
<div class="ezc-bar" dir="rtl">
|
|
<a href="contact.html" style="background:var(--ez-orange)"><i class="ph ph-phone" style="font-size:17px"></i>שיחת ייעוץ</a>
|
|
<a href="contact.html" style="background:#25D366"><i class="ph ph-whatsapp-logo" style="font-size:19px"></i>וואטסאפ</a>
|
|
</div>
|
|
</div>`;
|
|
const menu = this.querySelector('.ezc-menu');
|
|
const setOpen = open => { menu.classList.toggle('open', open); document.body.style.overflow = open ? 'hidden' : ''; };
|
|
this.querySelector('.ezc-burger').addEventListener('click', () => setOpen(true));
|
|
this.querySelector('.ezc-close').addEventListener('click', () => setOpen(false));
|
|
menu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => setOpen(false)));
|
|
}
|
|
}
|
|
customElements.define('ez-mobile-chrome', EzMobileChrome);
|
|
|
|
/* Runtime mobile fixes: applied directly to inline styles so they work
|
|
regardless of how the runtime serializes the style attribute. */
|
|
function applyMobileFixes() {
|
|
if (window.innerWidth > 820) return;
|
|
document.body.style.fontSize = '20px';
|
|
document.querySelectorAll('[style]').forEach(el => {
|
|
const s = el.style;
|
|
// floating whatsapp button: bottom bar replaces it
|
|
if (s.position === 'fixed' && el.tagName === 'A' && el.getAttribute('aria-label') === 'וואטסאפ') { s.display = 'none'; return; }
|
|
// font floor (breadcrumbs stay compact)
|
|
const fs = parseFloat(s.fontSize);
|
|
if (s.display === 'flex' && s.gap === '8px' && fs === 13.5) { s.fontSize = '15px'; el.dataset.ezKeep = '1'; return; }
|
|
if (fs && fs < 20 && el.tagName !== 'I' && !el.dataset.ezKeep) {
|
|
if (el.closest('footer')) { if (fs < 16) s.fontSize = '16px'; }
|
|
else if (el.closest('label')) { s.fontSize = '16px'; }
|
|
else { s.fontSize = '20px'; if (!s.lineHeight || parseFloat(s.lineHeight) < 1.5) s.lineHeight = '1.55'; }
|
|
}
|
|
// grid collapse
|
|
const g = s.gridTemplateColumns;
|
|
if (g && !g.startsWith('14px')) {
|
|
if (el.closest('footer')) s.gridTemplateColumns = '1fr 1fr';
|
|
else if (g.includes('repeat(10')) s.gridTemplateColumns = 'repeat(5, 1fr)';
|
|
else if (g.includes('repeat(4')) s.gridTemplateColumns = 'repeat(2, 1fr)';
|
|
else if (g.trim().split(/\s+/).length > 1 || g.includes('repeat(')) s.gridTemplateColumns = '1fr';
|
|
}
|
|
// breathing room between stacked grid children
|
|
if (g && s.gap && parseFloat(s.gap) < 16) s.gap = '18px';
|
|
// hero cut-out photos + decorations
|
|
if (el.tagName === 'IMG') {
|
|
if ((el.getAttribute('src') || '').includes('dot-cluster')) { s.display = 'none'; return; }
|
|
const ih = parseFloat(s.height);
|
|
if (ih && ih >= 300) { s.height = 'auto'; s.width = '64vw'; s.position = 'static'; s.margin = '0 auto'; }
|
|
}
|
|
if (parseFloat(s.minHeight) >= 300) s.minHeight = '0';
|
|
// primary pill CTAs go full-width for a comfortable thumb target
|
|
if ((el.tagName === 'A' || el.tagName === 'BUTTON') && s.borderRadius === '999px' && parseFloat(s.fontSize) >= 14 && !el.closest('ez-mobile-chrome') && !el.closest('header') && !el.closest('#ez-exit-popup')) {
|
|
s.display = 'block'; s.width = '100%'; s.textAlign = 'center'; s.boxSizing = 'border-box';
|
|
}
|
|
// section gutters
|
|
if (/^(SECTION|FOOTER|ARTICLE|HEADER)$/.test(el.tagName)) {
|
|
if (parseFloat(s.paddingLeft) > 24 || parseFloat(s.paddingRight) > 24 || (s.padding || '').includes('64px')) { s.paddingLeft = '20px'; s.paddingRight = '20px'; }
|
|
}
|
|
});
|
|
}
|
|
let raf = 0;
|
|
const schedule = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(applyMobileFixes); };
|
|
window.addEventListener('resize', schedule);
|
|
if (document.readyState !== 'loading') schedule(); else document.addEventListener('DOMContentLoaded', schedule);
|
|
new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true });
|
|
// hydration can rewrite inline styles after the last DOM mutation settles — re-apply on a short schedule
|
|
[400, 1200, 2500, 5000].forEach(t => setTimeout(schedule, t));
|
|
|
|
/* Exit-intent popup: offered once per session, unless a lead was already sent */
|
|
function initExitPopup() {
|
|
if (document.getElementById('ez-exit-popup')) return;
|
|
const wrap = document.createElement('div');
|
|
wrap.id = 'ez-exit-popup';
|
|
wrap.setAttribute('dir', 'rtl');
|
|
wrap.style.cssText = 'display:none;position:fixed;inset:0;z-index:300;background:rgba(26,26,32,.55);align-items:center;justify-content:center;padding:24px';
|
|
wrap.innerHTML = `
|
|
<div style="background:#fff;border-radius:14px;max-width:460px;width:100%;padding:32px 32px 28px;position:relative;text-align:center;font-family:var(--font-body);box-shadow:var(--shadow-3)">
|
|
<button id="ez-exit-close" aria-label="סגירה" style="position:absolute;top:12px;left:12px;width:36px;height:36px;border:1px solid var(--ez-line);border-radius:10px;background:#fff;cursor:pointer;font-size:16px;color:var(--ez-ink)"><i class="ph ph-x"></i></button>
|
|
<img src="assets/logo-mark-orange.png" alt="eazy" style="width:44px;height:44px;margin:0 auto 10px;display:block">
|
|
<div style="font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.25;color:var(--ez-ink)">רגע לפני שיוצאים –<br>רוצים גישה חינמית למשחק חווייתי ללימוד אנגלית?</div>
|
|
<p style="font-size:15.5px;line-height:1.55;color:var(--ez-fg-2);margin:10px 0 18px">כולל לימוד מהשגיאות שלכם. רשמו מספר סלולרי – ותקבלו בוואטסאפ גישה למשחק ללא הגבלה.</p>
|
|
<div style="display:grid;gap:10px">
|
|
<input id="ez-exit-phone" type="tel" placeholder="מספר סלולרי" style="height:46px;border:1px solid var(--ez-line);border-radius:8px;padding:0 14px;font-family:var(--font-body);font-size:15.5px;text-align:right">
|
|
<button id="ez-exit-send" style="background:#25D366;color:#fff;border:0;border-radius:999px;padding:13px 0;font-family:var(--font-display);font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px"><i class="ph ph-whatsapp-logo" style="font-size:19px"></i>שלחו לי גישה בוואטסאפ</button>
|
|
</div>
|
|
<p style="display:flex;gap:8px;align-items:flex-start;text-align:right;font-size:12px;line-height:1.5;color:var(--ez-fg-3);margin:12px 0 0"><span style="flex:none;width:16px;height:16px;border-radius:4px;background:var(--ez-orange);display:flex;align-items:center;justify-content:center;margin-top:1px"><i class="ph-bold ph-check" style="font-size:10px;color:#fff"></i></span><span>אני מאשר/ת פנייה חוזרת ושמירת הפרטים לצורך כך בלבד, בהתאם למדיניות הפרטיות.</span></p>
|
|
</div>`;
|
|
document.body.appendChild(wrap);
|
|
const done = () => { wrap.style.display = 'none'; };
|
|
wrap.addEventListener('click', e => { if (e.target === wrap) done(); });
|
|
wrap.querySelector('#ez-exit-close').addEventListener('click', done);
|
|
wrap.querySelector('#ez-exit-send').addEventListener('click', () => {
|
|
sessionStorage.setItem('ez-lead-sent', '1');
|
|
const box = wrap.querySelector('div');
|
|
box.innerHTML = '<div style="font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ez-ink);padding:20px 0">מעולה! בדקו את הוואטסאפ (:</div>';
|
|
setTimeout(done, 1800);
|
|
});
|
|
// any lead-form submit on the page cancels the popup for the session
|
|
document.addEventListener('click', e => {
|
|
const b = e.target.closest && e.target.closest('button');
|
|
if (b && /דברו איתי/.test(b.textContent)) sessionStorage.setItem('ez-lead-sent', '1');
|
|
}, true);
|
|
const shouldShow = () => !sessionStorage.getItem('ez-exit-popup-shown') && !sessionStorage.getItem('ez-lead-sent');
|
|
const show = () => {
|
|
if (!shouldShow()) return;
|
|
sessionStorage.setItem('ez-exit-popup-shown', '1');
|
|
wrap.style.display = 'flex';
|
|
};
|
|
// desktop: cursor leaves through the top of the window
|
|
document.addEventListener('mouseout', e => { if (!e.relatedTarget && e.clientY <= 0) show(); });
|
|
// mobile: fast scroll back to the top after real engagement
|
|
let maxY = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const y = window.scrollY;
|
|
maxY = Math.max(maxY, y);
|
|
if (window.innerWidth <= 820 && maxY > 900 && y < 80 && maxY - y > 800) show();
|
|
}, { passive: true });
|
|
}
|
|
if (document.readyState !== 'loading') initExitPopup(); else document.addEventListener('DOMContentLoaded', initExitPopup);
|
|
})();
|