Update static/css/design.css

static/css/design.css

@@ -1,5 +1,8 @@
 body {
   overflow: hidden;
+  background-color: #121212; /* Dark background for the whole app */
+  color: #ffffff; /* Light text color for better contrast */
+  font-family: Arial, sans-serif; /* Optional: Set a default font for better appearance */
 }
 
 .mic-container {
@@ -13,7 +16,7 @@ body {
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    background: #4b83ad;
+    background: #ffffff; /* Initial color of the microphone circle #4b83ad */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -39,7 +42,7 @@ body {
   }
 
   .circle.active {
-    background: #ff0000;
+    background: #ff0000; /* Active color of the microphone circle */
 
     &:before {
       background: gray;
@@ -72,8 +75,28 @@ body {
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.8); /* Dark background for the output container */
+  color: #ffffff; /* Light text color for the output container */
   border-radius: 10px;
   padding: 10px 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+}
+
+/* Style for the audio player container */
+#audioPlayerContainer {
+  position: fixed;
+  bottom: 80px; /* Adjust position based on your needs */
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8); /* Dark background */
+  color: #ffffff; /* Light text color */
+  border-radius: 10px;
+  padding: 10px 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  display: none; /* Initially hidden */
+}
+
+#audioPlayer {
+  width: 100%;
+  /* Adjust styles for the audio player if needed */
 }