195 lines
10 KiB
HTML
195 lines
10 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>Dashboard - 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/dashboard.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">
|
|
<label for="avatar-upload" class="avatar-edit-overlay">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</label>
|
|
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
|
</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" 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="section-header-row">
|
|
<h2>Local Library</h2>
|
|
<div class="actions">
|
|
<button id="scan-incremental-btn" class="btn-primary">Update Library</button>
|
|
<button id="scan-full-btn" class="btn-blur">Full Rescan</button>
|
|
</div>
|
|
</div>
|
|
<div class="local-stats-grid">
|
|
<div class="local-card"><h3>Anime Files</h3><p id="local-anime-count">0</p></div>
|
|
<div class="local-card"><h3>Manga Files</h3><p id="local-manga-count">0</p></div>
|
|
<div class="local-card"><h3>Novel Files</h3><p id="local-novel-count">0</p></div>
|
|
</div>
|
|
<div class="console-output" id="scan-console" style="display: none;">
|
|
<div class="spinner small"></div> <span id="scan-status-text">Scanning...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section-settings" class="tab-section">
|
|
<div class="settings-layout">
|
|
<div class="settings-card">
|
|
<h3>Edit Profile</h3>
|
|
<form id="profile-form">
|
|
<div class="form-group">
|
|
<label>Display Name</label>
|
|
<input type="text" id="setting-username" class="input-modern" placeholder="Username">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Avatar Source</label>
|
|
<div class="avatar-options">
|
|
<button type="button" class="btn-secondary small" onclick="document.getElementById('avatar-upload').click()">Upload File</button>
|
|
<span class="divider-text">OR</span>
|
|
<input type="text" id="setting-avatar-url" class="input-modern" placeholder="Paste Image URL (https://...)">
|
|
</div>
|
|
<small style="color: var(--color-text-muted); display:block; margin-top:5px;">
|
|
* If you upload a file, it will be converted automatically. The text box above is only for external URLs.
|
|
</small>
|
|
</div>
|
|
<button type="submit" class="btn-primary full-width">Save Profile Changes</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="settings-stack">
|
|
<div class="settings-card">
|
|
<h3>Security</h3>
|
|
<form id="password-form">
|
|
<div class="form-group">
|
|
<label>Current Password</label>
|
|
<input type="password" id="current-password" class="input-modern" placeholder="••••••">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>New Password</label>
|
|
<input type="password" id="new-password" class="input-modern" placeholder="••••••">
|
|
</div>
|
|
<button type="submit" class="btn-blur full-width">Update Password</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3>Integrations</h3>
|
|
<div class="integration-item">
|
|
<div class="int-icon anilist-bg"><img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL"></div>
|
|
<div class="int-details">
|
|
<strong>AniList</strong>
|
|
<span id="anilist-status">Checking...</span>
|
|
</div>
|
|
<button id="anilist-action-btn" class="btn-sm">Connect</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card danger-zone">
|
|
<h3>Danger Zone</h3>
|
|
<button id="logout-btn" class="btn-danger">Log Out</button>
|
|
</div>
|
|
</div>
|
|
</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">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/dashboard.js"></script>
|
|
</body>
|
|
</html> |