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

perf(bootcamp): fix CLS/LCP + a11y on EN/DE/ES; add the missing footer-form handler

Browse Source 
PageSpeed pass on /odoo-erp-automation-bootcamp/ (EN + DE + ES):

- CLS: /style.css was deferred via media="print" onload=... → unstyled first paint
  shifted BODY 0.31 (live CLS 0.326). Now a normal <link rel="stylesheet">; the two
  hero webp files are preloaded (fetchpriority=high) by viewport.
- a11y: footer <h4> → <h3> (heading-order), a lighter brass + underline for links
  inside on-dark notes (color-contrast, link-in-text-block), .fcopy 3.2:1 → 5.17:1.
- best-practices: the footer contact forms and the waiting-list form now post to the
  CRM webhook instead of action="mailto:", which Lighthouse flags as an insecure
  request (is-on-https 0 → 1). No Google Ads tag on these pages (no consent gate).
- regression fix: these pages do NOT load /script.js, so after the action change the
  footer form had no JS handler and a submit navigated the visitor to the webhook's raw
  JSON reply. static/bootcamp-waitlist.js now carries a footer-form handler mirroring
  /script.js one-for-one (same webhook, payload { email, requirements, area:'message' }
  in UTM.inject, success/failure behaviour); its two strings are read from the form's
  own data-ok / data-err attributes so each language keeps its own text. ENDPOINT
  hoisted to module scope so both handlers share it.
- no-JS path: a <noscript> footer line with support@ODOO4projects.com as a plain
  mailto link. Verified it does not re-trigger is-on-https (unlike a mailto FORM action).

Guards held: Buy forms still post product_id 17; exactly one [data-bc-seats];
waitlist still posts area:'message'; plausible snippet present; competitor QC exit 0.
This commit is contained in:
webmaster committed 2026-11-02 16:07:20 +00:00
1 parent bc942cdb7c
commit 2aa9b19c3c
4 files changed
+203 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

