🟢 Mini cPanel – Mejora Profesional de UX, Diseño y Funcionalidades

Continuación del Mini cPanel para Raspberry Pi 3B

En la entrada anterior dejamos operativo un mini cPanel funcional, con gestión de archivos, backups y control básico de PHP-FPM.
En esta segunda parte vamos a dar el salto a un entorno más profesional, mejorando:

Experiencia de usuario (UX)
Diseño visual
Organización del panel
Escalabilidad futura
Preparación para nuevas herramientas

Todo ello sin romper lo ya configurado.

🎯 Objetivo de esta mejora

Transformar el panel básico en un dashboard limpio, moderno y usable, similar a un cPanel ligero o Portainer, manteniendo:

Ligereza (Raspberry Pi 3B)
Seguridad (solo LAN, sin root en PHP)
Simplicidad de mantenimiento

🧱 Nueva estructura del panel (frontend)

A partir de ahora, el frontend del panel quedará así:

/var/www/html/

├── admin.php

├── assets/

│   ├── css/

│   │   └── panel.css

│   └── img/

│       └── logo.png

📌 Recordatorio importante

/var/www/html → solo frontend
/var/www/apps → apps, datos y scripts

1️⃣ Crear estructura de directorios del panel

Este paso es obligatorio y evita errores como “No such file or directory”.

sudo mkdir -p /var/www/html/assets/css


sudo mkdir -p /var/www/html/assets/img

Asignamos permisos correctos:

sudo chown -R www-data:www-data /var/www/html/assets

sudo chmod -R 755 /var/www/html/assets

2️⃣ Añadir el logo del panel (adaptativo)

Para hacerlo cómodo, tendremos que dar permisos a FileBrowser para que acceda a la carpeta, he estado tocando varias cosas… pero al final sería

sudo systemctl stop filebrowser #Paramos el servicio

sudo nano /etc/systemd/system/filebrowser.service



#Editamos y el "Service queda tal que así:

[Service]

Type=simple

User=www-data

Group=www-data

ExecStart=/usr/local/bin/filebrowser \

  -d /etc/filebrowser.db \

  -r /var/www/ \

  -a 0.0.0.0 \

  -p 8080

Restart=on-failure

RestartSec=5

NoNewPrivileges=true

PrivateTmp=true

Creamos rutas y damos permisos:

sudo mkdir -p /var/www/html/assets/img

sudo chown -R www-data:www-data /var/www/html/assets

sudo chmod -R 755 /var/www/html/asset

Recargamos…

sudo systemctl daemon-reload

sudo systemctl start filebrowser

sudo systemctl status filebrowser

Copiamos el logo (por ejemplo de 460×460px) a:

/var/www/html/assets/img/logo.png

🔹 El tamaño se adapta automáticamente por CSS
🔹 No será intrusivo
🔹 Mantiene proporción

3️⃣ Estilo profesional del Mini cPanel (UX + tipografía)

Creamos el archivo CSS:

sudo nano /var/www/html/assets/css/panel.css

Contenido:

body {

    background: #0f172a;

    color: #e5e7eb;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    margin: 0;

}



.logo {

    max-width: 120px;   /* El logo 460x460 se adapta aquí */

    height: auto;

    margin-bottom: 20px;

    opacity: 0.9;

}



.login, .panel {

    max-width: 420px;

    margin: 120px auto;

    text-align: center;

}



input, button {

    width: 100%;

    padding: 12px;

    margin-top: 10px;

    border-radius: 8px;

    border: none;

    font-size: 14px;

}



button {

    background: #3b82f6;

    color: white;

    cursor: pointer;

}



button:hover {

    background: #2563eb;

}



.panel a {

    display: block;

    margin: 10px 0;

    padding: 12px;

    background: #1e293b;

    color: #e5e7eb;

    text-decoration: none;

    border-radius: 8px;

}



.panel a:hover {

    background: #334155;

}

4️⃣ Actualizar admin.php con diseño moderno

Editamos el archivo existente:

sudo nano /var/www/html/admin.php

Versión mejorada (login + panel)

<?php
session_start();
$secret_pass = «CAMBIA_ESTA_PASSWORD»;

if (isset($_POST[‘password’])) {
if (hash_equals($secret_pass, $_POST[‘password’])) {
$_SESSION[‘auth’] = true;<
} else {
$error = «Contraseña incorrecta»;
}
}

if (!isset($_SESSION[‘auth’])) {
?>
<!DOCTYPE html>
<html>
<head>
<title>Mini cPanel</title>
<link rel=»stylesheet» href=»assets/css/panel.css»>
</head>
<body>
<div class=»login»>
<img src=»assets/img/logo.png» class=»logo»>
<form method=»post»>
<input type=»password» name=»password» placeholder=»Contraseña»>
<button>Entrar</button>
<?php if(isset($error)) echo «<p>$error</p>»; ?>
</form>
</div>
</body>
</html>
<?php exit; }

function run($script){
echo «<pre>»;
echo shell_exec(«sudo /var/www/apps/admin-scripts/$script 2>&1»);
echo «</pre>»;
}
?>
<!DOCTYPE html>

<html>
<head>
<title>Mini cPanel</title>
<link rel=»stylesheet» href=»assets/css/panel.css»>
</head>
<body>
<div class=»panel»>
<img src=»assets/img/logo.png» class=»logo»>
<h2>Panel de Control</h2>

<a href=»?do=php»>🔁 Reiniciar PHP-FPM</a>
<a href=»?do=perms»>🔐 Ajustar permisos</a>
<a href=»?do=backup»>📦 Backup de apps</a>

<?php<
if(isset($_GET[‘do’])){
if($_GET[‘do’]==’php’) run(‘reiniciar-php.sh’);
if($_GET[‘do’]==’perms’) run(‘ajustar-permisos.sh’);
if($_GET[‘do’]==’backup’) run(‘backup.sh’);
}
?>
</div>
</body>
</html>