diff --git a/exemple/fonts/Fonte-Texte.woff2 b/exemple/fonts/Fonte-Texte.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..2afabe233a1134e11559c3c9ecd0dca2e047eac5 GIT binary patch literal 16448 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 literal 0 HcmV?d00001 diff --git a/exemple/index.html b/exemple/index.html new file mode 100644 index 0000000..4e73bb6 --- /dev/null +++ b/exemple/index.html @@ -0,0 +1,715 @@ + + + + + template TOPISTO - exemple + + + + + + + + + + + + +
+
TEMPLATE
+ +
+ + + +
+
+
Indicateur 1
110
+
Indicateur 2
45
+
Indicateur 3
27
+
Indicateur 4
0
+
Indicateur 5
26
+
+
+
Indicateur 6
67
+
Indicateur 7
89
+
Indicateur 8
345
+
Indicateur 9
56
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDCOL0COL1COL2VAL1VAL2
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
1 VALUE 0 0 VALUE 0 1 VALUE 0 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 VALUE 1 0 VALUE 1 1 VALUE 1 2 10 100
2 lignes  20200
+
+ +
+

Modèle de page HTML pour visualisation de données

+

La page est composée comme suit :

+
    +
  • Un header avec le titre et un logo
    • +
  • Un bandeau de navigation avec un fil d'ariane, un lien de login et un menu
    • +
  • Une zone pour la synthèse des informations
    • +
  • Un tableau d'affichage des données
    • +
  • Un footer avec le texte explicatif
    • +
+

Les règles de comportement de la page :

+
    +
  • Le bandeau de navigation est "sticky" en haut de page.
    • +
  • Le dernier élément du fil d'ariane est en gras car c'est l'élément courant.
    • +
  • Lorsqu'on est connecté, le lien de login est remplacé par le nom de l'utilisateur.
    • +
  • La zone de synthèse est composée de lignes de "boîtes".
    • +
  • L'entête du tableau de données est "sticky" sous le bandeau de navigation.
    • +
  • Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.
    • +
