readvibes.py

# Generated from a screenshot of my Readwise Reader home screen using Simon Moisselin's
# Image -> FastHTML tool ( https://simn.fr/tools/fasthtml-chat )

Container(
    DivLAligned(
        H3('Readvibes', cls='text-white text-xl font-bold'),
        DivLAligned(
            Button(UkIcon('home'), 'Home', cls='text-white'),
            Button(UkIcon('book'), 'Library', cls='text-white'),
            Button(UkIcon('settings'), 'Configure', cls='text-white'),
            cls='space-x-4'
        ),
        cls='flex justify-between items-center p-4 bg-gray-900'
    ),
    Div(
        H2('Welcome Eleanor', cls='text-white text-lg'),
        cls='p-4'
    ),
    Section(
        H3('Quick reads', cls='text-white text-md'),
        Subtitle('Shorter than 15 minutes', cls='text-gray-400'),
        Grid(
            *[Card(
                PicSumImg(h=100, w=100, id=i),
                Div(H4('Title'), P('Description', cls='text-gray-400'), cls='p-2'),
                cls='bg-gray-800 text-white'
            ) for i in range(5)],
            cols=5
        ),
        cls='p-4'
    ),
    Section(
        H3('Longer reads', cls='text-white text-md'),
        Subtitle('Longer than 15 minutes', cls='text-gray-400'),
        Grid(
            *[Card(
                PicSumImg(h=100, w=100, id=i+5),
                Div(H4('Title'), P('Description', cls='text-gray-400'), cls='p-2'),
                cls='bg-gray-800 text-white'
            ) for i in range(5)],
            cols=5
        ),
        cls='p-4'
    ),
    cls='bg-gray-900 min-h-screen'
)