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')"