Skip to content

Commit

Permalink
Merge pull request #6 from MaxiZamorano/release-dev
Browse files Browse the repository at this point in the history
Release 2.0
  • Loading branch information
MaxiZamorano authored May 8, 2023
2 parents 42b521c + ff8f400 commit c6230b1
Show file tree
Hide file tree
Showing 7 changed files with 2,567 additions and 760 deletions.
61 changes: 54 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,75 @@
<!-- <p align="center">
<b>Selecciona tu idioma | Select your language</b>
</p>
<p align="center">
<a href="https://#"><img width="30" src="https://cdn-icons-png.flaticon.com/512/8363/8363059.png"></a>
<a href="https://#"><img width="30" src="https://cdn-icons-png.flaticon.com/512/197/197484.png"></a><br>
<a href="https://#">Español</a> | <a href="https://#">English</a>
</p> -->

<p align="center">
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme.png"/>
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme2.0.png"/>
</p>

<h2 align="center">Max Theme para HestiaCP</h2>

<p align="center"><strong>Última versión:</strong> 1.2 | <a href="https://github.com/MaxiZamorano/maxtheme/releases/tag/Changelog">Ver Cambios</a> | <a href="#capturas">Capturas de Pantalla</a></p>
<p align="center"><strong>Última versión:</strong> 2.0 | <a href="https://github.com/MaxiZamorano/maxtheme/releases">Ver Cambios</a> | <a href="#capturas">Capturas de Pantalla</a></p>

<p align="center">
<strong>Mi web:</strong> <a href="https://www.maxizamorano.com/">MaxiZamorano.Com</a> |
<strong>Mi web:</strong> <a target="_blank" href="https://www.maxizamorano.com/">maxizamorano.com</a> |
<strong>Sugerencias:</strong> <a href="mailto:contacto@maxizamorano.com"> contacto@maxizamorano.com</a>

</p>

## **¡Bienvenidos!**

He creado este script de fácil instalación para que puedas tener un nuevo tema para el panel de control HestiaCP con estilo Bootstrap 5, incluye personalización de marca para que puedas incluir tu logo en la parte superior reemplazando el logo por defecto de HestiaCP.
He creado este script de fácil instalación para que puedas tener 2 nuevos temas (Dark y Light) para el panel de control HestiaCP con estilo Bootstrap 5, incluye personalización de marca para que puedas incluir tu logo en la parte superior reemplazando el logo por defecto de HestiaCP.

## Características

- Tema Dark y Light
- Tema con Estilo Bootstrap 5
- Instala y desinstala sin afectar los temas por defecto.
- Añade tu logo en el Dashboard de HestiaCP (<a href="#--dashboard-con-tu-logo">Ver ejemplo</a>)
- Añade tu logo en la pantalla de Login o Inicio de sesión (<a href="#--login-o-inicio-de-sesi%C3%B3n-con-tu-logo">Ver ejemplo</a>)
- Añade una imagen de fondo en la pantalla de Login o Inicio de sesión (<a href="#--login-o-inicio-de-sesi%C3%B3n-con-tu-logo-y-tu-fondo">Ver ejemplo</a>)

