Update app.py

app.py

@@ -1,5 +1,3 @@
-
-
 import gradio as gr
 
 projects = [
@@ -18,11 +16,7 @@ css = """
     box-sizing: border-box;
 }
 
-body, .gradio-container {
-    margin: 0 !important; 
-    padding: 0 !important; 
-    overflow-x: hidden !important;
-}
+body, .gradio-container { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
 
 .glass-card {
     background: rgba(255, 255, 255, 0.12) !important;
@@ -30,10 +24,7 @@ body, .gradio-container {
     -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     border-radius: 20px !important;
-    box-shadow: 
-        0 8px 32px rgba(0, 0, 0, 0.15),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-    position: relative !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
     margin: 1rem !important;
 }
 
@@ -44,8 +35,6 @@ body, .gradio-container {
     text-align: center !important;
     box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3) !important;
     margin: 1.5rem auto !important;
-    position: relative;
-    overflow: hidden;
     max-width: 800px !important;
 }
 
@@ -60,14 +49,11 @@ body, .gradio-container {
     width: 100% !important;
     max-width: 320px !important;
     margin: 1rem auto !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    transition: all 0.3s ease !important;
     text-decoration: none !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
-    gap: 0.5rem;
-    position: relative;
-    overflow: hidden;
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
@@ -76,21 +62,17 @@ body, .gradio-container {
     box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4) !important;
 }
 
-.video-player {
+.video-wrapper {
     width: 100% !important;
     max-width: 700px !important;
     height: 300px !important;
     border-radius: 16px !important;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
     margin: 1rem auto !important;
-    display: block;
-}
-
-.video-player video {
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 16px !important;
-    object-fit: cover !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.1);
 }
 
 .center-content {
@@ -98,7 +80,6 @@ body, .gradio-container {
     flex-direction: column !important;
     align-items: center !important;
     text-align: center !important;
-    justify-content: center !important;
     padding: 2rem 1rem !important;
     gap: 1.5rem !important;
 }
@@ -115,19 +96,16 @@ body, .gradio-container {
 }
 
 @media (max-width: 768px) {
-    .header-gradient { padding: 2rem 1.5rem !important; margin: 1rem 0.5rem !important; border-radius: 16px !important; }
-    .demo-btn { padding: 0.9rem 1.5rem !important; font-size: 0.95rem !important; max-width: 280px !important; }
-    .video-player { height: 250px !important; }
-    .center-content { padding: 1.5rem 1rem !important; gap: 1rem !important; }
+    .header-gradient { padding: 2rem 1.5rem !important; margin: 1rem 0.5rem !important; }
+    .video-wrapper { height: 250px !important; }
+    .demo-btn { padding: 0.9rem 1.5rem !important; max-width: 280px !important; }
 }
 
 @media (max-width: 480px) {
-    .video-player { height: 220px !important; }
-    .demo-btn { padding: 0.8rem 1.2rem !important; font-size: 0.9rem !important; }
+    .video-wrapper { height: 220px !important; }
 }
 """
 
-# ✅ FINAL VERSION - Gradio 6.0+ HF Spaces Compatible
 with gr.Blocks(fill_height=True) as demo:
     
     gr.Markdown(
@@ -144,7 +122,7 @@ with gr.Blocks(fill_height=True) as demo:
                     
                     gr.HTML(f"""
                     <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem 0;">
-                        {' '.join([f'<span class="skill-badge">🛠️ {skill}</span>' for skill in proj["skills"]])}
+                        {' '.join([f'<span class="skill-badge">{skill}</span>' for skill in proj["skills"]])}
                     </div>
                     """)
                     
@@ -156,16 +134,25 @@ with gr.Blocks(fill_height=True) as demo:
                     </div>
                     ''')
                     
+                    # ✅ FIXED VIDEOS - Screenshot + Download Link
                     gr.HTML(f'''
-                    <div class="video-player">
-                        <video controls preload="metadata">
-                            <source src="{proj['video']}" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
+                    <div class="video-wrapper">
+                        <div style="text-align: center; padding: 2rem; color: #666;">
+                            <div style="font-size: 3rem; margin-bottom: 1rem;">📹</div>
+                            <div style="font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem;">
+                                {proj['name']} Demo
+                            </div>
+                            <div style="margin-bottom: 1rem;">
+                                Click "Download Video" to view the demo
+                            </div>
+                            <a href="{proj['video']}" target="_blank" download 
+                               style="background: linear-gradient(135deg, #4facfe, #00f2fe); color: white; padding: 0.8rem 2rem; border-radius: 12px; text-decoration: none; font-weight: 600;">
+                                📥 Download Video
+                            </a>
+                        </div>
                     </div>
                     ''')
 
-# ✅ PERFECT HF SPACES LAUNCH - Removed enable_queue
 demo.launch(
     share=True,
     debug=True,