first commit ever

2026-09-07 07:49:21 +02:00
commit 0f60998ca8
18 changed files with 2568 additions and 0 deletions
@@ -0,0 +1,128 @@
+/* ==========================================================
+   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);
+      });
+    });
+  });
+
+})();