## Instalación
Para instalar el tema solo debes ejecutar el siguiente comando en la terminal:
Para instalar los temas debes ejecutar como root los siguientes comandos en tu terminal:<br>
#### - Instalar Tema Light/Claro
```bash
curl -sSL https://raw.githubusercontent.com/maxizamorano/maxtheme/main/install.sh -o install.sh && chmod +x install.sh && sh install.sh
curl -sSL https://raw.githubusercontent.com/maxizamorano/maxtheme/main/install-light.sh -o install.sh && sh install.sh
```
#### - Instalar Tema Dark/Oscuro
```bash
curl -sSL https://raw.githubusercontent.com/maxizamorano/maxtheme/main/install-dark.sh -o install.sh && sh install.sh
```
## Notas importantes:
- Si el tema no se cambia de forma automática, debes cambiarlo desde las opciones del panel de control HestiaCP.
- Recomendamos deshabilitar las actualizaciones automáticas de HestiaCP.
- Si luego de una actualización de HestiaCP se pierden los estilos de la pantalla de inicio de sesión, vuelve a reinstalar el tema.
- Si quieres realizar cambios de Logo o Fondo puedes reinstalar el tema.
- Si instalas los 2 temas, podrás cambiarlos cuando quieras desde las opciones del panel de control, pero la pantalla de login o inicio de sesión tendrá los estilos del último tema instalado, por ej: si el último tema que instalaste fue el tema Dark, la pantalla de login seguirá con el tema Dark aunque cambies al tema Light, esto es solo para la pantalla de login, no en el dashboard.
- Para cambiar el tema de la pantalla de login o inicio de sesión (Dark o Light), debes reinstalar nuevamente dicho tema.
- Para cambiar el tema del dashboard solo debes seleccionarlo desde las opciones de configuración de HestiaCP.

## Capturas

A continuación, puedes ver algunas capturas de pantalla del tema que tendrás para tu panel de control HestiaCP.

#### - Login o Inicio de sesión con tu logo
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_9.png"/>
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_10.png"/>

#### - Login o Inicio de sesión con tu logo y tu fondo
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_7.png"/>
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_11.png"/>

#### - Dashboard con tu logo
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_1.png"/>
<img align="center" src="https://www.maxizamorano.com/img/gh/maxtheme_13.png"/>

#### - Capturas Max Theme Light
<table>
<tr>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_1.png"></td>
Expand All @@ -60,9 +88,28 @@ A continuación, puedes ver algunas capturas de pantalla del tema que tendrás p
</tr>
</table>

#### - Capturas Max Theme Dark
<table>
<tr>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_13.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_14.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_15.png"></td>
</tr>
<tr>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_16.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_17.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_18.png"></td>
</tr>
<tr>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_11.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_12.png"></td>
<td><img src="https://www.maxizamorano.com/img/gh/maxtheme_10.png"></td>
</tr>
</table>

## Problemas y/o Sugerencias

Si tienes algún problema con el script, encuentras algun error o tienes alguna sugerencia, por favor contáctate al correo contacto@maxizamorano.com para recibir ayuda y/o establecer una conversación.
Si tienes algún problema con el script, encuentras algún error o tienes alguna sugerencia, por favor contáctate al correo contacto@maxizamorano.com para recibir ayuda y/o establecer una conversación.

## Derechos de autor

Expand Down
261 changes: 261 additions & 0 deletions install-dark.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
#!/bin/bash

# Colores
blanco='\033[1;37m'
verde='\033[0;32m'
amarillo='\033[1;33m'
azul='\033[0;34m'
magenta='\033[0;35m'
cyan='\033[0;36m'
gris='\033[1;30m'
negro='\033[30m'
rojo='\033[31m'
reset='\033[0m'

# Función para mostrar el menú
show_menu() {
clear
echo ""
echo ' ___ ___ _____ _'
echo ' | \/ | |_ _| |'
echo ' | . . | __ ___ __ | | | |__ ___ _ __ ___ ___ '
echo ' | |\/| |/ _ \ \/ / | | | _ \ / _ \ _ _ \ / _ \'
echo ' | | | | (_| |> < | | | | | | __/ | | | | | __/'
echo ' \_| |_/\__,_/_/\_\ \_/ |_| |_|\___|_| |_| |_|\___|'
echo ' ___ _ '
echo ' | \ __ _ _ _| |__'
echo ' | |) / _ | _| / /'
echo ' |___/\__,_|_| |_\_\'

echo ""
echo " Max Theme Dark para HestiaCP"
echo " v2.0"
echo " www.maxizamorano.com"
echo " https://github.com/MaxiZamorano"
echo ""
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${blanco}1) Instalar/Reinstalar${reset}"
echo "${blanco}2) Desinstalar${reset}"
echo "${blanco}3) Salir${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""


}

