update demo card

main.py

@@ -5,7 +5,7 @@ import docutils.core
 from pygments.formatters import HtmlFormatter
 
 from nicegui import Client, ui
-from website import reference
+from website import demo_card, reference
 
 ACCENT_COLOR = '#428BF5'
 HEADER_HEIGHT = '70px'
@@ -63,7 +63,7 @@ async def index_page(client: Client):
                 .style('font-size: 200%; line-height: 0.9')
 
     with ui.row() \
-            .classes('w-full q-pa-md items-center gap-32 p-32 no-wrap') \
+            .classes('w-full q-pa-md items-center gap-28 p-32 no-wrap') \
             .style(f'height: calc(100vh - {HEADER_HEIGHT}); background: {ACCENT_COLOR}'):
         with ui.column().classes('gap-8'):
             ui.markdown('Create buttons, dialogs, markdown,\n\n3D scenes, plots and much more at ease.') \
@@ -75,8 +75,10 @@ async def index_page(client: Client):
                 NiceGUl is available as PyPl package, Docker image and on GitHub
             ''') \
                 .style('font-size: 150%; color: white')
-        with ui.card().style('min-width: 350px; height: 500px'):
-            ui.label('Demo')
+        with ui.row().style('filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))'):
+            with ui.card().classes('no-shadow') \
+                    .style(f'min-width: 360px; height: 380px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)'):
+                demo_card.create_content()
 
     with ui.row().classes('w-full q-pa-md'):
         reference.create_intro()

website/demo_card.py

@@ -0,0 +1,18 @@
+from nicegui import ui
+
+
+def create_content():
+    with ui.column().classes('w-5/12'):
+        ui.button('Click me!', on_click=lambda: output.set_text('Click!'))
+        ui.checkbox('Check me!', on_change=lambda e: output.set_text('Checked.' if e.value else 'Unchecked.'))
+        ui.switch('Switch me!', on_change=lambda e: output.set_text('Switched.' if e.value else 'Unswitched.'))
+        ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
+        ui.number('Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value))
+
+    with ui.column().classes('w-6/12'):
+        ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value))
+        ui.radio(['A', 'B', 'C'], value='A', on_change=lambda e: output.set_text(e.value)).props('inline')
+        ui.toggle(['1', '2', '3'], value='1', on_change=lambda e: output.set_text(e.value))
+        ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1, on_change=lambda e: output.set_text(e.value))
+
+    output = ui.label('Try it out!').classes('mt-8 w-44 text-xl text-grey-9 overflow-hidden text-ellipsis')