270 lines
7.7 KiB
HTML
270 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Check and Upgrade 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;
|
||
}
|
||
|
||
.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 {
|
||
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;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.value {
|
||
font-size: 1.1em;
|
||
color: #222;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
color: #888;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
/* Button styling */
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 40px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.action-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-btn {
|
||
background-color: #875A7B; /* Odoo purple */
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 22px;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||
min-width: 180px;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
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;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
</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 don’t want to upgrade, simply don’t complete the payment. Current yearly prices are listed on our homepage, and new features will apply when you extend your contract next time.
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="grid-item">
|
||
<div class="label">GIT</div>
|
||
<div class="value" id="gitValue">Loading...</div>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer" id="uuidDisplay">
|
||
UUID: <span id="uuidText">Loading...</span>
|
||
</div>
|
||
</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";
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const uuid = params.get("uuid");
|
||
|
||
async function loadData() {
|
||
if (!uuid) {
|
||
alert("Missing uuid parameter in URL");
|
||
return;
|
||
}
|
||
|
||
document.getElementById("uuidText").textContent = uuid;
|
||
|
||
try {
|
||
const res = await fetch(webhookUrl, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ uuid })
|
||
});
|
||
|
||
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");
|
||
|
||
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>
|
||
`;
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert("Error sending request.");
|
||
}
|
||
}
|
||
|
||
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"));
|
||
|
||
loadData();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|