#función para instalar o reinstalar el tema
instalar(){

url="https://raw.githubusercontent.com/maxizamorano/maxtheme/release-dev/themes/max-theme-dark/max-theme-dark.css"
dir_archivo="/usr/local/hestia/web/css/themes/custom/max-theme-dark.css"

url_2="https://raw.githubusercontent.com/maxizamorano/maxtheme/release-dev/themes/max-theme-dark/max-theme-dark-login.css"
dir_archivo_2="/usr/local/hestia/web/css/themes/max-theme-dark-login.css"

# Verifica si la carpeta "/usr/local/hestia/web/css/themes/custom" existe, si no la crea
if [ ! -d "/usr/local/hestia/web/css/themes/custom" ]; then
mkdir -p "/usr/local/hestia/web/css/themes/custom"
fi

# Descarga el archivo y sobrescribe si ya existe
curl -s -o "$dir_archivo" -k "$url"
curl -s -o "$dir_archivo_2" -k "$url_2"

# Verifica si el archivo .copy-dark.min.css_dark ya existe
if [ -f /usr/local/hestia/web/css/themes/.copy-dark.min.css_dark ]; then
rm -rf /usr/local/hestia/web/css/themes/dark.min.css
cp /usr/local/hestia/web/css/themes/max-theme-dark-login.css /usr/local/hestia/web/css/themes/dark.min.css
rm -rf /usr/local/hestia/web/css/themes/max-theme-dark-login.css
else
cp /usr/local/hestia/web/css/themes/dark.min.css /usr/local/hestia/web/css/themes/.copy-dark.min.css_dark
rm -rf /usr/local/hestia/web/css/themes/dark.min.css
cp /usr/local/hestia/web/css/themes/max-theme-dark-login.css /usr/local/hestia/web/css/themes/dark.min.css
rm -rf /usr/local/hestia/web/css/themes/max-theme-dark-login.css
fi

archivo="/usr/local/hestia/web/css/themes/custom/max-theme-dark.css"
linea="5"
css_inicio=' background-image: url("'
css_final='");'

archivo_2="/usr/local/hestia/web/css/themes/dark.min.css"
linea_2="594"
css_inicio_2=' background-image: url("'
css_final_2='");'

linea_3="603"
css_inicio_3=' background-image: url("'
css_final_3='");'
css_color_fondo=' background: #10161f;'

# Pregunta la URL del logo para el dashboard
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${amarillo}LOGO PARA LA BARRA SUPERIOR DEL DASHBOARD ${reset}"
echo ""
echo "${cyan}Se recomienda que tu logo esté en formato ${amarillo}PNG, SVG o Webp${reset}"
echo "${cyan}Utiliza un formato de URL correcto y en https, por ejmplo: ${amarillo}https://example.com/img/tu-logo.png${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo -n "${verde}Pega o escribe la URL de tu logo: ${reset}"
read url_logo

url=$(echo $url_logo | sed 's/\//\\\//g')

sed -i "${linea}s/.*/$css_inicio${url}$css_final/" $archivo

# Pregunta la URL del logo para el login
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${amarillo}LOGO PARA LA PANTALLA DE LOGIN O INICIO DE SESIÓN ${reset}"
echo ""
echo "${cyan}Se recomienda que tu logo esté en formato ${amarillo}PNG, SVG o Webp${reset}"
echo "${cyan}Utiliza un formato de URL correcto y en https, por ejmplo: ${amarillo}https://example.com/img/tu-logo.png${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo -n "${verde}Pega o escribe la URL de tu logo: ${reset}"
read url_logo_login

url_2=$(echo $url_logo_login | sed 's/\//\\\//g')

sed -i "${linea_2}s/.*/$css_inicio_2${url_2}$css_final_2/" $archivo_2

# Pregunta la URL del Fondo
while true; do
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo -n "${verde}¿Quieres agregar una imagen de fondo en el inicio de sesión? [S/N]:${reset} "
read respuesta

case "$respuesta" in
[Ss]* )
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${amarillo}IMAGEN DE FONDO PARA LA PANTALLA DE LOGIN O INICIO DE SESIÓN ${reset}"
echo ""
echo "${cyan}Se recomienda que la imagen tenga una resolución de ${amarillo}1920x1080px ${cyan}y esté en formato ${amarillo}PNG, JPG o Webp${reset}"
echo "${cyan}Utiliza un formato de URL correcto y en https, por ejmplo: ${amarillo}https://example.com/img/tu-fondo.png${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo -n "${verde}Pega o escribe la URL de la imagen de fondo: ${reset}"
read url_img_fondo

