Update app.py

app.py

@@ -212,6 +212,13 @@ button.cta:hover {
     animation: cffall linear forwards;
     z-index: 99999; pointer-events: none;
 }
+
+/* Fix Gradio Video styling to seamlessly blend with your glow theme */
+#showcase-video {
+    background: #000000 !important;
+    border: 1px solid rgba(245, 166, 35, 0.3) !important;
+    border-radius: 8px !important;
+}
 """
 
 # ═══════════════════════════════════════════════════════════════
@@ -279,40 +286,42 @@ HERO_HTML = """
 </div>
 """
 
-SHOWCASE_HTML = """
+SHOWCASE_TOP_HTML = """
 <div style="
-    max-width: 850px; margin: 30px auto; padding: 20px;
-    background: #0a0a1a; border: 1px solid rgba(245, 166, 35, 0.2);
-    border-radius: 16px; box-shadow: 0 0 30px rgba(245, 166, 35, 0.05);
+    max-width: 850px; margin: 30px auto 0 auto; padding: 20px 20px 5px 20px;
+    background: #0a0a1a; border-top: 1px solid rgba(245, 166, 35, 0.2);
+    border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);
+    border-top-left-radius: 16px; border-top-right-radius: 16px;
     font-family: 'Inter', sans-serif;
 ">
     <h3 style="color: #ffc845; text-shadow: 0 0 10px rgba(245, 166, 35, 0.5); margin-top: 0; margin-bottom: 15px;">🎬 Submission Showcase & Verification</h3>
-    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
-        <div style="flex: 1.5; min-width: 300px;">
-            <video controls preload="auto" playsinline muted style="width: 100%; border-radius: 8px; border: 1px solid rgba(245, 166, 35, 0.3); background: #000;">
-                <source src="https://huggingface.co/spaces/build-small-hackathon/Judges-copilot/resolve/main/lv_0_20260616025553.mp4" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-        </div>
-        <div style="flex: 1; min-width: 250px; display: flex; flex-direction: column; justify-content: center;">
-            <p style="color: #c0c0e8; font-size: 0.95rem; line-height: 1.6; margin-top: 0;">
-                Watch our local execution pipeline crawl layouts, extract syntax trees, and dynamically evaluate criteria weights completely off-the-grid.
-            </p>
-            <a href="https://x.com/i/status/2066355638200918066" target="_blank" style="
-                display: inline-block; text-align: center; background: rgba(245,166,35,.15); 
-                color: #ffc845; border: 1px solid rgba(245,166,35,.5); border-radius: 8px; 
-                padding: 10px 16px; font-weight: 700; text-decoration: none; transition: all 0.2s;
-                box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
-            " onmouseover="this.style.background='rgba(245,166,35,.25)'" onmouseout="this.style.background='rgba(245,166,35,.15)'">
-                🐦 View Official X Post
-            </a>
-        </div>
-    </div>
+</div>
+"""
+
+SHOWCASE_SIDE_HTML = """
+<div style="
+    height: 100%; display: flex; flex-direction: column; justify-content: center;
+    font-family: 'Inter', sans-serif; padding: 10px 20px 20px 20px;
+    background: #0a0a1a; border-bottom: 1px solid rgba(245, 166, 35, 0.2);
+    border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);
+    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
+">
+    <p style="color: #c0c0e8; font-size: 0.95rem; line-height: 1.6; margin-top: 0; margin-bottom: 20px;">
+        Watch our local execution pipeline crawl layouts, extract syntax trees, and dynamically evaluate criteria weights completely off-the-grid.
+    </p>
+    <a href="https://x.com/i/status/2066355638200918066" target="_blank" style="
+        display: inline-block; text-align: center; background: rgba(245,166,35,.15); 
+        color: #ffc845; border: 1px solid rgba(245,166,35,.5); border-radius: 8px; 
+        padding: 10px 16px; font-weight: 700; text-decoration: none; transition: all 0.2s;
+        box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
+    " onmouseover="this.style.background='rgba(245,166,35,.25)'" onmouseout="this.style.background='rgba(245,166,35,.15)'">
+        🐦 View Official X Post
+    </a>
 </div>
 """
 
 QUICKSTART_LABEL_HTML = """
-<div style="font-family:'Inter',sans-serif; padding:10px 0 10px;">
+<div style="font-family:'Inter',sans-serif; padding:30px 0 10px;">
   <p style="
     font-size:.75rem; color:#F5A623; font-weight:800;
     letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
@@ -771,7 +780,21 @@ def click_preset_ag(criteria_text):
 with gr.Blocks(theme=gr.themes.Base(), css=CSS, title="Judges Copilot v2") as demo:
 
     gr.HTML(HERO_HTML)
-    gr.HTML(SHOWCASE_HTML)  # Embedded Showcase Media Section
+    
+    # Showcase Section Wrapper Layout
+    gr.HTML(SHOWCASE_TOP_HTML)
+    with gr.Row(style="max-width: 850px; margin: 0 auto; background: #0a0a1a; padding: 0 20px; border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);"):
+        with gr.Column(scale=3, min_width=300):
+            gr.Video(
+                value="https://huggingface.co/spaces/build-small-hackathon/Judges-copilot/resolve/main/lv_0_20260616025553.mp4",
+                interactive=False,
+                show_label=False,
+                container=False,
+                elem_id="showcase-video"
+            )
+        with gr.Column(scale=2, min_width=250):
+            gr.HTML(SHOWCASE_SIDE_HTML)
+            
     gr.HTML(QUICKSTART_LABEL_HTML)
     
     with gr.Row():