This commit is contained in:
Your Name
2026-04-11 06:27:37 -03:00
parent 3996bef0ff
commit a1473d9930
+370 -197
View File
@@ -1,269 +1,442 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check and Upgrade Your Plan</title>
<head>
<meta charset="UTF-8" />
<title>Your Plan</title>
<style>
body {
font-family: "Inter", "Segoe UI", Arial, sans-serif;
background-color: #f4f5f7;
color: #333;
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
padding: 32px 16px;
}
.summary-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
padding: 40px;
max-width: 720px;
width: 100%;
}
h2 {
.page-title {
text-align: center;
color: #262626;
margin-bottom: 4px;
font-weight: 600;
}
/* New small centered contract name */
.contract-name {
text-align: center;
font-size: 0.85em;
color: #666;
margin-bottom: 25px;
}
.subtitle {
text-align: center;
font-size: 0.9em;
color: #777;
margin-bottom: 30px;
line-height: 1.5;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.grid-item {
background: #fafafa;
border: 1px solid #e2e2e2;
border-radius: 8px;
padding: 15px 20px;
}
.grid-item.full {
grid-column: 1 / -1;
}
.label {
font-weight: 600;
font-size: 0.9em;
color: #555;
font-size: 1.45em;
font-weight: 700;
margin-bottom: 6px;
}
.value {
font-size: 1.1em;
color: #222;
}
.footer {
.page-subtitle {
text-align: center;
font-size: 0.9em;
color: #888;
margin-top: 30px;
font-size: 0.82em;
color: #999;
margin-bottom: 32px;
letter-spacing: 0.01em;
}
/* Button styling */
.actions {
.plans-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
align-items: flex-start;
}
.plan-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
padding: 26px 22px 20px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
gap: 15px;
text-align: center;
transition:
box-shadow 0.2s,
border-color 0.2s;
}
.action-row {
.plan-card:hover {
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11);
}
.plan-card.current {
border-color: #875a7b;
box-shadow:
0 0 0 3px rgba(135, 90, 123, 0.18),
0 4px 16px rgba(135, 90, 123, 0.12);
}
.plan-name {
font-size: 1.05em;
font-weight: 700;
color: #262626;
margin-bottom: 14px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.plan-price {
font-size: 1.55em;
font-weight: 800;
color: #875a7b;
line-height: 1.1;
margin-bottom: 2px;
}
.plan-price-period {
font-size: 0.75em;
color: #aaa;
margin-bottom: 14px;
}
.plan-tagline {
font-size: 0.8em;
color: #666;
font-style: italic;
margin-bottom: 16px;
line-height: 1.5;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.action-btn {
background-color: #875A7B; /* Odoo purple */
color: white;
.plan-btn {
background-color: #875a7b;
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 22px;
font-size: 15px;
border-radius: 7px;
padding: 9px 0;
font-size: 0.88em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
min-width: 180px;
width: 100%;
margin-bottom: 18px;
transition:
background-color 0.2s,
transform 0.1s;
letter-spacing: 0.01em;
}
.action-btn:hover {
.plan-btn:hover:not(:disabled) {
background-color: #744e6a;
transform: translateY(-1px);
}
.action-btn.secondary {
background-color: #6c757d;
}
.action-btn.secondary:hover {
background-color: #5a636a;
}
.action-btn:disabled {
background-color: #ccc;
.plan-btn:disabled {
background-color: #bdbdbd;
color: #fff;
cursor: not-allowed;
transform: none;
}
.plan-btn.is-current-plan:disabled {
background-color: #6d9f71;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
.plan-features li {
font-size: 0.78em;
color: #555;
padding: 5px 0 5px 18px;
border-top: 1px solid #f2f2f2;
position: relative;
line-height: 1.4;
}
.plan-features li:first-child {
border-top: none;
}
.plan-features li::before {
content: "";
position: absolute;
left: 0;
color: #875a7b;
font-weight: 700;
}
.plan-guarantee {
font-size: 0.68em;
color: #bbb;
margin-top: 14px;
font-style: italic;
min-height: 18px;
}
.footer-uuid {
text-align: center;
font-size: 0.75em;
color: #ccc;
margin-top: 40px;
user-select: all;
}
</style>
</head>
<body>
<div class="summary-container">
<h2>Check and Upgrade Your Plan</h2>
<div class="contract-name" id="contractName">Loading...</div>
<div class="subtitle">
Choose an upgrade. With this upgade you only pay for the <b>remaining days</b> of your current contract. Due to technical reasons, the <b>total price</b> will be included in the payment link sent to your email. If you dont want to upgrade, simply dont complete the payment. Current yearly prices are listed on our homepage, and new features will apply when you extend your contract next time.
</head>
<body>
<div class="page-title">Your Plan, Your Timing: Upgrade Anytime</div>
<div class="page-subtitle">Instant setup · satisfied or reimbursed</div>
<div class="plans-row" id="plansRow">
<!-- ── Trial ─────────────────────────────────────────────────── -->
<div class="plan-card" id="card-trial">
<div class="plan-name">Trial</div>
<div class="plan-price">4 weeks free</div>
<div class="plan-price-period">&nbsp;</div>
<div class="plan-tagline">
"I want to see what ODOO can do for my company."
</div>
<button
class="plan-btn is-current-plan"
id="btn-trial"
disabled
>
Your Plan
</button>
<ul class="plan-features">
<li>ODOO CE hosting</li>
<li>0 Backup Slots</li>
<li>No Domain Mapping</li>
<li>No module installation</li>
</ul>
<div class="plan-guarantee">&nbsp;</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="label">GIT</div>
<div class="value" id="gitValue">Loading...</div>
<!-- ── Side Hustle ───────────────────────────────────────────── -->
<div class="plan-card" id="card-sidehustle">
<div class="plan-name">Side Hustle</div>
<div class="plan-price">$214.00</div>
<div class="plan-price-period">/ year</div>
<div class="plan-tagline">
"ODOO Standard .. that is all my business needs"
</div>
<div class="grid-item">
<div class="label">Domains</div>
<div class="value" id="domainsValue">Loading...</div>
</div>
<div class="grid-item">
<div class="label">Backup Slots</div>
<div class="value" id="backupValue">Loading...</div>
</div>
<div class="grid-item">
<div class="label">Workers</div>
<div class="value" id="workersValue">Loading...</div>
</div>
<div class="grid-item full">
<div class="label">HDD (MB)</div>
<div class="value" id="hddValue">Loading...</div>
</div>
<div class="grid-item full">
<div class="label">Expires</div>
<div class="value" id="expiresValue">Loading...</div>
<button class="plan-btn" id="btn-sidehustle">Buy Now</button>
<ul class="plan-features">
<li>ODOO CE hosting</li>
<li>1 Backup Slot</li>
<li>1 Domain Mapping, SSL Cert</li>
<li>No module installation</li>
</ul>
<div class="plan-guarantee">
Instant setup, satisfied or reimbursed.
</div>
</div>
<!-- Buttons -->
<div class="actions">
<div class="action-row">
<button class="action-btn" id="upgradeRiseBtn">Upgrade to "On the Rise"</button>
<button class="action-btn" id="upgradePowerhouseBtn">Upgrade to "Powerhouse"</button>
<!-- ── On the Rise ───────────────────────────────────────────── -->
<div class="plan-card" id="card-ontherise">
<div class="plan-name">On the Rise</div>
<div class="plan-price">$395.00</div>
<div class="plan-price-period">/ year</div>
<div class="plan-tagline">
"I need some modules and professional reports"
</div>
<div class="action-row">
<button class="action-btn secondary" id="addDomainBtn">Add a Domain</button>
<button class="action-btn secondary" id="addBackupsBtn">Add 5 Backup Slots</button>
<button class="plan-btn" id="btn-ontherise">Buy Now</button>
<ul class="plan-features">
<li>ODOO CE hosting</li>
<li>4 Backup Slots</li>
<li>3 Domain Mappings, SSL Cert</li>
<li>Module installation via git</li>
</ul>
<div class="plan-guarantee">
Instant setup, satisfied or reimbursed.
</div>
</div>
<div class="footer" id="uuidDisplay">
UUID: <span id="uuidText">Loading...</span>
<!-- ── Powerhouse ────────────────────────────────────────────── -->
<div class="plan-card" id="card-powerhouse">
<div class="plan-name">Powerhouse</div>
<div class="plan-price">$595.00</div>
<div class="plan-price-period">/ year</div>
<div class="plan-tagline">
"ODOO Enterprise is a must have!"
</div>
<button class="plan-btn" id="btn-powerhouse">Buy Now</button>
<ul class="plan-features">
<li>All of On the Rise</li>
<li>ODOO Enterprise Ready</li>
<li>2 Workers</li>
</ul>
<div class="plan-guarantee">
Instant setup, satisfied or reimbursed.
</div>
</div>
<!-- ── Empire ────────────────────────────────────────────────── -->
<div class="plan-card" id="card-empire">
<div class="plan-name">Empire</div>
<div class="plan-price">&gt;$950.00</div>
<div class="plan-price-period">/ year</div>
<div class="plan-tagline">"My house! My Horse! My Server!"</div>
<button class="plan-btn" id="btn-empire">Contact Us</button>
<ul class="plan-features">
<li>Our service on your server</li>
<li>All modules &amp; features</li>
<li>Unlimited customization</li>
</ul>
<div class="plan-guarantee">
Instant setup, satisfied or reimbursed.
</div>
</div>
</div>
<div class="footer-uuid">UUID: <span id="uuidText"></span></div>
<script>
const webhookUrl = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
const webhook_buy = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1";
// ── Webhooks ─────────────────────────────────────────────────────────────
const getContract_Webhook =
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
const buy_webhook =
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1";
// ── Plan hierarchy (index = tier, lower = cheaper) ────────────────────────
const PLAN_ORDER = [
"Trial",
"Side Hustle",
"On the Rise",
"Powerhouse",
"Empire",
];
const PLAN_META = {
Trial: {
cardId: "card-trial",
btnId: "btn-trial",
productId: null,
},
"Side Hustle": {
cardId: "card-sidehustle",
btnId: "btn-sidehustle",
productId: "sidehustle",
},
"On the Rise": {
cardId: "card-ontherise",
btnId: "btn-ontherise",
productId: "ontherise",
},
Powerhouse: {
cardId: "card-powerhouse",
btnId: "btn-powerhouse",
productId: "powerhouse",
},
Empire: {
cardId: "card-empire",
btnId: "btn-empire",
productId: null,
},
};
// ── UUID from URL ─────────────────────────────────────────────────────────
const params = new URLSearchParams(window.location.search);
const uuid = params.get("uuid");
const uuid = params.get("uuid") || "";
document.getElementById("uuidText").textContent = uuid || "";
async function loadData() {
// ── Buy handler ───────────────────────────────────────────────────────────
async function buyProduct(productId) {
if (!uuid) {
alert("Missing uuid parameter in URL");
alert("Missing uuid parameter in URL.");
return;
}
document.getElementById("uuidText").textContent = uuid;
try {
const res = await fetch(webhookUrl, {
const res = await fetch(buy_webhook, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ uuid })
body: JSON.stringify({ uuid, product_id: productId }),
});
if (!res.ok) throw new Error("Failed to fetch data");
const data = await res.json();
document.getElementById("gitValue").textContent = data.git ? "Enabled" : "Disabled";
document.getElementById("domainsValue").textContent = data.domains || "-";
document.getElementById("backupValue").textContent = data.backupSlots || "-";
document.getElementById("workersValue").textContent = data.workers || "-";
document.getElementById("hddValue").textContent = data.hdd ? `${data.hdd} MB` : "-";
document.getElementById("expiresValue").textContent = data.expires || "-";
document.getElementById("contractName").textContent = data.contract_name || "-";
// Disable buttons based on contract_name
if (data.contract_name === "On the Rise") {
document.getElementById("upgradeRiseBtn").disabled = true;
} else if (data.contract_name === "Powerhouse") {
document.getElementById("upgradeRiseBtn").disabled = true;
document.getElementById("upgradePowerhouseBtn").disabled = true;
}
} catch (err) {
console.error(err);
alert("Error loading data.");
}
}
async function buyProduct(product_id) {
if (!uuid) return;
try {
const res = await fetch(webhook_buy, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ uuid, product_id })
});
if (!res.ok) throw new Error("Failed to send purchase request");
if (!res.ok) throw new Error("HTTP " + res.status);
document.body.innerHTML = `
<div style="text-align:center;padding:80px;background:#fff;border-radius:12px;max-width:700px;margin:auto;box-shadow:0 4px 12px rgba(0,0,0,0.1);">
<h2>✅ Your request has been sent</h2>
<p>Please check your email for confirmation.</p>
</div>
`;
<div style="text-align:center;padding:80px 20px;background:#fff;border-radius:14px;
max-width:560px;margin:60px auto;box-shadow:0 4px 20px rgba(0,0,0,0.1);
font-family:'Inter','Segoe UI',Arial,sans-serif;">
<div style="font-size:3em;margin-bottom:16px;">&#x2705;</div>
<h2 style="color:#262626;font-weight:700;margin-bottom:10px;">Request sent!</h2>
<p style="color:#777;line-height:1.6;">
Please check your email for the payment link and confirmation.<br>
New features will be active as soon as the payment is complete.
</p>
</div>`;
} catch (err) {
console.error(err);
alert("Error sending request.");
alert(
"Something went wrong. Please try again or contact support.",
);
}
}
document.getElementById("upgradeRiseBtn").addEventListener("click", () => buyProduct("ontherise"));
document.getElementById("upgradePowerhouseBtn").addEventListener("click", () => buyProduct("powerhouse"));
document.getElementById("addDomainBtn").addEventListener("click", () => buyProduct("1-domain"));
document.getElementById("addBackupsBtn").addEventListener("click", () => buyProduct("5-backup"));
// ── Wire buy buttons ──────────────────────────────────────────────────────
document
.getElementById("btn-sidehustle")
.addEventListener("click", () => buyProduct("sidehustle"));
document
.getElementById("btn-ontherise")
.addEventListener("click", () => buyProduct("ontherise"));
document
.getElementById("btn-powerhouse")
.addEventListener("click", () => buyProduct("powerhouse"));
document
.getElementById("btn-empire")
.addEventListener("click", () => {
window.open("https://odoo4projects.com", "_blank");
});
loadData();
// ── Apply current-plan state ──────────────────────────────────────────────
function applyPlanState(contractName) {
const currentIdx = PLAN_ORDER.indexOf(contractName);
if (currentIdx === -1) return; // unknown plan leave defaults
PLAN_ORDER.forEach(function (plan, idx) {
var meta = PLAN_META[plan];
if (!meta) return;
var btn = document.getElementById(meta.btnId);
var card = document.getElementById(meta.cardId);
if (!btn || !card) return;
if (idx === currentIdx) {
// Current plan
card.classList.add("current");
btn.textContent = "Your Plan";
btn.disabled = true;
btn.classList.add("is-current-plan");
} else if (idx < currentIdx) {
// Lower tier no downgrade
btn.textContent = "Your Plan";
btn.disabled = true;
btn.classList.remove("is-current-plan");
}
// Higher tiers: leave as "Buy Now" / "Contact Us" (enabled)
});
}
// ── Load contract from webhook ────────────────────────────────────────────
async function loadContract() {
if (!uuid) return;
try {
const res = await fetch(getContract_Webhook, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ uuid }),
});
if (!res.ok) throw new Error("HTTP " + res.status);
const payload = await res.json();
// Webhook returns: [{ "expires": "YYYY-MM-DD", "contractName": "Trial" }]
const record = Array.isArray(payload)
? payload[0]
: payload;
if (record && record.contractName) {
applyPlanState(record.contractName);
}
} catch (err) {
console.error("Could not load contract data:", err);
// Graceful degradation: page remains usable with default button states
}
}
loadContract();
</script>
</body>
</body>
</html>