url_3=$(echo $url_img_fondo | sed 's/\//\\\//g')
sed -i "${linea_3}s/.*/$css_inicio_3${url_3}$css_final_3/" $archivo_2

echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${verde} ¡TEMA INSTALADO CORRECTAMENTE! ${reset}"
echo "${cyan} NOTA: ${amarillo}si no se cambia el tema automaticamente, debes cambiarlo desde el panel de control. ${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""

exit
;;
[Nn]* )
sed -i "${linea_3}s/.*/$css_color_fondo/" $archivo_2

echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${verde} ¡TEMA INSTALADO CORRECTAMENTE! ${reset}"
echo "${cyan} NOTA: ${amarillo}si no se cambia el tema automaticamente, debes cambiarlo desde el panel de control. ${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""

exit
;;
* )
echo ""
echo "${rojo}La respuesta es inválida, debes responder con "S/N o s/n".${reset}"
;;
esac
done

}


#función para desinstalar el tema
desinstalar(){
# Pregunta si quiere desinstalar el tema
while true; do
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${cyan}NOTA:${reset} Si lo desinstalas restauraremos los archivos originales y se activará el tema por defecto de HestiaCP."
echo ""
echo -n "${verde}¿Quieres desinstalar el tema Max Theme Dark? [S/N]:${reset} "
read respuesta

case "$respuesta" in
[Ss]* )

# Verifica si está instalado el tema actualmente
if [ -f /usr/local/hestia/web/css/themes/.copy-dark.min.css_dark ]; then
# Elimina los archivos y restaura el original
rm -rf /usr/local/hestia/web/css/themes/dark.min.css
cp /usr/local/hestia/web/css/themes/.copy-dark.min.css_dark /usr/local/hestia/web/css/themes/dark.min.css
rm /usr/local/hestia/web/css/themes/.copy-dark.min.css_dark
rm -rf /usr/local/hestia/web/css/themes/custom/max-theme-dark.css

echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${verde} ¡TEMA DESINSTALADO CORRECTAMENTE! ${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""

exit
else
echo ""
echo "${rojo}¡No tienes el tema instalado! Solo podemos desinstalarlo si el tema fue instalado anteriormente.${reset}"
echo ""
exit
fi


;;
[Nn]* )
# No desinstala el tema
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""
echo "${verde} ¡GENIAL! CONTINÚAS CON TU TEMA ${reset}"
echo "${gris}____________________________________________________________________________________________________${reset}"
echo ""

exit
;;
* )
echo ""
echo "${rojo}La respuesta es inválida, debes responder con "S/N o s/n".${reset}"
;;
esac
done

}


# Loop o bucle para respuesta del usuario
while true; do
# Mostrar el menú
show_menu

# Leer la opción seleccionada por el usuario
echo -n "${verde}Selecciona una opción [1-3]: ${reset}"
read opcion

# Evaluar la opción seleccionada
case $opcion in
1)
instalar
;;
2)
desinstalar
;;
3)
exit
;;
*)
echo "${rojo}Opción inválida. Intente de nuevo.${reset}"
sleep 3
;;
esac
done
Loading

0 comments on commit c6230b1

Please sign in to comment.