tibo
/
template
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ

7 コミット
16a3f92b70 ... cd7b8c5b5e

作成者 SHA1 メッセージ 日付
  tibo cd7b8c5b5e arret develop-nettoyage 1ヶ月前
  Thibaud c225f20923 20250602 7ヶ月前
  Thibaud d3ac06439b Ajout dossier exemple 1年前
  Thibaud 87c98514de 20250102 1年前
  Thibaud c02bc6fc47 commit 20240914 1年前
  Thibaud aea068a3d9 commit 20240913 1年前
  Thibaud 84546f0201 rename fiche to modal 1年前
18個のファイルの変更、1301行の追加、582行の削除
ユニファイド表示
差分オプション
統計情報を表示
  1. バイナリ
      exemple/fonts/Fonte-Texte.woff2
  2. バイナリ
      exemple/fonts/Fonte-Titre.woff2
  3. +715
    -0
      exemple/index.html
  4. +51
    -0
      exemple/scripts/app.js
  5. +5
    -0
      exemple/scripts/env.js
  6. +325
    -0
      exemple/styles/app.css
  7. +56
    -206
      frontend/src/html/index.html
  8. +33
    -0
      frontend/src/scripts/UI/CSS.js
  9. +2
    -2
      frontend/src/scripts/UI/IntersectionObserver/footer.js
  10. +7
    -1
      frontend/src/scripts/UI/IntersectionObserver/header.js
  11. +4
    -4
      frontend/src/scripts/UI/IntersectionObserver/synthesis.js
  12. +6
    -5
      frontend/src/scripts/UI/datagrid.js
  13. +3
    -3
      frontend/src/scripts/UI/modal.js
  14. +70
    -351
      frontend/src/scripts/default.js
  15. +16
    -7
      frontend/src/scripts/tools/logs.js
  16. +4
    -0
      frontend/src/styles/datagrid.css
  17. +2
    -2
      frontend/src/styles/synthesis.css
  18. +2
    -1
      frontend/src/tools/cscripts.sh

バイナリ
exemple/fonts/Fonte-Texte.woff2 ファイルの表示


バイナリ
exemple/fonts/Fonte-Titre.woff2 ファイルの表示


+ 715
- 0
exemple/index.html ファイルの表示

