Update app.py

app.py

@@ -88,7 +88,7 @@ def render_products(products):
             <a href="{url}" target="_blank">View Product</a>
         </div>
         """
-    return html
+    return f"<div class='grid-container'>{html}</div>"
 
 # --- Filters, search, sort ---
 def get_filtered_products(category="All", sort_by="Rating", min_price=0, max_price=1000, in_stock=False, query=""):
@@ -135,6 +135,12 @@ def load_more(category, sort_by, min_price, max_price, in_stock, query):
     shown_products = pd.concat([pd.DataFrame(shown_products), next_batch])
     return render_products(shown_products)
 
+# --- Random products on start ---
+def show_random_products():
+    global shown_products
+    shown_products = df.sample(n=batch_size)
+    return render_products(shown_products)
+
 # --- Quote Slideshow ---
 current_quote = [random.choice(quotes)]
 
@@ -150,10 +156,10 @@ threading.Thread(target=cycle_quotes, daemon=True).start()
 
 # --- Gradio UI ---
 with gr.Blocks(css="""
-body {background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', sans-serif;}
+body {background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', sans-serif; margin:0; padding:0;}
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 15px;
     justify-items: center;
 }
@@ -190,7 +196,6 @@ body {background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', sans-serif;}
     left: 100%;
     margin-left: 10px;
 }
-/* Adjust if near right edge */
 @media(max-width: 1024px) {
     .card:hover::after {
         left: auto;
@@ -214,29 +219,28 @@ a:hover {text-decoration: underline;}
 .quote-box {padding: 12px; margin: 10px 0; background: rgba(0,255,100,0.1); border-left: 4px solid #39ff14; font-style: italic; border-radius: 8px; text-align:center;}
 .impact {color: #ffd700; margin-top: 6px; font-size: 0.9em;}
 """) as demo:
-    gr.HTML("<h1>🌱 Ecducts-Online</h1>")
-
-    # QUOTE SLIDESHOW
-    with gr.Row():
-        quote_output = gr.HTML()
-
-    demo.load(get_quote, None, quote_output)
-
-    # Filters
+    
+    # Search & filters on top
     with gr.Row():
+        query = gr.Textbox(label="Search")
         category = gr.Dropdown(["All"] + sorted(df["category"].dropna().unique().tolist()), label="Category")
         sort_by = gr.Dropdown(["Price: Low to High", "Price: High to Low", "Rating"], label="Sort By", value="Rating")
-
-    with gr.Row():
         min_price = gr.Number(label="Min Price", value=0)
         max_price = gr.Number(label="Max Price", value=1000)
         in_stock = gr.Checkbox(label="In Stock Only")
-        query = gr.Textbox(label="Search")
-
+    
     show_btn = gr.Button("🔍 Show Products")
     load_more_btn = gr.Button("➕ Load More")
     output = gr.HTML()
 
+    # Quote row
+    with gr.Row():
+        quote_output = gr.HTML()
+    demo.load(get_quote, None, quote_output)
+
+    # Show random products on page load
+    demo.load(show_random_products, None, output)
+
     show_btn.click(show_products, [category, sort_by, min_price, max_price, in_stock, query], output)
     load_more_btn.click(load_more, [category, sort_by, min_price, max_price, in_stock, query], output)