mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 15:09:10 +00:00
202511221144
This commit is contained in:
Thibaud
38
frontend/protos/index.html
Normal file
38
frontend/protos/index.html
Normal file
@@ -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
frontend/protos/zones.css
Normal file
115
frontend/protos/zones.css
Normal file
@@ -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
frontend/protos/zones.js
Normal file
80
frontend/protos/zones.js
Normal file
@@ -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);
|
||||||
Reference in New Issue
Block a user