From 2b4acc85bbc982248f3e5d8af9a1abfc880e5ffc Mon Sep 17 00:00:00 2001
From: ccadmingit1 <yossi.em@gmail.com>
Date: Thu, 20 Aug 2026 17:51:34 +0000
Subject: [PATCH] =?UTF-8?q?AI=20update:=20=D7=94=D7=95=D7=A1=D7=A3=20?=
 =?UTF-8?q?=D7=9C=D7=A4=D7=A0=D7=99=20=D7=AA=D7=92=20=D7=94=D7=A1=D7=92?=
 =?UTF-8?q?=D7=99=D7=A8=D7=94=20</body>=20=D7=A7=D7=98=D7=A2=20=D7=A7?=
 =?UTF-8?q?=D7=95=D7=93=20(HTML+CSS+JS=20=D7=95=D7=A0=D7=99=D7=9C,=20?=
 =?UTF-8?q?=D7=9C=D7=9C=D7=90=20=D7=A1=D7=A4=D7=A8=D7=99=D7=95=D7=AA=20?=
 =?UTF-8?q?=D7=97=D7=99=D7=A6=D7=95=D7=A0=D7=99=D7=95=D7=AA)=20=D7=A9?=
 =?UTF-8?q?=D7=99=D7=95=D7=A6=D7=A8=20=D7=9B=D7=A4=D7=AA=D7=95=D7=A8=20?=
 =?UTF-8?q?=D7=A4=D7=A2=D7=95=D7=9C=D7=94=20=D7=A6=D7=A3=20(floating=20act?=
 =?UTF-8?q?ion=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 396 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 396 insertions(+)

diff --git a/index.html b/index.html
index 771a6b9..87fc802 100644
--- a/index.html
+++ b/index.html
@@ -353,6 +353,402 @@
     </div>
   </div>
 
+  <!-- Floating Action Button & Pricing Modal -->
+  <style>
+    .fab-container {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 9000;
+      font-family: 'Heebo', sans-serif;
+    }
+
+    .fab-btn {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 22px;
+      background: linear-gradient(135deg, #D4AF37, #B8960C);
+      color: #0a0a0a;
+      border: none;
+      border-radius: 50px;
+      font-family: inherit;
+      font-size: 0.9375rem;
+      font-weight: 500;
+      cursor: pointer;
+      box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4), 0 4px 12px rgba(0,0,0,0.3);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      animation: fabPulse 3s ease-in-out infinite;
+    }
+
+    .fab-btn:hover,
+    .fab-btn:focus {
+      transform: translateY(-3px) scale(1.02);
+      box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5), 0 6px 16px rgba(0,0,0,0.4);
+      background: linear-gradient(135deg, #E5C76B, #D4AF37);
+    }
+
+    .fab-btn:active {
+      transform: translateY(-1px) scale(0.98);
+    }
+
+    .fab-emoji {
+      font-size: 1.25rem;
+      line-height: 1;
+    }
+
+    @keyframes fabPulse {
+      0%, 100% { box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4), 0 4px 12px rgba(0,0,0,0.3); }
+      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;
+        right: 16px;
+        left: 16px;
+      }
+
+      .fab-btn {
+        width: 100%;
+        justify-content: center;
+        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) {
+      .fab-btn {
+        animation: none;
+      }
+    }
+  </style>
+
+  <div class="fab-container">
+    <button class="fab-btn" id="fabBtn" aria-label="רוצים אתר כזה? לחצו כאן">
+      <span>רוצים אתר כזה? לחצו כאן</span>
+      <span class="fab-emoji" aria-hidden="true">????</span>
+    </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>
 </body>
 </html>
\ No newline at end of file