Create R.py

R.py

@@ -0,0 +1,42 @@
+import gradio as gr
+
+# Enhanced CSS for Mobile Optimization
+mobile_ui_css = """
+.gradio-container { max-width: 500px !important; margin: auto !important; } /* Mobile center */
+.hotel-card { border-radius: 20px; background: white; padding: 15px; margin-bottom: 10px; border: 1px solid #eee; }
+.price-tag { background: #D4AF37; color: white; padding: 5px 12px; border-radius: 50px; font-weight: bold; float: right; }
+.status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.8em; margin-top: 5px; }
+.available { background: #E6F4EA; color: #1E8E3E; }
+.occupied { background: #FCE8E6; color: #D93025; }
+footer { display: none !important; }
+"""
+
+with gr.Blocks(css=mobile_ui_css, title="Hulhumale Direct") as demo:
+    # 1. Top Promotion Bar (Sticky style)
+    gr.HTML("<div style='background: #0A1828; color: white; padding: 10px; text-align: center; border-radius: 0 0 15px 15px;'>🌟 Tonight's Special: 10% Off in Phase 2</div>")
+    
+    # 2. Header
+    gr.HTML("<h2 style='text-align:center; color:#0A1828; margin-top:20px;'>🏝️ Hulhumale Direct</h2>")
+    
+    with gr.Tabs():
+        # TRAVELER VIEW
+        with gr.Tab("Explore"):
+            # Mock Card 1
+            gr.HTML("""
+                <div class='hotel-card'>
+                    <span class='price-tag'>850 MVR</span>
+                    <h3 style='margin:0;'>Coral View Inn</h3>
+                    <p style='color:#666; font-size:0.9em;'>📍 Hulhumale Phase 1</p>
+                    <span class='status-badge available'>● Available Now</span>
+                    <a href='tel:+9607771234' style='display:block; background:#0A1828; color:white; text-align:center; padding:10px; margin-top:10px; border-radius:10px; text-decoration:none;'>📞 Call to Book</a>
+                </div>
+            """)
+            
+        # OWNER VIEW
+        with gr.Tab("Manage"):
+            gr.Markdown("### 🔑 Quick Update")
+            status = gr.Radio(["Available", "Occupied"], label="Set Status")
+            price = gr.Number(label="Update Price (MVR)")
+            update_btn = gr.Button("Save Changes", variant="primary")
+
+demo.launch()