From fb2e23591dbe015f57c2b945ff118bf41920a78e Mon Sep 17 00:00:00 2001
From: Mathieu Livebardon <mathieu.livebardon@universite-lyon.fr>
Date: Thu, 6 Jun 2024 15:36:42 +0200
Subject: [PATCH] feat(space_time_shape): color for deciders

---
 examples/assets/css/space_time_shape.css | 42 ++++++++++++++++++++++++
 examples/space_time_shape.html           | 24 +++++++++-----
 2 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 examples/assets/css/space_time_shape.css

diff --git a/examples/assets/css/space_time_shape.css b/examples/assets/css/space_time_shape.css
new file mode 100644
index 000000000..b8780b62c
--- /dev/null
+++ b/examples/assets/css/space_time_shape.css
@@ -0,0 +1,42 @@
+#stp_ui {
+  position: absolute;
+  display: grid;
+  left: 0%;
+  top: 0%;
+  z-index: 10;
+  background-color: #f5f5f5c2;
+}
+
+#stp_ui > div label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+#stp_ui > div input[type='text'],
+#stp_ui > div select {
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  text-transform: capitalize;
+}
+
+#stp_ui > div select {
+  appearance: none;
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 1rem;
+  padding-right: 2rem;
+}
+
+#stp_ui > div input[type='checkbox'] {
+  margin-right: 0.5rem;
+}
+
+#stp_ui > div input[type='text']:focus,
+#stp_ui > div select:focus {
+  outline: none;
+  border-color: #666;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
diff --git a/examples/space_time_shape.html b/examples/space_time_shape.html
index 81511c0a5..3c033fb26 100644
--- a/examples/space_time_shape.html
+++ b/examples/space_time_shape.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./assets/css/examples.css" />
+    <link rel="stylesheet" href="./assets/css/space_time_shape.css" />
     <link rel="stylesheet" href="./assets/css/loading_screen.css" />
   </head>
 
@@ -111,12 +112,17 @@
 
           // CREATE HTML
           const ui = document.createElement('div');
+          ui.id = 'stp_ui';
           document.body.appendChild(ui);
-          ui.style =
-            'position: absolute; display: grid; left: 0%; top: 0%; z-index:10';
+
+          const divSelect = document.createElement('div');
+          ui.appendChild(divSelect);
+
+          const divUiSTS = document.createElement('div');
+          ui.appendChild(divUiSTS);
 
           const selectDataset = document.createElement('select');
-          ui.appendChild(selectDataset);
+          divSelect.appendChild(selectDataset);
           const optionDefaultDataset = document.createElement('option');
           optionDefaultDataset.innerText = 'Choose a dataset';
           optionDefaultDataset.selected = true;
@@ -155,7 +161,7 @@
 
           const selectMode = document.createElement('select');
           selectMode.hidden = true;
-          ui.appendChild(selectMode);
+          divSelect.appendChild(selectMode);
           const optionDefaultMode = document.createElement('option');
           optionDefaultMode.innerText = 'Choose a Mode';
           optionDefaultMode.selected = true;
@@ -178,7 +184,7 @@
 
           const selectSTShape = document.createElement('select');
           selectSTShape.hidden = true;
-          ui.appendChild(selectSTShape);
+          divSelect.appendChild(selectSTShape);
           const optionDefaultShape = document.createElement('option');
           optionDefaultShape.innerText = 'Choose a Shape';
           optionDefaultShape.disabled = true;
@@ -193,7 +199,7 @@
 
           const uiCircle = document.createElement('div');
           uiCircle.hidden = true;
-          ui.appendChild(uiCircle);
+          divUiSTS.appendChild(uiCircle);
 
           const radiusParameterLabel = document.createElement('label');
           radiusParameterLabel.innerText = 'Radius';
@@ -233,7 +239,7 @@
 
           const uiVector = document.createElement('div');
           uiVector.hidden = true;
-          ui.appendChild(uiVector);
+          divUiSTS.appendChild(uiVector);
 
           const deltaLabel = document.createElement('label');
           deltaLabel.innerText = 'Delta';
@@ -259,7 +265,7 @@
 
           const uiHelix = document.createElement('div');
           uiHelix.hidden = true;
-          ui.appendChild(uiHelix);
+          divUiSTS.appendChild(uiHelix);
 
           const helixDeltaLabel = document.createElement('label');
           helixDeltaLabel.innerText = 'Delta';
@@ -285,7 +291,7 @@
 
           const uiParabola = document.createElement('div');
           uiParabola.hidden = true;
-          ui.appendChild(uiParabola);
+          divUiSTS.appendChild(uiParabola);
 
           const labelDistAxisX = document.createElement('label');
           labelDistAxisX.innerText = 'Distance on X axis';