Update app.py

app.py

@@ -11,38 +11,140 @@ projects = [
 
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-* { font-family: 'Inter', sans-serif !important; color: white !important; box-sizing: border-box !important; }
-body, .gradio-container { 
-    margin: 0 !important; padding: 0 !important; 
+
+/* MOBILE SCROLL FIXED + CENTER */
+* { 
+    font-family: 'Inter', sans-serif !important; 
+    color: white !important;
+    box-sizing: border-box !important;
+    max-width: 100% !important;
+}
+
+/* SCROLLABLE MOBILE */
+html, body, .gradio-container {
+    margin: 0 !important; 
+    padding: 0 !important; 
+    height: auto !important;
+    min-height: 100vh !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch !important;
     background: linear-gradient(rgba(10,10,26,0.95), rgba(45,27,105,0.95)),
                 url('https://tse4.explicit.bing.net/th/id/OIP.CSOmF_Va1tPzTClwWuugnwHaEK?pid=Api&h=220&P=0') center/cover !important;
-    min-height: 100vh !important; overflow-x: hidden !important;
 }
 
-/* ULTRA FAST VIDEO CSS */
-.fast-video {
-    width: 100% !important; 
-    height: auto !important; 
-    max-height: 250px !important; 
-    border-radius: 12px !important; 
-    box-shadow: 0 12px 25px rgba(0,0,0,0.4) !important;
-    display: block !important;
-    loading: lazy !important;
+/* PERFECT MOBILE CENTER */
+.center-content {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    text-align: center !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 1rem !important;
+    margin: 0 auto !important;
+    min-height: 100vh !important;
+}
+
+/* MOBILE GLASS CARDS */
+.glass-card {
+    background: rgba(255,255,255,0.2) !important;
+    backdrop-filter: blur(25px) !important;
+    border: 1px solid rgba(255,255,255,0.3) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
+    padding: 1.5rem !important;
+    margin: 1rem auto !important;
+    width: 95% !important;
+    max-width: 600px !important;
+}
+
+/* MOBILE BUTTONS */
+.demo-btn {
+    background: linear-gradient(135deg, #ff6b6b, #feca57) !important;
+    color: white !important;
+    padding: 1rem 2rem !important;
+    border-radius: 12px !important;
+    text-decoration: none !important;
+    display: inline-block !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    width: 85% !important;
+    max-width: 300px !important;
+    margin: 1rem auto !important;
+    box-shadow: 0 10px 25px rgba(255,107,107,0.4) !important;
+    transition: all 0.3s !important;
+    touch-action: manipulation !important;
+}
+
+/* HEADER */
+.header-gradient {
+    background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95)) !important;
+    border-radius: 16px !important;
+    padding: 2rem 1rem !important;
+    margin: 1rem auto !important;
+    max-width: 95% !important;
+}
+
+/* VIDEO RESPONSIVE */
+.playable-video video {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 280px !important;
+    border-radius: 12px !important;
+    margin: 1rem 0 !important;
 }
 
-/* MOBILE PERFECT */
-.center-content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100vw !important; padding: 1rem !important; }
-.glass-card { background: rgba(255,255,255,0.2) !important; backdrop-filter: blur(25px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 16px !important; box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; padding: 1.2rem !important; margin: 0.5rem auto !important; width: 95vw !important; max-width: 600px !important; }
-.demo-btn { background: linear-gradient(135deg, #ff6b6b, #feca57) !important; color: white !important; padding: 1rem 2rem !important; border-radius: 12px !important; text-decoration: none !important; display: inline-block !important; font-weight: 600 !important; width: 85% !important; max-width: 300px !important; margin: 1rem auto !important; box-shadow: 0 10px 25px rgba(255,107,107,0.4) !important; }
-.header-gradient { background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95)) !important; border-radius: 16px !important; padding: 2rem 1rem !important; margin: 1rem auto !important; max-width: 95vw !important; }
-.tab-button, .gradio-tabs { color: white !important; background: transparent !important; }
-@media (max-width: 480px) { .fast-video { max-height: 200px !important; } .glass-card { padding: 1rem !important; } }
-@media (min-width: 1025px) { .fast-video { max-height: 350px !important; } }
+/* MOBILE TABS SCROLLABLE */
+.gradio-tabs {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+.tab-header {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    overflow-x: auto !important;
+    background: transparent !important;
+}
+.tab-button {
+    color: white !important;
+    background: rgba(255,255,255,0.1) !important;
+    border: 1px solid rgba(255,255,255,0.3) !important;
+    margin: 0.2rem !important;
+    padding: 0.8rem 1rem !important;
+    white-space: nowrap !important;
+    min-height: 44px !important;
+    flex: 0 0 auto !important;
+}
+
+/* MOBILE SPECIFIC */
+@media (max-width: 768px) {
+    .center-content { padding: 0.8rem !important; }
+    .glass-card { padding: 1.2rem !important; margin: 0.8rem auto !important; width: 98% !important; }
+    .playable-video video { max-height: 220px !important; }
+    .demo-btn { padding: 0.9rem 1.8rem !important; font-size: 0.95rem !important; }
+    .header-gradient { padding: 1.5rem 1rem !important; }
+    .tab-header { padding: 0.5rem !important; }
+}
+
+/* DESKTOP */
+@media (min-width: 1025px) {
+    .glass-card { padding: 2.5rem !important; max-width: 800px !important; }
+    .playable-video video { max-height: 350px !important; }
+    .center-content { max-width: 1000px !important; padding: 2rem !important; }
+}
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live Demos**", elem_classes="header-gradient glass-card center-content")
+    # HEADER
+    gr.Markdown(
+        "# ✨ **AI/ML Projects**\n\n**6 Production-Ready Projects • Live on Hugging Face**", 
+        elem_classes="header-gradient glass-card center-content"
+    )
     
+    # SCROLLABLE TABS
     with gr.Tabs(elem_classes="center-content"):
         for proj in projects:
             with gr.TabItem(proj["name"]):
@@ -51,30 +153,23 @@ with gr.Blocks(css=css) as demo:
                     gr.Markdown(f"**📝 {proj['desc']}**")
                     gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                     
-                    # ⚡ ULTRA-FAST LIVE BUTTON
+                    # BUTTON
                     gr.HTML(f'''
-                    <div style="text-align:center; padding:0.5rem;">
+                    <div style="text-align:center; padding:1rem 0;">
                         <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none;">
-                            🎮 Launch Live Demo
+                            🎮 Launch {proj['name']} Live Demo
                         </a>
                     </div>
                     ''')
                     
-                    # ⚡ LIGHTNING FAST VIDEO - 3 SECOND LOAD
-                    gr.HTML(f'''
-                    <div style="width:100%; text-align:center;">
-                        <video class="fast-video" 
-                               controls 
-                               preload="metadata" 
-                               playsinline 
-                               muted 
-                               loading="lazy"
-                               poster="https://via.placeholder.com/640x360/1a1a3a/ffffff?text={proj['name']}+DEMO">
-                            <source src="{proj['video']}" type="video/mp4">
-                            <source src="{proj['video']}" type="video/webm">
-                            <p style="color:#ccc; font-size:0.9rem;">⚡ Tap to play ({proj['name']} demo)</p>
-                        </video>
-                    </div>
-                    ''')
+                    # VIDEO
+                    gr.Video(
+                        value=proj["video"],
+                        label=f"📹 {proj['name']} Demo",
+                        height=280,
+                        interactive=False,
+                        format="mp4",
+                        elem_classes="playable-video"
+                    )
 
-demo.launch(share=True, debug=True, show_error=True)
+demo.launch(share=True, debug=True, show_error=True, css=css)