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.
118 lines
4.8 KiB
118 lines
4.8 KiB
#!/usr/bin/env python3 |
|
""" |
|
Multi-page BadGUI application demonstrating routing between pages. |
|
""" |
|
|
|
import badgui as ui |
|
|
|
def main(): |
|
# ===== HOME PAGE ===== |
|
ui.page("/", "HomePage", "Home") |
|
|
|
# Welcome section |
|
ui.label("Welcome to BadGUI Multi-Page App!", classes=["text-h3", "text-primary", "q-mb-lg"]) |
|
|
|
# Navigation links |
|
with ui.row(classes=["q-gutter-md", "q-mb-xl"]): |
|
ui.link("Go to About", "/about", classes=["q-btn", "q-btn--outline"]) |
|
ui.link("Visit Contact", "/contact", classes=["q-btn", "q-btn--outline"]) |
|
ui.link("View Products", "/products", classes=["q-btn", "q-btn--outline"]) |
|
|
|
# Main content |
|
with ui.column(classes=["q-gutter-md"]): |
|
ui.label("This is the home page content", classes=["text-body1"]) |
|
|
|
with ui.row(classes=["q-pa-md", "bg-grey-1"]): |
|
ui.label("Feature 1", classes=["text-weight-bold"]) |
|
ui.label("Amazing functionality") |
|
|
|
with ui.row(classes=["q-pa-md", "bg-grey-1"]): |
|
ui.label("Feature 2", classes=["text-weight-bold"]) |
|
ui.label("Even better features") |
|
|
|
# ===== ABOUT PAGE ===== |
|
ui.page("/about", "AboutPage", "About Us") |
|
|
|
ui.label("About Our Company", classes=["text-h3", "text-secondary", "q-mb-lg"]) |
|
|
|
# Navigation back |
|
with ui.row(classes=["q-gutter-sm", "q-mb-lg"]): |
|
ui.link("← Back to Home", "/", classes=["q-btn", "q-btn--flat"]) |
|
ui.link("Contact Us", "/contact", classes=["q-btn", "q-btn--outline"]) |
|
|
|
# About content |
|
with ui.column(classes=["q-gutter-md"]): |
|
ui.label("We are a company dedicated to making Vue.js development easier with Python.", |
|
classes=["text-body1"]) |
|
|
|
ui.label("Our Mission", classes=["text-h5", "text-primary"]) |
|
ui.label("To bridge the gap between Python and modern web development.", |
|
classes=["text-body2"]) |
|
|
|
with ui.row(classes=["q-pa-lg", "bg-blue-1"]): |
|
ui.label("Founded: 2024", classes=["q-mr-lg"]) |
|
ui.label("Team Size: 5+", classes=["q-mr-lg"]) |
|
ui.label("Projects: 10+") |
|
|
|
# ===== CONTACT PAGE ===== |
|
ui.page("/contact", "ContactPage", "Contact") |
|
|
|
ui.label("Get in Touch", classes=["text-h3", "text-accent", "q-mb-lg"]) |
|
|
|
# Navigation |
|
with ui.row(classes=["q-gutter-sm", "q-mb-lg"]): |
|
ui.link("← Home", "/", classes=["q-btn", "q-btn--flat"]) |
|
ui.link("About Us", "/about", classes=["q-btn", "q-btn--flat"]) |
|
|
|
# Contact form |
|
with ui.column(classes=["q-gutter-md", "q-pa-md", "bg-grey-1"]): |
|
ui.label("Contact Form", classes=["text-h5"]) |
|
|
|
ui.input(placeholder="Your Name", classes=["q-mb-md"]) |
|
ui.input(placeholder="Your Email", classes=["q-mb-md"]) |
|
ui.input(placeholder="Your Message", classes=["q-mb-md"]) |
|
|
|
with ui.row(): |
|
ui.button("Send Message", classes=["q-btn", "bg-primary", "text-white"]) |
|
ui.button("Clear", classes=["q-btn", "q-btn--outline", "q-ml-md"]) |
|
|
|
# ===== PRODUCTS PAGE ===== |
|
ui.page("/products", "ProductsPage", "Our Products") |
|
|
|
ui.label("Our Products", classes=["text-h3", "text-primary", "q-mb-lg"]) |
|
|
|
# Navigation |
|
with ui.row(classes=["q-gutter-sm", "q-mb-lg"]): |
|
ui.link("← Home", "/", classes=["q-btn", "q-btn--flat"]) |
|
ui.link("About", "/about", classes=["q-btn", "q-btn--flat"]) |
|
ui.link("Contact", "/contact", classes=["q-btn", "q-btn--flat"]) |
|
|
|
# Products grid |
|
with ui.column(classes=["q-gutter-lg"]): |
|
# Product 1 |
|
with ui.row(classes=["q-pa-lg", "bg-blue-1"]): |
|
with ui.column(): |
|
ui.label("BadGUI Framework", classes=["text-h5", "text-primary"]) |
|
ui.label("Python to Vue.js code generator", classes=["text-body2"]) |
|
ui.button("Learn More", classes=["q-btn", "q-btn--outline", "q-mt-md"]) |
|
|
|
# Product 2 |
|
with ui.row(classes=["q-pa-lg", "bg-green-1"]): |
|
with ui.column(): |
|
ui.label("BadGUI CLI", classes=["text-h5", "text-positive"]) |
|
ui.label("Command line tools for rapid development", classes=["text-body2"]) |
|
ui.button("Download", classes=["q-btn", "q-btn--outline", "q-mt-md"]) |
|
|
|
# Product 3 |
|
with ui.row(classes=["q-pa-lg", "bg-orange-1"]): |
|
with ui.column(): |
|
ui.label("BadGUI Templates", classes=["text-h5", "text-warning"]) |
|
ui.label("Pre-built templates for common use cases", classes=["text-body2"]) |
|
ui.button("Browse", classes=["q-btn", "q-btn--outline", "q-mt-md"]) |
|
|
|
# Build the Vue.js project |
|
print("🚀 Building BadGUI Multi-Page project...") |
|
ui.build(output_dir="./multipage-output", project_name="badgui-multipage") |
|
|
|
if __name__ == "__main__": |
|
main() |