New popup hardware section UI

Author: Rick1080p

css/main.css

@@ -75,6 +75,44 @@ select:hover {
   background-color: var(--color-dark-grey);
 }
 
+
+#multi-select-sensors {
+  padding-right: 0;
+  height: 10rem;
+  border-radius: 8px;
+  border: none;
+  width: 25rem;
+  overflow: auto;
+  scrollbar-width: none; /*For Firefox*/;
+  -ms-overflow-style: none;
+}
+
+#multi-select-sensors > option {
+  white-space: normal;
+  outline-color: var(--color-blue);
+  font-size: 20px;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+}
+
+#multi-select-sensors > option:hover {
+  border: 1px solid var(--color-grey-background-selected-item);
+}
+
+#multi-select-sensors > option:checked {
+  border: 1px solid var(--color-grey-background-selected-item);
+  background-color: transparent;
+}
+
+#multi-select-sensors:hover{
+  background-color: var(--color-grey-background);
+}
+
+#multi-select-label{
+  margin:1em;
+}
+
 canvas {
   /*width: 100% !important;
   height: 100% !important;*/
@@ -676,7 +714,6 @@ textarea:focus {
   height: 68%;
   width: 90%;
   margin: 2vh 0;
-  padding: 1vh 0;
 }
 
 .builder-section-content{
@@ -899,8 +936,7 @@ textarea:focus {
 
 /** HARDWARES SECTION **/
 #hardware-section-builder{
-  gap: 30%;
-  padding-top: 2%;
+  padding-bottom: 2%;
 }
 
 .hardware-radio-label [type=radio] + div {
@@ -1052,4 +1088,94 @@ a{
 a:hover {
   color: var(--color-blue-2);
   text-decoration: none;
+}
+
+/* Button 1 */
+#button-1 .knobs:before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 20px;
+  height: 10px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1;
+  padding: 9px 4px;
+  background-color: #03a9f4;
+  border-radius: 50%;
+  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
+} 
+
+#button-1 .checkbox:checked + .knobs:before {
+  content: "";
+  left: 42px;
+  background-color: rgb(34, 221, 65);
+}
+
+#button-1 .checkbox:checked ~ .layer {
+  background-color: #e5fde5;
+}
+
+#button-1 .knobs,
+#button-1 .knobs:before,
+#button-1 .layer {
+  transition: 0.3s ease all;
+}
+
+.button-toggle.r,
+.button-toggle.r .layer {
+  border-radius: 100px;
+}
+
+.button-toggle {
+  position: relative;
+  top: 0%;
+  width: 74px;
+  height: 36px;
+  margin: -20px auto 0 auto;
+  overflow: hidden;
+}
+
+ .button-cover,
+.knobs,
+.layer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.knobs {
+  z-index: 2;
+}
+
+.layer {
+  width: 100%;
+  background-color: #ebf7fc;
+  transition: 0.3s ease all;
+  z-index: 1;
+}
+
+.checkbox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 3;
+}
+
+#button-toggle-text{
+  margin: 1em;
+}
+
+#new-toggle{
+  padding-left: 20px;
+  width: 8em;
 }

index.html

@@ -172,7 +172,7 @@ <h3>Hardware</h3>
           <div id="hardware-content" class="column builder-section hidden">
             <!-- HARDWARES SELECTION -->
             <div id="hardware-section-builder" class="column center-x center-y builder-section-content ">
-              <div id="hardware-switch-indoor-outdoor" class="row center-x center-y">
+              <div id="hardware-switch-indoor-outdoor" class="row center-x center-y hidden">
                 <label class="hardware-radio-label">
                   <input id="hardware-input-radio-indoor" type="radio" name="switch-indoor-outdoor-builder" value="indoor" checked>
                   <div class="row center-x center-y hardware-switch">
@@ -186,11 +186,33 @@ <h3>Hardware</h3>
                   </div>
                 </label>
               </div>
-              <div id="hardware-sensors-selection" class="row wrap center-x center-y">
+
+              <div class="row">
+                <!-- New Sensor selection -->
+                <div id="new-selector">
+                  <h3 id="multi-select-label" for="multi-select">Select sensor</h3>
+                  <div class="select select--multiple">
+                    <select id="multi-select-sensors" size="3">
+                    <!-- FILLED IN JS WITH CORRECT SENSORS -->
+                    </select>
+                  </div>
+                </div>
+                <!-- Outdoor/Indoor toggle -->
+                <div id="new-toggle">
+                  <p id="button-toggle-text">INDOOR</p>
+                  <div class="button-toggle r" id="button-1">
+                    <input id="toggle-outdoor-indoor" type="checkbox" class="checkbox" />
+                    <div class="knobs"></div>
+                    <div class="layer"></div>
+                  </div>
+                </div>
+              </div>
+
+              <div id="hardware-sensors-selection" class="row wrap center-x center-y hidden">
                 <!-- FILLED IN JS WITH CORRECT SENSORS -->
               </div>
               <div id="hardware-warning-message" class="row center-x wrap hardware-warning-message hidden">
-                <p id="hardware-warning-text" class="warning-text">No hardware setup found,</p><p id="hardware-warning-button" class="text-button">click here to get in touch with our experts.</p>
+                <p id="hardware-warning-text" class="warning-text">No hardware setup found,</p><p id="hardware-warning-button" class="text-button"><a href="https://augmenta.tech/contact/" target="_blank">click here to get in touch with our experts.</a></p>
               </div>
             </div>
             <!-- HARDWARES BUTTONS-->
@@ -493,7 +515,7 @@ <h3>Choose the type.s of sensor.s you want to use</h3>
             <!-- END WIZARD MODAL -->
 
             <img id="tracking-img" src="img/human-tracking.png" alt="Tracking image" class="tracking-img">
-            <h3 id="height-detection-text">Target overlap height detection: HIPS</h3>
+            <h3 id="height-detection-text">Target overlap height detection: Hips</h3>
 
             <!-- TRACKING SECTION IN INSPECTOR -->
             <div id="tracking-section-inspector" class="hidden">