From 86723775abacaeb1a759bf2a056899bfd3fe1205 Mon Sep 17 00:00:00 2001
From: ccadmingit1 <yossi.em@gmail.com>
Date: Thu, 20 Aug 2026 17:52:48 +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 | 435 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 373 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index ad4d468..29becd5 100644
--- a/index.html
+++ b/index.html
@@ -560,83 +560,394 @@
     <span>052-855-5502</span>
   </a>
 
-  <!-- Floating offer button -->
-  <button class="floating-offer-btn" id="openOfferBtn" aria-label="הצעה מיוחדת">
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm3.5 12.09l-1.41 1.41L12 13.41 9.91 15.5 8.5 14.09 10.59 12 8.5 9.91 9.91 8.5 12 10.59l2.09-2.09 1.41 1.41L13.41 12l2.09 2.09z" fill="currentColor"/>
-    </svg>
-    <span>הצעה</span>
+  <!-- Want a site like this FAB + Modal -->
+  <button class="want-site-fab" id="wantSiteFab" aria-label="רוצים אתר כזה?">
+    <span class="want-site-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
   </button>
 
-  <!-- Sales Popup -->
-  <div class="popup-overlay" id="popupOverlay" aria-hidden="true">
-    <div class="popup-modal" role="dialog" aria-labelledby="popupTitle" aria-modal="true">
-      <button class="popup-close" id="closePopupBtn" aria-label="סגור">
+  <div class="package-modal-overlay" id="packageModalOverlay" aria-hidden="true">
+    <div class="package-modal" role="dialog" aria-labelledby="packageModalTitle" aria-modal="true">
+      <button class="package-modal-close" id="packageModalClose" aria-label="סגור">
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
         </svg>
       </button>
       
-      <div class="popup-header">
-        <div class="popup-icon">
-          <svg viewBox="0 0 60 60" aria-hidden="true">
-            <circle cx="30" cy="30" r="28" fill="var(--orange)"/>
-            <path d="M22 18 L22 42 L28 42 L28 32 L32 32 L32 42 L38 42 L38 18 L32 18 L32 28 L28 28 L28 18 Z" fill="white"/>
-          </svg>
+      <h2 id="packageModalTitle" class="package-modal-title">בחרו את החבילה המתאימה לכם</h2>
+      
+      <div class="package-cards">
+        <div class="package-card">
+          <div class="package-card-header">
+            <h3>קוד האתר בלבד</h3>
+            <div class="package-price">₪1,490</div>
+          </div>
+          <ul class="package-features">
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              קבצי האתר המלאים (HTML, CSS, JS)
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              עיצוב מותאם אישית לעסק שלכם
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              ללא אחסון — תעלו בעצמכם
+            </li>
+          </ul>
+          <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=itzik&plan=code" target="_blank" rel="noopener" class="package-btn package-btn-secondary">
+            המשך לתשלום
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/></svg>
+          </a>
         </div>
-        <h2 id="popupTitle">האתר שלך מוכן ומחכה לך</h2>
-      </div>
-
-      <div class="popup-content">
-        <p class="popup-intro">בחרו את האפשרות המתאימה לכם:</p>
         
-        <div class="popup-options">
-          <a href="#" class="popup-option popup-option-basic">
-            <div class="option-icon">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" fill="currentColor"/>
-              </svg>
-            </div>
-            <div class="option-text">
-              <strong>הורדת קוד המקור</strong>
-              <span>קבלו את כל קבצי האתר להתקנה עצמאית</span>
-            </div>
-            <svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
-            </svg>
+        <div class="package-card package-card-featured">
+          <div class="package-badge">מומלץ</div>
+          <div class="package-card-header">
+            <h3>חבילה מלאה</h3>
+            <div class="package-price">₪2,390</div>
+          </div>
+          <ul class="package-features">
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              קוד האתר + אחסון לשנה
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              דומיין בהתאמה אישית
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
+              תיבת מייל עסקית
+            </li>
+          </ul>
+          <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=itzik&plan=full" target="_blank" rel="noopener" class="package-btn package-btn-primary">
+            המשך לתשלום
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/></svg>
           </a>
