main.py 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. #!/usr/bin/env python3
  2. from pathlib import Path
  3. import docutils.core
  4. from pygments.formatters import HtmlFormatter
  5. from nicegui import Client, ui
  6. from website import demo_card, reference
  7. ACCENT_COLOR = '#428BF5'
  8. HEADER_HEIGHT = '70px'
  9. STATIC = Path(__file__).parent / 'website' / 'static'
  10. ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
  11. def add_head_html() -> None:
  12. ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
  13. ui.add_head_html(docutils.core.publish_parts('', writer_name='html')['stylesheet'])
  14. ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
  15. ui.add_head_html('''
  16. <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
  19. <link rel="manifest" href="/favicon/site.webmanifest">
  20. <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000000">
  21. <link rel="shortcut icon" href="/favicon/favicon.ico">
  22. <meta name="msapplication-TileColor" content="#ffffff">
  23. <meta name="msapplication-config" content="/favicon/browserconfig.xml">
  24. <meta name="theme-color" content="#ffffff">
  25. ''') # https://realfavicongenerator.net/
  26. @ui.page('/')
  27. async def index_page(client: Client):
  28. add_head_html()
  29. client.content.classes(remove='q-pa-md gap-4').style('background: #f8f8f8')
  30. with ui.header() \
  31. .classes('items-center') \
  32. .style(f'background-color: {ACCENT_COLOR}; height: {HEADER_HEIGHT}') \
  33. .props('elevated'):
  34. ui.html((STATIC / 'happy_face.svg').read_text()).classes('w-8 stroke-white')
  35. ui.html((STATIC / 'nicegui_word.svg').read_text()).classes('w-24')
  36. with ui.row().classes('items-center ml-auto'):
  37. ui.link('Features').classes('text-lg').style('color: white!important')
  38. ui.link('Installation').classes('text-lg').style('color: white!important')
  39. ui.link('Documentation').classes('text-lg').style('color: white!important')
  40. ui.link('API Reference').classes('text-lg').style('color: white!important')
  41. ui.link('Docker').classes('text-lg').style('color: white!important')
  42. ui.link('Deployment').classes('text-lg').style('color: white!important')
  43. with ui.link(target='https://github.com/zauberzeug/nicegui/'):
  44. ui.html((STATIC / 'github.svg').read_text()).classes('fill-white scale-125 m-1')
  45. with ui.row() \
  46. .classes('w-full q-pa-md items-center gap-12 no-wrap') \
  47. .style(f'height: calc(100vh - {HEADER_HEIGHT}); transform: translateX(-250px)'):
  48. ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
  49. with ui.column().classes('gap-8'):
  50. ui.markdown('The NiceGUI you really\n\nneed in your life.') \
  51. .style('font-size: 400%; line-height: 0.9; font-weight: 500')
  52. ui.markdown('An easy-to-use Python-based UI framework\n\nwhich shows up in your web browser.') \
  53. .style('font-size: 200%; line-height: 0.9')
  54. with ui.row() \
  55. .classes('w-full q-pa-md items-center gap-28 p-32 no-wrap') \
  56. .style(f'height: calc(100vh - {HEADER_HEIGHT}); background: {ACCENT_COLOR}'):
  57. with ui.column().classes('gap-8'):
  58. ui.markdown('Create buttons, dialogs, markdown,\n\n3D scenes, plots and much more at ease.') \
  59. .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500')
  60. ui.label('''
  61. It is great for micro web apps, dashboards, robotics projects, smart home solutions
  62. and similar use cases. You can also use it in development, for example when
  63. tweaking/configuring a machine learning algorithm or tuning motor controllers.
  64. NiceGUl is available as PyPl package, Docker image and on GitHub
  65. ''') \
  66. .style('font-size: 150%; color: white')
  67. with ui.row().style('filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))'):
  68. with ui.card().classes('no-shadow') \
  69. .style(f'min-width: 360px; height: 380px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)'):
  70. demo_card.create_content()
  71. with ui.row().classes('w-full q-pa-md'):
  72. reference.create_intro()
  73. @ui.page('/reference')
  74. def reference_page():
  75. add_head_html()
  76. reference.create_full()
  77. ui.run()