pique moins les yeux

js_native/lxplan_lib_builder.html

@@ -10,6 +10,15 @@
             font-family: Arial, sans-serif;
             margin: 20px;
             line-height: 1.6;
+            background-color: #111;
+            color: #ddd;
+        }
+
+        .container {
+            border: 1px solid #777;
+            border-radius: 5px;
+            margin: 5px;
+            padding: 10px;
         }
 
         textarea {
@@ -25,15 +34,78 @@
             border: none;
             border-radius: 4px;
             cursor: pointer;
+            margin: 20px;
         }
 
         button:hover {
             background-color: #0056b3;
         }
 
+        /** form **/
+        .form-section {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        #mandatoryFields>div,
+        #optionalFields>div {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        label {
+            min-width: 150px;
+            font-weight: bold;
+            margin-right: 15px;
+            text-align: right;
+        }
+
+        input[type="text"],
+        select {
+            flex: 1;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            background-color: #bbbaba;
+        }
+
+        #optionalFields details {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+
+        #optionalFields summary {
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        #saveButton {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 20px;
+        }
+
+        #saveButton:hover {
+            background-color: #45a049;
+        }
+
+
+        /** end form **/
+
         .test-result>span {
             font-weight: bold;
             padding: 5px;
+            border-radius: 5px;
         }
 
         .valid {
@@ -50,13 +122,6 @@
             color: black;
             background-color: white;
         }
-
-        .container {
-            border: 1px solid black;
-            border-radius: 5px;
-            margin: 5px;
-            padding: 10px;
-        }
     </style>
 </head>
 
@@ -92,11 +157,11 @@
         <div>La shape, commence t elle par un groupe ? :<span id="hasGroup" class="test-result">...</span></div>
         <button onclick="loadFile()">Tester le fichier</button>
     </div>
-    <div id="dataFields" class="container" hidden>
+    <div class="container" id="dataFields" hidden>
         <h2>Données de la librairie</h2>
         <div class="form-section">
+            <h3>Champs obligatoires</h3>
             <div id="mandatoryFields">
-                <h3>Champs obligatoires</h3>
                 <div>
                     <label for="name">Type</label>
                     <input type="text" id="name" name="name" required />
@@ -116,15 +181,9 @@
                     </select>
                 </div>
             </div>
-            <div id="optionalFields">
-                <h3>Champs optionnels</h3>
-                <details>
-                    <summary>
-                        Cliquer içi pour editer les champs optionnels
-                    </summary>
-                    <div id="dynamicFields">Selectionner d'abord un type d'appareil</div>
-                </details>
-            </div>
+            <h3>Champs optionnels</h3>
+            <div id="optionalFields">Selectionner d'abord un type d'appareil</div>
+            <h3>Generation du fichier</h3>
             <button id="saveButton" onclick="buildOutput()">Créer la librairie</button>
         </div>
     </div>
@@ -144,7 +203,7 @@
         var hasGroupDiv = document.getElementById("hasGroup");
         var dataFields = document.getElementById("dataFields");
         var dataTypeSelect = document.getElementById('dataType');
-        var dynamicFields = document.getElementById('dynamicFields');
+        var optionalFields = document.getElementById('optionalFields');
 
         // Tableau des options de la liste de sélection
         const selectOptions = [
@@ -238,12 +297,12 @@
         // ecoute si le type d'appareil est changé
         dataTypeSelect.addEventListener("change", () => {
             const selectedOptionId = dataTypeSelect.value;
-            displayDynamicFields(selectedOptionId);
+            displayoptionalFields(selectedOptionId);
         });
 
         // Affiche les champs optionnels en fonction du type d'appareil sélectionné
-        function displayDynamicFields(selectedOptionId) {
-            dynamicFields.innerHTML = "";// Efface les champs précédents
+        function displayoptionalFields(selectedOptionId) {
+            optionalFields.innerHTML = "";// Efface les champs précédents
 
             // Trouve l'option sélectionnée
             const selectedOption = selectOptions.find((option) => option.id === selectedOptionId);
@@ -264,7 +323,7 @@
         <label for="${field.id}">${field.label}:</label>
         <input type="${field.type}" id="${field.id}" name="${field.id}" />
       `;
-                    dynamicFields.appendChild(fieldDiv);
+                    optionalFields.appendChild(fieldDiv);
                 }
             });
         }
@@ -378,7 +437,7 @@
                 alert("Les 4 champs obligatoires doivent être remplis.");
                 return false;
             }
-            getFilledChildren('dynamicFields');
+            getFilledChildren('optionalFields');
             return true;
         }