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

nice

Browse Source
This commit is contained in:
oliver
2026-06-24 08:56:31 -03:00
parent feaa5e6f62
commit a392451cc6
1 changed files with 136 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+132 -8
View File
@@ -677,6 +677,70 @@
} }
} }
/* ---- Billing Toggle ---- */
.billing-toggle-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.toggle-label {
font-size: 0.82rem;
font-weight: 500;
color: rgba(33,37,41,0.6);
cursor: pointer;
transition: color 0.2s;
user-select: none;
}
.toggle-label.active {
color: var(--dark);
font-weight: 600;
}
.toggle-label small {
display: block;
font-size: 0.62rem;
font-weight: 400;
color: #28a745;
margin-top: 0.1rem;
}
.toggle-switch {
width: 48px;
height: 26px;
background: var(--border);
border-radius: 13px;
cursor: pointer;
position: relative;
transition: background 0.25s;
flex-shrink: 0;
}
.toggle-switch.yearly {
background: var(--primary);
}
.toggle-switch .thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: left 0.25s;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch.yearly .thumb {
left: 25px;
}
.price-save {
font-size: 0.6rem;
font-weight: 700;
color: #28a745;
margin-top: 0.15rem;
}
.price-period {
color: rgba(33,37,41,0.55);
font-size: 0.68rem;
}
/* ---- Blog Section ---- */ /* ---- Blog Section ---- */
.blog-section { .blog-section {
padding: 3rem 0; padding: 3rem 0;
@@ -1238,13 +1302,21 @@
<div class="hr"></div> <div class="hr"></div>
<h2>Your Plan, Your Timing: Upgrade Anytime</h2> <h2>Your Plan, Your Timing: Upgrade Anytime</h2>
</div> </div>
<div class="billing-toggle-wrap">
<span class="toggle-label toggle-label-monthly active">Monthly</span>
<div class="toggle-switch" id="billingSwitch">
<div class="thumb"></div>
</div>
<span class="toggle-label toggle-label-yearly">Yearly <small>1 month free</small></span>
</div>
<div class="pgrid"> <div class="pgrid">
<div class="pcard"> <div class="pcard">
<div class="pcard-body"> <div class="pcard-body">
<h3>Side Hustle</h3> <h3>Side Hustle</h3>
<div class="price"> <div class="price">
<strong>$ 214.00</strong> <strong class="price-amount" data-monthly="19.62" data-yearly="214.00">$ 19.62</strong>
<small class="text-muted">/ year</small> <small class="price-period">/ month</small>
<div class="price-save" style="display:none;">1 month free</div>
</div> </div>
<p class="desc"> <p class="desc">
&ldquo;ODOO Standard .. that is all my business &ldquo;ODOO Standard .. that is all my business
@@ -1294,8 +1366,9 @@
<div class="pcard-body"> <div class="pcard-body">
<h3>On the Rise</h3> <h3>On the Rise</h3>
<div class="price"> <div class="price">
<strong>$ 395.00</strong> <strong class="price-amount" data-monthly="36.21" data-yearly="395.00">$ 36.21</strong>
<small class="text-muted">/ year</small> <small class="price-period">/ month</small>
<div class="price-save" style="display:none;">1 month free</div>
</div> </div>
<p class="desc"> <p class="desc">
&ldquo;I need some modules and professional &ldquo;I need some modules and professional
@@ -1345,8 +1418,9 @@
<div class="pcard-body"> <div class="pcard-body">
<h3>Powerhouse</h3> <h3>Powerhouse</h3>
<div class="price"> <div class="price">
<strong>$ 595.00</strong> <strong class="price-amount" data-monthly="54.54" data-yearly="595.00">$ 54.54</strong>
<small class="text-muted">/ year</small> <small class="price-period">/ month</small>
<div class="price-save" style="display:none;">1 month free</div>
</div> </div>
<p class="desc"> <p class="desc">
&ldquo;ODOO Enterprise is a must have!&rdquo; &ldquo;ODOO Enterprise is a must have!&rdquo;
@@ -1389,8 +1463,9 @@
<div class="pcard-body"> <div class="pcard-body">
<h3>Empire</h3> <h3>Empire</h3>
<div class="price"> <div class="price">
<strong>&gt;$ 950.00</strong> <strong class="price-amount" data-monthly="86.67" data-yearly="950.00">&gt;$ 86.67</strong>
<small class="text-muted">/ year</small> <small class="price-period">/ month</small>
<div class="price-save" style="display:none;">1 month free</div>
</div> </div>
<p class="desc"> <p class="desc">
&ldquo;My house! My Horse! My Server!&rdquo; &ldquo;My house! My Horse! My Server!&rdquo;
@@ -1685,6 +1760,55 @@
}); });
}); });
/* ---- Billing Toggle ---- */
var yearlyMode = false;
var biSwitch = document.getElementById("billingSwitch");
var labels = document.querySelectorAll(".toggle-label");
var monthlyLabel = document.querySelector(".toggle-label-monthly");
var yearlyLabel = document.querySelector(".toggle-label-yearly");
function updatePrices(yearly) {
var amounts = document.querySelectorAll(".price-amount");
for (var k = 0; k < amounts.length; k++) {
var el = amounts[k];
var val = yearly ? el.getAttribute("data-yearly") : el.getAttribute("data-monthly");
var prefix = el.textContent.trim().charAt(0) === ">" ? ">" : "";
el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
}
var periods = document.querySelectorAll(".price-period");
for (var k = 0; k < periods.length; k++) {
periods[k].textContent = yearly ? "/ year" : "/ month";
}
var saves = document.querySelectorAll(".price-save");
for (var k = 0; k < saves.length; k++) {
saves[k].style.display = yearly ? "block" : "none";
}
}
function setBilling(yearly) {
yearlyMode = yearly;
if (yearly) {
biSwitch.classList.add("yearly");
monthlyLabel.classList.remove("active");
yearlyLabel.classList.add("active");
} else {
biSwitch.classList.remove("yearly");
monthlyLabel.classList.add("active");
yearlyLabel.classList.remove("active");
}
updatePrices(yearly);
}
biSwitch.addEventListener("click", function () {
setBilling(!yearlyMode);
});
monthlyLabel.addEventListener("click", function () {
setBilling(false);
});
yearlyLabel.addEventListener("click", function () {
setBilling(true);
});
/* ---- Blog Module ---- */ /* ---- Blog Module ---- */
var blogState = { var blogState = {
allPosts: [], allPosts: [],