diff --git a/exemple/fonts/Fonte-Texte.woff2 b/exemple/fonts/Fonte-Texte.woff2 new file mode 100644 index 0000000..2afabe2 Binary files /dev/null and b/exemple/fonts/Fonte-Texte.woff2 differ diff --git a/exemple/fonts/Fonte-Titre.woff2 b/exemple/fonts/Fonte-Titre.woff2 new file mode 100644 index 0000000..89d60ab Binary files /dev/null and b/exemple/fonts/Fonte-Titre.woff2 differ 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
+
+ + + + +
+
+
+
This is a modal header
+
+
✕
+
+
+
+
+ +
+ + + +
+
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; +}