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

added my lists page

Browse Source
This commit is contained in:
lenafx
2025-12-06 14:28:40 +01:00
parent 9832384627
commit e5ec8aa7e5
21 changed files with 2400 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
views/anime/anime.html
View File

@@ -11,10 +11,11 @@
<link rel="stylesheet" href="/views/css/titlebar.css">
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div id="titlebar">
<div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
@@ -22,7 +23,7 @@
</div>
</div>
<!-- Synopsis Modal -->
<div class="modal-overlay" id="desc-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal()">✕</button>
@@ -31,13 +32,48 @@
</div>
</div>
<!-- Add to List Modal -->
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<a href="/" class="back-btn">
<div class="modal-body">
<div class="form-group">
<label>Status</label>
<select id="modal-status" class="form-input">
<option value="WATCHING">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Watch</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
</select>
</div>
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="modal-actions">
<button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
<button class="btn-modal-primary" onclick="saveToList()">Save</button>
</div>
</div>
</div>
</div>
<a href="/anime" 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>
Back to Home
</a>
<div class="hero-wrapper">
<div class="video-background">
<div id="player"></div>
@@ -45,10 +81,7 @@
<div class="hero-overlay"></div>
</div>
<div class="content-container">
<aside class="sidebar">
<div class="poster-card">
<img id="poster" src="" alt="">
@@ -80,14 +113,11 @@
<div class="info-grid">
<div class="info-item">
<h4>Main Characters</h4>
<div class="character-list" id="char-list">
</div>
<div class="character-list" id="char-list"></div>
</div>
</div>
</aside>
<main class="main-content">
<div class="anime-header">
<h1 class="anime-title" id="title">Loading...</h1>
@@ -104,11 +134,10 @@
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
Start Watching
</button>
<button class="btn-secondary">+ Add to List</button>
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
</div>
</div>
<div class="description-box">
<div id="description-preview"></div>
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
@@ -118,7 +147,6 @@
</div>
<div class="episodes-section">
<div class="episodes-header-row">
<div class="section-title" style="margin:0; border:none; padding:0;">
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
@@ -130,7 +158,6 @@
<div class="episodes-grid" id="episodes-grid"></div>
<div class="pagination-controls" id="pagination-controls">
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
<span class="page-info" id="page-info">Page 1 of 1</span>
@@ -138,17 +165,11 @@
</div>
</div>
</main>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
Click To Download
</a>
</div>
@@ -156,7 +177,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/anime/anime.js"></script>
</body>
</html>

2
views/anime/animes.html
View File

@@ -35,7 +35,7 @@
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<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">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>

39
views/books/book.html
View File

@@ -23,6 +23,42 @@
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="form-group">
<label>Status</label>
<select id="modal-status" class="form-input">
<option value="WATCHING">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
</select>
</div>
<div class="form-group">
<label id="modal-progress-label">Chapters Read</label>
<input type="number" id="modal-progress" class="form-input" min="0" placeholder="0">
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="modal-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
</div>
<div class="modal-actions">
<button class="btn-modal-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-modal-danger" id="modal-delete-btn" onclick="deleteFromList()" style="display: none;">Remove</button>
<button class="btn-modal-primary" onclick="saveToList()">Save</button>
</div>
</div>
</div>
</div>
<a href="/books" 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>
@@ -81,9 +117,8 @@
<button class="btn-primary" id="read-start-btn">
Start Reading
</button>
<button class="btn-secondary">+ Add to Library</button>
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
</div>
</div>
<div class="chapters-section">
<div class="section-title">

2
views/books/books.html
View File

@@ -36,7 +36,7 @@
<button class="nav-button active">Books</button>
<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">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>

114
views/css/anime/anime.css
View File