odoo-erp-automation-bootcamp/index.html
+46 -10
View File
@@ -31,8 +31,9 @@
onload="this.media='all'"
/>
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap" /></noscript>
<link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/style.css" /></noscript>
<link rel="preload" as="image" href="/images/hero/bootcamp-hero-mobile-900.webp" media="(max-width: 640px)" fetchpriority="high" />
<link rel="preload" as="image" href="/images/hero/bootcamp-hero-desktop-1920.webp" media="(min-width: 641px)" fetchpriority="high" />
<link rel="stylesheet" href="/style.css" />
<style>
/* ---- ODOO ERP Automation Bootcamp landing page (page-scoped; additive) ---- */
.bc-sr-only {
@@ -231,7 +232,7 @@
border-radius: var(--radius-lg);
box-shadow: var(--shadow-rest);
padding: 1.4rem 1.4rem 1.4rem 3.4rem;
transition: box-shadow 0.25s, transform 0.25s;
transition: transform 0.25s; /* box-shadow kept, not transitioned (non-composited) */
}
.bc-lessons li:hover {
box-shadow: var(--shadow-hover);
@@ -321,7 +322,7 @@
.bc-schedule dt {
font-family: Marcellus, Georgia, serif;
font-size: 0.92rem;
color: var(--brass-deep);
color: #876c1e; /* 4.68:1 on --ivory (was --brass-deep 4.49:1) */
}
.bc-schedule dd {
margin: 0;
@@ -531,6 +532,38 @@
color: var(--wl-error);
}
/* --- 2026-11-02 PageSpeed pass (page-scoped, additive) ---------------------
1. The footer <h4>s became <h3>s so the heading order descends after the last
section h2 (a11y "heading-order"); these rules keep their look identical to
the shared .footer h4 in /style.css.
2. A link inside an on-dark note is the lighter brass (7.15:1 on midnight,
A11y "color-contrast") and underlined, so it is distinguishable without
colour (A11y "link-in-text-block"). */
.footer h3 {
font-family: Marcellus, Georgia, serif;
color: #fff;
margin-bottom: 0.8rem;
font-size: 1rem;
letter-spacing: 0.03em;
}
.bc-note.on-dark a {
color: var(--brass);
text-decoration: underline;
}
/* the footer copyright line at .35 alpha was 3.2:1 on midnight */
.footer .fcopy {
color: rgba(255, 255, 255, 0.5); /* 5.17:1 */
}
/* no-JS footer fallback (rendered only when JavaScript is off) */
.footer .bc-noscript {
margin-top: 0.6rem;
font-size: 0.85rem;
}
.footer .bc-noscript a {
color: var(--brass);
text-decoration: underline;
}
</style>
<script type="application/ld+json">
{
@@ -655,6 +688,7 @@
</div>
<!-- Hero -->
<main>
<section class="hero bc-hero">
<div class="container">
<p class="hero-kicker">Q1 2027 &middot; 10 LIVE SESSIONS &middot; OLIVER ARNOLD</p>
@@ -894,7 +928,7 @@
<div class="bc-waitlist">
<h3 class="bc-wl-title">Another timezone or language?</h3>
<p class="bc-wl-lead">The January cohort runs Thursdays 18:00&ndash;19:00 Central Time, in English. If you need a different time or another language, join the waiting list and we will write to you when a cohort that fits opens.</p>
<form id="bcWaitlistForm" class="bc-wl-form" action="mailto:hello@odoo4projects.com" method="post" enctype="text/plain">
<form id="bcWaitlistForm" class="bc-wl-form" action="https://n8n.odoo4projects.com/webhook/ODOO4projects/crm" method="post" enctype="text/plain">
<label class="bc-sr-only" for="bcWaitlistEmail">Your email address</label>
<input type="email" id="bcWaitlistEmail" name="email" placeholder="Your email address" required />
<label class="bc-sr-only" for="bcWaitlistComment">Which timezone or language you need</label>
@@ -953,6 +987,7 @@
</div>
</div>
</section>
</main>
<!-- Footer (copied from index.html; icon-font glyphs replaced with inline SVG so the page
carries no external icon dependency) -->
@@ -960,7 +995,7 @@
<div class="container">
<div class="fgrid">
<div>
<h4>Useful Links</h4>
<h3>Useful Links</h3>
<ul>
<li><a href="/odoo-erp-automation-bootcamp/">ODOO Bootcamp</a></li>
<li><a href="/odoo-hosting-2027.html">ODOO Hosting in 2027</a></li>
@@ -969,7 +1004,7 @@
</ul>
</div>
<div>
<h4>Partners</h4>
<h3>Partners</h3>
<div class="partner-list">
<a href="https://oc-guy.com" target="_blank" rel="noopener" class="partner-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c9a227" stroke-width="2" aria-hidden="true"><path d="M20 7h-9M14 17H5M20 7l-4-4M20 7l-4 4M4 17l4 4M4 17l4-4" /></svg> OC Guy</a>
<a href="https://oca-py.org" target="_blank" rel="noopener" class="partner-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#c9a227" stroke-width="2" aria-hidden="true"><path d="M20 7h-9M14 17H5M20 7l-4-4M20 7l-4 4M4 17l4 4M4 17l4-4" /></svg> OCA Paraguay</a>
@@ -977,17 +1012,17 @@
</div>
</div>
<div class="fcol-desc">
<h4>About us</h4>
<h3>About us</h3>
<p>We build smart, scalable business solutions by combining the <strong>stability</strong> of Odoo ERP with the <strong>power</strong> of AI Agents and N8N automations.</p>
<p>From streamlined sales to global rollouts, our <strong>lean, eco-friendly</strong> approach helps businesses cut costs, boost efficiency, and grow without limits.</p>
</div>
<div>
<h4>Follow us on</h4>
<h3>Follow us on</h3>
<div class="social">
<a href="https://www.linkedin.com/company/odoo4projects/" target="_blank" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.75V21h-4v-5.5c0-1.31-.02-3-1.9-3-1.9 0-2.19 1.42-2.19 2.9V21H9z" /></svg></a>
<a href="https://www.youtube.com/@ODOO4projects" target="_blank" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23 12s0-3.2-.41-4.73a2.5 2.5 0 0 0-1.76-1.77C19.3 5.1 12 5.1 12 5.1s-7.3 0-8.83.4A2.5 2.5 0 0 0 1.4 7.27C1 8.8 1 12 1 12s0 3.2.41 4.73a2.5 2.5 0 0 0 1.76 1.77c1.53.4 8.83.4 8.83.4s7.3 0 8.83-.4a2.5 2.5 0 0 0 1.76-1.77C23 15.2 23 12 23 12zM9.75 15.02V8.98L15.5 12z" /></svg></a>
</div>
<form class="footer-contact-form" id="footerContactForm" action="mailto:hello@odoo4projects.com" method="post" enctype="text/plain">
<form class="footer-contact-form" id="footerContactForm" action="https://n8n.odoo4projects.com/webhook/ODOO4projects/crm" method="post" enctype="text/plain" data-ok="Thanks! We'll get back to you shortly." data-err="Something went wrong. Please try again.">
<label class="bc-sr-only" for="footerContactEmail">Your email address</label>
<input type="email" id="footerContactEmail" name="email" placeholder="Your email address" required />
<div class="footer-textarea-wrap">
@@ -997,6 +1032,7 @@
</div>
<div class="footer-form-status" id="footerFormStatus" role="status"></div>
</form>
<noscript><p class="bc-noscript">JavaScript is off. Email us directly at <a href="mailto:support@ODOO4projects.com">support@ODOO4projects.com</a>.</p></noscript>
</div>
</div>
<div class="fcopy">Copyright &copy; ODOO4projects LLC</div>