Files
WaifuBoard/docker/views/profile.html

225 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>Profile - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/profile.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
</head>
<body>
<div class="main-wrapper">
<section class="profile-header">
<div class="profile-banner"></div> <div class="profile-body">
<div class="profile-avatar-wrapper">
<img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
</div>
<div class="profile-details">
<div class="profile-text">
<div class="username-wrapper">
<h1 id="user-username">Loading...</h1>
<a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
</a>
</div>
</div>
<div class="profile-stats-grid">
<div class="stat-card">
<span class="stat-value" id="total-stat">0</span>
<span class="stat-label">Total Entries</span>
</div>
<div class="stat-card">
<span class="stat-value" id="anime-stat">-</span>
<span class="stat-label">Anime</span>
</div>
<div class="stat-card">
<span class="stat-value" id="manga-stat">-</span>
<span class="stat-label">Manga</span>
</div>
</div>
</div>
</div>
<div class="hub-navigation-modern">
<button class="nav-pill active" data-target="tracking">Tracking List</button>
<button class="nav-pill" data-target="local">Local Library</button>
<button class="nav-pill" data-target="settings">Settings</button>
</div>
</section>
<div class="content-container">
<div id="section-tracking" class="tab-section active">
<div class="toolbar">
<div class="search-box">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" id="tracking-search-input" class="search-input" placeholder="Search your list...">
</div>
<div class="filters-inline">
<select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
<select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
<select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
<div class="view-toggle">
<button class="view-btn active" data-view="grid"></button>
<button class="view-btn" data-view="list"></button>
</div>
</div>
</div>
<div id="loading-state" class="loading-state"><div class="spinner"></div></div>
<div id="empty-state" class="empty-state" style="display: none;">
<p>No content found</p>
<a href="/anime" class="btn-blur">Discover Content</a>
</div>
<div id="list-container" class="list-grid"></div>
</div>
<div id="section-local" class="tab-section">
<div class="toolbar local-toolbar">
<div class="search-box">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" id="local-search-input" class="search-input" placeholder="Filter local files...">
</div>
<div class="local-type-switcher">
<button class="type-pill-btn active" onclick="switchLocalType('anime', this)">Anime</button>
<button class="type-pill-btn" onclick="switchLocalType('manga', this)">Manga</button>
<button class="type-pill-btn" onclick="switchLocalType('novels', this)">Novels</button>
</div>
<div class="actions-group">
<button id="scan-incremental-btn" class="action-icon-btn" title="Update Library (Fast)">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</button>
<button id="scan-full-btn" class="action-icon-btn danger" title="Full Rescan (Slow)">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</div>
<div class="console-output" id="scan-console" style="display: none;">
<div class="spinner small"></div>
<span id="scan-status-text">Scanning folders...</span>
</div>
<div id="local-list-container" class="list-grid"></div>
<div id="local-loading" class="loading-state" style="display: none;">
<div class="spinner"></div>
</div>
</div>
<div id="section-settings" class="tab-section">
<div class="stream-settings-container">
<div class="stream-section">
<h3 class="section-label">Profile</h3>
<form id="profile-form" class="stream-profile-row">
<div class="stream-avatar-wrapper">
<img id="setting-avatar-preview" src="/public/assets/placeholder.svg" alt="Avatar">
<div class="avatar-overlay" onclick="document.getElementById('avatar-upload').click()">
<span>Edit</span>
</div>
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
</div>
<div class="stream-inputs-col">
<div class="stream-input-group">
<label>Username</label>
<input type="text" id="setting-username" class="stream-input">
</div>
<div class="stream-actions">
<button type="submit" class="btn-stream-primary">Submit</button>
</div>
</div>
</form>
</div>
<div class="stream-section">
<h3 class="section-label">Change password</h3>
<form id="password-form" class="stream-form-row">
<div class="stream-input-group">
<label>Current password</label>
<input type="password" id="current-password" class="stream-input" placeholder="••••••">
</div>
<div class="stream-input-group">
<label>New password</label>
<input type="password" id="new-password" class="stream-input" placeholder="••••••">
</div>
<div class="stream-actions-inline">
<button type="submit" class="btn-stream-ghost">Update password</button>
</div>
</form>
</div>
<div class="stream-section">
<h3 class="section-label">Connections</h3>
<div class="stream-integration-row">
<div class="int-info">
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL" class="int-logo">
<div class="int-text">
<span class="int-name">AniList</span>
<span id="anilist-status" class="int-status">Checking...</span>
</div>
</div>
<button id="anilist-action-btn" class="btn-stream-outline">Manage</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="manual-match-modal" class="custom-modal-overlay hidden">
<div class="custom-modal-content">
<div class="modal-header">
<h3>Fix Match</h3>
<button class="close-modal-btn" onclick="DashboardApp.Library.closeManualMatch()">×</button>
</div>
<div class="modal-body">
<p class="modal-description">Introduce el ID de AniList correcto para asociar este archivo local.</p>
<div class="input-group">
<label>File Path / Folder Name</label>
<div id="manual-match-path" class="path-display"></div>
</div>
<div class="input-group">
<label>AniList ID</label>
<input type="number" id="manual-match-id" class="stream-input" placeholder="Ej: 21 (One Piece)">
</div>
</div>
<div class="modal-footer">
<button class="btn-secondary" onclick="DashboardApp.Library.closeManualMatch()">Cancel</button>
<button class="btn-primary" onclick="DashboardApp.Library.submitManualMatch()">Confirm Match</button>
</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">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/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/profile.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>
</html>