@ -0,0 +1,715 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>template TOPISTO - exemple</title>
<meta name="description" content="Suivi activité">
<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="styles/app.css?fb5caadf64f2601932414c4f86ead337">
</head>
<body>
<header id="entete">
<div id="marque">TEMPLATE</div>
<div id="logo">
<svg viewBox="0 0 920 920">
<use href="#topisto"></use>
</svg>
</div>
</header>
<nav>
<section id="ariane">
<div id="left">
<span><a>Home</a> > <a>Menu</a> > <a>Menu1</a></span>
</div>
<div id="right">
<a id="login">Log In</a>
&nbsp;
<a href="#help">?</a>
</div>
</section>
<section id="bandeau">
<div id="menu">
<a onclick="activeMenu(this)">Menu1</a>
<a onclick="activeMenu(this)">Menu2</a>
<a onclick="activeMenu(this)">Menu3</a>
</div>
<div id="logo">
<svg viewBox="0 0 920 920" class="js-open-modal-trigger" data-modal-info="type=settings">
<use href="#topisto"></use>
</svg>
</div>
</section>
</nav>
<section id="synthesis">
<div class="statrow">
<div class="statbox2">Indicateur 1<br>110</div>
<div class="statbox1">Indicateur 2<br>45</div>
<div class="statbox1">Indicateur 3<br>27</div>
<div class="statbox1">Indicateur 4<br>0</div>
<div class="statbox2">Indicateur 5<br>26</div>
</div>
<div class="statrow">
<div class="statbox2">Indicateur 6<br>67</div>
<div class="statbox1">Indicateur 7<br>89</div>
<div class="statbox1">Indicateur 8<br>345</div>
<div class="statbox1">Indicateur 9<br>56</div>
</div>
</section>
<section id="datatable">
<table>
<thead>
<tr>
<th class="cellid">ID</th>
<th>COL0</th>
<th class="cellbox2">COL1</th>
<th class="cellbox2">COL2</th>
<th class="cellnumber">VAL1</th>
<th class="cellnumber">VAL2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr>
<td class="cellid">1</td>
<td> VALUE 0 0</td>
<td class="cellbox2"> VALUE 0 1</td>
<td class="cellbox2"> VALUE 0 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
<tr class="js-open-modal-trigger" data-modal-info="random:idligne=1">
<td class="cellid">2</td>
<td> VALUE 1 0</td>
<td class="cellbox2"> VALUE 1 1</td>
<td class="cellbox2"> VALUE 1 2</td>
<td class="cellnumber"> 10</td>
<td class="cellnumber"> 100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">2 lignes</th>
<th class="cellbox2">&nbsp;</th>
<th class="cellbox2">&nbsp;</th>
<th class="cellnumber">20</th>
<th class="cellnumber">200</th>
</tr>
</tfoot>
</table>
</section>
<footer>
<h2 id="help">Modèle de page HTML pour visualisation de données</h2>
<p>La page est composée comme suit :</p>
<ul>
<li>Un header avec le titre et un logo</li>
<li>Un bandeau de navigation avec un fil d'ariane, un lien de login et un menu</li>
<li>Une zone pour la synthèse des informations</li>
<li>Un tableau d'affichage des données</li>
<li>Un footer avec le texte explicatif</li>
</ul>
<p>Les règles de comportement de la page :</p>
<ul>
<li>Le bandeau de navigation est "sticky" en haut de page.</li>
<li>Le dernier élément du fil d'ariane est en gras car c'est l'élément courant.</li>
<li>Lorsqu'on est connecté, le lien de login est remplacé par le nom de l'utilisateur.</li>
<li>La zone de synthèse est composée de lignes de "boîtes".</li>
<li>L'entête du tableau de données est "sticky" sous le bandeau de navigation.</li>
<li>Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.</li>
</ul>
<span style="width: 100%; text-align: center;"><a href="#entete">Retour </a></span>
</footer>
<dialog id="modal" style="display:flex;flex-direction: row;">
<section style="width:100%;height:100%">
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
<div style="float:left">
<div class="modal_header">This is a modal header</div>
</div>
<div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
<div style="clear:both"></div>
</div>
<div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;">
</div>
<footer style="overflow-y: hidden;overflow-x: hidden;height: 10%; vertical-align: bottom;">
<span class="modal_footer">This is a modal footer</span>
</footer>
</section>
</dialog>
<dialog id="popup">
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%">
<div style="float:left"><span class="modal_header">This is a modal header</span></div>
<div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
<div style="clear:both"></div>
</div>
<div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
class="modal_footer">This is a modal footer</span></div>
</dialog>
<div style="display:none">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="user" viewBox="0 0 550 550">
<g transform="translate(30 40) scale(0.95 0.95)">
<path d="M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z"/>
<path d="M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195
C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15
C481,444.833,460.745,395.539,423.966,358.195z"/>
</g>
</symbol>
<symbol id="filter" viewBox="0 0 1024 1024">
<g>
<path d="M859.02 234.524l0.808-0.756 0.749-0.813c27.047-29.356 33.876-70.34 17.823-106.957-15.942-36.366-50.416-58.957-89.968-58.957H163.604c-38.83 0-73.043 22.012-89.29 57.444-16.361 35.683-10.632 76.301 14.949 106.004l0.97 1.126 280.311 266.85 2.032 312.074c0.107 16.502 13.517 29.805 29.995 29.805l0.2-0.001c16.568-0.107 29.912-13.626 29.804-30.194l-2.198-337.564-296.478-282.241c-9.526-11.758-11.426-26.933-5.044-40.851 6.446-14.059 19.437-22.452 34.75-22.452h624.828c15.6 0 28.69 8.616 35.017 23.047 6.31 14.391 3.924 29.831-6.354 41.497l-304.13 284.832 1.302 458.63c0.047 16.54 13.469 29.916 29.998 29.915h0.087c16.568-0.047 29.962-13.517 29.915-30.085L573.04 502.36l285.98-267.836z" fill="" /><path d="M657.265 595.287c0 16.498 13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.498 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997H687.262c-16.498 0-29.997 13.499-29.997 29.997z m273.894 138.882H687.262c-16.498 0-29.997 13.499-29.997 29.997s13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.499 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997z m0 168.878H687.262c-16.498 0-29.997 13.499-29.997 29.997s13.499 29.997 29.997 29.997h243.897c16.498 0 29.997-13.499 29.997-29.997 0-16.498-13.499-29.997-29.997-29.997z" />
</g>
</symbol>
<symbol id="setup" viewBox="0 0 1024 1024">
<g>
<path d="M509.946 338.983c-95.925 0-173.983 78.034-173.983 173.935 0 95.913 78.057 173.947 173.983 173.947 27.333 0 53.132-6.515 76.17-17.797l-0.024-0.057c6.245-3.17 10.527-9.63 10.527-17.104 0-10.598-8.59-19.237-19.214-19.237-2.493 0-4.867 0.49-7.051 1.357l-0.102-0.225c-18.196 9.088-38.614 14.352-60.306 14.352-74.588 0-135.249-60.663-135.249-135.238 0-74.564 60.66-135.201 135.249-135.201s135.296 60.637 135.296 135.2c0 13.314-2.03 26.166-5.617 38.32l0.345 0.135c-0.365 1.48-0.58 3.02-0.58 4.61 0 10.598 8.59 19.19 19.212 19.19 7.32 0 13.676-4.081 16.919-10.09l0.334 0.13c0.33-1.05 0.653-2.105 0.964-3.163 0.153-0.455 0.28-0.92 0.398-1.39a173.233 173.233 0 0 0 6.711-47.74c0-95.9-78.032-173.934-173.982-173.934z m411.693 77.904h-66.23c-3.423-12.534-7.65-25.138-12.889-38.31l-3.87-9.3c-5.098-11.824-10.952-23.46-17.327-34.673l46.808-46.806c4.814-4.817 7.48-11.213 7.48-18.01 0-6.798-2.665-13.195-7.48-18.01l-96.987-96.965c-9.656-9.654-26.438-9.654-36.044 0l-46.806 46.806c-11.375-6.467-23.369-12.438-36.775-18.246l-8.686-3.54a366.101 366.101 0 0 0-36.82-12.298v-66.182c0-14.043-11.425-25.468-25.493-25.468H443.384c-14.069 0-25.492 11.448-25.492 25.468v66.186c-12.51 3.445-24.856 7.553-36.775 12.298l-10.764 4.46a354.674 354.674 0 0 0-34.697 17.325l-46.828-46.806c-9.63-9.63-26.39-9.63-36.043 0L155.82 251.78a25.282 25.282 0 0 0-7.482 18.01c0 6.798 2.643 13.17 7.482 18.01l46.806 46.807c-6.467 11.376-12.462 23.462-18.41 37.199l-3.423 8.286c-4.744 11.944-8.827 24.263-12.25 36.797h-66.232c-14.044 0-25.47 11.449-25.47 25.469v137.137c0 14.02 11.426 25.444 25.47 25.444h66.232c3.447 12.58 7.694 25.209 12.958 38.522l3.8 9.11a356.298 356.298 0 0 0 17.325 34.627l-46.782 46.817c-9.937 9.914-9.937 26.107 0 36.02L252.807 867c9.63 9.582 26.39 9.63 36.02 0l46.828-46.83a355.428 355.428 0 0 0 34.557 17.325l7.93 3.305 3.02 1.226a349.604 349.604 0 0 0 36.776 12.227v66.184c0 14.069 11.423 25.493 25.492 25.493h137.136c14.07 0 25.493-11.472 25.493-25.493v-66.184c12.558-3.446 25.137-7.648 38.238-12.84l9.348-3.87a354.975 354.975 0 0 0 34.697-17.374l46.83 46.83c9.607 9.582 26.388 9.63 36.018 0l97.011-96.963c9.915-9.914 9.915-26.107 0-36.02l-46.83-46.818c6.42-11.26 12.371-23.202 18.082-36.42l1.51-3.589 2.22-5.476a360.913 360.913 0 0 0 12.273-36.775h66.233c14.044 0 25.468-11.401 25.468-25.444V442.356c-0.048-14.02-11.472-25.47-25.518-25.47zM906.605 564.41h-83.061l-4.626 19.685c-3.471 14.635-8.048 29.057-13.973 43.997l-1.415 3.54-2.031 4.793c-5.949 13.738-12.911 27.096-20.725 39.701l-10.62 17.207 58.702 58.714-75.698 75.673-58.678-58.679-17.232 10.575c-12.936 7.978-26.154 14.823-41.59 21.574l-7.741 3.115a317.74 317.74 0 0 1-42.793 13.502l-19.664 4.672v82.896H458.42V822.48l-19.662-4.672c-14.918-3.588-29.315-8.167-45.319-14.494l-7.13-2.973c-13.595-5.901-26.907-12.887-39.676-20.724l-17.208-10.575-58.678 58.679-75.697-75.673 58.678-58.714-10.598-17.207c-7.907-12.77-14.87-26.223-21.315-41.07l-3.35-8.285a309.225 309.225 0 0 1-13.432-42.723l-4.696-19.638h-82.966V457.39h82.966l4.696-19.637c3.517-14.823 8.167-29.433 14.186-44.588l3.234-7.765c5.878-13.596 12.841-26.955 20.7-39.725l10.621-17.207-58.678-58.656 75.697-75.672 58.655 58.654 17.231-10.598c12.747-7.86 26.154-14.8 40.999-21.22l8.452-3.47c13.594-5.404 27.945-9.936 42.627-13.453l19.685-4.626v-82.991h107.066v82.991l19.683 4.626c14.731 3.494 28.94 8.002 44.613 14.186l7.743 3.258c13.76 5.947 27.143 12.91 39.747 20.7l17.207 10.599 58.655-58.655 75.72 75.672-58.678 58.656 10.573 17.183c7.883 12.817 14.87 26.294 21.363 41.26l3.373 8.167a320.605 320.605 0 0 1 13.456 42.628l4.626 19.684h83.014V564.41z" />
</g>
</symbol>
<symbol id="topisto" viewBox="0 0 920 920">
<g transform="translate(0,920) scale(0.100000,-0.100000)" stroke="none">
<path d="M319 9096 c-90 -32 -173 -111 -206 -194 -17 -45 -18 -209 -21 -4267
-2 -3005 0 -4238 8 -4284 20 -118 78 -198 175 -243 l50 -23 4265 -3 4265 -2
61 20 c82 28 136 76 176 158 l33 67 3 4255 c2 4621 6 4310 -51 4387 -41 56
-116 110 -176 127 -52 15 -439 16 -4302 16 -3444 -1 -4251 -3 -4280 -14z
m8488 -147 c66 -13 124 -55 160 -116 l28 -48 0 -4205 c0 -3952 -1 -4207 -17
-4236 -23 -41 -71 -82 -133 -110 l-50 -24 -4146 0 c-2773 0 -4164 3 -4200 10
-75 14 -144 63 -177 125 l-27 50 -3 4160 c-1 2929 1 4175 8 4212 6 28 21 67
33 85 30 43 95 88 149 102 60 15 8299 10 8375 -5z"/>
<path d="M6205 8623 c-324 -38 -610 -144 -869 -321 -65 -45 -135 -85 -154 -88
-56 -11 -174 25 -217 66 -34 31 -29 62 10 73 63 19 80 32 83 64 3 27 -1 33
-20 37 -166 34 -352 -16 -448 -120 -66 -72 -80 -110 -80 -221 0 -127 15 -179
84 -292 69 -115 79 -150 66 -222 -13 -68 -81 -210 -151 -314 -30 -45 -63 -98
-74 -120 -32 -64 -184 -208 -256 -244 -34 -17 -67 -31 -73 -31 -6 0 -31 28
-55 61 -24 33 -54 65 -67 70 -13 4 -24 14 -24 20 0 6 -19 41 -43 78 -35 52
-135 271 -187 407 -13 34 -67 91 -113 117 -61 36 -88 69 -150 182 -31 56 -70
112 -89 127 -40 33 -106 45 -166 29 l-42 -12 0 -48 c0 -32 6 -56 19 -72 17
-22 61 -103 61 -112 0 -3 -21 -8 -47 -12 -102 -15 -203 -48 -304 -98 l-105
-53 12 36 c7 20 18 73 24 119 9 68 9 86 -2 92 -42 27 -106 -11 -163 -96 -57
-85 -75 -148 -86 -310 -19 -267 -62 -437 -147 -582 -103 -176 -122 -221 -122
-287 0 -69 27 -138 59 -156 12 -6 44 -14 71 -17 l50 -6 0 -54 c0 -63 -10 -86
-53 -122 -17 -14 -62 -53 -100 -87 -38 -34 -94 -76 -124 -94 l-54 -33 -44 21
c-34 16 -63 47 -134 143 -50 66 -91 125 -91 130 0 5 -23 34 -51 65 -132 145
-194 290 -239 560 -29 172 -30 408 -1 539 25 117 30 129 88 201 78 96 97 145
89 232 -4 53 -15 92 -41 147 -60 125 -120 148 -331 125 -129 -15 -161 -29
-243 -114 -37 -38 -45 -52 -49 -94 l-4 -49 47 -19 48 -18 -7 -88 c-5 -71 -18
-124 -65 -266 -33 -97 -71 -222 -85 -277 -35 -139 -94 -456 -100 -540 -5 -60
-13 -391 -30 -1270 -3 -163 12 -477 29 -580 3 -16 16 -106 30 -200 32 -211 56
-315 96 -413 91 -225 92 -229 96 -442 2 -107 6 -205 8 -217 9 -38 33 -27 45
20 6 23 25 84 42 135 l31 92 43 0 c24 0 46 -6 51 -12 25 -40 65 -182 70 -249
9 -121 -18 -224 -125 -469 -78 -178 -90 -217 -113 -338 -25 -142 -23 -196 9
-200 14 -2 24 3 28 15 50 142 66 172 94 181 33 12 32 13 49 -82 19 -103 13
-175 -24 -317 -42 -165 -51 -246 -35 -322 6 -31 14 -57 17 -57 3 0 26 18 50
41 37 34 49 40 81 37 l37 -3 32 -100 c37 -114 83 -308 83 -352 l0 -30 -117 35
c-106 31 -130 35 -233 34 -135 0 -204 -18 -308 -80 -37 -21 -89 -50 -117 -63
-47 -23 -50 -26 -53 -66 -3 -42 -2 -43 27 -43 16 0 67 16 113 36 131 56 174
65 238 48 71 -18 124 -18 140 1 15 19 17 17 -45 40 -61 22 -74 32 -50 41 52
20 392 -88 403 -128 2 -9 16 -18 31 -20 25 -3 26 -5 26 -73 l0 -70 -215 -6
c-188 -4 -222 -8 -274 -27 -52 -19 -79 -22 -228 -22 l-168 0 0 -35 c0 -31 3
-35 38 -44 20 -5 77 -9 127 -10 121 -1 141 -6 154 -42 6 -16 16 -43 22 -59 24
-64 138 -130 226 -130 65 -1 171 -32 267 -80 98 -49 104 -51 211 -57 181 -10
341 32 409 107 29 32 76 131 76 160 0 22 55 8 108 -28 89 -60 146 -96 154 -97
3 0 10 -3 14 -8 4 -4 16 -7 26 -7 10 0 18 -4 18 -9 0 -5 38 -15 84 -21 86 -13
176 -11 461 11 177 13 555 23 890 24 l260 0 -4 -161 c-3 -127 0 -172 13 -217
22 -75 69 -135 136 -170 52 -27 60 -29 145 -24 50 3 110 12 135 21 33 13 85
18 198 19 113 1 155 5 161 15 14 22 140 49 207 44 46 -3 76 1 117 16 34 13 94
24 156 28 56 4 101 11 101 16 0 5 13 7 30 3 37 -8 86 25 122 82 19 32 23 51
23 123 0 74 -3 88 -22 107 -44 44 -87 263 -56 294 7 7 36 -18 98 -88 49 -54
95 -102 102 -106 7 -4 13 -14 13 -21 0 -22 102 -85 157 -96 35 -8 69 -8 110
-1 32 5 87 13 123 16 100 10 138 33 202 123 91 127 124 177 137 210 9 21 20
32 33 32 11 0 22 8 25 19 3 11 13 21 22 24 9 2 26 26 36 53 10 27 25 54 32 59
18 14 22 136 5 191 -18 63 -63 117 -149 180 -43 31 -112 86 -154 120 -93 77
-144 103 -278 143 -57 17 -105 31 -107 31 -2 0 -4 10 -4 22 0 29 -101 162
-152 198 -34 25 -51 30 -99 30 -58 0 -221 -44 -227 -61 -2 -5 -11 -9 -19 -9
-14 0 -15 11 -9 81 8 92 22 134 59 167 20 19 31 22 60 17 38 -7 67 -32 71 -61
2 -12 57 -49 162 -107 87 -49 191 -111 229 -140 349 -256 830 -573 1036 -683
256 -137 585 -292 816 -385 124 -50 251 -48 288 4 9 13 15 43 15 75 0 68 -26
108 -76 118 -25 4 -38 14 -45 30 -5 14 -26 48 -48 77 -108 144 -359 617 -451
848 -93 233 -191 618 -234 919 -92 637 5 1104 326 1588 51 76 100 153 110 170
21 39 57 62 105 69 31 4 44 0 75 -25 24 -18 56 -32 85 -37 67 -10 77 5 68 115
-14 189 -58 296 -229 550 -189 280 -235 341 -550 730 -98 120 -118 169 -128
310 -8 111 -14 155 -59 400 -17 96 -20 142 -16 280 5 184 28 296 86 424 46
102 162 258 276 372 138 137 164 147 372 149 144 0 154 2 175 23 19 18 23 35
26 95 2 46 -2 81 -10 97 -16 29 -122 102 -154 106 -25 2 -102 51 -149 94 -16
15 -40 30 -53 33 -20 5 -22 2 -16 -16 21 -68 65 -111 166 -163 57 -29 118 -81
118 -100 0 -11 -16 -14 -67 -14 -171 -1 -381 -90 -414 -177 -5 -13 -17 -23
-28 -23 -40 0 -236 -261 -318 -425 -90 -177 -143 -373 -143 -526 0 -97 42
-369 71 -454 11 -33 23 -91 26 -130 l6 -70 -139 135 c-214 208 -508 473 -629
566 -68 52 -315 219 -415 279 -52 32 -189 109 -305 173 -115 63 -250 137 -298
166 -85 49 -88 52 -83 80 10 47 32 63 181 136 384 186 664 276 1025 326 94 14
193 18 400 19 298 0 371 -9 551 -70 89 -31 120 -31 170 -3 28 15 39 28 39 45
0 20 -5 23 -39 23 -22 0 -113 18 -203 40 -243 60 -329 72 -523 72 -195 0 -498
-24 -665 -52 -208 -34 -484 -126 -679 -224 -47 -24 -176 -95 -286 -158 -175
-100 -202 -119 -219 -152 -18 -37 -18 -37 3 -60 12 -13 68 -43 124 -66 169
-72 291 -136 527 -278 399 -240 670 -432 914 -645 43 -38 89 -73 102 -79 13
-6 24 -19 24 -28 0 -20 84 -102 153 -149 26 -18 71 -61 100 -95 293 -351 324
-386 348 -386 10 0 19 -11 22 -27 6 -32 72 -113 92 -113 7 0 18 -12 24 -27 16
-37 77 -103 96 -103 8 0 15 -8 15 -17 0 -27 63 -113 83 -113 10 0 17 -8 17
-19 0 -10 32 -63 72 -117 39 -54 101 -144 136 -199 36 -55 75 -111 88 -125 15
-16 30 -56 43 -115 11 -49 25 -105 30 -122 l10 -33 -98 0 c-90 0 -100 -2 -144
-29 -89 -57 -164 -153 -286 -368 -155 -273 -253 -571 -276 -837 -8 -95 10
-483 31 -651 18 -141 112 -571 154 -700 16 -49 38 -126 50 -169 11 -44 28 -85
37 -91 9 -7 14 -19 10 -28 -4 -11 1 -20 12 -26 12 -7 21 -27 25 -60 4 -29 12
-51 21 -55 8 -3 15 -17 15 -30 0 -15 8 -30 20 -36 11 -6 20 -21 20 -34 0 -13
7 -26 15 -30 8 -3 18 -24 21 -46 4 -25 14 -45 25 -51 12 -6 19 -21 19 -38 0
-16 7 -31 15 -35 8 -3 15 -17 15 -31 0 -14 7 -28 15 -31 8 -4 15 -17 15 -30 0
-12 9 -29 20 -37 11 -8 23 -28 26 -45 4 -18 14 -34 25 -37 11 -4 21 -20 25
-41 3 -19 15 -39 25 -45 11 -5 19 -17 19 -26 0 -10 24 -56 53 -103 30 -47 68
-109 85 -138 l32 -52 -45 0 c-59 0 -109 21 -470 200 -481 239 -684 364 -1515
935 -177 121 -331 225 -343 232 -32 18 -47 43 -47 78 0 34 36 130 71 189 l22
37 41 -39 c23 -21 68 -61 101 -88 33 -27 88 -74 122 -105 34 -31 92 -78 130
-105 279 -195 424 -304 467 -353 11 -11 30 -21 43 -21 12 0 23 -6 23 -12 0
-21 206 -168 235 -168 8 0 15 -8 15 -18 0 -13 44 -39 163 -99 225 -112 318
-138 331 -91 4 17 -3 32 -28 58 -31 32 -118 146 -481 625 -148 195 -299 416
-435 635 -57 91 -153 242 -215 335 -111 168 -153 242 -250 443 -53 112 -89
152 -136 152 -24 0 -29 -4 -25 -17 3 -10 8 -40 12 -68 9 -61 45 -142 73 -161
13 -10 21 -26 21 -44 0 -18 9 -38 24 -52 13 -13 29 -41 36 -63 7 -22 21 -46
32 -53 10 -7 18 -22 18 -33 0 -11 7 -34 17 -52 29 -56 196 -302 214 -315 10
-6 20 -26 24 -42 4 -17 15 -35 25 -40 10 -5 21 -23 25 -40 4 -17 15 -35 25
-40 11 -6 22 -26 26 -45 4 -21 13 -37 25 -40 13 -4 19 -16 19 -34 0 -27 113
-205 169 -266 15 -16 65 -86 111 -155 46 -69 107 -153 136 -188 30 -35 68 -88
86 -118 20 -33 42 -57 56 -60 12 -4 22 -13 22 -22 0 -9 10 -26 22 -39 16 -18
18 -23 6 -23 -20 0 -289 179 -403 269 -49 39 -178 137 -285 218 -174 132 -411
325 -527 430 -67 61 -77 90 -79 233 -1 83 -9 163 -24 240 -21 107 -22 128 -14
305 5 105 9 240 9 300 l0 110 180 6 c99 3 196 10 215 14 70 15 135 57 205 132
39 42 114 119 167 172 103 102 138 158 159 259 9 44 6 84 -16 250 -35 252 -52
299 -170 477 -51 77 -107 169 -125 205 -18 36 -45 83 -61 106 -15 22 -31 54
-35 70 -4 18 -45 66 -108 128 -152 148 -223 197 -444 311 -101 52 -158 101
-262 230 -79 97 -185 181 -306 243 -202 105 -233 123 -319 192 -109 87 -132
100 -185 100 -39 0 -40 -1 -40 -32 0 -18 11 -51 25 -73 13 -22 25 -45 25 -50
0 -11 -72 -29 -160 -40 -44 -6 -164 -35 -365 -90 -72 -19 -134 -28 -221 -32
l-121 -6 -7 43 c-4 24 -3 46 1 50 4 4 53 41 108 83 136 103 226 184 330 297
148 161 275 375 306 512 l12 58 38 -6 c21 -4 50 -3 65 0 48 12 252 225 301
313 7 12 15 41 18 65 3 24 8 55 10 71 4 24 2 27 -24 27 -25 0 -31 -6 -42 -37
-24 -76 -62 -138 -128 -207 -38 -40 -73 -82 -80 -94 -6 -12 -18 -22 -25 -22
-7 0 -38 -18 -69 -40 -30 -22 -57 -40 -60 -40 -2 0 -7 20 -9 45 -4 29 -26 82
-66 154 -70 126 -82 163 -82 246 1 133 36 192 145 241 64 28 83 31 65 10 -9
-12 -8 -22 5 -50 21 -43 34 -54 120 -101 177 -97 171 -94 212 -83 52 14 91 35
208 113 243 160 449 245 780 320 113 26 206 62 220 85 6 10 -90 12 -160 3z
m-4607 -589 c43 -30 79 -90 74 -123 -2 -17 -8 -31 -12 -31 -4 0 -11 -12 -14
-26 -4 -14 -21 -56 -37 -94 -26 -57 -36 -70 -60 -75 -15 -4 -36 -2 -47 4 -10
5 -47 17 -83 25 -59 14 -65 14 -77 -1 -21 -29 38 -57 126 -62 l74 -3 -8 -52
c-4 -28 -8 -72 -8 -98 -1 -25 -4 -50 -8 -54 -12 -12 -10 -444 2 -444 6 0 10
-31 10 -74 0 -157 50 -353 120 -469 22 -36 40 -71 40 -76 0 -6 4 -11 10 -11 5
0 22 -25 37 -56 15 -30 50 -79 77 -108 52 -54 215 -279 223 -306 11 -40 -16
-71 -91 -105 -41 -18 -82 -32 -93 -29 -24 6 -144 -53 -208 -101 -48 -37 -95
-49 -124 -31 -5 4 -20 39 -33 78 -16 51 -29 74 -46 81 -16 7 -26 7 -34 -1 -15
-15 -47 -275 -35 -283 13 -9 -30 -201 -48 -214 -7 -6 -23 -42 -35 -80 -28 -88
-38 -300 -20 -413 16 -101 38 -172 52 -169 19 3 52 -121 52 -198 1 -78 -25
-162 -75 -247 -16 -26 -28 -54 -26 -60 2 -10 -55 -46 -75 -48 -13 0 -84 152
-101 215 -8 33 -18 87 -22 120 -3 33 -15 119 -25 190 -56 377 -75 696 -66
1080 6 250 28 659 41 765 3 25 10 112 14 195 6 92 13 151 20 153 6 2 11 26 11
52 0 45 54 333 67 352 2 5 16 57 29 116 28 127 92 342 107 360 5 7 12 55 15
106 l5 94 -32 17 c-26 13 -32 21 -29 43 3 30 65 70 148 96 64 21 189 20 218 0z
m1770 -217 c21 -22 52 -86 52 -107 0 -5 -13 -10 -29 -10 -31 0 -42 19 -57 103
-7 43 3 47 34 14z m14 -183 c20 -4 45 -14 55 -23 10 -9 49 -29 86 -45 65 -27
68 -31 62 -55 -3 -14 -9 -53 -12 -87 -6 -69 4 -94 61 -162 29 -36 47 -72 82
-172 3 -8 7 -51 9 -95 8 -141 27 -300 38 -313 15 -19 23 -192 9 -201 -6 -4
-21 -63 -33 -131 -12 -69 -28 -132 -35 -140 -7 -9 -23 -37 -34 -63 -14 -32
-27 -47 -40 -47 -10 0 -22 -5 -26 -11 -3 -6 -47 -38 -97 -70 -50 -33 -108 -77
-129 -97 -21 -20 -43 -37 -50 -37 -7 0 -47 -17 -88 -37 -188 -90 -363 -82
-466 23 -21 21 -46 39 -55 39 -10 0 -19 11 -22 28 -3 15 -22 72 -42 127 -55
151 -77 391 -54 591 7 60 15 172 18 249 4 88 9 132 14 118 4 -12 24 -36 44
-54 36 -31 38 -32 114 -26 96 6 166 35 175 71 9 36 -6 50 -94 87 -64 27 -90
32 -155 32 -65 1 -76 3 -72 16 17 55 24 133 18 214 -5 87 -4 97 22 155 15 34
31 62 35 62 7 0 30 -89 30 -116 0 -8 -11 -19 -25 -24 -14 -5 -25 -14 -25 -19
0 -4 -3 -23 -6 -40 -7 -31 -5 -30 52 29 96 101 237 171 414 209 100 21 161 25
222 15z m588 -714 c0 -13 9 -22 25 -26 14 -3 25 -13 25 -23 0 -9 3 -26 6 -38
5 -19 1 -23 -30 -29 -30 -5 -44 -1 -77 21 -52 34 -69 76 -69 167 l1 73 59 -63
c33 -34 60 -71 60 -82z m-1526 -276 c13 -5 16 -24 16 -100 0 -101 -5 -109 -48
-78 -19 13 -22 24 -22 77 0 40 6 70 16 85 17 25 16 24 38 16z m2556 -40 c63
-3 120 -10 125 -14 6 -4 41 -17 78 -28 79 -24 337 -168 337 -188 0 -8 10 -18
23 -23 25 -10 49 -41 81 -105 43 -86 191 -197 322 -244 27 -9 63 -27 78 -40
16 -12 37 -22 47 -22 10 0 26 -11 35 -25 9 -13 33 -32 54 -41 21 -10 41 -25
43 -36 3 -10 14 -18 25 -18 21 0 60 -44 115 -126 16 -23 39 -52 52 -64 14 -13
25 -31 25 -41 0 -9 7 -19 15 -23 8 -3 15 -16 15 -29 0 -14 7 -30 15 -37 20
-17 19 -40 -2 -40 -10 0 -45 7 -78 14 -218 50 -489 11 -787 -114 -76 -31 -78
-33 -78 -67 l0 -36 69 7 c38 4 118 23 176 41 217 70 384 88 557 62 l96 -15 54
-53 c30 -30 70 -63 91 -74 25 -13 37 -26 37 -41 0 -13 8 -24 20 -27 12 -3 20
-14 20 -25 0 -12 4 -23 9 -27 17 -10 68 -157 97 -275 36 -151 37 -238 5 -305
-28 -55 -305 -346 -355 -372 -68 -35 -321 -56 -406 -34 -19 6 -54 15 -77 21
-31 8 -43 16 -43 29 0 13 -16 25 -49 40 -104 44 -119 21 -56 -87 25 -43 51
-106 60 -142 19 -83 19 -220 0 -346 -19 -123 -19 -215 -1 -279 7 -28 21 -77
30 -110 9 -33 19 -103 23 -155 11 -189 -33 -361 -170 -660 -110 -241 -141
-436 -103 -654 21 -118 20 -198 -4 -306 -38 -171 -34 -207 38 -360 27 -58 57
-136 66 -175 31 -129 48 -174 67 -180 19 -6 27 -25 10 -25 -6 0 -6 -13 0 -32
5 -18 7 -54 3 -80 -9 -74 -60 -101 -214 -114 -47 -3 -111 -16 -145 -29 -97
-37 -310 -78 -395 -77 -113 2 -150 10 -150 33 0 31 42 66 88 74 23 4 44 11 48
16 3 5 24 9 48 9 38 0 44 3 58 34 16 33 16 34 -15 64 -45 43 -74 52 -131 40
-50 -10 -116 -4 -116 12 0 10 -74 52 -100 57 -8 2 -48 6 -88 9 -86 7 -108 -3
-148 -71 -23 -40 -25 -49 -14 -74 11 -27 15 -28 94 -34 45 -3 112 -11 149 -18
73 -14 71 -11 80 -95 l5 -40 -47 -13 c-25 -7 -61 -19 -79 -27 -38 -16 -111
-18 -163 -4 -70 20 -125 110 -136 223 -7 80 3 157 21 157 9 0 16 19 20 53 8
60 30 86 157 185 90 70 140 127 175 197 27 55 29 70 31 180 1 66 12 188 25
270 29 191 32 413 5 462 -9 18 -29 69 -43 115 -14 46 -66 169 -115 273 -48
105 -96 219 -105 255 -23 88 -22 289 1 385 38 160 44 294 30 678 -7 183 -6
212 9 252 22 58 74 102 181 153 75 37 85 45 85 68 l0 27 -69 -7 c-144 -13
-241 -70 -287 -171 -22 -47 -24 -62 -24 -230 1 -99 5 -225 10 -280 16 -175
-20 -450 -70 -531 -19 -29 -23 -31 -54 -24 -18 4 -38 10 -43 13 -6 4 -13 50
-16 104 -7 127 -26 183 -91 282 -29 45 -59 102 -65 129 -21 80 -46 137 -61
137 -8 0 -21 -18 -29 -40 -20 -61 -2 -150 48 -236 64 -111 81 -167 81 -267 0
-48 -4 -93 -9 -100 -5 -9 -25 -12 -61 -10 l-52 3 -18 70 c-27 106 -95 269
-114 273 -9 2 -16 13 -16 28 0 17 -6 24 -19 24 -18 0 -38 53 -71 190 -6 25
-18 63 -28 85 l-17 39 -6 -29 c-23 -106 -4 -202 71 -365 57 -124 82 -196 95
-277 7 -43 6 -43 -23 -43 -17 0 -41 4 -54 9 -36 13 -39 24 -155 436 -15 56
-18 212 -4 265 30 116 42 155 51 164 5 5 10 20 10 33 0 12 11 51 24 85 14 35
34 95 46 133 12 39 34 97 50 130 15 33 31 76 35 95 9 45 53 115 102 162 41 39
210 146 314 198 35 18 111 52 169 75 58 24 182 77 275 118 94 41 224 98 290
127 203 89 235 107 235 134 0 21 -6 24 -61 30 -88 10 -104 19 -191 102 -90 86
-196 158 -316 215 -90 42 -118 44 -108 6 3 -12 6 -30 6 -40 0 -10 11 -22 25
-27 14 -5 25 -16 25 -24 0 -19 85 -77 212 -145 54 -29 101 -57 104 -63 3 -5 3
-29 0 -52 -7 -43 -7 -44 -97 -85 -82 -39 -139 -63 -364 -156 -350 -144 -549
-278 -660 -445 -55 -84 -89 -164 -136 -325 -20 -72 -56 -180 -79 -240 -81
-213 -92 -260 -86 -360 3 -53 15 -124 30 -172 14 -46 39 -144 56 -220 17 -75
42 -162 56 -193 22 -50 32 -60 72 -78 67 -29 129 -34 240 -18 53 8 156 18 227
21 l131 7 13 -76 c20 -121 58 -239 122 -382 53 -119 149 -357 149 -370 0 -10
-95 8 -200 37 -272 74 -324 84 -520 94 -144 8 -236 -2 -425 -46 -200 -46 -213
-49 -248 -49 -17 0 -85 18 -150 40 -114 39 -123 40 -247 40 -72 0 -130 -2
-130 -4 0 -24 24 -39 98 -62 48 -14 138 -46 201 -71 161 -63 208 -65 381 -20
196 52 277 61 469 54 173 -6 355 -32 476 -67 126 -37 195 -50 259 -50 74 0 72
3 82 -120 6 -75 -27 -341 -45 -364 -17 -22 -41 -147 -40 -208 2 -153 -90 -306
-226 -375 -42 -22 -20 -20 -650 -53 -102 -6 -181 -14 -183 -20 -2 -6 -73 -10
-185 -9 -111 0 -174 4 -162 9 32 14 -81 11 -250 -5 -218 -21 -250 -20 -347 16
-46 17 -92 38 -103 48 -11 10 -36 26 -55 35 -32 15 -140 108 -140 121 0 3 -22
44 -49 93 -69 121 -92 207 -98 367 l-5 130 55 163 c79 233 137 320 247 370 46
22 76 27 195 33 103 5 163 14 225 32 254 75 515 133 707 158 141 18 287 8 418
-30 109 -31 293 -66 302 -57 3 2 -6 19 -18 36 -65 87 -392 180 -637 180 -85 0
-118 12 -136 50 -65 132 -94 192 -140 300 -30 69 -53 126 -51 128 2 2 42 12
89 22 105 23 142 42 150 76 4 14 4 29 1 32 -3 3 -72 1 -153 -6 -178 -14 -231
-6 -279 40 -39 38 -48 60 -34 86 11 21 20 24 240 77 80 19 155 42 167 50 25
16 35 66 18 89 -10 15 -15 14 -56 -4 -72 -31 -256 -72 -334 -73 -61 -1 -80 3
-137 31 -37 18 -67 37 -67 42 0 5 44 23 98 40 123 41 281 115 358 168 108 74
221 210 246 295 17 60 13 272 -6 348 -17 63 -50 129 -66 129 -17 0 -28 -75
-34 -225 -8 -213 -40 -308 -135 -401 -86 -84 -199 -143 -358 -185 -60 -16
-121 -22 -261 -26 l-183 -5 -15 -30 -15 -29 53 -23 c29 -13 64 -26 78 -29 44
-11 117 -64 152 -111 18 -25 40 -45 49 -46 9 0 23 -17 31 -39 26 -65 148 -240
184 -262 19 -11 34 -27 34 -35 0 -8 7 -14 15 -14 8 0 15 -6 15 -14 0 -8 7 -16
16 -18 8 -2 27 -30 41 -63 125 -297 142 -360 107 -403 -19 -22 -163 -67 -175
-54 -3 4 -14 45 -23 92 -10 47 -44 158 -76 247 -78 214 -144 325 -270 453
-132 134 -218 195 -308 222 -65 20 -72 25 -67 43 8 23 27 105 54 225 27 117
45 349 38 478 -4 86 -12 128 -41 216 -20 60 -46 124 -57 143 -22 35 -73 68
-89 58 -19 -12 -10 -112 15 -182 47 -130 57 -197 57 -383 1 -157 -2 -187 -26
-290 -35 -147 -92 -280 -170 -400 -96 -144 -102 -163 -68 -192 39 -34 50 -30
88 34 44 71 51 66 60 -43 7 -89 48 -245 112 -429 46 -133 47 -137 47 -260 -1
-153 -14 -189 -90 -236 -87 -55 -113 -82 -135 -142 -12 -31 -25 -61 -30 -67
-13 -16 -102 -312 -122 -410 -27 -124 -17 -191 58 -424 13 -40 36 -90 51 -110
22 -28 28 -46 27 -85 0 -31 -6 -53 -16 -60 -8 -6 -23 -27 -33 -46 -20 -40
-106 -127 -138 -139 -12 -5 -64 -14 -115 -21 -123 -16 -213 3 -257 55 -16 19
-105 67 -105 57 0 -6 -20 -4 -47 3 -27 7 -68 18 -93 24 -25 7 -65 16 -89 21
-45 10 -135 69 -145 96 -21 55 13 75 139 82 76 3 108 0 196 -23 90 -23 112
-25 146 -16 118 32 143 141 77 338 -20 60 -43 119 -52 133 -9 14 -19 43 -23
65 -5 22 -19 74 -32 115 -13 41 -32 115 -41 164 -9 49 -25 105 -35 125 -25 49
-67 247 -75 351 -4 46 -11 87 -15 90 -5 3 -11 55 -15 115 -4 61 -12 112 -17
113 -13 5 -12 459 1 467 6 3 10 18 10 33 0 48 39 215 51 223 9 5 10 35 6 106
-6 101 -24 168 -71 260 -24 49 -26 62 -26 185 0 174 23 356 62 493 27 96 40
197 26 210 -2 3 -29 -2 -59 -9 -30 -8 -57 -12 -61 -8 -4 4 -16 52 -27 107 -62
314 -23 495 152 712 38 47 61 62 232 149 l190 97 85 -6 c47 -3 121 -15 165
-27 121 -33 247 -41 410 -25 77 7 266 18 420 25 317 12 382 17 390 31 4 5 26
9 51 9 59 0 134 44 199 117 133 148 127 143 189 143 31 0 69 6 84 14 15 8 73
64 129 124 56 60 140 137 186 171 100 73 155 142 132 161 -13 10 -28 8 -83
-12 -96 -36 -143 -68 -203 -140 -49 -60 -125 -137 -198 -203 l-34 -30 6 65
c29 282 57 321 235 325 99 2 236 30 226 46 -3 5 9 9 27 9 17 0 64 12 103 26
39 14 100 32 136 41 66 16 213 32 240 27 8 -2 67 -6 130 -10z m-2450 -572 c12
-67 41 -123 80 -155 19 -16 30 -35 30 -51 0 -22 -5 -26 -30 -26 -16 0 -55 -7
-87 -15 -85 -22 -177 -19 -278 10 -48 14 -96 30 -107 36 -19 10 -19 11 -1 31
21 23 51 40 73 42 20 1 149 77 147 86 -3 11 106 97 128 102 28 6 33 -1 45 -60z
m35 -2594 c78 -39 165 -110 211 -171 20 -26 49 -54 64 -62 53 -27 142 -165
155 -240 4 -21 13 -44 20 -50 7 -5 36 -77 64 -158 40 -117 51 -162 51 -211 0
-70 -9 -87 -60 -106 -19 -8 -51 -24 -70 -36 -60 -38 -134 -51 -280 -50 l-135
1 -6 165 c-6 159 -16 227 -37 253 -15 19 -69 203 -88 302 -9 50 -22 93 -27 96
-12 8 1 266 15 292 12 24 41 18 123 -25z m3422 -1362 c50 -11 67 -20 95 -51
44 -50 57 -75 58 -107 0 -18 5 -28 15 -28 8 0 15 -7 15 -15 0 -15 22 -22 150
-51 89 -19 200 -69 200 -89 0 -20 116 -131 152 -146 15 -6 28 -19 28 -28 0
-10 15 -25 35 -34 21 -10 35 -24 35 -34 0 -10 9 -24 21 -31 11 -7 18 -19 16
-26 -3 -7 -1 -34 4 -61 14 -73 -3 -120 -67 -187 -30 -31 -57 -52 -60 -46 -3 5
-26 -20 -50 -57 -25 -36 -42 -70 -38 -76 3 -6 -3 -13 -14 -16 -11 -2 -37 -30
-58 -60 -41 -60 -83 -85 -162 -98 -23 -4 -40 -10 -37 -15 8 -13 -118 -21 -158
-9 -38 10 -135 87 -231 184 -40 39 -51 58 -52 84 -2 42 -34 74 -98 98 -69 26
-90 57 -94 146 -2 43 3 99 12 140 9 38 16 98 16 135 0 75 -25 298 -40 352 -8
30 -7 38 16 61 34 35 117 71 147 64 12 -3 34 -2 47 4 32 12 25 13 97 -3z"/>
<path d="M1406 7258 c-10 -57 -29 -150 -42 -208 -26 -115 -67 -350 -114 -650
-55 -349 -62 -839 -14 -1000 21 -73 31 -81 47 -39 10 24 16 109 21 299 3 146
11 319 16 385 26 313 32 372 39 405 l7 35 7 -41 c4 -24 14 -44 23 -48 10 -4
14 -12 10 -22 -4 -9 0 -21 9 -28 8 -6 19 -33 24 -60 5 -27 16 -53 25 -58 9 -5
16 -20 16 -34 0 -13 7 -27 15 -30 8 -4 15 -15 15 -25 0 -34 31 -98 51 -104 10
-4 19 -15 19 -26 0 -26 47 -119 64 -125 8 -3 21 -25 30 -48 9 -24 25 -51 35
-60 17 -16 21 -16 59 -1 l41 17 -104 208 c-121 246 -153 327 -188 475 -39 165
-48 262 -56 585 -5 252 -8 295 -21 298 -12 2 -19 -20 -34 -100z"/>
<path d="M3394 7241 c-58 -14 -259 -122 -291 -156 -18 -19 -33 -39 -33 -45 0
-17 44 -22 204 -18 126 2 159 6 166 18 15 24 30 80 37 143 5 48 3 57 -10 57
-8 0 -21 2 -29 4 -7 2 -27 1 -44 -3z"/>
<path d="M3015 6740 c-17 -4 -45 -14 -62 -24 -26 -13 -33 -23 -33 -46 0 -30 1
-30 55 -30 84 0 124 28 125 86 0 15 -46 22 -85 14z"/>
<path d="M3200 6440 c-81 -21 -326 -138 -353 -168 -9 -10 -18 -29 -19 -43 -5
-41 53 -38 173 11 142 57 222 73 339 64 88 -6 96 -5 114 15 15 16 17 29 12 65
-4 24 -14 50 -22 57 -26 22 -161 21 -244 -1z"/>
<path d="M4287 5975 c-16 -8 -70 -49 -120 -92 -106 -88 -190 -145 -297 -198
-41 -20 -77 -39 -79 -41 -2 -2 0 -15 3 -30 7 -26 9 -27 62 -21 84 9 182 64
339 190 134 109 194 172 178 188 -17 17 -59 19 -86 4z"/>
<path d="M2166 5461 c-3 -5 -3 -22 0 -39 6 -29 10 -31 148 -68 l141 -39 222 0
c220 0 222 0 247 24 14 14 26 27 26 31 0 21 -70 33 -235 41 -99 4 -216 15
-260 23 -44 8 -104 20 -134 26 -66 12 -148 13 -155 1z"/>
<path d="M2960 3874 c-68 -31 -92 -62 -98 -127 l-5 -50 60 5 c61 6 173 49 194
74 6 7 15 30 19 51 7 29 5 42 -7 55 -24 27 -96 23 -163 -8z"/>
<path d="M4665 3583 c18 -133 77 -259 134 -284 18 -8 31 -21 31 -31 0 -11 8
-18 20 -18 16 0 20 -7 20 -33 0 -73 89 -273 127 -288 38 -14 43 -11 43 24 0
97 -73 281 -145 367 -55 65 -78 105 -114 196 -28 69 -37 83 -67 97 -52 25 -56
23 -49 -30z"/>
<path d="M5580 3422 c-7 -15 -16 -85 -20 -157 -8 -146 -20 -189 -87 -314 -40
-75 -43 -85 -30 -99 14 -13 20 -11 55 16 79 63 135 170 167 325 18 81 18 110
5 175 -9 41 -16 51 -44 65 -33 15 -34 15 -46 -11z"/>
<path d="M2065 2688 c-49 -103 -119 -223 -204 -353 -36 -55 -75 -120 -86 -145
-11 -25 -22 -47 -26 -50 -3 -3 -14 -38 -24 -78 -26 -109 -18 -348 14 -414 13
-27 27 -48 31 -48 8 0 22 38 34 92 3 15 11 81 16 147 12 150 51 276 120 391
66 109 130 194 140 183 4 -4 31 -61 59 -125 29 -64 59 -119 67 -122 44 -17 57
74 28 206 -8 40 -26 142 -39 226 -13 84 -27 157 -30 162 -3 6 -19 10 -34 10
-24 0 -31 -9 -66 -82z"/>
<path d="M2387 1383 c22 -84 59 -153 83 -153 13 0 20 -7 20 -19 0 -10 9 -21
20 -24 11 -3 20 -12 20 -20 0 -15 89 -81 156 -115 105 -53 297 -75 424 -48 50
10 81 23 92 37 10 11 33 25 52 30 40 11 70 64 45 80 -25 15 -55 10 -125 -23
-155 -73 -372 -38 -561 90 -88 60 -157 126 -184 176 -14 26 -31 46 -41 46 -15
0 -15 -5 -1 -57z"/>
<path d="M4830 895 c-11 -14 -10 -98 2 -110 2 -3 19 -8 36 -11 l32 -6 0 61 c0
57 -2 62 -26 71 -32 12 -29 13 -44 -5z"/>
<path d="M5695 701 c-3 -6 -24 -20 -45 -31 -34 -18 -56 -20 -167 -18 -135 3
-149 0 -213 -51 -21 -17 -22 -21 -10 -37 14 -15 31 -16 193 -11 240 9 297 32
297 123 0 13 -4 24 -9 24 -5 0 -16 3 -24 6 -8 3 -18 0 -22 -5z"/>
<path d="M6324 1379 c2 -8 7 -26 10 -41 4 -18 13 -28 25 -28 13 0 20 -10 25
-30 3 -18 12 -30 21 -30 8 0 15 -9 15 -20 0 -13 7 -20 20 -20 11 0 20 -6 20
-14 0 -8 15 -24 34 -35 19 -12 36 -28 39 -35 3 -8 14 -13 24 -11 10 2 35 7 56
10 31 5 37 10 37 29 0 20 -8 26 -51 36 -38 9 -53 18 -59 36 -5 13 -14 24 -19
24 -6 0 -28 27 -51 59 -47 71 -46 69 -104 77 -37 5 -46 4 -42 -7z"/>
<path d="M6266 1145 c-12 -33 -5 -66 19 -87 14 -12 25 -31 25 -43 0 -44 85
-95 159 -95 34 0 42 5 60 34 24 38 26 46 10 46 -6 0 -42 9 -80 21 -54 16 -69
25 -69 40 0 26 -59 87 -91 94 -19 5 -28 2 -33 -10z"/>
<path d="M6120 1020 c-12 -23 -10 -28 34 -84 36 -45 73 -66 116 -66 27 0 30 3
30 33 0 25 -9 42 -38 70 -21 20 -46 37 -55 37 -9 0 -17 7 -17 15 0 24 -57 19
-70 -5z"/>
<path d="M5190 7540 c-24 -6 -25 -10 -24 -71 1 -82 51 -286 76 -309 10 -9 16
-24 13 -32 -4 -9 0 -18 9 -21 9 -4 12 -14 9 -26 -3 -13 -1 -21 7 -21 8 0 10
-8 6 -24 -4 -16 -1 -26 8 -29 8 -3 17 -21 21 -39 8 -39 40 -145 62 -204 8 -23
25 -47 37 -53 12 -7 27 -26 33 -42 9 -23 17 -29 42 -29 24 0 31 4 31 20 0 22
-43 156 -104 325 -42 118 -139 435 -134 440 7 7 224 -90 373 -165 337 -172
819 -494 1189 -795 72 -58 136 -105 143 -105 7 0 13 -9 13 -19 0 -12 44 -59
118 -124 64 -58 157 -150 206 -206 53 -61 96 -101 107 -101 12 0 19 -7 19 -20
0 -13 7 -20 20 -20 12 0 20 -7 20 -16 0 -14 101 -149 236 -314 52 -63 182
-268 225 -352 27 -54 32 -58 65 -58 l35 0 -6 48 c-15 107 -163 340 -431 672
-90 112 -544 570 -654 661 -135 111 -250 196 -402 299 -90 61 -226 155 -303
210 -196 139 -357 233 -606 354 -305 148 -397 181 -459 166z"/>
<path d="M4877 7345 c-50 -38 -109 -119 -202 -280 -65 -112 -129 -206 -188
-278 -43 -52 -40 -67 13 -67 52 0 87 38 245 261 87 123 160 226 162 229 3 3
15 -8 27 -23 23 -29 74 -67 89 -67 4 0 15 16 23 35 12 30 12 40 -2 82 -21 63
-38 95 -60 114 -37 33 -58 31 -107 -6z"/>
<path d="M6415 4012 c-21 -21 27 -214 59 -238 9 -6 14 -18 10 -28 -4 -10 0
-18 10 -22 9 -4 16 -18 16 -34 0 -16 7 -30 15 -34 8 -3 15 -16 15 -29 0 -14 7
-30 15 -37 8 -7 15 -21 15 -32 0 -32 41 -122 66 -143 13 -12 24 -31 24 -43 0
-13 7 -25 15 -28 8 -4 15 -16 15 -29 0 -28 46 -111 65 -119 9 -3 15 -18 15
-35 0 -16 6 -31 15 -35 8 -3 15 -12 15 -21 0 -8 4 -15 9 -15 5 0 12 -13 16
-29 3 -15 17 -38 30 -50 14 -11 25 -32 25 -46 0 -14 8 -29 20 -35 11 -6 20
-18 20 -26 0 -25 50 -103 69 -109 10 -3 23 -22 30 -43 6 -20 38 -75 71 -122
32 -47 92 -135 133 -195 41 -61 81 -116 90 -124 10 -7 17 -17 17 -22 0 -4 51
-78 113 -163 61 -85 146 -204 187 -263 65 -93 82 -111 127 -133 28 -14 52 -29
52 -35 1 -14 64 -115 72 -115 17 0 16 47 -2 95 -16 44 -167 273 -246 375 -44
56 -346 497 -459 670 -282 430 -424 701 -554 1055 -55 150 -83 209 -102 221
-16 10 -96 22 -103 16z"/>
</g>
</symbol>
</defs>
</svg>
</div>
</body>
<script src="scripts/app.js"></script>
<script src="scripts/env.js"></script>
</html>

