Add partner and useful resources sections

pantaflex44 · Jun 2, 2024 · 65dfd10 · 65dfd10
1 parent befafcf
commit 65dfd10
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.3.4] - 2024-06-02
+
+### Modifications
+
+- Nouvelle règle d'écriture de l'identifiant d'un module: de 0 à 255 caracatères composés de a-Z A-Z 0-9 _
+
+
 ## [1.3.3] - 2024-06-02
 
 ### Améliorations

diff --git a/index.html b/index.html
@@ -2,49 +2,145 @@
 <html lang="fr">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <title>Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</title>
-  <meta name="description" content="Générateur d'étiquettes pour tableaux / armoires électriques." />
-  <meta name="author" content="Christophe LEMOINE" />
-  <meta name="robots" content="index,follow" />
-
-  <link rel="icon" type="image/svg+xml" href="https://pantaflex44.github.io/Tiquettes/favicon.svg" />
-
-  <!-- Google Tag Manager -->
-  <script>(function (w, d, s, l, i) {
-      w[l] = w[l] || []; w[l].push({
-        'gtm.start':
-          new Date().getTime(), event: 'gtm.js'
-      }); var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-5RQFTV94');</script>
-  <!-- End Google Tag Manager -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</title>
+    <meta name="description" content="Générateur d'étiquettes pour tableaux / armoires électriques." />
+    <meta name="author" content="Christophe LEMOINE" />
+    <meta name="robots" content="index,follow" />
+
+    <link rel="icon" type="image/svg+xml" href="https://pantaflex44.github.io/Tiquettes/favicon.svg" />
+
+    <!-- Google Tag Manager -->
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-5RQFTV94');</script>
+    <!-- End Google Tag Manager -->
 </head>
 
 <body>
-  <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5RQFTV94" height="0" width="0"
-      style="display:none;visibility:hidden"></iframe></noscript>
-  <!-- End Google Tag Manager (noscript) -->
-
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-378MBJK77W"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-
-    gtag('config', 'G-378MBJK77W');
-  </script>
-
-  <h1 style="display: none;">Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</h1>
-  <p style="display: none;">Tiquettes est une application web permettant de créer facilement de belles étiquettes pour
-    les tableaux et armoires électriques.</p>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5RQFTV94" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-378MBJK77W"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-378MBJK77W');
+    </script>
+
+    <h1 style="display: none;">Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</h1>
+    <p style="display: none;">Tiquettes est une application web permettant de créer facilement de belles étiquettes pour
+        les tableaux et armoires électriques.</p>
+
+    <div id="content">
+        <div id="root"></div>
+
+        <div class="box">
+            <h4>
+                <img src="./network.svg" width="20" height="20" alt="Un domaine, un réseau, des partenaires" />
+                <span>Un domaine, un réseau, des partenaires</span>
+            </h4>
+            <ul class="box_list">
+                <li>
+                    <div class="box_list_title">VOLTA Electricité</div>
+                    <div class="box_list_description">
+                        Site dédié à l'électricité industrielle, bâtiment et bricolage. Les principaux savants,
+                        téléchargements gratuits de
+                        formulaires sous Excel, des schémas électriques, des infos sur l'appareillage électrique, forum
+                        d'aide, photos
+                        d'électricité gratuites, calculettes... Dépôt gratuit de petites annonces d'offre ou demande
+                        d'emploi.
+                    </div>
+                    <a class="box_list_link" href="https://www.volta-electricite.info/index.php" target="_blank"
+                        rel="noopener">
+                        https://www.volta-electricite.info/index.php
+                    </a>
+                </li>
+                <li>
+                    <div class="box_list_title">BricoZone</div>
+                    <div class="box_list_description">
+                        La plus grande source d'information sur la Rénovation et le Bricolage en Belgique
+                    </div>
+                    <a class="box_list_link" href="https://www.bricozone.be" target="_blank" rel="noopener">
+                        https://www.bricozone.be (original)
+                    </a>
+                    <a class="box_list_link" href="https://www.bricozone.fr" target="_blank" rel="noopener">
+                        https://www.bricozone.fr (pour la France)
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+
+        <div class="box">
+            <h4>
+                <img src="./resources.svg" width="20" height="20" alt="Ressources utiles" />
+                <span>Ressources utiles</span>
+            </h4>
+            <ul class="box_list">
+                <li>
+                    <div class="box_list_title">NFC 15-100 (France)</div>
+                    <div class="box_list_description">
+                        La norme NF C 15-100 fixe les règles de conception, de réalisation et d’entretien des
+                        installations électriques basse
+                        tension en France. Elle veut ainsi offrir aux occupants une sécurité optimale et une garantie de
+                        bon fonctionnement.
+                        Toutes les installations, neuves ou entièrement rénovées, doivent respecter cette norme.
+                    </div>
+                    <a class="box_list_link"
+                        href="https://assets.legrand.com/editorial/legrandfr/outils/documentations-et-guides/legrand-guide-norme-nf-c-15-100.pdf"
+                        target="_blank" rel="noopener">
+                        Les points clefs (pdf)
+                    </a>
+                    <a class="box_list_link"
+                        href="https://go.schneider-electric.com/FR_202104_HOME_GC_Guide-NFC-15100_LP2023.html?utm_source=google&utm_campaign=fra_go_sem_nb_ph_local-hd-electricians-nfc15100&utm_term=%7Bkeyword%7D"
+                        target="_blank" rel="noopener">
+                        Le guide
+                    </a>
+                </li>
+                <li>
+                    <div class="box_list_title">NFC 18-510 (France)</div>
+                    <div class="box_list_description">
+                        La norme propose des mesuresde prévention en vue d'assurer la sécurité des personnes contre les
+                        dangers d'origine électrique, lorsqu'elles effectuent un travail ou une intervention dans un
+                        environement électrique.
+                    </div>
+                    <a class="box_list_link"
+                        href="https://www.upf.pf/sites/default/files/inrs_electricitenorme_2.pdf"
+                        target="_blank" rel="noopener">
+                        Le livret (pdf)
+                    </a>
+                </li>
+                <li>
+                    <div class="box_list_title">RGIE (Belgique)</div>
+                    <div class="box_list_description">
+                        Lors de l'installation, de la mise en service, du contrôle et de la maintenance d'une
+                        installation électrique, des
+                        règles strictes doivent être respectées.
+                    </div>
+                    <a class="box_list_link" href="https://economie.fgov.be/fr/publications/reglement-general-sur-les"
+                        target="_blank" rel="noopener">
+                        Règlement général sur les installations électriques (RGIE) - Livres 1, 2 et 3
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+
+    <script type="module" src="/src/main.jsx"></script>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tiquettes",
   "title": "Tiquettes",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Générateur d'étiquettes pour tableaux et armoires électriques.",
   "keywords": [
     "tableau",

diff --git a/public/network.svg b/public/network.svg
diff --git a/public/resources.svg b/public/resources.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -256,7 +256,7 @@ function App() {
         const icon = editor.currentModule.icon;
         const text = editor.currentModule.text.trim();
 
-        if (!(/[a-zA-Z0-9.]{2,}/.test(id))) {
+        if (!(/\w*/.test(id))) {
             setEditor((old) => ({
                 ...old,
                 currentModule: { ...old.currentModule, id: "" },

diff --git a/src/app.css b/src/app.css
@@ -61,11 +61,11 @@ h4 {
     flex-direction: column;
     flex-wrap: nowrap;
     gap: 2em;
-    margin-block: 2em;
-    overflow-x: scroll;
+    margin-top: 2em;
+    overflow-x: auto;
     padding-bottom: 2em;
-    border: 1px solid lightgray;
-    border-radius: 3px;
+    border: 1px solid darkgray;
+    border-radius: 7px;
     padding: 2em;
 }
 

diff --git a/src/main.css b/src/main.css
@@ -9,11 +9,27 @@ body {
     margin: 0;
 }
 
-main {
-    width: calc(100% - 2em);
-    max-width: 1152px;
+#content {
     margin-inline: auto;
     padding-inline: 1em;
+    width: 1152px;
+    max-width: calc(100% - 2em);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 2em;
+    justify-content: start;
+    align-items: start;
+    margin-bottom: 2em;
+}
+
+#root {
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+main {
+    width: 100%;
 }
 
 h1 {
@@ -89,12 +105,85 @@ input[type="file"]::-webkit-file-upload-button {
     min-height: 28px;
 }
 
+.box {
+    width: calc(100% - 2em);
+    padding: 1em;
+    border: 1px solid darkgray;
+    border-radius: 7px;
+}
+
+.box h4 {
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: start;
+    align-items: center;
+    gap: 0.5em;
+    margin-bottom: 1em;
+    padding: 0;
+}
+
+.box .box_list {
+    list-style: none;
+    margin: 0;
+    padding: 0em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    align-items: stretch;
+    gap: 2em;
+}
+
+.box .box_list li {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: start;
+    align-items: stretch;
+    gap: 0.5em;
+    padding: 1em;
+    width: calc(350px - 2em);
+    max-width: calc(100% - 2em);
+}
+
+.box .box_list li:hover {
+    background-color: #f0f0f0;
+}
+
+.box .box_list .box_list_title {
+    font-size: normal;
+    font-weight: bold;
+}
+
+.box .box_list .box_list_description {
+    font-size: small;
+    line-height: 1.3;
+}
+
+.box .box_list .box_list_link,
+.box .box_list .box_list_link:visited {
+    color: darkcyan;
+    font-size: smaller;
+    font-weight: bold;
+}
+
 @media print {
+    #content, #root, main {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        max-width: initial;
+    }
+
     main {
         width: calc(100% - 10mm);
-        margin: 0;
         padding: 10mm;
-        max-width: initial;
+    }
+
+    .box {
+        display: none;
     }
 
     h1, h6 {

diff --git a/src/main.jsx b/src/main.jsx
@@ -21,7 +21,7 @@ export default function Main() {
                 <h6>by pantaflex44</h6>
                 <h3 className='description'>{pkg.description}</h3>
                 <App />
-                <div style={{ marginTop: '5em', marginBottom: '2em', fontSize: 'small', color: 'darkgray' }} className='footer'>{pkg.title} {pkg.version} | <a href={pkg.repository.url} target="_blank">{pkg.repository.url}</a> | Licence {pkg.license} | {pkg.author} (pantaflex44) | 2024</div>
+                <div style={{ marginTop: '1em', fontSize: 'small', color: 'darkgray' }} className='footer'>{pkg.title} {pkg.version} | <a href={pkg.repository.url} target="_blank">{pkg.repository.url}</a> | Licence {pkg.license} | {pkg.author} (pantaflex44) | 2024</div>
             </main>
         </React.StrictMode>)
         ;