add: Nouveaux assets + adaptation script

- Nouveau assets pour la page mood - Adaptation du style css pour la page mood - Debut d'adaptation du script de suivi d'avancement a la page de cour
2026-09-21 04:50:49 +02:00
parent adb2b60b3f
commit f3ce09ab0a
9 changed files with 102 additions and 8 deletions
--- a/images/night-pingwin.png
+++ b/images/night-pingwin.png
--- a/images/pingwin.png
+++ b/images/pingwin.png
--- a/images/rebone-childish-gambino-cover.jpeg
+++ b/images/rebone-childish-gambino-cover.jpeg
--- a/images/shadow-night-pingwin.png
+++ b/images/shadow-night-pingwin.png
--- a/mood.html
+++ b/mood.html
@@ -3,7 +3,7 @@
  <head>
    <meta chartset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/mood-style.css">
    <link rel="icon" href="">
    <title>Hatmos</title>
  </head>
@@ -12,7 +12,7 @@
    <h2>Your favorite wannabe technician<h2>
    <main>
      <div>
-        <img src="images/pingwin.png"/>
+        <img src="images/night-pingwin.png"/>
      </div>
      <div>
        <audio controls>
--- a/projects/lewoapws.html
+++ b/projects/lewoapws.html
@@ -13,7 +13,7 @@
      <h2>Your favorite wannabe technician<h2>
    </header>
    <div id="chapter-progress">
-      <progress ></progress>
+      <progress ><span id="sectionTitle">Premiers circuits</span></progress>
    </div>
    <main>
      <h1>Apprendre l'Electronique avec un Arroseur de Plante Automatique</h1>
@@ -24,7 +24,7 @@
        <p>L'idee est de partir de problemes concrets lies a l'objectif d'arroser une plante et de les resoudre avec des utilisations ingenieuses des composants.</p>
        <p>Les notions de lecture de datasheet, conception de schemas electroniques puis des carte de circuits imprimes seront evoques puis approfondis au fur et a mesure des chapitres.</p>
      </div>
-      <section>
+      <section chapter="Les fondations en electronique">
        <h2>Chapitre 1</h2>
        <h3>1.1 - Un montage simple</h3>
        <p>   Tout commence par des fils, une source d'energie et un appareil.<br>
--- a/scripts/chapter-progress.js
+++ b/scripts/chapter-progress.js
@@ -0,0 +1,73 @@
+function progress_tracker(){
+  const sections = Array.from(document.querySelectorAll('section[chapter]'));
+  const fill = document.getElementById('progressFill');
+  const titleEl = document.getElementById('sectionTitle');
+  const countEl = document.getElementById('sectionCount');
+
+  let ticking = false;
+  let currentIndex = -1;
+
+  function updateProgress() {
+    const viewportH = window.innerHeight;
+    const scrollY = window.scrollY;
+
+    // 1. Trouver la section active : celle dont le haut est le plus proche
+    //    au-dessus (ou sur) le haut du viewport, mais qui n'est pas encore
+    //    entièrement passée.
+    let activeIndex = 0;
+    for (let i = 0; i < sections.length; i++) {
+      const rect = sections[i].getBoundingClientRect();
+      // Une section devient "active" dès que son haut passe sous ~35% du viewport
+      if (rect.top <= viewportH * 0.35) {
+        activeIndex = i;
+      }
+    }
+
+    // 2. Calculer la progression DANS cette section (0 à 100%)
+    const activeSection = sections[activeIndex];
+    const rect = activeSection.getBoundingClientRect();
+    const sectionHeight = activeSection.offsetHeight;
+
+    // distance défilée depuis le haut de la section
+    const scrolledIntoSection = -rect.top;
+    // on borne entre 0 et la hauteur totale de la section moins le viewport
+    // (pour atteindre 100% quand le bas de la section touche le bas de l'écran)
+    const scrollableDistance = Math.max(sectionHeight - viewportH, 1);
+    let progress = scrolledIntoSection / scrollableDistance;
+    progress = Math.min(Math.max(progress, 0), 1);
+
+    // Cas particulier : si la section est plus petite que le viewport,
+    // on considère 100% dès qu'elle est visible en haut.
+    if (sectionHeight <= viewportH) {
+      progress = scrolledIntoSection > 0 ? 1 : 0;
+    }
+
+    fill.style.width = (progress * 100).toFixed(1) + '%';
+
+    // 3. Mettre à jour le titre uniquement si la section a changé
+    //    (évite de re-déclencher la transition CSS à chaque pixel)
+    if (activeIndex !== currentIndex) {
+      currentIndex = activeIndex;
+      titleEl.style.opacity = 0;
+      setTimeout(() => {
+        titleEl.textContent = activeSection.dataset.title;
+        countEl.textContent = (activeIndex + 1) + ' / ' + sections.length;
+        titleEl.style.opacity = 1;
+      }, 120);
+    }
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        updateProgress();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }
+
+  window.addEventListener('scroll', onScroll, { passive: true });
+  window.addEventListener('resize', onScroll);
+  updateProgress(); // init au chargement
+})();
--- a/styles/mood-style.css
+++ b/styles/mood-style.css
@@ -0,0 +1,19 @@
+html{
+  scroll-behavior: smooth;
+  background-color: #0f2150;
+  color: #dddddd;
+}
+
+main{
+  display:flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+img{
+  width: 30vw;
+  height: auto;
+  border-radius: 100%;
+}
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,10 +1,12 @@
-html { scroll-behavior: smooth; }
-
-body {
+html {
+  scroll-behavior: smooth;
  background-color: #ffffff;
  background-image: radial-gradient(circle, #d0d0d5 1.5px, transparent 1px);
  background-size: 50px 50px;
-  background-repeat: repeat;  
+  background-repeat: repeat;
+}
+
+body {  
 }

 header {