Skip to main content

PROMPT 1 — Widget GetCourse Modal + Rutarea Butoanelor


Am un landing page HTML de webinar (fișierul e în proiect).
Adaugă modalul GetCourse și rutarea butoanelor fără să modifici designul.

─── CSS (adaugă la sfârșitul blocului <style> existent) ───

.gc-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}
.gc-overlay.active{opacity:1;visibility:visible}
.gc-modal{position:relative;background:#fff;border-radius:16px;width:94%;max-width:520px;max-height:90vh;overflow:hidden;transform:translateY(24px) scale(0.97);transition:transform 0.3s ease;box-shadow:0 24px 80px rgba(0,0,0,0.25)}
.gc-overlay.active .gc-modal{transform:translateY(0) scale(1)}
.gc-modal__close{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,0.06);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.gc-modal__close:hover{background:rgba(0,0,0,0.12)}
.gc-modal__close svg{width:18px;height:18px;stroke:#333;stroke-width:2.5}
.gc-modal__body{overflow-y:auto;max-height:90vh;-webkit-overflow-scrolling:touch}
.gc-modal__body iframe{display:block;width:100%;min-height:550px;border:none}

─── HTML modal (adaugă imediat înainte de </body>) ───

<div class="gc-overlay" id="gc-overlay" onclick="if(event.target===this)closeGcModal()">
  <div class="gc-modal">
    <button class="gc-modal__close" onclick="closeGcModal()" aria-label="Închide">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
    <div class="gc-modal__body">
      <iframe id="gc-iframe" src="" allow="payment"></iframe>
    </div>
  </div>
</div>

─── Script widget (adaugă după HTML modal) ───

<script>
  (function(){
    var BASE_URL = 'https://edu.inginer.ai';
    var WIDGETS  = { standard: '1610817', vip: '1610799' };
    var STORE_KEY = '__inginer_utms';
    var KEYS = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content'];

    function readFromUrl(){
      var out = {};
      var sp = new URLSearchParams(window.location.search);
      KEYS.forEach(function(k){ var v=sp.get(k); if(v) out[k]=v; });
      var hash = window.location.hash;
      var qi = hash.indexOf('?');
      if(qi !== -1){
        var hsp = new URLSearchParams(hash.slice(qi+1));
        KEYS.forEach(function(k){ var v=hsp.get(k); if(v) out[k]=v; });
      }
      return out;
    }

    function load(){ try{ var s=sessionStorage.getItem(STORE_KEY); return s?JSON.parse(s):{}; }catch(e){ return {}; } }
    function save(o){ try{ sessionStorage.setItem(STORE_KEY,JSON.stringify(o)); }catch(e){} }

    var merged = Object.assign({}, load(), readFromUrl());
    if(Object.keys(merged).length) save(merged);

    window.__getUtms = function(){ return Object.assign({}, load(), readFromUrl()); };

    function buildWidgetUrl(widgetId){
      var utms = window.__getUtms();
      var params = new URLSearchParams(Object.assign({ id: widgetId, ref: window.location.href, loc: window.location.href, clrtQueryData: '1' }, utms));
      return BASE_URL + '/pl/lite/widget/widget?' + params.toString();
    }

    window.openGcModal = function(type){
      var overlay = document.getElementById('gc-overlay');
      var iframe  = document.getElementById('gc-iframe');
      if(!overlay || !iframe) return;
      iframe.src = buildWidgetUrl(WIDGETS[type]);
      overlay.classList.add('active');
      document.body.style.overflow = 'hidden';
    };

    window.closeGcModal = function(){
      var overlay = document.getElementById('gc-overlay');
      var iframe  = document.getElementById('gc-iframe');
      if(!overlay) return;
      overlay.classList.remove('active');
      document.body.style.overflow = '';
      setTimeout(function(){ if(iframe) iframe.src = ''; }, 300);
    };

    document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeGcModal(); });

    window.addEventListener('message', function(event){
      if(!event.origin.includes('edu.inginer.ai')) return;
      if(event.data && typeof event.data==='object' && event.data.type==='resize'){
        var iframe = document.getElementById('gc-iframe');
        if(iframe && event.data.height > 0) iframe.style.height = event.data.height + 'px';
      }
    });
  })();
</script>

─── Rutarea butoanelor ───

Caută toate <button> și <a class="btn"> din fișier și aplică regula:

- Butoane DIN AFARA secțiunii de prețuri:
  onclick="document.getElementById('pricing').scrollIntoView({behavior:'smooth'})"
  (dacă secțiunea de prețuri nu are id="pricing", adaugă-l pe elementul părinte)

- Butonul Standard DIN secțiunea de prețuri:
  onclick="openGcModal('standard')"

- Butonul VIP DIN secțiunea de prețuri:
  onclick="openGcModal('vip')"