Update app.py

app.py

@@ -42,13 +42,17 @@ def read_qr(img):
 # Custom CSS styling as HTML for dark mode
 custom_css = """
 <style>
-    body {background-color: #1e1e2f; font-family: Arial, sans-serif; color: #e0e0e0;}
-    .gradio-container {max-width: 600px; margin: auto; padding: 20px; background-color: #2c2c3e; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}
-    h1, h2 {text-align: center; color: #f0f0f0; font-weight: 600;}
-    .gr-button {background-color: #3a3a4f; color: #e0e0e0; padding: 10px 20px; border-radius: 5px; font-size: 15px; border: none;}
-    .gr-button:hover {background-color: #505068;}
-    input, textarea, .gr-box {background-color: #3a3a4f; border: 1px solid #555; border-radius: 5px; padding: 10px; font-size: 14px; color: #e0e0e0;}
+    body {background-color: #1e1e2f; font-family: 'Arial', sans-serif; color: #e0e0e0;}
+    .gradio-container {max-width: 700px; margin: auto; padding: 25px; background-color: #2c2c3e; 
+                       border-radius: 15px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);}
+    h1, h2 {text-align: center; color: #ffffff; font-weight: bold; margin-bottom: 15px;}
+    .gr-button {background-color: #4a4a6a; color: #ffffff; padding: 10px 25px; border-radius: 8px; 
+                font-size: 16px; border: none; transition: 0.3s;}
+    .gr-button:hover {background-color: #6a6a8a; transform: scale(1.05);}
+    input, textarea, .gr-box {background-color: #3a3a4f; border: 1px solid #555; border-radius: 10px; 
+                              padding: 10px; font-size: 14px; color: #e0e0e0;}
     .gr-box:hover, input:hover, textarea:hover {border-color: #777;}
+    .tab {margin-top: 20px;}
 </style>
 """
 
@@ -61,6 +65,7 @@ def create_gradio_interface():
         outputs=gr.Image(label="Generated QR Code"),
         title="Generate QR Code",
         description="Quickly create a QR code from any text or URL.",
+        theme="compact",
     )
 
     # QR Code Reader Interface
@@ -70,6 +75,7 @@ def create_gradio_interface():
         outputs=gr.Textbox(label="Decoded Data"),
         title="Read QR Code",
         description="Upload an image with a QR code to decode the embedded data.",
+        theme="compact",
     )
 
     # Combine interfaces into a single tabbed layout
@@ -81,9 +87,10 @@ def create_gradio_interface():
     # Launch interface with custom HTML for CSS styling
     with gr.Blocks() as demo:
         gr.HTML(custom_css)  # Embed the custom CSS
+        gr.Markdown("# QR Code Tool\nEasily generate and decode QR codes.")
         interface.render()
 
     demo.launch(share=True)
 
 # Run the Gradio interface
-create_gradio_interface()
+create_gradio_interface()