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;
align-items: center;
text-align: center;
position: relative;
transition:
box-shadow 0.2s,
border-color 0.2s,
@@ -59,10 +60,26 @@
}
.plan-card.current {
border-color: #875a7b;
border-color: #4caf50;
box-shadow:
0 0 0 3px rgba(135, 90, 123, 0.18),
0 4px 16px rgba(135, 90, 123, 0.12);
0 0 0 3px rgba(76, 175, 80, 0.2),
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 {
@@ -130,7 +147,7 @@
}
.plan-btn.is-current-plan:disabled {
background-color: #6d9f71;
background-color: #4caf50;
}
.plan-features {
@@ -221,7 +238,9 @@
<div class="plan-tagline">
"ODOO Standard .. that is all my business needs"
</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">
<li>ODOO CE hosting</li>
<li>1 Backup Slot</li>
@@ -238,7 +257,7 @@
<div class="plan-tagline">
"I need some modules and professional reports"
</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">
<li>ODOO CE hosting</li>
<li>4 Backup Slots</li>
@@ -255,7 +274,9 @@
<div class="plan-tagline">
"ODOO Enterprise is a must have!"
</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">
<li>All of On the Rise</li>
<li>ODOO Enterprise Ready</li>
@@ -354,11 +375,18 @@
.addEventListener("click", () => buyProduct("powerhouse"));
// ── 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) {
const currentIdx = PLAN_ORDER.indexOf(contractName);
if (currentIdx === -1) return; // unknown plan – leave defaults
const expiresLabel = expires ? "✅ " + expires : "✅";
const badgeLabel = expires ? "✅ " + addOneYear(expires) : "✅";
PLAN_ORDER.forEach(function (plan, idx) {
var meta = PLAN_META[plan];
@@ -368,16 +396,20 @@
if (!btn || !card) return;
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");
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.classList.add("is-current-plan");
} else if (idx < currentIdx) {
// Lower tier – hide entirely
card.style.display = "none";
}
// Higher tiers: leave as "Buy Now" (enabled)
// Higher tiers: leave as "Upgrade Now" (enabled)
});
}