Spaces:
Sleeping
Sleeping
File size: 4,933 Bytes
d467ea7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
"MonsterUI Scrollspy Example application"
from fasthtml.common import *
from monsterui.all import *
import random
# Using the "slate" theme with Highlight.js enabled
hdrs = Theme.slate.headers(highlightjs=True)
app, rt = fast_app(hdrs=hdrs)
################################
### Example Data and Content ###
################################
products = [
{"name": "Laptop", "price": "$999"},
{"name": "Smartphone", "price": "$599"}
]
code_example = """
# Python Code Example
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
"""
testimonials = [
{"name": "Alice", "feedback": "Great products and excellent customer service!"},
{"name": "Bob", "feedback": "Fast shipping and amazing quality!"},
{"name": "Charlie", "feedback": "Amazing experience! Will definitely buy again."},
{"name": "Diana", "feedback": "Affordable prices and great variety!"},
{"name": "Edward", "feedback": "Customer support was very helpful."},
{"name": "Fiona", "feedback": "Loved the design and quality!"}
]
# Team members
team = [
{"name": "Isaac Flath", "role": "CEO"},
{"name": "Benjamin Clavié", "role": "AI Researcher"},
{"name": "Alexis Gallagher", "role": "ML Engineer"},
{"name": "Hamel Husain", "role": "Data Scientist"},
{"name": "Austin Huang", "role": "Software Engineer"},
{"name": "Benjamin Warner", "role": "Product Manager"},
{"name": "Jonathan Whitaker", "role": "UX Designer"},
{"name": "Kerem Turgutlu", "role": "DevOps Engineer"},
{"name": "Curtis Allan", "role": "DevOps Engineer"},
{"name": "Audrey Roy Greenfeld", "role": "Security Analyst"},
{"name": "Nathan Cooper", "role": "Full Stack Developer"},
{"name": "Jeremy Howard", "role": "CTO"},
{"name": "Wayde Gilliam", "role": "Cloud Architect"},
{"name": "Daniel Roy Greenfeld", "role": "Blockchain Expert"},
{"name": "Tommy Collins", "role": "AI Ethics Researcher"}
]
def ProductCard(p,img_id=1):
return Card(
PicSumImg(w=500, height=100, id=img_id),
DivFullySpaced(H4(p["name"]), P(Strong(p["price"], cls=TextT.sm))),
Button("Details", cls=(ButtonT.primary, "w-full")))
def TestimonialCard(t,img_id=1):
return Card(
DivLAligned(PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), H4(t["name"])),
P(Q((t["feedback"]))))
def TeamCard(m,img_id=1):
return Card(
DivLAligned(
PicSumImg(w=50, h=50, cls='rounded-full', id=img_id),
Div(H4(m["name"]), P(m["role"]))),
DivRAligned(
UkIcon('twitter', cls='w-5 h-5'),
UkIcon('linkedin', cls='w-5 h-5'),
UkIcon('github', cls='w-5 h-5'),
cls=TextT.gray+'space-x-2'
),
cls='p-3')
################################
### Navigation and Scrollspy ###
################################
scrollspy_links = (
A("Welcome", href="#welcome-section"),
A("Products", href="#products-section"),
A("Testimonials", href="#testimonials-section"),
A("Team", href="#team-section"),
A("Code Example", href="#code-section"))
@rt
def index():
def _Section(*c, **kwargs): return Section(*c, cls='space-y-3 my-48',**kwargs)
return Container(
NavBar(
*scrollspy_links,
brand=DivLAligned(H3("Scrollspy Demo!"),UkIcon('rocket',height=30,width=30)),
sticky=True, uk_scrollspy_nav=True,
scrollspy_cls=ScrollspyT.bold),
NavContainer(
*map(Li, scrollspy_links),
uk_scrollspy_nav=True,
sticky=True,
cls=(NavT.primary,'pt-20 px-5 pr-10')),
Container(
# Notice the ID of each section corresponds to the `scrollspy_links` dictionary
# So in scollspy `NavContainer` the `href` of each `Li` is the ID of the section
DivCentered(
H1("Welcome to the Store!"),
Subtitle("Explore our products and enjoy dynamic code examples."),
id="welcome-section"),
_Section(H2("Products"),
Grid(*[ProductCard(p,img_id=i) for i,p in enumerate(products)], cols_lg=2),
id="products-section"),
_Section(H2("Testimonials"),
Slider(*[TestimonialCard(t,img_id=i) for i,t in enumerate(testimonials)]),
id="testimonials-section"),
_Section(H2("Our Team"),
Grid(*[TeamCard(m,img_id=i) for i,m in enumerate(team)], cols_lg=2, cols_max=3),
id="team-section"),
_Section(H2("Code Example"),
CodeBlock(code_example, lang="python"),
id="code-section")),
cls=(ContainerT.xl,'uk-container-expand'))
serve()
|