Public Access
634 lines
27 KiB
JavaScript
634 lines
27 KiB
JavaScript
var si = 0,
|
|
slides = document.querySelectorAll(".hero-slide"),
|
|
dots = document.querySelectorAll(".carousel-dot"),
|
|
t,
|
|
dir = 1,
|
|
autoStop = false,
|
|
autoInterval = 7000;
|
|
|
|
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);
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
var o = document.getElementById("spinner");
|
|
o.classList.add("hidden");
|
|
setTimeout(function () {
|
|
o.style.display = "none";
|
|
}, 500);
|
|
});
|
|
setTimeout(function () {
|
|
var o = document.getElementById("spinner");
|
|
o.classList.add("hidden");
|
|
setTimeout(function () {
|
|
o.style.display = "none";
|
|
}, 500);
|
|
}, 3000);
|
|
t = setInterval(nextSlide, autoInterval);
|
|
|
|
for (var s = 0; s < slides.length; s++) {
|
|
slides[s].addEventListener("click", function () {
|
|
autoStop = true;
|
|
clearInterval(t);
|
|
t = null;
|
|
});
|
|
}
|
|
|
|
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 →</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"' : '"') +
|
|
">«</button>";
|
|
pagHtml +=
|
|
'<button class="blog-page-btn" onclick="blogGo(' +
|
|
(blogState.currentPage - 1) +
|
|
')"' +
|
|
(blogState.currentPage <= 1 ? ' disabled"' : '"') +
|
|
">‹ 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 ›</button>";
|
|
pagHtml +=
|
|
'<button class="blog-page-btn" onclick="blogGo(' +
|
|
totalPages +
|
|
')"' +
|
|
(blogState.currentPage >= totalPages
|
|
? ' disabled"'
|
|
: '"') +
|
|
">»</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://' + 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 location dropdown */
|
|
var trialLoc = document.getElementById('trialLocation');
|
|
if (trialLoc) {
|
|
SERVERS.forEach(function(s) {
|
|
var opt = document.createElement('option');
|
|
opt.value = s.host;
|
|
opt.textContent = s.city;
|
|
trialLoc.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 form */
|
|
if (trialLoc && bestServer) {
|
|
for (var i = 0; i < trialLoc.options.length; i++) {
|
|
if (trialLoc.options[i].value === bestServer.host) {
|
|
trialLoc.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 (animated[grid.dataset.section]) return;
|
|
animated[grid.dataset.section] = true;
|
|
var items = grid.children;
|
|
gsap.fromTo(
|
|
items,
|
|
{ y: 30, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 0.7,
|
|
ease: 'power2.out',
|
|
stagger: 0.08,
|
|
overwrite: 'auto'
|
|
}
|
|
);
|
|
});
|
|
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
var grids = document.querySelectorAll(
|
|
'.features-grid, .faq-grid, .pricing-grid, .blog-grid, .biz-wizard .container'
|
|
);
|
|
grids.forEach(function (g) {
|
|
g.dataset.section = g.className || 'anon';
|
|
/* Pre-set children to hidden state so they start invisible */
|
|
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 hasHomepage = document.getElementById('bizHasHomepage').checked;
|
|
var usesOdoo = document.getElementById('bizUsesOdoo').checked;
|
|
var hasDeveloper = document.getElementById('bizHasDeveloper').checked;
|
|
|
|
submitBtn.textContent = 'Generating...';
|
|
submitBtn.disabled = true;
|
|
|
|
/* Create a hidden form to POST to the webhook and open response in new window */
|
|
var f = document.createElement('form');
|
|
f.method = 'POST';
|
|
f.action = 'https://n8n.odoo4projects.com/webhook/bring-your-business';
|
|
f.target = '_blank';
|
|
f.style.display = 'none';
|
|
|
|
var fields = {
|
|
description: description,
|
|
goals: goals,
|
|
challenges: challenges,
|
|
has_homepage: hasHomepage ? 'true' : 'false',
|
|
uses_odoo: usesOdoo ? 'true' : 'false',
|
|
has_developer: hasDeveloper ? 'true' : 'false'
|
|
};
|
|
for (var key in fields) {
|
|
var inp = document.createElement('input');
|
|
inp.type = 'hidden';
|
|
inp.name = key;
|
|
inp.value = fields[key];
|
|
f.appendChild(inp);
|
|
}
|
|
|
|
document.body.appendChild(f);
|
|
f.submit();
|
|
f.remove();
|
|
|
|
/* Show success message — download will start automatically */
|
|
form.style.display = 'none';
|
|
success.style.display = 'block';
|
|
});
|
|
})();
|