ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

user icon to navbar

Browse Source
This commit is contained in:
lenafx
2025-12-06 18:23:00 +01:00
parent 822a9f83cf
commit 94cceedf03
14 changed files with 939 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
main.js
View File

@@ -24,6 +24,7 @@ function createWindow() {
win.setMenu(null);
win.loadURL('http://localhost:54322');
win.webContents.openDevTools();
}
ipcMain.on("win:minimize", () => win.minimize());

26
src/api/user/user.controller.ts
View File

@@ -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 };

1
src/api/user/user.routes.ts
View File

@@ -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);

82
src/scripts/auth-guard.js
View File

@@ -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()

49
views/anime/animes.html
View File

@@ -23,7 +23,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -39,18 +39,55 @@
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<div class="hero-wrapper">
<div class="hero-background">
<img id="hero-bg-media" src="" alt="">
<img id="hero-bg-media" src="/placeholder.svg" alt="">
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
</div>
<div class="hero-vignette"></div>
@@ -58,7 +95,7 @@
<div class="hero-content">
<div class="hero-poster-card">
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
<img id="hero-poster" src="" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
<img id="hero-poster" src="/placeholder.svg" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
</div>
<div class="hero-text">
<div id="hero-loading-ui">

40
views/books/books.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard Books</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/books/books.css">
<script src="/src/scripts/books/books.js" defer></script>
@@ -24,7 +25,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -40,11 +41,46 @@
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<div class="nav-right">
<div class="search-wrapper">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" id="search-input" placeholder="Search manga..." autocomplete="off">
<input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>

507
views/css/anime/home.css
View File

@@ -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;
}
@@ -90,7 +93,9 @@ 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;
@@ -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;
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;
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;
@@ -348,3 +533,213 @@ body {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.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);
}

43
views/css/titlebar.css
View File

@@ -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 {
@@ -151,3 +160,33 @@ html.electron::-webkit-scrollbar-thumb {
html.electron::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}
/* 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;
}

42
views/gallery/gallery.html
View File

@@ -27,7 +27,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -37,12 +37,14 @@
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button active">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button">My List</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper" style="width: 350px;">
<input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
<div class="search-results">
@@ -52,6 +54,40 @@
</button>
</div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<main class="gallery-main">

42
views/gallery/image.html
View File

@@ -26,7 +26,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -34,19 +34,55 @@
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button">My List</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
<div class="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<a href="/gallery" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>

48
views/list.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<title>My Lists - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/list.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
@@ -23,7 +24,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -36,14 +37,53 @@
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button active">My List</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Marketplace</button>
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<div class="container">

44
views/marketplace.html
View File

@@ -24,7 +24,7 @@
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -40,11 +40,49 @@
<button class="nav-button active">Marketplace</button>
</div>
<div class="nav-right">
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
<input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<div class="hero-spacer"></div>

48
views/schedule.html
View File

@@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
@@ -28,9 +29,9 @@
<div class="ambient-bg" id="ambientBg"></div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WB" onerror="this.style.display='none'; this.parentNode.innerHTML='<svg width=\'20\' height=\'20\' viewBox=\'0 0 24 24\' fill=\'white\'><path d=\'M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\'/></svg>'">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
@@ -44,6 +45,49 @@
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<div class="nav-right">
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<div class="calendar-wrapper">

2
views/users.html
View File

@@ -167,7 +167,7 @@
Click To Download
</a>
</div>
<script>localStorage.removeItem("token")</script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/users.js"></script>
</body>