formNum/assets/layout.js

/* ==========================================================
   M. Courcelle — Labo Ordinateur
   Menubar + menu mobile + pied de page, injectés dans chaque page.
   Un seul endroit à modifier pour toutes les pages.
   ========================================================== */

(function () {

  /* ── Structure du menu ──
     Modifier ici pour ajouter une page. Les entrées sans "href"
     s'affichent en grisé (« bientôt »).                        */
  const MENU = [
    {
      label: "L'Ordinateur",
      items: [
        { label: "Labo Ordinateur",     href: "index.html", shortcut: "index" },
        { sep: true },
        { label: "Les périphériques",   href: "peripheriques.html" },
        { label: "Vocabulaire de base", href: "vocabulaire.html" }
      ]
    },
    {
      label: "Dactylographie",
      items: [ { label: "Le clavier" }, { label: "Exercices et jeux" } ]
    },
    {
      label: "Cybersécurité",
      items: [ { label: "Les mots de passe" }, { label: "Le phishing" } ]
    }
  ];

  const stripes = ['as1','as2','as3','as4','as5','as6']
    .map(c => `<div class="${c}"></div>`).join('');

  function ddItem(it) {
    if (it.sep) return '<div class="mb-dd-sep"></div>';
    const sc = it.shortcut ? `<span class="mb-dd-shortcut">${it.shortcut}</span>` : '';
    if (!it.href) {
      return `<span class="mb-dd-item dim">${it.label}<span class="mb-dd-shortcut">bientôt</span></span>`;
    }
    return `<a class="mb-dd-item" href="${it.href}">${it.label}${sc}</a>`;
  }

  const menubar = `
<div class="menubar">
  <div class="apple-stripes">${stripes}</div>
  <a class="mb-logo" href="index.html">M. Courcelle</a>
  ${MENU.map(m => `
  <div class="mb-item">
    <span class="mb-trigger">${m.label}</span>
    <div class="mb-dropdown">${m.items.map(ddItem).join('')}</div>
  </div>`).join('')}
  <button class="mb-hamburger" id="mb-hamburger" aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
  <div class="mb-right">
    <button class="mb-dyslexic-btn" id="mb-dyslexic-btn">
      <span class="mb-dy-dot"></span>Lisibilité
    </button>
  </div>
</div>

<div class="mb-mobile-menu" id="mb-mobile-menu">
  ${MENU.map(m => `
  <div class="mb-mob-section">
    <div class="mb-mob-label">${m.label}</div>
    ${m.items.filter(i => !i.sep).map(i => i.href
      ? `<a class="mb-mob-item" href="${i.href}">${i.label}</a>`
      : `<span class="mb-mob-item" style="color:var(--dim)">${i.label} — bientôt</span>`
    ).join('')}
  </div>
  <div class="mb-mob-sep"></div>`).join('')}
</div>`;

  const footer = `
<footer>
  <div class="footer-inner">
    <div>
      <div class="footer-logo">
        <span style="color:#E03A3E">M</span><span style="color:#F58220">.</span>&nbsp;<span style="color:#FDB827">C</span><span style="color:#61BB46">o</span><span style="color:#009DDC">u</span><span style="color:#963D97">r</span><span style="color:#E03A3E">c</span><span style="color:#F58220">e</span><span style="color:#FDB827">l</span><span style="color:#61BB46">l</span><span style="color:#009DDC">e</span>
      </div>
      <p class="footer-copy">© 2026 M. Courcelle — Labo Ordinateur</p>
    </div>
    <ul class="footer-links">
      <li><a href="index.html">Accueil</a></li>
      <li><a href="peripheriques.html">Les périphériques</a></li>
      <li><a href="vocabulaire.html">Vocabulaire de base</a></li>
    </ul>
  </div>
</footer>`;

  /* ── Injection ── */
  document.addEventListener('DOMContentLoaded', function () {
    document.body.insertAdjacentHTML('afterbegin', menubar);
    document.body.insertAdjacentHTML('beforeend', footer);

    // Hamburger
    const btn  = document.getElementById('mb-hamburger');
    const menu = document.getElementById('mb-mobile-menu');
    btn.addEventListener('click', function () {
      const open = menu.classList.toggle('open');
      btn.classList.toggle('open', open);
      document.body.style.overflow = open ? 'hidden' : '';
    });

    // Mode lisibilité (dyslexie)
    const dy = document.getElementById('mb-dyslexic-btn');
    if (localStorage.getItem('courcelle_lisibilite') === '1') document.body.classList.add('dyslexic');
    dy.addEventListener('click', function () {
      const on = !document.body.classList.contains('dyslexic');
      document.body.classList.toggle('dyslexic', on);
      localStorage.setItem('courcelle_lisibilite', on ? '1' : '0');
    });

    // Repli visuel pour les images pas encore en place
    document.querySelectorAll('img[data-todo]').forEach(function (img) {
      img.addEventListener('error', function () {
        const box = document.createElement('div');
        box.className = 'img-todo';
        box.innerHTML = '<strong>Image à placer</strong>'
          + '<span>' + img.getAttribute('src') + '</span>'
          + '<span>' + img.getAttribute('data-todo') + '</span>';
        img.replaceWith(box);
      });
    });
  });

})();