You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.9 KiB
85 lines
3.9 KiB
#!/usr/bin/env python3 |
|
""" |
|
Multi-page BadGUI Application Example |
|
Demonstrates routing and navigation between pages. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
def create_navbar(): |
|
"""Create consistent navigation across all pages.""" |
|
with bg.row().classes("bg-primary text-white q-pa-md justify-between items-center"): |
|
bg.label("My Multi-Page App").classes("text-h6 text-weight-bold") |
|
|
|
with bg.row().classes("q-gutter-md"): |
|
bg.link("Home", "/").classes("text-white no-underline q-btn q-btn-flat") |
|
bg.link("About", "/about").classes("text-white no-underline q-btn q-btn-flat") |
|
bg.link("Services", "/services").classes("text-white no-underline q-btn q-btn-flat") |
|
bg.link("Contact", "/contact").classes("text-white no-underline q-btn q-btn-flat") |
|
|
|
def main(): |
|
# Home Page |
|
with bg.page("/", "HomePage", "Home - My App"): |
|
create_navbar() |
|
|
|
with bg.column().classes("text-center q-pa-xl"): |
|
bg.label("Welcome Home").classes("text-h2 text-primary q-mb-lg") |
|
bg.label("This is a multi-page BadGUI application.").classes("text-h6 text-grey-7 q-mb-lg") |
|
|
|
with bg.row().classes("justify-center q-gutter-md"): |
|
bg.link("Learn About Us", "/about").classes("q-btn q-btn-primary") |
|
bg.link("Our Services", "/services").classes("q-btn q-btn-secondary") |
|
|
|
# About Page |
|
with bg.page("/about", "AboutPage", "About - My App"): |
|
create_navbar() |
|
|
|
with bg.column().classes("q-pa-xl max-width-md mx-auto"): |
|
bg.label("About Us").classes("text-h3 text-center q-mb-lg") |
|
bg.label("We are a company dedicated to building amazing web applications.").classes("text-body1 q-mb-md") |
|
bg.label("Our team has years of experience in web development.").classes("text-body1 q-mb-lg") |
|
|
|
bg.link("← Back to Home", "/").classes("q-btn q-btn-outline") |
|
|
|
# Services Page |
|
with bg.page("/services", "ServicesPage", "Services - My App"): |
|
create_navbar() |
|
|
|
with bg.column().classes("q-pa-xl"): |
|
bg.label("Our Services").classes("text-h3 text-center q-mb-xl") |
|
|
|
services = [ |
|
("Web Development", "Custom web applications built with modern technologies"), |
|
("Mobile Apps", "Native and cross-platform mobile app development"), |
|
("Consulting", "Technical consulting and architecture design"), |
|
("Support", "Ongoing maintenance and support services") |
|
] |
|
|
|
with bg.row().classes("q-col-gutter-lg"): |
|
for title, description in services: |
|
with bg.column().classes("col-12 col-md-6 col-lg-3"): |
|
with bg.column().classes("bg-white rounded shadow-2 q-pa-lg text-center"): |
|
bg.label(title).classes("text-h6 text-primary q-mb-md") |
|
bg.label(description).classes("text-body2") |
|
|
|
# Contact Page |
|
with bg.page("/contact", "ContactPage", "Contact - My App"): |
|
create_navbar() |
|
|
|
with bg.column().classes("q-pa-xl max-width-sm mx-auto"): |
|
bg.label("Contact Us").classes("text-h3 text-center q-mb-lg") |
|
|
|
# Contact form |
|
bg.input(placeholder="Your Name").classes("q-mb-md").props("filled required") |
|
bg.input(placeholder="Your Email").classes("q-mb-md").props("filled required type=email") |
|
bg.input(placeholder="Subject").classes("q-mb-md").props("filled required") |
|
bg.input(placeholder="Your Message").classes("q-mb-lg").props("filled required type=textarea rows=4") |
|
|
|
bg.button("Send Message").classes("q-btn q-btn-primary full-width q-mb-md") |
|
|
|
bg.link("← Back to Home", "/").classes("q-btn q-btn-outline full-width") |
|
|
|
bg.build("multipage-app-output") |
|
|
|
if __name__ == "__main__": |
|
main() |