diff --git a/index.html b/index.html new file mode 100644 index 0000000..fbc92d8 --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ + + + + + + עמוד תשלום | Emaillion + + + + + + + + + + + +
+
+ +
+ +
+
+
+
+ +
+

רכישת אתר

+

+
+ +
+
+
+

+
+
+
    +
    + +
    +
    + + טוען טופס תשלום... +
    + +
    + + +
    +
    + + +
    + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..1ad1e60 --- /dev/null +++ b/script.js @@ -0,0 +1,265 @@ +(function() { + 'use strict'; + + // Business configuration with SmartPay iframe URLs + var BUSINESSES = { + sarit: { + name: 'שרית הספרית', + lang: 'he', + plans: { + code: { + url: 'https://pay.smartpay.co.il/v1/iframe/af5cb955-8620-57fa-3b5a-61916e5f', + price: '₪1,490', + title: 'קוד האתר בלבד', + features: [ + 'קוד מקור מלא של האתר', + 'עיצוב מותאם אישית', + 'תמיכה טכנית בהעלאת האתר' + ] + }, + full: { + url: 'https://pay.smartpay.co.il/v1/iframe/5ca5e359-9fc8-504b-ce08-6181d906', + price: '₪2,390', + title: 'חבילה מלאה', + badge: 'החבילה המומלצת', + features: [ + 'קוד מקור מלא של האתר', + 'אחסון לשנה', + 'דומיין בהתאמה אישית', + 'תיבת מייל עסקית' + ] + } + } + }, + kobi: { + name: 'מספרת קובי שריקי', + lang: 'he', + plans: { + code: { + url: 'https://pay.smartpay.co.il/v1/iframe/0472462e-8673-5f88-5329-5c54164c', + price: '₪1,490', + title: 'קוד האתר בלבד', + features: [ + 'קוד מקור מלא של האתר', + 'עיצוב מותאם אישית', + 'תמיכה טכנית בהעלאת האתר' + ] + }, + full: { + url: 'https://pay.smartpay.co.il/v1/iframe/188c95d1-e760-5640-f05a-562be8fc', + price: '₪2,390', + title: 'חבילה מלאה', + badge: 'החבילה המומלצת', + features: [ + 'קוד מקור מלא של האתר', + 'אחסון לשנה', + 'דומיין בהתאמה אישית', + 'תיבת מייל עסקית' + ] + } + } + }, + orly: { + name: 'אורלי חן עיצוב שיער', + lang: 'he', + plans: { + code: { + url: 'https://pay.smartpay.co.il/v1/iframe/08825e84-c73d-5737-c77e-950be56e', + price: '₪1,490', + title: 'קוד האתר בלבד', + features: [ + 'קוד מקור מלא של האתר', + 'עיצוב מותאם אישית', + 'תמיכה טכנית בהעלאת האתר' + ] + }, + full: { + url: 'https://pay.smartpay.co.il/v1/iframe/56604ea6-6729-51f8-f421-9c3e88c1', + price: '₪2,390', + title: 'חבילה מלאה', + badge: 'החבילה המומלצת', + features: [ + 'קוד מקור מלא של האתר', + 'אחסון לשנה', + 'דומיין בהתאמה אישית', + 'תיבת מייל עסקית' + ] + } + } + }, + hairontop: { + name: 'Hair On Top', + lang: 'en', + plans: { + code: { + url: 'https://pay.smartpay.co.il/v1/iframe/eb9b2b7a-95f9-5e1c-917c-513bfd99', + price: '₪1,490', + title: 'קוד האתר בלבד', + features: [ + 'קוד מקור מלא של האתר', + 'עיצוב מותאם אישית', + 'תמיכה טכנית בהעלאת האתר' + ] + }, + full: { + url: 'https://pay.smartpay.co.il/v1/iframe/ec156279-f214-516e-fe3d-6d462a65', + price: '₪2,390', + title: 'חבילה מלאה', + badge: 'החבילה המומלצת', + features: [ + 'קוד מקור מלא של האתר', + 'אחסון לשנה', + 'דומיין בהתאמה אישית', + 'תיבת מייל עסקית' + ] + } + } + }, + itzik: { + name: 'איציק בכר - אינסטלטור', + lang: 'he', + plans: { + code: { + url: 'https://pay.smartpay.co.il/v1/iframe/08e71a36-b51a-592f-7b9e-d2ef0668', + price: '₪1,490', + title: 'קוד האתר בלבד', + features: [ + 'קוד מקור מלא של האתר', + 'עיצוב מותאם אישית', + 'תמיכה טכנית בהעלאת האתר' + ] + }, + full: { + url: 'https://pay.smartpay.co.il/v1/iframe/049867df-8717-5a0b-ca2c-5ae47d74', + price: '₪2,390', + title: 'חבילה מלאה', + badge: 'החבילה המומלצת', + features: [ + 'קוד מקור מלא של האתר', + 'אחסון לשנה', + 'דומיין בהתאמה אישית', + 'תיבת מייל עסקית' + ] + } + } + } + }; + + // DOM elements + var elements = { + businessTitle: document.getElementById('businessTitle'), + businessSubtitle: document.getElementById('businessSubtitle'), + planSection: document.getElementById('planSection'), + planBadge: document.getElementById('planBadge'), + planTitle: document.getElementById('planTitle'), + planPrice: document.getElementById('planPrice'), + planFeatures: document.getElementById('planFeatures'), + iframeContainer: document.getElementById('iframeContainer'), + iframeLoading: document.getElementById('iframeLoading'), + paymentFrame: document.getElementById('paymentFrame'), + errorState: document.getElementById('errorState') + }; + + // Parse URL parameters + function getUrlParams() { + var params = new URLSearchParams(window.location.search); + return { + biz: params.get('biz'), + plan: params.get('plan') + }; + } + + // Validate parameters + function validateParams(biz, plan) { + if (!biz || !plan) return false; + if (!BUSINESSES[biz]) return false; + if (!BUSINESSES[biz].plans[plan]) return false; + return true; + } + + // Show error state + function showError() { + elements.planSection.style.display = 'none'; + elements.iframeContainer.style.display = 'none'; + elements.errorState.style.display = 'block'; + elements.businessTitle.textContent = 'שגיאה'; + elements.businessSubtitle.textContent = ''; + + document.title = 'שגיאה | Emaillion'; + } + + // Escape HTML to prevent XSS + function escapeHtml(text) { + var div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + // Render checkout page + function renderCheckout(bizKey, planKey) { + var business = BUSINESSES[bizKey]; + var plan = business.plans[planKey]; + + // Update header + elements.businessTitle.textContent = 'רכישת אתר עבור:'; + + // Handle business name with proper lang attribute + if (business.lang === 'en') { + elements.businessSubtitle.innerHTML = '' + escapeHtml(business.name) + ''; + } else { + elements.businessSubtitle.textContent = business.name; + } + + // Update plan section - only show badge for full plans + if (plan.badge) { + elements.planBadge.textContent = plan.badge; + } else { + elements.planBadge.textContent = ''; + } + + elements.planTitle.textContent = plan.title; + elements.planPrice.textContent = plan.price; + + // Render features + elements.planFeatures.innerHTML = plan.features + .map(function(feature) { return '
  • ' + escapeHtml(feature) + '
    • '; }) + .join(''); + + // Load iframe + elements.paymentFrame.src = plan.url; + + // Hide loading when iframe loads + function handleLoad() { + elements.iframeLoading.classList.add('hidden'); + elements.paymentFrame.removeEventListener('load', handleLoad); + } + elements.paymentFrame.addEventListener('load', handleLoad); + + // Fallback: hide loading after timeout + setTimeout(function() { + elements.iframeLoading.classList.add('hidden'); + }, 5000); + + // Update page title + document.title = 'רכישת אתר - ' + business.name + ' | Emaillion'; + } + + // Initialize + function init() { + var params = getUrlParams(); + + if (!validateParams(params.biz, params.plan)) { + showError(); + return; + } + + renderCheckout(params.biz, params.plan); + } + + // Run on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0e97870 --- /dev/null +++ b/style.css @@ -0,0 +1,468 @@ +:root { + --color-primary: #5B4CE0; + --color-primary-dark: #4A3BC9; + --color-secondary: #7C3AED; + --color-accent: #A78BFA; + --color-bg: #FAFBFC; + --color-surface: #FFFFFF; + --color-text: #1A1A2E; + --color-text-muted: #4A5568; + --color-text-subtle: #6B7280; + --color-border: #E5E7EB; + --color-success: #10B981; + --color-error: #EF4444; + + --font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif; + + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4rem; + + --radius-sm: 0.375rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --radius-xl: 1.5rem; + + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 350ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 16px; + -webkit-text-size-adjust: 100%; +} + +body { + font-family: var(--font-family); + font-weight: 400; + line-height: 1.6; + color: var(--color-text); + background: var(--color-bg); + min-height: 100vh; + min-height: 100dvh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.page-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + min-height: 100dvh; +} + +/* Header */ +.header { + padding: var(--space-lg) var(--space-xl); + background: var(--color-surface); + border-block-end: 1px solid var(--color-border); + position: sticky; + top: 0; + z-index: 100; +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-sm); + justify-content: center; +} + +.logo-icon { + width: 36px; + height: 36px; +} + +.logo-text { + font-size: 1.375rem; + font-weight: 600; + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Main */ +.main { + flex: 1; + display: flex; + align-items: flex-start; + justify-content: center; + padding: var(--space-xl); + padding-block-start: var(--space-2xl); +} + +.checkout-card { + width: 100%; + max-width: 600px; + background: var(--color-surface); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + overflow: hidden; + animation: cardSlideIn 0.4s ease-out; +} + +@keyframes cardSlideIn { + from { + opacity: 0; + transform: translateY(16px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (prefers-reduced-motion: reduce) { + .checkout-card { + animation: none; + } + + .spinner { + animation: none; + opacity: 0; + } + + .iframe-loading .loading-text { + display: block; + } +} + +.card-header { + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + padding: var(--space-xl); + text-align: center; + color: white; +} + +.business-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + margin-block-end: var(--space-md); + backdrop-filter: blur(10px); +} + +.badge-icon { + width: 28px; + height: 28px; +} + +.business-title { + font-size: 1.125rem; + font-weight: 400; + margin-block-end: var(--space-xs); +} + +.business-subtitle { + font-size: 1.5rem; + font-weight: 600; +} + +/* Plan Section */ +.plan-section { + padding: var(--space-xl); + border-block-end: 1px solid var(--color-border); +} + +.plan-badge { + display: inline-block; + padding: var(--space-xs) var(--space-md); + background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 999px; + margin-block-end: var(--space-md); +} + +.plan-badge:empty { + display: none; +} + +.plan-details { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--space-md); + margin-block-end: var(--space-lg); +} + +.plan-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text); +} + +.plan-price { + font-size: 1.75rem; + font-weight: 600; + color: var(--color-primary); + unicode-bidi: isolate; +} + +.plan-features { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.plan-features li { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 0.9375rem; + line-height: 1.5; + color: var(--color-text-muted); +} + +.plan-features li::before { + content: ''; + display: inline-block; + width: 20px; + height: 20px; + background: var(--color-success); + border-radius: 50%; + flex-shrink: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E"); + background-size: 12px; + background-position: center; + background-repeat: no-repeat; +} + +/* Iframe Container */ +.iframe-container { + position: relative; + min-height: 700px; + background: var(--color-bg); +} + +.iframe-loading { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-md); + color: var(--color-text-muted); + font-size: 0.9375rem; + background: var(--color-bg); + z-index: 1; + transition: opacity var(--transition-base); +} + +.iframe-loading.hidden { + opacity: 0; + pointer-events: none; +} + +.spinner { + width: 40px; + height: 40px; + border: 3px solid var(--color-border); + border-block-start-color: var(--color-primary); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +#paymentFrame { + width: 100%; + min-height: 700px; + border: none; + display: block; +} + +/* Error State */ +.error-state { + padding: var(--space-3xl) var(--space-xl); + text-align: center; +} + +.error-icon { + width: 64px; + height: 64px; + color: var(--color-error); + margin-block-end: var(--space-lg); +} + +.error-title { + font-size: 1.5rem; + font-weight: 600; + color: var(--color-text); + margin-block-end: var(--space-sm); +} + +.error-message { + font-size: 1rem; + color: var(--color-text-muted); + max-width: 320px; + margin-inline: auto; + line-height: 1.6; +} + +/* Footer */ +.footer { + padding: var(--space-lg) var(--space-xl); + background: var(--color-surface); + border-block-start: 1px solid var(--color-border); + text-align: center; +} + +.security-badge { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-lg); + background: var(--color-bg); + border-radius: var(--radius-md); + font-size: 0.875rem; + color: var(--color-text-muted); + margin-block-end: var(--space-md); +} + +.lock-icon { + width: 16px; + height: 16px; + color: var(--color-success); +} + +.footer-brand { + font-size: 0.8125rem; + color: var(--color-text-subtle); +} + +/* Responsive */ +@media (max-width: 640px) { + .main { + padding: var(--space-md); + padding-block-start: var(--space-lg); + } + + .checkout-card { + border-radius: var(--radius-lg); + } + + .card-header { + padding: var(--space-lg); + } + + .business-badge { + width: 48px; + height: 48px; + } + + .badge-icon { + width: 24px; + height: 24px; + } + + .business-title { + font-size: 1rem; + } + + .business-subtitle { + font-size: 1.25rem; + } + + .plan-section { + padding: var(--space-lg); + } + + .plan-details { + flex-direction: column; + align-items: flex-start; + gap: var(--space-sm); + } + + .plan-title { + font-size: 1.125rem; + } + + .plan-price { + font-size: 1.5rem; + } + + .iframe-container { + min-height: 700px; + } + + #paymentFrame { + min-height: 700px; + } + + .footer { + padding: var(--space-md); + } + + .security-badge { + font-size: 0.8125rem; + padding: var(--space-xs) var(--space-md); + } +} + +@media (max-width: 360px) { + html { + font-size: 14px; + } + + .header { + padding: var(--space-md); + } + + .logo-icon { + width: 32px; + height: 32px; + } + + .logo-text { + font-size: 1.25rem; + } +} + +/* Focus styles for accessibility */ +*:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Hide content visually but keep accessible */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} \ No newline at end of file