164 lines
6.9 KiB
HTML
164 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<base href="/">
|
|
<title>WaifuBoard Book</title>
|
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="/views/css/globals.css">
|
|
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
|
<link rel="stylesheet" href="/views/css/books/book.css">
|
|
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
<link rel="stylesheet" href="/views/css/components/match-modal.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>
|
|
<a href="/books" class="back-btn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
|
</svg>
|
|
Back
|
|
</a>
|
|
|
|
<div class="hero-wrapper">
|
|
<div class="hero-background">
|
|
<img id="hero-bg" src="" alt="">
|
|
</div>
|
|
<div class="hero-overlay"></div>
|
|
</div>
|
|
|
|
<div class="content-container">
|
|
|
|
<div class="book-header-section">
|
|
<h1 class="book-title" id="title">Loading...</h1>
|
|
|
|
<div class="hero-meta-info">
|
|
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
|
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
|
|
|
<span id="score">--% Score</span>
|
|
<span class="meta-separator">•</span>
|
|
<span id="published-date">----</span>
|
|
<span class="meta-separator">•</span>
|
|
<span id="status">--</span>
|
|
<span class="meta-separator">•</span>
|
|
<span id="format">--</span>
|
|
<span class="meta-separator">•</span>
|
|
<span id="chapters-count">-- Ch</span>
|
|
</div>
|
|
|
|
<div class="hero-description-mini" id="description"></div>
|
|
<div class="hero-tags" id="genres"></div>
|
|
|
|
<div class="action-row">
|
|
<button class="btn-read" id="read-start-btn">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
|
|
Start Reading
|
|
</button>
|
|
<button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-layout">
|
|
|
|
<aside class="poster-section">
|
|
<div class="poster-card">
|
|
<img id="poster" src="" alt="">
|
|
</div>
|
|
|
|
<div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
|
|
<h4 class="sidebar-label">Alternative Titles</h4>
|
|
<ul class="synonyms-list" id="synonyms-list">
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="content-column">
|
|
|
|
<div class="chapters-section">
|
|
<div class="chapters-header">
|
|
<h2>Chapters</h2>
|
|
|
|
<div class="chapter-controls">
|
|
<button id="manual-match-btn" class="glass-btn-icon" style="display: none;" title="Manual Match">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
</svg>
|
|
</button>
|
|
<select id="provider-filter" class="glass-select" style="display: none;">
|
|
<option value="all">All Providers</option>
|
|
</select>
|
|
|
|
<div id="language-selector-container" class="control-group hidden">
|
|
<select id="language-select" class="glass-select"></select>
|
|
</div>
|
|
|
|
<div class="search-box">
|
|
<input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
|
|
</div>
|
|
|
|
<button id="sort-btn" class="glass-btn-icon" title="Sort">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chapters-list" class="chapters-grid"></div>
|
|
<div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
|
|
|
|
<div class="pagination-controls" id="pagination" style="display:none;">
|
|
<button class="page-btn" id="prev-page">Previous</button>
|
|
<span class="page-info" id="page-info">Page 1</span>
|
|
<button class="page-btn" id="next-page">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
|
<h3 class="subsection-title">Relations</h3>
|
|
<div class="relations-horizontal" id="relations-list"></div>
|
|
</div>
|
|
|
|
<section class="content-section">
|
|
<h2 class="subsection-title">Characters</h2>
|
|
<div class="characters-grid" id="characters-list"></div>
|
|
</section>
|
|
|
|
</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/utils/auth-utils.js"></script>
|
|
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
<script src="/src/scripts/utils/url-utils.js"></script>
|
|
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
|
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
|
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
<script src="/src/scripts/utils/match-modal.js"></script>
|
|
<script src="/src/scripts/books/book.js"></script>
|
|
<script src="/src/scripts/auth-guard.js"></script>
|
|
</body>
|
|
</html> |