content: add Schedule a Meeting button with calendar modal next to trial widget
This commit is contained in:
oliver
+178
-2
@@ -2083,10 +2083,131 @@
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Article actions row (schedule + trial) ──────────────────── */
|
||||
#article-actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
margin: 2.5rem 0 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.article-schedule-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
width: 150px;
|
||||
background: #fdf6ee;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-top: 3px solid #8d6e63;
|
||||
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 14px;
|
||||
cursor: pointer;
|
||||
transition: border-top-color 0.2s, box-shadow 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-schedule-btn:hover {
|
||||
border-top-color: var(--gold);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(62, 39, 35, 0.22),
|
||||
0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-schedule-icon {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.article-schedule-label {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 0.83rem;
|
||||
font-weight: 700;
|
||||
color: #3e2723;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.article-schedule-sub {
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 0.68rem;
|
||||
color: #8d6e63;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Calendar modal ──────────────────────────────────────────────── */
|
||||
#cal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9600;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(62, 39, 35, 0.88);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
#cal-overlay.is-open {
|
||||
display: flex;
|
||||
animation: articleOverlayIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
#cal-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
height: 80vh;
|
||||
background: #fdf6ee;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
box-shadow:
|
||||
0 40px 100px rgba(0, 0, 0, 0.35),
|
||||
0 0 0 1px rgba(255, 243, 224, 0.15);
|
||||
overflow: hidden;
|
||||
animation: articleFlyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
|
||||
#cal-box iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#cal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(93, 64, 55, 0.12);
|
||||
color: #8d6e63;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cal-close:hover {
|
||||
background: rgba(230, 81, 0, 0.12);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Article CTA panel ─────────────────────────────────────────── */
|
||||
#article-cta-panel {
|
||||
width: 260px;
|
||||
margin: 2.5rem 0 0 auto;
|
||||
background: #fdf6ee;
|
||||
border: 1px solid rgba(93, 64, 55, 0.22);
|
||||
border-top: 3px solid var(--gold);
|
||||
@@ -2258,7 +2379,13 @@
|
||||
font-size: 0.95rem;
|
||||
column-width: 280px;
|
||||
}
|
||||
#article-cta-panel { width: 100%; margin-top: 2rem; }
|
||||
#article-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#article-schedule-btn,
|
||||
#article-cta-panel { width: 100%; }
|
||||
}
|
||||
|
||||
#modal-confirm .confirm-title {
|
||||
@@ -2626,6 +2753,13 @@
|
||||
<div class="article-body" id="article-body">
|
||||
<div id="article-content"></div>
|
||||
|
||||
<div id="article-actions">
|
||||
<button id="article-schedule-btn" class="article-schedule-btn" type="button">
|
||||
<span class="article-schedule-icon">📅</span>
|
||||
<span class="article-schedule-label">Schedule a Meeting</span>
|
||||
<span class="article-schedule-sub">Pick a time that works for you</span>
|
||||
</button>
|
||||
|
||||
<div id="article-cta-panel">
|
||||
<div id="article-cta-form-wrap">
|
||||
<p class="article-cta-heading">Try ODOO Free — 4 Weeks</p>
|
||||
@@ -2671,11 +2805,20 @@
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cal-overlay">
|
||||
<div id="cal-box">
|
||||
<button id="cal-close" aria-label="Close calendar">×</button>
|
||||
<iframe id="cal-iframe" src="" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="story">
|
||||
<div class="story-grid">
|
||||
<div
|
||||
@@ -4329,6 +4472,39 @@
|
||||
});
|
||||
observer.observe(articleOverlay, { attributes: true, attributeFilter: ['class'] });
|
||||
}
|
||||
|
||||
/* ── Calendar modal ───────────────────────────────────────── */
|
||||
var CAL_URL = 'https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c';
|
||||
var calOverlay = document.getElementById('cal-overlay');
|
||||
var calIframe = document.getElementById('cal-iframe');
|
||||
var calClose = document.getElementById('cal-close');
|
||||
var schedBtn = document.getElementById('article-schedule-btn');
|
||||
|
||||
function openCal() {
|
||||
calIframe.src = CAL_URL;
|
||||
calOverlay.classList.add('is-open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeCal() {
|
||||
calOverlay.classList.remove('is-open');
|
||||
document.body.style.overflow = '';
|
||||
setTimeout(function () { calIframe.src = ''; }, 300);
|
||||
}
|
||||
|
||||
if (schedBtn) schedBtn.addEventListener('click', openCal);
|
||||
if (calClose) calClose.addEventListener('click', closeCal);
|
||||
if (calOverlay) {
|
||||
calOverlay.addEventListener('click', function (e) {
|
||||
if (e.target === calOverlay) closeCal();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && calOverlay && calOverlay.classList.contains('is-open')) {
|
||||
closeCal();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user