Refine tips layout

app.py

@@ -400,8 +400,26 @@ with gr.Blocks(css="""
         font-family: 'Poppins', sans-serif !important;
         font-weight: 400 !important;
     }
+    
+    .tips-subtitle {
+        font-size: 0.95rem !important;
+        color: #6b7280 !important;
+        font-weight: 400 !important;
+        margin-bottom: 1.5rem !important;
+        padding: 0.75rem 1rem !important;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+        border-radius: 8px !important;
+        border-left: 4px solid #3b82f6 !important;
+        line-height: 1.5 !important;
+    }
+    
+    .tips-subtitle strong {
+        color: #3b82f6 !important;
+        font-weight: 600 !important;
+    }
 """) as demo:
     gr.Markdown("# ScreenCoder: Screenshot to Code")
+    gr.Markdown("**💡 Tips**: Use the sliders to adjust preview size and zoom level. Swipe to change viewing angle. Click download button to get the package.", elem_classes=["tips-subtitle"])
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("## Step 1: Provide an Image")
@@ -419,7 +437,6 @@ with gr.Blocks(css="""
 
         with gr.Column(scale=2):
             gr.Markdown("## Preview Area")
-            gr.Markdown("**Tips**: \n- Use the sliders below to adjust the preview size and zoom level for better viewing experience. \n- Adjust the page's viewing angle by swiping up, down, left, or right. \n- Click the button at the bottom to download the generated package.")
             with gr.Tabs():
                 with gr.TabItem("Preview With Placeholder"):
                     with gr.Row():