248 lines
7.0 KiB
HTML
248 lines
7.0 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: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="summary-container">
|
||
<h2>Check and Upgrade Your Plan</h2>
|
||
<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>
|
||
// Configuration
|
||
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 || "-";
|
||
|
||
} 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.");
|
||
}
|
||
}
|
||
|
||
// Button event listeners with product_id mapping
|
||
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>
|
||
|