Update static/browser_detect.css

static/browser_detect.css

@@ -13,7 +13,6 @@ body {
   position: relative;
 }
 
-
 #predicted_result {
   position: relative;
   text-align: left;
@@ -25,7 +24,6 @@ body {
   font-weight: bold;
   color: #DFDFDF;
   overflow: hidden;
-  
 }
 
 .mode_switch_modeBtn {
@@ -35,12 +33,10 @@ body {
   border-radius: 12.5px;
   color: #000000;
   font-weight: 600;
-  
   min-width: 60px;
-  height:45px;
+  height: 45px;
   line-height: 40px;
   text-align: center;
-  
 }
 
 .wrapper_result {
@@ -56,65 +52,63 @@ body {
 
 @keyframes pulse {
   0% {
-    background-color: #F3F3F3; /* Original background color */
+    background-color: #F3F3F3;
     box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   }
   50% {
-     background-color: #eeffed; /* Green color for pulse */
-    box-shadow: 0px 0px 30px 10px #6eff6e6c; /* Optional: stronger shadow */
+    background-color: #eeffed;
+    box-shadow: 0px 0px 30px 10px #6eff6e6c;
   }
   100% {
-    background-color: #F3F3F3; /* Return to original color */
+    background-color: #F3F3F3;
     box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   }
 }
 
 .pulse {
-  animation: pulse 0.6s ease-in-out 1; /* Duration, timing function, and iteration count */
+  animation: pulse 0.6s ease-in-out 1;
 }
 
-.mode_selector{
-  position:absolute;
-  width:75px;
-  height:35px;
+.mode_selector {
+  position: absolute;
+  width: 75px;
+  height: 35px;
   background: #ff6e7d75;
   border-radius: 15px;
-  top:5px;
+  top: 5px;
   left: 5px;
   transition: all 0.25s ease-out;
   z-index: 10;
 }
 
-.mode_switch{
+.mode_switch {
   overflow: hidden;
   position: relative;
   text-align: left;
-  height:45px;
+  height: 45px;
   background-color: #ffffff2e;
   backdrop-filter: blur(30px);
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
-  
   justify-content: space-evenly;
   border-radius: 15px;
-  gap:10px;
+  gap: 10px;
   width: 160px;
-    
 }
 
-.right{
-  left:80px;
+.right {
+  left: 80px;
 }
-.mode_switch_wrapper{
+
+.mode_switch_wrapper {
   position: absolute;
-  bottom:10px;
-  width:100%;
+  bottom: 10px;
+  width: 100%;
 }
 
 #text {
   text-align: center;
   padding: 10px;
   background-color: #d9d9d9;
-
   margin: none;
   margin-top: 0px;
   border-radius: 12.25px;
@@ -124,7 +118,6 @@ body {
   width: 100%;
   border: none;
   font-size: 15px;
-
 }
 
 .wrapper_text {
@@ -148,7 +141,6 @@ body {
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
   margin: 10px;
   margin-bottom: 20px;
-
   border-radius: 15px;
   overflow: hidden;
 }
@@ -165,56 +157,55 @@ body {
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 12.25px;
-  flex:2;
+  flex: 2;
   display: flex;
   align-items: center;
-  gap:10px;
-  justify-content:center;
-  background: rgb(0,27,64);
+  gap: 10px;
+  justify-content: center;
+  background: rgb(0, 27, 64);
   background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 33%, #d6505e 66%, #a8404b 100%);
   font-size: large;
   border: none;
   color: #fcfcfc;
   background-size: 200% 200%;
-  /*animation: mystical 10s ease infinite; /* Animation */
 }
+
 #undoButton {
   margin-top: 5px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 12.25px;
-  flex:1;
+  flex: 1;
   display: flex;
   align-items: center;
-  gap:10px;
-  justify-content:center;
+  gap: 10px;
+  justify-content: center;
   background: #5d5d5d;
   font-size: large;
   border: none;
   color: #fcfcfc;
   background-size: 200% 200%;
-  /*animation: mystical 10s ease infinite; /* Animation */
 }
+
 #clearButton {
   margin-top: 5px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 12.25px;
-  flex:1;
+  flex: 1;
   display: flex;
   align-items: center;
-  gap:10px;
-  justify-content:center;
+  gap: 10px;
+  justify-content: center;
   background: #5d5d5d;
   font-size: large;
   border: none;
   color: #fcfcfc;
   background-size: 200% 200%;
-  /*animation: mystical 10s ease infinite; /* Animation */
 }
 
 @keyframes mystical {
-   0% {
+  0% {
     background-position: 0% 50%;
   }
   25% {
@@ -230,6 +221,7 @@ body {
     background-position: 0% 50%;
   }
 }
+
 #webcamButton {
   margin: 0;
   position: absolute;
@@ -240,9 +232,7 @@ body {
   padding: 10px;
   border: none;
   border-radius: 12.25px;
-  background: rgb(0,27,64);
-  background-size: 400% 400%;
-  background: rgb(0,27,64);
+  background: rgb(0, 27, 64);
   background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 33%, #d6505e 66%, #a8404b 100%);
   color: rgb(233, 251, 255);
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
@@ -257,99 +247,110 @@ body {
   background-color: #fcfcfc;
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
   width: 100%;
-  display:flex;
+  display: flex;
   align-items: center;
-  justify-content: space-evenly;
+  justify-content: flex-end;
   flex-direction: row;
   font-family: roboto;
-  z-index:10;
-  left:0;
+  z-index: 10;
+  left: 0;
+  gap: 10px;
 }
-.bottom-nav-btn{
+
+.bottom-nav-btn {
   flex-direction: row;
   display: flex;
   align-items: center;
   justify-content: center;
-
 }
 
-.center-btn{
+.center-btn {
   border-radius: 30px;
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
   background-size: 400% 400%;
-background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 50%, #d6505e 100%);
-opacity: 1;
+  background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 50%, #d6505e 100%);
+  opacity: 1;
   height: 60px;
   width: 80px;
   background-position: 0% 50%;
   transition: all 0.1s ease;
 }
 
-.about-card{
-  padding:10px;
+.about-card {
+  padding: 10px;
   border-radius: 10px;
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
-  display:flex;
+  display: flex;
   flex-direction: column;
-  gap:5x;
-  margin-bottom:10px;
+  gap: 5px;
+  margin-bottom: 10px;
   overflow: hidden;
 }
-.about-card span:nth-child(1){
+
+.about-card span:nth-child(1) {
   font-size: 20px;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 700;
 }
-.about-card label:nth-child(1){
+
+.about-card label:nth-child(1) {
   font-size: 20px;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 700;
 }
-.about-card span:nth-child(2){
+
+.about-card span:nth-child(2) {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: 12px;
   font-weight: 700;
 }
-h1{
+
+h1 {
   font-size: 30px;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 700;
 }
-#info-page{
+
+#info-page {
   margin-bottom: 200px;
 }
-#speechForm{
+
+#speechForm {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 700;
   padding-left: 10px;
   padding-right: 10px;
 }
-select{
+
+select {
   margin-top: 5px;
-  width:100%;
+  width: 100%;
   border-radius: 5px;
   border: none;
-  padding:5px;
+  padding: 5px;
   background-color: #d9d9d9;
 }
-#speechForm button{
+
+#speechForm button {
   margin-top: 5px;
-  width:100%;
+  width: 100%;
   border-radius: 5px;
   border: none;
-  color:#fcfcfc;
-  padding:5px;
+  color: #fcfcfc;
+  padding: 5px;
   background-color: #f96a79;
 }
-#testText{
+
+#testText {
   margin-top: 5px;
-  width:100%;
+  width: 100%;
   border-radius: 5px;
   border: none;
   resize: none;
-  padding:5px;
+  padding: 5px;
   background-color: #d9d9d9;
 }
+
 #goDigitsBtn {
   padding: 10px 20px;
   font-size: 16px;
@@ -368,27 +369,29 @@ select{
   background: linear-gradient(45deg, #d6505e 0%, #ff6e7d 50%, #a8404b 100%);
 }
 
-#settings-page{
+#settings-page {
   position: relative;
-overflow-x: hidden;
-margin: -8px;
-padding-bottom: 20px;
-margin-bottom: 40px;
+  overflow-x: hidden;
+  margin: -8px;
+  padding-bottom: 20px;
+  margin-bottom: 40px;
 }
-.settings-btn{
+
+.settings-btn {
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.settings-header{
+.settings-header {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 700;
   font-size: 30px;
 }
-.textControls{
+
+.textControls {
   display: flex;
-  gap:8px;
+  gap: 8px;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
@@ -401,7 +404,7 @@ margin-bottom: 40px;
   height: 34px;
 }
 
-.switch input { 
+.switch input {
   opacity: 0;
   width: 0;
   height: 0;
@@ -452,5 +455,4 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
-}
-
+}