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

de/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>
@@ -876,7 +910,7 @@
<div class="bc-waitlist">
<h3 class="bc-wl-title">Andere Zeitzone oder andere Sprache?</h3>
<p class="bc-wl-lead">Der Januar-Kurs läuft donnerstags 18:00&ndash;19:00 US-Zentralzeit, auf Englisch. Wenn Sie eine andere Uhrzeit oder eine andere Sprache brauchen, tragen Sie sich in die Warteliste ein. Wir schreiben Ihnen, sobald ein passender Kurs startet.</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">Ihre E-Mail-Adresse</label>
<input type="email" id="bcWaitlistEmail" name="email" placeholder="Ihre E-Mail-Adresse" required />
<label class="bc-sr-only" for="bcWaitlistComment">Welche Zeitzone oder Sprache Sie brauchen</label>
@@ -933,6 +967,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) -->
@@ -940,7 +975,7 @@
<div class="container">
<div class="fgrid">
<div>
<h4>Nützliche Links</h4>
<h3>Nützliche Links</h3>
<ul>
<li><a href="/de/odoo-erp-automation-bootcamp/">ODOO Bootcamp</a></li>
<li><a href="/de/odoo-hosting-2027.html">ODOO Hosting in 2027</a></li>
@@ -949,7 +984,7 @@
</ul>
</div>
<div>
<h4>Partner</h4>
<h3>Partner</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>
@@ -957,17 +992,17 @@
</div>
</div>
<div class="fcol-desc">
<h4>Über uns</h4>
<h3>Über uns</h3>
<p>Wir bauen clevere, skalierbare Geschäftslösungen: die <strong>Stabilität</strong> von Odoo ERP trifft auf die <strong>Kraft</strong> von KI-Agenten und N8N-Automatisierungen.</p>
<p>Von schlanken Vertriebsprozessen bis zum globalen Rollout: Unser <strong>schlanker, umweltfreundlicher</strong> Ansatz senkt Kosten, steigert die Effizienz und lässt Unternehmen ohne Grenzen wachsen.</p>
</div>
<div>
<h4>Folgen Sie uns</h4>
<h3>Folgen Sie uns</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="Danke! Wir melden uns in Kürze bei Ihnen." data-err="Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.">
<label class="bc-sr-only" for="footerContactEmail">Ihre E-Mail-Adresse</label>
<input type="email" id="footerContactEmail" name="email" placeholder="Ihre E-Mail-Adresse" required />
<div class="footer-textarea-wrap">
@@ -977,6 +1012,7 @@
</div>
<div class="footer-form-status" id="footerFormStatus" role="status"></div>
</form>
<noscript><p class="bc-noscript">JavaScript ist deaktiviert. Schreiben Sie uns direkt an <a href="mailto:support@ODOO4projects.com">support@ODOO4projects.com</a>.</p></noscript>
</div>
</div>
<div class="fcopy">Copyright &copy; ODOO4projects LLC</div>