238 lines
12 KiB
HTML
238 lines
12 KiB
HTML
<!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">
|
||
<link rel="stylesheet" href="/views/css/components/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>
|
||
|
||
<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> |