fmatituy/selectospromanager

1from nicegui import ui2from modules.layout import layout_main3 4def register_bionica_pages():5    @ui.page('/bionica/constructor')6    def bionica_constructor():7        with layout_main("Constructor Biónico"):8            # Estilos personalizados para el look "Cyberpunk/Tech"9            ui.add_head_html('''10                <style>11                    .bionic-card {12                        background: rgba(15, 23, 42, 0.8);13                        backdrop-filter: blur(10px);14                        border: 1px solid rgba(56, 189, 248, 0.3);15                        border-radius: 16px;16                        transition: all 0.3s ease;17                    }18                    .bionic-card:hover {19                        border-color: rgba(56, 189, 248, 0.8);20                        box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);21                    }22                    .neon-text {23                        text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);24                    }25                    .gradient-bg {26                        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);27                    }28                </style>29            ''')30 31            with ui.column().classes('w-full items-center p-8 gradient-bg'):32                # Encabezado33                with ui.row().classes('w-full justify-between items-center mb-8'):34                    with ui.column():35                        ui.label('BIONIC CORE V2.0').classes('text-4xl font-black text-sky-400 neon-text')36                        ui.label('Sistema de Configuración de Aumentos Humanos').classes('text-slate-400')37                    38                    with ui.row().classes('gap-4'):39                        ui.button('Sincronizar Nervios', icon='psychology').props('outline color=sky')40                        ui.button('Guardar Modelo', icon='save').props('color=sky')41 42                # Grid principal43                with ui.grid(columns=3).classes('w-full gap-6'):44                    45                    # Columna 1: Especificaciones Mecánicas46                    with ui.column().classes('bionic-card p-6'):47                        ui.label('Parámetros Mecánicos').classes('text-xl font-bold text-white mb-4')48                        49                        ui.label('Torque de Actuadores (Nm)').classes('text-xs text-sky-300')50                        torq = ui.slider(min=10, max=500, value=150).props('color=sky')51                        ui.label().bind_text_from(torq, 'value', backward=lambda v: f'{v} Nm').classes('text-right text-white font-mono')52                        53                        ui.label('Sensibilidad Táctil').classes('text-xs text-sky-300 mt-4')54                        sens = ui.slider(min=0, max=100, value=85).props('color=sky')55                        ui.label().bind_text_from(sens, 'value', backward=lambda v: f'{v}%').classes('text-right text-white font-mono')56 57                        ui.label('Frecuencia de Muestreo (ms)').classes('text-xs text-sky-300 mt-4')58                        freq = ui.slider(min=1, max=100, value=5).props('color=sky')59                        ui.label().bind_text_from(freq, 'value', backward=lambda v: f'{v} ms').classes('text-right text-white font-mono')60 61                    # Columna 2: Visualización Central (Placeholder para el modelo 3D)62                    with ui.column().classes('bionic-card p-6 items-center justify-center'):63                        ui.label('Visualización de Enlace').classes('text-xl font-bold text-white mb-4 w-full')64                        65                        # Simulación de un "escaneo"66                        spinner = ui.spinner('dots', size='lg', color='sky').classes('my-8')67                        68                        chart = ui.echart({69                            'radar': {70                                'indicator': [71                                    {'name': 'Fuerza', 'max': 100},72                                    {'name': 'Destreza', 'max': 100},73                                    {'name': 'Autonomía', 'max': 100},74                                    {'name': 'Respuesta', 'max': 100},75                                    {'name': 'Integración', 'max': 100}76                                ],77                                'splitArea': {'show': False},78                                'axisLine': {'lineStyle': {'color': 'rgba(56, 189, 248, 0.3)'}}79                            },80                            'series': [{81                                'type': 'radar',82                                'data': [{'value': [80, 95, 70, 90, 85], 'name': 'Perfil Biónico'}],83                                'itemStyle': {'color': '#38bdf8'},84                                'areaStyle': {'color': 'rgba(56, 189, 248, 0.3)'}85                            }]86                        }).classes('w-full h-64')87 88                    # Columna 3: Gestión de Energía y Red89                    with ui.column().classes('bionic-card p-6'):90                        ui.label('Mantenimiento').classes('text-xl font-bold text-white mb-4')91                        92                        with ui.row().classes('w-full items-center justify-between bg-slate-800/50 p-3 rounded-lg'):93                            ui.label('Batería Ion-Lithium').classes('text-sm text-white')94                            ui.label('94%').classes('text-green-400 font-bold')95                        96                        with ui.row().classes('w-full items-center justify-between bg-slate-800/50 p-3 rounded-lg mt-2'):97                            ui.label('Latencia de Enlace').classes('text-sm text-white')98                            ui.label('2ms').classes('text-sky-400 font-bold')99 100                        ui.separator().classes('my-4')101                        102                        ui.label('Diagnóstico de Sensores').classes('text-xs text-sky-300')103                        with ui.row().classes('w-full gap-2 mt-2'):104                            ui.badge('Nivel 1: OK', color='green')105                            ui.badge('Nivel 2: OK', color='green')106                            ui.badge('Nivel 3: WARN', color='orange')107                        108                        ui.button('Autodiagnóstico', icon='bolt').props('flat color=sky').classes('w-full mt-4')109 110                # Log de actividad111                with ui.column().classes('w-full bionic-card p-4 mt-8'):112                    ui.label('Monitor de Integración en Tiempo Real').classes('text-xs uppercase tracking-widest text-sky-500 font-bold mb-2')113                    log = ui.log(max_lines=5).classes('w-full h-24 bg-black/40 text-sky-400 font-mono text-xs p-2')114                    115                    def update_log():116                        import random117                        msgs = [118                            "[INFO] Sincronización neuronal estable al 98.4%",119                            "[WARN] Pico de tensión detectado en actuador metacarpial",120                            "[OK] Calibración de feedback háptico completada",121                            "[INFO] Descargando actualización de firmware v2.1.0",122                            "[SCAN] Escaneo de bio-impedancia finalizado"123                        ]124                        log.push(random.choice(msgs))125                    126                    ui.timer(3.0, update_log)127 128register_bionica_pages()129