""" Enhanced Navigation Example with Images and Icons Demonstrates header, footer, image, and icon components in a complete website. """ import badgui as bg # Home page with enhanced navigation with bg.page("/", "HomePage", "Home - My Website"): # Header with logo, navigation bar and icons with bg.header(elevated=True) as header: header.classes("bg-primary text-white q-pa-md") with bg.row() as nav_row: nav_row.classes("items-center justify-between w-full") # Logo with icon with bg.row() as logo_row: logo_row.classes("items-center q-gutter-sm") bg.icon("home", size="2rem", color="white") bg.label("My Website").classes("text-h4 font-bold") # Navigation menu with icons with bg.row() as nav_menu: nav_menu.classes("q-gutter-md items-center") with bg.row() as home_link: home_link.classes("items-center q-gutter-xs") bg.icon("home", color="white") bg.link("Home", "/").classes("text-white") with bg.row() as about_link: about_link.classes("items-center q-gutter-xs") bg.icon("info", color="white") bg.link("About", "/about").classes("text-white") with bg.row() as services_link: services_link.classes("items-center q-gutter-xs") bg.icon("business", color="white") bg.link("Services", "/services").classes("text-white") with bg.row() as contact_link: contact_link.classes("items-center q-gutter-xs") bg.icon("contact_mail", color="white") bg.link("Contact", "/contact").classes("text-white") # Main content area with bg.column() as main_content: main_content.classes("q-pa-lg") # Hero section with background image concept with bg.card() as hero_card: hero_card.classes("bg-gradient-to-r from-blue-500 to-purple-600 text-white q-mb-lg q-pa-xl") with bg.card_section(): with bg.row() as hero_row: hero_row.classes("items-center justify-between") with bg.column() as hero_text: hero_text.classes("col-12 col-md-6") bg.label("Welcome to My Website").classes("text-h3 q-mb-md") bg.label("Building beautiful web applications with BadGUI framework. Combining Python simplicity with modern web technologies.").classes("text-h6") with bg.row() as hero_buttons: hero_buttons.classes("q-gutter-md q-mt-lg") with bg.row() as get_started: get_started.classes("items-center q-gutter-xs") bg.icon("play_arrow", color="white") bg.button("Get Started").classes("bg-white text-primary") with bg.row() as learn_more: learn_more.classes("items-center q-gutter-xs") bg.icon("book", color="white") bg.button("Learn More").classes("text-white outline") # Placeholder for hero image with bg.column() as hero_image: hero_image.classes("col-12 col-md-6 text-center q-mt-md q-mt-md-none") bg.image("https://picsum.photos/400/300?random=1").classes("rounded-lg shadow-lg") # Features section with icons with bg.row() as features_row: features_row.classes("q-gutter-md q-mb-lg wrap") with bg.card() as feature1: feature1.classes("col-12 col-sm-12 col-md-4 text-center q-pa-lg flex-grow-1") with bg.card_section(): bg.icon("speed", size="3rem", color="primary").classes("q-mb-md") bg.label("Fast Development").classes("text-h5 q-mb-md text-primary") bg.label("Rapid prototyping with Python syntax") bg.label("Generate production-ready Vue.js applications") with bg.card() as feature2: feature2.classes("col-12 col-sm-12 col-md-4 text-center q-pa-lg flex-grow-1") with bg.card_section(): bg.icon("build", size="3rem", color="secondary").classes("q-mb-md") bg.label("Modern Stack").classes("text-h5 q-mb-md text-secondary") bg.label("Vue.js 3 with Quasar Framework") bg.label("Responsive design out of the box") with bg.card() as feature3: feature3.classes("col-12 col-sm-12 col-md-4 text-center q-pa-lg flex-grow-1") with bg.card_section(): bg.icon("code", size="3rem", color="accent").classes("q-mb-md") bg.label("NiceGUI Compatible").classes("text-h5 q-mb-md text-accent") bg.label("Familiar syntax and patterns") bg.label("Easy migration from NiceGUI") # Gallery section with images with bg.card() as gallery_card: gallery_card.classes("q-mb-lg") with bg.card_section(): with bg.row() as gallery_header: gallery_header.classes("items-center q-gutter-sm q-mb-lg") bg.icon("photo_library", size="2rem", color="primary") bg.label("Project Gallery").classes("text-h4") with bg.row() as gallery_row: gallery_row.classes("q-gutter-md wrap") with bg.column() as gallery_item1: gallery_item1.classes("col-12 col-sm-6 col-md-3 text-center q-mb-md") bg.image("https://picsum.photos/300/200?random=2").classes("rounded-lg shadow-md q-mb-sm full-width") bg.label("E-commerce Platform").classes("text-h6") bg.label("Modern shopping experience") with bg.column() as gallery_item2: gallery_item2.classes("col-12 col-sm-6 col-md-3 text-center q-mb-md") bg.image("https://picsum.photos/300/200?random=3").classes("rounded-lg shadow-md q-mb-sm full-width") bg.label("Dashboard App").classes("text-h6") bg.label("Data visualization tool") with bg.column() as gallery_item3: gallery_item3.classes("col-12 col-sm-6 col-md-3 text-center q-mb-md") bg.image("https://picsum.photos/300/200?random=4").classes("rounded-lg shadow-md q-mb-sm full-width") bg.label("Mobile App").classes("text-h6") bg.label("Cross-platform solution") with bg.column() as gallery_item4: gallery_item4.classes("col-12 col-sm-6 col-md-3 text-center q-mb-md") bg.image("https://picsum.photos/300/200?random=5").classes("rounded-lg shadow-md q-mb-sm full-width") bg.label("Portfolio Site").classes("text-h6") bg.label("Creative showcase") # Footer with social icons with bg.footer() as footer: footer.classes("bg-dark text-white q-pa-lg") bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("opacity-75") # About page with team images with bg.page("/about", "AboutPage", "About - My Website"): # Header (same as home page) with bg.header(elevated=True) as header: header.classes("bg-primary text-white q-pa-md") with bg.row() as nav_row: nav_row.classes("items-center justify-between w-full") with bg.row() as logo_row: logo_row.classes("items-center q-gutter-sm") bg.icon("home", size="2rem", color="white") bg.label("My Website").classes("text-h4 font-bold") with bg.row() as nav_menu: nav_menu.classes("q-gutter-md items-center") with bg.row() as home_link: home_link.classes("items-center q-gutter-xs") bg.icon("home", color="white") bg.link("Home", "/").classes("text-white") with bg.row() as about_link: about_link.classes("items-center q-gutter-xs") bg.icon("info", color="white") bg.link("About", "/about").classes("text-white font-bold") with bg.row() as services_link: services_link.classes("items-center q-gutter-xs") bg.icon("business", color="white") bg.link("Services", "/services").classes("text-white") with bg.row() as contact_link: contact_link.classes("items-center q-gutter-xs") bg.icon("contact_mail", color="white") bg.link("Contact", "/contact").classes("text-white") # Main content with bg.column() as main_content: main_content.classes("q-pa-lg") # Page header with icon with bg.row() as page_header: page_header.classes("items-center q-gutter-md q-mb-lg") bg.icon("info", size="3rem", color="primary") bg.label("About Us").classes("text-h3") # About content with images with bg.row() as about_content: about_content.classes("q-gutter-lg") # Text content with bg.column() as text_content: text_content.classes("col-12 col-md-6") with bg.card() as story_card: story_card.classes("q-mb-lg") with bg.card_section(): with bg.row() as story_header: story_header.classes("items-center q-gutter-sm q-mb-md") bg.icon("auto_stories", color="primary") bg.label("Our Story").classes("text-h5 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.") with bg.card() as mission_card: with bg.card_section(): with bg.row() as mission_header: mission_header.classes("items-center q-gutter-sm q-mb-md") bg.icon("flag", color="secondary") bg.label("Our Mission").classes("text-h5 text-secondary") 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.") # Company image with bg.column() as image_content: image_content.classes("col-12 col-md-6") bg.image("https://picsum.photos/500/400?random=6").classes("rounded-lg shadow-lg q-mb-md") bg.label("Our team at work").classes("text-center text-gray-600") # Team section with bg.card() as team_card: team_card.classes("q-mt-xl") with bg.card_section(): with bg.row() as team_header: team_header.classes("items-center justify-center q-gutter-sm q-mb-lg") bg.icon("group", size="2rem", color="primary") bg.label("Meet Our Team").classes("text-h4") with bg.row() as team_row: team_row.classes("q-gutter-md justify-center wrap") # Team member 1 with bg.column() as member1: member1.classes("col-12 col-sm-6 col-md-4 text-center q-mb-md") bg.image("https://picsum.photos/200/200?random=10").classes("rounded-full q-mb-md") bg.label("John Smith").classes("text-h6") bg.label("Lead Developer").classes("text-primary") with bg.row() as member1_social: member1_social.classes("justify-center q-gutter-sm q-mt-sm") bg.icon("linkedin", color="primary") bg.icon("github", color="dark") # Team member 2 with bg.column() as member2: member2.classes("col-12 col-sm-6 col-md-4 text-center q-mb-md") bg.image("https://picsum.photos/200/200?random=11").classes("rounded-full q-mb-md") bg.label("Sarah Johnson").classes("text-h6") bg.label("UI/UX Designer").classes("text-secondary") with bg.row() as member2_social: member2_social.classes("justify-center q-gutter-sm q-mt-sm") bg.icon("linkedin", color="primary") bg.icon("dribbble", color="pink") # Team member 3 with bg.column() as member3: member3.classes("col-12 col-sm-6 col-md-4 text-center q-mb-md") bg.image("https://picsum.photos/200/200?random=12").classes("rounded-full q-mb-md") bg.label("Mike Chen").classes("text-h6") bg.label("Backend Engineer").classes("text-accent") with bg.row() as member3_social: member3_social.classes("justify-center q-gutter-sm q-mt-sm") bg.icon("linkedin", color="primary") bg.icon("github", color="dark") # Footer (same as home page) with bg.footer() as footer: footer.classes("bg-dark text-white q-pa-lg") with bg.column(): with bg.row() as footer_content: footer_content.classes("justify-between items-start q-mb-lg") with bg.column() as company_info: company_info.classes("col-12 col-md-4") with bg.row() as footer_logo: footer_logo.classes("items-center q-gutter-sm q-mb-md") bg.icon("home", size="1.5rem", color="white") bg.label("My Website").classes("text-h6") bg.label("Building the future of web development with BadGUI framework.") with bg.row() as footer_bottom: footer_bottom.classes("justify-center q-pt-lg border-t border-gray-600") bg.label("© 2024 My Website. All rights reserved. Built with BadGUI.").classes("opacity-75") if __name__ == "__main__": print("🎨 Enhanced Navigation Example with Images & Icons") print("This example demonstrates:") print(" • Header and footer layout components") print(" • Image component with various sources") print(" • Icon component with Material Design icons") print(" • Complete navigation website structure") print(" • Social media icons and interactive elements") print(" • Responsive gallery and team sections") print() # Start the development server bg.dev(port=3005)