fix: remove Book a free demo button from 4 blog posts
content: add free trial CTA panel (email + location + submit) to article modal lower-right
This commit is contained in:
oliver
+294
@@ -2083,6 +2083,167 @@
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Article CTA panel ─────────────────────────────────────────── */
|
||||
#article-cta-panel {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
width: 234px;
|
||||
background: #fdf6ee;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-top: 3px solid var(--gold);
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(62, 39, 35, 0.18),
|
||||
0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 18px 16px 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.article-cta-heading {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 0.83rem;
|
||||
font-weight: 700;
|
||||
color: #3e2723;
|
||||
margin: 0 0 3px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.article-cta-sub {
|
||||
font-size: 0.71rem;
|
||||
color: #8d6e63;
|
||||
font-style: italic;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.article-cta-field {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #fff8f0;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #3e2723;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.article-cta-field::placeholder { color: #a1887f; }
|
||||
.article-cta-field:focus { border-color: var(--gold); }
|
||||
|
||||
.article-cta-loc-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.article-cta-loc-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #fff8f0;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-radius: 4px;
|
||||
padding: 8px 28px 8px 10px;
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #a1887f;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-cta-loc-btn.has-value { color: #3e2723; }
|
||||
.article-cta-loc-btn:focus { border-color: var(--gold); }
|
||||
|
||||
.article-cta-loc-btn::after {
|
||||
content: "\25BE";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #8d6e63;
|
||||
font-size: 0.75rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.article-cta-loc-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fdf6ee;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(62, 39, 35, 0.15);
|
||||
z-index: 30;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-cta-loc-wrap.open .article-cta-loc-menu { display: block; }
|
||||
|
||||
.article-cta-loc-opt {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #4e342e;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.article-cta-loc-opt:hover,
|
||||
.article-cta-loc-opt.is-selected {
|
||||
background: rgba(230, 81, 0, 0.08);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.article-cta-submit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
background: var(--gold);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.article-cta-submit:hover { background: var(--gold-hi); }
|
||||
.article-cta-submit:disabled { opacity: 0.65; cursor: default; }
|
||||
|
||||
#article-cta-confirm { text-align: center; }
|
||||
|
||||
.article-cta-confirm-title {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 0.95rem;
|
||||
color: #3e2723;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.article-cta-confirm-sub {
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.75rem;
|
||||
color: #8d6e63;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
#article-box {
|
||||
height: 90vh;
|
||||
@@ -2100,6 +2261,7 @@
|
||||
font-size: 0.95rem;
|
||||
column-width: 280px;
|
||||
}
|
||||
#article-cta-panel { display: none; }
|
||||
}
|
||||
|
||||
#modal-confirm .confirm-title {
|
||||
@@ -2465,6 +2627,53 @@
|
||||
<div class="article-date" id="article-date"></div>
|
||||
</div>
|
||||
<div class="article-body" id="article-body"></div>
|
||||
|
||||
<div id="article-cta-panel">
|
||||
<div id="article-cta-form-wrap">
|
||||
<p class="article-cta-heading">Try ODOO Free — 4 Weeks</p>
|
||||
<p class="article-cta-sub">No credit card required</p>
|
||||
<form id="article-cta-form" novalidate>
|
||||
<input
|
||||
type="email"
|
||||
id="article-cta-email"
|
||||
name="email"
|
||||
class="article-cta-field"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
<div class="article-cta-loc-wrap" id="article-cta-loc-wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="article-cta-loc-btn"
|
||||
id="article-cta-loc-btn"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded="false"
|
||||
>Select server location</button>
|
||||
<div
|
||||
class="article-cta-loc-menu"
|
||||
id="article-cta-loc-menu"
|
||||
role="listbox"
|
||||
>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Boston, US">🇺🇸 Boston</button>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">🇬🇧 Manchester</button>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">🇮🇳 Mumbai</button>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">🇧🇷 São Paulo</button>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">🇳🇱 Meppel</button>
|
||||
<button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">🇦🇺 Sydney</button>
|
||||
</div>
|
||||
<input type="hidden" id="article-cta-location" name="server_location" value="" />
|
||||
</div>
|
||||
<input type="hidden" name="product" value="odoo_19" />
|
||||
<input type="hidden" name="plan" value="NGO Free Trial" />
|
||||
<button type="submit" class="article-cta-submit">Start Free Trial →</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="article-cta-confirm" style="display:none">
|
||||
<p class="article-cta-confirm-title">Thank you! 🎉</p>
|
||||
<p class="article-cta-confirm-sub">We’ve received your request. A specialist will be in touch within one business day.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4038,6 +4247,91 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var WEBHOOK = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
|
||||
var form = document.getElementById('article-cta-form');
|
||||
var formWrap = document.getElementById('article-cta-form-wrap');
|
||||
var confirmDiv = document.getElementById('article-cta-confirm');
|
||||
var locWrap = document.getElementById('article-cta-loc-wrap');
|
||||
var locBtn = document.getElementById('article-cta-loc-btn');
|
||||
var locMenu = document.getElementById('article-cta-loc-menu');
|
||||
var locField = document.getElementById('article-cta-location');
|
||||
if (!form) return;
|
||||
|
||||
function closeLoc() {
|
||||
locWrap.classList.remove('open');
|
||||
locBtn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
function openLoc() {
|
||||
locWrap.classList.add('open');
|
||||
locBtn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
|
||||
locBtn.addEventListener('click', function () {
|
||||
locWrap.classList.contains('open') ? closeLoc() : openLoc();
|
||||
});
|
||||
|
||||
locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (opt) {
|
||||
opt.addEventListener('click', function () {
|
||||
var val = opt.getAttribute('data-value') || '';
|
||||
locField.value = val;
|
||||
locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (o) {
|
||||
o.classList.toggle('is-selected', o === opt);
|
||||
});
|
||||
locBtn.textContent = opt.textContent.trim();
|
||||
locBtn.classList.add('has-value');
|
||||
closeLoc();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!locWrap.contains(e.target)) closeLoc();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var btn = form.querySelector('.article-cta-submit');
|
||||
var fd = new FormData(form);
|
||||
if (window._mbsTracking) fd = window._mbsTracking.appendToFormData(fd);
|
||||
btn.textContent = 'Sending…';
|
||||
btn.disabled = true;
|
||||
fetch(WEBHOOK, { method: 'POST', body: fd })
|
||||
.then(function () {
|
||||
formWrap.style.display = 'none';
|
||||
confirmDiv.style.display = 'block';
|
||||
})
|
||||
.catch(function () {
|
||||
formWrap.style.display = 'none';
|
||||
confirmDiv.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
var articleOverlay = document.getElementById('article-overlay');
|
||||
if (articleOverlay) {
|
||||
var observer = new MutationObserver(function () {
|
||||
if (!articleOverlay.classList.contains('is-open')) {
|
||||
setTimeout(function () {
|
||||
formWrap.style.display = '';
|
||||
confirmDiv.style.display = 'none';
|
||||
form.reset();
|
||||
locField.value = '';
|
||||
locBtn.textContent = 'Select server location';
|
||||
locBtn.classList.remove('has-value');
|
||||
locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (o) {
|
||||
o.classList.remove('is-selected');
|
||||
});
|
||||
var btn = form.querySelector('.article-cta-submit');
|
||||
btn.textContent = 'Start Free Trial \u2192';
|
||||
btn.disabled = false;
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
observer.observe(articleOverlay, { attributes: true, attributeFilter: ['class'] });
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+7
-61
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user