Update app.py

app.py

@@ -169,13 +169,16 @@ footer { display: none !important; }
     align-items: center;
 }
 
-/* 2. LAYOUT COLUMNS */
+/* 2. LAYOUT COLUMNS - "FAT CENTER" CONFIGURATION */
 .main-layout { display: flex; justify-content: center; padding-top: 20px; gap: 20px; }
 
-/* Left Sidebar: INCREASED to 400px to fit 392px buttons */
-.col-left { width: 400px; display: none; } 
+/* Left Sidebar: Compact (220px) */
+.col-left { width: 220px; display: none; } 
 
-.col-feed { width: 750px; max-width: 100%; }
+/* Center Feed: FAT (900px) */
+.col-feed { width: 900px; max-width: 100%; }
+
+/* Right Sidebar: Standard (280px) */
 .col-right { width: 280px; display: none; }
 
 /* 3. CARD STYLING */
@@ -189,9 +192,9 @@ footer { display: none !important; }
     border: 1px solid #e4e6eb;
 }
 
-/* 4. NAVIGATION BUTTONS - FIXED DIMENSIONS */
+/* 4. NAVIGATION BUTTONS - FLUID WIDTH */
 .nav-btn {
-    width: 392px !important;
+    width: 100% !important; /* Resized to fit the new 220px container */
     height: 42.5px !important;
     text-align: left !important;
     justify-content: flex-start !important;
@@ -201,7 +204,7 @@ footer { display: none !important; }
     color: #050505 !important;
     font-weight: 600 !important;
     font-size: 15px !important;
-    padding: 0 12px !important; /* Adjusted padding */
+    padding: 0 12px !important;
     border-radius: 8px !important;
     margin-bottom: 5px !important;
     display: flex !important;
@@ -393,92 +396,4 @@ with gr.Blocks(title="CookBook", css=facebook_css, theme=theme) as demo:
                             </div>
                             """)
                             gr.Markdown(f"**{row['Title']}**")
-                            gr.Markdown(f"{str(row['Raw_Output'])[:300]}... <span style='color:#1877F2; cursor:pointer;'>See more</span>")
-                            
-                            with gr.Row(elem_classes=["post-actions"]):
-                                gr.Button("👍 Like", elem_classes=["action-btn"], size="sm")
-                                gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
-                                gr.Button("↪ Share", elem_classes=["action-btn"], size="sm")
-                else:
-                    gr.Markdown("⚠️ Database is empty.")
-
-            # --- VIEW 3: SAVED ---
-            with gr.Column(visible=False) as saved_view:
-                gr.Markdown("### 🔖 Saved Items")
-                if not df_recipes.empty:
-                    saved_batch = df_recipes.head(20)
-                    for index, row in saved_batch.iterrows():
-                        with gr.Group(elem_classes=["fb-card"]):
-                            with gr.Row():
-                                gr.HTML("<div style='width:80px; height:80px; background:#eee; border-radius:8px;'></div>")
-                                with gr.Column():
-                                    gr.Markdown(f"**{row['Title']}**")
-                                    gr.HTML("<span style='color:#65676B; font-size:12px;'>Saved from News Feed</span>")
-                                    gr.Button("View Collection", size="sm", variant="secondary")
-
-            # --- VIEW 4: ABOUT ---
-            with gr.Group(visible=False) as about_view:
-                with gr.Group(elem_classes=["fb-card"]):
-                    gr.Markdown("# About CookBook")
-                    gr.Markdown("Developed by **Shahar Firshtman** and **Lior Feinstein**.")
-                    gr.HTML(f"""
-                    <div style="margin-top: 20px;">
-                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; border-radius: 8px;">
-                    </div>
-                    """)
-
-        # === RIGHT COLUMN (Contacts) ===
-        with gr.Column(elem_classes=["col-right"]):
-            gr.Markdown("### Sponsored")
-            with gr.Group(elem_classes=["fb-card"]):
-                gr.Markdown("**Culinary School**\nJoin 10,000+ students learning to cook today!")
-                gr.Image("https://picsum.photos/300/150", show_label=False, interactive=False, height=150)
-            
-            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
-            
-            gr.Markdown("### Contacts")
-            contacts = ["Elon Musk", "Gordon Ramsay", "Jamie Oliver", "Martha Stewart"]
-            for contact in contacts:
-                gr.HTML(f"""
-                <div class="contact-row">
-                    <div style="position:relative;">
-                        <img src="https://ui-avatars.com/api/?name={contact}&background=random" style="width:36px; height:36px; border-radius:50%;">
-                        <div style="position:absolute; bottom:0; right:0; width:10px; height:10px; background:#31a24c; border-radius:50%; border:2px solid white;"></div>
-                    </div>
-                    <div class="contact-name">{contact}</div>
-                </div>
-                """)
-
-    # ==========================================
-    # 6. NAVIGATION LOGIC
-    # ==========================================
-    def go_digi():
-        return (
-            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_feed():
-        return (
-            gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_saved():
-        return (
-            gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_about():
-        return (
-            gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"])
-        )
-
-    outputs_ui = [digitalizer_view, feed_view, saved_view, about_view, nav_digital, nav_feed, nav_saved, nav_about]
-    
-    nav_digital.click(go_digi, None, outputs_ui)
-    nav_feed.click(go_feed, None, outputs_ui)
-    nav_saved.click(go_saved, None, outputs_ui)
-    nav_about.click(go_about, None, outputs_ui)
-
-if __name__ == "__main__":
-    demo.launch()
+                            gr.Markdown(f"{str(row['Raw_Output'])[:300]}... <span style='color:#1877F2;