From d7c16bf4dcf53861857effa2fdc51f5c70449307 Mon Sep 17 00:00:00 2001
From: ccadmingit1 <yossi.em@gmail.com>
Date: Thu, 20 Aug 2026 22:15:50 +0000
Subject: [PATCH] =?UTF-8?q?AI=20update:=20=D7=AA=D7=99=D7=A7=D7=95=D7=9F?=
 =?UTF-8?q?=20=D7=A4=D7=95=D7=A4-=D7=90=D7=A4=20=D7=AA=D7=A9=D7=9C=D7=95?=
 =?UTF-8?q?=D7=9D=20=E2=80=94=20Hair=20On=20Top.=20=D7=97=D7=A4=D7=A9=20?=
 =?UTF-8?q?=D7=91=D7=9B=D7=9C=20=D7=A7=D7=91=D7=A6=D7=99=20=D7=94=D7=A2?=
 =?UTF-8?q?=D7=9E=D7=95=D7=93=20(HTML/JS)=20=D7=9B=D7=9C=20=D7=A7=D7=95?=
 =?UTF-8?q?=D7=93=20=D7=AA=D7=A9=D7=9C=D7=95=D7=9D=20=D7=A7=D7=99=D7=99?=
 =?UTF-8?q?=D7=9D:=20iframe=20=D7=9C=D7=9B=D7=AA=D7=95=D7=91=D7=AA=20Smart?=
 =?UTF-8?q?Pay/pay.smartpay.co?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 325 +----------------------------------------------------
 script.js  |  22 +++-
 2 files changed, 20 insertions(+), 327 deletions(-)

diff --git a/index.html b/index.html
index 87fc802..9cb1ac6 100644
--- a/index.html
+++ b/index.html
@@ -321,7 +321,7 @@
             <h3 class="popup-option-title">הורדת קוד בלבד</h3>
             <p class="popup-option-desc">קבלו את כל קבצי האתר ותעלו אותם לשרת שלכם</p>
           </div>
-          <button class="popup-option-btn popup-option-btn-secondary">הורדה</button>
+          <button class="popup-option-btn popup-option-btn-secondary" data-plan="code">הורדה</button>
         </div>
         <div class="popup-option popup-option-featured">
           <div class="popup-option-badge">מומלץ</div>
@@ -336,7 +336,7 @@
             <h3 class="popup-option-title">חבילה מלאה</h3>
             <p class="popup-option-desc">אחסון + דומיין + תמיכה — האתר עולה לאוויר מיד</p>
           </div>
-          <button class="popup-option-btn popup-option-btn-primary">לפרטים</button>
+          <button class="popup-option-btn popup-option-btn-primary" data-plan="full">לפרטים</button>
         </div>
       </div>
       <div class="popup-warning">
@@ -353,7 +353,7 @@
     </div>
   </div>
 
-  <!-- Floating Action Button & Pricing Modal -->
+  <!-- Floating Action Button -->
   <style>
     .fab-container {
       position: fixed;
@@ -402,216 +402,6 @@
       50% { box-shadow: 0 8px 40px rgba(212, 175, 55, 0.6), 0 4px 16px rgba(0,0,0,0.4); }
     }
 
