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.
308 lines
16 KiB
308 lines
16 KiB
""" |
|
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) |