Oliver/static
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Your Name
2026-04-11 09:27:42 -03:00
parent 5e94b9d40c
commit 8af11561d0
1 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
upsell.html
+43 -11
View File
@@ -47,6 +47,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
position: relative;
transition: transition:
box-shadow 0.2s, box-shadow 0.2s,
border-color 0.2s, border-color 0.2s,
@@ -59,10 +60,26 @@
} }
.plan-card.current { .plan-card.current {
border-color: #875a7b; border-color: #4caf50;
box-shadow: box-shadow:
0 0 0 3px rgba(135, 90, 123, 0.18), 0 0 0 3px rgba(76, 175, 80, 0.2),
0 4px 16px rgba(135, 90, 123, 0.12); 0 4px 16px rgba(76, 175, 80, 0.15);
}
.plan-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: #4caf50;
color: #fff;
font-size: 0.68em;
font-weight: 700;
padding: 3px 11px;
border-radius: 20px;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);
letter-spacing: 0.01em;
} }
.plan-name { .plan-name {
@@ -130,7 +147,7 @@
} }
.plan-btn.is-current-plan:disabled { .plan-btn.is-current-plan:disabled {
background-color: #6d9f71; background-color: #4caf50;
} }
.plan-features { .plan-features {
@@ -221,7 +238,9 @@
<div class="plan-tagline"> <div class="plan-tagline">
"ODOO Standard .. that is all my business needs" "ODOO Standard .. that is all my business needs"
</div> </div>
<button class="plan-btn" id="btn-sidehustle">Buy Now</button> <button class="plan-btn" id="btn-sidehustle">
Upgrade Now
</button>
<ul class="plan-features"> <ul class="plan-features">
<li>ODOO CE hosting</li> <li>ODOO CE hosting</li>
<li>1 Backup Slot</li> <li>1 Backup Slot</li>
@@ -238,7 +257,7 @@
<div class="plan-tagline"> <div class="plan-tagline">
"I need some modules and professional reports" "I need some modules and professional reports"
</div> </div>
<button class="plan-btn" id="btn-ontherise">Buy Now</button> <button class="plan-btn" id="btn-ontherise">Upgrade Now</button>
<ul class="plan-features"> <ul class="plan-features">
<li>ODOO CE hosting</li> <li>ODOO CE hosting</li>
<li>4 Backup Slots</li> <li>4 Backup Slots</li>
@@ -255,7 +274,9 @@
<div class="plan-tagline"> <div class="plan-tagline">
"ODOO Enterprise is a must have!" "ODOO Enterprise is a must have!"
</div> </div>
<button class="plan-btn" id="btn-powerhouse">Buy Now</button> <button class="plan-btn" id="btn-powerhouse">
Upgrade Now
</button>
<ul class="plan-features"> <ul class="plan-features">
<li>All of On the Rise</li> <li>All of On the Rise</li>
<li>ODOO Enterprise Ready</li> <li>ODOO Enterprise Ready</li>
@@ -354,11 +375,18 @@
.addEventListener("click", () => buyProduct("powerhouse")); .addEventListener("click", () => buyProduct("powerhouse"));
// ── Apply current-plan state ────────────────────────────────────────────── // ── Apply current-plan state ──────────────────────────────────────────────
function addOneYear(dateStr) {
if (!dateStr) return dateStr;
var d = new Date(dateStr);
d.setFullYear(d.getFullYear() + 1);
return d.toISOString().slice(0, 10);
}
function applyPlanState(contractName, expires) { function applyPlanState(contractName, expires) {
const currentIdx = PLAN_ORDER.indexOf(contractName); const currentIdx = PLAN_ORDER.indexOf(contractName);
if (currentIdx === -1) return; // unknown plan – leave defaults if (currentIdx === -1) return; // unknown plan – leave defaults
const expiresLabel = expires ? "✅ " + expires : "✅"; const badgeLabel = expires ? "✅ " + addOneYear(expires) : "✅";
PLAN_ORDER.forEach(function (plan, idx) { PLAN_ORDER.forEach(function (plan, idx) {
var meta = PLAN_META[plan]; var meta = PLAN_META[plan];
@@ -368,16 +396,20 @@
if (!btn || !card) return; if (!btn || !card) return;
if (idx === currentIdx) { if (idx === currentIdx) {
// Current plan – green disabled button with expiry date // Current plan – green frame, badge with +1yr date, "Currently" button
card.classList.add("current"); card.classList.add("current");
btn.textContent = expiresLabel; var badge = document.createElement("div");
badge.className = "plan-badge";
badge.textContent = badgeLabel;
card.insertBefore(badge, card.firstChild);
btn.textContent = "Currently";
btn.disabled = true; btn.disabled = true;
btn.classList.add("is-current-plan"); btn.classList.add("is-current-plan");
} else if (idx < currentIdx) { } else if (idx < currentIdx) {
// Lower tier – hide entirely // Lower tier – hide entirely
card.style.display = "none"; card.style.display = "none";
} }
// Higher tiers: leave as "Buy Now" (enabled) // Higher tiers: leave as "Upgrade Now" (enabled)
}); });
} }