Thibaud
1 месяц назад
3 измененных файлов: 233 добавлений и 0 удалений
-
+38 -0frontend/protos/index.html
-
+115 -0frontend/protos/zones.css
-
+80 -0frontend/protos/zones.js
+ 38
- 0
frontend/protos/index.html
Просмотреть файл
| @ -0,0 +1,38 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="fr"> | |||
| <head> | |||
| <title>template ZONES</title> | |||
| <meta name="description" content="PROTO"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <meta charset="utf-8"> | |||
| <link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Texte.woff2" crossorigin /> | |||
| <link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Titre.woff2" crossorigin /> | |||
| <link rel="stylesheet" type="text/css" href="zones.css"> | |||
| </head> | |||
| <body> | |||
| <section id="before_header"></section> | |||
| <header></header> | |||
| <section id="after_header"></section> | |||
| <section id="before_nav"></section> | |||
| <nav> | |||
| </nav> | |||
| <section id="after_nav"></section> | |||
| <section id="synthese"></section> | |||
| <section id="principale"></section> | |||
| <footer></footer> | |||
| </body> | |||
| <script src="zones.js"></script> | |||
| </html> | |||
+ 115
- 0
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; | |||
| } | |||
+ 80
- 0
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); | |||