better design on animes and books page

desktop/server.js

@@ -173,7 +173,7 @@ const start = async () => {
       await refreshPopularBooks();
     };
 
-    cron.schedule("*/30 * * * *", async () => {
+    const job = cron.schedule("*/30 * * * *", async () => {
       try {
         await refreshAll();
         console.log("cache refreshed");
@@ -190,6 +190,15 @@ const start = async () => {
         console.error("initial refresh failed", e)
     );
     console.log(`Server running at http://localhost:54322`);
+
+    const shutdown = async () => {
+      job.stop();
+      await fastify.close();
+      process.exit(0);
+    };
+
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
   } catch (err) {
     fastify.log.error(err);
     process.exit(1);

desktop/views/anime/animes.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/hero.css">
+    <link rel="stylesheet" href="/views/css/home.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/local-library.css">

desktop/views/books/books.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/hero.css">
+    <link rel="stylesheet" href="/views/css/home.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">

desktop/views/css/home.css

@@ -0,0 +1,96 @@
+/* home.css - Estilo Streaming Profesional (Sin modificar cards/flechas) */
+
+/* 1. Fondo y Fusión del Layout */
+body {
+    background-color: #0b0b0b; /* Fondo oscuro profundo */
+}
+
+/* Efecto de superposición: El contenido sube sobre el banner */
+main#online-content {
+    position: relative;
+    z-index: 10;
+    margin-top: -12vh; /* Sube el contenido visualmente hacia el banner */
+    padding-top: 3rem;
+    /* Degradado para que el corte no sea brusco */
+    background: linear-gradient(to bottom, transparent 0%, #0b0b0b 15%);
+    min-height: 100vh;
+}
+
+
+/* Estilizamos los botones del Hero para igualar a anime.css */
+.hero-buttons .btn-primary {
+    background: white;
+    color: black;
+    font-weight: 800;
+    border: none;
+    padding: 0.9rem 2.4rem;
+    border-radius: 8px; /* Bordes menos redondos, más modernos */
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 0.5px;
+}
+
+.hero-buttons .btn-blur {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 700;
+    border-radius: 8px;
+}
+
+/* 3. Títulos de Secciones */
+/* Añadimos un acento de color a la izquierda */
+.section-header {
+    border-left: 5px solid var(--color-primary); /* Línea morada vertical */
+    padding-left: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.section-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+
+/* 4. Botón Flotante (Modo Biblioteca) */
+/* Estilo Glassmorphism sin cambiar su posición */
+.library-mode-btn {
+    width: 56px;
+    height: 56px;
+    bottom: 2rem;
+    right: 2rem;
+    background: rgba(20, 20, 23, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    border-radius: 16px; /* Cuadrado redondeado en vez de círculo total */
+    transition: all 0.3s ease;
+}
+
+.library-mode-btn svg {
+    width: 26px;
+    height: 26px;
+    opacity: 0.8;
+}
+
+.library-mode-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); /* Glow morado */
+}
+
+.library-mode-btn:hover svg {
+    opacity: 1;
+    color: white;
+}
+
+/* Ajustes Responsive para que el overlap no rompa el móvil */
+@media (max-width: 768px) {
+    main#online-content {
+        margin-top: -5vh; /* Menos subida en móvil */
+        background: linear-gradient(to bottom, transparent 0%, #0b0b0b 10%);
+    }
+}

docker/server.js

@@ -165,7 +165,7 @@ const start = async () => {
       await refreshPopularBooks();
     };
 
-    cron.schedule("*/30 * * * *", async () => {
+    const job = cron.schedule("*/30 * * * *", async () => {
       try {
         await refreshAll();
         console.log("cache refreshed");
@@ -182,6 +182,16 @@ const start = async () => {
         console.error("initial refresh failed", e)
     );
     console.log(`Server running at http://localhost:54322`);
+
+    const shutdown = async () => {
+      job.stop();
+      await fastify.close();
+      process.exit(0);
+    };
+
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+
   } catch (err) {
     fastify.log.error(err);
     process.exit(1);

docker/views/anime/animes.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/hero.css">
+    <link rel="stylesheet" href="/views/css/home.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/create-room.css"/>

docker/views/books/books.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/hero.css">
+    <link rel="stylesheet" href="/views/css/home.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/local-library.css">

docker/views/css/home.css

@@ -0,0 +1,96 @@
+/* home.css - Estilo Streaming Profesional (Sin modificar cards/flechas) */
+
+/* 1. Fondo y Fusión del Layout */
+body {
+    background-color: #0b0b0b; /* Fondo oscuro profundo */
+}
+
+/* Efecto de superposición: El contenido sube sobre el banner */
+main#online-content {
+    position: relative;
+    z-index: 10;
+    margin-top: -12vh; /* Sube el contenido visualmente hacia el banner */
+    padding-top: 3rem;
+    /* Degradado para que el corte no sea brusco */
+    background: linear-gradient(to bottom, transparent 0%, #0b0b0b 15%);
+    min-height: 100vh;
+}
+
+
+/* Estilizamos los botones del Hero para igualar a anime.css */
+.hero-buttons .btn-primary {
+    background: white;
+    color: black;
+    font-weight: 800;
+    border: none;
+    padding: 0.9rem 2.4rem;
+    border-radius: 8px; /* Bordes menos redondos, más modernos */
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 0.5px;
+}
+
+.hero-buttons .btn-blur {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 700;
+    border-radius: 8px;
+}
+
+/* 3. Títulos de Secciones */
+/* Añadimos un acento de color a la izquierda */
+.section-header {
+    border-left: 5px solid var(--color-primary); /* Línea morada vertical */
+    padding-left: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.section-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+
+/* 4. Botón Flotante (Modo Biblioteca) */
+/* Estilo Glassmorphism sin cambiar su posición */
+.library-mode-btn {
+    width: 56px;
+    height: 56px;
+    bottom: 2rem;
+    right: 2rem;
+    background: rgba(20, 20, 23, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    border-radius: 16px; /* Cuadrado redondeado en vez de círculo total */
+    transition: all 0.3s ease;
+}
+
+.library-mode-btn svg {
+    width: 26px;
+    height: 26px;
+    opacity: 0.8;
+}
+
+.library-mode-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); /* Glow morado */
+}
+
+.library-mode-btn:hover svg {
+    opacity: 1;
+    color: white;
+}
+
+/* Ajustes Responsive para que el overlap no rompa el móvil */
+@media (max-width: 768px) {
+    main#online-content {
+        margin-top: -5vh; /* Menos subida en móvil */
+        background: linear-gradient(to bottom, transparent 0%, #0b0b0b 10%);
+    }
+}