Update frontend/style.css

frontend/style.css

@@ -1,26 +1,74 @@
-body {
-    font-family: Arial, sans-serif;
-    text-align: center;
-    background-color: #f4f4f4;
-    margin: 20px;
-}
-
-h1 {
-    color: #333;
-}
-
-input, button {
-    padding: 10px;
-    margin: 10px;
-    font-size: 16px;
-}
-
-pre {
-    background: white;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: left;
-    max-width: 600px;
-    margin: 20px auto;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+
+body {
+  font-family: "Poppins", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.tab-button.active {
+  color: #7c3aed;
+  border-bottom: 2px solid #7c3aed;
+}
+
+.tab-button:not(.active) {
+  border-bottom: 2px solid transparent;
+}
+
+#output {
+  font-family: monospace;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c4b5fd;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a78bfa;
+}
+
+/* Animation for notifications */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.notification {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+/* Language selection styles */
+#translationOptions {
+  transition: all 0.3s ease;
+}
+
+#translationOptions.hidden {
+  display: none;
+}
+
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem center;
+  background-size: 1em;
+  padding-right: 2.5rem;
+}