From d3aef9c1d133a7a02bbe91d3ef4ff726f7468889 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Thu, 30 Oct 2025 21:08:08 +0100 Subject: [PATCH] Update AppImage --- AppImage/README.md | 19 ++ AppImage/components/onboarding-carousel.tsx | 270 ++++++++++++++++++++ AppImage/components/proxmox-dashboard.tsx | 3 + AppImage/public/images/onboarding/README.md | 23 ++ 4 files changed, 315 insertions(+) create mode 100644 AppImage/components/onboarding-carousel.tsx create mode 100644 AppImage/public/images/onboarding/README.md diff --git a/AppImage/README.md b/AppImage/README.md index 7c4a831..ecd8f9e 100644 --- a/AppImage/README.md +++ b/AppImage/README.md @@ -11,6 +11,7 @@ A modern, responsive dashboard for monitoring Proxmox VE systems built with Next - **System Logs**: Real-time system log monitoring and filtering - **Dark/Light Theme**: Toggle between themes with Proxmox-inspired design - **Responsive Design**: Works seamlessly on desktop and mobile devices +- **Onboarding Experience**: Interactive welcome carousel for first-time users ## Technology Stack @@ -20,3 +21,21 @@ A modern, responsive dashboard for monitoring Proxmox VE systems built with Next - **UI Components**: Radix UI primitives with shadcn/ui - **Backend**: Flask server for system data collection - **Packaging**: AppImage for easy distribution + +## Onboarding Images + +To customize the onboarding experience, place your screenshot images in `public/images/onboarding/`: + +- `imagen1.png` - Overview section screenshot +- `imagen2.png` - Storage section screenshot +- `imagen3.png` - Network section screenshot +- `imagen4.png` - VMs & LXCs section screenshot +- `imagen5.png` - Hardware section screenshot +- `imagen6.png` - System Logs section screenshot + +**Recommended image specifications:** +- Format: PNG or JPG +- Size: 1200x800px or similar 3:2 aspect ratio +- Quality: High-quality screenshots with representative data + +The onboarding carousel will automatically show on first visit and can be dismissed or marked as "Don't show again". diff --git a/AppImage/components/onboarding-carousel.tsx b/AppImage/components/onboarding-carousel.tsx new file mode 100644 index 0000000..9fdfeb1 --- /dev/null +++ b/AppImage/components/onboarding-carousel.tsx @@ -0,0 +1,270 @@ +"use client" + +import type React from "react" + +import { useState, useEffect } from "react" +import { Button } from "./ui/button" +import { Dialog, DialogContent } from "./ui/dialog" +import { + ChevronLeft, + ChevronRight, + X, + Sparkles, + LayoutDashboard, + HardDrive, + Network, + Box, + Cpu, + FileText, + Rocket, +} from "lucide-react" +import Image from "next/image" + +interface OnboardingSlide { + id: number + title: string + description: string + image?: string + icon: React.ReactNode + gradient: string +} + +const slides: OnboardingSlide[] = [ + { + id: 0, + title: "¡Bienvenido a ProxMenux Monitor!", + description: + "Tu nueva herramienta de monitoreo profesional para Proxmox. Descubre todas las funcionalidades que te ayudarán a gestionar y supervisar tu infraestructura de manera eficiente.", + icon: , + gradient: "from-blue-500 via-purple-500 to-pink-500", + }, + { + id: 1, + title: "Vista General del Sistema", + description: + "Monitorea en tiempo real el estado de tu servidor: CPU, memoria, temperatura, carga del sistema y más. Todo en un dashboard intuitivo y fácil de entender.", + image: "/images/onboarding/imagen1.png", + icon: , + gradient: "from-blue-500 to-cyan-500", + }, + { + id: 2, + title: "Gestión de Almacenamiento", + description: + "Visualiza el estado de todos tus discos y volúmenes. Información detallada de capacidad, uso, salud SMART, temperatura y rendimiento de cada dispositivo de almacenamiento.", + image: "/images/onboarding/imagen2.png", + icon: , + gradient: "from-cyan-500 to-teal-500", + }, + { + id: 3, + title: "Métricas de Red", + description: + "Supervisa el tráfico de red en tiempo real. Estadísticas de ancho de banda, interfaces activas, velocidades de transferencia y gráficos históricos de uso.", + image: "/images/onboarding/imagen3.png", + icon: , + gradient: "from-teal-500 to-green-500", + }, + { + id: 4, + title: "Máquinas Virtuales y Contenedores", + description: + "Gestiona todas tus VMs y contenedores LXC desde un solo lugar. Estado, recursos asignados, uso actual y controles rápidos para cada máquina virtual.", + image: "/images/onboarding/imagen4.png", + icon: , + gradient: "from-green-500 to-emerald-500", + }, + { + id: 5, + title: "Información de Hardware", + description: + "Detalles completos del hardware de tu servidor: CPU, memoria RAM, GPU, discos, red, SAI y más. Especificaciones técnicas, modelos, números de serie y estado de cada componente.", + image: "/images/onboarding/imagen5.png", + icon: , + gradient: "from-emerald-500 to-blue-500", + }, + { + id: 6, + title: "Logs del Sistema", + description: + "Accede a los registros del sistema en tiempo real. Filtra por tipo de evento, busca errores específicos y mantén un seguimiento completo de la actividad de tu servidor.", + image: "/images/onboarding/imagen6.png", + icon: , + gradient: "from-blue-500 to-indigo-500", + }, + { + id: 7, + title: "¡Preparado para el Futuro!", + description: + "ProxMenux Monitor está en constante evolución. Próximamente: alertas personalizadas, notificaciones push, integración con Telegram/Discord, reportes automáticos y muchas más funcionalidades.", + icon: , + gradient: "from-indigo-500 via-purple-500 to-pink-500", + }, +] + +export function OnboardingCarousel() { + const [open, setOpen] = useState(false) + const [currentSlide, setCurrentSlide] = useState(0) + const [direction, setDirection] = useState<"next" | "prev">("next") + + useEffect(() => { + const hasSeenOnboarding = localStorage.getItem("proxmenux-onboarding-seen") + if (!hasSeenOnboarding) { + setOpen(true) + } + }, []) + + const handleNext = () => { + if (currentSlide < slides.length - 1) { + setDirection("next") + setCurrentSlide(currentSlide + 1) + } else { + handleComplete() + } + } + + const handlePrev = () => { + if (currentSlide > 0) { + setDirection("prev") + setCurrentSlide(currentSlide - 1) + } + } + + const handleSkip = () => { + setOpen(false) + } + + const handleComplete = () => { + localStorage.setItem("proxmenux-onboarding-seen", "true") + setOpen(false) + } + + const handleDotClick = (index: number) => { + setDirection(index > currentSlide ? "next" : "prev") + setCurrentSlide(index) + } + + const slide = slides[currentSlide] + + return ( + + +
+ {/* Close button */} + + + {/* Gradient header */} +
+
+
+ + {/* Icon or Image */} +
+ {slide.image ? ( +
+ {slide.title} { + const target = e.target as HTMLImageElement + target.style.display = "none" + const fallback = target.parentElement?.querySelector(".fallback-icon") + if (fallback) { + fallback.classList.remove("hidden") + } + }} + /> +
{slide.icon}
+
+ ) : ( +
{slide.icon}
+ )} +
+ + {/* Decorative elements */} +
+
+
+ + {/* Content */} +
+
+

