wip implementation of local library on anime
This commit is contained in:
@@ -158,6 +158,7 @@
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
|
||||
@@ -9,17 +9,19 @@
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/local-library.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<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>
|
||||
<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="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
@@ -121,8 +123,102 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Online Mode Content -->
|
||||
<main id="online-content">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue watching</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
||||
<div class="carousel" id="my-status">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Local Library Mode Content -->
|
||||
<main id="local-content" class="hidden">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Local Anime Library</div>
|
||||
<button class="btn-secondary" onclick="scanLocalLibrary()">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M21 12a9 9 0 1 1-9-9"/>
|
||||
<path d="M21 3v6h-6"/>
|
||||
</svg>
|
||||
<span id="scan-text">Scan Library</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="local-filters">
|
||||
<div class="filter-group">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
<button class="filter-btn" data-filter="watching">Watching</button>
|
||||
<button class="filter-btn" data-filter="completed">Completed</button>
|
||||
<button class="filter-btn" data-filter="unwatched">Unwatched</button>
|
||||
<button class="filter-btn" data-filter="unlinked">Unlinked</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<button class="filter-btn" data-sort="az">A–Z</button>
|
||||
<button class="filter-btn" data-sort="recent">Recent</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="local-library-grid" id="local-entries-grid">
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
@@ -130,11 +226,10 @@
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="WATCHING">Watching/Reading</option>
|
||||
<option value="WATCHING"><Watchi></Watchi>ng/Reading</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Planning</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
@@ -180,7 +275,6 @@
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -191,63 +285,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue watching</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
||||
<div class="carousel" id="my-status">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
@@ -258,6 +299,7 @@
|
||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/anime/animes.js"></script>
|
||||
<script src="/src/scripts/local-library.js"></script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user