diff --git a/Html/html/index.html b/Html/html/index.html index 1671af3..48069a8 100644 --- a/Html/html/index.html +++ b/Html/html/index.html @@ -43,7 +43,7 @@ -
+
diff --git a/Html/html/public/style/style.css b/Html/html/public/style/style.css index bb98d18..3435585 100644 --- a/Html/html/public/style/style.css +++ b/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; } \ No newline at end of file diff --git a/Html/html/setting.html b/Html/html/setting.html index 67f3500..4e5736d 100644 --- a/Html/html/setting.html +++ b/Html/html/setting.html @@ -41,9 +41,10 @@ -
+
+
-
+
Audio Files