+ 51
- 0
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);
}
}

+ 5
- 0
exemple/scripts/env.js ファイルの表示

@ -0,0 +1,5 @@
/*
* Personnaliser les environnements pour distinguer PROD, TEST, etc.
*/
CSSsetTheme('red');

+ 325
- 0
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;
}

+ 56
- 206
frontend/src/html/index.html ファイルの表示

@ -2,27 +2,16 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<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
/>
<title>template TOPISTO</title> <title>template TOPISTO</title>
<meta name="description" content="Suivi activité"> <meta name="description" content="Suivi activité">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="styles/app.css?TIMESTAMP"> <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">
</head> </head>
<body> <body>
@ -38,15 +27,19 @@
<nav> <nav>
<section id="ariane"> <section id="ariane">
<div id="fil"></div> <div id="fil"></div>
<div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
<div id="aide">
<a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a>
&nbsp;
<a alt="aide" onclick="gotoHelp()">?</a>
</div>
</section> </section>
<section id="bandeau"> <section id="bandeau">
<div id="menu"> <div id="menu">
<a onclick="activeMenu(this)">Menu1</a> <a onclick="activeMenu(this)">Menu1</a>
<a onclick="activeMenu(this)">Menu2</a> <a onclick="activeMenu(this)">Menu2</a>
<a onclick="activeMenu(this)">Menu3</a>
<a onclick="activeMenu(this)">Menu3</a>
</div> </div>
<svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings" >
<svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings">
<use href="#topisto"></use> <use href="#topisto"></use>
</svg> </svg>
</section> </section>
@ -55,17 +48,18 @@
<section id="synthesis"> <section id="synthesis">
<div id="synthesis_top">&nbsp;</div> <div id="synthesis_top">&nbsp;</div>
<div id="synthesis_body"></div> <div id="synthesis_body"></div>
<div id="synthesis_bottom">&nbsp;</div>
</section> </section>
<section id="datagrid"></section> <section id="datagrid"></section>
<footer id="footer" ref="footer"></footer> <footer id="footer" ref="footer"></footer>
<dialog id="fiche" style="display:flex;flex-direction: row;">
<dialog id="modal" style="display:flex;flex-direction: row;">
<section style="width:100%;height:100%"> <section style="width:100%;height:100%">
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;"> <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
<div style="float:left"><div class="modal_header">This is a modal header</div></div>
<div style="float:left">
<div class="modal_header">This is a modal header</div>
</div>
<div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div> <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
<div style="clear:both"></div> <div style="clear:both"></div>
</div> </div>
@ -84,39 +78,24 @@
<div style="clear:both"></div> <div style="clear:both"></div>
</div> </div>
<div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div> <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span class="modal_footer">This is a modal footer</span></div>
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
class="modal_footer">This is a modal footer</span></div>
</dialog> </dialog>
<template id="filtre_level">
<select onchange="changeAffichageNiveauxEvent(event)">
<option value="9999" selected>Tous les niveaux</option>
<option value="1">1 niveau</option>
<option value="2">2 niveaux</option>
<option value="3">3 niveaux</option>
<option value="4">4 niveaux</option>
<option value="5">5 niveaux</option>
<option value="6">6 niveaux</option>
<option value="7">7 niveaux</option>
<option value="8">8 niveaux</option>
<option value="9">9 niveaux</option>
<option value="10">10 niveaux</option>
</select>
</template>
<template id="settings_header"> <template id="settings_header">
<section style="display: flex"> <section style="display: flex">
<svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()"> <svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()">
<use href="#topisto"></use>
<use href="#topisto"></use>
</svg> </svg>
<svg viewBox="0 0 550 550" onclick="settingsSetModeLogin()"> <svg viewBox="0 0 550 550" onclick="settingsSetModeLogin()">
<use href="#user"></use> <use href="#user"></use>
</svg>
</svg>
<svg viewBox="0 0 1024 1024" onclick="settingsSetModeFilter()"> <svg viewBox="0 0 1024 1024" onclick="settingsSetModeFilter()">
<use href="#filter"></use> <use href="#filter"></use>
</svg>
</svg>
<svg viewBox="0 0 1024 1024" onclick="settingsSetModeSetup()"> <svg viewBox="0 0 1024 1024" onclick="settingsSetModeSetup()">
<use href="#setup"></use> <use href="#setup"></use>
</svg>
</svg>
</section> </section>
</template> </template>
@ -127,172 +106,43 @@
<h3>Fournir un template générique pour les applis HTML</h3> <h3>Fournir un template générique pour les applis HTML</h3>
<p>Version 0.1</p> <p>Version 0.1</p>
<p><small> <p><small>
contributeurs:<br>
Albert Seandhils<br>
</small></p>
contributeurs:<br>
Albert Seandhils<br>
</small></p>
</div> </div>
</section> </section>
</template> </template>
<template id="synthesis_body_accueil">
</template>
<template id="synthesis_body_taches">
<div class="statrow" style="margin-top: 5px">
<div class="statbox1" onclick="changeModeAffichage('taches','Tasks')">Tasks</div>
<div class="statbox1" onclick="changeModeAffichage('releases','Realeases')">Realeases</div>
<div class="statbox1" onclick="changeModeAffichage('feries','Hollidays')">Hollidays</div>
<div class="statbox1" onclick="changeModeAffichage('rdv','Rendez-Vous')">RdV</div>
<div class="statbox1" onclick="changeModeAffichage('items','Items')">Items</div>
</div>
<br>
<!--
<select onchange="changeModeAffichageEvent(event)">
<option value="taches" selected>Tasks</option>
<option value="releases">Releases</option>
<option value="feries">Hollidays</option>
<option value="rdv">Rendez-Vous</option>
<option value="items">Items</option>
</select>
-->
<select onchange="changeAffichageNiveauxEvent(event)">
<option value="9999" selected>Tous les niveaux</option>
<option value="1">1 niveau</option>
<option value="2">2 niveaux</option>
<option value="3">3 niveaux</option>
<option value="4">4 niveaux</option>
<option value="5">5 niveaux</option>
<option value="6">6 niveaux</option>
<option value="7">7 niveaux</option>
<option value="8">8 niveaux</option>
<option value="9">9 niveaux</option>
<option value="10">10 niveaux</option>
</select>
<select onchange="changeFiltreClient(event)">
<option value="ALL">Tous les clients</option>
<option value="TME">TME</option>
<option value="REL">Realeases</option>
<option value="FER">Fériés</option>
<option value="RDV">Rendez-vous</option>
<option value="CGI">CGI</option>
<option value="CD56">CD56</option>
<option value="CD44">CD44</option>
<option value="CD49">CD49</option>
<option value="CD61">CD61</option>
<option value="CD33">CD33</option>
<option value="CD58">CD58</option>
<option value="CD18">CD18</option>
<option value="CTM">CTM</option>
<option value="CNFPT">CNFPT</option>
<option value="CRNA">CRNA</option>
<option value="CRNA">TME</option>
</select>
<select onchange="changeAffichageItemsTermine(event)">
<option value="oui">Afficher les items terminés</option>
<option value="non">Masquer les items terminés</option>
</select>
</template>
<template id="synthesis_body_calendrier">
<select onchange="changeModeAffichageEvent(event)">
<option value="calendar_intervenants" selected>Calendrier Intervenants</option>
<option value="calendar_clients">Calendrier Clients</option>
</select><br>
<select onchange="changeCalendarEvent(event)">
<option value="1" selected>Cette semaine</option>
<option value="2">Cette année</option>
</select><br>
</template>
<template id="synthesis_body_planning">
<select onchange="changeAffichageItemsTermine(event)">
<option value="non">Masquer les items terminés</option>
<option value="oui">Afficher les items terminés</option>
</select>
</template>
<template id="synthesis_body_project">
<select onchange="changeAffichageItemsTermine(event)">
<option value="non">Masquer les items terminés</option>
<option value="oui" selected>Afficher les items terminés</option>
</select>
<select onchange="changeAffichageItemsPrestations(event)">
<option value="non">Tous les items</option>
<option value="oui" selected>Uniquement les prestations</option>
</select>
<template id="synthesis_body_Home">
<div class="statrow">
<div class="statbox2">Indicateur 1<br>110</div>
<div class="statbox1">Indicateur 2<br>45</div>
<div class="statbox1">Indicateur 3<br>27</div>
<div class="statbox1">Indicateur 4<br>0</div>
<div class="statbox2">Indicateur 5<br>26</div>
</div>
<div class="statrow">
<div class="statbox2">Indicateur 6<br>67</div>
<div class="statbox1">Indicateur 7<br>89</div>
<div class="statbox1">Indicateur 8<br>345</div>
<div class="statbox1">Indicateur 9<br>56</div>
</div>
</template> </template>
<template id="footer_accueil">
<h2>Gestion de Projet</h2>
<p>
<small>
Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
unique.
<br>La gestion de projet met en oeuvre un ensemble de techniques et de compétences pour garantir le succès
d'un
projet.
<br>
<br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement.
<br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement
d'une
tâche complexe.
<br>Principe de Pareto : 20% des efforts produisent 80% des effets.
<br>
<br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu.
<br>On ne peut améliorer que ce que l'on mesure : résultats, performances,...
<br>
<br>La tranquillité ce n'est pas l'inaction.
</small>
</p>
<p>
<i>
NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
</i>
</p>
<h2>Explications</h2>
<p>
L'objectif de cette page est de présenter des données sous forme de tableau.<br>
La page permet en outre :
<ul>
<li>De rappeler l'identité visuelle : logo, bannière</li>
<li>De naviguer dans l'application</li>
<li>D'accéder à une synthèse et à une explication des données</li>
</ul>
</p>
<p>
Le header est une bannière qui fait 30% du viewport.
Elle contient une image de background alignée à gauche et un texte aligné à droite.
</p>
<p>
Lorsque le header sort de la partie visible de la page :
<ul>
<li>La barre de navigation devient "collée" au haut de page.</li>
<li>Le pied de tableau devient "collé" en bas de page</li>
<li>le logo apparaît à gauche de la barre de navigation.</li>
</ul>
</p>
<p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
toute
la page.</p>
<p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
voluptatum nesciunt eligendi. Eos harum rerum vitae.
</p>
<h2>Focus sur la gestion des thèmes</h2>
<p>
Voici comment s'opère la gestion des couleurs.<br>
Dans le default.css, la section CSS root contient des variables CSS.<br>
On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
<br>
Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
<ul>
<li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
<li>- Soit par calul de dégradé</li>
</ul>
<br>
Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
</template>
<template id="footer_Home">
<h2>Modèle de page HTML pour visualisation de données</h2>
<p>La page est composée comme suit :</p>
<ul>
<li>Un header avec le titre et un logo</li>
<li>Un bandeau de navigation</li>
<li>Une zone pour la synthèse des informations</li>
<li>Un tableau d'affichage des données</li>
<li>Un footer avec le texte explicatif</li>
</ul>
<p>Les règles de comportement de la page:</p>
<ul>
<li>Le bandeau de navigation est "sticky" en haut de page.</li>
<li>L'entête du tableau de données est "sticky" sous le bandeau de navigation.</li>
<li>Lorsque la zone de synthèse n'est plus visible, le pied de tableau est "sticky" en bas de page.</li>
</ul>
</template>

