Update static/browser_detect.css

static/browser_detect.css

@@ -1,3 +1,5 @@
+nooo insde here 
+
 * {
   box-sizing: border-box;
 }
@@ -13,6 +15,7 @@ body {
   position: relative;
 }
 
+
 #predicted_result {
   position: relative;
   text-align: left;
@@ -24,6 +27,7 @@ body {
   font-weight: bold;
   color: #DFDFDF;
   overflow: hidden;
+  
 }
 
 .mode_switch_modeBtn {
@@ -33,10 +37,12 @@ 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 {
@@ -52,63 +58,65 @@ body {
 
 @keyframes pulse {
   0% {
-    background-color: #F3F3F3;
+    background-color: #F3F3F3; /* Original background color */
     box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   }
   50% {
-    background-color: #eeffed;
-    box-shadow: 0px 0px 30px 10px #6eff6e6c;
+     background-color: #eeffed; /* Green color for pulse */
+    box-shadow: 0px 0px 30px 10px #6eff6e6c; /* Optional: stronger shadow */
   }
   100% {
-    background-color: #F3F3F3;
+    background-color: #F3F3F3; /* Return to original color */
     box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   }
 }
 
 .pulse {
-  animation: pulse 0.6s ease-in-out 1;
+  animation: pulse 0.6s ease-in-out 1; /* Duration, timing function, and iteration count */
 }
 
-.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;
@@ -118,6 +126,7 @@ body {
   width: 100%;
   border: none;
   font-size: 15px;
+
 }
 
 .wrapper_text {
@@ -141,6 +150,7 @@ body {
   box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
   margin: 10px;
   margin-bottom: 20px;
+
   border-radius: 15px;
   overflow: hidden;
 }
@@ -157,55 +167,56 @@ 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% {
@@ -221,7 +232,6 @@ body {
     background-position: 0% 50%;
   }
 }
-
 #webcamButton {
   margin: 0;
   position: absolute;
@@ -232,7 +242,9 @@ body {
   padding: 10px;
   border: none;
   border-radius: 12.25px;
-  background: rgb(0, 27, 64);
+  background: rgb(0,27,64);
+  background-size: 400% 400%;
+  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);
@@ -247,151 +259,121 @@ 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: flex-end;
+  justify-content: space-evenly;
   flex-direction: row;
   font-family: roboto;
-  z-index: 10;
-  left: 0;
-  gap: 10px;
+  z-index:10;
+  left:0;
 }
-
-.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: 5px;
-  margin-bottom: 10px;
+  gap:5x;
+  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;
-  border-radius: 12.25px;
-  background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 50%, #d6505e 100%);
-  border: none;
-  color: #fcfcfc;
-  cursor: pointer;
-  font-weight: 600;
-  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
-  transition: all 0.3s ease;
-}
-
-#goDigitsBtn:hover {
-  transform: scale(1.05);
-  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;
@@ -404,7 +386,7 @@ select {
   height: 34px;
 }
 
-.switch input {
+.switch input { 
   opacity: 0;
   width: 0;
   height: 0;
@@ -455,4 +437,22 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
+}
+
+#goDigitsBtn {
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 12.25px;
+  background: linear-gradient(45deg, #a8404b 0%, #ff6e7d 50%, #d6505e 100%);
+  border: none;
+  color: #fcfcfc;
+  cursor: pointer;
+  font-weight: 600;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease;
+}
+
+#goDigitsBtn:hover {
+  transform: scale(1.05);
+  background: linear-gradient(45deg, #d6505e 0%, #ff6e7d 50%, #a8404b 100%);
 }