Add live OCA module status, Pixabay photography, new email

- new section: Top OCA modules, module / area / 19.0 / 20.0 status,
  rows rendered from the n8n webhook at
  n8n.odoo4projects.com/webhook/oc-guy/modules, with the last fetched
  snapshot in the markup as a no-JS fallback
- photography swapped from archival maps to Pixabay photos (archive
  aisle, cardboard boxes, old books, workshop tools, warehouse)
- featured module is now a full-bleed dark spread with the warehouse shot
- contact address is oliver@oc-guy.com throughout
- credits point at Pixabay and its Content License

css/site.css

@@ -654,3 +654,88 @@ html.js [data-rv].rv-in { opacity: 1; transform: none; }
   .nav-cta { min-height: 44px; }
   .foot-links { gap: 10px 18px; }
 }
+
+/* ---------- featured module as a dark spread ---------- */
+.feature {
+  background: var(--ink);
+  color: #f4f2ee;
+  border: 0;
+  grid-template-columns: 5fr 7fr;
+  align-items: stretch;
+}
+.feature-photo { margin: 0; }
+.feature-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 45%; }
+.feature-body p { color: rgba(255, 255, 255, 0.82); }
+.plate-kicker { color: rgba(255, 255, 255, 0.58); }
+.feature-name { color: #fff; }
+.benefits { border-top-color: rgba(255, 255, 255, 0.25); }
+.benefits li { border-bottom-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.66); }
+.benefits strong { color: #fff; }
+.feature-note { color: rgba(255, 255, 255, 0.6); }
+.feature .btn { background: #f4f2ee; border-color: #f4f2ee; color: var(--ink); }
+.feature .btn:hover, .feature .btn:focus-visible { background: transparent; color: #f4f2ee; }
+
+@media (max-width: 900px) {
+  .feature { grid-template-columns: 1fr; }
+  .feature-photo img { min-height: 0; height: clamp(200px, 38vw, 300px); }
+}
+
+/* ---------- OCA module status table ---------- */
+.oca-table { width: 100%; border-collapse: collapse; font-size: var(--step-sm); }
+.oca-table thead th {
+  padding: 0 0 10px;
+  text-align: left;
+  font-size: var(--step-xs);
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--ink);
+}
+.oca-table thead th:nth-child(1) { width: 54%; }
+.oca-table thead th:nth-child(2) { width: 26%; }
+.oca-table thead th:nth-child(3),
+.oca-table thead th:nth-child(4) { width: 74px; text-align: center; }
+.oca-table tbody td { padding: 13px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
+.oca-name a {
+  font-family: var(--serif);
+  font-size: var(--step-h3);
+  font-weight: 500;
+  line-height: 1.2;
+  text-decoration: none;
+}
+.oca-name a:hover, .oca-name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
+.oca-area {
+  font-size: var(--step-xs);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.oca-status { text-align: center; }
+.mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--rule-strong);
+  font-size: 12px;
+  line-height: 1;
+  color: var(--muted);
+}
+.mark.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
+.oca-note {
+  margin: 14px 0 0;
+  max-width: 48em;
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: var(--step-sm);
+  color: var(--muted);
+}
+
+@media (max-width: 600px) {
+  .oca-table thead th:nth-child(2),
+  .oca-table .oca-area { display: none; }
+  .oca-name a { font-size: var(--step-body); }
+  .oca-table tbody td { padding: 12px 0; }
+}

index.html

@@ -39,12 +39,12 @@
       <ul class="side-list">
         <li><span class="side-kicker">Written by</span> Oliver Arnold, 安雷威</li>
         <li><span class="side-kicker">Since</span> 2024, in German, English and Spanish</li>
-        <li><span class="side-kicker">Contact</span> <a href="mailto:o.arnold@projektbox.de">o.arnold@projektbox.de</a></li>
+        <li><span class="side-kicker">Contact</span> <a href="mailto:oliver@oc-guy.com">oliver@oc-guy.com</a></li>
       </ul>
     </div>
 
     <figure class="lead-media">
-      <img src="assets/a-general-map-of-the-world-or.jpg" alt="A 1794 wall map of the world engraved in two hemispheres, with marginal notes on voyages and discoveries" width="1800" height="1515">
+      <img src="assets/hero-aisle.jpg" alt="A long aisle of shelves in an archive, lit from above, running to a vanishing point" width="1280" height="853">
     </figure>
 
     <div class="lead-caption">
@@ -65,7 +65,7 @@
 
     <div class="cards">
       <a class="card" href="https://www.odoo.com/documentation" target="_blank" rel="noopener">
-        <img class="card-img" src="assets/world-map-1689.jpg" alt="A 1689 engraved world map in two hemispheres" width="1400" height="1208">
+        <img class="card-img" src="assets/tip-install.jpg" alt="Two plain cardboard boxes stacked on a wooden table" width="1000" height="649">
         <span class="card-cat">Install</span>
         <h3>Run Odoo from Docker Compose, not from source</h3>
         <p class="card-desc">Two containers, one file, a volume you can copy. The shortest path to a server you
@@ -74,7 +74,7 @@
       </a>
 
       <a class="card" href="https://www.odoo.com/documentation" target="_blank" rel="noopener">
-        <img class="card-img" src="assets/a-printer-s-workshop-on-the-left.jpg" alt="An engraved seventeenth-century printer's workshop with a hand press and workmen setting type" width="900" height="312">
+        <img class="card-img" src="assets/tip-backup.jpg" alt="Rows of old book spines lined up on a shelf" width="1000" height="666">
         <span class="card-cat">Backup</span>
         <h3>Dump the database nightly and restore it monthly</h3>
         <p class="card-desc">A backup you have never restored is a hope, not a backup. One pg_dump, one cron line,
@@ -83,7 +83,7 @@
       </a>
 
       <a class="card" href="https://github.com/OCA" target="_blank" rel="noopener">
-        <img class="card-img" src="assets/geography-four-types-of-globe-engraving.jpg" alt="An engraving of four kinds of globe on stands" width="1000" height="1629">
+        <img class="card-img" src="assets/tip-extend.jpg" alt="Hand tools, a clamp and a hammer on a workbench" width="1000" height="666">
         <span class="card-cat">Extend</span>
         <h3>Take an OCA module before you write your own</h3>
         <p class="card-desc">Someone already solved your problem and maintains it for every series. Reading their
@@ -100,18 +100,12 @@
     </header>
 
     <div class="feature">
-      <div class="feature-plate">
+      <figure class="feature-photo">
-        <p class="plate-kicker">Odoo Community · LGPL-3</p>
+        <img src="assets/module-inventory.jpg" alt="Steel shelving in a warehouse, stock and pallets stacked to the ceiling" width="1600" height="1067">
-        <p class="plate-name">Inventory</p>
+      </figure>
-        <ul class="plate-facts">
-          <li><span>Series</span> 18.0</li>
-          <li><span>Depends on</span> Product, UoM</li>
-          <li><span>Install</span> Apps → Inventory</li>
-        </ul>
-        <p class="plate-note">Module plate: the facts above come from the module manifest, not from a vendor page.</p>
-      </div>
 
       <div class="feature-body">
+        <p class="plate-kicker">Odoo Community · LGPL-3 · series 18.0</p>
         <h3 class="feature-name">Inventory, before you buy anything</h3>
         <p>One module holds what you own, where it sits and what it is worth: stock moves, reordering rules,
           lots and serial numbers, three warehouse steps if you need them, one if you do not.</p>
@@ -122,12 +116,78 @@
         </ul>
         <div class="feature-actions">
           <a class="btn" href="https://www.odoo.com/documentation/18.0/applications/inventory_and_mrp/inventory.html" target="_blank" rel="noopener">Explore module</a>
-          <span class="feature-note">Free, in the Community edition</span>
+          <span class="feature-note">Free in the Community edition · installs from Apps</span>
         </div>
       </div>
     </div>
   </section>
 
+  <section class="section oca" id="oca" aria-labelledby="oca-title">
+    <header class="section-head">
+      <span class="initial" aria-hidden="true">O</span>
+      <h2 class="section-title" id="oca-title"><span class="kicker">The latest in</span> <em>OCA modules</em></h2>
+      <a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">All OCA modules</a>
+    </header>
+
+    <table class="oca-table">
+      <caption class="sr-only">Top OCA modules, and whether each has a branch for Odoo 19.0 and 20.0</caption>
+      <thead>
+        <tr>
+          <th scope="col">Module</th>
+          <th scope="col">Area</th>
+          <th scope="col">19.0</th>
+          <th scope="col">20.0</th>
+        </tr>
+      </thead>
+      <tbody id="oca-rows">
+        <tr>
+          <td class="oca-name"><a href="https://github.com/OCA/mail/tree/18.0/mail_tracking" target="_blank" rel="noopener">Mail Tracker</a></td>
+          <td class="oca-area">Utilities</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/OCA/account-reconcile/tree/18.0/account_reconcile_oca" target="_blank" rel="noopener">Account Reconcilation</a></td>
+          <td class="oca-area">Accounting</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/OCA/bank-statement-import/tree/18.0/account_statement_import_base" target="_blank" rel="noopener">Account Statements</a></td>
+          <td class="oca-area">Accounting</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/oca/currency" target="_blank" rel="noopener">Currency Rate Update</a></td>
+          <td class="oca-area">Accounting</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/OCA/account-financial-tools/tree/18.0/account_usability" target="_blank" rel="noopener">Enable Accounting</a></td>
+          <td class="oca-area">Accounting</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/OCA/field-service" target="_blank" rel="noopener">Field Service</a></td>
+          <td class="oca-area">Field Service</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+        <tr>
+          <td class="oca-name"><a href="https://github.com/oca/queue" target="_blank" rel="noopener">Job Que</a></td>
+          <td class="oca-area">System</td>
+          <td class="oca-status"><span class="mark is-on" aria-hidden="true">✓</span><span class="sr-only">has a 19.0 branch</span></td>
+          <td class="oca-status"><span class="mark" aria-hidden="true">—</span><span class="sr-only">no 20.0 branch yet</span></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="oca-note" id="oca-note">Status read from the OCA module feed on page load. A tick means the module carries a branch for that series; a dash means it does not yet.</p>
+  </section>
+
   <section class="section" id="community" aria-labelledby="community-title">
     <header class="section-head">
       <span class="initial" aria-hidden="true">C</span>
@@ -170,7 +230,7 @@
     <div class="ask-inner">
       <h2 id="ask-title">Ask a question</h2>
       <p class="ask-lede">One question, one answer, by mail. No list, no tracking, no follow-up sequence.</p>
-      <form class="ask-form" action="mailto:o.arnold@projektbox.de" method="post" enctype="text/plain">
+      <form class="ask-form" action="mailto:oliver@oc-guy.com" method="post" enctype="text/plain">
         <label for="ask-mail">Your email</label>
         <input id="ask-mail" name="email" type="email" inputmode="email" placeholder="you@company.com" autocomplete="email" required>
         <button class="btn" type="submit">Send the question</button>
@@ -188,14 +248,13 @@
       <a href="https://www.odoo.com/documentation" target="_blank" rel="noopener">Documentation</a>
       <a href="https://github.com/OCA" target="_blank" rel="noopener">OCA modules</a>
       <a href="https://apps.odoo.com" target="_blank" rel="noopener">App store</a>
-      <a href="mailto:o.arnold@projektbox.de">Email</a>
+      <a href="mailto:oliver@oc-guy.com">Email</a>
     </nav>
   </div>
   <p class="foot-credits">
-    Pictures: <a href="https://commons.wikimedia.org/wiki/File:1794_Samuel_Dunn_Wall_Map_of_the_World_in_Hemispheres_-_Geographicus_-_World2-dunn-1794.jpg">“A General Map of the World”</a> by Thomas Kitchin, public domain;
+    Photographs from <a href="https://pixabay.com/" target="_blank" rel="noopener">Pixabay</a>, used under the
-    <a href="https://commons.wikimedia.org/wiki/File:World_Map_1689.JPG">“World Map 1689”</a> by Gerard van Schagen, public domain;
+    <a href="https://pixabay.com/service/license-summary/" target="_blank" rel="noopener">Pixabay Content License</a>:
-    <a href="https://commons.wikimedia.org/wiki/File:A_printer%27s_workshop;_on_the_left_a_printing_press,_on_the_r_Wellcome_V0023751.jpg">“A printer's workshop”</a>, CC BY 4.0;
+    archive aisle, cardboard boxes, old books, workshop tools, warehouse shelving. No attribution required; credited anyway.
-    <a href="https://commons.wikimedia.org/wiki/File:Geography;_four_types_of_globe._Engraving._Wellcome_V0025077.jpg">“Four types of globe”</a>, CC BY 4.0 — all via Wikimedia Commons.
   </p>
 </footer>
 

js/site.js

@@ -46,12 +46,78 @@
       }
       mail.removeAttribute('aria-invalid');
       var body = 'My question about Odoo Community:\n\n\n— reply to: ' + addr + '\n';
-      window.location.href = 'mailto:o.arnold@projektbox.de'
+      window.location.href = 'mailto:oliver@oc-guy.com'
         + '?subject=' + encodeURIComponent('Odoo Community question')
         + '&body=' + encodeURIComponent(body);
     });
   }
 
