Hatmos/site_internet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: Nouveaux assets + adaptation script

Browse Source 
- 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
This commit is contained in:
Thomas LETELLIER
2026-09-21 04:50:49 +02:00
parent adb2b60b3f
commit f3ce09ab0a
9 changed files with 102 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/night-pingwin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
images/pingwin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/rebone-childish-gambino-cover.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/shadow-night-pingwin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

4
mood.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta chartset="utf-8"> <meta chartset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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=""> <link rel="icon" href="">
<title>Hatmos</title> <title>Hatmos</title>
</head> </head>
@@ -12,7 +12,7 @@
<h2>Your favorite wannabe technician<h2> <h2>Your favorite wannabe technician<h2>
<main> <main>
<div> <div>
<img src="images/pingwin.png"/> <img src="images/night-pingwin.png"/>
</div> </div>
<div> <div>
<audio controls> <audio controls>

4
projects/lewoapws.html
View File

@@ -13,7 +13,7 @@
<h2>Your favorite wannabe technician<h2> <h2>Your favorite wannabe technician<h2>
</header> </header>
<div id="chapter-progress"> <div id="chapter-progress">
<progress ></progress> <progress ><span id="sectionTitle">Premiers circuits</span></progress>
</div> </div>
<main> <main>
<h1>Apprendre l'Electronique avec un Arroseur de Plante Automatique</h1> <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>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> <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> </div>
<section> <section chapter="Les fondations en electronique">
<h2>Chapitre 1</h2> <h2>Chapitre 1</h2>
<h3>1.1 - Un montage simple</h3> <h3>1.1 - Un montage simple</h3>
<p> Tout commence par des fils, une source d'energie et un appareil.<br> <p> Tout commence par des fils, une source d'energie et un appareil.<br>

73
scripts/chapter-progress.js Normal file
View File

@@ -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
})();

19
styles/mood-style.css Normal file
View File

@@ -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%;
}

8
styles/style.css
View File

@@ -1,12 +1,14 @@
html { scroll-behavior: smooth; } html {
scroll-behavior: smooth;
body {
background-color: #ffffff; background-color: #ffffff;
background-image: radial-gradient(circle, #d0d0d5 1.5px, transparent 1px); background-image: radial-gradient(circle, #d0d0d5 1.5px, transparent 1px);
background-size: 50px 50px; background-size: 50px 50px;
background-repeat: repeat; background-repeat: repeat;
} }
body {
}
header { header {
background-color: #ffffff; background-color: #ffffff;
} }