Files
ODOO4projects.com/script.js
T

663 lines
29 KiB
JavaScript

var si = 0,
slides = document.querySelectorAll(".hero-slide"),
dots = document.querySelectorAll(".carousel-dot"),
t,
dir = 1,
autoStop = false,
autoInterval = 7000;
if (slides.length > 0 && dots.length > 0) {
function show(i, direction) {
if (direction === undefined) return;
var current = slides[si];
var next = slides[i];
if (direction === 1) {
current.style.transform = "translateY(100%)";
current.style.opacity = "0";
current.style.zIndex = "1";
next.style.transform = "translateY(-100%)";
next.style.opacity = "0";
next.style.zIndex = "1";
requestAnimationFrame(function () {
next.style.transition =
"transform 0.5s ease, opacity 0.5s ease";
next.style.transform = "translateY(0)";
next.style.opacity = "1";
next.style.zIndex = "2";
});
} else {
current.style.transform = "translateY(-100%)";
current.style.opacity = "0";
current.style.zIndex = "1";
next.style.transform = "translateY(100%)";
next.style.opacity = "0";
next.style.zIndex = "1";
requestAnimationFrame(function () {
next.style.transition =
"transform 0.5s ease, opacity 0.5s ease";
next.style.transform = "translateY(0)";
next.style.opacity = "1";
next.style.zIndex = "2";
});
}
for (var j = 0; j < dots.length; j++) {
if (j === i) {
dots[j].classList.add("active");
} else {
dots[j].classList.remove("active");
}
}
si = i;
}
function nextSlide() {
show((si + 1) % slides.length, 1);
resetTimer();
}
function prevSlide() {
show((si - 1 + slides.length) % slides.length, -1);
resetTimer();
}
function goSlide(i) {
autoStop = true;
show(i, i > si ? 1 : -1);
clearInterval(t);
t = null;
}
function resetTimer() {
clearInterval(t);
t = setInterval(nextSlide, autoInterval);
}
t = setInterval(nextSlide, autoInterval);
for (var s = 0; s < slides.length; s++) {
slides[s].addEventListener("click", function () {
autoStop = true;
clearInterval(t);
t = null;
});
}
}
/* spinner guard */
(function() {
var sp = document.getElementById("spinner");
if (!sp) return;
sp.classList.add("hidden");
setTimeout(function() { sp.style.display = "none"; }, 500);
setTimeout(function() {
if (document.getElementById("spinner")) {
document.getElementById("spinner").classList.add("hidden");
document.getElementById("spinner").style.display = "none";
}
}, 3000);
})();
document.querySelectorAll(".tab-btn").forEach(function (b) {
b.addEventListener("click", function () {
document.querySelectorAll(".tab-btn").forEach(function (x) {
x.classList.remove("active");
});
document
.querySelectorAll(".tab-pane")
.forEach(function (p) {
p.classList.remove("active");
});
this.classList.add("active");
document
.getElementById(this.getAttribute("data-t"))
.classList.add("active");
});
});
/* ---- Order Widget ---- */
var orderPopupShown = false;
function openOrderWidget(
plan,
yearlyPrice,
isEmpire,
) {
document.getElementById("orderPanelBuy").style.display =
"block";
var widget = document.getElementById("orderWidgetOverlay");
document.getElementById("orderPlanTitle").textContent = plan;
var price = yearlyPrice;
var amountEl = document.getElementById("orderPlanPrice");
var prefix = isEmpire ? ">" : "";
amountEl.textContent = prefix + "$ " + price.toFixed(2);
document.getElementById("orderPlanPeriod").textContent = "/ year";
var couponMsg = document.getElementById("orderCouponMsg");
var yearlySave = document.getElementById("orderYearlySave");
couponMsg.style.display = "none";
yearlySave.style.display = "block";
var buyBtn = document.getElementById("orderBuyBtn");
var loc = document.getElementById("orderServerLocation").value;
buyBtn.href =
"/3/" +
price.toFixed(2) +
"/4/" +
encodeURIComponent(plan) +
"?location=" +
encodeURIComponent(loc);
widget.style.display = "flex";
orderPopupShown = true;
}
function closeOrderWidget() {
document.getElementById("orderWidgetOverlay").style.display =
"none";
}
// Escape key closes the order widget
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") {
var widget = document.getElementById(
"orderWidgetOverlay",
);
if (widget && widget.style.display === "flex") {
closeOrderWidget();
}
}
});
document
.getElementById("orderServerLocation")
.addEventListener("change", function () {
var plan =
document.getElementById("orderPlanTitle").textContent;
var priceText = document
.getElementById("orderPlanPrice")
.textContent.replace(">$", "")
.replace("$", "")
.trim();
var price = parseFloat(priceText);
var loc = this.value;
document.getElementById("orderBuyBtn").href =
"/3/" +
price.toFixed(2) +
"/4/" +
encodeURIComponent(plan) +
"?location=" +
encodeURIComponent(loc);
});
function applyCoupon() {
var input = document.getElementById("orderCouponInput");
var status = document.getElementById("orderCouponStatus");
var code = input.value.trim();
if (code.toLowerCase() === "free trial") {
status.textContent =
"\u2713 Coupon FREE TRIAL applied - 1 month free";
status.style.color = "#1a7f37";
} else {
status.textContent = "Invalid coupon code";
status.style.color = "#dc3545";
}
status.style.display = "block";
}
/* ---- Blog Module ---- */
var blogState = {
allPosts: [],
filteredPosts: [],
currentPage: 1,
perPage: 6,
searchTerm: "",
};
function formatDate(dateStr) {
var d = new Date(dateStr + "T00:00:00Z");
var months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
return (
months[d.getUTCMonth()] +
" " +
d.getUTCDate() +
", " +
d.getUTCFullYear()
);
}
function badgeClass(area) {
var m = {
"speed-run": "speed-run",
guide: "guide",
howto: "howto",
news: "news",
};
return m[area] || "default";
}
function renderBlog() {
var grid = document.getElementById("blogGrid");
var search = (blogState.searchTerm || "").toLowerCase();
blogState.filteredPosts = blogState.allPosts.filter(
function (p) {
if (!search) return true;
return (
(p.headline + " " + p.teaser)
.toLowerCase()
.indexOf(search) !== -1
);
},
);
var total = blogState.filteredPosts.length;
var totalPages = Math.max(
1,
Math.ceil(total / blogState.perPage),
);
if (blogState.currentPage > totalPages)
blogState.currentPage = totalPages;
var start = (blogState.currentPage - 1) * blogState.perPage;
var pagePosts = blogState.filteredPosts.slice(
start,
start + blogState.perPage,
);
var html = "";
if (pagePosts.length === 0) {
html =
'<div class="blog-empty">No posts match your search.</div>';
} else {
for (var i = 0; i < pagePosts.length; i++) {
var p = pagePosts[i];
var bc = badgeClass(p.area);
var agentHtml = "";
if (p.agent)
agentHtml =
'<span class="blog-agent">' +
p.agent +
"</span>";
html +=
'<div class="blog-card">' +
'<div class="blog-card-top">' +
'<span class="blog-badge blog-badge-' +
bc +
'">' +
p.area +
"</span>" +
agentHtml +
"</div>" +
'<div class="blog-date">' +
formatDate(p.date) +
"</div>" +
'<h3><a href="' +
p.link +
'">' +
p.headline +
"</a></h3>" +
'<p class="blog-teaser">' +
p.teaser +
"</p>" +
'<a href="' +
p.link +
'" class="blog-readmore">Read more &rarr;</a>' +
"</div>";
}
}
grid.innerHTML = html;
var pag = document.getElementById("blogPagination");
var pagHtml = "";
if (totalPages > 1) {
pagHtml +=
'<button class="blog-page-btn" onclick="blogGo(1)"' +
(blogState.currentPage <= 1 ? ' disabled"' : '"') +
">&laquo;</button>";
pagHtml +=
'<button class="blog-page-btn" onclick="blogGo(' +
(blogState.currentPage - 1) +
')"' +
(blogState.currentPage <= 1 ? ' disabled"' : '"') +
">&lsaquo; Prev</button>";
pagHtml +=
'<span class="blog-page-info">Page ' +
blogState.currentPage +
" of " +
totalPages +
"</span>";
pagHtml +=
'<button class="blog-page-btn" onclick="blogGo(' +
(blogState.currentPage + 1) +
')"' +
(blogState.currentPage >= totalPages
? ' disabled"'
: '"') +
">Next &rsaquo;</button>";
pagHtml +=
'<button class="blog-page-btn" onclick="blogGo(' +
totalPages +
')"' +
(blogState.currentPage >= totalPages
? ' disabled"'
: '"') +
">&raquo;</button>";
}
pag.innerHTML = pagHtml;
}
function blogGo(page) {
blogState.currentPage = page;
renderBlog();
}
/* ---- Silent ping for hero carousel ---- */
(function() {
var SERVERS = [
{ host: 'meppel.odoo4projects.com', city: 'Amsterdam' },
{ host: 'boston.odoo4projects.com', city: 'Boston' },
{ host: 'manchester.odoo4projects.com', city: 'Manchester' },
{ host: 'mumbai.odoo4projects.com', city: 'Mumbai' },
{ host: 'saopaulo.odoo4projects.com', city: 'S\u00e3o Paulo' },
{ host: 'sydney.odoo4projects.com', city: 'Sydney' }
];
var heroImages = {
'meppel.odoo4projects.com': 'images/hero/amsterdam.webp',
'boston.odoo4projects.com': 'images/hero/boston.webp',
'manchester.odoo4projects.com': 'images/hero/london.webp',
'mumbai.odoo4projects.com': 'images/hero/mumbai.webp',
'saopaulo.odoo4projects.com': 'images/hero/brazil.webp',
'sydney.odoo4projects.com': 'images/hero/sydney.webp'
};
function pingServer(host) {
return new Promise(function(resolve) {
var start = performance.now();
var img = new Image();
var timedOut = false;
var timer = setTimeout(function() {
timedOut = true; img.src = '';
resolve({ host: host, time: -1 });
}, 2000);
img.onload = function() {
if (!timedOut) { clearTimeout(timer); resolve({ host: host, time: performance.now() - start }); }
};
img.onerror = function() {
if (!timedOut) { clearTimeout(timer); resolve({ host: host, time: performance.now() - start }); }
};
img.src = 'https://api.' + host + '/favicon.ico?_=' + Date.now() + '_' + Math.random().toString(36).slice(2,6);
});
}
/* Click on a server card — slide its city into hero, no label */
var serverCards = document.querySelectorAll('.server-card');
serverCards.forEach(function(card, idx) {
card.addEventListener('click', function() {
var s = SERVERS[idx];
if (!s || !heroImages[s.host]) return;
/* Move golden frame */
serverCards.forEach(function(c) { c.classList.remove('server-best'); });
card.classList.add('server-best');
/* Slide hero bg without label */
animateHero(null, heroImages[s.host], false);
});
});
function animateHero(city, image, showLabel) {
var hero = document.querySelector('.hero');
if (!hero) return;
var bg = hero.querySelector('.hero-bg');
if (!bg) {
bg = document.createElement('div');
bg.className = 'hero-bg';
hero.insertBefore(bg, hero.firstChild);
}
var hasExisting = bg.children.length > 0;
var newEl = document.createElement('div');
newEl.className = 'hero-bg-slide';
newEl.style.backgroundImage = "url('" + image + "')";
bg.appendChild(newEl);
var tl = gsap.timeline();
gsap.set(newEl, { x: '100%' });
var label = null;
if (showLabel !== false && city) {
label = document.createElement('div');
label.className = 'hero-city-label';
label.innerHTML = 'Our <strong>' + city + '</strong> server fits your location';
hero.appendChild(label);
gsap.set(label, { x: '150%' });
}
if (hasExisting) {
var oldEl = bg.children[0];
gsap.set(oldEl, { x: '0%' });
tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0)
.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0);
if (label) {
tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
}
tl.call(function() { oldEl.remove(); });
} else {
tl.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0);
if (label) {
tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
}
}
}
/* Ping all servers, pick best, animate hero */
var results = [];
var pending = SERVERS.length;
/* Populate trial form AND pricing server location dropdowns */
var trialLoc = document.getElementById('trialLocation');
var pricingLoc = document.getElementById('pricingServerLocation');
[trialLoc, pricingLoc].forEach(function(el) {
if (el) {
SERVERS.forEach(function(s) {
var opt = document.createElement('option');
opt.value = s.host;
opt.textContent = s.city;
el.appendChild(opt);
});
}
});
SERVERS.forEach(function(s) {
pingServer(s.host).then(function(r) {
results.push(r);
pending--;
if (pending === 0) {
var valid = results.filter(function(x) { return x.time >= 0; });
if (valid.length === 0) return;
valid.sort(function(a, b) { return a.time - b.time; });
var best = valid[0];
var bestServer = SERVERS.filter(function(s) { return s.host === best.host; })[0];
/* Preselect best server in trial and pricing forms */
if (bestServer) {
[trialLoc, pricingLoc].forEach(function(el) {
if (el) {
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].value === bestServer.host) {
el.selectedIndex = i;
break;
}
}
}
});
}
if (bestServer && heroImages[best.host]) {
/* Highlight the matching server card */
var cards = document.querySelectorAll('.server-card');
for (var i = 0; i < SERVERS.length && i < cards.length; i++) {
if (SERVERS[i].host === best.host) {
cards[i].classList.add('server-best');
break;
}
}
/* Preload and animate hero */
var img = new Image();
img.onload = function() { animateHero(bestServer.city, heroImages[best.host]); };
img.src = heroImages[best.host];
}
}
});
});
/* Trial form submission */
var trialForm = document.getElementById('trialForm');
if (trialForm) {
trialForm.addEventListener('submit', function(e) {
e.preventDefault();
var email = document.getElementById('trialEmail').value.trim();
var location = trialLoc.value;
if (!email) return;
var btn = trialForm.querySelector('.btn-brass');
btn.textContent = 'Sending...';
btn.disabled = true;
fetch('https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: email, location: location })
}).then(function() {
trialForm.style.display = 'none';
document.getElementById('trialSuccess').classList.add('visible');
}).catch(function() {
btn.textContent = 'Send';
btn.disabled = false;
alert('Something went wrong. Please try again.');
});
});
}
})();
fetch("blog/index.json?_=" + Date.now())
.then(function (r) {
return r.json();
})
.then(function (data) {
blogState.allPosts = data.posts;
renderBlog();
})
.catch(function () {
document.getElementById("blogGrid").innerHTML =
'<div class="blog-empty">Could not load blog posts.</div>';
});
document
.getElementById("blogSearch")
.addEventListener("input", function () {
blogState.searchTerm = this.value;
blogState.currentPage = 1;
renderBlog();
});
/* ---- Scroll-triggered section animations ---- */
(function () {
var animated = {};
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var grid = entry.target;
if (!grid || !grid.children || grid.children.length === 0) return;
var key = grid.className || 'anon';
if (animated[key]) return;
animated[key] = true;
gsap.fromTo(
grid.children,
{ y: 30, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.7,
ease: 'power2.out',
stagger: 0.08,
overwrite: 'auto'
}
);
});
}, { threshold: 0.1 });
var grids = document.querySelectorAll(
'.features-grid, .faq-grid, .pricing-grid, .blog-grid, .biz-wizard .container'
);
grids.forEach(function (g) {
/* Pre-set children invisible so no flash even before observer fires */
if (g.children.length > 0) {
gsap.set(g.children, { y: 30, opacity: 0 });
}
observer.observe(g);
});
})();
/* ---- Business Wizard Form ---- */
(function () {
var form = document.getElementById('bizForm');
if (!form) return;
var success = document.getElementById('bizSuccess');
var submitBtn = document.getElementById('bizSubmitBtn');
form.addEventListener('submit', function (e) {
e.preventDefault();
var description = document.getElementById('bizDescription').value.trim();
var goals = document.getElementById('bizGoals').value.trim();
var challenges = document.getElementById('bizChallenges').value.trim();
if (!description || !goals || !challenges) return;
var email = document.getElementById('bizEmail').value.trim();
if (!email) return;
var hasHomepage = document.getElementById('bizHasHomepage').checked;
var usesOdoo = document.getElementById('bizUsesOdoo').checked;
var hasDeveloper = document.getElementById('bizHasDeveloper').checked;
submitBtn.textContent = 'Generating...';
submitBtn.disabled = true;
/* POST silently to webhook — the report will be emailed */
fetch('https://n8n.odoo4projects.com/webhook/bring-your-business', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: email,
description: description,
goals: goals,
challenges: challenges,
has_homepage: hasHomepage,
uses_odoo: usesOdoo,
has_developer: hasDeveloper
})
}).catch(function () { /* ignore */ });
/* Show success message — we'll email the report */
form.style.display = 'none';
success.style.display = 'block';
});
})();
/* Buy Now — POST basket via form with server location, opens checkout in new tab */
window.buyNow = function (productId) {
var locSelect = document.getElementById('pricingServerLocation');
var location = locSelect ? locSelect.value : '';
var form = document.createElement('form');
form.method = 'POST';
form.action = window.location.origin + '/shop/post_basket';
form.target = '_blank';
form.style.display = 'none';
var basket = document.createElement('input');
basket.type = 'hidden';
basket.name = 'basket';
var item = { product_id: productId, qty: 1 };
if (location) { item.info = location.replace('.odoo4projects.com', ''); }
basket.value = JSON.stringify([item]);
console.log('Buy basket:', basket.value);
form.appendChild(basket);
var clear = document.createElement('input');
clear.type = 'hidden';
clear.name = 'clear';
clear.value = '1';
form.appendChild(clear);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};