-    .pricing-modal-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.88);
-      backdrop-filter: blur(10px);
-      z-index: 9500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .pricing-modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .pricing-modal {
-      position: relative;
-      width: 100%;
-      max-width: 720px;
-      background: linear-gradient(180deg, #222222, #0a0a0a);
-      border: 1px solid #B8960C;
-      border-radius: 20px;
-      padding: 40px 32px 32px;
-      transform: scale(0.92) translateY(20px);
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      max-height: 90vh;
-      overflow-y: auto;
-    }
-
-    .pricing-modal-overlay.active .pricing-modal {
-      transform: scale(1) translateY(0);
-    }
-
-    .pricing-modal-close {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      width: 40px;
-      height: 40px;
-      background: #141414;
-      border: 1px solid #222222;
-      border-radius: 50%;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #d0d0d0;
-      transition: all 0.3s ease;
-    }
-
-    .pricing-modal-close:hover,
-    .pricing-modal-close:focus {
-      background: #D4AF37;
-      color: #0a0a0a;
-      border-color: #D4AF37;
-    }
-
-    .pricing-modal-close svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .pricing-modal-header {
-      text-align: center;
-      margin-bottom: 32px;
-    }
-
-    .pricing-modal-title {
-      font-family: 'Secular One', sans-serif;
-      font-size: clamp(1.5rem, 4vw, 2rem);
-      font-weight: 400;
-      color: #fafafa;
-      margin: 0 0 8px;
-    }
-
-    .pricing-modal-subtitle {
-      color: #888888;
-      font-size: 1rem;
-    }
-
-    .pricing-cards {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 20px;
-    }
-
-    .pricing-card {
-      position: relative;
-      background: #0a0a0a;
-      border: 1px solid #222222;
-      border-radius: 16px;
-      padding: 28px 24px;
-      transition: all 0.3s ease;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .pricing-card:hover {
-      border-color: #B8960C;
-      transform: translateY(-4px);
-    }
-
-    .pricing-card-featured {
-      border-color: #D4AF37;
-      background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent);
-    }
-
-    .pricing-card-badge {
-      position: absolute;
-      top: -10px;
-      right: 20px;
-      padding: 4px 14px;
-      background: linear-gradient(135deg, #D4AF37, #B8960C);
-      color: #0a0a0a;
-      font-size: 0.75rem;
-      font-weight: 600;
-      border-radius: 20px;
-    }
-
-    .pricing-card-name {
-      font-size: 1.125rem;
-      font-weight: 500;
-      color: #fafafa;
-      margin: 0 0 8px;
-    }
-
-    .pricing-card-price {
-      font-family: 'Secular One', sans-serif;
-      font-size: 2.25rem;
-      font-weight: 400;
-      color: #D4AF37;
-      margin: 0 0 20px;
-      line-height: 1;
-    }
-
-    .pricing-card-price span {
-      font-family: 'Heebo', sans-serif;
-      font-size: 1rem;
-      color: #888888;
-    }
-
-    .pricing-card-features {
-      list-style: none;
-      padding: 0;
-      margin: 0 0 24px;
-      flex-grow: 1;
-    }
-
-    .pricing-card-features li {
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-      padding: 8px 0;
-      color: #d0d0d0;
-      font-size: 0.9375rem;
-      line-height: 1.4;
-    }
-
-    .pricing-card-features li svg {
-      width: 18px;
-      height: 18px;
-      color: #D4AF37;
-      flex-shrink: 0;
-      margin-top: 2px;
-    }
-
-    .pricing-card-btn {
-      display: block;
-      width: 100%;
-      padding: 14px 20px;
-      text-align: center;
-      font-family: inherit;
-      font-size: 1rem;
-      font-weight: 500;
-      border-radius: 8px;
-      text-decoration: none;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: none;
-    }
-
-    .pricing-card-btn-secondary {
-      background: transparent;
-      color: #fafafa;
-      border: 1px solid #d0d0d0;
-    }
-
-    .pricing-card-btn-secondary:hover,
-    .pricing-card-btn-secondary:focus {
-      border-color: #D4AF37;
-      color: #D4AF37;
-    }
-
-    .pricing-card-btn-primary {
-      background: linear-gradient(135deg, #D4AF37, #B8960C);
-      color: #0a0a0a;
-    }
-
-    .pricing-card-btn-primary:hover,
-    .pricing-card-btn-primary:focus {
-      background: linear-gradient(135deg, #E5C76B, #D4AF37);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
-    }
-
     @media (max-width: 600px) {
       .fab-container {
         bottom: 16px;
@@ -625,23 +415,6 @@
         padding: 14px 20px;
         font-size: 0.875rem;
       }
-
-      .pricing-modal {
-        padding: 32px 20px 24px;
-      }
-
-      .pricing-cards {
-        grid-template-columns: 1fr;
-        gap: 16px;
-      }
-
-      .pricing-card {
-        padding: 24px 20px;
-      }
-
-      .pricing-card-price {
-        font-size: 2rem;
-      }
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -658,97 +431,7 @@
     </button>
   </div>
 
-  <div class="pricing-modal-overlay" id="pricingModal" role="dialog" aria-modal="true" aria-labelledby="pricingModalTitle">
-    <div class="pricing-modal">
-      <button class="pricing-modal-close" id="pricingModalClose" aria-label="סגור חלון">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="18" y1="6" x2="6" y2="18"/>
-          <line x1="6" y1="6" x2="18" y2="18"/>
-        </svg>
-      </button>
-      <div class="pricing-modal-header">
-        <h2 class="pricing-modal-title" id="pricingModalTitle">בחרו את החבילה המתאימה לכם</h2>
-        <p class="pricing-modal-subtitle">שתי אפשרויות להתחיל עם האתר החדש שלכם</p>
-      </div>
-      <div class="pricing-cards">
-        <div class="pricing-card">
-          <h3 class="pricing-card-name">קוד האתר בלבד</h3>
-          <p class="pricing-card-price">₪1,490 <span>תשלום חד פעמי</span></p>
-          <ul class="pricing-card-features">
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>קבצי האתר המלאים (HTML, CSS, JS)</span>
-            </li>
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>קוד נקי ומותאם לכל דפדפן</span>
-            </li>
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>ללא אחסון — תעלו לשרת שלכם</span>
-            </li>
-          </ul>
-          <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=hairontop&plan=code" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-secondary">המשך לתשלום</a>
-        </div>
-        <div class="pricing-card pricing-card-featured">
-          <div class="pricing-card-badge">מומלץ</div>
-          <h3 class="pricing-card-name">חבילה מלאה</h3>
-          <p class="pricing-card-price">₪2,390 <span>תשלום חד פעמי</span></p>
-          <ul class="pricing-card-features">
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>קוד + אחסון מהיר לשנה</span>
-            </li>
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>דומיין בהתאמה אישית</span>
-            </li>
-            <li>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
-              <span>תיבת מייל עסקית + תמיכה</span>
-            </li>
-          </ul>
-          <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=hairontop&plan=full" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-primary">המשך לתשלום</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    (function() {
-      var fabBtn = document.getElementById('fabBtn');
-      var pricingModal = document.getElementById('pricingModal');
-      var pricingModalClose = document.getElementById('pricingModalClose');
-
-      function openPricingModal() {
-        pricingModal.classList.add('active');
-        document.body.style.overflow = 'hidden';
-        pricingModalClose.focus();
-      }
-
-      function closePricingModal() {
-        pricingModal.classList.remove('active');
-        document.body.style.overflow = '';
-        fabBtn.focus();
-      }
-
-      fabBtn.addEventListener('click', openPricingModal);
-      pricingModalClose.addEventListener('click', closePricingModal);
-
-      pricingModal.addEventListener('click', function(e) {
-        if (e.target === pricingModal) {
-          closePricingModal();
-        }
-      });
-
-      document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape' && pricingModal.classList.contains('active')) {
-          closePricingModal();
-        }
-      });
-    })();
-  </script>
-
   <script src="script.js"></script>
+  <script src="https://emilio.clientscenter.co.il/pay/popup.js" data-src="cmt03bpiu001ppa01litf8kdn" data-name="Hair On Top" data-origin="https://emilio.clientscenter.co.il"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 657c2cf..d7ec19a 100644
--- a/script.js
+++ b/script.js
@@ -107,7 +107,7 @@
   // Sale Popup
   const popup = document.getElementById('salePopup');
   const popupClose = document.getElementById('popupClose');
-  const popupButtons = popup ? popup.querySelectorAll('.popup-option-btn, .popup-link') : [];
+  const fabBtn = document.getElementById('fabBtn');
   
   // Check if popup was already shown in this session
   const popupShown = sessionStorage.getItem('popupShown');
@@ -174,12 +174,22 @@
     });
   }
 
-  // Button click handlers (just close popup for demo)
-  popupButtons.forEach(function(btn) {
-    btn.addEventListener('click', function() {
-      // In a real implementation, these would link to actual actions
+  // FAB button opens popup
+  if (fabBtn) {
+    fabBtn.addEventListener('click', function() {
+      if (popup) {
+        popup.classList.add('active');
+        document.body.style.overflow = 'hidden';
+      }
+    });
+  }
+
+  // Popup link handler
+  const popupLink = popup ? popup.querySelector('.popup-link') : null;
+  if (popupLink) {
+    popupLink.addEventListener('click', function() {
       hidePopup();
     });
-  });
+  }
 
 })();
\ No newline at end of file