+ 33
- 0
frontend/src/scripts/UI/CSS.js ファイルの表示

@ -0,0 +1,33 @@
// 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');
}

+ 2
- 2
frontend/src/scripts/UI/IntersectionObserver/footer.js ファイルの表示

@ -3,10 +3,10 @@ const handleFooterIntersection = function (entries) {
// Loop through all the observed elements // Loop through all the observed elements
entries.forEach(entry => { // Check if the element is intersecting the viewport entries.forEach(entry => { // Check if the element is intersecting the viewport
if (entry.isIntersecting) { if (entry.isIntersecting) {
console.log("The footer is visible in the viewport" );
msgConsole('IntersectionObserver','The footer is visible in the viewport' );
if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry); if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
} else { } else {
console.log("The footer is invisible in the viewport" );
msgConsole('IntersectionObserver','The footer is invisible in the viewport' );
if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry); if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
} }
}); });

+ 7
- 1
frontend/src/scripts/UI/IntersectionObserver/header.js ファイルの表示

@ -1,7 +1,13 @@
// Create a function that will handle any intersection between some elements and the viewport. // Create a function that will handle any intersection between some elements and the viewport.
const handleHeaderIntersection = function (entries) { const handleHeaderIntersection = function (entries) {
entries.forEach(entry => { entries.forEach(entry => {
if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
if (entry.isIntersecting) {
msgConsole('IntersectionObserver','The header is visible in the viewport');
if (typeof headerIsNowVisible === 'function') headerIsNowVisible(entry);
} else {
msgConsole('IntersectionObserver','The header is invisible in the viewport');
if (typeof headerIsNowInvisible === 'function') headerIsNowInvisible(entry);
}
}); });
} }