-          
-          <a href="#" class="popup-option popup-option-premium">
-            <div class="option-badge">מומלץ</div>
-            <div class="option-icon">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" fill="currentColor"/>
-              </svg>
-            </div>
-            <div class="option-text">
-              <strong>אחסון מלא + קוד</strong>
-              <span>כולל דומיין, אחסון וניהול מלא</span>
-            </div>
-            <svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
-            </svg>
-          </a>
-        </div>
-
-        <div class="popup-warning">
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
-          </svg>
-          <p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
-        </div>
-
-        <div class="popup-extras">
-          <p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד. <a href="#contact" class="popup-link" id="popupContactLink">צרו קשר</a> ונתאים לכם הצעה.</p>
         </div>
       </div>
     </div>
   </div>
 
+  <style>
+    /* Want a site like this - FAB */
+    .want-site-fab {
+      position: fixed;
+      inset-block-end: calc(var(--space-md) + 60px);
+      inset-inline-start: var(--space-md);
+      z-index: 95;
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: var(--space-sm) var(--space-md);
+      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
+      color: var(--cream);
+      font-family: var(--font-display);
+      font-size: 0.95rem;
+      font-weight: 500;
+      border: 2px solid var(--orange);
+      border-radius: 50px;
+      cursor: pointer;
+      box-shadow: var(--shadow-lg);
+      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+    }
+
+    .want-site-fab:hover,
+    .want-site-fab:focus {
+      transform: translateY(-3px);
+      box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4);
+      background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
+    }
+
+    .want-site-fab-text {
+      white-space: nowrap;
+    }
+
+    @media (max-width: 600px) {
+      .want-site-fab {
+        inset-inline-start: var(--space-sm);
+        inset-block-end: calc(var(--space-sm) + 55px);
+        padding: var(--space-xs) var(--space-sm);
+        font-size: 0.85rem;
+      }
+    }
+
+    /* Package Modal Overlay */
+    .package-modal-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-md);
+      background: rgba(21, 42, 69, 0.85);
+      backdrop-filter: blur(8px);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s, visibility 0.3s;
+    }
+
+    .package-modal-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* Package Modal */
+    .package-modal {
+      position: relative;
+      width: 100%;
+      max-width: 700px;
+      max-height: 90vh;
+      overflow-y: auto;
+      padding: var(--space-xl);
+      background: var(--cream);
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-lg);
+      transform: scale(0.9) translateY(20px);
+      transition: transform 0.3s;
+    }
+
+    .package-modal-overlay.active .package-modal {
+      transform: scale(1) translateY(0);
+    }
+
+    .package-modal-close {
+      position: absolute;
+      inset-block-start: var(--space-md);
+      inset-inline-end: var(--space-md);
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gray-light);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: background 0.2s, transform 0.2s;
+    }
+
+    .package-modal-close svg {
+      width: 20px;
+      height: 20px;
+      color: var(--navy);
+    }
+
+    .package-modal-close:hover,
+    .package-modal-close:focus {
+      background: var(--navy);
+    }
+
+    .package-modal-close:hover svg,
+    .package-modal-close:focus svg {
+      color: var(--cream);
+    }
+
+    .package-modal-title {
+      text-align: center;
+      font-size: clamp(1.25rem, 4vw, 1.75rem);
+      color: var(--navy);
+      margin-block-end: var(--space-lg);
+    }
+
+    /* Package Cards */
+    .package-cards {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--space-md);
+    }
+
+    @media (max-width: 600px) {
+      .package-cards {
+        grid-template-columns: 1fr;
+      }
+      
+      .package-modal {
+        padding: var(--space-lg) var(--space-md);
+      }
+    }
+
+    .package-card {
+      position: relative;
+      padding: var(--space-lg);
+      background: white;
+      border: 2px solid var(--gray-light);
+      border-radius: var(--radius-lg);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .package-card:hover {
+      border-color: var(--light-blue);
+      box-shadow: var(--shadow-md);
+    }
+
+    .package-card-featured {
+      border-color: var(--orange);
+      background: linear-gradient(180deg, rgba(255, 107, 53, 0.05) 0%, white 100%);
+    }
+
+    .package-card-featured:hover {
+      border-color: var(--orange);
+      box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.15);
+    }
+
+    .package-badge {
+      position: absolute;
+      inset-block-start: -12px;
+      inset-inline-start: 50%;
+      transform: translateX(50%);
+      padding: var(--space-xs) var(--space-sm);
+      background: var(--orange);
+      color: white;
+      font-family: var(--font-display);
+      font-size: 0.75rem;
+      font-weight: 600;
+      border-radius: 50px;
+      white-space: nowrap;
+    }
+
+    .package-card-header {
+      text-align: center;
+      margin-block-end: var(--space-md);
+      padding-block-end: var(--space-md);
+      border-block-end: 1px solid var(--gray-light);
+    }
+
+    .package-card-header h3 {
+      font-size: 1.125rem;
+      color: var(--navy);
+      margin-block-end: var(--space-xs);
+    }
+
+    .package-price {
+      font-family: var(--font-display);
+      font-size: 2rem;
+      font-weight: 600;
+      color: var(--orange);
+    }
+
+    .package-features {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+      margin-block-end: var(--space-lg);
+    }
+
+    .package-features li {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-xs);
+      font-size: 0.9rem;
+      color: var(--gray);
+      line-height: 1.4;
+    }
+
+    .package-features svg {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      margin-block-start: 2px;
+      color: var(--orange);
+    }
+
+    .package-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-xs);
+      width: 100%;
+      padding: var(--space-sm) var(--space-md);
+      font-family: var(--font-display);
+      font-size: 1rem;
+      font-weight: 500;
+      border-radius: var(--radius-md);
+      transition: all 0.2s;
+      text-align: center;
+    }
+
+    .package-btn svg {
+      width: 18px;
+      height: 18px;
+      transition: transform 0.2s;
+    }
+
+    .package-btn:hover svg {
+      transform: translateX(-4px);
+    }
+
+    .package-btn-secondary {
+      background: var(--navy);
+      color: white;
+    }
+
+    .package-btn-secondary:hover,
+    .package-btn-secondary:focus {
+      background: var(--navy-light);
+    }
+
+    .package-btn-primary {
+      background: var(--orange);
+      color: white;
+    }
+
+    .package-btn-primary:hover,
+    .package-btn-primary:focus {
+      background: var(--orange-dark);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-glow);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .package-modal-overlay,
+      .package-modal,
+      .want-site-fab {
+        transition: none;
+      }
+    }
+  </style>
+
+  <script>
+    (function() {
+      'use strict';
+      
+      const fab = document.getElementById('wantSiteFab');
+      const overlay = document.getElementById('packageModalOverlay');
+      const closeBtn = document.getElementById('packageModalClose');
+      const modal = overlay.querySelector('.package-modal');
+      
+      function openModal() {
+        overlay.classList.add('active');
+        overlay.setAttribute('aria-hidden', 'false');
+        closeBtn.focus();
+        document.body.style.overflow = 'hidden';
+      }
+      
+      function closeModal() {
+        overlay.classList.remove('active');
+        overlay.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+        fab.focus();
+      }
+      
+      fab.addEventListener('click', openModal);
+      closeBtn.addEventListener('click', closeModal);
+      
+      overlay.addEventListener('click', function(e) {
+        if (e.target === overlay) {
+          closeModal();
+        }
+      });
+      
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && overlay.classList.contains('active')) {
+          closeModal();
+        }
+      });
+    })();
+  </script>
+
   <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file