diff --git a/public/widget-loader.js b/public/widget-loader.js index d74bbd1..256eaa3 100644 --- a/public/widget-loader.js +++ b/public/widget-loader.js @@ -5,55 +5,87 @@ return t[t.length - 1]; })(); - var url = s.getAttribute('data-url') || ''; - var mode = s.getAttribute('data-mode') || 'floating'; // 'floating' | 'trigger' - var btn = s.getAttribute('data-btn') || 'Забронировать'; - var color = s.getAttribute('data-color') || '#4F46E5'; - var cls = s.getAttribute('data-class') || 'hotelsync-book'; + var rawUrl = s.getAttribute('data-url') || ''; + var mode = s.getAttribute('data-mode') || 'floating'; + var btn = s.getAttribute('data-btn') || 'Забронировать'; + var color = s.getAttribute('data-color') || '#4F46E5'; + var cls = s.getAttribute('data-class') || 'hotelsync-book'; + + // Append embed param so the page renders without its own wrapper + var url = rawUrl + (rawUrl.indexOf('?') >= 0 ? '&' : '?') + 'embed=true'; function init() { - /* ── Modal ── */ - var modal = document.createElement('div'); - modal.style.cssText = [ + /* ── Overlay ── */ + var overlay = document.createElement('div'); + overlay.style.cssText = [ 'display:none', 'position:fixed', 'inset:0', - 'background:rgba(0,0,0,.65)', 'z-index:99999', + 'background:rgba(0,0,0,.55)', + 'backdrop-filter:blur(4px)', + '-webkit-backdrop-filter:blur(4px)', + 'z-index:99998', 'align-items:center', 'justify-content:center', - 'padding:16px', 'box-sizing:border-box', + 'padding:20px', 'box-sizing:border-box', ].join(';'); - var inner = document.createElement('div'); - inner.style.cssText = [ - 'position:relative', 'width:100%', 'max-width:520px', - 'border-radius:20px', 'overflow:hidden', - 'box-shadow:0 24px 80px rgba(0,0,0,.45)', + /* ── Dialog box ── */ + var dialog = document.createElement('div'); + dialog.style.cssText = [ + 'position:relative', + 'width:100%', 'max-width:480px', + 'max-height:calc(100vh - 40px)', + 'border-radius:24px', + 'overflow:hidden', + 'box-shadow:0 32px 80px rgba(0,0,0,.4)', + 'background:#fff', + 'display:flex', 'flex-direction:column', ].join(';'); + /* ── Close button (outside iframe, top-right of dialog) ── */ var closeBtn = document.createElement('button'); - closeBtn.innerHTML = '×'; + closeBtn.innerHTML = '✕'; + closeBtn.title = 'Закрыть'; closeBtn.style.cssText = [ - 'position:absolute', 'top:10px', 'right:10px', 'z-index:1', - 'width:32px', 'height:32px', 'border-radius:50%', - 'background:rgba(0,0,0,.55)', 'color:#fff', - 'border:none', 'cursor:pointer', 'font-size:20px', - 'font-weight:700', 'line-height:1', + 'position:absolute', 'top:12px', 'right:12px', 'z-index:10', + 'width:34px', 'height:34px', 'border-radius:50%', + 'background:rgba(255,255,255,.9)', + 'backdrop-filter:blur(4px)', + 'color:#374151', + 'border:1px solid rgba(0,0,0,.1)', + 'cursor:pointer', + 'font-size:14px', 'font-weight:700', 'display:flex', 'align-items:center', 'justify-content:center', + 'box-shadow:0 2px 8px rgba(0,0,0,.15)', + 'transition:background .15s', ].join(';'); - closeBtn.onclick = function () { modal.style.display = 'none'; }; + closeBtn.onmouseenter = function () { closeBtn.style.background = '#fff'; }; + closeBtn.onmouseleave = function () { closeBtn.style.background = 'rgba(255,255,255,.9)'; }; + closeBtn.onclick = function () { overlay.style.display = 'none'; }; + /* ── Iframe ── */ var iframe = document.createElement('iframe'); iframe.src = url; iframe.setAttribute('allow', 'payment'); - iframe.style.cssText = 'width:100%;height:680px;border:none;display:block;'; + iframe.style.cssText = [ + 'width:100%', 'height:680px', + 'border:none', 'display:block', + 'flex:1', + ].join(';'); - inner.appendChild(closeBtn); - inner.appendChild(iframe); - modal.appendChild(inner); - modal.addEventListener('click', function (e) { - if (e.target === modal) modal.style.display = 'none'; + dialog.appendChild(closeBtn); + dialog.appendChild(iframe); + overlay.appendChild(dialog); + + overlay.addEventListener('click', function (e) { + if (e.target === overlay) overlay.style.display = 'none'; }); - document.body.appendChild(modal); - window.hsOpenWidget = function () { modal.style.display = 'flex'; }; + // Close on Escape + document.addEventListener('keydown', function (e) { + if (e.key === 'Escape') overlay.style.display = 'none'; + }); + + document.body.appendChild(overlay); + window.hsOpenWidget = function () { overlay.style.display = 'flex'; }; /* ── Floating button ── */ if (mode === 'floating') { @@ -62,20 +94,21 @@ fab.style.cssText = [ 'position:fixed', 'bottom:24px', 'right:24px', 'background:' + color, 'color:#fff', - 'border:none', 'padding:14px 26px', - 'border-radius:50px', 'font-size:15px', - 'font-family:inherit', 'font-weight:700', + 'border:none', 'padding:15px 28px', + 'border-radius:50px', + 'font-size:15px', 'font-family:inherit', 'font-weight:700', + 'letter-spacing:.01em', 'cursor:pointer', 'z-index:99997', - 'box-shadow:0 4px 20px rgba(0,0,0,.28)', + 'box-shadow:0 6px 24px rgba(0,0,0,.25)', 'transition:transform .15s,box-shadow .15s', ].join(';'); fab.onmouseenter = function () { - fab.style.transform = 'scale(1.06)'; - fab.style.boxShadow = '0 8px 28px rgba(0,0,0,.38)'; + fab.style.transform = 'translateY(-2px) scale(1.03)'; + fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.32)'; }; fab.onmouseleave = function () { - fab.style.transform = 'scale(1)'; - fab.style.boxShadow = '0 4px 20px rgba(0,0,0,.28)'; + fab.style.transform = 'none'; + fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.25)'; }; fab.onclick = function () { window.hsOpenWidget(); }; document.body.appendChild(fab); diff --git a/src/pages/BookingWidgetStandalonePage.tsx b/src/pages/BookingWidgetStandalonePage.tsx index ab6d212..e625ab7 100644 --- a/src/pages/BookingWidgetStandalonePage.tsx +++ b/src/pages/BookingWidgetStandalonePage.tsx @@ -75,6 +75,22 @@ export function BookingWidgetStandalonePage() { }, [slug]) const isFullWidth = searchParams.get('width') === 'full' + const isEmbed = searchParams.get('embed') === 'true' + + if (isEmbed) { + return ( +