diff --git a/main.js b/main.js index 33c0460..eb17dab 100644 --- a/main.js +++ b/main.js @@ -24,6 +24,7 @@ function createWindow() { win.setMenu(null); win.loadURL('http://localhost:54322'); + win.webContents.openDevTools(); } ipcMain.on("win:minimize", () => win.minimize()); diff --git a/src/api/user/user.controller.ts b/src/api/user/user.controller.ts index bdff97c..976fbfc 100644 --- a/src/api/user/user.controller.ts +++ b/src/api/user/user.controller.ts @@ -1,15 +1,37 @@ import { FastifyReply, FastifyRequest } from 'fastify'; import * as userService from './user.service'; +import {queryOne} from '../../shared/database'; import jwt from "jsonwebtoken"; -interface UserIdBody { userId: number; } interface UserIdParams { id: string; } interface CreateUserBody { username: string; profilePictureUrl?: string; } interface UpdateUserBody { username?: string; profilePictureUrl?: string | null; password?: string; } -interface ConnectBody { accessToken: string; anilistUserId: number; expiresIn: number; } interface DBRunResult { changes: number; lastID: number; } +export async function getMe(req: any, reply: any) { + const userId = req.user?.id; + + if (!userId) { + return reply.code(401).send({ error: "Unauthorized" }); + } + + const user = await queryOne( + `SELECT username, profile_picture_url FROM User WHERE id = ?`, + [userId], + 'userdata' // ✅ DB correcta + ); + + if (!user) { + return reply.code(404).send({ error: "User not found" }); + } + + return reply.send({ + username: user.username, + avatar: user.profile_picture_url + }); +} + export async function login(req: FastifyRequest, reply: FastifyReply) { const { userId } = req.body as { userId: number }; diff --git a/src/api/user/user.routes.ts b/src/api/user/user.routes.ts index 0a1077d..3fd2a06 100644 --- a/src/api/user/user.routes.ts +++ b/src/api/user/user.routes.ts @@ -2,6 +2,7 @@ import { FastifyInstance } from 'fastify'; import * as controller from './user.controller'; async function userRoutes(fastify: FastifyInstance) { + fastify.get('/me',controller.getMe); fastify.post("/login", controller.login); fastify.get('/users', controller.getAllUsers); fastify.post('/users', controller.createUser); diff --git a/src/scripts/auth-guard.js b/src/scripts/auth-guard.js index dc04043..d1a8474 100644 --- a/src/scripts/auth-guard.js +++ b/src/scripts/auth-guard.js @@ -1,7 +1,81 @@ -(function () { - const token = localStorage.getItem("token"); +;(() => { + const token = localStorage.getItem("token") if (!token && window.location.pathname !== "/") { - window.location.href = "/"; + window.location.href = "/" } -})(); +})() + +async function loadMeUI() { + const token = localStorage.getItem("token") + if (!token) return + + try { + const res = await fetch("/api/me", { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + if (!res.ok) return + + const user = await res.json() + + const navUser = document.getElementById("nav-user") + const navUsername = document.getElementById("nav-username") + const navAvatar = document.getElementById("nav-avatar") + const dropdownAvatar = document.getElementById("dropdown-avatar") + + if (!navUser || !navUsername || !navAvatar) return + + navUser.style.display = "flex" + navUsername.textContent = user.username + + const avatarUrl = user.avatar || "/public/assets/default-avatar.png" + navAvatar.src = avatarUrl + if (dropdownAvatar) { + dropdownAvatar.src = avatarUrl + } + + setupDropdown() + } catch (e) { + console.error("Failed to load user UI:", e) + } +} + +function setupDropdown() { + const userAvatarBtn = document.querySelector(".user-avatar-btn") + const navDropdown = document.getElementById("nav-dropdown") + const navLogout = document.getElementById("nav-logout") + + if (!userAvatarBtn || !navDropdown || !navLogout) return + + userAvatarBtn.addEventListener("click", (e) => { + e.stopPropagation() + navDropdown.classList.toggle("active") + }) + + document.addEventListener("click", (e) => { + if (!navDropdown.contains(e.target)) { + navDropdown.classList.remove("active") + } + }) + + navDropdown.addEventListener("click", (e) => { + e.stopPropagation() + }) + + navLogout.addEventListener("click", () => { + localStorage.removeItem("token") + window.location.href = "/" + }) + + const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item") + dropdownLinks.forEach((link) => { + link.addEventListener("click", () => { + navDropdown.classList.remove("active") + }) + }) +} + +loadMeUI() \ No newline at end of file diff --git a/views/anime/animes.html b/views/anime/animes.html index 07ba60b..0b80d58 100644 --- a/views/anime/animes.html +++ b/views/anime/animes.html @@ -23,7 +23,7 @@ -
- +
@@ -58,7 +95,7 @@
- +
@@ -134,4 +171,4 @@ - \ No newline at end of file + diff --git a/views/books/books.html b/views/books/books.html index 38c8978..416af47 100644 --- a/views/books/books.html +++ b/views/books/books.html @@ -4,6 +4,7 @@ WaifuBoard Books + @@ -24,7 +25,7 @@
-
- - -
+
+
+ + +
+
+ +
diff --git a/views/css/anime/home.css b/views/css/anime/home.css index 3ec4647..72dd6b1 100644 --- a/views/css/anime/home.css +++ b/views/css/anime/home.css @@ -11,13 +11,16 @@ --nav-height: 80px; } -* { box-sizing: border-box; outline: none; } +* { + box-sizing: border-box; + outline: none; +} body { margin: 0; background-color: var(--bg-base); color: var(--text-primary); - font-family: 'Inter', system-ui, sans-serif; + font-family: "Inter", system-ui, sans-serif; overflow-x: hidden; } @@ -31,14 +34,14 @@ body { align-items: center; justify-content: space-between; padding: 0 3rem; - background: linear-gradient(to bottom, rgba(9,9,11,0.9) 0%, rgba(9,9,11,0) 100%); + background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%); transition: background 0.3s; } .navbar.scrolled { background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(255,255,255,0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .nav-brand { @@ -73,10 +76,10 @@ body { .nav-center { display: flex; gap: 0.5rem; - background: rgba(255,255,255,0.03); + background: rgba(255, 255, 255, 0.03); padding: 0.4rem; border-radius: 999px; - border: 1px solid rgba(255,255,255,0.05); + border: 1px solid rgba(255, 255, 255, 0.05); } .nav-button { @@ -90,13 +93,15 @@ body { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } -.nav-button:hover { color: white; } +.nav-button:hover { + color: white; +} .nav-button.active { background: rgba(255, 255, 255, 0.1); color: white; - box-shadow: 0 4px 15px rgba(0,0,0,0.2); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); - border: 1px solid rgba(255,255,255,0.1); + border: 1px solid rgba(255, 255, 255, 0.1); } .search-wrapper { @@ -105,8 +110,8 @@ body { } .search-input { width: 100%; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.7rem 1rem 0.7rem 2.5rem; border-radius: 99px; color: white; @@ -114,7 +119,7 @@ body { transition: 0.2s; } .search-input:focus { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); } @@ -134,90 +139,243 @@ body { overflow: hidden; } -.hero-background { position: absolute; inset: 0; z-index: 0; } +.hero-background { + position: absolute; + inset: 0; + z-index: 0; +} #hero-bg-media { - width: 100%; height: 100%; object-fit: cover; opacity: 0.6; - transform: scale(1.1); transition: opacity 1s ease; + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.6; + transform: scale(1.1); + transition: opacity 1s ease; } .hero-vignette { - position: absolute; inset: 0; + position: absolute; + inset: 0; background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%), linear-gradient(to top, var(--bg-base) 10%, transparent 60%); z-index: 1; } .hero-content { - position: relative; z-index: 10; height: 100%; - max-width: 1600px; margin: 0 auto; padding: 0 3rem; - display: flex; align-items: flex-end; padding-bottom: 6rem; gap: 3rem; + position: relative; + z-index: 10; + height: 100%; + max-width: 1600px; + margin: 0 auto; + padding: 0 3rem; + display: flex; + align-items: flex-end; + padding-bottom: 6rem; + gap: 3rem; } .hero-poster-card { - width: 260px; height: 380px; border-radius: var(--radius-lg); - overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); - border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; + width: 260px; + height: 380px; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); + border: 1px solid rgba(255, 255, 255, 0.1); + flex-shrink: 0; background: #1a1a1a; } -.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; } +.hero-poster-card img { + width: 100%; + height: 100%; + object-fit: cover; +} -.hero-text { flex: 1; max-width: 800px; margin-bottom: 1rem; animation: fadeInUp 0.8s ease; } +.hero-text { + flex: 1; + max-width: 800px; + margin-bottom: 1rem; + animation: fadeInUp 0.8s ease; +} .hero-title { - font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; - text-shadow: 0 4px 20px rgba(0,0,0,0.8); - display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + font-size: 4rem; + font-weight: 900; + line-height: 1.1; + margin: 0 0 1rem 0; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } -.hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 600; } -.score-badge { color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.2rem 0.8rem; border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); } +.hero-meta { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1.5rem; + font-size: 1.1rem; + font-weight: 600; +} +.score-badge { + color: #22c55e; + background: rgba(34, 197, 94, 0.1); + padding: 0.2rem 0.8rem; + border-radius: 6px; + border: 1px solid rgba(34, 197, 94, 0.2); +} .hero-desc { - font-size: 1.1rem; line-height: 1.6; color: #e4e4e7; margin-bottom: 2rem; - max-width: 650px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; - overflow: hidden; text-shadow: 0 2px 4px rgba(0,0,0,0.5); + font-size: 1.1rem; + line-height: 1.6; + color: #e4e4e7; + margin-bottom: 2rem; + max-width: 650px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } -.hero-buttons { display: flex; gap: 1rem; } +.hero-buttons { + display: flex; + gap: 1rem; +} -.btn-primary, .btn-blur { - padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem; - border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; +.btn-primary, +.btn-blur { + padding: 1rem 2.5rem; + border-radius: 999px; + font-weight: 700; + font-size: 1rem; + border: none; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; transition: transform 0.2s; } -.btn-primary { background: white; color: black; } -.btn-primary:hover { transform: scale(1.05); } -.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); } -.btn-blur:hover { background: rgba(255, 255, 255, 0.2); } +.btn-primary { + background: white; + color: black; +} +.btn-primary:hover { + transform: scale(1.05); +} +.btn-blur { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + color: white; + border: 1px solid rgba(255, 255, 255, 0.2); +} +.btn-blur:hover { + background: rgba(255, 255, 255, 0.2); +} -.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; } -.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } -.section-title { font-size: 1.8rem; font-weight: 800; } +.section { + max-width: 1700px; + margin: 0 auto; + padding: 2rem 3rem; +} +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} +.section-title { + font-size: 1.8rem; + font-weight: 800; +} -.carousel-wrapper { position: relative; } -.carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: none; } -.carousel::-webkit-scrollbar { display: none; } +.carousel-wrapper { + position: relative; +} +.carousel { + display: flex; + gap: 1.25rem; + overflow-x: auto; + padding: 1rem 0; + scroll-behavior: smooth; + scrollbar-width: none; +} +.carousel::-webkit-scrollbar { + display: none; +} .scroll-btn { - position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; - border-radius: 50%; background: rgba(20, 20, 23, 0.9); border: 1px solid rgba(255,255,255,0.1); - color: white; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center; - opacity: 0; transition: 0.3s; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + border-radius: 50%; + background: rgba(20, 20, 23, 0.9); + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + z-index: 20; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: 0.3s; +} +.carousel-wrapper:hover .scroll-btn { + opacity: 1; +} +.scroll-btn:hover { + background: var(--accent); +} +.scroll-btn.left { + left: -25px; +} +.scroll-btn.right { + right: -25px; } -.carousel-wrapper:hover .scroll-btn { opacity: 1; } -.scroll-btn:hover { background: var(--accent); } -.scroll-btn.left { left: -25px; } -.scroll-btn.right { right: -25px; } -.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } -.card:hover { transform: translateY(-8px); } -.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; } -.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } -.card:hover .card-img-wrap img { transform: scale(1.05); } +.card { + min-width: 220px; + cursor: pointer; + transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); +} +.card:hover { + transform: translateY(-8px); +} +.card-img-wrap { + width: 100%; + aspect-ratio: 2 / 3; + border-radius: var(--radius-md); + overflow: hidden; + position: relative; + margin-bottom: 0.8rem; + background: #222; +} +.card-img-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s; +} +.card:hover .card-img-wrap img { + transform: scale(1.05); +} -.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); } +.card-content h3 { + margin: 0; + font-size: 1rem; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.card-content p { + margin: 4px 0 0 0; + font-size: 0.85rem; + color: var(--text-secondary); +} .skeleton { background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%); @@ -226,12 +384,39 @@ body { border-radius: 6px; display: inline-block; } -.text-skeleton { height: 1em; width: 70%; margin-bottom: 0.5rem; } -.title-skeleton { height: 3em; width: 80%; margin-bottom: 1rem; } -.poster-skeleton { width: 100%; height: 100%; } +.text-skeleton { + height: 1em; + width: 70%; + margin-bottom: 0.5rem; +} +.title-skeleton { + height: 3em; + width: 80%; + margin-bottom: 1rem; +} +.poster-skeleton { + width: 100%; + height: 100%; +} -@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } -@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } +@keyframes shimmer { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} .search-wrapper { position: relative; @@ -241,8 +426,8 @@ body { .search-input { width: 100%; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.7rem 1rem 0.7rem 2.5rem; border-radius: 99px; color: white; @@ -273,14 +458,14 @@ body { right: 0; background: rgba(15, 15, 18, 0.95); backdrop-filter: blur(12px); - border: 1px solid rgba(255,255,255,0.1); + border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; border-radius: 0 0 12px 12px; padding: 0.5rem; display: none; flex-direction: column; gap: 0.25rem; - box-shadow: 0 10px 30px rgba(0,0,0,0.5); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-height: 400px; overflow-y: auto; } @@ -302,7 +487,7 @@ body { } .search-item:hover { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); } .search-poster { @@ -345,6 +530,216 @@ body { width: 6px; } .search-results::-webkit-scrollbar-thumb { - background: rgba(255,255,255,0.2); + background: rgba(255, 255, 255, 0.2); border-radius: 3px; -} \ No newline at end of file +} + +.nav-right { + display: flex; + align-items: center; + gap: 1.5rem; +} + +/* Estilos mejorados del dropdown de usuario */ +.nav-user { + position: relative; + display: flex; + align-items: center; +} + +.user-avatar-btn { + position: relative; + cursor: pointer; + transition: transform 0.2s ease; +} + +.user-avatar-btn:hover { + transform: scale(1.05); +} + +#nav-avatar { + width: 44px; + height: 44px; + object-fit: cover; + border-radius: 50%; + border: 2px solid var(--accent); + background: var(--bg-surface); + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 0 0 0 var(--accent-glow); +} + +.user-avatar-btn:hover #nav-avatar { + box-shadow: 0 0 0 4px var(--accent-glow); + border-color: #a78bfa; +} + +.online-indicator { + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + background: #22c55e; + border: 2px solid var(--bg-base); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.6; + } +} + +.nav-dropdown { + position: absolute; + top: calc(100% + 12px); + right: 0; + background: rgba(18, 18, 21, 0.98); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 0; + min-width: 260px; + display: none; + flex-direction: column; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1); + z-index: 9999; + overflow: hidden; + animation: dropdownSlide 0.2s ease-out; +} + +@keyframes dropdownSlide { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.nav-dropdown.active { + display: flex; +} + +.dropdown-header { + display: flex; + align-items: center; + gap: 12px; + padding: 16px; + background: rgba(139, 92, 246, 0.08); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.dropdown-avatar { + width: 48px; + height: 48px; + border-radius: 12px; + object-fit: cover; + border: 2px solid var(--accent); + background: var(--bg-surface); +} + +.dropdown-user-info { + flex: 1; + overflow: hidden; +} + +.dropdown-username { + font-weight: 700; + font-size: 1rem; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 2px; +} + +.dropdown-status { + font-size: 0.75rem; + color: #22c55e; + font-weight: 600; + display: flex; + align-items: center; + gap: 6px; +} + +.dropdown-status::before { + content: ""; + width: 6px; + height: 6px; + background: #22c55e; + border-radius: 50%; + display: inline-block; +} + +.dropdown-divider { + height: 1px; + background: rgba(255, 255, 255, 0.06); + margin: 4px 0; +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + color: var(--text-primary); + text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + border: none; + background: transparent; + width: 100%; + text-align: left; + font-family: inherit; +} + +.dropdown-item svg { + flex-shrink: 0; + color: var(--text-secondary); + transition: all 0.2s ease; +} + +.dropdown-item:hover { + background: rgba(255, 255, 255, 0.08); + color: white; + padding-left: 20px; +} + +.dropdown-item:hover svg { + color: var(--accent); + transform: translateX(2px); +} + +.dropdown-item:active { + transform: scale(0.98); +} + +.logout-item { + color: #ef4444; + margin-top: 4px; +} + +.logout-item svg { + color: #ef4444; +} + +.logout-item:hover { + background: rgba(239, 68, 68, 0.15); + color: #f87171; +} + +.logout-item:hover svg { + color: #f87171; + transform: translateX(2px); +} diff --git a/views/css/titlebar.css b/views/css/titlebar.css index 1d5410b..a1aa50d 100644 --- a/views/css/titlebar.css +++ b/views/css/titlebar.css @@ -9,11 +9,16 @@ html { background: #09090b; visibility: hidden; + /* Agregado scrollbar-gutter para reservar espacio estable */ + scrollbar-gutter: stable; } html.electron { margin: 0; box-sizing: border-box; + /* Overflow optimizado para evitar desplazamiento horizontal */ + overflow-x: hidden; + overflow-y: auto; } html.electron .navbar, @@ -39,12 +44,13 @@ html.electron .back-btn { padding: 0 12px; -webkit-app-region: drag; user-select: none; - font-family: 'Inter', system-ui, sans-serif; + font-family: "Inter", system-ui, sans-serif; border-bottom: 1px solid rgba(139, 92, 246, 0.2); position: fixed; top: 0; left: 0; - right: 0; + /* Cambiado a width: 100vw para ocupar todo el viewport sin considerar scrollbar */ + width: 100vw; z-index: 999999; backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); @@ -133,8 +139,11 @@ html.electron .back-btn { transform: scale(1.1); } +/* Scrollbar mejorado para no afectar el layout */ html.electron::-webkit-scrollbar { width: 12px; + /* Posicionamiento absoluto para overlay */ + position: absolute; } html.electron::-webkit-scrollbar-track { @@ -150,4 +159,34 @@ html.electron::-webkit-scrollbar-thumb { html.electron::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); -} \ No newline at end of file +} + +/* Asegurar que body también maneje el overflow correctamente */ +body { + margin: 0; + padding: 0; + overflow-x: hidden; +} + +.user-box { + display: flex; + align-items: center; + gap: 8px; + margin-right: 12px; +} + +.user-box img { + width: 26px; + height: 26px; + border-radius: 50%; + object-fit: cover; +} + +.user-box span { + font-size: 13px; + opacity: 0.9; +} + +.hidden { + display: none; +} diff --git a/views/gallery/gallery.html b/views/gallery/gallery.html index 3e78374..2544564 100644 --- a/views/gallery/gallery.html +++ b/views/gallery/gallery.html @@ -27,7 +27,7 @@
diff --git a/views/gallery/image.html b/views/gallery/image.html index 39f69e8..3f19078 100644 --- a/views/gallery/image.html +++ b/views/gallery/image.html @@ -26,7 +26,7 @@
diff --git a/views/list.html b/views/list.html index 08a7ef5..e2f8d58 100644 --- a/views/list.html +++ b/views/list.html @@ -5,6 +5,7 @@ My Lists - WaifuBoard + @@ -23,7 +24,7 @@
diff --git a/views/marketplace.html b/views/marketplace.html index 21ee23e..da27347 100644 --- a/views/marketplace.html +++ b/views/marketplace.html @@ -24,7 +24,7 @@ diff --git a/views/schedule.html b/views/schedule.html index 256008a..b54cccd 100644 --- a/views/schedule.html +++ b/views/schedule.html @@ -8,6 +8,7 @@ + @@ -27,24 +28,67 @@
-
diff --git a/views/users.html b/views/users.html index d5fd334..c71f3dc 100644 --- a/views/users.html +++ b/views/users.html @@ -167,7 +167,7 @@ Click To Download
- +