=== app.py ===
```python
import gradio as gr
from gradio_client import Client
import os
def submit_inquiry(name, email, phone, property_type, dates, message):
"""Process the contact form submission"""
if not name or not email:
return "Please fill in all required fields (Name and Email)."
# In a real application, you would save this to a database or send an email
print(f"New inquiry received:")
print(f"Name: {name}")
print(f"Email: {email}")
print(f"Phone: {phone}")
print(f"Property: {property_type}")
print(f"Dates: {dates}")
print(f"Message: {message}")
return f"Thank you, {name}! Your inquiry has been received. We'll contact you soon at {email}."
def create_header():
"""Create the header HTML"""
return """
"""
def create_features_section():
"""Create the features section with all 6 features"""
feature_cards = [
("🏠", "Family-Friendly Homes", "Carefully selected properties designed with families in mind, featuring spacious layouts and child-safe amenities."),
("📍", "Prime Locations", "Situated in the most desirable destinations, close to attractions, restaurants, and family activities."),
("💰", "Affordable Rates", "Competitive pricing without compromising on quality. Special family packages and discounts available."),
("🤝", "24/7 Support", "Our dedicated team is available around the clock to ensure your family has the perfect vacation experience."),
("🛡️", "Verified Properties", "All our rentals are thoroughly inspected and verified to meet our high safety and quality standards."),
("⭐", "5-Star Service", "Consistently rated 5 stars by families who have experienced the FamilyHaven difference.")
]
features_html = '
Why Choose FamilyHaven?
'
# Create 2 rows of 3 features each
for row_idx in range(0, len(feature_cards), 3):
features_html += '
'
for col_idx in range(3):
if row_idx + col_idx < len(feature_cards):
icon, title, description = feature_cards[row_idx + col_idx]
features_html += f'''
"""
def process_contact_form(name, email, phone, property_type, dates, message):
"""Process the contact form and return success message"""
return submit_inquiry(name, email, phone, property_type, dates, message)
# Custom CSS for better styling
custom_css = """
.gradio-container {
max-width: 1200px !important;
margin: auto !important;
font-family: Arial, sans-serif !important;
}
.section-spacing {
margin-bottom: 3rem;
}
.property-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.property-card:hover {
transform: translateY(-5px);
}
.feature-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: transform 0.3s ease;
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-5px);
}
.contact-form {
background: #f8f9fa;
padding: 2rem;
border-radius: 15px;
}
@media (max-width: 768px) {
.gradio-container {
padding: 10px !important;
}
.contact-grid {
grid-template-columns: 1fr !important;
}
}
"""
# Create the Gradio interface
with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
# Header
header_html = gr.HTML(create_header())
# Hero Section
hero_html = gr.HTML(create_hero_section())
# Features Section
features_html = gr.HTML(create_features_section())
# Properties Section
properties_html = gr.HTML(create_properties_section())
# Contact Section
contact_info_html = gr.HTML(create_contact_section())
# Contact Form
with gr.Row():
with gr.Column(scale=1):
gr.HTML('') # Spacer
with gr.Row(elem_classes=["contact-grid"]):
# Left side - Contact info is already in HTML above
with gr.Column(scale=1):
pass
# Right side - Contact form
with gr.Column(scale=1, elem_classes=["contact-form"]):
gr.HTML('
Send Us a Message
')
with gr.Row():
name = gr.Textbox(label="Full Name *", placeholder="Enter your full name", required=True)
email = gr.Textbox(label="Email Address *", placeholder="Enter your email", required=True)
with gr.Row():
phone = gr.Textbox(label="Phone Number", placeholder="Enter your phone number")
property_type = gr.Dropdown(
label="Interested Property",
choices=[
"Select a property",
"Ocean View Paradise",
"Mountain Retreat Haven",
"Downtown Family Suite",
"Custom Requirements"
],
value="Select a property"
)
dates = gr.Textbox(label="Preferred Dates", placeholder="e.g., July 15-22, 2024")
message = gr.TextArea(label="Message", placeholder="Tell us about your family vacation needs...", lines=4)
submit_btn = gr.Button("Send Inquiry", variant="primary", size="lg")
result = gr.Textbox(label="Status", interactive=False)
# Submit button functionality
submit_btn.click(
fn=process_contact_form,
inputs=[name, email, phone, property_type, dates, message],
outputs=[result]
)
# Footer
footer_html = gr.HTML(create_footer())
# Launch the app
if __name__ == "__main__":
demo.launch(
server_name="0.0.0.0",
server_port=7860,
share=False,
show_error=True,
quiet=False
)
```
This Gradio application recreates the FamilyHaven Rentals website with:
1. **Header**: Logo and anycoder attribution link
2. **Hero Section**: Eye-catching introduction with CTA button
3. **Features Section**: 6 key features displayed in a responsive grid
4. **Properties Section**: 3 featured rental properties with detailed information
5. **Contact Section**: Contact information and a working contact form
6. **Footer**: Copyright and anycoder attribution
The app includes:
- Responsive design that works on mobile and desktop
- Interactive contact form with validation
- Custom styling to match the original design
- Proper form handling with success messages
- Navigation links that work within the single-page app
- Professional color scheme and typography
The Gradio app maintains all the functionality of the original HTML page while providing an interactive interface for users to submit inquiries about rental properties.
=== requirements.txt ===
gradio
gradio_client
requests
Pillow
numpy
pandas
matplotlib
fastapi
uvicorn
aiofiles
python-multipart