+ 4
- 4
frontend/src/scripts/UI/IntersectionObserver/synthesis.js ファイルの表示

@ -3,11 +3,11 @@ const handleSynthesisIntersection = function (entries) {
entries.forEach(entry => { entries.forEach(entry => {
// Check if the element is intersecting the viewport // Check if the element is intersecting the viewport
if (entry.isIntersecting) { if (entry.isIntersecting) {
m yLog( "The synthesis is visible in the viewport");
if (typeof synthesis Top IsNowVisible === 'function') synthesisIsNowVisible(entry);
m sgConsole('IntersectionObserver', "The synthesis is visible in the viewport");
if (typeof synthesis IsNowVisible === 'function') synthesisIsNowVisible(entry);
} else { } else {
m yLog( "The synthesis is invisible in the viewport");
if (typeof synthesis Top IsNowInvisible === 'function') synthesisIsNowInvisible(entry);
m sgConsole('IntersectionObserver', "The synthesis is invisible in the viewport");
if (typeof synthesis IsNowInvisible === 'function') synthesisIsNowInvisible(entry);
} }
}); });
} }

+ 6
- 5
frontend/src/scripts/UI/datagrid.js ファイルの表示

@ -1,5 +1,5 @@
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
// ---- Fonction s pour charger des lignes identiques dans le tableau
// ---- Fonction pour charger des lignes identiques dans le tableau
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
function datagridLignesIdentiques(nblignes, valeur) { function datagridLignesIdentiques(nblignes, valeur) {
let element = document.querySelector('#datagrid'); let element = document.querySelector('#datagrid');
@ -30,14 +30,14 @@ function datagridLignesIdentiques(nblignes, valeur) {
element.innerHTML = contenu; element.innerHTML = contenu;
} }
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
// ---- Fonction s pour charger des lignes vides
// ---- Fonction pour charger des lignes vides
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
function datagridEmptyLines(nblignes) { function datagridEmptyLines(nblignes) {
return datagridLignesIdentiques(nblignes,'&nbsp;'); return datagridLignesIdentiques(nblignes,'&nbsp;');
} }
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
// ---- Fonction s utilitaires
// ---- Fonction utilitaires
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
function datagridLoading() { function datagridLoading() {
let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500 let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
@ -45,7 +45,7 @@ function datagridLoading() {
} }
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
// ---- Fonction s pour charger des données au hasard dans le datagrid
// ---- Fonction pour charger des données au hasard dans le datagrid
// --------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------
var nbCols = 5; var nbCols = 5;
@ -144,4 +144,5 @@ datagrid_hooks['random'] = function(){
let element = document.querySelector('#datagrid'); let element = document.querySelector('#datagrid');
let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500 let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
setDatagridRandomValues(element, nbCols, nblignes) setDatagridRandomValues(element, nbCols, nblignes)
};
};

+ 3
- 3
frontend/src/scripts/UI/modal.js ファイルの表示

@ -2,7 +2,7 @@ class Modal {
// TODO : industrialiser en créant une classe // TODO : industrialiser en créant une classe
} }
const modalDialog = document.getElementById(' fiche ');
const modalDialog = document.getElementById(' modal ');
var modal_hooks = []; var modal_hooks = [];
@ -138,7 +138,7 @@ function modalSetFooter(valeur)
*/ */
function open_modal_hook(parametre) function open_modal_hook(parametre)
{ {
console.l og("open_modal_hook pour "+parametre);
myL og("open_modal_hook pour "+parametre);
let hook = null; let hook = null;
let paramSplit = parametre.split(':'); let paramSplit = parametre.split(':');
paramSplit.forEach(element => { paramSplit.forEach(element => {
@ -147,7 +147,7 @@ function open_modal_hook(parametre)
hook = modal_hooks[elemSplit[1]]; hook = modal_hooks[elemSplit[1]];
} }
}); });
if ((hook===null)||(hook===undefined)) hook = modal_hooks[' ITEM '];
if ((hook===null)||(hook===undefined)) hook = modal_hooks[' random '];
return hook(parametre); return hook(parametre);
} }

