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.
327 lines
17 KiB
327 lines
17 KiB
""" |
|
BadGUI Header & Footer Example |
|
Demonstrates header and footer layout components with a complete navigation site. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
# Create the main page with header and footer layout |
|
with bg.page("/", "HomePage", "Home - My Website"): |
|
|
|
# Header with navigation bar |
|
with bg.header(elevated=True) as header: |
|
header.classes("bg-primary text-white") |
|
with bg.row() as nav_row: |
|
nav_row.classes("items-center justify-between w-full") |
|
# Logo/Brand |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
|
|
# Navigation menu |
|
with bg.row() as nav_menu: |
|
nav_menu.classes("q-gutter-md") |
|
bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300") |
|
|
|
# Main content area |
|
with bg.column() as main_content: |
|
main_content.classes("flex-grow q-pa-lg") |
|
# Hero section |
|
with bg.card().classes("bg-gradient-to-r from-blue-500 to-purple-600 text-white q-mb-lg"): |
|
with bg.card_section(): |
|
bg.label("Welcome to My Website").classes("text-h3 text-center q-mb-md") |
|
bg.label("Building beautiful web applications with BadGUI").classes("text-h6 text-center opacity-90") |
|
|
|
# Content sections |
|
with bg.row().classes("q-gutter-lg"): |
|
# Features section |
|
with bg.card().classes("col-4"): |
|
with bg.card_section(): |
|
bg.label("Features").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Fast development with Python") |
|
bg.label("• Generates Vue.js/Quasar projects") |
|
bg.label("• NiceGUI-like syntax") |
|
bg.label("• Responsive design") |
|
|
|
# Services section |
|
with bg.card().classes("col-4"): |
|
with bg.card_section(): |
|
bg.label("Services").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Web Application Development") |
|
bg.label("• UI/UX Design") |
|
bg.label("• Consulting Services") |
|
bg.label("• Training & Support") |
|
|
|
# Technologies section |
|
with bg.card().classes("col-4"): |
|
with bg.card_section(): |
|
bg.label("Technologies").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Python Backend") |
|
bg.label("• Vue.js 3 Frontend") |
|
bg.label("• Quasar Framework") |
|
bg.label("• Modern CSS/Tailwind") |
|
|
|
# Footer |
|
with bg.footer().classes("bg-dark text-white"): |
|
with bg.column().classes("q-pa-md"): |
|
# Footer content |
|
with bg.row().classes("justify-between items-start"): |
|
# Company info |
|
with bg.column().classes("col-4"): |
|
bg.label("My Website").classes("text-h6 q-mb-sm") |
|
bg.label("Building the future of web development with BadGUI framework.") |
|
|
|
# Quick links |
|
with bg.column().classes("col-4"): |
|
bg.label("Quick Links").classes("text-h6 q-mb-sm") |
|
with bg.column().classes("q-gutter-xs"): |
|
bg.link("Home", "/").classes("text-white no-underline") |
|
bg.link("About", "/about").classes("text-white no-underline") |
|
bg.link("Services", "/services").classes("text-white no-underline") |
|
bg.link("Contact", "/contact").classes("text-white no-underline") |
|
|
|
# Contact info |
|
with bg.column().classes("col-4"): |
|
bg.label("Contact").classes("text-h6 q-mb-sm") |
|
bg.label("📧 contact@mywebsite.com") |
|
bg.label("📞 +1 (555) 123-4567") |
|
bg.label("📍 123 Main St, City, State") |
|
|
|
# Copyright |
|
with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"): |
|
bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75") |
|
|
|
# About page |
|
with bg.page("/about", "AboutPage", "About - My Website"): |
|
|
|
# Header with navigation bar |
|
with bg.header(elevated=True).classes("bg-primary text-white"): |
|
with bg.row().classes("items-center justify-between w-full"): |
|
# Logo/Brand |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
|
|
# Navigation menu |
|
with bg.row().classes("q-gutter-md"): |
|
bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300 font-bold") |
|
bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300") |
|
|
|
# Main content |
|
with bg.column().classes("flex-grow q-pa-lg"): |
|
bg.label("About Us").classes("text-h3 q-mb-lg text-center") |
|
|
|
with bg.card().classes("max-w-4xl mx-auto"): |
|
with bg.card_section(): |
|
bg.label("Our Story").classes("text-h5 q-mb-md text-primary") |
|
bg.label("We are passionate developers who believe in making web development accessible and enjoyable. Our BadGUI framework combines the simplicity of Python with the power of modern web technologies.") |
|
|
|
bg.label("Our Mission").classes("text-h5 q-mb-md q-mt-lg text-primary") |
|
bg.label("To empower developers to create beautiful, functional web applications without the complexity of traditional web development. We bridge the gap between Python's simplicity and modern web frameworks.") |
|
|
|
# Footer (same as home page) |
|
with bg.footer().classes("bg-dark text-white"): |
|
with bg.column().classes("q-pa-md"): |
|
with bg.row().classes("justify-between items-start"): |
|
with bg.column().classes("col-4"): |
|
bg.label("My Website").classes("text-h6 q-mb-sm") |
|
bg.label("Building the future of web development with BadGUI framework.") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Quick Links").classes("text-h6 q-mb-sm") |
|
with bg.column().classes("q-gutter-xs"): |
|
bg.link("Home", "/").classes("text-white no-underline") |
|
bg.link("About", "/about").classes("text-white no-underline") |
|
bg.link("Services", "/services").classes("text-white no-underline") |
|
bg.link("Contact", "/contact").classes("text-white no-underline") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Contact").classes("text-h6 q-mb-sm") |
|
bg.label("📧 contact@mywebsite.com") |
|
bg.label("📞 +1 (555) 123-4567") |
|
bg.label("📍 123 Main St, City, State") |
|
|
|
with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"): |
|
bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75") |
|
|
|
# Services page |
|
with bg.page("/services", "ServicesPage", "Services - My Website"): |
|
|
|
# Header with navigation bar |
|
with bg.header(elevated=True).classes("bg-primary text-white"): |
|
with bg.row().classes("items-center justify-between w-full"): |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
|
|
with bg.row().classes("q-gutter-md"): |
|
bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300 font-bold") |
|
bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300") |
|
|
|
# Main content |
|
with bg.column().classes("flex-grow q-pa-lg"): |
|
bg.label("Our Services").classes("text-h3 q-mb-lg text-center") |
|
|
|
with bg.row().classes("q-gutter-lg justify-center"): |
|
# Web Development |
|
with bg.card().classes("col-5"): |
|
with bg.card_section(): |
|
bg.label("🌐 Web Development").classes("text-h5 q-mb-md text-primary") |
|
bg.label("Custom web applications built with modern technologies. We specialize in Python backends and Vue.js frontends.") |
|
|
|
with bg.card_actions(): |
|
bg.button("Learn More").classes("bg-primary text-white") |
|
|
|
# UI/UX Design |
|
with bg.card().classes("col-5"): |
|
with bg.card_section(): |
|
bg.label("🎨 UI/UX Design").classes("text-h5 q-mb-md text-primary") |
|
bg.label("Beautiful, intuitive user interfaces that provide excellent user experience across all devices.") |
|
|
|
with bg.card_actions(): |
|
bg.button("View Portfolio").classes("bg-primary text-white") |
|
|
|
with bg.row().classes("q-gutter-lg justify-center q-mt-lg"): |
|
# Consulting |
|
with bg.card().classes("col-5"): |
|
with bg.card_section(): |
|
bg.label("💡 Consulting").classes("text-h5 q-mb-md text-primary") |
|
bg.label("Expert advice on technology choices, architecture decisions, and development best practices.") |
|
|
|
with bg.card_actions(): |
|
bg.button("Get Consultation").classes("bg-primary text-white") |
|
|
|
# Training |
|
with bg.card().classes("col-5"): |
|
with bg.card_section(): |
|
bg.label("📚 Training").classes("text-h5 q-mb-md text-primary") |
|
bg.label("Comprehensive training programs for your team on BadGUI, Vue.js, Python, and modern web development.") |
|
|
|
with bg.card_actions(): |
|
bg.button("View Courses").classes("bg-primary text-white") |
|
|
|
# Footer |
|
with bg.footer().classes("bg-dark text-white"): |
|
with bg.column().classes("q-pa-md"): |
|
with bg.row().classes("justify-between items-start"): |
|
with bg.column().classes("col-4"): |
|
bg.label("My Website").classes("text-h6 q-mb-sm") |
|
bg.label("Building the future of web development with BadGUI framework.") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Quick Links").classes("text-h6 q-mb-sm") |
|
with bg.column().classes("q-gutter-xs"): |
|
bg.link("Home", "/").classes("text-white no-underline") |
|
bg.link("About", "/about").classes("text-white no-underline") |
|
bg.link("Services", "/services").classes("text-white no-underline") |
|
bg.link("Contact", "/contact").classes("text-white no-underline") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Contact").classes("text-h6 q-mb-sm") |
|
bg.label("📧 contact@mywebsite.com") |
|
bg.label("📞 +1 (555) 123-4567") |
|
bg.label("📍 123 Main St, City, State") |
|
|
|
with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"): |
|
bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75") |
|
|
|
# Contact page |
|
with bg.page("/contact", "ContactPage", "Contact - My Website"): |
|
|
|
# Header with navigation bar |
|
with bg.header(elevated=True).classes("bg-primary text-white"): |
|
with bg.row().classes("items-center justify-between w-full"): |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
|
|
with bg.row().classes("q-gutter-md"): |
|
bg.link("Home", "/").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("About", "/about").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Services", "/services").classes("text-white no-underline hover:text-yellow-300") |
|
bg.link("Contact", "/contact").classes("text-white no-underline hover:text-yellow-300 font-bold") |
|
|
|
# Main content |
|
with bg.column().classes("flex-grow q-pa-lg"): |
|
bg.label("Contact Us").classes("text-h3 q-mb-lg text-center") |
|
|
|
with bg.row().classes("q-gutter-lg justify-center"): |
|
# Contact form |
|
with bg.card().classes("col-6"): |
|
with bg.card_section(): |
|
bg.label("Send us a message").classes("text-h5 q-mb-md text-primary") |
|
|
|
with bg.column().classes("q-gutter-md"): |
|
bg.input(placeholder="Your Name", v_model="name").classes("full-width") |
|
bg.input(placeholder="Your Email", v_model="email").classes("full-width") |
|
bg.input(placeholder="Subject", v_model="subject").classes("full-width") |
|
# Note: textarea would need to be implemented as a separate component |
|
bg.input(placeholder="Your Message", v_model="message").classes("full-width") |
|
bg.button("Send Message").classes("bg-primary text-white full-width") |
|
|
|
# Contact info |
|
with bg.card().classes("col-4"): |
|
with bg.card_section(): |
|
bg.label("Get in touch").classes("text-h5 q-mb-md text-primary") |
|
|
|
with bg.column().classes("q-gutter-md"): |
|
with bg.row().classes("items-center"): |
|
bg.label("📧") |
|
with bg.column(): |
|
bg.label("Email") |
|
bg.label("contact@mywebsite.com").classes("text-primary") |
|
|
|
with bg.row().classes("items-center"): |
|
bg.label("📞") |
|
with bg.column(): |
|
bg.label("Phone") |
|
bg.label("+1 (555) 123-4567").classes("text-primary") |
|
|
|
with bg.row().classes("items-center"): |
|
bg.label("📍") |
|
with bg.column(): |
|
bg.label("Address") |
|
bg.label("123 Main St, City, State 12345").classes("text-primary") |
|
|
|
with bg.row().classes("items-center"): |
|
bg.label("🕒") |
|
with bg.column(): |
|
bg.label("Hours") |
|
bg.label("Mon-Fri: 9AM-6PM").classes("text-primary") |
|
|
|
# Footer |
|
with bg.footer().classes("bg-dark text-white"): |
|
with bg.column().classes("q-pa-md"): |
|
with bg.row().classes("justify-between items-start"): |
|
with bg.column().classes("col-4"): |
|
bg.label("My Website").classes("text-h6 q-mb-sm") |
|
bg.label("Building the future of web development with BadGUI framework.") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Quick Links").classes("text-h6 q-mb-sm") |
|
with bg.column().classes("q-gutter-xs"): |
|
bg.link("Home", "/").classes("text-white no-underline") |
|
bg.link("About", "/about").classes("text-white no-underline") |
|
bg.link("Services", "/services").classes("text-white no-underline") |
|
bg.link("Contact", "/contact").classes("text-white no-underline") |
|
|
|
with bg.column().classes("col-4"): |
|
bg.label("Contact").classes("text-h6 q-mb-sm") |
|
bg.label("📧 contact@mywebsite.com") |
|
bg.label("📞 +1 (555) 123-4567") |
|
bg.label("📍 123 Main St, City, State") |
|
|
|
with bg.row().classes("justify-center q-mt-lg q-pt-md border-t border-gray-600"): |
|
bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("text-center opacity-75") |
|
|
|
if __name__ == "__main__": |
|
print("🌟 BadGUI Header & Footer Navigation Example") |
|
print("This example demonstrates:") |
|
print(" • Header component with navigation bar") |
|
print(" • Footer component with structured content") |
|
print(" • Multi-page website with consistent layout") |
|
print(" • Responsive design with Quasar components") |
|
print(" • Professional styling with Tailwind classes") |
|
print() |
|
|
|
# Start the development server |
|
bg.dev(port=3003) |