Changes by admin

Html/html/index.html

@@ -43,7 +43,7 @@
 
 
 <!--    SECTION 2 -->
-    <div class="container-fluid container3">
+    <div class="container-fluid container3 min90">
         <div class="row">
             <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-8">
                 <div class="outside">

Html/html/public/style/style.css

@@ -9,6 +9,7 @@ html,body{
 body{
     overflow: visible;
     flex-wrap: wrap;
+    background: rgb(51, 51, 51) !important;
 }
 /*HEADER */
 *,
@@ -819,4 +820,94 @@ input.checkbox{
 }
 .card-shadow{
     box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
+}
+
+#streaming_status{
+    text-align: left;
+}
+/*SWITCH*/
+/* Style the container to align the labels and switch */
+.toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+/* Style the labels (Off and On) */
+
+.toggle-label {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 15px;
+    margin-right: 5px;
+    margin-left: 5px;
+    text-align: right;
+}
+/* Style the toggle switch (input) */
+.toggle-switch {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 50px;
+    height: 25px;
+    background-color: #ccc;
+    border-radius: 25px;
+    position: relative;
+    transition: background-color 0.3s;
+    cursor: pointer;
+}
+
+/* Circle inside the switch */
+.toggle-switch::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 19px;
+    height: 19px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+}
+/* When checked (toggle to On), change background color and move the circle */
+.toggle-switch:checked {
+    background-color: #0d6efd;
+}
+.toggle-switch:checked::before {
+    transform: translateX(25px);
+}
+.align-right{
+    text-align: right;
+}
+.pass-wrong{
+    /*border-color: red !important;*/
+    box-shadow: rgba(255, 0, 0, 0.5) 0px 1px 0px, rgba(255, 0, 0, 0.5) 0px 0px 8px;
+    /*box-shadow: rgba(255, 0, 0, 0.5) 0px 2px 4px 0px, rgba(255, 0, 0, 0.5) 0px 2px 16px 0px;*/
+}
+.min90{
+    min-height: 80vh;
+}
+.container.align-right {
+    display: flex;
+    justify-content: flex-end;
+}
+
+select {
+    -webkit-appearance: none;  /* Remove default appearance in WebKit browsers */
+    -moz-appearance: none;     /* Remove default appearance in Firefox */
+    appearance: none;          /* Remove default appearance in other browsers */
+    padding-right: 30px;       /* Space for the arrow */
+    border: 1px solid #ccc;    /* Border around the select */
+    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zY3JlZW4vZGVmYXVsdCIgY2xhc3M9InN0b2NrdmlldyI+PHBhdGggZD0iTTEuMzgzMiwyLjU5MjUgTDIuMzEzMywxLjYwNjggTDAsMS42MDAyMyBMIDAsMiBMMi4zMzczOCwxLjYwNjggTDYuMzcwMiwzLjM4NDIiIHN0eWxlPSJzdHJva2U6IzAwMDAwMDA7c3Ryb2tlLXdpZHRoOjEuNzgzMTtzdHJva2UtbGluZWNhcDpyb3VuZDsgc3Ryb2tlLW1vcjp1cmwoI3N0b2NrdmlldyIgc3Ryb2tlLXBhZGRpbmc6IDE3cHggIj48L3BhdGg+PC9zdmc+')
+    no-repeat right 10px center;  /* Custom arrow icon */
+    background-size: 12px;
+    border-color: black;
+    border-width: 30px;
+    color: black;
+}
+.icon-system{
+    margin-top: -13px;
+}
+.padleft{
+    padding-left: 3px;
 }

Html/html/setting.html

@@ -41,9 +41,10 @@
     </nav>
 
     <!--    SECTION 2 -->
-    <div class="container-fluid container-setting">
+    <div class="container-fluid container-setting min90">
+        <br>
         <div class="container">
-            <div class="card mt-5 card-shadow">
+            <div class="card card-shadow">
                 <div class="card-header bg-secondary text-light">
                     <h5 class="text-md-center">Audio Files</h5>
                 </div>