+ 70
- 351
frontend/src/scripts/default.js ファイルの表示

@ -1,9 +1,7 @@
window.addEventListener('load', function() {
window.scrollTo(0,0);
}, false);
window.addEventListener('load', function() { window.scrollTo(0,0); }, false);
/* /*
* Personnalisation
* Personnalisation HEADER visibility
* Que se passe-t-il lorsque la bannière est invisible ? * Que se passe-t-il lorsque la bannière est invisible ?
*/ */
function setLogoVisiblity(visibilityFlag) { function setLogoVisiblity(visibilityFlag) {
@ -13,31 +11,24 @@
element.style.visibility = value; element.style.visibility = value;
} }
function setNavbarStickOnTop(topFlag) {
let element = document.querySelector("#nav");
if (topFlag) element.style.setProperty('top', '0px');
else element.style.removeProperty('top');
function setSynthesisTopHeight(hauteur) {
let element = document.querySelector("#synthesis_top");
element.style.height = hauteur+'px';
} }
function setDataGridFootSticky(stickyFlag) {
let element = null;
if (stickyFlag) {
//
// Mettre le tfoot sticky au bottom
//
element = document.querySelector("#datagrid>table>tfoot");
element.style.setProperty('position', 'sticky');
element.style.setProperty('bottom', '0px');
element.style.setProperty('z-index', '30');
} else {
element = document.querySelector("#datagrid>table>tfoot");
element.style.setProperty('position', 'relative');
element.style.setProperty('z-index', '10');
}
function headerIsNowVisible(header) {
setLogoVisiblity(false);
setSynthesisTopHeight(6);
}
function headerIsNowInvisible(header) {
setLogoVisiblity(true);
setSynthesisTopHeight(80);
scrollToElement('#synthesis_top');
} }
/* /*
* Personnalisation
* Personnalisation SYNTHESIS visibility
* Que se passe-t-il lorsque la synthèse est invisible ? * Que se passe-t-il lorsque la synthèse est invisible ?
*/ */
function setDatagridFirstColSticky(stickyFlag) { function setDatagridFirstColSticky(stickyFlag) {
@ -94,48 +85,24 @@
} }
} }
function smoothJump(hash) {
location.replace("#" + hash);
}
function documentGetElementById(id){
element = document.getElementById(id);
if (element === null ) return '';
return element.value;
}
function setElementHeight(elementSelector, elementHeight) {
let element = document.querySelector(elementSelector);
element.style.height = elementHeight;
}
function slideElement(elementSelector, elementHeight) {
let element = document.querySelector(elementSelector);
element.style.transition = "all 2s ease-in-out";
setElementHeight(elementSelector, elementHeight);
}
function scrollToElement(elementSelector) {
let element = document.querySelector(elementSelector);
element.scrollIntoView({ behavior: 'smooth' });
}
function gotoHelp() {
scrollToElement('#synthesis');
setTimeout(scrollToElement, 500, '#footer');
}
function setDataGridFootSticky(stickyFlag) {
let element = document.querySelector("#datagrid>table>tfoot");;
if (stickyFlag) {
//
// Mettre le tfoot sticky au bottom
//
element.style.setProperty('position', 'sticky');
element.style.setProperty('bottom', '0px');
element.style.setProperty('z-index', '30');
function gotoTop() {
let element = document.querySelector('header');
window.scrollTo(0, element.offsetHeight + 1);
}
setDataGridHeadSticky(stickyFlag);
function headerIsVisible(flagVisible) {
setLogoVisiblity(!flagVisible);
if (!flagVisible) gotoTop();
} else {
element.style.setProperty('position', 'relative');
element.style.setProperty('z-index', '10');
}
} }
function synthesisTopIsNowVisible(entry) {
function synthesisIsNowVisible(entry) {
setDatagridHeadSticky(false); setDatagridHeadSticky(false);
setDataGridFootSticky(false); setDataGridFootSticky(false);
@ -146,7 +113,7 @@
myLog('Trigger synthesis is visible'); myLog('Trigger synthesis is visible');
} }
function synthesis Top IsNowInvisible(entry) {
function synthesis IsNowInvisible(entry) {
setDatagridHeadSticky(true); setDatagridHeadSticky(true);
setDataGridFootSticky(true); setDataGridFootSticky(true);
@ -157,104 +124,52 @@
myLog('Trigger synthesis is invisible'); myLog('Trigger synthesis is invisible');
} }
function initDatagrid()
{
let type = getContexteValeur('type');
switch(type){
case 'TODO':
initDatagridTodos();
break;
default:
initDatagridItems();
break;
}
}
function changeModeAffichage(valeur, texte)
{
let type='TODO';
switch(valeur){
case 'absences':
case 'releases':
case 'rdv':
case 'feries':
case 'taches':
type='TACHE';
break;
}
setContexteValeur('mode_affichage', valeur);
setContexteValeur('type_courant', type);
setFiltreValeur('type',type);
setFilAriane(['Home', 'List', texte]);
return afficherItems();
function smoothJump(hash) {
location.replace("#" + hash);
} }
function changeModeAffichageEvent(e)
{
return changeModeAffichage(e.target.value, e.target.options[e.target.selectedIndex].text);
function documentGetElementById(id){
element = document.getElementById(id);
if (element === null ) return '';
return element.value;
} }
function changeAffichageItemsTermine(e)
{
setContexteValeur('termine', e.target.value);
setFiltreValeur('status',e.target.value);
afficherItems();
function setElementHeight(elementSelector, elementHeight) {
let element = document.querySelector(elementSelector);
element.style.height = elementHeight;
} }
function changeAffichageItemsPrestations(e)
{
setContexteValeur('prestation', e.target.value);
afficherItems();
function slideElement(elementSelector, elementHeight) {
let element = document.querySelector(elementSelector);
element.style.transition = "all 2s ease-in-out";
setElementHeight(elementSelector, elementHeight);
} }
function changeFiltreClient(e)
{
let valeur = e.target.value;
if (valeur == 'ALL') valeur='';
setContexteValeur('client', valeur);
setFiltreValeur('client', valeur);
afficherItems( );
function scrollToElement(elementSelector) {
let element = document.querySelector(elementSelector);
element.scrollIntoView({ behavior: 'smooth' });
} }
function changeAffichageNiveauxEvent(e)
{
setContexteValeur('level', e.target.value);
setFiltreValeur('level', e.target.value);
function gotoHelp() {
scrollToElement('#synthesis');
setTimeout(scrollToElement, 500, '#footer');
}
afficherItems();
function gotoTop() {
let element = document.querySelector('header');
window.scrollTo(0, element.offsetHeight + 1);
} }
function changeCalendarEvent(e )
function initDatagrid( )
{ {
let valeur = todayStringDate;
switch(parseInt(e.target.value)) {
case 2 :
valeur = todayStringDate.substring(0,4)+'0101';
break;
}
setContexteValeur('debut',valeur);
setFiltreValeur('debut', valeur);
afficherItems();
let fonctionAffichageDataGrid = datagrid_hooks['random'];
datagridLoading();
fonctionAffichageDataGrid();
} }
function updateValue(e) {
if (e.target.value != '') editerItem(-1, e.target.value);
e.target.value = '';
}
function afficher_s ynthese(mode) {
function initSynthese(mode) {
let synthesis_body = document.querySelector('#synthesis_body'); let synthesis_body = document.querySelector('#synthesis_body');
if (synthesis_body) { if (synthesis_body) {
synthesis_body.innerHTML=''; synthesis_body.innerHTML='';
@ -266,7 +181,7 @@
} }
} }
function afficher_f ooter(mode) {
function initF ooter(mode) {
let footer_body = document.querySelector('footer'); let footer_body = document.querySelector('footer');
if (footer_body) { if (footer_body) {
footer_body.innerHTML=''; footer_body.innerHTML='';
@ -279,219 +194,23 @@
} }
function activeMenu(element) { function activeMenu(element) {
datagridEmptyLines(50);
activeMode(element.innerText);
gotoTop();
}
function modeToAffichage(mode)
{
let retour='taches';
switch (mode) {
case 'Releases':
retour='releases';
break;
case 'Hollidays':
retour='feries';
break;
case 'Rendez-Vous':
retour='rdv';
break;
case 'Rendez-Vous':
retour='rdv';
break;
case 'Items':
retour='items';
break;
case 'Project':
retour='prestations';
break;
default:
case 'Tasks':
retour='taches';
break;
}
return retour;
scrollToElement('#synthesis_top');
activeMode(element.innerText);
} }
function activeMode(mode) { function activeMode(mode) {
setContexteValeur('type_courant', 'TODO');
setContexteValeur('items_type', 'items');
switch (mode) {
case 'Tree':
case 'TreeList' :
case 'List':
mode='Tasks';
case 'Tasks':
case 'Releases':
case 'Hollidays':
case 'Rendez-Vous':
case 'Items':
setContexteValeur('mode_feuille', false);
setContexteValeur('type_courant', 'TACHE');
setContexteValeur('mode_affichage', modeToAffichage(mode));
afficher_synthese('taches');
afficher_footer('taches');
setFilAriane(['Home', 'TreeList', mode]);
initDatagridItems();
break;
case 'Project':
setContexteValeur('mode_feuille', false);
setContexteValeur('termine', true);
setContexteValeur('prestation', true);
setContexteValeur('type_courant', 'PRESTATION');
setContexteValeur('mode_affichage', modeToAffichage(mode));
afficher_synthese('project');
afficher_footer('taches');
setFilAriane(['Home', 'Project']);
initDatagridItems();
break;
case 'Plan':
case 'Planning':
setFilAriane([mode]);
setContexteValeur('type_courant', 'TODO');
setContexteValeur('mode_feuille', true);
setContexteValeur('mode_affichage', 'planning');
setContexteValeur('termine', 'non');
afficher_synthese('planning');
afficher_footer('planning');
initDatagridItems();
break;
case 'Calendar':
setFilAriane(['Todo', mode]);
setContexteValeur('mode_feuille', true);
setContexteValeur('mode_affichage', 'calendar_intervenants');
setContexteValeur('debut', todayStringDate);
afficher_synthese('calendrier');
afficher_footer('calendrier');
initDatagridItems();
break;
case 'Administration':
setFilAriane(['Todo', mode]);
initAdministration();
break;
case 'Status':
setFilAriane(['Todo', 'Administration', mode]);
initDatagridStatus();
break;
case 'Clients':
setFilAriane(['Todo', 'Administration', mode]);
initDatagridClients();
break;
case 'Collaborateurs':
setFilAriane(['Todo', 'Administration', mode]);
initDatagridCollaborateurs();
break;
default:
case 'Home':
mode='Todo';
case 'Todo':
setFilAriane(['Home', mode]);
setDefaultContext();
setContexteValeur('type', 'TODO');
setContexteValeur('items_type', 'todos');
setContexteValeur('mode_affichage', 'todos');
setContexteValeur('mode_feuille', true);
setContexteValeur('parent', '1');
afficher_synthese('accueil');
afficher_footer('accueil');
initDatagridItems();
break;
}
}
function initAdministration() {
let element = document.querySelector('#synthesis_middle');
contenu = '<div style="padding:0px 10px;display: flex;flex-wrap: nowrap;justify-content: space-between;">';
contenu += '<a onclick="activeMenu(this)">Status</a>';
contenu += '<a onclick="activeMenu(this)">Clients</a>';
contenu += '<a onclick="activeMenu(this)">Collaborateurs</a>';
contenu += '</div>';
element.innerHTML = contenu;
}
function setDefaultContext()
{
// Contexte de départ
setContexteValeur('level', '9999');
setContexteValeur('parent', '1');
setContexteValeur('parent_level','0');
setContexteValeur('client', '');
setContexteValeur('termine', 'oui');
setFilAriane(['Home']);
if (mode != 'Home') setFilAriane(['Home', mode]);
initDatagrid(mode);
initSynthese(mode);
initFooter(mode);
} }
// UI // UI
setLogoVisiblity(false); setLogoVisiblity(false);
// Contexte de départ // Contexte de départ
setContexteValeur('intervenant', 'Anonymous');
init_filtres(['type','client','debut','fin','level'])
setContexteValeur('user', 'Anonymous');
// GO ! // GO !
activeMode('Todo');
// 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');
}
activeMode('Home');

+ 16
- 7
frontend/src/scripts/tools/logs.js ファイルの表示

@ -1,10 +1,19 @@
var useLog=false;
var useError=true;
const msgLevel = ['log','error','alert'];
function msgConsole(level, message) {
if (msgLevel.includes(level)) {
if ((level == 'error')||(level == 'alert')) console.error(message);
else console.log(message);
}
}
function myLog(message) { function myLog(message) {
if (useLog)
console.log(message);
msgConsole('log',message);
} }
function myError(message) { function myError(message) {
if (useError)
console.error(message);
}
msgConsole('error',message);
}
function myAlert(message) {
msgConsole('alert',message);
}

+ 4
- 0
frontend/src/styles/datagrid.css ファイルの表示

@ -9,6 +9,10 @@
color: var(--couleur-texte); color: var(--couleur-texte);
} }
#atagrid>table>thead {
z-index: 30;
}
#datagrid>table>*>tr>th { #datagrid>table>*>tr>th {
background: var(--couleur-texte); background: var(--couleur-texte);
color: var(--nuance-sombre-02); color: var(--nuance-sombre-02);

