Prompturi Utile
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')"
PROMPT 2 — Script dată automată + Countdown
Am un landing page HTML de webinar (fișierul e în proiect).
Adaugă scriptul de dată automată și countdown fără să modifici designul.
Reguli:
- Webinarul are loc în fiecare MARȚI la ora 19:00 (ora României), reluarea MIERCURI la 19:00
- Data se calculează dinamic la fiecare vizită — niciodată hardcodată
- Dacă azi e marți dar ora 19:00 a trecut, sare la marțea următoare
Caută în fișier elementele de mai jos și populează-le. Dacă un element nu există, sari peste el.
| ID / selector | Ce afișează |
|---------------------|----------------------------------------------------------|
| #hero-live-date | ex: „Marți, 24 iunie", ora 19:00 (ora României) |
| #hero-reluare-date | ex: „Reluare: Miercuri, 25 iunie · 19:00" |
| #live-date | varianta scurtă cu emoji 📅 și dată bold |
| #reluare-date | varianta scurtă cu emoji 📅 și dată bold |
| #micro-live | linie compactă: dată · 19:00 · 90 minute · sesiune live |
| #final-cta-date | dată bold în secțiunea finală de CTA |
| .eyebrow.live | text uppercase: LIVE · DOAR 150 LOCURI · DATA · 19:00 |
| cd-d sau cd-days | countdown zile (detectează automat ce prefix există) |
| cd-h sau cd-hours | countdown ore |
| cd-m sau cd-minutes | countdown minute |
| cd-s sau cd-seconds | countdown secunde |
Scriptul de adăugat (adaptează ID-urile countdown la ce există în fișier):
<script>
(function(){
var MONTHS_RO = ['ianuarie','februarie','martie','aprilie','mai','iunie','iulie','august','septembrie','octombrie','noiembrie','decembrie'];
var DAYS_RO = ['Duminică','Luni','Marți','Miercuri','Joi','Vineri','Sâmbătă'];
function getNextTuesday() {
var now = new Date();
var next = new Date(now);
next.setHours(19, 0, 0, 0);
var day = now.getDay();
var daysUntil = (2 - day + 7) % 7;
if (daysUntil === 0 && now >= next) daysUntil = 7;
next.setDate(next.getDate() + daysUntil);
return next;
}
function getNextWednesdayAfter(d) {
var r = new Date(d);
r.setDate(r.getDate() + 1);
return r;
}
var liveDate = getNextTuesday();
var reluareDate = getNextWednesdayAfter(liveDate);
function fmtShort(d) { return DAYS_RO[d.getDay()] + ', ' + d.getDate() + ' ' + MONTHS_RO[d.getMonth()]; }
function fmtUpper(d) { return DAYS_RO[d.getDay()].toUpperCase() + ', ' + d.getDate() + ' ' + MONTHS_RO[d.getMonth()].toUpperCase(); }
var eyebrowEl = document.querySelector('.eyebrow.live');
if (eyebrowEl) eyebrowEl.textContent = 'LIVE · DOAR 150 LOCURI · ' + fmtUpper(liveDate) + ' · 19:00 (ora României)';
var heroLiveEl = document.getElementById('hero-live-date');
if (heroLiveEl) heroLiveEl.innerHTML = '<strong>' + fmtShort(liveDate) + '</strong>, ora 19:00 (ora României)';
var heroReluareEl = document.getElementById('hero-reluare-date');
if (heroReluareEl) heroReluareEl.innerHTML = '<strong>Reluare</strong>: ' + fmtShort(reluareDate) + ' · 19:00';
var microEl = document.getElementById('micro-live');
if (microEl) microEl.textContent = fmtShort(liveDate) + ' · 19:00 (ora României) · 90 minute · sesiune live';
var liveDateEl = document.getElementById('live-date');
if (liveDateEl) liveDateEl.innerHTML = '📅 <strong>' + fmtShort(liveDate) + '</strong> · 19:00';
var reluareDateEl = document.getElementById('reluare-date');
if (reluareDateEl) reluareDateEl.innerHTML = '📅 <strong>' + fmtShort(reluareDate) + '</strong> · 19:00';
var finalCtaEl = document.getElementById('final-cta-date');
if (finalCtaEl) finalCtaEl.innerHTML = '<strong>' + fmtShort(liveDate) + '</strong>, ora 19:00';
var target = liveDate.getTime();
var elD = document.getElementById('cd-d') || document.getElementById('cd-days');
var elH = document.getElementById('cd-h') || document.getElementById('cd-hours');
var elM = document.getElementById('cd-m') || document.getElementById('cd-minutes');
var elS = document.getElementById('cd-s') || document.getElementById('cd-seconds');
function pad(n) { return String(Math.max(0, n)).padStart(2, '0'); }
function tick() {
var diff = target - Date.now();
if (diff <= 0) diff = 0;
var s = Math.floor(diff / 1000);
var d = Math.floor(s / 86400); s -= d * 86400;
var h = Math.floor(s / 3600); s -= h * 3600;
var m = Math.floor(s / 60); s -= m * 60;
if (elD) elD.textContent = pad(d);
if (elH) elH.textContent = pad(h);
if (elM) elM.textContent = pad(m);
if (elS) elS.textContent = pad(s);
}
tick();
setInterval(tick, 1000);
})();
</script>