diff --git a/frontend/protos/back/index.html b/frontend/protos/back/index.html
new file mode 100644
index 0000000..80a0fa8
--- /dev/null
+++ b/frontend/protos/back/index.html
@@ -0,0 +1,204 @@
+
+
+
+
+ template ZONES
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ zone
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/protos/zones.css b/frontend/protos/back/zones.css
similarity index 64%
rename from frontend/protos/zones.css
rename to frontend/protos/back/zones.css
index f4e1555..fac6ec4 100644
--- a/frontend/protos/zones.css
+++ b/frontend/protos/back/zones.css
@@ -19,8 +19,13 @@
--couleur-texte: black;
--couleur-fond: var(--couleur-clair);
- --header-height: 400px;
- --nav-height: 80px;
+ --marker-before-height: 5px;
+ --marker-after-height: 12px;
+ --section-min-height: 80px;
+
+ --section-header-min-height: 120px;
+ --section-synthese-min-height: 120px;
+ --section-principale-min-height: 800px;
}
@font-face {
@@ -48,68 +53,60 @@
}
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);
+ font-family: Fonte-Texte, monospace;
+ width: 95%;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0 auto;
+ background: var(--couleur-fond);
+ color: var(--couleur-texte);
}
body {
- padding: 0;
- margin: 0;
- height:100%;
+ padding: 0;
+ margin: 0;
+ min-height:1000px;
}
-#before_header {
+.div_before_section {
color: var(--couleur-texte);
background-color: black;
- height: 5px;
+ height: var(--marker-before-height);
}
-header {
- position: sticky;
- color: var(--couleur-texte);
- background-color: aqua;
- height: var(--header-height);
+.div_section {
+ min-height: var(--section-min-height);
}
-#after_header {
+.div_after_section {
color: var(--couleur-texte);
- background-color: black;
- height: 1px;
+ background-color: red;
+ height: var(--marker-after-height);
}
-#before_nav {
- color: var(--couleur-texte);
- background-color: red;
- height: 5px;
+.header {
+ min-height: var(--section-header-min-height);
+ background-color: aqua;
}
-nav {
- color: var(--couleur-texte);
+.navbar {
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;
+.navbar_fixed {
+ position: fixed;
+ top: 0;
+ width: 70%;
}
-
-#principale {
- color: var(--couleur-texte);
- background-color: rgb(63, 15, 177);
- min-height: 1000px;
+.div_before_synthese_when_navbar_fixed {
+ height: var(--section-min-height);
}
-footer {
- color: var(--couleur-texte);
- background-color: rgb(9, 138, 15);
- min-height: 80px;
+.synthese {
+ background-color: pink;
+ min-height: var(--section-synthese-min-height);
+}
+.principale {
+ min-height: var(--section-principale-min-height);
}
+.footer {
+ background-color: greenyellow;
+}
+
diff --git a/frontend/protos/back/zones.js b/frontend/protos/back/zones.js
new file mode 100644
index 0000000..9fe1bf6
--- /dev/null
+++ b/frontend/protos/back/zones.js
@@ -0,0 +1,56 @@
+function logMsg(section, message){
+ console.log(section, ' : ', message)
+}
+
+function intersectionObserverLog(message) {
+ logMsg('intersectionObserver', message);
+}
+function intersectionObserverLogVisibility(_id, _visible) {
+ if (_visible) {
+ intersectionObserverLog(_id + ' is Visible');
+ } else {
+ intersectionObserverLog(_id + ' is NOT Visible');
+ }
+}
+
+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 intersectionObserverLogVisibility(_id, _visible)
+}
+
+// Create a function that will handle any intersection between some elements and the viewport.
+const handleIntersectionObserverEntries = function (entries) {
+ entries.forEach(entry => {
+ intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);
+ if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
+ });
+}
+const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries,{
+ // Dès qu'il y a ne serait-ce qu'un pixel au dessus de la ligne rouge
+ // => donc threshold = 1
+ threshold: 0,
+ // On met la hauteur en pixel entre la fin de l'image et la ligne rouge
+ // C'est négatif parce qu'on entre à l'intérieur de l'image. Si le nombre
+ // était positif, alors la ligne rouge se retrouverait sous l'image
+ rootMargin: '-1px 0px'
+ });
+
+function addIntersectionObserverEntry(_id, _func)
+{
+ let item = document.querySelector('#'+_id);
+ if ((item) && (intersectionObserver)) {
+ setIntersectionObserverRegistry(_id, _func);
+ intersectionObserver.observe(item);
+ logMsg('intersectionObserver', 'Add entry for '+ _id);
+ }
+}
diff --git a/frontend/protos/index.html b/frontend/protos/index.html
index d4fcb01..4ea3450 100644
--- a/frontend/protos/index.html
+++ b/frontend/protos/index.html
@@ -8,23 +8,16 @@
-
-
-
+
-
-
-
-
-
-
-
+
+
+
@@ -33,6 +26,4 @@
-
-