From 525939e44bb14d845fffde568ae15e5d6b1d3846 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Sat, 22 Nov 2025 11:44:46 +0100 Subject: [PATCH] 202511221144 --- frontend/protos/index.html | 38 ++++++++++++ frontend/protos/zones.css | 115 +++++++++++++++++++++++++++++++++++++ frontend/protos/zones.js | 80 ++++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 frontend/protos/index.html create mode 100644 frontend/protos/zones.css create mode 100644 frontend/protos/zones.js diff --git a/frontend/protos/index.html b/frontend/protos/index.html new file mode 100644 index 0000000..d4fcb01 --- /dev/null +++ b/frontend/protos/index.html @@ -0,0 +1,38 @@ + + + + + template ZONES + + + + + + + + + + + + + +
+
+
+ +
+ +
+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/frontend/protos/zones.css b/frontend/protos/zones.css new file mode 100644 index 0000000..f4e1555 --- /dev/null +++ b/frontend/protos/zones.css @@ -0,0 +1,115 @@ +:root { + + --dark-mode: 1; + + --r-sombre: 0; + --g-sombre: 0; + --b-sombre: 0; + + --r-clair: 245; + --g-clair: 245; + --b-clair: 240; + + --rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre); + --rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair); + + --couleur-sombre: rgb(var(--rgb-sombre)); + --couleur-clair: rgb(var(--rgb-clair)); + + --couleur-texte: black; + --couleur-fond: var(--couleur-clair); + + --header-height: 400px; + --nav-height: 80px; +} + +@font-face { + font-family: 'Fonte-Texte'; + font-display: fallback; + /* Penser à bien héberger la font sur le même domaine que mon site */ + src: url(../fonts/Fonte-Texte.woff2) format('woff2'); + /* Réutiliser ici exactement la même liste unicode que ci-dessus */ + unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB, + U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF, + U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D, + U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212; +} + +@font-face { + font-family: 'Fonte-Titre'; + font-display: fallback; + /* Penser à bien héberger la font sur le même domaine que mon site */ + src: url(../fonts/Fonte-Titre.woff2) format('woff2'); + /* Réutiliser ici exactement la même liste unicode que ci-dessus */ + unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB, + U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF, + U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D, + U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212; +} + +html { + scroll-behavior: smooth; + font-family: Fonte-Texte, monospace; + max-width: 95%; + padding-left: 0; + padding-right: 0; + margin: 0 auto; + background: var(--couleur-fond); +} + +body { + padding: 0; + margin: 0; + height:100%; +} + +#before_header { + color: var(--couleur-texte); + background-color: black; + height: 5px; +} +header { + position: sticky; + color: var(--couleur-texte); + background-color: aqua; + height: var(--header-height); +} +#after_header { + color: var(--couleur-texte); + background-color: black; + height: 1px; +} + +#before_nav { + color: var(--couleur-texte); + background-color: red; + height: 5px; +} +nav { + color: var(--couleur-texte); + background-color: yellow; + height: var(--nav-height); +} +#after_nav { + color: var(--couleur-texte); + background-color: red; + height: 5px; +} + +#synthese { + color: var(--couleur-texte); + background-color: rgb(252, 130, 201); + min-height: 80px; +} + +#principale { + color: var(--couleur-texte); + background-color: rgb(63, 15, 177); + min-height: 1000px; +} + +footer { + color: var(--couleur-texte); + background-color: rgb(9, 138, 15); + min-height: 80px; +} diff --git a/frontend/protos/zones.js b/frontend/protos/zones.js new file mode 100644 index 0000000..d08a96d --- /dev/null +++ b/frontend/protos/zones.js @@ -0,0 +1,80 @@ +const intersectionObserverRegistry = new Object(); +function setIntersectionObserverRegistry(parametre, valeur) +{ + intersectionObserverRegistry[parametre] = valeur; +} +function getIntersectionObserverRegistry(parametre) +{ + return intersectionObserverRegistry[parametre]; +} +function entryVisiblity(_id, _visible) { + let entry=getIntersectionObserverRegistry(_id); + if (entry) return entry(_visible); + return consoleLog(_id, _visible) +} + +// Create a function that will handle any intersection between some elements and the viewport. +const handleIntersectionObserverEntries = function (entries) { + entries.forEach(entry => { + if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting); + }); +} +const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries); + +function addIntersectionObserverEntry(_id, _func) +{ + let item = document.querySelector('#'+_id); + if ((item) && (intersectionObserver)) { + setIntersectionObserverRegistry(_id, _func); + intersectionObserver.observe(item); + } +} + +function consoleLog(_id, _visible) { + if (_visible) { + console.log(_id + ' is Visible'); + } else { + console.log(_id + ' is NOT Visible'); + } +} + + +function scrollToElement(elementSelector) { + let element = document.querySelector(elementSelector); + if (element) element.scrollIntoView({ behavior: 'smooth' }); +} + +function beforeHeaderVisibility(_visible) { + console.log('TRIGGER beforeHeaderVisibility'); + if (_visible) { + console.log('HEADER is Visible'); + } else { + console.log('HEADER is NOT Visible'); + scrollToElement('#before_nav'); + } +} +function afterHeaderVisibility(_visible) { + console.log('TRIGGER afterHeaderVisibility'); + if (_visible) { + scrollToElement('#before_header'); + } else { + console.log('HEADER is NOT Visible'); + } +} + +function beforeNavVisibility(_visible) { + console.log('TRIGGER beforeNavVisibility'); + let synthese=document.querySelector('#synthese'); + if (synthese) { + if (_visible) { + synthese.style.display="block"; + } else { + synthese.style.display="none"; + } + } +} + +addIntersectionObserverEntry("before_header", beforeHeaderVisibility); +addIntersectionObserverEntry("after_header", afterHeaderVisibility); + +addIntersectionObserverEntry("before_nav", beforeNavVisibility);