+ Retour +
+ + +
+
+
+
This is a modal header
+
+
✕
+
+
+
+
+
+ This is a modal footer +
+
+ + + +
+
This is a modal header
+
✕
+
+
+
+
This is a modal footer
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/exemple/scripts/app.js b/exemple/scripts/app.js new file mode 100644 index 0000000..70c2b4a --- /dev/null +++ b/exemple/scripts/app.js @@ -0,0 +1,51 @@ +// Get the CSS root element +const rootCSS = document.querySelector(':root'); + +// Create a function for getting a variable value +function CSSgetSombre() { + let rs = getComputedStyle(rootCSS); + alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre')); +} + +function CSSsetSombre(vr, vg, vb) { + // Couleur + rootCSS.style.setProperty('--r-sombre', vr); + rootCSS.style.setProperty('--g-sombre', vg); + rootCSS.style.setProperty('--b-sombre', vb); + // Logo + // let logo = document.querySelector('header>#logo>svg'); + // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')'; +} + +function CSSsetClair(vr, vg, vb) { + // Couleur + rootCSS.style.setProperty('--r-clair', vr); + rootCSS.style.setProperty('--g-clair', vg); + rootCSS.style.setProperty('--b-clair', vb); +} + +function CSSswitchCouleurTexte() { + let rs = getComputedStyle(rootCSS); + let actuel = rs.getPropertyValue('--couleur-texte'); + if (actuel == 'black') + rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)'); + else + rootCSS.style.setProperty('--couleur-texte', 'black'); +} + +function CSSsetTheme(valeur) +{ + switch(valeur){ + case 'blue': + CSSsetClair(245,245,240); + CSSsetSombre(0,0,245); + break; + case 'red': + CSSsetClair(245,245,240); + CSSsetSombre(245,0,0); + break; + default: + CSSsetClair(245,245,240); + CSSsetSombre(0,0,0); + } +} diff --git a/exemple/scripts/env.js b/exemple/scripts/env.js new file mode 100644 index 0000000..2a269f5 --- /dev/null +++ b/exemple/scripts/env.js @@ -0,0 +1,5 @@ +/* + * Personnaliser les environnements pour distinguer PROD, TEST, etc. + */ + +CSSsetTheme('red'); diff --git a/exemple/styles/app.css b/exemple/styles/app.css new file mode 100644 index 0000000..489ef0b --- /dev/null +++ b/exemple/styles/app.css @@ -0,0 +1,325 @@ +: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-texte: black; + --couleur-sombre: rgb(var(--rgb-sombre)); + --couleur-clair: rgb(var(--rgb-clair)); + + --nuance-sombre-alpha-01: rgba(var(--rgb-sombre), 0.1); + --nuance-sombre-alpha-02: rgba(var(--rgb-sombre), 0.2); + --nuance-sombre-alpha-03: rgba(var(--rgb-sombre), 0.3); + --nuance-sombre-alpha-04: rgba(var(--rgb-sombre), 0.4); + --nuance-sombre-alpha-05: rgba(var(--rgb-sombre), 0.5); + --nuance-sombre-alpha-06: rgba(var(--rgb-sombre), 0.6); + --nuance-sombre-alpha-07: rgba(var(--rgb-sombre), 0.7); + --nuance-sombre-alpha-08: rgba(var(--rgb-sombre), 0.8); + --nuance-sombre-alpha-09: rgba(var(--rgb-sombre), 0.9); + + --r-delta-sombre: calc(255 - var(--r-sombre)); + --g-delta-sombre: calc(255 - var(--g-sombre)); + --b-delta-sombre: calc(255 - var(--b-sombre)); + + --nuance-sombre-01: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.9)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.9)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.9))); + --nuance-sombre-02: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.8)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.8)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.8))); + --nuance-sombre-03: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.7)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.7)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.7))); + --nuance-sombre-04: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.6)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.6)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.6))); + --nuance-sombre-05: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.5)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.5)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.5))); + --nuance-sombre-06: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.4)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.4)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.4))); + --nuance-sombre-07: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.3)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.3)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.3))); + --nuance-sombre-08: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.2)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.2)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.2))); + --nuance-sombre-09: rgb(calc(var(--r-sombre) + (var(--r-delta-sombre) * 0.1)), calc(var(--g-sombre) + (var(--g-delta-sombre) * 0.1)), calc(var(--b-sombre) + (var(--b-delta-sombre) * 0.1))); + +} + +@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: 1100px; + padding-left: 2%; + padding-right: 3%; + margin: 0 auto; + background: var(--couleur-clair); +} + +body { + padding: 0; + margin: 0; + height:100%; +} + +h1 { + margin-left: 5px; +} + +h2 { + margin-left: 10px; +} + +p { + margin-left: 10px; +} + +ul { + margin-left: 15px; +} + +/* + * + * Le style du header + * + */ +header { + height: 15vh; + + display: grid; + grid-template-columns: 1fr 1fr; + + align-items: center; +} +header>#marque { + font-family: Fonte-Titre, sans-serif; + font-size: 12.5vh; + text-shadow: 0.5vw 0.5vw var(--nuance-sombre-02); + + vertical-align: middle; + text-align: left; +} +header>#logo { + vertical-align: middle; + text-align: right; +} +header>#logo>svg { + height: 10vh; + fill: var(--couleur-texte); + box-shadow: 0.3vw 0.3vw var(--nuance-sombre-02); + cursor: pointer; +} +header>#logo>svg:hover { + box-shadow: 0.3vw 0.3vw var(--couleur-sombre); +} + +/* + * + * Le style de la zone de navigation + * + */ +nav { + position: sticky; + left: 0px; + top: 0px; + z-index: 20; + overflow: auto; + + justify-content: space-between; + align-items: center; + + border-top: 1px solid; + border-bottom: 1px solid; + border-color:var(--couleur-texte); + background: var(--couleur-clair); +} + +/* + * Fil d'Ariane + */ +nav>#ariane { + align-items: center; + height: 25px; +} + +nav>#ariane>#left { + float: left; + padding-left: 5px; +} +nav>#ariane>#left::after { + clear: both; +} +nav>#ariane>#left>span>a { + text-decoration: underline; + cursor: pointer; +} +nav>#ariane>#left>span>a:hover { + text-decoration: none; + color: var(--nuance-sombre-06); +} +nav>#ariane>#left>span>a:last-child { + font-weight: bold; + text-decoration: none; +} + +nav>#ariane>#right { + float: right; + text-align: right; + font-weight: bold; + padding-right: 5px; +} +nav>#ariane>#right>a { + cursor: pointer; + text-decoration: underline; +} +nav>#ariane>#right>a:hover { + text-decoration: none; + color: var(--nuance-sombre-06); +} + +/* + * Bandeau + */ + nav>#bandeau { + align-items: center; + height: 50px; + background-color: var(--nuance-sombre-01); +} + +nav>#bandeau>#menu>a { + float: left; + margin-left: 10px; + margin-top: 10px; + + font-size: 1.125rem; + font-weight: normal; + + cursor: pointer; + text-decoration: underline; +} +nav>#bandeau>#menu>a:hover { + color: var(--nuance-sombre-06); + text-decoration: none; +} + +nav>#bandeau>#logo { + float: right; + padding-top: 5px; + padding-right: 10px; +} +nav>#bandeau>#logo>svg { + width: 40px; + height: 40px; + + fill: var(--couleur-texte); + box-shadow: 0.2vw 0.2vw var(--nuance-sombre-02); + + cursor: pointer; +} +nav>#bandeau>#logo>svg:hover { + box-shadow: 0.2vw 0.2vw var(--couleur-sombre); +} +nav>#bandeau>#logo::after { + clear: both; +} + +#synthesis>.statrow { + display:flex; + width: 100%; + margin-top: 4px; + margin-bottom: 4px; +} + +#synthesis>.statrow>div:hover { + font-weight: bold; +} + +#synthesis>.statrow>.statbox1 { + flex:1; + border: 1px solid black; + text-align: center; + cursor: pointer; +} + +#synthesis>.statrow>.statbox2 { + flex:1; + border: 1px solid black; + text-align: center; + cursor: pointer; +} + +@media (max-width: 900px) { + #synthesis>.statrow>.statbox2 { + display:none; + } +} + +#datatable { + width: 100%; +} + +#datatable>table { + border-spacing: 0; + min-width:100%; + color: var(--couleur-texte); + text-align: left; + vertical-align: middle; +} + +#datatable>table>*>tr>th { + background: var(--couleur-texte); + color: var(--nuance-sombre-02); + border-color: var(--couleur-clair); +} + +#datatable>table>tbody>tr:nth-child(odd)>td { + background: var(--nuance-sombre-01); +} + +#datatable>table>tbody>tr:nth-child(even)>td { + background: var(--nuance-sombre-03); +} + +#datatable>table>tbody>tr:hover>td { + background-color: var(--nuance-sombre-07); + color: var(--nuance-sombre-02); +} + +.cellnumber { + text-align: right; + padding-right: 5px; +} +.cellid { + text-align:center; +} + +@media (max-width: 900px) { + .cellbox2 { + display:none; + } +} + +#footer { + min-height: 100vh; +} diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html index 36db215..f19238e 100644 --- a/frontend/src/html/index.html +++ b/frontend/src/html/index.html @@ -2,27 +2,16 @@ - - - template TOPISTO + + + + - + @@ -38,15 +27,19 @@