generated from john/python-template
107 lines
3.8 KiB
Python
107 lines
3.8 KiB
Python
from nicegui import ui
|
|
|
|
# 1. Mature Dark Mode Setup
|
|
ui.dark_mode(True)
|
|
|
|
# Define a refined dark palette using expanded dictionary styling
|
|
theme_colors = {
|
|
'primary': '#6366f1',
|
|
'secondary': '#8b5cf6',
|
|
'accent': '#ec4899',
|
|
'dark': '#0f172a',
|
|
'dark_page': '#020617',
|
|
'positive': '#10b981',
|
|
'negative': '#ef4444',
|
|
}
|
|
|
|
ui.colors(**theme_colors)
|
|
|
|
# Optional: Add custom CSS for subtle noise overlays or kinetic typography
|
|
ui.add_css('''
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 1.5rem;
|
|
}
|
|
''')
|
|
|
|
# 2. Bento Grid Layout
|
|
with ui.element('div').classes('grid grid-cols-1 md:grid-cols-4 gap-6 w-full max-w-6xl mx-auto p-8'):
|
|
|
|
# Header spanning all columns
|
|
with ui.element('div').classes('col-span-1 md:col-span-4 mb-4'):
|
|
ui.label('Analytics Dashboard').classes('text-4xl font-extrabold tracking-tight text-white')
|
|
ui.label('AI-driven insights for Q3').classes('text-lg text-slate-400 mt-1')
|
|
|
|
# Large Feature Card (Glassmorphism + Functional Motion)
|
|
with ui.element('div').classes('glass-card col-span-1 md:col-span-2 p-6 transition-transform duration-300 hover:scale-[1.02]'):
|
|
ui.icon('monitoring', size='2rem').classes('text-primary mb-4')
|
|
ui.label('Revenue Prediction').classes('text-xl font-semibold text-slate-100')
|
|
ui.label('$45,231.00').classes('text-5xl font-bold text-white mt-2')
|
|
# Placeholder for an interactive EChart
|
|
ui.echart({
|
|
'xAxis': {
|
|
'type': 'category',
|
|
'data': [
|
|
'Mon',
|
|
'Tue',
|
|
'Wed',
|
|
'Thu',
|
|
'Fri',
|
|
],
|
|
},
|
|
'yAxis': {
|
|
'type': 'value',
|
|
},
|
|
'series': [
|
|
{
|
|
'data': [
|
|
120,
|
|
200,
|
|
150,
|
|
80,
|
|
70,
|
|
],
|
|
'type': 'bar',
|
|
'itemStyle': {
|
|
'color': '#6366f1',
|
|
},
|
|
},
|
|
],
|
|
}).classes('w-full h-48 mt-4')
|
|
|
|
# Smaller Metric Cards
|
|
metric_cards = [
|
|
{
|
|
'title': 'Active Users',
|
|
'value': '1,204',
|
|
'icon': 'group',
|
|
'color': 'text-secondary',
|
|
},
|
|
{
|
|
'title': 'Server Load',
|
|
'value': '34%',
|
|
'icon': 'memory',
|
|
'color': 'text-accent',
|
|
},
|
|
]
|
|
|
|
for card in metric_cards:
|
|
with ui.element('div').classes('glass-card col-span-1 p-6 flex flex-col justify-between transition-transform duration-300 hover:-translate-y-1'):
|
|
ui.icon(card['icon'], size='2rem').classes(card['color'])
|
|
ui.element('div').classes('flex-grow')
|
|
ui.label(card['value']).classes('text-4xl font-bold text-white mt-4')
|
|
ui.label(card['title']).classes('text-sm font-medium text-slate-400 uppercase tracking-wider')
|
|
|
|
# AI Assistant Module (Adaptive Interface)
|
|
with ui.element('div').classes('glass-card col-span-1 md:col-span-4 p-6 flex items-center gap-4'):
|
|
ui.icon('smart_toy', size='2rem').classes('text-positive animate-pulse')
|
|
with ui.element('div'):
|
|
ui.label('Ambient AI Suggestion').classes('text-sm font-bold text-positive uppercase tracking-wider')
|
|
ui.label('Based on current server load, scaling up instances in the EU-West region is recommended.').classes('text-slate-300')
|
|
ui.space()
|
|
ui.button('Apply Now', color='positive').classes('rounded-full px-6 py-2 shadow-lg shadow-positive/20')
|
|
|
|
ui.run(title='2026 UI Dashboard') |