@@ -9,6 +9,8 @@
--radius-md: 12px;
--radius-lg: 24px;
--radius-full: 9999px;
--danger: #ef4444;
--success: #22c55e;
}
body {
@@ -198,9 +200,15 @@ body {
font-size: 1rem;
border: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
transition: background 0.2s;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
.description-box {
margin-top: 3rem;
@@ -263,6 +271,7 @@ body {
.sidebar { display: none; }
}
/* Modal Styles */
.modal-overlay {
display: none;
position: fixed;
@@ -274,6 +283,7 @@ body {
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
padding: 2rem;
}
.modal-overlay.active {
display: flex;
@@ -296,6 +306,11 @@ body {
.modal-overlay.active .modal-content {
transform: scale(1);
}
.modal-content.modal-list {
max-width: 500px;
}
.modal-close {
position: absolute;
top: 1.5rem;
@@ -318,7 +333,89 @@ body {
font-size: 1.1rem;
color: #e4e4e7;
}
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
.modal-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-input {
background: var(--bg-base);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-primary);
padding: 0.8rem 1rem;
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
transition: 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.modal-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
flex: 1;
}
.btn-modal-primary {
background: var(--accent);
color: white;
}
.btn-modal-primary:hover {
transform: scale(1.05);
}
.btn-modal-secondary {
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
}
.btn-modal-secondary:hover {
background: rgba(255,255,255,0.15);
}
.btn-modal-danger {
background: var(--danger);
color: white;
}
.btn-modal-danger:hover {
opacity: 0.9;
}
.read-more-btn {
background: none;
@@ -406,4 +503,15 @@ body {
color: #a1a1aa;
font-size: 0.9rem;
font-weight: 500;
}
/* Asegura que por defecto esté oculto si quitaste el style en línea */
#add-list-modal {
display: none;
}
/* Define cómo se muestra al abrirlo */
#add-list-modal.active {
display: flex;
opacity: 1;
}

143
views/css/books/book.css
View File

@@ -216,4 +216,147 @@ body {
.sidebar { display: none; }
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
}
/* ==================================== */
/* MODAL STYLES (Add to Library Modal) */
/* ==================================== */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
z-index: 2000;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
padding: 2rem;
}
.modal-overlay.active {
display: flex;
opacity: 1;
}
.modal-content {
background: #18181b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 2.5rem;
max-width: 650px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: scale(0.95);
transition: transform 0.3s;
}
.modal-overlay.active .modal-content {
transform: scale(1);
}
.modal-content.modal-list {
max-width: 500px;
}
.modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; }
.modal-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-input {
background: var(--bg-base);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-primary);
padding: 0.8rem 1rem;
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
transition: 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); /* Usar el color acento */
}
.modal-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.btn-modal-primary, .btn-modal-secondary, .btn-modal-danger {
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
flex: 1;
}
.btn-modal-primary {
background: var(--accent);
color: white;
}
.btn-modal-primary:hover {
transform: scale(1.05);
}
.btn-modal-secondary {
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
}
.btn-modal-secondary:hover {
background: rgba(255,255,255,0.15);
}
.btn-modal-danger {
background: #ef4444; /* Usar el color danger */
color: white;
}
.btn-modal-danger:hover {
opacity: 0.9;
}

635
views/css/list.css Normal file
View File

@@ -0,0 +1,635 @@
:root {
--bg-base: #09090b;
--bg-surface: #121215;
--bg-surface-hover: #1e1e22;
--accent: #8b5cf6;
--accent-glow: rgba(139, 92, 246, 0.4);
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--radius-md: 12px;
--radius-lg: 24px;
--nav-height: 80px;
--danger: #ef4444;
--success: #22c55e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-base);
color: var(--text-primary);
font-family: 'Inter', system-ui, sans-serif;
overflow-x: hidden;
padding-top: var(--nav-height);
}
/* Navbar Styles */
.navbar {
width: 100%;
height: var(--nav-height);
position: fixed;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3rem;
background: rgba(9, 9, 11, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-brand {
font-weight: 900;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
letter-spacing: -0.5px;
color: white;
text-decoration: none;
cursor: pointer;
}
.brand-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-icon img {
width: 70%;
height: 70%;
object-fit: contain;
}
.nav-center {
display: flex;
gap: 0.5rem;
background: rgba(255,255,255,0.03);
padding: 0.4rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.05);
}
.nav-button {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.6rem 1.5rem;
border-radius: 999px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.nav-button:hover { color: white; }
.nav-button.active {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
}
.search-wrapper {
position: relative;
width: 300px;
}
.search-input {
width: 100%;
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;
font-family: inherit;
transition: 0.2s;
}
.search-input:focus {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
box-shadow: 0 0 15px var(--accent-glow);
outline: none;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-secondary);
}
/* Container */
.container {
max-width: 1600px;
margin: 0 auto;
padding: 3rem;
}
/* Header Section */
.header-section {
margin-bottom: 3rem;
}
.page-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 2rem;
background: linear-gradient(135deg, var(--accent), #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius-md);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform 0.3s, border-color 0.3s;
}
.stat-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.stat-value {
font-size: 2.5rem;
font-weight: 900;
color: var(--accent);
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 600;
}
/* Filters Section */
.filters-section {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--bg-surface);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 150px;
}
.filter-group label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-select {
background: var(--bg-base);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-primary);
padding: 0.7rem 1rem;
border-radius: 8px;
font-family: inherit;
cursor: pointer;
transition: 0.2s;
}
.filter-select:hover {
border-color: var(--accent);
}
.filter-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.view-toggle {
display: flex;
gap: 0.5rem;
}
.view-btn {
background: var(--bg-base);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-secondary);
padding: 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.view-btn:hover {
border-color: var(--accent);
color: white;
}
.view-btn.active {
background: var(--accent);
border-color: var(--accent);
color: white;
}
/* Loading State */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 0;
gap: 1.5rem;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(139, 92, 246, 0.1);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 0;
gap: 1.5rem;
color: var(--text-secondary);
}
.empty-state svg {
opacity: 0.3;
}
.empty-state h2 {
font-size: 1.8rem;
color: var(--text-primary);
}
/* List Grid View */
.list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
}
.list-grid.list-view {
grid-template-columns: 1fr;
}
.list-item {
background: var(--bg-surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: transform 0.3s, border-color 0.3s;
}
.list-item:hover {
transform: translateY(-8px);
border-color: var(--accent);
}
.list-grid.list-view .list-item {
display: flex;
flex-direction: row;
}
.list-grid.list-view .list-item:hover {
transform: translateX(8px);
}
.item-poster {
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
background: #222;
}
.list-grid.list-view .item-poster {
width: 120px;
height: 180px;
aspect-ratio: auto;
}
.item-content {
padding: 1rem;
}
.list-grid.list-view .item-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-grid.list-view .item-title {
font-size: 1.3rem;
white-space: normal;
}
.item-meta {
display: flex;
gap: 0.5rem;
margin-bottom: 0.8rem;
flex-wrap: wrap;
}
.meta-pill {
font-size: 0.75rem;
padding: 0.3rem 0.7rem;
border-radius: 6px;
font-weight: 600;
white-space: nowrap;
}
.status-pill {
background: rgba(139, 92, 246, 0.15);
color: var(--accent);
border: 1px solid rgba(139, 92, 246, 0.3);
}
.source-pill {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
border: 1px solid rgba(168, 85, 247, 0.3);
}
.progress-bar-container {
background: rgba(255,255,255,0.05);
border-radius: 999px;
height: 6px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), #a78bfa);
border-radius: 999px;
transition: width 0.3s;
}
.progress-text {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
}
.score-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-weight: 700;
color: var(--success);
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.modal-content {
background: var(--bg-surface);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
max-width: 500px;
width: 100%;
padding: 2rem;
position: relative;
animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: white;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: 0.2s;
}
.modal-close:hover {
background: var(--danger);
border-color: var(--danger);
}
.modal-title {
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 1.5rem;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
}
.form-input {
background: var(--bg-base);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text-primary);
padding: 0.8rem 1rem;
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
transition: 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.modal-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.btn-primary, .btn-secondary, .btn-danger {
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
flex: 1;
}
.btn-primary {
background: var(--accent);
color: white;
}
.btn-primary:hover {
transform: scale(1.05);
}
.btn-secondary {
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.15);
}
.btn-danger {
background: var(--danger);
color: white;
}
.btn-danger:hover {
opacity: 0.9;
}
/* Responsive */
@media (max-width: 768px) {
.navbar {
padding: 0 1.5rem;
}
.container {
padding: 2rem 1.5rem;
}
.page-title {
font-size: 2rem;
}
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
.filters-section {
flex-direction: column;
}
.list-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
.meta-pill {
padding: 0.3rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
}
/* Estilo para la píldora de tipo (opcional, para diferenciar) */
.type-pill {
background: rgba(255, 165, 0, 0.2); /* Naranja suave */
color: #ffb74d;
border: 1px solid rgba(255, 165, 0, 0.3);
}
/* Si usas la convención de colores de tu proyecto (e.g., violeta para extensión), puedes usar eso: */
.source-pill {
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Ejemplo de color para la píldora de estado si no lo tienes */
.status-pill {
background: rgba(34, 197, 94, 0.2); /* Verde de ejemplo */
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}

199
views/list.html Normal file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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/list.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<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" 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>
</div>
<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">
<div class="search-results" id="search-results"></div>
</div>
</nav>
<div class="container">
<div class="header-section">
<h1 class="page-title">My Anime List</h1>
<div class="stats-row">
<div class="stat-card">
<span class="stat-value" id="total-count">0</span>
<span class="stat-label">Total Entries</span>
</div>
<div class="stat-card">
<span class="stat-value" id="watching-count">0</span>
<span class="stat-label">Watching</span>
</div>
<div class="stat-card">
<span class="stat-value" id="completed-count">0</span>
<span class="stat-label">Completed</span>
</div>
<div class="stat-card">
<span class="stat-value" id="planned-count">0</span>
<span class="stat-label">Plan to Watch</span>
</div>
</div>
</div>
<div class="filters-section">
<div class="filter-group">
<label>Status</label>
<select id="status-filter" class="filter-select">
<option value="all">All Status</option>
<option value="WATCHING">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Watch</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
</select>
</div>
<div class="filter-group">
<label>Source</label>
<select id="source-filter" class="filter-select">
<option value="all">All Sources</option>
<option value="anilist">AniList</option>
</select>
</div>
<div class="filter-group">
<label>Type</label>
<select id="type-filter" class="filter-select">
<option value="all">All Types</option>
<option value="ANIME">Anime</option>
<option value="MANGA">Manga</option>
<option value="NOVEL">Novel</option>
</select>
</div>
<div class="filter-group">
<label>Sort By</label>
<select id="sort-filter" class="filter-select">
<option value="updated">Last Updated</option>
<option value="title">Title (A-Z)</option>
<option value="score">Score (High-Low)</option>
<option value="progress">Progress</option>
</select>
</div>
<div class="filter-group">
<label>View</label>
<div class="view-toggle">
<button class="view-btn active" data-view="grid">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
</svg>
</button>
<button class="view-btn" data-view="list">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="3" y="5" width="18" height="2" rx="1"/>
<rect x="3" y="11" width="18" height="2" rx="1"/>
<rect x="3" y="17" width="18" height="2" rx="1"/>
</svg>
</button>
</div>
</div>
</div>
<div id="loading-state" class="loading-state">
<div class="spinner"></div>
<p>Loading your list...</p>
</div>
<div id="empty-state" class="empty-state" style="display: none;">
<svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
<h2>Your list is empty</h2>
<p>Start adding anime to track your progress</p>
<button class="btn-primary" onclick="window.location.href='/'">Browse Anime</button>
</div>
<div id="list-container" class="list-grid"></div>
</div>
<div class="modal-overlay" id="edit-modal" style="display: none;">
<div class="modal-content">
<button class="modal-close" onclick="closeEditModal()">✕</button>
<h2 class="modal-title">Edit Entry</h2>
<div class="modal-body">
<div class="form-group">
<label>Status</label>
<select id="edit-status" class="form-input">
<option value="WATCHING">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Watch</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
</select>
</div>
<div class="form-group">
<label for="edit-progress">Progress</label>
<input type="number" id="edit-progress" class="form-input" min="0">
</div>
<div class="form-group">
<label>Score (0-10)</label>
<input type="number" id="edit-score" class="form-input" min="0" max="10" step="0.1">
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="closeEditModal()">Cancel</button>
<button class="btn-danger" onclick="deleteEntry()">Delete</button>
<button class="btn-primary" onclick="saveEntry()">Save Changes</button>
</div>
</div>
</div>
</div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
Click To Download
</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/list.js"></script>
</body>
</html>

2
views/marketplace.html
View File

@@ -36,7 +36,7 @@
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<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">My List</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button active">Marketplace</button>
</div>

2
views/schedule.html
View File

@@ -40,7 +40,7 @@
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button active">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>