{slide.title}

+

{slide.description}

+
+ + {/* Progress dots */} +
+ {slides.map((_, index) => ( +
+ + {/* Navigation buttons */} +
+ + +
+ {currentSlide < slides.length - 1 ? ( + <> + + + + ) : ( + + )} +
+
+ + {/* Don't show again */} + {currentSlide === slides.length - 1 && ( +
+ +
+ )} +
+
+ +
+ ) +} diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx index 28971d7..028e49e 100644 --- a/AppImage/components/proxmox-dashboard.tsx +++ b/AppImage/components/proxmox-dashboard.tsx @@ -10,6 +10,7 @@ import { NetworkMetrics } from "./network-metrics" import { VirtualMachines } from "./virtual-machines" import Hardware from "./hardware" import { SystemLogs } from "./system-logs" +import { OnboardingCarousel } from "./onboarding-carousel" import { RefreshCw, AlertTriangle, @@ -220,6 +221,8 @@ export function ProxmoxDashboard() { return (
+ + {!isServerConnected && (
diff --git a/AppImage/public/images/onboarding/README.md b/AppImage/public/images/onboarding/README.md new file mode 100644 index 0000000..d16bab1 --- /dev/null +++ b/AppImage/public/images/onboarding/README.md @@ -0,0 +1,23 @@ +# Onboarding Images + +Place your screenshot images here with the following names: + +- `imagen1.png` - Overview section screenshot +- `imagen2.png` - Storage section screenshot +- `imagen3.png` - Network section screenshot +- `imagen4.png` - VMs & LXCs section screenshot +- `imagen5.png` - Hardware section screenshot +- `imagen6.png` - System Logs section screenshot + +## Image Guidelines + +- **Format**: PNG or JPG +- **Recommended size**: 1200x800px or similar aspect ratio +- **Quality**: High quality screenshots showing the main features of each section +- **Content**: Capture the full section with representative data + +## Notes + +- The last slide (Future Updates) doesn't need an image as it uses an icon +- If an image fails to load, the component will show a fallback icon +- Images should be optimized for web (compressed but still high quality)