File size: 2,143 Bytes
467e9b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 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() |