From 4a711accadcc7c6cf36d6b86bea14f08c1229b13 Mon Sep 17 00:00:00 2001 From: lenafx Date: Mon, 5 Jan 2026 03:00:58 +0100 Subject: [PATCH] better design on animes and books page --- desktop/server.js | 11 +++- desktop/views/anime/animes.html | 1 + desktop/views/books/books.html | 1 + desktop/views/css/home.css | 96 +++++++++++++++++++++++++++++++++ docker/server.js | 12 ++++- docker/views/anime/animes.html | 1 + docker/views/books/books.html | 1 + docker/views/css/home.css | 96 +++++++++++++++++++++++++++++++++ 8 files changed, 217 insertions(+), 2 deletions(-) create mode 100644 desktop/views/css/home.css create mode 100644 docker/views/css/home.css diff --git a/desktop/server.js b/desktop/server.js index 2630104..63c4309 100644 --- a/desktop/server.js +++ b/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); diff --git a/desktop/views/anime/animes.html b/desktop/views/anime/animes.html index 91eed55..7d4857a 100644 --- a/desktop/views/anime/animes.html +++ b/desktop/views/anime/animes.html @@ -7,6 +7,7 @@ + diff --git a/desktop/views/books/books.html b/desktop/views/books/books.html index 5c9abd2..73060ab 100644 --- a/desktop/views/books/books.html +++ b/desktop/views/books/books.html @@ -7,6 +7,7 @@ + diff --git a/desktop/views/css/home.css b/desktop/views/css/home.css new file mode 100644 index 0000000..9ff3f3e --- /dev/null +++ b/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%); + } +} \ No newline at end of file diff --git a/docker/server.js b/docker/server.js index 7033e1a..5423bf0 100644 --- a/docker/server.js +++ b/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); diff --git a/docker/views/anime/animes.html b/docker/views/anime/animes.html index 32be719..ae3fa6a 100644 --- a/docker/views/anime/animes.html +++ b/docker/views/anime/animes.html @@ -7,6 +7,7 @@ + diff --git a/docker/views/books/books.html b/docker/views/books/books.html index 587d99f..4e37552 100644 --- a/docker/views/books/books.html +++ b/docker/views/books/books.html @@ -7,6 +7,7 @@ + diff --git a/docker/views/css/home.css b/docker/views/css/home.css new file mode 100644 index 0000000..9ff3f3e --- /dev/null +++ b/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%); + } +} \ No newline at end of file