+  /* ---------- OCA module status, live from the n8n feed ---------- */
+  var ocaBody = document.getElementById('oca-rows');
+  var ocaNote = document.getElementById('oca-note');
+
+  function statusCell(ok, version) {
+    var td = document.createElement('td');
+    td.className = 'oca-status';
+    var mark = document.createElement('span');
+    mark.className = ok ? 'mark is-on' : 'mark';
+    mark.setAttribute('aria-hidden', 'true');
+    mark.textContent = ok ? '\u2713' : '\u2014';
+    var sr = document.createElement('span');
+    sr.className = 'sr-only';
+    sr.textContent = ok ? ' has a ' + version + ' branch' : ' no ' + version + ' branch yet';
+    td.appendChild(mark);
+    td.appendChild(sr);
+    return td;
+  }
+
+  function renderOca(rows) {
+    ocaBody.textContent = '';
+    rows.forEach(function (m) {
+      var tr = document.createElement('tr');
+
+      var name = document.createElement('td');
+      name.className = 'oca-name';
+      var a = document.createElement('a');
+      a.href = m.URL || '#';
+      a.target = '_blank';
+      a.rel = 'noopener';
+      a.textContent = m.name || 'Module';
+      name.appendChild(a);
+
+      var area = document.createElement('td');
+      area.className = 'oca-area';
+      area.textContent = m.area || '';
+
+      tr.appendChild(name);
+      tr.appendChild(area);
+      tr.appendChild(statusCell(!!m.v19, '19.0'));
+      tr.appendChild(statusCell(!!m.v20, '20.0'));
+      ocaBody.appendChild(tr);
+    });
+  }
+
+  if (ocaBody) {
+    fetch('https://n8n.odoo4projects.com/webhook/oc-guy/modules')
+      .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
+      .then(function (payload) {
+        var rows = payload && Array.isArray(payload.data) ? payload.data
+                 : (Array.isArray(payload) ? payload : null);
+        if (!rows || !rows.length) throw new Error('empty');
+        renderOca(rows);
+        if (ocaNote) {
+          ocaNote.textContent = 'Status read from the OCA module feed at '
+            + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            + '. A tick means the module carries a branch for that series; a dash means it does not yet.';
+        }
+      })
+      .catch(function () {
+        if (ocaNote) {
+          ocaNote.textContent = 'The live feed could not be reached just now; the rows above are the last snapshot.';
+        }
+      });
+  }
+
   /* ---------- which section the reader is in ---------- */
   var links = Array.prototype.slice.call(document.querySelectorAll('.nav a[href^="#"]'));
   var sections = links