+ 2
- 2
frontend/src/styles/synthesis.css ファイルの表示

@ -1,6 +1,5 @@
#synthesis { #synthesis {
position: sticky; position: sticky;
left: 0px;
color: var(--couleur-texte); color: var(--couleur-texte);
background-color: var(--couleur-clair); background-color: var(--couleur-clair);
} }
@ -8,7 +7,6 @@
#synthesis_body { #synthesis_body {
min-height: 100px; min-height: 100px;
position: sticky; position: sticky;
left: 0px;
z-index: 10; z-index: 10;
overflow: auto; overflow: auto;
} }
@ -24,6 +22,8 @@
.statrow { .statrow {
display:flex; display:flex;
width: 100%; width: 100%;
margin-top: 2px;
margin-bottom: 2px;
} }
.statrow>div:hover { .statrow>div:hover {

+ 2
- 1
frontend/src/tools/cscripts.sh ファイルの表示

@ -5,8 +5,9 @@ export src=scripts
sources="" sources=""
sources="$sources tools/delai tools/logs tools/dates tools/postData" sources="$sources tools/delai tools/logs tools/dates tools/postData"
# Commenter les Observer
sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis" sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
sources="$sources UI/modal UI/settings UI/datagrid UI/pomodoro"
sources="$sources UI/CSS UI/modal UI/settings UI/datagrid UI/pomodoro"
sources="$sources UI/calendrier UI/planning" sources="$sources UI/calendrier UI/planning"
sources="$sources filtres contexte parametres ariane" sources="$sources filtres contexte parametres ariane"
sources="$sources api/entities api/status api/clients api/collaborateurs" sources="$sources api/entities api/status api/clients api/collaborateurs"

書き込み プレビュー
読み込み中…
キャンセル
保存